.uneditable-input, input, select, textarea {
    border: 1px solid #ccc;
    border-radius: 3px;
    background: white;
    color: #555;
    display: inline-block;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    margin-bottom: 9px;
    padding: 4px;
    width: 210px;
}
input[type="checkbox"],
input[type="checkbox"].form-control {
    height: 13px;
    width: 13px;
}
input[type="file"],
input[type="file"].form-control {
    line-height: 1.4;
    height: auto;
    width: auto;
}
textarea, textarea.form-control {
    line-height: 1.4;
}
.form-control {
    appearance: auto;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #555;
    display: inline-block;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    padding: 4px;
    width: 210px;
}

button, input, label, select, textarea {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal input, .form-horizontal select, .form-horizontal textarea, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline input, .form-inline select, .form-inline textarea, .form-search .help-inline, .form-search .uneditable-input, .form-search input, .form-search select, .form-search textarea {
    display: inline-block;
    margin-bottom: 0;
}
.form-horizontal .form-control-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form-horizontal .control-label {
    flex-basis: 140px;
    min-width: 140px;
}
.form-horizontal .controls {
    flex-basis: 220px;
}

input, textarea {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

input.submit {
    border: 0;
    margin-top: 5px;
    padding: 5px 13px 5px 25px;
    font-family: var(--formSubmitFont);
    font-size: 12px;
    color: var(--white);
    background: var(--formSubmitBackground) url("../images/sprites/arrow-white-CHSih8i.png") 14px 10px no-repeat;
}

input[type="submit"] {
    border-radius: 0;
}

form .error-block {
    color: var(--formErrorColor);
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 0;
}
form .help {
    color: #666;
    font-size: 11px;
}

.form-horizontal .control-group > label {
    text-align: left;
}

.form_container {
    background-color: var(--formContainerBackgroundColor);
    border: 1px solid var(--formContainerBorderColor);
    padding: var(--formContainerPadding);
}
.form_container ul, .form_container li {
    list-style-type: none;
}

textarea {
    resize: vertical;
}


/* Full width template forms (forgotten password, etc) */
#profile_birthdate_month {
    width: 60px;
    margin-right:5px;
}

#profile_birthdate_day {
    width: 48px;
}

#profile_birthdate_year {
    width: 60px;
}

#profile_biography {
    min-height: 250px;
}

.profil-edit.form-horizontal .control-group {
    margin-bottom: 10px;
}

