@charset "UTF-8";
/*html,body {
    margin:0;
    padding:0;
    color:#222;
}

body {
    padding:10px;
    font:76%/150% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;
}*/
#setting-form {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}
#setting-form.post-inner p {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: normal;
}
#setting-form h4 {
  text-align: center;
  color: #ac6010;
  font-size: 1.1em;
  padding-top: 0.5em;
}
#setting-form h3 {
  color: #c0601a;
  font-size: 1.3em;
  padding-top: 0.7em;
}
#setting-form h2 {
  color: #c06010;
  font-size: 1.5em;
  /*margin: 10px 0px 15px;*/
  padding-bottom: 6px;
  padding-top: 1em;
  border-bottom: 2px solid #ca2017;
}
#setting-form h1 {
  color: #ac6010;
  font-size: 1.7em;
  /*margin: 10px 0px 15px;*/
  padding-bottom: 6px;
}
.copy {
  font-size: 60%;
  text-align: right;
}
.error {
  color: red;
  font-weight: bold;
  border: 2px solid red;
}
p.warning {
  color: orange;
  font-weight: bold;
  border: 1px solid orange;
}
p.info {
  color: green;
}
#setting-form.post-inner p {
  line-height: normal;
}
#setting-form p.comment {
  color: grey;
  font-style: italic;
  font-weight: inherit;
  font-size: 0.9em;
  margin-top: 0em;
}
#setting-form p a {
  font-weight: normal;
}
/* LISTE */
#setting-form dl {
  border: 3px double #ddd;
  padding: 0.5em;
}
#setting-form dt {
  float: left;
  clear: left;
  width: 14em;
  text-align: right;
}
#setting-form dt:after {
  content: " :";
}
#setting-form dd {
  margin: 0 0 0 16em;
  padding: 0 0 0.5em 0;
  font-weight: bold;
  color: green;
}
/* ONGLETS */
#setting-form div.onglets {
  height: 3.5em;
}
#setting-form ul#onglets {
  list-style-type: none;
  padding-bottom: 1.95em;
  border-bottom: 1px solid #ff9800;
  margin: 0;
}
ul#onglets li {
  float: left;
  height: 1.9em;
  background-color: #ddd;
  margin: 2px 2px 0 2px;
  border: 1px solid #ff9800;
}
ul#onglets li.active {
  border-bottom: 1px solid #fff;
  background-color: #fff;
}
#onglets a {
  float: left;
  display: block;
  color: #555;
  text-decoration: none;
  padding: 4px;
}
#onglets li.active a {
  color: #333;
}
#onglets a:hover {
  background: #fff;
}
#onglets li a.admin {
  color: #fff;
  font-style: italic;
}
#onglets li a.admin:hover {
  background: #333;
}
#contenus div {
  display: none;
}
/* Formulaire */
#setting-form form {
  /*background-color:#FAFAFA;*/
  padding: 10px;
  /*width:280px;*/
}
#setting-form fieldset {
  padding: 0 20px 20px 20px;
  margin-bottom: 10px;
  border: 1px solid #DF3F3F;
}
#setting-form fieldset.even {
  background-color: #EEE;
}
#setting-form fieldset.odd {
  background-color: initial;
}
#setting-form legend {
  color: #DF3F3F;
  font-weight: bold;
  border-top: 1px solid #DF3F3F;
  border-left: 1px solid #DF3F3F;
  border-right: 1px solid #DF3F3F;
  border-radius: 5px;
  background-color: inherit;
}
#setting-form label {
  margin-top: 10px;
  display: block;
}
#setting-form label.inline {
  display: inline;
  margin-right: 0.5em;
  margin-left: 1em;
}
.inline {
  display: inline;
}
#setting-form input, textarea, select, option {
  background-color: #FFF3F3;
  /*width: unset;*/
}
#setting-form input, textarea, select {
  padding: 3px;
  border: 1px solid #F5C5C5;
  border-radius: 5px;
  box-shadow: 1px 1px 2px #C0C0C0 inset;
  /*width:200px;*/
}
#setting-form input:required, textarea:required, select:required {
  border: 3px solid black;
}
#setting-form input:read-only, input:-moz-read-only, #setting-form textarea:read-only, textarea:-moz-read-only, #setting-form select:read-only, select:-moz-read-only, #setting-form input[type=text]:read-only, input[type=text]:-moz-read-only {
  border: 2px solid grey;
  background-color: #EEE;
}
#setting-form select {
  margin-top: 10px;
  padding-right: 3em;
}
#setting-form .form input[type=text], #setting-form .form input[type=email], #setting-form .form input[type=tel], #setting-form .form input[type=date] {
  width: unset;
}
#setting-form .form select {
  width: unset;
  margin-left: 5px;
}
#setting-form input[type=radio] {
  background-color: transparent;
  border: none;
  width: 10px;
}
#setting-form input[type=submit], input[type=reset] {
  /*width:100px;*/
  margin-left: 5px;
  box-shadow: 1px 1px 1px #D83F3D;
  cursor: pointer;
}
#setting-form input:focus, textarea:focus {
  background-color: white;
}
#setting-form input[type=submit]:disabled {
  background-color: lightgrey;
}
#setting-form input[type=submit]:focus, input[type=reset]:focus {
  background-color: #FFF3F3;
}
#setting-form input[type=submit]:disabled:focus {
  background-color: grey;
}
#setting-form input[type=submit]:hover, input[type=reset]:hover {
  background-color: #FCDEDE;
}
#setting-form input[type=submit]:disabled:hover {
  background-color: lightgrey;
}
#setting-form input[type=submit]:active, input[type=reset]:active {
  background-color: #FCDEDE;
  box-shadow: 1px 1px 1px #D83F3D inset;
}
#setting-form input:disabled, #setting-form label.disabled {
  color: lightgrey;
  font-style: italic;
  font-weight: normal;
}
a.disabled, .disabled {
  pointer-events: none;
  cursor: default;
  color: #ccc;
}
.gras {
  font-weight: bold;
}
.centre {
  text-align: center;
}
.droite {
  text-align: right;
}
#historique table, th {
  border: 1px solid black;
}
.code pre {
  white-space: pre-wrap;
  width: 97%;
  margin-left: 1%;
  margin-right: 1%;
  padding: 3px;
  border: 1px solid #888;
  background-color: #EEE;
}
/* Listes */
/*ul li {
    font-weight:bold;
    }
ul li ul li {
    font-weight:normal;
    }
*/
/*
#setting-form ol, #setting-form ul {
    list-style: disc;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}*/
