main{
  width:100%;
  min-height:100%;
  min-height:100vh;
  position:relative;
}
div.sm_header_margin{
  position:relative;
  width:100%;
  background-color:#ffffff;
}
div.sm_main_container{
  position:relative;
  width:100%;
  min-height:100vh;
}
div.sm_main_container_in{
  position:relative;
  height:100%;
  width:100%;
}
div.sm_main_cont{
  position:relative;
  height:100%;
  width:100%;
  text-align:center;
}
div.sm_main_cont_in{
  position:relative;
  height:100%;
  width:100%;
  text-align:center;
  display:flex;
  align-items: center;
  -webkit-align-items:center;
}
button.sm_main_button{
  position:absolute;
  top:0px;
  height:100%;
  padding:0px;
  text-align:center;
  width:36px;
  min-width:0px;
  z-index:30000;
}
button.sm_main_button.sm_main_button_left{
  left:0px;
}
button.sm_main_button.sm_main_button_right{
  right:0px;
}
div.sm_main_cont > div{
  position:relative;
  width:100%;
  height:100%;
}
div.sm_main_cont_in > div{
  position:relative;
  width:100%;
}
div.sm_main_container_info{
  background-color:#eeeeee;
}
div.sm_main_cont_navigator_bottom{
  position:absolute !important;
  bottom:0px !important;
  width:100%;
  height:auto !important;
  text-align:center;
  left:0px;
  padding:16px;
}
div.sm_main_cont_navigator_bottom > button{
  border:1px solid #222222;
}
div.sm_main_cont_navigator_top{
  position:absolute !important;
  top:0px;
  width:100%;
  text-align:center;
  left:0px;
  padding:16px;
}
div.sm_main_cont_navigator_top > button{
  border:1px solid #222222;
}
div.mat_main_logo{
  position:relative;
  width:100%;
  text-align:center;
  overflow:hidden;
}
div.mat_main_logo > a{
  margin:auto;
}
img.mat_main_logo{
  margin:auto auto 24px;
  min-width:250px;
  width:22%;
}
form.mat_main_input{
  position:relative;
  width:100%;
  text-align:center;
  margin:auto;
}
div.mat_main_input{
  position:relative;
  text-align:center;
  margin:auto;
}
input.mat_main_input{
  width:100%;
  font-size:18px;
  padding:12px 72px 12px 24px;
  border-radius:24px;
  border:0px;
  background-color:#ddd;
  outline: none;
  transition:all .5s;
}
input.mat_main_input:focus{
  background-color:#eee;
}
button.periodic_table_button{
  position:absolute;
  text-transform: none;
  height:100%;
  top:0px;
  font-family:'Raleway', sans-serif;
  right:56px;
  background-color:#ffffff;
  color:#222222;
}
h2.sm_database_info{
  font-size:24px;
  text-align:center;
  font-family:'Raleway', sans-serif;
  color:#444444;
  position:relative;
  margin:0px 0px 4px 0px;
  opacity:0;
  line-height:1.2;
  transition:opacity .5s;
}
h2.sm_database_info.is-active{
  opacity:1;
}
h2.sm_database_info2{
  font-size:18px;
  text-align:center;
  font-family:'Raleway', sans-serif;
  color:#444444;
  position:relative;
  margin:0px 0px 4px 0px;
  opacity:0;
  line-height:1.2;
  transition:opacity .5s;
}
h2.sm_database_info2.is-active{
  opacity:1;
}
h3.sm_database_update{
  font-size:18px;
  text-align:center;
  font-family:'Raleway', sans-serif;
  color:#888888;
  position:relative;
  line-height:1.2;
  margin:0px 0px 18px 0px;
  opacity:0;
  transition:opacity .5s;
}
h3.sm_database_update.is-active{
  opacity:1;
}
div.sm_database_statistic{
  position:relative;
  width:100%;
  height:350px;
}
div.sm_database_statistic_in{
  border-bottom:1px solid #666666;
  width:100%;
  position:relative;
  height:314px;
  display:flex;
}
div.sm_database_statistic_in > div{
  padding:6px 4px 0px 4px;
  position:relative;
  height:100%;
  flex:1;
}
div.ani_in{
  position:absolute;
  bottom:0px;
  height:0px;
  left:4px;
  transition:all .5s;
  width:calc(100% - 8px);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  padding:16px 2px;
  word-break: keep-all;

  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  display: inline-block;
  opacity:0;
  color:#ffffff;
  font-size:16px;
}
div.ani_in:hover{
  opacity:1 !important;
  transform:scale(1.05);
  height:100% !important;
}
div.ani_in.is-active{
  opacity:0.7;
}
div.sm_database_statistic_text{
  width:100%;
  position:relative;
  height:36px;
  display:flex;
}
h1.second_container{
  font-size:28px;
  text-align:center;
  font-family:'Raleway', sans-serif;
  width:100%;
  margin:0px 0px 24px 0px;
}
h2.second_container{
  font-size:20px;
  text-align:center;
  font-family:'Raleway', sans-serif;
  width:100%;
  margin:0px 0px 12px 0px;
}
div.second_container_card{
  position:relative;
  width:100%;
  border-radius:6px;
  border:1px solid #eeeeee;
  background-color:#ffffff;
  transition:background-color .3s;
  margin-bottom:12px;
  padding:16px 16px;
}
div.second_container_card:hover{
  background-color:#eeeeee;
}
div.second_container_card > p{
  margin:0px;
  text-align:left;
  font-size:18px;
  font-family:'Raleway', sans-serif;
}
span.second_container_card{
  margin:0px;
  text-align:left;
  font-size:18px;
  margin-left:16px;
  color:#666666;
  font-family:'Raleway', sans-serif;
}
button[sm-role='SEARCH']{
  text-transform:none;
  color:#ffffff;
  padding:0px;
  min-width:0px;
  position:absolute;
  top:0px;
  right:0px;
  height:100%;
  border-top-right-radius:24px;
  border-bottom-right-radius:24px;
  width:56px;
}
div[sm-role='data-lab']{
  position:relative;
  width:100%;
  padding:12px;
  text-align:left;
}
div[sm-role='data-lab'] > a{
  font-size:16px;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}
