@charset "utf-8";
/* CSS Document */

.default_form {
    max-width: 480px;
    width: calc(100% - 16px);
    background-color: var(--color-bg-level-2);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-surface);
    border-top: 1px solid var(--color-text-secondary);
}

.default_form__body {
    padding: 16px 32px;
}

.default_form__footer {
    background-color: var(--color-bg-level-3);
    padding: 24px 32px;
    display: flex;
    justify-content: end;
    box-shadow: var(--shadow-inset-soft);
}

.default_form__header {
    display: flex;
    padding: 32px 32px 16px;
}

.default_form__header p {
    font-size: 1.6em;
    color: var(--color-text-primary);
}

.default_form__row {
    width: 100%;
}

.default_label {
    color: var(--color-text-secondary);
    transition: .3s;
    font-size: 0.8em;
}

.default_input {
    width: 100%;
    background-color: var(--color-bg-level-3);
    box-shadow: var(--shadow-inset-soft);
    border-radius: 4px;
    border: none;
    border-bottom: 1px solid var(--color-text-secondary);
    color: var(--color-text-primary);
    padding: 12px 16px;
    margin: 8px 0 32px;
    transition: .3s;
}

.default_input::placeholder {
    color: var(--color-text-secondary);
}

.default_input:focus::placeholder {
    color: transparent;
}

.default_input:focus {
    border-color: var(--color-action-primary);
}

.default_btn {
    background-color: var(--color-action-primary);
    color: var(--color-text-primary);
    border-radius: 4px;
    padding: 8px 16px;
    text-align: center;
    border: none;
    box-shadow: var(--shadow-action);
    border-top: 1px solid var(--color-text-secondary);
    display: inline-block;
    transition: .3s;
    cursor: pointer;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}


.default_btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    filter: brightness(1.1);
}

.default_btn.secondary {
    background-color: var(--color-action-secondary);
}

.default_btn.square {
    padding: 8px;
}

@media (min-width: 480px) {

}

@media (min-width: 600px) {

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}