/* Tableaux */
#setting-form table {
  text-align: left;
  border-collapse: collapse;
}
#setting-form th {
  font-weight: normal;
  padding: 10px 8px;
  color: #039;
}
#setting-form tr {
  background: #fff6d8;
}
#setting-form td {
  padding: 8px;
  color: #336;
}
#setting-form tr.odd {
  background: lightgrey;
}
#setting-form tr.del {
  background: #7f7f7f;
}
#setting-form tbody tr:hover {
  color: #339;
  background: lightyellow;
}
/* autres */
#setting-form div.message {
  background-color: #aaa;
}
#setting-form div.message p {
  font-weight: normal;
  font-size: 0.7em;
  line-height: 1;
}
#setting-form img.identite {
  max-height: 200px;
  max-width: 200px;
}
#setting-form img.small_identite {
  max-height: 100px;
  max-width: 100px;
}
.widget_nav_menu li::before {
  content: none;
  /*'\f429';*/
  font-family: Genericons;
}
/*
 * jquery-autocomplete
 */
.autocomplete-suggestions {
  border: 1px solid #999;
  background: #FFF;
  overflow: auto;
}
.autocomplete-suggestion {
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
}
.autocomplete-selected {
  background: #F0F0F0;
}
.autocomplete-suggestions strong {
  font-weight: normal;
  color: #3399FF;
}
.autocomplete-group {
  padding: 2px 5px;
}
.autocomplete-group strong {
  display: block;
  border-bottom: 1px solid #000;
}
#__personne_container ul {
  list-style: none;
}
/*
 * menus blocs
 */
