/* ================ forms =====================*/
fieldset.form {
    border:none;

}

form {
    display: block;
    max-width: 760px;
}

form label {
    display:block;
    font-weight: normal;
    width: 260px;
    float: left;
}

.form legend {
    padding: 0 12px;
}


form ul {
    list-style-type: none;
    margin:0;
    padding:0;

}

form > ul > li {

    clear:both;
    margin: 0 0 24px 0;
}

form ul li.buttons {
    width:100%;
    text-align:left;

}

input , select {
    border: solid 1px #aaa;
    padding:5px;
    background:#fff;
}

form  input {
    background:#fff;
}

textarea {
    border: solid 1px #aaa;
    padding: 5px;
    line-height:1.5;
    width: 100%;
    min-height: 150px;
}

input[type="text"] , input[type="date"] , input[type="password"], select {
    width: 100%;
}

.login-form label {
    display: block;
}

.login-form input[type="text"], .login-form input[type="password"] {
    width: 100%;
    min-width: 0;
}

input[type="submit"] {
    background:#e94f59;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    padding:4px 24px;
    cursor: hand;
    cursor: pointer;
    margin:10px 0 0 0;
    float:right;

    &.float-none {
        float:none;
    }

}


 input[type="submit"]:hover {
    background-color:#e94f59;

}


form .multi .option {
    float:left;
}

form .multi input {
    width:40px;
    margin-top:7px;
    float:left;
    clear:both;
}


form span.highlight {
    background: #fdd;
    display:block;
    padding:0px 10px 10px 10px;
}


form span.captcha {
    display:block;
    clear:both;

}

.has-error input {
    border-color: #a94442;
}

.has-error label {
    color: #a94442;
}


/*====== comment ====== */
.form .comment {
    font-size:8pt;
    color:#66f;
    display:inline-block;
    width:100%;

}


/* reset some bootstrap and select2 form styling */
.select2-selection , .select2-container--default .select2-selection--single , .select2-container--default .select2-selection--multiple{
    border-radius:0;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color:#EC971F;
}



input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
    line-height: 1;
}


.pointer {
    cursor: pointer;
}



.i18n_ar {
    text-align: right;
    font-size: 1.3em;
}

.i18n_zh {
    font-size: 1.5em;
}


.translatable-options span {
    margin: 0 3px;
    cursor: move;
}



/* ================ signin ===================== */

.form-signin
{
    margin: 0 auto;
    display: block;
}

.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.form-signin .form-control:focus
{
    z-index: 2;
}

.form-signin input {
    min-width: 0;
    border-radius: 0;
}

.form-signin input:first-child
{
    margin-bottom: -1px;
    border-radius: 5px 5px 0 0 ;
}

.form-signin input:last-of-type
{
    margin-top: -1px;
    margin-bottom: 10px;
    border-radius: 0 0 5px 5px;
}

.form-signup { 
    display: block;
}

.form-signup .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    min-width: 0;
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}






/* ======= alert ===== */


.flash-wrapper {
    position: absolute;
    top: 5px;
    text-align: center;
    left:0;
    right: 0;
    z-index: 999999;
}

.flash-wrapper .alert {
    min-width: 200px;
    z-index: 2;
    display: inline-block;
}

.login-logo { 
    margin: 7rem 0;
}

.login-logo > img { 
    margin: 0 auto;
    display: block;
}

.login {
    background-color: #eee;
    max-width: 480px;
    margin: 0 auto;
    padding: 10px 20px;
    border: solid 1px #ddd;
}

.login-header { 
    margin: 10px 0 20px;
    padding: 0;
    font-size: 3rem;
}

.sign-in-comment {
    text-align: right;
    margin-top:1em;
 }

.alert {
    max-width: 760px;
}




/* ======= rich text editor ===== */
.has-editor > label { 
    float: none;
}

.editor {
    max-width: 760px;
    max-height: 300px;
}

.ql-editor { 
    max-height: 300px;
}

.ql-container { 
    font-size: inherit !important;
}