/* Header
----------------------------------------------- */

#main-nav, #main-nav nav{
  height: 90px;
  line-height: 90px;
}

nav .brand-logo {
  color: transparent;
  font-size: 20px;
  margin-left: 40px;
  width: 150px;
}

nav .brand-logo:before {
  display: inline-block;
  background-image: url("/images/fc_logo_v2.png");
  background-repeat: no-repeat;
  background-size: 150px 73px;
  content:" ";
  width: 150px;
  height: 73px;
  top: 10px;
  position: relative;
  left: -50px;
}


nav ul.side-nav li {
  float: none;
  display: block;
}

ul#main-navbar li {
  float: none;
  display: inline-block;
}

nav ul li.active {
  background-color: transparent;
}

nav ul li a:hover {
  color: #01579b !important;
  background-color: transparent;
  text-decoration: none;
}

nav ul li a.btn:hover {
  color: #FFFFFF !important;
  background-color: #1565c0 !important;
}

nav ul li.active a {
  color: #01579b !important;
  font-weight: bold;
}

nav .btn-become-partner, nav .btn-become-partner:hover{
  background: #09509E;
}

nav a.btn-become-partner:hover{
  color: #fff !important;
}

nav ul a {
  padding: 0 10px;
}

nav .user {
  color: #01579b;
}

.step-menu-navbar {
  z-index: 500;
}

.hide-on-med-and-down {
  line-height: 60px;
}

.sign-in-link {
  color: #01579b;
  display: block;
  line-height: 10px;
  text-align: center;
  font-size: 95%;
  text-decoration: underline;
}

/* Typography
----------------------------------------------- */

h1, h2, h3, h4 {
  color: #5a5a5a;
  font-weight: 100;
}

h6 {
  color: #5a5a5a;
  text-transform: uppercase;
  font-weight: bold;
}

.sub-title {
  line-height: 130%;
}

main h4 {
  margin-top: 3.8rem;
  margin-bottom: 2rem;
}

main h5 {
  margin: 2rem 0;
}

a {
  color: #01579B;
}

a:hover {
  text-decoration: underline;
}

/* TODO chevron */

hr.divider {
  border: medium none;
}

ul.list li {
  list-style-type: disc;
  margin-left: 20px;
}

ol li {
  list-style-type: decimal;
}

ol.steps {
  counter-reset: my-counter;
  padding-left: 0;
}

ol.steps li {
  list-style-type: none;
 margin-top: 20px;
}

ol.steps li:before {
  content: counter(my-counter)".";
  counter-increment: my-counter;
  font-weight: bold;
  margin-right: 0.5em;
}

a.active .flow-text {
  font-weight: bold;
  color: #01579b;
}

.exagon-container:hover a, .exagon-container:active a, .exagon-container:focus a {
  text-decoration: none;
}

footer a:hover, footer a:active, footer a:focus {
  text-decoration: none;
}

a.nav-link:hover, a.nav-link:active, a.nav-link:focus {
  text-decoration: none;
}

a.btn:hover, a.btn:active, a.btn:focus {
  text-decoration: none;
}

.brand-logo:hover, .brand-logo:active, .brand-logo:focus {
  text-decoration: none;
}

.quick-action:hover, .quick-action:active, .quick-action:focus {
  color: #01579b;
}

.input-field label.invalid {
  color: #f44336;
}

[type="radio"]:not(:checked)+label.invalid:before {

    border: 2px solid #F44336;

}

.bg-grey{ background: #eee; }

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

/* Home
----------------------------------------------- */

#hero {
  color: #fff;
}

#hero h1{
  font-size: 3.2rem;
  margin: 50px 0;
}

#hero h5{
  margin-bottom: 50px;
}

#hero #call-to-action{
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.4em 3em;
  height: auto;
  font-size: 18px;
}

#hero .powered-by{
  margin-top: 15px;
}

#hero.partner h1 {
  font-size: 4rem;
}

#promo, #what-is-it {
  background-color: white;
  padding: 3em 0 4em;
}

#promo{ padding: 10em 16vw 50px; }

#promo h4, #what-is-it h4{
  margin: 50px 0;
}

#promo p, #what-is-it p, p.intro, .intro p, #section-classic {
  font-weight: 300;
  line-height: 1.5em;
  font-size: 1.3rem;
}