/* Warning */
.control-group.warning .help-block,
.control-group.warning .help-inline,
.control-group.warning > label { color: var(--warningText); }
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {border-color: var(--warningBorder); color: var(--warningText); }
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus { border-color: var(--warningBorder); box-shadow: 0 0 6px #333; }
.control-group.warning .input-append .add-on,
.control-group.warning .input-prepend .add-on { background-color: var(--warningBackground); border-color: var(--warningText); color: var(--warningText)}
.control-group.warning label {
    color: black;
}
/* Error */
.control-group.error .help-block,
.control-group.error .help-inline,
.control-group.error > label { color: var(--errorText); }
.control-group.error input,
.control-group.error select,
.control-group.error textarea { border-color: var(--errorBorder); color: var(--errorText); }
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus { border-color: var(--errorBorder); box-shadow: 0 0 6px #f79dbd; }
.control-group.error .input-append .add-on,
.control-group.error .input-prepend .add-on { background-color: var(--errorBackground); border-color: var(--errorText); color: var(--errorText) }
.control-group.error label { color:#000 }

/* Success */
.control-group.success .help-block,
.control-group.success .help-inline,
.control-group.success > label { color: var(--successText); }
.control-group.success input,
.control-group.success select,
.control-group.success textarea { border-color: var(--successBorder); color: var(--successText); }
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus { border-color: var(--successBorder); box-shadow: 0 0 6px #f79dbd; }
.control-group.success .input-append .add-on,
.control-group.success .input-prepend .add-on { background-color: var(--successBackground); border-color: var(--successText); color: var(--successText) }
.control-group.success label { color:#000 }

/* A mettre au propre */

form.social-notifications table tr th.logos {
    text-align: left;
}

form.social-notifications td {
    min-width: 30px;
    text-align: left;
}
form.social-notifications td input {
    margin: 0;
}
form.social-notifications td:first-child {
    min-width: 215px;
}

.controls img {
    vertical-align: middle;
}
.controls .remove-email, .controls .remove-ssh-key {
    margin-left: 5px;
    margin-right: 5px;
}

form.item-action {
    display: inline;
}

.memberships {
    width: 100%;
}
.memberships tr td:first-child {
    width: 50px;
}
.memberships tr td:last-child {
    text-align: right;
}

#login-form-wrapper {
    margin: 0 auto;
    max-width: 400px;
    margin-top: 30px;
}
#login-form-wrapper p {
    text-align: center;
}
#login-form-wrapper .login-signin {
    margin: 0 auto;
    max-width: max-content;
}
#login-form-wrapper input[type="text"],
#login-form-wrapper input[type="password"] {
    height: 34px;
}

#login-with-signup-wrapper {
    margin: 0 auto;
    max-width: 920px;

    grid-template-columns: 400px 1fr;
    grid-template-rows: max-content 1fr max-content;
    grid-row-gap: 15px;
}
@media (min-width: 978px) {
    #login-with-signup-wrapper {
        display: grid;
    }
}
#login-with-signup-wrapper .login-header {
    grid-column: 1 / 3;
    grid-row: 1;
    padding-bottom: 15px;
    text-align: center;
}
@media (min-width: 978px) {
    #login-with-signup-wrapper .login-header {
        padding-bottom: 45px;
        text-align: left;
    }
}
#login-with-signup-wrapper .login-signin {
    max-width: max-content;
    padding: 15px 20px;
    margin: 0 auto 30px;
}
#login-with-signup-wrapper .login-signin h2,
#login-with-signup-wrapper .login-signup h2 {
    font-size: 18px;
}
@media (min-width: 978px) {
    #login-with-signup-wrapper .login-signin {
        padding: var(--formContainerPadding);
        margin: 0;
    }
    #login-with-signup-wrapper .login-signin h2,
    #login-with-signup-wrapper .login-signup h2 {
        font-size: 21px;
    }
}
#login-with-signup-wrapper .form-legalities {
    grid-column: 1 / 3;
    grid-row: 3;
}
#login-with-signup-wrapper .login-header img {
    margin-left: 0;
    max-width: 200px;
}
@media (min-width: 978px) {
    #login-with-signup-wrapper .login-header img {
        max-width: 350px;
    }
}
#login-with-signup-wrapper .what-is {
    text-align: center;
    text-wrap: balance;
}
@media (min-width: 978px) {
    #login-with-signup-wrapper .what-is {
        text-align: left;
    }
}
@media (min-width: 768px) {
    #login-with-signup-wrapper .form-field-two-columns {
        display: flex;
    }
}
#login-with-signup-wrapper .control-group.login-signin-utilities {
    margin: -5px 0 15px;
}

#login-with-signup-wrapper input[type="text"],
#login-with-signup-wrapper input[type="password"],
#login-with-signup-wrapper input[type="email"],
#login-with-signup-wrapper select {
    height: 34px;
}
#login-with-signup-wrapper input[type="email"] {
    width: 100%;
}
#login-with-signup-wrapper .control-group {
    margin-bottom: 10px;
}
#login-with-signup-wrapper .control-group-checkbox {
    display: flex;
    align-items: start;
    margin-bottom: 15px;
}
#login-with-signup-wrapper .control-group-checkbox input[type="checkbox"] {
    margin-top: 5px;
    margin-right: 10px;
}
#login-with-signup-wrapper .help-block {
    display: block;
    margin-bottom: 1.5em;
}

#login-form .errors {
    color: var(--red);
}
#login-form .errors ul {
    margin: 0px;
}
#login-form .control-group {
    margin-right: 10px;
    float: left;
}
#login-form .control-group.submit {
    margin-right: 0px;
    padding-top: 5px;
}

