:root {
    --dialog-bg: #fff;
    --dialog-color: #222;

    --form-background: #fff;
    --form-border-color: #f5f6fa;
    --form-color: unset;
}

html[data-theme="dark"] {
    --dialog-bg: #232323;
    --dialog-color: #ffecb3;

    --form-background: #23262a;
    --form-border-color: #383b40;
    --form-color: #fafafc;
}

/* INPUTS / INPUT GROUP / TEXTAREA */
.input,
textarea {
    font-size: 1em;
    padding: 0.8em 1em;
    border: 1.5px solid #d4d7da;
    border-radius: 0.7em;
    outline: none;
    margin: 0.2em 0;
    background: var(--form-background);
    transition: border-color 0.15s, box-shadow 0.18s;
    width: 100%;
    box-sizing: border-box;
    color: #222;
    box-shadow: 0 2px 8px #0001;
}

.input:focus,
textarea:focus {
    border-color: #3f51b5;
    box-shadow: 0 2px 14px #3f51b530;
    background: #f8faff;
}

.input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
    margin-bottom: 1em;
    background: transparent;
}

.input-group .input {
    border: 1.5px solid #d4d7da;
    outline: none;
    background: var(--form-background);
    color: #222;
    box-sizing: border-box;
    font-size: 1em;

    margin: 0;
    box-shadow: none;
    flex: 1 1 auto;
    border-radius: 0.7em;
    transition: border-color 0.15s, box-shadow 0.18s, background 0.13s;
    z-index: 1;
}

.input[readonly],
.input-group .input[readonly] {
    background: #d4d7da;
    /* color: #898989; */
}

.input[readonly]:focus,
.input-group .input[readonly]:focus {
    background: #d4d7da;
}

/* Right button group */
.input-group .input:only-child {
    border-radius: 0.7em;
}

.input-group .input:not(:only-child):first-child {
    border-radius: 0.7em 0 0 0.7em;
    border-right: none;
}

.input-group .btn,
.input-group .btn-default {
    border: 1.5px solid #d4d7da;
    border-radius: 0 0.7em 0.7em 0;
    border-left: none;
    margin: 0;
    min-width: 52px;

    padding: 0 1.2em;
    background: var(--form-background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.18em;
    color: #181818;
    box-shadow: none;
    transition: border-color 0.15s, background 0.13s, color 0.13s;
    cursor: pointer;
    z-index: 2;
}

.input-group .btn:hover,
.input-group .btn:focus,
.input-group .btn-default:hover,
.input-group .btn-default:focus {
    background: #f3f6fa;
    color: #3f51b5;
    border-color: #3f51b5;
}

/* Left icon group */
.input-group .input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7fb;
    border: 1.5px solid #d4d7da;
    border-radius: 0.7em 0 0 0.7em;
    border-right: none;
    font-size: 1.22em;
    color: #757575;
    min-width: 2.7em;
    transition: border-color 0.13s, background 0.13s;
    z-index: 2;
}

.input-group .input-icon+.input {
    border-radius: 0 0.7em 0.7em 0;
    border-left: none;
}

.input-group-search .input {
    border-radius: 1.3em;
}

.input-group-search .input:only-child {
    border-radius: 1.3em;
}

.input-group-search .input:not(:only-child):first-child {
    border-radius: 1.3em 0 0 1.3em;
}

.input-group-search .btn,
.input-group-search .btn-default {
    border-radius: 0 1.3em 1.3em 0;
}

.input-group-search .input-icon {
    border-radius: 1.3em 0 0 1.3em;
}

.input-group-search .input-icon+.input {
    border-radius: 0 1.3em 1.3em 0;
}

/* Focus states (fix double border) */
.input-group:focus-within .input,
.input-group:focus-within .btn,
.input-group:focus-within .btn-default,
.input-group:focus-within .input-icon {
    border-color: #3f51b5;
}