#providers {

}

#number-of-connected {
  padding: 3em 0 0;
}

#providers h4 {
  margin-top: -50px;
  margin-bottom: 80px;
}

#providers .provider-screenshot{
  height: 250px;
}

#how-it-works {
  padding: 3em 0 4em;
}

#why-to-connect {
  background: #eee;
  padding: 3em 0 4em;
}

#why-to-connect .exagon-container {
  padding-top: 60px;
}

#why-to-connect .exagon-container h6{
  padding-top: 30px;
}

#how-it-works h4, #fis h4 {
  margin-bottom: 40px;
}

#how-it-works .item{
  background: #eee;
  text-align: center;
  height: 350px;
}

#how-it-works .item-wrap:last-child .item{
  background: #fff;
  border: 2px solid #eee;
}

#how-it-works .item .item-img{
  padding-top: 30px;
}

#how-it-works .item .item-img img{
  width: 90%;
}

#how-it-works .item-wrap:last-child .item .item-img{
  height: 35%;
}

#how-it-works .item-wrap:last-child .item .item-img img{
  width: auto;
}

#how-it-works .item-content{
  padding: 0 10px;
}

#how-it-works .item-content h6{
  font-weight: 300;
  text-transform: none;
  color: #121212;
  font-size: 2em;
}

#how-it-works .item-content p{
  color: #5a5a5a;
  margin-top: 0;
}

#how-it-works .item-wrap:last-child .item-content h6, #how-it-works .item-wrap:last-child .item-content p{
  color: #bbb;
}

#how-it-works .item-wrap:first-child .item .item-img{
  padding-top: 100px;
}

#how-it-works .item-wrap:last-child .item .item-img{
  padding-top: 20px;
}

#how-it-works .item-wrap:nth-child(2) .item .item-img{
  padding-top: 60px;
}

#call-to-action-question{
  text-align: center;
  margin-top: 20px;
}

#fis{
  padding: 3em 0 4em;
}

#fis p {
  padding-top: 20px;
}

#section-classic {
  padding: 3em 0;
}

section {
  padding-top: 34px;
  position: relative;
  width: 100%;
}

section h3 {
  text-align: center;
}

.exagon-container {
  padding-top: 40px;
}

.exagon-container h6 {
  padding-top: 60px;
  font-size: 18px;
  font-weight: bold;
  color: #5a5a5a;
}

.exagon-container p {
  color: #5a5a5a;
}

.video-img-container {
  margin-top: 20px;
  display: inline-block;
  float: none !important;
}

.video-img {
  width: 100%;
  height: auto;
}

#gif-container {
  text-align: center;
}

#intro-gif, #what-is-it img{
  padding: 20px;
  border: 1px solid #e4e4e4;
  background-color: white;
}

#what-is-it img{ width: 80%; }

.connect-or-subscribe {
  text-align: center;
}

/* FAQ
----------------------------------------------- */
.faq-heading h4{ margin-bottom: 0; }

ul.faq-answer ul > li {
  margin-left: 40px;
  margin-right: 40px;
  list-style: disc;
}

ul.faq-answer pre{
  padding: 1em;
  white-space: pre-wrap;
  background-color: #000;
  color: #aeaeae;
  font-style: italic;
  margin: 1em;
}

/* HELP Section
----------------------------------------------- */
.help-heading h4{ margin-bottom: 0; }

.requirement-list {
  padding-left: 40px;
}

.requirement-item {
  list-style: square;
}

/* Partenaires
----------------------------------------------- */

.card-partner {
  overflow: hidden;
}

.card.small .card-image {
  height: 100%;
  max-height: 75%;
}

.card.card-partner .card-image img {
  width: auto;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.card.card-partner .card-action .card-title {
  font-size: 15px;
}

.partner-soon {
  text-align: center;
  position: absolute;
  top: 10px;
  right: -65px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 150px;
  background-color: #C9131F;
  color: #fff;
  padding: 10px;
  font-size: 15px;
  font-weight: 700;
  width: 200px;
  z-index: 10;
}

.partner-img-soon {
  opacity: 0.6;
}

/* Shared
----------------------------------------------- */

.doc {
  font-size: 90%;
}

/* Footer */

footer #footer-nav {
  background-color: #0277bd;
  padding-bottom: 15px;
  padding-top: 15px;
}

