.login {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 50%; }
  @media (max-width: 768px) {
    .login {
      display: block; } }
  .login .login_form {
    display: block;
    width: 80%;
    max-width: 350px;
    background-color: #000000;
    border-radius: 4px;
    padding: 20px;
    margin: auto; }
    .login .login_form input {
      display: block;
      width: 100%;
      margin: 0 auto 30px; }
    .login .login_form .button_bar {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-around;
      flex-wrap: nowrap; }
      .login .login_form .button_bar .cancelButton {
        background-color: #800080;
        color: #ffffff;
        border: 1px solid #000000;
        border-radius: 4px;
        padding: 10px 40px;
        transition-duration: 0.3s; }
        .login .login_form .button_bar .cancelButton:hover {
          background-color: #e5ff00;
          color: #000000;
          transition-duration: 0.3s; }
      .login .login_form .button_bar .loginButton {
        background-color: #008000;
        color: #ffffff;
        border: 1px solid #000000;
        border-radius: 4px;
        padding: 10px 40px;
        transition-duration: 0.3s; }
        .login .login_form .button_bar .loginButton:hover {
          background-color: #e5ff00;
          color: #000000;
          transition-duration: 0.3s; }
  .login .buttonLogin_area {
    display: block;
    width: 210px;
    margin: auto; }
    @media (max-width: 768px) {
      .login .buttonLogin_area {
        margin: 20px auto 0; } }
    .login .buttonLogin_area button {
      display: block;
      width: fit-content;
      background-color: #080080;
      color: #ffffff;
      border: 1px solid #000000;
      border-radius: 4px;
      padding: 10px 40px;
      cursor: pointer;
      margin: auto;
      transition-duration: 0.3s; }
      .login .buttonLogin_area button:hover {
        background-color: #800080;
        transition-duration: 0.3s; }