form input#search {
    padding-left: 16px;
    background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAQAAADY4iz3AAACzWlDQ1BJQ0MgUHJvZmlsZQAAeAGFUk9IFFEc/s02EoSIQYV4iHcKCZUprKyg2nZ1WZVtW5XSohhn37qjszPTm9k1xZMEXaI8dQ+iY3Ts0KGbl6LArEvXIKkgCDx16PvN7OoohG95O9/7/f1+33tEbZ2m7zspQVRzQ5UrpaduTk2Lgx8pRR3UTlimFfjpYnGMseu5kr+719Zn0tiy3se1dvv2PbWVZWAh6i22txD6IZFmAB+ZnyhlgLPAHZav2D4BPFgOrBrwI6IDD5q5MNPRnHSlsi2RU+aiKCqvYjtJrvv5uca+i7WJg/5cj2bWjr2z6qrRTNS090ShvA+uRBnPX1T2bDUUpw3jnEhDGinyrtXfK0zHEZErEEoGUjVkuZ9qTp114HUYu126k+P49hClPslgqIm16bKZHYV9AHYqy+wQ8AXo8bJiD+eBe2H/W1HDk8AnYT9kh3nWrR/2F65T4HuEPTXgzhSuxfHaih9eLQFD91QjaIxzTcTT1zlzpIjvMdQZmPdGOaYLMXeWqhM3gDthH1mqZgqxXfuu6iXuewJ30+M70Zs5C1ygHElysRXZFNA8CVgUfYuwSQ48Ps4eVeB3qJjAHLmJ3M0o9x7VERtno1KBVnqNV8ZP47nxxfhlbBjPgH6sdtd7fP/p4xV117Y+PPmNetw5rr2dG1VhVnFlC93/xzKEj9knOabB06FZWGvYduQPmsxMsAwoxH8FPpf6khNV3NXu7bhFEsxQPixsJbpLVG4p1Oo9g0qsHCvYAHZwksQsWhy4U2u6OXh32CJ6bflNV7Lrhv769nr72vIebcqoKSgTzbNEZpSxW6Pk3Xjb/WaREZ84Or7nvYpayf5JRRA/hTlaKvIUVfRWUNbEb2cOfhu2flw/pef1Qf08CT2tn9Gv6KMRvgx0Sc/Cc1Efo0nwsGkh4hKgioMz1E5UY40D4inx8rRbZJH9D0AZ/WZERy3eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABDklEQVQYGWP4z/CfQSBP+JnQb6F/ws8E8kB8CGT8zyA8iy2Vg4GFgZHhN8MPhp933qkyQIBAntR/zX+xx/4X/C8oXaf5T/6/YCtEF4P0S7X/YUf+64G58iWr1P7LfIdKqfxR+w+VANkhb/BL+T9EiomZCWjwJajpDAwPf/5nhnKY+D4xMAjmwaTEQn+xsf6D8JhkdzMwsE+ASHJZMS1kZhC/DZFi/K9me+Sl6GeGP98ZGJg4eRmYGX78/x7+ajWQx3DrcILFcYnf/Jz8nKL/1O4w/2dnZFwpFsrAAPQyEOgx6DMIA+kvDDdaE5Ym/WH8+P+zDTxYIA4GkuItczT/6f0M18GUAkou6dlf8J8DAFPgfw45en1pAAAAAElFTkSuQmCC) no-repeat 3px center;
}

#registration_form label.required::after {
    content: 'required';
    font-weight: normal;
    color: #999;
    font-size: 12px;
    margin-left: 7px;
}

.form-legalities {
    margin: 40px 0 50px 0;
    line-height: 13px;
}

.form-legalities, .form-legalities a {
    font-weight: normal;
    color: #999;
    font-size: 11px;
}

.form-legalities a, .form-legalities a:hover {
    text-decoration: underline;
}

.emails-list-row {
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    margin-bottom: 10px;
    padding: 7px;
}
.emails-list-row:hover {
    background: #f5f5f5;
}

.emails-list-row-email {
    display: flex;
    align-items: center;
}

.emails-list-row-primary {
    text-transform: uppercase;
    color: #396c17;
    background: #dcf6c8;
    padding: 1px 5px;
    font-size: 10px;
    border-radius: 3px;
    margin-left: 10px;
}

.emails-list-row-make-primary {
    margin-left: 10px;
}
.emails-list-row-make-primary button {
    display: inline-flex;
    align-items: center;
}

.emails-list-row-status {
    display: flex;
    align-items: center;
}
.emails-list-row-status img {
    margin-right: 5px;
}

.emails-list-row-button {
    background: none;
    border: none;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    text-indent: 0;
    display: flex;
    align-items: center;
    color: #61C51F;
}
.emails-list-row-button:hover {
    text-decoration: underline;
}

.emails-list-row-button img {
    margin-right: 5px;
}

.emails-list-row-button span {
    margin: 2px 0 -2px 0;
}

.emails-list-row form {
    margin: 0;
    padding: 0;
}

.container.profile_edit .profile-picture-field-wrapper .controls {
    position: relative;
    margin-left: 15px;
}

.picture-cropper-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 1rem 155px;
}
.picture-cropper-preview[hidden] {
    display: none;
}
.picture-cropper-preview img {
    border-radius: 4px;
}
.picture-cropper-preview .btn-link {
    font-size: 13px;
    padding: 0;
}
.picture-cropper-editor cropper-canvas {
    width: 100%;
    height: min(60vh, 480px);
}
.picture-cropper-zoom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1rem;
}

.controls ul {
    color: var(--red);
    list-style: none;
    padding: 0;
    margin: 0;
}