footer ul {
  margin-bottom: 0;
}

/* Table */

td, th {
  padding: 10px 15px;
}

thead tr {
  font-weight: bold;
}

table.bordered.no-header tr:first-child {
  border-top: 1px solid #d0d0d0;
}

/* Layout */

html {
  color: #121212;
}

.section {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

nav .nav-wrapper {
  padding: 0 30px;
}

.authenticate .btn-floating {
  margin-right: 0;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}

.authenticate .btn-floating:hover {
  color: #FFFFFF !important;
}

.row .col.m15 {
  left: auto;
  margin-left: auto;
  right: auto;
  width: 20%;
}

/* Pages */

header {
  min-height: 150px;
  padding: 10px 0;
}

header h3 {
  color: #fff;
  margin: 0;
  padding: 20px 0;
}

header p {
  margin-top: 0;
  font-size: 20px;
}

header p + .italic {
  font-style: italic;
  font-size: 14px;
}

.nav-bread {
  margin-bottom: 20px;
}

.nav-bread .breadcrumb:last-child {
  color: rgba(255,255,255,0.7);
}

.nav-bread .breadcrumb.active {
  color: #FFFFFF;
}

/* Hexagon */

.hexagon {
  position: relative;
  width: 150px;
  height: 86.60px;
  background-color: #fdfffc;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 106.07px;
  height: 106.07px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 21.9670px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

.hexagon:before {
  top: -53.0330px;
}

.hexagon:after {
  bottom: -53.0330px;
}

.hexagon span {
  display: block;
  position: absolute;
  top:0px;
  left: 0;
  width:150px;
  height:86.6025px;
  z-index: 2;
  background: inherit;
}

.hexagon .material-icons {
  color: #aadcf7 !important;
}

.hexagon:hover .material-icons {
  color: #0091cf !important;
}

/* image */
.img-hover {
  opacity: 0.6;
}

.img-hover:hover {
  opacity: 1;
}

/* pre */

pre.prettyprint, code.prettyprint {
  border-radius: 0 !important;
}

pre.prettyprint {
  width: 100% !important;
}

pre.prettyprint.custom {
  padding: 1em;
  white-space: pre-wrap;
  background-color: #000000;
}

pre.prettyprint.custom > .pun {
  color: #fff;
}

pre.prettyprint.custom > .str {
  color: #65B042;
}

pre.prettyprint.custom > .tag {
  color: #89bdff;
}

pre.prettyprint.custom > .atn {
  color: #bdb76b;
}

pre.prettyprint.custom > .com {
  color: #AEAEAE;
  font-style: italic;
}

pre.prettyprint.custom > .lit {
  color: #3387CC;
}

/* Accordion */

.collapsible-header {
  font-size: 16px;
  padding: 0.5rem 1rem;
}

.collapsible-header {
  min-height: 2rem;
  line-height: 1.5rem;
  padding: 1rem;
  background-color: #f9f9f9;
  font-weight: 500;
}

.collapsible-header.active {
  background-color: #0277bd;
  color: white;
}

.collapsible-body {
  padding-bottom: 1rem;
}

.collapsible-body p, .collapsible-body h6 {
  padding: 1rem 1rem 0;
}

.collapsible-body .table-container {
  padding: 1rem;
}

/* Timeline */

.quickstart-timeline {
  list-style: outside none none;
  margin-top: 40px;
  padding: 0 0 20px;
  position: relative;
}

.quickstart-timeline::before {
  background-color: #eee;
  bottom: 0;
  content: " ";
  left: -40px;
  margin-left: -1.5px;
  position: absolute;
  top: 0;
  width: 3px;
}

.quickstart-timeline > li {
  margin-bottom: 0px;
  position: relative;
}

.quickstart-timeline > li::before {
  content: " ";
  display: table;
}

.quickstart-timeline-badge {
  background-color: #01579b;
  border-radius: 50%;
  color: #fff;
  font-size: 1.4em;
  height: 50px;
  left: -40px;
  line-height: 50px;
  margin-left: -25px;
  position: absolute;
  text-align: center;
  top: 8px;
  width: 50px;
  z-index: 100;
}
.quickstart-timeline > li::after {
  clear: both;
  content: " ";
  display: table;
}

.quickstart-timeline-body ul li {
  list-style-type: disc;
  margin-left: 20px;
}

.quickstart-timeline-body ul.list-unstyled li {
  list-style-type: none;
  margin-left: 0;
}

.quick-action {
  color: #444;
  padding: 10px 5px;
}

.quick-action .flow-text {
  font-size: 16px;
}

.quickstart-timeline-title h4 {
  margin-top: 0px;
}

/* Kit FC */

.exemple-kit {
  background-color: #0e6eb8;
  padding: 25px;
}

/* Forms */

#subscribe form .input-field label,
form#initializeAccountForm .input-field label {
  width: 100%;
}

/* label underline focus color */
.input-field textarea.materialize-textarea:focus,
.input-field input[type=text]:focus,
.input-field input[type=password]:focus {
  border-bottom: 1px solid #01579b;
  box-shadow: 0 1px 0 0 #01579b;
}

.input-field textarea.materialize-textarea:focus + label,
.input-field input[type=text]:focus + label,
.input-field input[type=password]:focus + label {
  color: #01579b;
}

.input-field2 input.materialize-input:focus,
.input-field2 input[type=text]:focus,
.input-field2 input[type=password]:focus {
    border-bottom: 1px solid #01579b;
    box-shadow: 0 1px 0 0 #01579b;
}

.input-field2 input.materialize-input:focus + label,
.input-field2 input[type=text]:focus + label,
.input-field2 input[type=password]:focus + label {
    color: #01579b;
}

.input-field label {
  color: #000;
}

.input-field2 label {
    color: #000;
}

.input-field p label {
  color: #737373;
}

.input-field.cgu_content label {
  top: 0;
}

input.focused:invalid {
    border-bottom: 2px solid #F44336;

}

.select-fs {
  width: auto;
  max-width: 100%;
  display: inline-block;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid;
  margin-top:15px;
}

.select-fs option{
  color: black;
}

select.invalid {
    border-bottom: 1px solid #F44336;
}

/* Edition page
----------------------------------------------- */

#sp-form-edition .row {
  margin-bottom: 0px !important;
}