#menu-bloc {
  margin: 0 auto;
  width: 80%;
}
#menu-bloc div {
  display: inline-block;
}
#menu-bloc div div.bloc {
  width: 256px;
  text-align: center;
  /*border: 1px solid black;*/
  background-color: #d9dbda;
  background-repeat: no-repeat;
  margin: 5px;
  padding-left: 118px;
  height: 128px;
  align-content: center;
  display: table;
}
div.bloc span {
  /* Aligne le texte verticalement au milieu */
  vertical-align: middle;
  display: table-cell;
}
#menu-bloc div a {
  color: #ca2017;
  text-decoration: none;
}
#menu-bloc div div.compte {
  background-image: url("/images/bloc-compte.png");
}
#menu-bloc div div.cours {
  background-image: url("/images/bloc-cours.png");
}
#menu-bloc div div.paiement {
  background-image: url("/images/bloc-paiement.png");
}
#menu-bloc div div.document {
  background-image: url("/images/bloc-document.png");
}
/*
 * menu droite
 */
nav a.admin {
  color: #ca2017;
}
/*
 * Logs
 */
#log_details {
  /*position: relative;*/
  /*float: right;*/
  /*width: 49%;*/
  padding-left: 1em;
  padding-right: 1em;
  min-height: 6em;
  margin-top: 0;
  display: none;
}
html, body {
  margin: 0;
  min-height: 100vh;
}
.newline {
  clear: both;
}
/*
 * Entr’ouvert - W.C.S. dans Publik
 * Licence GNU GPL.
 * Source : https://dev.entrouvert.org/projects/wcs
 */
