/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

body {
    background-color: #F3F5F7;
    margin: 0;
    font-family: "Assistant", "Proxima Nova", "Roboto", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #0d0d12;
    text-align: left;
}

.page-header {
    text-align: center;

    .logo-icon {
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    h1 {
        margin-bottom: 6px;
    }
}

.mainCard {
    padding: 3rem 5rem;
    max-width: 700px;
    margin: 1rem auto;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: -8px 12px 18px 0 rgba(39, 25, 70, 0.07), 0 4px 17px rgba(75, 75, 90, 0.06), 0 1.21px 5.13px rgba(75, 75, 90, 0.0389), 0 0.5px 2.13px rgba(75, 75, 90, 0.0297), 0 0.18px 0.77px rgba(75, 75, 90, 0.0204);

    .form-group {
        margin-bottom: 1rem;
    }

    .checkable-images {
        margin-bottom: 6px;
    }

    h2 {
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
    }
}

.signUpForm {

}

.deviseForm {
    .field {
        display: flex;
        gap: 10px;
        margin-bottom: 5px;

        label {
            max-width: 33.3333333%;
            width: 100%;
        }

        input {
            max-width: 66.6666666%;
            width: 100%;
        }
    }

    .simple-field {
        margin-bottom: 5px;
    }

    .actions {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .userLinks {
        display: flex;
        gap: 8px;
    }

    .btn-primary {
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        line-height: 1.5;
        -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        color: #FFFFFF;
        padding: 1rem 1.6rem;
        box-sizing: border-box;
        box-shadow: none;
        pointer-events: auto;
        background: linear-gradient(135deg, #2828FF -31.25%, #FE2414 156.68%);
        -webkit-transition-property: background-size;
        transition-property: background-size;
        background-size: 100%;
        border: none;
        --btn-border-radius: 12px;
        font-size: 20px;
        border-radius: 12px;
        cursor: pointer;
        width: 100%;
    }
}