/* FORM ERROR */
.input-field.invalid:after {
  content: attr(data-error);
  color: #F44336;
  opacity: 1;
  font-size: 0.8rem;
  bottom: 10px;
}

.input-field.invalid.toAlign.invalid:after {
  top: 10px;
  left: 20px;
}

.help {
  font-size: 12px;
  color: #e0e0e0;
}

#accept-cgu {
  margin-right: 20px;
}


#btn-data {
  margin-left: 20px;
  margin-right: 20px;
}

.modal.bottom-sheet {
  max-height: 100%;
}

.btn, .btn-large, .btn-flat{
  text-transform: none;
}

.btn i {
  font-size: 1rem;
}

.list-inline {
  list-style: outside none none;
  padding-left: 0;
}

.list-inline > li {
  display: inline-block;
}

#modal-cgu {
  height: 100%;
}

#modal-cgu .list-inline {
  margin-bottom: 0;
}

#modal-cgu .modal-content {
  padding: 0 40px;
  height: 75%;
}

h4 small {
  font-size: 14px;
}

.material-tooltip {
  max-width: 300px;
  padding: 20px;
}

.card.small {
  height: 285px;
}

.disclaimer {
  text-align: center;
  font-style: italic;
  font-size: 13px;
}

.g-recaptcha {
  margin-bottom: 20px;
}

.row .tabs-container {
  float:none;
  display: inline-block;
  margin-bottom: 15px;
}

.tabs-FS .tab a {
  color: #01579b;
}

.tabs-FS .tab a:hover{
  color: #0277bd;
}

.tabs-FS {
  display: flex;
  margin: 0 auto;
  white-space: nowrap;
}

.tabs-FS > .tab {
  flex-grow: 3;
}

.tabs-FS .tab ~ .tab {
  flex-grow: 1;
}

.tabs-FS .tab {
  height: 48px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: .8px;
}

.tabs-FS .active{
  border-bottom: 1px solid #01579b;
}

/* Production Section
----------------------------------------------- */

.productionForm .input-field textarea.materialize-textarea{
  padding: 0.8rem 0;
  margin: 0 0 0px 0;
  box-sizing: content-box;
  min-height: 0rem;
}

