body {font-family: Arial, Helvetica, sans-serif;
      background-color: #4C82C3;}
      * {box-sizing: border-box;}


      .input-container {
        display: -ms-flexbox; /* IE10 */
        display: flex;
        width: 100%;
        margin-bottom: 15px;
      }

      .icon {
        padding: 10px;
        background: slategrey;
        color: white;
        min-width: 50px;
        text-align: center;
      }

      .input-field {
        width: 100%;
        padding: 10px;
        outline: none;
      }

      .input-field:focus {
        border: 2px solid slategrey;
      }



      button {
        background-color: lightseagreen;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
        opacity: 0.9;
      }

      button:hover {
        opacity:1;
      }

      /* Extra styles for the cancel button */
      .login {
        padding: 14px 20px;
        background-color: #4C82C3;
      }

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

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

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

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