:host {
  display: inline-block;
  border-radius: 3px;
  /* added padding so that the selected highlight doesnt go outside the div */
  padding: 5px;
}

/* Buttons */
.pl-button {
  color: inherit;
  font: inherit;
  line-height: 1.5;
  border-radius: 3px;
  /*padding: 7px 14px;*/
  background-color: transparent;
  border: 1px solid;
  cursor: pointer;
  width: 100%;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  display: flex;
  align-items: center;
  flex-direction: row;
}

button.pl-button {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.pl-button--icon-only {
  padding: 7px;
}

.pl-button__icon {
  width: 1em;
  height: 1em;
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -25%;
  pointer-events: none;
}

.pl-button__icon + .pl-button__label {
  margin-left: 8px;
}

.pl-button__label + .pl-button__icon {
  margin-left: 8px;
}

.pl-button--cta {
  color: #ffffff;
  background-color: #ec5e1d;
  border-color: #ec5e1d;
  font-weight: 600;
}

.pl-button--cta:hover, .pl-button--cta.is-hovered {
  background-color: #aa3500;
  border-color: #aa3500;
}

.pl-button--cta:focus, .pl-button--cta.is-focussed {
  -webkit-box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  outline: none;
}

.pl-button--cta:active, .pl-button--cta.is-active {
  border-color: #aa3500;
  -webkit-box-shadow: inset 0 0 1px 2px #d35300;
  box-shadow: inset 0 0 1px 2px #d35300;
}

.pl-button--cta:disabled, .pl-button--cta.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pl-button--danger {
  color: #ffffff;
  background-color: #db0000;
  border-color: #db0000;
  font-weight: 600;
}

.pl-button--danger:hover, .pl-button--danger.is-hovered {
  background-color: #8f0000;
  border-color: #8f0000;
}

.pl-button--danger:focus, .pl-button--danger.is-focussed {
  -webkit-box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  outline: none;
}

.pl-button--danger:active, .pl-button--danger.is-active {
  border-color: #db0000;
  -webkit-box-shadow: inset 0 0 1px 2px #8f0000;
  box-shadow: inset 0 0 1px 2px #8f0000;
}

.pl-button--danger:disabled, .pl-button--danger.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}




.pl-button--primary {
  color: #ffffff;
  background-color: #1774e5;
  border-color: #1774e5;
  font-weight: 600;
}

.pl-button--primary:hover, .pl-button--primary.is-hovered {
  background-color: #0e4f9e;
  border-color: #0e4f9e;
}

.pl-button--primary:focus, .pl-button--primary.is-focussed {
  -webkit-box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  outline: none;
}

.pl-button--primary:active, .pl-button--primary.is-active {
  border-color: #0e4f9e;
  -webkit-box-shadow: inset 0 0 0 2px #055dab;
  box-shadow: inset 0 0 0 2px #055dab;
}

.pl-button--primary:disabled, .pl-button--primary.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pl-button--secondary {
  color: #1774e5;
  border-color: #1774e5;
  background-color: transparent;
  border-color: #1774e5;
}

.pl-button--secondary:hover, .pl-button--secondary.is-hovered {
  background-color: transparent;
  border-color: #0e4f9e;
  color: #0e4f9e;
}

.pl-button--secondary:focus, .pl-button--secondary.is-focussed {
  -webkit-box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  outline: none;
}

.pl-button--secondary:active, .pl-button--secondary.is-active {
  border-color: #0e4f9e;
  -webkit-box-shadow: inset 0 0 0 2px #0e4f9e;
  box-shadow: inset 0 0 0 2px #0e4f9e;
  color: #0e4f9e;
}

.pl-button--secondary:disabled, .pl-button--secondary.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pl-button--no-border {
  color: #1774e5;
  background-color: transparent;
  border-color: transparent;
}

.pl-button--no-border:hover, .pl-button--no-border.is-hovered {
  background-color: transparent;
  border-color: transparent;
  color: #0e4f9e;
  -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.35);
}

.pl-button--no-border:focus, .pl-button--no-border.is-focussed {
  -webkit-box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  box-shadow: 0 0 2px 4px rgba(77, 190, 255, 0.75);
  outline: none;
}

.pl-button--no-border:active, .pl-button--no-border.is-active {
  -webkit-box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
  color: #0e4f9e;
}

.pl-button--no-border:disabled, .pl-button--no-border.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.popup-container {
  /*width: 80px;*/
  display: flex;
}