.productionForm .row{
  margin-bottom: 15px;
}

.productionForm .input-field{
  margin-top: 0.8rem;
}

.production-step li{
  list-style-type: disc;
}

.dropdown-content li>span {
  color: #000000 !important;
}


.fc-tooltip {
  cursor: pointer;
  margin-left: 10px;
  vertical-align: bottom;
}

#ip-tooltip, #production-tooltip {
  color: #01579b; /* Blue */
}

#contact_tooltip{
  vertical-align: bottom;
  color: #01579b; /* Blue */
  margin-left: 16px;
  cursor: pointer;
  position: absolute;
}

.production-step ul{
  padding-left: 40px;
}

.row .production-checkbox{
  padding-bottom: 30px;
}

#production-submit-btn{
  display: block;
  margin: 10px auto;
}

.production-checkbox label{
  color: black;
  line-height: 120%;
}

.production-information{
  color: #797979;
}

.checkbox-error {
  margin-top: 14px !important;
}

.production-checkbox.invalid:after, .logo.invalid:after {
  top: 15px;
  bottom: -12px;
}

.production-contact-icon{
  vertical-align: top;
  color: grey;
}

.contact-phone{
  font-size: xx-large;
}

.availability{
  min-height: 45px;
}

.availability label{
  margin-right: 20px;
}

.availability, .availability .input-field{
  margin-top: 0px;
}

#add-contact{
  float: right;
}

#add-contact .material-icons{
  background-color: #01579b;
}

.card .card-content .card-title .secondary-contact{
  line-height: 50px;
}

.card .card-content .card-title {
  line-height: 36px;
}

#main-contact p{
  font-size: 17px;
  line-height: 17px;
}

/* Production checbox */

#production_prod{
  font-size: 14px !important;
}

input[name='production_key']::-webkit-input-placeholder {
  color: #000000;
}

input[name='production_key']::-moz-placeholder{
  color: #000000;
}
input[name='production_key']:-ms-input-placeholder { /* IE 10+ */
  color: #000000;
}
input[name='production_key']:-moz-placeholder { /* Firefox 18- */
  color: #000000;
}

#hourglassIcon{
  position: relative;
  margin-left: 25px;
  margin-top: -31px;
}

/* contributor (share FS)
----------------------------------------------- */
.delete-btn{
  margin-top: 2px;
  float: right;
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-color: #01579B;
}

.delete-btn:hover{
  background-color: #0e6eb8;
}

.delete-btn i{
  padding-top: 6px;
  padding-left: 1px;
  line-height: 6px;
  font-size: 1.1rem;
}

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

  .card-panel .valign-wrapper {
    display: block;
    text-align: center;
  }

  #hero h1 {
    font-size: 2.8rem;
  }

  #hero h5 {
    font-size: 1.4rem;
  }

  #hero #call-to-action{
    padding: 0 1.8em;
    font-size: 16px;
  }

  #what-is-it{
    text-align: center;
  }

  #what-is-it img{
    display: none;
  }

  #how-it-works .item{
    margin-bottom: 30px;
  }

  #how-it-works .item .item-img img{
    width: 60%;
  }

  #call-to-action-question{
    margin-top: 0;
  }

  #call-to-action-question .btn{
    line-height: inherit;
    height: 75px;
    padding-top: 15px;
  }

  #providers .provider-screenshot{
    height: 160px;
  }

  .item-provider{
    margin-bottom: 40px;
  }
}
nav.nav-bread {
  height: auto;
}

@media only screen and (max-width : 720px) {
  .quickstart-timeline {
    margin-left: 10px;
  }
}

@media only screen and (max-width : 600px) {
  .quickstart-timeline {
    margin-left: 28px;
  }
}


@media only screen and (min-width : 600px) {
  .card-callback-url {
    margin-top: 140px;
  }
}

@media only screen and (max-width: 992px) {
  nav .brand-logo {
    margin: 0;
  }
  nav .brand-logo:before {
    left: 0;
  }
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.row {
  width: 100%;
}

#connection-link {
    color: white;
    font-size: 15px;
    font-weight: 400;
}

.maintenance {
  width: 85%;
  font-size: 1.5rem;
  border: 2px solid red;
  background-color: #eee;
  padding: 2rem;
}