Comparer le texte

Encuentra la diferencia entre dos archivos de texto

Real-time diff

Unified diff

Collapse lines

Highlight change

Syntax highlighting

Outils

Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

Untitled diff

Created 6 years agoDiff never expires

Lines
Total
Removed

Words
Total
Removed

To continue using this feature, upgrade to Diffchecker Pro View Pricing

818 lines

Lines
Total
Added

Words
Total
Added

To continue using this feature, upgrade to Diffchecker Pro View Pricing

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;

}

fieldset.fieldset-submit {

@media (min-width: 1366px) {

width: 100%;

fieldset img {

Text moved with changes from lines 309-312 (90.7% similarity)

background: none;

max-width: 420px;

border: none;

}

.fieldset-submit {

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;

}

form input:focus:invalid,

.field-smaller { width: 29px; }

form textarea:focus:invalid,

.field-small { width: 77px; }

form .constraint-status-right input,

.field-large { width: 200px; }

form .constraint-status-right textarea {

.field-xlarge { width: 250px; }

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

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

.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:valid,

.form-field-date .input-date {

form textarea:focus:valid,

width: 80%;

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 .input-date {

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

width: 40%;

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

}

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

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

.form-field-datetime .label-time {

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

width: 18%;

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

position: relative;

display: inline-block;

}

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

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

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

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 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 {

Text moved with changes to lines 82-85 (90.7% similarity)

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;

}

@media (min-width: 1025px) {

.form-field {

width: calc(60% - 0.309em);

}

.form-element > label {

width: 40%;

}

.field-description {

display: block;

display: inline-block;

font-size: 0.8em;

font-size: 0.618em;

line-height: 12px;

font-style: italic;

}

@media (max-width: 768px) {

.form-field-select select,

.form-element > label {

.form-field-multi-select select {

width: 100%;

max-width: 100%;

}

span.field-description {

display: inline-block;

font-size: 0.7em;

font-style: italic;

}

@media (min-width: 769px) {

.form-field-select {

.field-description {

max-width: 59%;

display: block;

font-size: 0.809em;

font-style: normal;

}

.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 {

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;

}

@media (max-width: 768px) {

.html-table-header-sortable .fa {

margin-bottom: 0.228em;

}

@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;

}

Les différences enregistrées

Texte d'origine

Ouvrir un fichier

/* --------------------------------------
		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[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;
}

Texte modifié

Ouvrir un fichier

/* --------------------------------------
		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;
}