:root {
            --agri-green: #367b40;
            --agri-green-dark: #2f6c38;
            --agri-bg: #f8fcf3;
            --agri-border: #aeb4aa;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            min-height: 100%;
        }

        body {
            min-height: 100vh;
            margin: 0;
            background: var(--agri-bg);
            font-family: Arial, Helvetica, sans-serif;
            color: #171717;

            /* Bootstrap flex utilities could also be used,
               but keeping this here makes the page vertically centered */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Main container */
        .login-container {
            width: 100%;
            max-width: 320px;
            padding: 24px 20px;
            text-align: center;
        }

        /* Tractor */
        .tractor {
            color: var(--agri-green);
            font-size: 48px;
            line-height: 1;
            margin-bottom: 12px;
        }

        /* Title */
        .login-title {
            font-size: 20px;
            font-weight: 700;
            margin: 0 0 7px;
        }

        .login-subtitle {
            font-size: 10px;
            line-height: 14px;
            color: #666;
            margin: 0 0 23px;
        }

        /* Form group */
        .login-field {
            position: relative;
            margin-bottom: 10px;
        }

        .login-field .form-control {
            width: 100%;
            height: 40px;
            padding-left: 38px;
            padding-right: 12px;

            border: 1px solid var(--agri-border);
            border-radius: 4px;
            background: #fbfdf9;

            color: #333;
            font-size: 12px;

            box-shadow: none;
        }

        .login-field .form-control::placeholder {
            color: #777;
            opacity: 1;
        }

        .login-field .form-control:focus {
            border-color: var(--agri-green);
            box-shadow: 0 0 0 2px rgba(54, 123, 64, 0.10);
            background: #fff;
        }

        /* Input icon */
        .field-icon {
            position: absolute;
            z-index: 3;

            left: 12px;
            top: 50%;
            transform: translateY(-50%);

            color: #59615a;
            font-size: 14px;

            pointer-events: none;
        }

        /* Login button */
        .login-btn {
            width: 100%;
            height: 30px;

            margin-top: 7px;

            border: 0;
            border-radius: 20px;

            background: var(--agri-green);
            color: #fff;

            font-size: 11px;
            font-weight: 500;

            transition: background-color .2s ease,
                        transform .1s ease;
        }

        .login-btn:hover {
            background: var(--agri-green-dark);
            color: #fff;
        }

        .login-btn:active {
            transform: scale(.99);
        }

        .login-btn i {
            margin-right: 5px;
            font-size: 10px;
        }

        /* Notice */
        .notice {
            margin: 11px 0 0;
            padding: 0 8px;

            color: #666;
            font-size: 8px;
            line-height: 11px;
        }

        /* --------------------------------
           Responsive
        -------------------------------- */

        @media (max-width: 575.98px) {
            body {
                align-items: center;
            }

            .login-container {
                max-width: 320px;
                padding: 20px 18px;
            }
        }

        @media (min-width: 576px) {
            .login-container {
                max-width: 360px;
            }

            .tractor {
                font-size: 52px;
            }

            .login-title {
                font-size: 22px;
            }

            .login-subtitle {
                font-size: 11px;
            }

            .login-field .form-control {
                height: 42px;
                font-size: 13px;
            }

            .login-btn {
                height: 34px;
                font-size: 12px;
            }

            .notice {
                font-size: 9px;
                line-height: 13px;
            }
        }

        @media (min-width: 992px) {
            .login-container {
                max-width: 380px;
            }
        }