div[class^="grid-"], div[class*=" grid-"] {
  display: block;
  float: left;
  padding-right: 1rem;
}
@media screen and (max-width: 560px) {
  fieldset[class^="grid-"]:not(.never-alone), fieldset[class*=" grid-"]:not(.never-alone) {
    width: 100%;
    padding-right: 0;
  }
}
.grid-1-1 {
  width: calc(100% - 1rem);
}
.grid-1-2 {
  width: calc(50% - 1rem);
}
.grid-2-2 {
  width: calc(100% - 1rem);
}
.grid-1-3 {
  width: calc(33.3333333333% - 1rem);
}
.grid-2-3 {
  width: calc(66.6666666667% - 1rem);
}
.grid-3-3 {
  width: calc(100% - 1rem);
}
.grid-1-4 {
  width: calc(25% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-1-4 {
    width: calc(50% - 1rem);
  }
}
.grid-2-4 {
  width: calc(50% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-2-4 {
    width: calc(50% - 1rem);
  }
}
.grid-3-4 {
  width: calc(75% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-3-4 {
    width: calc(100% - 1rem);
  }
}
.grid-4-4 {
  width: calc(100% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-4-4 {
    width: calc(100% - 1rem);
  }
}
.grid-1-6 {
  width: calc(16.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-1-6 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-2-6 {
  width: calc(33.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-2-6 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-3-6 {
  width: calc(50% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-3-6 {
    width: calc(50% - 1rem);
  }
}
.grid-4-6 {
  width: calc(66.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-4-6 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-5-6 {
  width: calc(83.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-5-6 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-6-6 {
  width: calc(100% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-6-6 {
    width: calc(100% - 1rem);
  }
}
.grid-1-12 {
  width: calc(8.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-1-12 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-2-12 {
  width: calc(16.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-2-12 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-3-12 {
  width: calc(25% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-3-12 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-4-12 {
  width: calc(33.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-4-12 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-5-12 {
  width: calc(41.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-5-12 {
    width: calc(50% - 1rem);
  }
}
.grid-6-12 {
  width: calc(50% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-6-12 {
    width: calc(50% - 1rem);
  }
}
.grid-7-12 {
  width: calc(58.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-7-12 {
    width: calc(50% - 1rem);
  }
}
.grid-8-12 {
  width: calc(66.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-8-12 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-9-12 {
  width: calc(75% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-9-12 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-10-12 {
  width: calc(83.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-10-12 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-11-12 {
  width: calc(91.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-11-12 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-12-12 {
  width: calc(100% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-12-12 {
    width: calc(100% - 1rem);
  }
}
div[class^="grid-"], div[class*=" grid-"] {
  float: left;
  padding-right: 1rem;
}
@media screen and (max-width: 560px) {
  div[class^="grid-"]:not(.never-alone), div[class*=" grid-"]:not(.never-alone) {
    width: 100%;
    padding-right: 0;
  }
}
div[class^="grid-"] table, div[class^="grid-"] textarea, div[class^="grid-"] select, div[class^="grid-"] input:not([type=checkbox]):not([type=radio]), div[class*=" grid-"] table, div[class*=" grid-"] textarea, div[class*=" grid-"] select, div[class*=" grid-"] input:not([type=checkbox]):not([type=radio]) {
  width: 100%;
}
div[class^="grid-"] .select2-container, div[class*=" grid-"] .select2-container {
  min-width: auto;
  width: 100% !important;
}
div[class^="grid-"].newline, div[class*=" grid-"].newline {
  clear: both;
}
div[class^="grid-"].cell, div.dataview div[class^="grid-"], form.quixote div[class^="grid-"], div[class*=" grid-"].cell, div.dataview div[class*=" grid-"], form.quixote div[class*=" grid-"] {
  clear: none;
}
div[class^="grid-"].cell.newline, div.dataview div[class^="grid-"].newline, form.quixote div[class^="grid-"].newline, div[class*=" grid-"].cell.newline, div.dataview div[class*=" grid-"].newline, form.quixote div[class*=" grid-"].newline {
  clear: both;
}
div.dataview div[class^="grid-"], form div[class^="grid-"], div.dataview div[class*=" grid-"], form div[class*=" grid-"] {
  box-sizing: content-box;
}
div.dataview div[class^="grid-"] ~ h3, div.dataview div[class^="grid-"] ~ h4, form div[class^="grid-"] ~ h3, form div[class^="grid-"] ~ h4, div.dataview div[class*=" grid-"] ~ h3, div.dataview div[class*=" grid-"] ~ h4, form div[class*=" grid-"] ~ h3, form div[class*=" grid-"] ~ h4 {
  padding-top: 1rem;
}
form div[class^="grid-"] ~ h3, form div[class^="grid-"] ~ h4, form div[class^="grid-"] ~ p, form div[class^="grid-"] + div, form div[class*=" grid-"] ~ h3, form div[class*=" grid-"] ~ h4, form div[class*=" grid-"] ~ p, form div[class*=" grid-"] + div {
  clear: both;
}
form div[class^="grid-"] span.select2-selection, form div[class^="grid-"] div.select2-container, form div[class*=" grid-"] span.select2-selection, form div[class*=" grid-"] div.select2-container {
  width: 100% !important;
}
div.dataview div[class^="grid-"] ~ div.title, div.dataview div[class^="grid-"] ~ div.subtitle, div.dataview div[class*=" grid-"] ~ div.title, div.dataview div[class*=" grid-"] ~ div.subtitle {
  clear: both;
}
.gru-content #columns > div[class^="grid-"].cell, .gru-content #columns > div[class*=" grid-"].cell {
  padding-right: 0;
  margin-right: 1rem;
}
.grid-1-1 {
  width: calc(100% - 1rem);
}
.grid-1-2 {
  width: calc(50% - 1rem);
}
.grid-2-2 {
  width: calc(100% - 1rem);
}
.grid-1-3 {
  width: calc(33.3333333333% - 1rem);
}
.grid-2-3 {
  width: calc(66.6666666667% - 1rem);
}
.grid-3-3 {
  width: calc(100% - 1rem);
}
.grid-1-4 {
  width: calc(25% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-1-4 {
    width: calc(50% - 1rem);
  }
}
.grid-2-4 {
  width: calc(50% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-2-4 {
    width: calc(50% - 1rem);
  }
}
.grid-3-4 {
  width: calc(75% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-3-4 {
    width: calc(100% - 1rem);
  }
}
.grid-4-4 {
  width: calc(100% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-4-4 {
    width: calc(100% - 1rem);
  }
}
.grid-1-6 {
  width: calc(16.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-1-6 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-2-6 {
  width: calc(33.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-2-6 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-3-6 {
  width: calc(50% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-3-6 {
    width: calc(50% - 1rem);
  }
}
.grid-4-6 {
  width: calc(66.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-4-6 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-5-6 {
  width: calc(83.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-5-6 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-6-6 {
  width: calc(100% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-6-6 {
    width: calc(100% - 1rem);
  }
}
.grid-1-12 {
  width: calc(8.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-1-12 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-2-12 {
  width: calc(16.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-2-12 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-3-12 {
  width: calc(25% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-3-12 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-4-12 {
  width: calc(33.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-4-12 {
    width: calc(33.3333333333% - 1rem);
  }
}
.grid-5-12 {
  width: calc(41.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-5-12 {
    width: calc(50% - 1rem);
  }
}
.grid-6-12 {
  width: calc(50% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-6-12 {
    width: calc(50% - 1rem);
  }
}
.grid-7-12 {
  width: calc(58.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-7-12 {
    width: calc(50% - 1rem);
  }
}
.grid-8-12 {
  width: calc(66.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-8-12 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-9-12 {
  width: calc(75% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-9-12 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-10-12 {
  width: calc(83.3333333333% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-10-12 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-11-12 {
  width: calc(91.6666666667% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-11-12 {
    width: calc(66.6666666667% - 1rem);
  }
}
.grid-12-12 {
  width: calc(100% - 1rem);
}
@media screen and (max-width: 1024px) {
  .grid-12-12 {
    width: calc(100% - 1rem);
  }
}
/**
 * Nested list
 */
.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  max-width: 98%;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
}
.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dd-list .dd-list {
  padding-left: 30px;
}
.dd-collapsed .dd-list {
  display: none;
}
.dd-item, .dd-empty, .dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  font-size: 13px;
  line-height: 20px;
}
.dd-handle {
  display: block;
  height: 30px;
  margin: 5px 0;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ccc;
  background: #fafafa;
  background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
  background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
  background: linear-gradient(top, #fafafa 0%, #eee 100%);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.dd-handle:hover {
  color: #2ea8e5;
  background: #fff;
}
.dd-item > button {
  display: block;
  position: relative;
  cursor: pointer;
  float: left;
  width: 25px;
  height: 20px;
  margin: 5px 0;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  font-weight: bold;
}
.dd-item > button:before {
  content: "+";
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  text-indent: 0;
}
.dd-item > button[data-action="collapse"]:before {
  content: "-";
}
.dd-placeholder, .dd-empty {
  margin: 5px 0;
  padding: 0;
  min-height: 30px;
  background: #f2fbff;
  border: 1px dashed #b6bcbf;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.dd-empty {
  border: 1px dashed #bbb;
  min-height: 100px;
  background-color: #e5e5e5;
  background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}
.dd-dragel {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}
.dd-dragel > .dd-item .dd-handle {
  margin-top: 0;
}
.dd-dragel .dd-handle {
  -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
}
/**
 * Nestable Extras
 */
.nestable-lists {
  display: block;
  clear: both;
  padding: 30px 0;
  width: 100%;
  border: 0;
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
}
#nestable-menu {
  padding: 0;
  margin: 20px 0;
}
#nestable-output, #nestable2-output {
  width: 100%;
  height: 7em;
  font-size: 0.75em;
  line-height: 1.333333em;
  font-family: Consolas, monospace;
  padding: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#nestable2 .dd-handle {
  color: #fff;
  border: 1px solid #999;
  background: #bbb;
  background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
  background: -moz-linear-gradient(top, #bbb 0%, #999 100%);
  background: linear-gradient(top, #bbb 0%, #999 100%);
}
#nestable2 .dd-handle:hover {
  background: #bbb;
}
#nestable2 .dd-item > button:before {
  color: #fff;
}
@media only screen and (min-width: 700px) {
  .dd {
    float: left;
    width: 98%;
  }
  .dd + .dd {
    margin-left: 2%;
  }
}
.dd-hover > .dd-handle {
  background: #2ea8e5 !important;
}
/**
 * Nestable Draggable Handles
 */
.dd3-content {
  display: block;
  height: 30px;
  margin: 5px 0;
  padding: 5px 10px 5px 40px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ccc;
  background: #fafafa;
  background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
  background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
  background: linear-gradient(top, #fafafa 0%, #eee 100%);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.dd3-content:hover {
  color: #2ea8e5;
  background: #fff;
}
.dd-dragel > .dd3-item > .dd3-content {
  margin: 0;
}
.dd3-item > button {
  margin-left: 30px;
}
.dd3-handle {
  position: absolute;
  color: #bbb;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
  width: 30px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #aaa;
  background: #ddd;
  background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
  background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
  background: linear-gradient(top, #ddd 0%, #bbb 100%);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dd3-handle:before {
  content: "≡";
  display: block;
  position: absolute;
  left: 0;
  top: 3px;
  width: 100%;
  text-align: center;
  text-indent: 0;
  color: #fff;
  font-size: 20px;
  font-weight: normal;
}
.dd3-handle:hover {
  background: #ddd;
}
div.editthis {
  display: inline-block;
  position: absolute;
  right: 1em;
}