@font-face {
  font-family: 'phenix';
  src:  url('/phenix/assets/fonts/fonts-phenix/phenix.eot?mbukzl');
  src:  url('/phenix/assets/fonts/fonts-phenix/phenix.eot?mbukzl#iefix') format('embedded-opentype'),
    url('/phenix/assets/fonts/fonts-phenix/phenix.ttf?mbukzl') format('truetype'),
    url('/phenix/assets/fonts/fonts-phenix/phenix.woff?mbukzl') format('woff'),
    url('/phenix/assets/fonts/fonts-phenix/phenix.svg?mbukzl#phenix') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'cera-pro';
  src:  url('/phenix/assets/fonts/cera/Cera Pro Regular.otf');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'cera-pro';
  src:  url('/phenix/assets/fonts/cera/Cera Pro Bold.otf');
  font-weight: bold;
  font-style: normal;
  font-display: block;
}
[class^="icon"], [class*=" icon"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'phenix' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 :root{
  --main-color: #00BCD4;
  }

.table-login
{
display: none
}

#top-bar
{
  background: var(--main-color);
  height: 35px;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 1px 0px 20px 20px;
  box-shadow: 1px 1px 6px #bdb3b3;
}

.img img
{
  width: 120px;
  padding-bottom: 17px;
}

body
{
  height: auto;
  /*background:  #f5f5f5;
  */
  background-image:url("/phenix/assets/images/bg-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

body::before
{
}

.form-box
{
  font: 95% Arial, Helvetica, sans-serif;
  max-width: 400px;
  margin: 10px auto;
  padding: 16px;
  //background: #F7F7F7;
}

.form-box h1
{
  background: var(--main-color);
  padding: 20px 0;
  font-size: 140%;
  font-weight: 300;
  text-align: center;
  color: #fff;
  margin: -16px -16px 16px -16px;
}

.form-box input[type="text"],.form-box input[type="date"],.form-box input[type="datetime"],.form-box input[type="email"],.form-box input[type="number"],.form-box input[type="search"],.form-box input[type="time"],.form-box input[type="url"],.form-box input[type="password"],.form-box textarea,.form-box select
{
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  background: #fff;
  margin-bottom: 4%;
  border: 1px solid #ccc;
  padding: 3%;
  color: #555;
  /* font: 95% Arial, Helvetica, sans-serif;
  */
  padding-left: 30px;
}

.form-box input[type="text"]:focus,.form-box input[type="password"]:focus,.form-box input[type="date"]:focus,.form-box input[type="datetime"]:focus,.form-box input[type="email"]:focus,.form-box input[type="number"]:focus,.form-box input[type="search"]:focus,.form-box input[type="time"]:focus,.form-box input[type="url"]:focus,.form-box textarea:focus,.form-box select:focus
{
  box-shadow: 0 0 5px var(--main-color);
  padding: 3%;
  border: 1px solid var(--main-color);
  padding-left: 26px;
}

.form-box input[type="submit"],.form-box input[type="button"]
{
  width: 100%;
  padding: 3%;
  background: var(--main-color);
  border: none;

  color: #fff;
}

.form-box input[type="submit"]:hover,.form-box input[type="button"]:hover
{
background: #2EBC99;
}
.padding-btn button:hover > a
{
  color: #fff;
  text-decoration: none;
}
.img-logo img
{
    /* width: 245px; */
    padding-bottom: 10px;
    /* width: 100%; */
    max-height: 125px;
    max-width: 100%;

}
a{
  text-decoration: none!important;
}

.box
{
    display: flex;
    background-color: #fff;
    box-shadow: 0px 5px 20px 5px #ccc;
    border-radius: 2px;
    opacity: 0;
/*    margin-top: 20%;*/
    padding: 4%;
/*    -webkit-transition: all 0.5s;*/
/*     transition: all 0.5s;*/
}
.text-topbar{
  color: #fff;
  top: 6px;
  font-weight: bold;
  font-family: 'cera-pro';
}


.test{
  position: relative;
}



span
{
position: relative;
}

.img-left
{
text-align: center;
}

.conx-icon li
{
background: var(--main-color);
margin: 3px;
list-style-type: none;
padding: 6px;
width: 100%;
}

.conx-icon li a
{
color: #fff;
}

.conx-icon
{
display: flex;
padding: 0;
}

.conx-icon li img
{
width: 100px;
}

.office img
{
width: 16px;
height: 16px;
margin-top: -5px;
}

button.office
{
background: #fff;
margin-top: 9px;
padding: 4px;
border: none;
box-shadow: 1px 1px 3px #7d6f6f;
border-radius: 3px;
width: 98%;
}

button.office:hover
{
background: var(--main-color);
color: #fff;
}
.icon-phenix:before {
  content: "\e900";
  color: #f00;
}
#phenixFooter {

    background-color: var(--main-color);

}
.img-left{
      padding-top: 20%;
}

.iconphenix:before {
  content: "\e900";
  color: var(--main-color);}
.color{
    background: var(--main-color);
    padding: 6px;
    border-radius: 5px;
    color: #fff;
    font-family: 'cera-pro';
}
.padding-btn{
  padding: 0!important;
  margin: 0!important;
}
.form-box input[type="submit"]:hover, .form-box input[type="button"]:hover {

    width: 100%;
    padding: 3%;
    background: var(--main-color-hover);
    border: none;

    color: #fff;
    box-shadow: 1px 1px 4px black;

}
.form-i i.fa{
    position: absolute;
    padding-top: 8px;
    font-size: 20px;
    left: 22px;
    color: var(--main-color);
}

.text-authentifier{
  padding-top: 10px;
  display: inline-block;
  padding-bottom: 6px;
  font-weight: bold;
}

@media only screen and (max-width: 600px) {
    .img-left {
      padding-top: 2%;
  }
   .box{
    display: inherit;
    border-radius: 0px;
    background: #55555514;
    padding: 0;
    margin-top: 16%;
    width: 100%;
   }
   button.office {
      background: #fff;
      margin-top: 9px;
      padding: 4px;
      border: none;
      box-shadow: 1px 1px 3px #7d6f6f;
      border-radius: 3px;
       width: 100%; 
  }
  #top-bar {
    background: var(--main-color);
    height: auto;
    width: 100%;
    padding: 0;
    padding-bottom: 6px;
    margin: 0;
    border-radius: 1px 0px 20px 20px;
    box-shadow: 1px 1px 6px #bdb3b3;
    font-size: 12px;
  }
  .color{
    font-size: 12px;
}
}