Compare text

Find the difference between two text files

Real-time diff

Unified diff

Collapse lines

Highlight change

Syntax highlighting

Tools

Untitled diff

Created 5 years agoDiff never expires

312 removals

818 lines

239 additions

742 lines

/* --------------------------------------

form.css

Contient les elements :

- button,

- formulaire,

-----------------------------------------*/

---------------------------------------- */

/* -- Boutons et class boutons -- */

/* ------------------------------ */

/* --- Normal --- */

button,

.button {

padding: 0.3em 1em;

margin: 0.618em;

padding: 0.309em 1em;

height: auto;

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);

border-width: 1px;

background-color: #F1F1F1;

border-style: solid;

border-width: 1px;

border-color: transparent;

border-color: #E1E1E1 #D1D1D1 #C9C9C9 #DDDDDD;

border-radius: 1px;

box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);

color: #777777;

text-align: center;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);

white-space: nowrap;

transition: all 0.2s linear;

}

button:hover,

.button-hover {

background-color: #F9F9F9;

transition: all 0.3s linear;

}

button:active,

.button-active {

background-color: #F5F5F5;

border-color: #DDDDDD;

box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);

transition: all 0.2s linear;

}

/* --- Petit bouton --- */

button.small,

.button-small {

padding: 0.2em 0.5em;

padding: 0.228em 0.618em;

font-size: 1.1rem;

font-size: 0.809em;

}

/* --- Bouton de formulaire --- */

button.submit {

background-color: #366493;

border-color: #1E5083;

color: #F1F1F1;

text-shadow: none;

}

button.submit:hover {

background-color: #517BA6;

border-color: #366493;

color: #FFFFFF;

}

/* --- Bouton basic --- */

.basic-button {

display: inline-block;

margin: 1px;

margin: 0.1618em;

padding: 1px 6px;

padding: 0.1618em 0.309em;

border: none;

font-weight: bold;

color: #FFFFFF;

}

.basic-button:hover {

color: #FAFAFA;

text-decoration: none;

}

/* --- Bouton basic avec couleur de base --- */