p.data-lab{
  margin:0px;
  vertical-align: middle;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  display:inline-block;
}
a.data-lab-recommandation{
  color:#888888;
  font-size:16px;
  margin:0px 4px 0px 12px;
  vertical-align: middle;
  border:0px;
  transition:color .5s;
  cursor:pointer;
}
a.data-lab-recommandation:hover{
  color:#222222;
  border-bottom:1px solid #222222;
}
span.data-lab::after{
  background-color:rgba(255,255,255,0) !important;
  color:#666666 !important;
}
@media (min-width: 1281px) {
  div.mat_main_panel{
    padding:64px;
  }
  p.mat_main_title{
    padding-right:300px;
  }
  div.mat_main_input{
    width:600px;
  }
  div.mat_main_element_box{
    width:800px;
    position:relative;
    margin:auto;
  }
}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  div.mat_main_panel{
    padding:32px;
  }
  p.mat_main_title{
    padding-right:300px;
  }
  div.mat_main_input{
    width:600px;
  }
  div.mat_main_element_box{
    position:relative;
    margin:auto;
    width:800px;
  }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  div.mat_main_panel{
    padding:32px;
  }
  p.mat_main_title{
    padding-right:300px;
  }
  div.mat_main_input{
    width:450px;
  }
  div.mat_main_element_box{
    padding:16px 5%;
  }
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  div.mat_main_panel{
    padding:32px;
  }
  p.mat_main_title{
    padding-right:300px;
  }
  div.mat_main_input{
    width:450px;
  }
  div.mat_main_element_box{
    padding:16px 5%;
  }
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  div.mat_main_panel{
    padding:32px;
  }
  div.mat_main_input{
    width:300px;
  }
  div.mat_main_element_box{
    padding:16px 32px;
  }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  div.mat_main_input{
    width:300px;
  }
  div.mat_main_element_box{
    padding:16px;
  }
}