/*
 ******************
 * LSForm
 ******************
 */

/*
 * Layout
 */
ul.LSform_layout_active {
  list-style-type:    none;
  padding:            0;
  margin:             1em;
  margin-bottom:      0;
  clear:              both;
  display:            flex;
  flex-wrap:          nowrap;
  overflow:           auto;
  transition:         opacity 0.5s linear;
}

li.LSform_layout a {
  text-decoration:    none;
  color:              #0072B8;
}

li.LSform_layout_active a {
  color:              #fff;
}

li.LSform_layout_active {
  text-decoration:    none;
  color:              #fff;
  background-color:   #52BCE5;
  -moz-border-radius: 3px 3px 0px 0px;
  border-radius:      3px 3px 0px 0px;
  padding:            4px;
  display:            inline;
  margin-right:       0.3rem;
}

li.LSform_layout_current {
  color:              #fff;
  background-color:   #0072B8;
}

li.LSform_layout_errors {
  background-color:   #f59a67;
}

h2.LSform_layout_active {
  display:            none;
}

div.LSform_layout {
  border:             1px solid #0072B8;
  margin:             1em;
  padding:            0.5em;
}

div.LSform_layout_active {
  display:            none;
  margin-top:         0;
}

div.LSform_layout_current {
  display:            block;
  transition:         opacity 0.5s linear;
}

form.submitting div.LSform_layout_current, form.submitting ul.LSform_layout_active {
  opacity:            0.4;
}

/*
 * Architecture
 */
div.LSform {
  margin-left:                1em;
}

dl.LSform {
  margin:                     0;
  padding:                    0;
}

.LSform dt {
  position:                   relative;
  left:                       0.2em;
  top:                        1.2em;
  width:                      16em;
  font-weight:                bold;
  font-size:                  0.9em;
  color:                      #0072b8;
}

dd.LSform {
  margin-left:                16em;
  padding:                    0;
}

ul.LSform {
  list-style-type:            none;
  padding:                    0;
  margin:                     0;
}

ul.LSform li {
  margin-bottom:              2px;
}

/*
 * Champs du formulaire
 */
.LSform input[type=text], .LSform input[type=submit], .LSform input[type=password], .LSform select, .LSform textarea {
  border:                     1px solid #ccc;
  width:                      200px;
  background-color:           #b5e4f6;
  box-sizing:                 border-box;
}

.LSform input[type=file] {
  background:                 transparent;
}

.LSform input[type=radio] {
  width:                      undefinded;
}

input[type='submit'].LSform {
  border:                     1px outset #ccc;
  margin-top:                 1em;
  margin-left:                6em;
  width:                      8em;
}

li.LSform-errors {
  color:                      #fff;
  background-color:           #f59a67;
}

dd.LSform-errors {
  color:                      #fff;
  background-color:           #f59a67;
  width:                      302px;
}

dt.LSform-errors {
  color:                      #f59a67;
}

/* Bouton JS */
img.LSform-add-field-btn, img.LSform-remove-field-btn {
  cursor:                     pointer;
}

/* -- LSformWarnBox -- */
div.LSformWarnBox {
  top:                      100px!important;
  left:                     25%!important;
  background-color:         #f59a67!important;
  border:                   1px solid #f00!important;
  color:                    #fff!important;
}

/* -- LSform_listAvailableDataEntryForm -- */
p.LSform_listAvailableDataEntryForm {
  margin:                   2px;
  margin-right:             1em;
  color:                    #0072b8;
  float:                    right;
}

@media (max-width: 1024px) {
  div.LSform {
    margin-left: 0;
    margin-right: 0;
  }

  ul.LSform_layout_active {
    margin-left: 0;
  }

  dl.LSform {
    clear: both;
  }

  dt.LSform {
    width: 34vw;
  }

  dd.LSform {
    margin-left: 34vw;
  }

  .LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea, .LSform input[type=file] {
  	width: 40vw;
  }

  .LSform input[type=submit].LSform {
    width: 40vw;
    margin-left: 3px;
    box-sizing: border-box;
  }
}

@media (max-width: 400px) {
  dt.LSform {
    position: initial;
    width: 100%;
  }

  dd.LSform {
    margin-left: 1em;
    margin-bottom: 0.5em;
    width: 100%;
  }

  .LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea, .LSform input[type=file] {
  	width: calc(100% - 1em);
  }

  .LSform input[type=submit].LSform {
    width: 50%;
    margin-left: calc(25% - 0.5em);
  }
}