.input-group:focus-within .input {
    background: #f8faff;
}

.input-group:focus-within .input-icon {
    background: #f0f2fa;
    color: #3f51b5;
}



textarea {
    resize: vertical;
    min-height: 90px;
    border-radius: 0.7em;
    box-shadow: 0 2px 8px #0001;
}

label {
    font-weight: 500;
    margin-bottom: 0.15em;
    display: block;
    color: #313151;
    letter-spacing: 0.01em;
}

.form {
    max-width: 500px;
    margin: 2em 0;
    background: var(--form-background);
    border-radius: 1.1em;
    box-shadow: 0 2px 18px #3f51b51a;
    padding: 2em;
    border: 1.5px solid var(--form-border-color);
}

.form>*+* {
    margin-top: 1.1em;
}

.captcha-hint {
    color: #000;
    font-size: 0.95em;
}


dialog::backdrop {
    background: rgba(30, 33, 44, 0.45);
    backdrop-filter: blur(1.5px);
}


dialog.login {

    border: none;
    border-radius: 1em;
    box-shadow: 0 8px 40px #2228, 0 1.5px 14px #0003;
    padding: 2em 1.2em 1.2em;
    min-width: 320px;
    max-width: 95vw;
    background: var(--dialog-bg, #fff);
    color: var(--dialog-color, #222);
    z-index: 9999;
}

.form-msg {
    margin-bottom: .5em;
    font-weight: 600;
}

*[form-template] {
    display: none;
}

@media (max-width: 700px) {
    .input-group {
        max-width: 100%;
    }

    .form {
        padding: 1em;
        max-width: 100%;
    }
}






html[data-theme="dark"] .input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input-group .input,
html[data-theme="dark"] .input-group .input-icon {
    background: var(--form-background) !important;
    color: var(--form-color) !important;
    border-color: var(--form-border-color) !important;
}

html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #b3b8be !important;
}

html[data-theme="dark"] .input-group .btn,
html[data-theme="dark"] .input-group .btn-default {
    background: var(--form-background) !important;
    color: #ffe066 !important;
    border-color: var(--form-border-color) !important;
}

html[data-theme="dark"] .input-group .btn:hover,
html[data-theme="dark"] .input-group .btn:focus,
html[data-theme="dark"] .input-group .btn-default:hover,
html[data-theme="dark"] .input-group .btn-default:focus {
    background: var(--form-border-color) !important;
    color: #ffe066 !important;
    border-color: #ffe066 !important;
}

html[data-theme="dark"] label {
    color: #b3b8be !important;
}

html[data-theme="dark"] .dropdown-content {
    background: var(--form-background) !important;
    color: #ffe066 !important;
    border: 1px solid var(--form-border-color) !important;
    box-shadow: 0 8px 32px #000c !important;
}

html[data-theme="dark"] .dropdown-content a {
    color: #ffe066 !important;
}

html[data-theme="dark"] .dropdown-content a:hover {
    background: #33373c !important;
    color: #fff !important;
}

html[data-theme="dark"] .form,
html[data-theme="dark"] .rating-form {
    background: var(--form-background) !important;
    border-color: var(--form-border-color) !important;
    color: var(--form-color) !important;
}

html[data-theme="dark"] .captcha-hint {
    color: #ebebeb;
}


.input-group.is-invalid .input,
.input-group.is-invalid .input:focus,
.input-group.is-invalid textarea:focus,
.input-group.is-invalid .btn,
.input-group.is-invalid .btn:hover,
.input-group.is-invalid .btn:focus,
.input-group.is-invalid .btn-default,
.input-group.is-invalid .btn-default:hover,
.input-group.is-invalid .btn-default:focus,
.input-group.is-invalid .input-icon,
.input-group.is-invalid:focus-within .input-icon,
.input.is-invalid,
.input.is-invalid:focus,
textarea.is-invalid,
textarea.is-invalid:focus {
    border-color: #e53935;
}