.basic-button { background-color: #366493; }

.basic-button:hover { background-color: #517BA6; }

/* --- Bouton basic avec couleur alternative --- */

.basic-button.alt { background-color: #E2A447; }

.basic-button.alt:hover { background-color: #FFC672; }

/* --- field button --- */

.field-button {

display: inline-block;

font-size: 0;

white-space: nowrap;

}

.field-button button {

margin-left: -1px;

padding: 4px 8px;

font-size: 11px;

}

/* -- Formulaires -- */

/* ----------------- */

.fieldset-mini {

margin: 20px auto auto auto;

margin: 1.309em auto auto auto;

width: 540px;

}

fieldset {

margin: 1.5em 0;

margin: 1.618em 0;

background: none;

border: none;

}

fieldset img {

max-width: 250px;

}

@media (min-width: 769px) {

fieldset img {

max-width: 450px;

max-width: 320px;

}

@media (min-width: 1366px) {

fieldset img {

max-width: 420px;

}

fieldset.fieldset-submit {

.fieldset-submit {

width: 100%;

background: none;

border: none;

text-align: center;

}

fieldset.fieldset-submit legend {

.fieldset-submit legend {

display: none;

}

.horizontal-fieldset-desc,

.horizontal-fieldset-element {

display: inline-block;

vertical-align: middle;

margin-right: 1em;

}

.horizontal-fieldset-desc + .horizontal-fieldset-element {

max-width: 100%;

}

.horizontal-fieldset-element .form-field-select {

max-width: none;

}

optgroup {

border: none;

border-bottom: 1px solid #5B5A5A;

border-bottom-width: 1px;

border-bottom-style: solid;

border-color: transparent;

font-weight: bold;

}

option {

padding: 0 3px;

padding: 0 0.228em;

}

legend {

display: block;

margin: 0 0 0.6em 0;

margin: 0 0 0.809em 0;

padding: 0 0.809em;

width: 100%;

border-bottom: 1px solid #DDDDDD;

border-bottom-width: 1px;

border-bottom-style: solid;

border-color: transparent;

text-transform: none;

color: #474747;

font-size: 1.5em;

}

/* --- Previsualisation --- */

legend > h1 {

font-size: inherit;

}

/* --- Previsualisation AJAX --- */

.xmlhttprequest-preview {

padding: 0 2px;

overflow: auto;

background-color: #FFFFFF;

height: 220px;

border: 1px solid #CCCCCC;

margin: 0.228em auto .1618em auto;

color: #2E3B5F;

padding: 0.1618em 0.228em;

border-width: 1px;

border-style: solid;

border-color: transparent;

}

.xmlhttprequest-preview img {

max-width: 600px;

}

/* --- Elements de saisie --- */

input[type=text],

[type=text],

input[type=email],

[type=email],

input[type=url],

[type=url],

input[type=number],

[type=number],

input[type=color],

[type=color],

input[type=tel],

[type=tel],

input[type=search],

[type=search],

input[type=password],

[type=password],

input[type=file],

[type=file],

textarea,

select {

padding: 4px 18px 4px 6px;

padding: 0.309em 0.618em;

background-color: #FFFFFF;

border-width: 1px;

border: 1px solid #CCCCCC;

border-style: solid;

box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);

border-color: transparent;

color: #555555;

margin-bottom: 0.1618em;

}

max-width: 100%;

input[type=text]:hover,

input[type=email]:hover,

input[type=url]:hover,

input[type=number]:hover,

input[type=color]:hover,

input[type=tel]:hover,

input[type=search]:hover,

input[type=password]:hover,

input[type=file]:hover,

textarea:hover,

select:hover {

background-color: #FFFFFF;

border: 1px solid #BBBBBB;

color: #333333;

}

input[type=text]:focus,

[type=text]:focus,

input[type=email]:focus,

[type=email]:focus,

input[type=url]:focus,

[type=url]:focus,

input[type=number]:focus,

[type=number]:focus,

input[type=color]:focus,

[type=color]:focus,

input[type=tel]:focus,

[type=tel]:focus,

input[type=search]:focus,

[type=search]:focus,

input[type=password]:focus,

[type=password]:focus,

input[type=file]:focus,

[type=file]:focus,

textarea:focus,

select:focus {

border-color: #BBBBBB;

box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01), 0 0 6px rgba(0, 0, 0, 0.2);

outline: 0;

color: #222222;

}

input[type=color] {

[type=color] {

padding: 0 2px 0 2px;

padding: 0 0.1618em;

width: 25px;

width: 1.482em;

}

.field-smaller { width: 29px; }

.field-small { width: 77px; }

.field-large { width: 200px; }

.field-xlarge { width: 250px; }

.form-field-date,

.form-field-datetime {

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

}

form input:focus:invalid,

.form-field-date .input-date {

form textarea:focus:invalid,

width: 80%;

form .constraint-status-right input,

form .constraint-status-right textarea {

border-color: rgba(196, 60, 43, 0.3);

box-shadow: 0 0 3px rgba(196, 60, 43, 0.1);

}

form input:focus:valid,

.form-field-datetime .input-date {

form textarea:focus:valid,

width: 40%;

form .constraint-status-right input,

form .constraint-status-right textarea {

border-color: rgba(71, 137, 72, 0.3);

box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);

}

input.field-smaller { width: 29px; }

.form-field-datetime .label-time {

input.field-small { width: 77px; }

width: 18%;

input.field-large { width: 200px; }

position: relative;

input.field-xlarge { width: 250px; }

display: inline-block;

}

input.input-date { width: 100px; }

.form-field-datetime .label-time input {

input.input-hours { width: 50px; }

padding: 0.309em;

input.input-minutes { width: 50px; }

width: 100%;

}

input[name$="_hours"] { width: 50px; }

.label-time:after {

input[name$="_minutes"] { width: 50px; }

position: absolute;

bottom: 18%;

left: 103%;

content: attr(data-time);

}

/* --- Cache le generateur de mot de passe sur chrome --- */

.cip-icon-key-small {

display: none !important;

}

/* --- Element du formulaire (englobe le label et l'input d'un champ) --- */

.form-element,

.form-element-textarea {

position: relative;

margin: 0 1em 1em 1em;

margin: 0 0.618em 0.618em 0.618em;

}

@media (min-width: 769px) {

div#main.main-with-left.main-with-right section .form-element,

#main.main-with-left.main-with-right section .form-element,

div#main.main-with-left.main-with-right section .form-element-textarea {

#main.main-with-left.main-with-right section .form-element-textarea {

margin: 5px 0;

margin: 0.309em 0;

}

.fieldset-description {

margin: 0 1em 1.5em 1em;

margin: 0 1em 0.618em 1em;

}

@media (max-width: 768px) {

.form-element,

.form-element-textarea {

margin: 0 0.6em 1em 0.6em;

}

.fieldset-description {

margin: 0 0.6em 1.3em 0.6em;

}

@media (max-width: 480px) {

@media (min-width: 769px) {

.form-element,

.form-element-textarea {

margin: 0 0.6em 0.5em 0.6em;

margin: 0 1.618em 1em 1.618em;

}

.fieldset-description {

margin: 0 0.6em 0.9em 0.6em;

margin: 0 1.618em 1.482em 1.618em;

}

@media (max-width: 768px) {

.form-element-textarea + div.center button,

.fieldset-content > div.center button {

margin-top: 5px;

}

.form-element [id$="user_avatar"] img {

max-width: 200px;

}

.form-field {

position: relative;

display: inline-block;

max-width: 600px;

width: 100%;

}

@media (max-width:360px) {

.form-field {

max-width: 270px;

}

.form-field-free-large {

width: 100%;

max-width: none;

}

.form-field-action-link {

text-align: center;

}

/* --- Label pour les checkbox et radio --- */

.form-field label {

display: block;

margin: 0 10px 0 0;

margin: 0 0.618em 0 0;

}

/* --- Label pour les inputs [for] et pour les elements sans associations --- */

.form-element > label {

display: inline-block;

padding-right: 10px;

padding: 0 0.618em 0.618em 0;

width: 40%;

width: 100%;

text-align: left;

vertical-align: top;

}

.field-description {

@media (min-width: 1025px) {

display: block;

.form-field {

font-size: 0.8em;

width: calc(60% - 0.309em);

line-height: 12px;

}

@media (max-width: 768px) {

.form-element > label {

width: 100%;

width: 40%;

}

span.field-description {

display: inline-block;

font-size: 0.7em;

font-style: italic;

}

@media (min-width: 769px) {

.field-description {

.form-field-select {

display: inline-block;

max-width: 59%;

font-size: 0.618em;

}

font-style: italic;

}

.form-field-select select {

.form-field-select select,

.form-field-multi-select select {

max-width: 100%;

}

@media (min-width: 769px) {

.field-description {

display: block;

font-size: 0.809em;

font-style: normal;

}

input[disabled=disabled],

input[disabled=disabled]:hover,

input[disabled=disabled]:focus,

textarea[disabled=disabled],

textarea[disabled=disabled]:hover,

textarea[disabled=disabled]:focus,

select[disabled=disabled],

select[disabled=disabled]:hover,

select[disabled=disabled]:focus {

select[disabled=disabled]:focus,

background-color: #F1F1F1;

border: 1px solid #CCCCCC;

color: #AAAAAA;

cursor: not-allowed;

}

input[readonly=readonly],

input[readonly=readonly]:hover,

input[readonly=readonly]:focus,

textarea[readonly=readonly],

textarea[readonly=readonly]:hover,

textarea[readonly=readonly]:focus,

select[readonly=readonly],

select[readonly=readonly]:hover,

select[readonly=readonly]:focus {

background-color: #FAFAFA;

border-width: 1px;

border: 1px solid #CCCCCC;

border-style: solid;

color: #888888;

border-color: transparent;

cursor: not-allowed;

}

.form-field-checkbox {

display: inline-block;

}

/* --- Textarea --- */

.form-field-textarea {

position: relative;

display: inline;

margin: 5px auto;

margin: 0.309em auto;

width: 99%;

}

textarea {

width: 100%;

overflow: auto;

resize: vertical;

}

.form-element-textarea textarea {

width: 100%;

}

.form-element-textarea .form-field-textarea {

display: block;

}

.form-element .form-field-textarea {

display: inline-block;

}

.form-element-textarea .form-field-textarea div {

float: left;

}

.form-element-preview, .form-element-reset {

margin: 5px auto 0 auto;

margin: 0.309em auto 0 auto;

text-align: center;

display: inline;

}

/* --- choix des permissions --- */

.form-element-auth .form-field {

display: inline-block;

margin: 2px 0 0 0;

margin: 0.1618em 0 0 0;

}

.form-element-auth .form-field div[class^="advanced-auth"] {

float:left;

}

.form-element-auth .field-description {

display: inline;

font-style: italic;

}

.advanced-auth-group select {

padding-right: 5px;

padding-right: 0.309em;

max-width: 153px;

margin-right: 0.618em;

overflow-x: auto;

}

.advanced-auth-select select {

padding-right: 5px;

padding-right: 0.309em;

max-width: 132px;

word-wrap: normal;

overflow-x: auto;

}

.advanced-auth-select {

margin-left:5px;

margin-left:0.309em;

}

.advanced-auth-input {

margin-left: 5px;

margin-left: 0.309em;

width: auto;

}

.advanced-auth-input input {

padding: 4px 24px 4px 6px;

padding: 0.228em 1.482em 0.228em 0.309em;

}

.advanced-auth-input button {

margin-left: -29px;

margin: 0 0 0.1618em -0.456em;

padding: 5px 5px 6px 5px;

padding: 0.456em 0.309em 0.456em;

border-width: 0 0 0 1px;

}

.advanced-auth-input-result {

margin: 2px 0 0 0;

margin: 0.1618em 0 0 0;

width: 138px;

padding: 0.1618em;

height: 100px;

height: 6.854em;

}

.bbcode ~ .form-field-textarea textarea {

border-width: 0 1px 1px 1px;

}

@media (min-width: 769px) {

.form-element-textarea-small {

width: 49%;

}

.form-element .form-field-textarea {

width: 59%;

}

@media (max-width: 480px) {

.form-element-auth .form-field .advanced-auth-input {

float: none;

margin: 5px 0 0 0;

}

/* --- Verification des contraintes de formulaire --- */

.constraint-status-error input,

.constraint-status-error textarea {

border-color: rgba(196, 60, 43, 0.3);

box-shadow: inset 0 0 3px rgba(196, 60, 43, 0.1);

color: #C43C35;

}

.constraint-status-error input:hover,

.constraint-status-error input:focus,

.constraint-status-error textarea:hover,

.constraint-status-error textarea:focus {

border-color: rgba(196, 60, 43, 0.5);

box-shadow: inset 0 0 6px rgba(196, 60, 43, 0.3);

color: #C43C35;

}

.text-status-constraint {

position:absolute;

display: block;

z-index: 1;

padding: 6px 5px;

padding: 0.309em;

left: 5px;

top: 110%;

min-width: 20em;

border-width: 1px;

background-color: #FEFEFE;

border-style: solid;

border: 1px solid #EAEAEA;

border-color: transparent;

box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3);

font-size: 0.809em;

font-size: 0.8em;

font-weight: bold;

text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);

}

input + .text-status-constraint {

top: 25px;

}

.text-status-constraint:after,

.text-status-constraint:before {

content: " ";

position: absolute;

}

.text-status-constraint:before {

left: 8px;

top: -9px;

border-bottom: 9px solid rgba(230, 230, 230, 1);

border-width: 0 9px 9px 9px;

border-left: 9px solid transparent;

border-style: solid;

border-right: 9px solid transparent;

border-color: transparent;

}

.text-status-constraint:after {

left: 9px;

top: -8px;

border-bottom: 8px solid rgba(250, 250, 250, 1);

border-width: 0 8px 8px 8px;

border-left: 8px solid transparent;

border-style: solid;

border-right: 8px solid transparent;

border-color: transparent;

}

div.field-required:after,

.field-required:after,

div.picture-status-constraint:after {

.picture-status-constraint:after {

display: inline-block;

position: absolute;

right: 4px;

left: -16px;

font: normal normal normal 14px/1 FontAwesome;

font-family: 'Font Awesome 5 Free';

font-weight: 900;

font-size: inherit;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

div.field-required:after {

.field-required:after {

top: 10px;

top: 14px;

opacity: 0.6;

color: #C43C35;

font-size: 0.809rem;

font-size: 0.8rem;

content: "\f069";

display: table;

}

.form-field-date.field-required:after,

.form-field-date.picture-status-constraint:after {

right: 24px;

}

.form-field-select.field-required:after,

.form-field-number.field-required:after,

.form-field-decimal.field-required:after {

right: -10px;

}

.form-field-datetime.field-required:after {

right: -15px;

}

.form-field-checkbox.field-required:after {

right: -20px;

top: 0;

}

.form-field-upload-file.field-required:after {

right: 43px;

top: 12px;

}

.constraint-status-right .form-field-upload-file.picture-status-constraint:after {

right: 40px;

top: 8px;

}

.constraint-status-right .form-field-color:after,

.constraint-status-right .form-field-select:after,

.constraint-status-right .form-field-number:after,

.constraint-status-right .form-field-decimal:after {

right: -20px;

}

.constraint-statuts-right .form-field-checkbox:after {

top: 4px;

}

.constraint-statuts-right .form-field-datetime:after {

right: -22px;

}

.form-field-number input,

.form-field-decimal input,

.form-field-datetime input {

padding-right: 2px;

}

.form-element-date .constraint-status-error div.field-required:after,

.form-element-date .constraint-status-error .field-required:after,

.form-element-date .constraint-status-right div.field-required:after {

.form-element-date .constraint-status-right .field-required:after {

right: 10px;

}

.form-field-textarea.field-required:after,

.constraint-status-right .form-field-textarea.field-required:after,

.constraint-status-right .form-field-textarea.field-required:after {

top: 45%;

}

.constraint-status-right div.field-required:after {

.constraint-status-right .field-required:after {

content: " ";

}

.constraint-status-right div.form-field-checkbox.picture-status-constraint:after {

.constraint-status-right .form-field-checkbox.picture-status-constraint:after {

top: 0;

}

.constraint-status-right div.picture-status-constraint:after {

.constraint-status-right .picture-status-constraint:after {

opacity: 1;

font-size: 1.5rem;

top: 6px;

top: 10px;

}

.constraint-status-error .form-field-textarea .picture-status-constraint:after,

.constraint-status-right .form-field-textarea .picture-status-constraint:after {

top: 40%;

}

.constraint-status-right div.picture-status-constraint:after {

.constraint-status-right .picture-status-constraint:after {

content: "\f00c";

color: #57A957;

}

.constraint-status-error i.picture-status-constraint {

content: "\f056";

color: #C43C35;

}

.form-field-multi-select.field-required:after {

display: none;

}

.constraint-status-right .form-field-multi-select select {

border-color: rgba(71, 137, 72, 0.3);

box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);

}

.form-field-radio-button.field-required:after,

.form-field-multiple-checkbox.field-required:after {

top: 4px;

top: 8px;

right: -16px;

}

.form-field-radio {

display: inline-block;

}

.required-fields-text {

text-align: center;

}

/* --- HTML Table--- */

.html-table-header-sortable {

float: right;

display: none;

}

.html-table-header-sortable .fa {

margin-bottom: 0.228em;

}

@media (max-width: 768px) {

@media (min-width: 769px) {

.html-table-header-sortable {

display: none;

display: inline-block;

}

.html-table-header-sortable .fa-caret-up { margin-bottom: -4px; }

.html-table-header-sortable .fa-caret-down { margin-top: -12px; }

.html-table-header-sortable .sort-active {

color: #AAAAAA;

}

/* --- Auto-completion --- */

.autocomplete-suggestions {

background-color: #FFFFFF;

border-width: 1px;

border: 1px solid #999999;

border-style: solid;

border-color: transparent;

overflow: auto;

}

.autocomplete-suggestions strong {

font-weight: normal;

color: #3399FF;

}

.autocomplete-suggestion {

padding: 2px 5px;

padding: 0.1618em 0.309em;

white-space: nowrap;

overflow: hidden;

cursor: pointer;

}

.autocomplete-selected {

background-color: #F0F0F0;

}

.autocomplete-no-suggestion {

text-align: center;

}

div[id*='keyword'] .form-autocompleter-container input {

max-width: calc(100% - 20px);

max-width: calc(100% - 1.309em);

}

/* --- Lined textarea --- */

.linedwrap {

max-width: 100%;

}

.linedtextarea {

display: inline-block;

margin: 0;

padding: 0 0 0 10px;

padding: 0 0 0 0.618em;

width: calc(100% - 60px);

height: 100%;

background-color: #FFFFFF;

}

.linedtextarea textarea,

.linedwrap .codelines .lineno {

font-size: 10pt;

font-family: monospace;

line-height: normal !important;

}

.linedtextarea textarea {

margin: 0;

padding: 5px 0 0 0;

padding: 0.309em 0 0 0;

width: 100% !important;

height: 100%;

border: 0;

}

.linedwrap .lines {

display: inline-block;

overflow: hidden;

margin-top: 0;

padding: 5px 0 0 0;

padding: 0.309em 0 0 0;

width: 50px;

height: 100%;

background-color: #FFFFFF;

border-width: 0 1px 0 0;

border-right: 1px solid #C0C0C0;

border-style: solid;

border-color: transparent;

}

.linedwrap .codelines .lineno {

padding: 0.0em 0.5em 0 0;

padding: 0.0em 0.618em 0 0;

text-align: right;

color: #AAAAAA;

white-space: nowrap;

}

.linedwrap .codelines .lineselect {

.auth-setter {

color: red;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

@media (min-width: 769px) {

.form-element-auth {

width: 50%;

margin: 0 0 2.618em;

}

.form-element-auth > label {

width: 100%;

display: block;

font-size: large;

}

Saved diffs

Original text

Open file

/* --------------------------------------
		form.css
Contient les elements : 
 - button,
 - formulaire,
-----------------------------------------*/


/* -- Boutons et class boutons -- */
/* ------------------------------ */

/* --- Normal --- */
button,
.button {
	padding: 0.3em 1em;
	height: auto;
	background-image: linear-gradient(to bottom,  rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
	background-color: #F1F1F1;
	border-style: solid;
	border-width: 1px;
	border-color: #E1E1E1 #D1D1D1 #C9C9C9 #DDDDDD;
	border-radius: 1px;
	box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
	color: #777777;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
	white-space: nowrap;
	transition: all 0.2s linear;
}

button:hover,
.button-hover {
	background-color: #F9F9F9;
	transition: all 0.3s linear;
}

button:active,
.button-active {
	background-color: #F5F5F5;
	border-color: #DDDDDD;
	box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
	transition: all 0.2s linear;
}

/* --- Petit bouton --- */
button.small,
.button-small {
	padding: 0.2em 0.5em;
	font-size: 1.1rem;
}

/* --- Bouton de formulaire --- */
button.submit {
	background-color: #366493;
	border-color: #1E5083;
	color: #F1F1F1;
	text-shadow: none;
}

button.submit:hover {
	background-color: #517BA6;
	border-color: #366493;
	color: #FFFFFF;
}

/* --- Bouton basic --- */
.basic-button {
	display: inline-block;
	margin: 1px;
	padding: 1px 6px;
	border: none;
	font-weight: bold;
	color: #FFFFFF;
}

.basic-button:hover {
	color: #FAFAFA;
	text-decoration: none;
}

/* --- Bouton basic avec couleur de base --- */
.basic-button 			{ background-color: #366493; }
.basic-button:hover 	{ background-color: #517BA6; }

/* --- Bouton basic avec couleur alternative --- */
.basic-button.alt 		{ background-color: #E2A447; }
.basic-button.alt:hover { background-color: #FFC672; }

/* --- field button --- */
.field-button {
	display: inline-block;
	font-size: 0;
	white-space: nowrap;
}

.field-button button {
	margin-left: -1px;
	padding: 4px 8px;
	font-size: 11px;
}


/* -- Formulaires -- */
/* ----------------- */
.fieldset-mini {
	margin: 20px auto auto auto;
	width: 540px;
}

fieldset {
	margin: 1.5em 0;
	background: none;
	border: none;	
}

fieldset img {
	max-width: 250px;
}

@media (min-width: 769px) {
	fieldset img {
		max-width: 450px;
	}
}

fieldset.fieldset-submit {
	width: 100%;
	background: none;
	border: none;
	text-align: center;
}

fieldset.fieldset-submit legend {
	display: none;
}

.horizontal-fieldset-desc,
.horizontal-fieldset-element  {
	display: inline-block;
	vertical-align: middle;
}

.horizontal-fieldset-desc + .horizontal-fieldset-element {
	max-width: 100%;
}

.horizontal-fieldset-element .form-field-select {
	max-width: none;
}

optgroup {
	border: none;
	border-bottom: 1px solid #5B5A5A;
	font-weight: bold;
}

option {
	padding: 0 3px;
}

legend {
	display: block;
	margin: 0 0 0.6em 0;
	width: 100%;
	border-bottom: 1px solid #DDDDDD;
	text-transform: none;
	color: #474747;
	font-size: 1.5em;
}

/* --- Previsualisation --- */
.xmlhttprequest-preview {
	padding: 0 2px;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	color: #2E3B5F;
}

.xmlhttprequest-preview img {
	max-width: 600px;
}

/* --- Elements de saisie --- */
input[type=text],
input[type=email],
input[type=url],
input[type=number],
input[type=color],
input[type=tel],
input[type=search],
input[type=password],
input[type=file],
textarea,
select {
	padding: 4px 18px 4px 6px;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
	color: #555555;
}

input[type=text]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=color]:hover,
input[type=tel]:hover,
input[type=search]:hover,
input[type=password]:hover,
input[type=file]:hover,
textarea:hover,
select:hover {
	background-color: #FFFFFF;
	border: 1px solid #BBBBBB;
	color: #333333;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=color]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=file]:focus,
textarea:focus,
select:focus {
	border-color: #BBBBBB;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01), 0 0 6px rgba(0, 0, 0, 0.2);
	outline: 0;
	color: #222222;
}

input[type=color] {
	padding: 0 2px 0 2px;
	width: 25px;
}

form input:focus:invalid,
form textarea:focus:invalid,
form .constraint-status-right input,
form .constraint-status-right textarea {
	border-color: rgba(196, 60, 43, 0.3);
	box-shadow: 0 0 3px rgba(196, 60, 43, 0.1);
}

form input:focus:valid,
form textarea:focus:valid,
form .constraint-status-right input,
form .constraint-status-right textarea {
	border-color: rgba(71, 137, 72, 0.3);
	box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}

input.field-smaller 	{ width: 29px;  }
input.field-small   	{ width: 77px;  }
input.field-large   	{ width: 200px; }
input.field-xlarge 		{ width: 250px; }

input.input-date 		{ width: 100px; }
input.input-hours 		{ width: 50px;  }
input.input-minutes 	{ width: 50px;  }

input[name$="_hours"] 	{ width: 50px;  }
input[name$="_minutes"] { width: 50px;  }

/* --- Cache le generateur de mot de passe sur chrome --- */
.cip-icon-key-small {
	display: none !important;
}

/* --- Element du formulaire (englobe le label et l'input d'un champ) --- */
.form-element,
.form-element-textarea {
	position: relative;
	margin: 0 1em 1em 1em;
}

@media (min-width: 769px) {
	div#main.main-with-left.main-with-right section .form-element,
	div#main.main-with-left.main-with-right section .form-element-textarea {
		margin: 5px 0;
	}
}

.fieldset-description {
	margin: 0 1em 1.5em 1em;
}

@media (max-width: 768px) {
	.form-element,
	.form-element-textarea {
		margin: 0 0.6em 1em 0.6em;
	}

	.fieldset-description {
		margin: 0 0.6em 1.3em 0.6em;
	}
}

@media (max-width: 480px) {
	.form-element,
	.form-element-textarea {
		margin: 0 0.6em 0.5em 0.6em;
	}

	.fieldset-description {
		margin: 0 0.6em 0.9em 0.6em;
	}
}

@media (max-width: 768px) {
	.form-element-textarea + div.center button,
	.fieldset-content > div.center button {
		margin-top: 5px;
	}
}

.form-element [id$="user_avatar"] img {
	max-width: 200px;
}

.form-field {
	position: relative;
	display: inline-block;
	max-width: 600px;
}

@media (max-width:360px) {
	.form-field {
		max-width: 270px;
	}
}

.form-field-free-large {
	width: 100%;
	max-width: none;
}

.form-field-action-link {
	text-align: center;
}

/* --- Label pour les checkbox et radio --- */
.form-field label {
	display: block;
	margin: 0 10px 0 0;
}

/* --- Label pour les inputs [for] et pour les elements sans associations --- */
.form-element > label {
	display: inline-block;
	padding-right: 10px;
	width: 40%;
	text-align: left;
	vertical-align: top;
}

.field-description {
	display: block;
	font-size: 0.8em;
	line-height: 12px;
}

@media (max-width: 768px) {
	.form-element > label {
		width: 100%;
	}

	span.field-description {
		display: inline-block;
		font-size: 0.7em;
		font-style: italic;
	}
}

@media (min-width: 769px) {
	.form-field-select {
		max-width: 59%;
	}
}

.form-field-select select {
	max-width: 100%;
}

input[disabled=disabled],
input[disabled=disabled]:hover,
input[disabled=disabled]:focus,
textarea[disabled=disabled],
textarea[disabled=disabled]:hover,
textarea[disabled=disabled]:focus,
select[disabled=disabled],
select[disabled=disabled]:hover,
select[disabled=disabled]:focus {
	background-color: #F1F1F1;
	border: 1px solid #CCCCCC;
	color: #AAAAAA;
	cursor: not-allowed;
}

input[readonly=readonly],
input[readonly=readonly]:hover,
input[readonly=readonly]:focus,
textarea[readonly=readonly],
textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:focus,
select[readonly=readonly],
select[readonly=readonly]:hover,
select[readonly=readonly]:focus {
	background-color: #FAFAFA;
	border: 1px solid #CCCCCC;
	color: #888888;
}

.form-field-checkbox {
	display: inline-block;
}

/* --- Textarea --- */
.form-field-textarea {
	position: relative;
	display: inline;
	margin: 5px auto;
	width: 99%;
}

textarea {
	width: 100%;
	overflow: auto;
	resize: vertical;
}

.form-element-textarea textarea {
	width: 100%;
}

.form-element-textarea .form-field-textarea {
	display: block;
}

.form-element .form-field-textarea {
	display: inline-block;
}

.form-element-textarea .form-field-textarea div {
	float: left;
}

.form-element-preview, .form-element-reset {
	margin: 5px auto 0 auto;
	text-align: center;
	display: inline;
}

/* --- choix des permissions --- */
.form-element-auth .form-field {
	display: inline-block;
	margin: 2px 0 0 0;
}

.form-element-auth .form-field div[class^="advanced-auth"] {
	float:left;
}

.form-element-auth .field-description {
	display: inline;
	font-style: italic;
}

.advanced-auth-group select {
	padding-right: 5px;
	max-width: 153px;
	overflow-x: auto;
}

.advanced-auth-select select {
	padding-right: 5px;
	max-width: 132px;
	word-wrap: normal;
	overflow-x: auto;
}

.advanced-auth-select {
	margin-left:5px;
}

.advanced-auth-input {
	margin-left: 5px;
	width: auto;
}

.advanced-auth-input input {
	padding: 4px 24px 4px 6px;
}

.advanced-auth-input button {
	margin-left: -29px;
	padding: 5px 5px 6px 5px;
	border-width: 0 0 0 1px;
}

.advanced-auth-input-result {
	margin: 2px 0 0 0;
	width: 138px;
	height: 100px;
}

.bbcode ~ .form-field-textarea textarea {
	border-width: 0 1px 1px 1px;
}

@media (min-width: 769px) {
	.form-element-textarea-small {
		width: 49%;
	}

	.form-element .form-field-textarea {
		width: 59%;
	}
}

@media (max-width: 480px) {
	.form-element-auth .form-field .advanced-auth-input {
		float: none;
		margin: 5px 0 0 0;
	}
}

/* --- Verification des contraintes de formulaire --- */
.constraint-status-error input,
.constraint-status-error textarea {
	border-color: rgba(196, 60, 43, 0.3);
	box-shadow: inset 0 0 3px rgba(196, 60, 43, 0.1);
	color: #C43C35;
}

.constraint-status-error input:hover,
.constraint-status-error input:focus,
.constraint-status-error textarea:hover,
.constraint-status-error textarea:focus {
	border-color: rgba(196, 60, 43, 0.5);
	box-shadow: inset 0 0 6px rgba(196, 60, 43, 0.3);
	color: #C43C35;
}

.text-status-constraint {
	position:absolute;
	display: block;
	z-index: 1;
	padding: 6px 5px;
	left: 5px;
	min-width: 20em;
	background-color: #FEFEFE;
	border: 1px solid #EAEAEA;
	box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3);
	font-size: 0.8em;
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

input + .text-status-constraint {
	top: 25px;
}

.text-status-constraint:after,
.text-status-constraint:before {
	content: " ";
	position: absolute;
}

.text-status-constraint:before {
	left: 8px;
	top: -9px;
	border-bottom: 9px solid rgba(230, 230, 230, 1);
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
}

.text-status-constraint:after {
	left: 9px;
	top: -8px;
	border-bottom: 8px solid rgba(250, 250, 250, 1);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}

div.field-required:after,
div.picture-status-constraint:after {
	display: inline-block;
	position: absolute;
	right: 4px;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

div.field-required:after {
	top: 10px;
	opacity: 0.6;
	color: #C43C35;
	font-size: 0.8rem;
	content: "\f069";
}

.form-field-date.field-required:after,
.form-field-date.picture-status-constraint:after {
	right: 24px;
}

.form-field-select.field-required:after,
.form-field-number.field-required:after,
.form-field-decimal.field-required:after {
	right: -10px;
}

.form-field-datetime.field-required:after {
	right: -15px;
}

.form-field-checkbox.field-required:after {
	right: -20px;
	top: 0;
}

.form-field-upload-file.field-required:after {
	right: 43px;
	top: 12px;
}

.constraint-status-right .form-field-upload-file.picture-status-constraint:after {
	right: 40px;
	top: 8px;
}

.constraint-status-right .form-field-color:after,
.constraint-status-right .form-field-select:after,
.constraint-status-right .form-field-number:after,
.constraint-status-right .form-field-decimal:after {
	right: -20px;
}

.constraint-statuts-right .form-field-checkbox:after {
	top: 4px;
}

.constraint-statuts-right .form-field-datetime:after {
	right: -22px;
}

.form-field-number input,
.form-field-decimal input,
.form-field-datetime input {
	padding-right: 2px;
}

.form-element-date .constraint-status-error div.field-required:after,
.form-element-date .constraint-status-right div.field-required:after {
	right: 10px;
}

.form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after {
	top: 45%;
}

.constraint-status-right div.field-required:after {
	content: " ";
}

.constraint-status-right div.form-field-checkbox.picture-status-constraint:after {
	top: 0;
}

.constraint-status-right div.picture-status-constraint:after {
	opacity: 1;
	font-size: 1.5rem;
	top: 6px;
}

.constraint-status-error .form-field-textarea .picture-status-constraint:after,
.constraint-status-right .form-field-textarea .picture-status-constraint:after {
	top: 40%;
}

.constraint-status-right div.picture-status-constraint:after {
	content: "\f00c";
	color: #57A957;
}

.constraint-status-error i.picture-status-constraint {
	content: "\f056";
	color: #C43C35;
}

.form-field-multi-select.field-required:after {
	display: none;
}

.constraint-status-right .form-field-multi-select select {
	border-color: rgba(71, 137, 72, 0.3);
	box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}

.form-field-radio-button.field-required:after,
.form-field-multiple-checkbox.field-required:after {
	top: 4px;
	right: -16px;
}

.form-field-radio {
	display: inline-block;
}

/* --- HTML Table--- */
.html-table-header-sortable {
	float: right;
}

@media (max-width: 768px) {
	.html-table-header-sortable {
		display: none;
	}
}

.html-table-header-sortable .fa-caret-up 	{ margin-bottom: -4px; }
.html-table-header-sortable .fa-caret-down 	{ margin-top: -12px; }

.html-table-header-sortable .sort-active {
	color: #AAAAAA;
}

/* --- Auto-completion --- */
.autocomplete-suggestions {
	background-color: #FFFFFF;
	border: 1px solid #999999;
	overflow: auto;
}

.autocomplete-suggestions strong {
	font-weight: normal;
	color: #3399FF;
}

.autocomplete-suggestion {
	padding: 2px 5px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.autocomplete-selected {
	background-color: #F0F0F0;
}

.autocomplete-no-suggestion {
	text-align: center;
}

div[id*='keyword'] .form-autocompleter-container input {
	max-width: calc(100% - 20px);
}

/* --- Lined textarea --- */
.linedwrap {
	max-width: 100%;
}

.linedtextarea {
	display: inline-block;
	margin: 0;
	padding: 0 0 0 10px;
	width: calc(100% - 60px);
	height: 100%;
	background-color: #FFFFFF;
}

.linedtextarea textarea,
.linedwrap .codelines .lineno {
	font-size: 10pt;
	font-family: monospace;
	line-height: normal !important;
}

.linedtextarea textarea {
	margin: 0;
	padding: 5px 0 0 0;
	width: 100% !important;
	height: 100%;
	border: 0;
}

.linedwrap .lines {
	display: inline-block;
	overflow: hidden;
	margin-top: 0;
	padding: 5px 0 0 0;
	width: 50px;
	height: 100%;
	background-color: #FFFFFF;
	border-right: 1px solid #C0C0C0;
}

.linedwrap .codelines .lineno {
	padding: 0.0em 0.5em 0 0;
	text-align: right;
	color: #AAAAAA;
	white-space: nowrap;
}

.linedwrap .codelines .lineselect {
	color: red;
}

Changed text

Open file

/* --------------------------------------
		form.css
Contient les elements :
 - button,
 - formulaire,
---------------------------------------- */


/* -- Boutons et class boutons -- */
/* ------------------------------ */

/* --- Normal --- */
button,
.button {
	margin: 0.618em;
	padding: 0.309em 1em;
	height: auto;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	text-align: center;
	white-space: nowrap;
	transition: all 0.2s linear;
}

button:hover,
.button-hover {
	transition: all 0.3s linear;
}

button:active,
.button-active {
	transition: all 0.2s linear;
}

/* --- Petit bouton --- */
button.small,
.button-small {
	padding: 0.228em 0.618em;
	font-size: 0.809em;
}

/* --- Bouton basic --- */
.basic-button {
	display: inline-block;
	margin: 0.1618em;
	padding: 0.1618em 0.309em;
	border: none;
	font-weight: bold;
}

.basic-button:hover {
	text-decoration: none;
}


/* -- Formulaires -- */
/* ----------------- */
.fieldset-mini {
	margin: 1.309em auto auto auto;
	width: 540px;
}

fieldset {
	margin: 1.618em 0;
	background: none;
	border: none;
}

fieldset img {
	max-width: 250px;
}

@media (min-width: 769px) {
	fieldset img {
		max-width: 320px;
	}
}

@media (min-width: 1366px) {
	fieldset img {
		max-width: 420px;
	}
}

.fieldset-submit {
	text-align: center;
}

.fieldset-submit legend {
	display: none;
}

.horizontal-fieldset-desc,
.horizontal-fieldset-element  {
	display: inline-block;
	vertical-align: middle;
	margin-right: 1em;
}

.horizontal-fieldset-desc + .horizontal-fieldset-element {
	max-width: 100%;
}

.horizontal-fieldset-element .form-field-select {
	max-width: none;
}

optgroup {
	border: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: transparent;
	font-weight: bold;
}

option {
	padding: 0 0.228em;
}

legend {
	display: block;
	margin: 0 0 0.809em 0;
	padding: 0 0.809em;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: transparent;
	text-transform: none;
	font-size: 1.5em;
}

legend > h1 {
	font-size: inherit;
}

/* --- Previsualisation AJAX --- */
.xmlhttprequest-preview {
	overflow: auto;
	height: 220px;
	margin: 0.228em auto .1618em auto;
	padding: 0.1618em 0.228em;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
}

.xmlhttprequest-preview img {
	max-width: 600px;
}

/* --- Elements de saisie --- */
[type=text],
[type=email],
[type=url],
[type=number],
[type=color],
[type=tel],
[type=search],
[type=password],
[type=file],
textarea,
select {
	padding: 0.309em 0.618em;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	margin-bottom: 0.1618em;
	max-width: 100%;
}

[type=text]:focus,
[type=email]:focus,
[type=url]:focus,
[type=number]:focus,
[type=color]:focus,
[type=tel]:focus,
[type=search]:focus,
[type=password]:focus,
[type=file]:focus,
textarea:focus,
select:focus {
	outline: 0;
}

[type=color] {
	padding: 0 0.1618em;
	width: 1.482em;
}

.field-smaller 	{ width: 29px;  }
.field-small   	{ width: 77px;  }
.field-large   	{ width: 200px; }
.field-xlarge 	{ width: 250px; }

.form-field-date,
.form-field-datetime {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.form-field-date .input-date {
	width: 80%;
}

.form-field-datetime .input-date {
	width: 40%;
}

.form-field-datetime .label-time {
	width: 18%;
	position: relative;
	display: inline-block;
}

.form-field-datetime .label-time input {
	padding: 0.309em;
	width: 100%;
}

.label-time:after {
	position: absolute;
	bottom: 18%;
	left: 103%;
	content: attr(data-time);
}

/* --- Cache le generateur de mot de passe sur chrome --- */
.cip-icon-key-small {
	display: none !important;
}

/* --- Element du formulaire (englobe le label et l'input d'un champ) --- */
.form-element,
.form-element-textarea {
	position: relative;
	margin: 0 0.618em 0.618em 0.618em;
}

@media (min-width: 769px) {
	#main.main-with-left.main-with-right section .form-element,
	#main.main-with-left.main-with-right section .form-element-textarea {
		margin: 0.309em 0;
	}
}

.fieldset-description {
	margin: 0 1em 0.618em 1em;
}

@media (min-width: 769px) {
	.form-element,
	.form-element-textarea {
		margin: 0 1.618em 1em 1.618em;
	}

	.fieldset-description {
		margin: 0 1.618em 1.482em 1.618em;
	}
}

.form-element [id$="user_avatar"] img {
	max-width: 200px;
}

.form-field {
	position: relative;
	display: inline-block;
	width: 100%;
}

.form-field-free-large {
	width: 100%;
	max-width: none;
}

.form-field-action-link {
	text-align: center;
}

/* --- Label pour les checkbox et radio --- */
.form-field label {
	display: block;
	margin: 0 0.618em 0 0;
}

/* --- Label pour les inputs [for] et pour les elements sans associations --- */
.form-element > label {
	display: inline-block;
	padding: 0 0.618em 0.618em 0;
	width: 100%;
	text-align: left;
	vertical-align: top;
}

@media (min-width: 1025px) {
	.form-field {
		width: calc(60% - 0.309em);
	}
	.form-element > label {
		width: 40%;
	}
}

.field-description {
	display: inline-block;
	font-size: 0.618em;
	font-style: italic;
}

.form-field-select select,
.form-field-multi-select select {
	max-width: 100%;
}

@media (min-width: 769px) {
	.field-description {
		display: block;
		font-size: 0.809em;
		font-style: normal;
	}
}

input[disabled=disabled],
input[disabled=disabled]:hover,
input[disabled=disabled]:focus,
textarea[disabled=disabled],
textarea[disabled=disabled]:hover,
textarea[disabled=disabled]:focus,
select[disabled=disabled],
select[disabled=disabled]:hover,
select[disabled=disabled]:focus,
input[readonly=readonly],
input[readonly=readonly]:hover,
input[readonly=readonly]:focus,
textarea[readonly=readonly],
textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:focus,
select[readonly=readonly],
select[readonly=readonly]:hover,
select[readonly=readonly]:focus {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	cursor: not-allowed;
}

.form-field-checkbox {
	display: inline-block;
}

/* --- Textarea --- */
.form-field-textarea {
	position: relative;
	display: inline;
	margin: 0.309em auto;
	width: 99%;
}

textarea {
	width: 100%;
	overflow: auto;
	resize: vertical;
}

.form-element-textarea textarea {
	width: 100%;
}

.form-element-textarea .form-field-textarea {
	display: block;
}

.form-element .form-field-textarea {
	display: inline-block;
}

.form-element-textarea .form-field-textarea div {
	float: left;
}

.form-element-preview, .form-element-reset {
	margin: 0.309em auto 0 auto;
	text-align: center;
	display: inline;
}

/* --- choix des permissions --- */
.form-element-auth .form-field {
	display: inline-block;
	margin: 0.1618em 0 0 0;
}

.form-element-auth .form-field div[class^="advanced-auth"] {
	float:left;
}

.form-element-auth .field-description {
	display: inline;
	font-style: italic;
}

.advanced-auth-group select {
	padding-right: 0.309em;
	margin-right: 0.618em;
	overflow-x: auto;
}

.advanced-auth-select select {
	padding-right: 0.309em;
	max-width: 132px;
	word-wrap: normal;
	overflow-x: auto;
}

.advanced-auth-select {
	margin-left:0.309em;
}

.advanced-auth-input {
	margin-left: 0.309em;
	width: auto;
}

.advanced-auth-input input {
	padding: 0.228em 1.482em 0.228em 0.309em;
}

.advanced-auth-input button {
	margin: 0 0 0.1618em -0.456em;
	padding: 0.456em 0.309em 0.456em;
}

.advanced-auth-input-result {
	margin: 0.1618em 0 0 0;
	padding: 0.1618em;
	height: 6.854em;
}

.bbcode ~ .form-field-textarea textarea {
	border-width: 0 1px 1px 1px;
}

@media (min-width: 769px) {
	.form-element-textarea-small {
		width: 49%;
	}

	.form-element .form-field-textarea {
		width: 59%;
	}
}

@media (max-width: 480px) {
	.form-element-auth .form-field .advanced-auth-input {
		float: none;
	}
}

/* --- Verification des contraintes de formulaire --- */
.text-status-constraint {
	position:absolute;
	display: block;
	z-index: 1;
	padding: 0.309em;
	top: 110%;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	font-size: 0.809em;
	font-weight: bold;
}

.text-status-constraint:after,
.text-status-constraint:before {
	content: " ";
	position: absolute;
}

.text-status-constraint:before {
	left: 8px;
	top: -9px;
	border-width: 0 9px 9px 9px;
	border-style: solid;
	border-color: transparent;
}

.text-status-constraint:after {
	left: 9px;
	top: -8px;
	border-width: 0 8px 8px 8px;
	border-style: solid;
	border-color: transparent;
}

.field-required:after,
.picture-status-constraint:after {
	display: inline-block;
	position: absolute;
	left: -16px;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.field-required:after {
	top: 14px;
	opacity: 0.6;
	font-size: 0.809rem;
	content: "\f069";
	display: table;
}

.form-field-date.field-required:after,
.form-field-date.picture-status-constraint:after {
	right: 24px;
}

.form-field-select.field-required:after,
.form-field-number.field-required:after,
.form-field-decimal.field-required:after {
	right: -10px;
}

.form-field-datetime.field-required:after {
	right: -15px;
}

.form-field-checkbox.field-required:after {
	right: -20px;
	top: 0;
}

.form-field-upload-file.field-required:after {
	right: 43px;
	top: 12px;
}

.constraint-status-right .form-field-upload-file.picture-status-constraint:after {
	right: 40px;
	top: 8px;
}

.constraint-status-right .form-field-color:after,
.constraint-status-right .form-field-select:after,
.constraint-status-right .form-field-number:after,
.constraint-status-right .form-field-decimal:after {
	right: -20px;
}

.constraint-statuts-right .form-field-checkbox:after {
	top: 4px;
}

.constraint-statuts-right .form-field-datetime:after {
	right: -22px;
}

.form-field-number input,
.form-field-decimal input,
.form-field-datetime input {
	padding-right: 2px;
}

.form-element-date .constraint-status-error .field-required:after,
.form-element-date .constraint-status-right .field-required:after {
	right: 10px;
}

.form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after {
	top: 45%;
}

.constraint-status-right .field-required:after {
	content: " ";
}

.constraint-status-right .form-field-checkbox.picture-status-constraint:after {
	top: 0;
}

.constraint-status-right .picture-status-constraint:after {
	opacity: 1;
	font-size: 1.5rem;
	top: 10px;
}

.constraint-status-error .form-field-textarea .picture-status-constraint:after,
.constraint-status-right .form-field-textarea .picture-status-constraint:after {
	top: 40%;
}

.constraint-status-right .picture-status-constraint:after {
	content: "\f00c";
}

.constraint-status-error i.picture-status-constraint {
	content: "\f056";
}

.form-field-multi-select.field-required:after {
	display: none;
}

.form-field-radio-button.field-required:after,
.form-field-multiple-checkbox.field-required:after {
	top: 8px;
	right: -16px;
}

.form-field-radio {
	display: inline-block;
}

.required-fields-text {
	text-align: center;
}

/* --- HTML Table--- */
.html-table-header-sortable {
	display: none;
}

.html-table-header-sortable .fa {
	margin-bottom: 0.228em;
}

@media (min-width: 769px) {
	.html-table-header-sortable {
		display: inline-block;
	}
}

/* --- Auto-completion --- */
.autocomplete-suggestions {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	overflow: auto;
}

.autocomplete-suggestions strong {
	font-weight: normal;
}

.autocomplete-suggestion {
	padding: 0.1618em 0.309em;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.autocomplete-no-suggestion {
	text-align: center;
}

div[id*='keyword'] .form-autocompleter-container input {
	max-width: calc(100% - 1.309em);
}

/* --- Lined textarea --- */
.linedwrap {
	max-width: 100%;
}

.linedtextarea {
	display: inline-block;
	margin: 0;
	padding: 0 0 0 0.618em;
	width: calc(100% - 60px);
	height: 100%;
}

.linedtextarea textarea,
.linedwrap .codelines .lineno {
	font-size: 10pt;
	font-family: monospace;
	line-height: normal !important;
}

.linedtextarea textarea {
	margin: 0;
	padding: 0.309em 0 0 0;
	width: 100% !important;
	height: 100%;
	border: 0;
}

.linedwrap .lines {
	display: inline-block;
	overflow: hidden;
	margin-top: 0;
	padding: 0.309em 0 0 0;
	width: 50px;
	height: 100%;
	border-width: 0 1px 0 0;
	border-style: solid;
	border-color: transparent;
}

.linedwrap .codelines .lineno {
	padding: 0.0em 0.618em 0 0;
	text-align: right;
	white-space: nowrap;
}

.auth-setter {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (min-width: 769px) {
	.form-element-auth {
		width: 50%;
		margin: 0 0 2.618em;
	}
	.form-element-auth > label {
		width: 100%;
		display: block;
		font-size: large;
	}
}