.sign-in-button {
    margin: 30px 0 12px;
}

.or {
    padding-bottom: 20px;
    text-align: center;
    color: #ddd;
    font-weight: 600;
    font-size: 14px;
    position: relative;
}

.or:before, .or:after {
    content: '';
    position: absolute;
    top: 7px;
    width: calc(43% - 20px);
    height: 1px;
    background-color: #505050;
    box-sizing: border-box;
}

.or:before {
    left:20px;
}

.or:after {
    right:20px;
}

.google-button {
  height: 40px;
  border-width: 0;
  background: #4285f4;
  color: #fff;
  white-space: nowrap;
  box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.05);
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  max-width:311px;

  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  transition: all .2s ease-in-out;
}

.google-button:focus, .google-button:hover {
    box-shadow: 1px 4px 5px 1px rgba(0,0,0,0.1);
    background: #3E7DE5;
    color:#fff;
}

.google-button:active {
    background-color: #3367d6;
    box-shadow: none;
    transition-duration: 10ms;
}
    
.google-button__icon {
  display: inline-block;
  vertical-align: middle;
  padding: 11px;
  width: 18px;
  height: 18px;
  background: #FFF;  
  box-sizing: content-box;
}

.google-button__icon:focus, .google-button__icon:hover {
    background-color: #f5f5f5;
}

.google-button__text {
    display: inline-block;
    vertical-align: middle;
    padding: 0 12px 0 5px;
    font-size: 14px;
    font-family: 'Roboto',arial,sans-serif;
}

.sign-in-button .error-wrapper, .sign-in-button #google-error {
    position: relative !important;
    top: -35px !important;
    display:none;
}

.sign-in-button .error-message {
    line-height: 1.3em;
}