:root{
}

.button{
  display:inline-block;
  height:45px;
  margin:18px 18px 18px 0;
  padding:18px 27px;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  color:#0d77b5;
  border:2px solid #0d77b5;
  border-radius:2px;
  background-color:#fff;
  font-family:inherit;
  font-size:0.875rem;
  font-weight:700;
  line-height:1;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  -webkit-font-smoothing:antialiased;
}

.button:hover,
  .button:focus{
    text-decoration:none;
    color:#2494db;
    border-color:#2494db;
  }

.button:focus{
    outline:2px solid #53b0eb;
    outline-offset:2px;
  }

.button:active{
    color:#0d77b5;
    border-color:#0d77b5;
  }

.button:disabled,
  .button.is-disabled{
    cursor:default;
    color:#d7e1e8;
    border-color:#d7e1e8;
  }

.menu .button{
    margin:0;
  }

@supports (display: inline-flex){

.button{
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:1px 27px 0
}
  }

.button--small{
  height:45px;
  padding:13.5px 27px;
}

.button--primary{
  color:#fff;
  background-color:#0d77b5;
}

.button--primary:hover,
  .button--primary:focus{
    color:#fff;
    background-color:#2494db;
  }

.button--primary:active{
    color:#fff;
    background-color:#2494db;
  }

.button--primary:disabled,
  .button--primary.is-disabled{
    color:#fff;
    background-color:#d7e1e8;
  }

.button__rounded{
  border-radius:1rem;
  height:1.6rem;
}