form {
      border: 1px solid #D1D0D0;
      border-top: 5px solid #33b5e5;
      border-left: 5px solid #A9F5BC;
      border-bottom: 5px solid #F5A9A9;
      border-right: 5px solid #F2F5A9;
  }
  
  .fa-input {
    font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  .pen-title h1 {
      margin: 0 0 20px;
      font-size: 48px;
      font-weight: 300;
  }
  .padre {
    padding: 1rem;
    margin: 0 auto;
    width:25%;
    
  }
  h1{
	  text-align: center;
  }
  input[type=text], input[type=password],select {
      width: 80%;
      padding: 10px 20px;
      margin: 10px 10%;
      display: auto;
      border: 1px solid #ccc;
      box-sizing: border-box;
     
  }
  button {
      background-color: #33b5e5;
      color: white;
      padding: 14px 20px;
      margin: 8px 10%;
      border: none;
      cursor: pointer;
      width: 80%;

  }

  button:hover {
      opacity: 0.8;
  }

  .cancelbtn {
      width: auto;
      padding: 10px 18px;
      background-color: #f44336;
  }

  .imgcontainer {
      text-align: center;
      margin: 24px 0 12px 0;
  }

  img.avatar {
      width: 40%;
      border-radius: 50%;
  }

  .container {
      padding: 16px;

    
  }

  span.psw {
      float: right;
      padding-top: 16px;
  }

  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
      span.psw {
         display: block;
         float: none;

      }
      .cancelbtn {
         width: 100%;
      }
  }
  .hc {
      width: 80%;
      margin: 10px 50px;
      display: auto;
      color: #33b5e5;
      font-size: 15x;
      font-weight: 400;
      line-height: 1;
  }
  .hm {
      width: 80%;
      margin: 10px 50px;
      display: auto;
      color: #ED89A5;
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
  }
  body {
      background: #e9e9e9;
      color: #666666;
      font-family: 'RobotoDraft', 'Roboto', sans-serif;
      font-size: 13px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  .categoriesDiv {
    width:100%;
    background-color: #FAFAFA;
  }
  .toggle {
      cursor: pointer;
      position: absolute;
      top: -0;
      right: -0;
      background: #33b5e5;
      width: 30px;
      /* height: 30px; */
      margin: -5px 0 0;
      color: #ffffff;
      font-size: 12px;
      line-height: 30px;
      text-align: center;
  }