.myLoginPage {
    font-family: Arial, Helvetica, sans-serif;
}

    .myLoginPage * {
        box-sizing: border-box
    }

    /* Full-width input fields */
    .myLoginPage input[type=text], .myLoginPage input[type=password] {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        display: inline-block;
        border: none;
        background: #f1f1f1;
    }

        .myLoginPage input[type=text]:focus, .myLoginPage input[type=password]:focus {
            background-color: #ddd;
            outline: none;
        }

    /* Set a style for all buttons */
    .myLoginPage button {
        background-color: #04AA6D;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
        opacity: 0.9;
    }

        .myLoginPage button:hover {
            opacity: 1;
        }

    /* Extra styles for the cancel button */
    .myLoginPage .cancelbtn {
        padding: 14px 20px;
        background-color: #f44336;
    }

    /* Float cancel and login buttons and add an equal width */
    .myLoginPage .cancelbtn, .myLoginPage .loginbtn {
        float: left;
        width: 50%;
    }

    /* Add padding to container elements */
    .myLoginPage .container {
        padding: 16px;
    }

    /* Clear floats */
    .myLoginPage .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

/* Change styles for cancel button and login button on extra small screens */
@media screen and (max-width: 300px) {
    .myLoginPage .cancelbtn, .myLoginPage .loginbtn {
        width: 100%;
    }
}