fieldset > ul {
    display: flex;
    /*flex-flow: row wrap;*/
    flex-flow: row;
}
fieldset > ul > li {
    order: 0;
    flex-grow: 1;
}

.grid-form *, .grid-form *:before, .grid-form *:after {
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.grid-form input[type="text"], .grid-form input[type="email"], .grid-form input[type="number"],
.grid-form input[type="password"], .grid-form input[type="search"], .grid-form input[type="tel"],
.grid-form input[type="url"], .grid-form input[type="color"], .grid-form input[type="date"],
.grid-form input[type="datetime"], .grid-form input[type="datetime-local"], .grid-form input[type="month"],
.grid-form input[type="time"], .grid-form input[type="week"], .grid-form textarea, .grid-form select {
    font-size: 18px; padding: 0; margin: 0; width: 100%;
}
.grid-form input[type="text"], .grid-form input[type="email"], .grid-form input[type="number"],
.grid-form input[type="password"], .grid-form input[type="search"], .grid-form input[type="tel"],
.grid-form input[type="url"], .grid-form input[type="color"], .grid-form input[type="date"],
.grid-form input[type="datetime"], .grid-form input[type="datetime-local"], .grid-form input[type="month"],
.grid-form input[type="time"], .grid-form input[type="week"], .grid-form textarea {
    border: 0; background: transparent;
}

.grid-form input[type="text"]::-moz-placeholder, .grid-form input[type="email"]::-moz-placeholder,
.grid-form input[type="number"]::-moz-placeholder, .grid-form input[type="password"]::-moz-placeholder,
.grid-form input[type="search"]::-moz-placeholder, .grid-form input[type="tel"]::-moz-placeholder,
.grid-form input[type="url"]::-moz-placeholder, .grid-form input[type="color"]::-moz-placeholder,
.grid-form input[type="date"]::-moz-placeholder, .grid-form input[type="datetime"]::-moz-placeholder,
.grid-form input[type="datetime-local"]::-moz-placeholder, .grid-form input[type="month"]::-moz-placeholder,
.grid-form input[type="time"]::-moz-placeholder, .grid-form input[type="week"]::-moz-placeholder,
.grid-form textarea::-moz-placeholder {
    font-weight: 100; color: #595959;
}

.grid-form input[type="text"]:focus, .grid-form input[type="email"]:focus,
.grid-form input[type="number"]:focus, .grid-form input[type="password"]:focus,
.grid-form input[type="search"]:focus, .grid-form input[type="tel"]:focus,
.grid-form input[type="url"]:focus, .grid-form input[type="color"]:focus,
.grid-form input[type="date"]:focus, .grid-form input[type="datetime"]:focus,
.grid-form input[type="datetime-local"]:focus, .grid-form input[type="month"]:focus,
.grid-form input[type="time"]:focus, .grid-form input[type="week"]:focus,
.grid-form textarea:focus {
    outline: none;
}

.grid-form fieldset {
    border: none; padding: 0; margin: 0;
}

.grid-form fieldset legend {
    border: none; border-bottom: 4px solid #404040; color: #404040;
    font-size: 18px; font-weight: bold; padding-bottom: 5px;
    position: static; width: 100%;
}

.grid-form fieldset fieldset legend {
    border-bottom: 2px solid #404040; font-weight: normal;
}

.grid-form fieldset fieldset fieldset legend {
    border-bottom: 1px solid #404040; font-weight: normal; font-size: 15px;
}

.grid-form ul {
    border-bottom: 1px solid #333; width: 100%; zoom: 1;
    margin: 0 auto; padding-left: 0;
}

.grid-form ul.single-field-many-inputs {
  border-bottom: none;
}

.grid-form li {
    border-right: 1px solid #333;
    display: block;
}

.grid-form li {
    padding: 8px; float: left;
}

@media only screen and (min-width: 0) and (max-width: 700px) {
    fieldset > ul {
	flex-flow: row wrap;
    }
    .grid-form li {
	border-bottom: 1px solid #333; width: 100% !important;
	border-right: none;
    }
    .grid-form ul { border-bottom: none; }
}


.grid-form li label:first-child {
    margin-top: 0; text-transform: uppercase; letter-spacing: 1px;
    font-size: 10px; color: #333; display: block; margin-bottom: 4px;
}

.grid-form li label:first-child:hover {
    cursor: text;
}

.grid-form li:last-child {
    border-right: none;
}

.grid-form li:hover {
    background: #fffded; cursor: text;
}

.label-and-icon {
    display: block;
}

.grid-form li .label-and-icon label:first-child {
    display: inline;
}

/*
 no es posible añadir la pseudo class focus en javascript,
 asi que se usa una clase propia que se modifica en el javascript
*/

.grid-form li.myfocus {
    background: #fffad4;
}

.grid-form li.myfocus label {
    color: #262626;
}

@media print {
    fieldset { page-break-inside: auto; display: contents; }
    .grid-form ul {
	display: table;
	/*height: 56px;*/
	page-break-inside: avoid;
    }
    .grid-form li {
	border-right: 1px solid #333333; display: table-cell; float: none; page-break-inside:avoid;
	/*
	height: auto;
	resize: both;
	overflow: auto;*/
    }
    .grid-form li.focus,
    .grid-form li:hover {
	background: none;
    }
    /*
    .grid-form li label:first-child {
	display: none !important;
    letter-spacing: 0;}
    */
    .grid-form input, .grid-form textarea, .grid-form select  { font-size: 12px !important;}
    /*.grid-form textarea { height: auto !important; overflow: visible;}*/
    /*.grid-form textarea {resize: both !important; overflow: auto !important;}*/
    .grid-form input[type="submit"] { display: none !important; }
    .grid-form input[type="submit"]::-moz-placeholder { display: none !important; }
}

.invalid_data { border: 3px dashed #ff0000 !important;}

/*
input[readonly] {
    background-color: #aaaaaa !important;
    color: #ffffff;
}
*/

.print-content {
    display: none !important;
}

@media print {
    .print-content {
	display: block !important;
	white-space: pre !important;
	white-space: pre-wrap !important;
    }
    textarea {display: none !important;}
    footer {display: none !important;}
    nav {display: none !important;}
    .no-print { display: none !important; }
}