/* Table of contents */

/*  1. Global
    2. Layout
    3. Components
        3.1. Logo
        3.2. Login Form
        3.3. Button
    4. Forgot password page
*/

/* Alert messages import */
@import "../../../static/css/components/global.css";
@import "../../../static/css/components/alert-messages.css";

/* =============
   Global (Login)
   ============= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

:root {
    --bg-image: url('https://storage.googleapis.com/srfc-player-pictures-master/stade_roazhon.jpg');
}

body {
    margin: 0;
    background: var(--bg-image) no-repeat center center fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: #eee;
}

body * {
    font-family: 'Montserrat';
}

*,
*:focus,
*:hover {
    outline: none;
}

/* =============
   Layout (Login)
   ============= */

.wrapper {
    display: grid;
    margin: 50px auto;
}

.container {
    transition: .900s;
    display: grid;
    margin: 0 auto;
    width: 500px;
    border-radius: 10px;
    background-color: rgba(63, 63, 63, 0.87);
    box-shadow: 0 1px 7px rgb(0 0 0 / 17%);
}

.logo-container {
    display: grid;
    padding: 30px 50px 15px 50px;
}

.login-container {
    display: grid;
    margin: 0 auto;
}

/* =============
   3. Components (Login)
   ============= */

/* 3.1. Logo */

.logo {
    margin: 0 auto;
    max-width: 200px;
}

/* 3.2. Login Form */

::placeholder {
    font-family: 'Montserrat';
    font-size: 14px;
}

.login-form {
    display: grid;
}

input.form-control {
    background-color: rgba(255, 255, 255, 0.973);
    display: block;
    margin: 0 auto;
    padding: 15px 40px 15px 15px;
    width: 300px;
    border-radius: 100px;
    border-style: hidden;
}

.form-group {
    padding: 10px 0;
}

.control-label {
    display: none;
}

.below-login-form {
    margin: 0px auto;
    display: flex;
}

.remember-me {
    float: left;
    font-size: 12px;
    margin: 0 30px 0 0;
}

.forgot-password {
    float: left;
    font-size: 12px;
    margin: 0 0 0 30px;
}

.forgot-password>a {
    text-decoration: none;
    color: inherit;
    font-style: italic;
}

.forgot-password>a:hover {
    text-decoration: underline;
}

/* 3.3. Button */

.submit-button {
    display: grid;
    justify-items: center;
    margin: 0 auto;
}

.btn-style {
    margin: 15px;
    padding: 10px 50px;
    background-color: rgb(167, 4, 4);
    color: inherit;
    border-radius: 15px;
    border-style: hidden;
    cursor: pointer;
    transition: .900s;
}

.btn-style:hover {
    background-color: rgb(112, 7, 7);
    transition: .500s;
}

input[type="checkbox"] {
    height: 9px;
    transform: scale(1.5);
    padding: 0;
}

/* =============
   4. Forgot password page (Login)
   ============= */

.title-forgot-password {
    margin: 0 auto;
}

.go-back-button {
    position: absolute;
    text-decoration: none;
    font-size: 24px;
    padding: 20px 0 0 20px;
    color: #eee;
}