.economic-letter-excerpt {
  color: #6e6e6e;
}
#container {
  position: relative;
}

.readability-tool__container {
  z-index: 9999999;
  color: #3366cc;
  padding: 0;
  margin: 1rem;
  background: #ffffff;
  border-radius: 2rem;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 245px;
  border: solid 3px #3366cc;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
}

.readability-tool__container--open {
  background: #eeeeee;
  border-radius: 0;
  border: solid 3px #ffffff;
  width: 400px;
}

.readability-tool__container--open .readability-tools__toogle-container {
  background: #ddd;
  border: 3px solid #fff;
}

/* when in landscape mode, position tool at top of screen */
@media (orientation: landscape) and (max-width: 768px) {
  .readability-tool__container--open {
    top: 0;
    overflow: auto;
    margin: 0;
  }
}

/* if < 400 height, the position to top */
@media (max-height: 575px) {
  .readability-tool__container--open {
    top: 0;
    overflow: auto;
    margin: 0;
  }
}

.readability-tool__title--open {
  color: #000000;
  display: inline-block;
  font-weight: 500;
  font-size: 1rem;
  /* width: 51%; */
  background: #ddd;
  padding: 1rem;
  margin-top: 0;
  /* border-bottom: 3px solid #fff; */
  margin-bottom: 0;
}

.readability-tool__close-button--open {
  text-align: right;
  color: #3366cc;
  float: right;
  background: #ddd;
  /* width: 55%; */
  padding: 1rem;
}

.readability-tool__container .readability-tool__tools-toogle {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  width: 100%;
}

.readability-tool__container--open .readability-tool__tools-toogle {
  width: 51%;
}

.readability-tool__container--open .readability-tool__tools-toogle {
  overflow: auto;
  /* background: #ddd; */
  position: absolute;
  right: 0;
  /* border-bottom: 3px #fff solid; */
}

.readability-tool__container--open .readability-tool__tools-toogle span {
  font-weight: 400;
  color: #36c;
}

.readability-tool__tools-toogle span {
  font-weight: 700;
  color: #3366cc;
  display: inline-block;
  vertical-align: 0.5rem;
  margin-left: 0.25rem;
  /* margin-top: 0.25rem; */
}

.readability-tool__container .readability-tool__options {
  display: none;
  border-top: solid 1px #ebebeb;
  margin: 1rem;
  padding: 0 0.5rem;
}

.readability-tool__container .readability-tool__plus-minus {
  /* width: 2.5rem; */
  background: #ddd;
  border: solid 1px black;
  height: 2.5rem;
  font-size: 1.5rem;
  color: #000;
  padding: 0 .9rem;
}

.readability-tool__container .readability-tool__plus-minus:active {
  background: #36c;
  color: #fff;
}

.readability-tool__container .readability-tool__mode-options > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0;
  background: #fff;
  color: #000;
  border-top: 1px #000 solid;
  border-bottom: 1px #000 solid;
  margin: 0.75rem 0.25rem;
  align-items: center;
  height: 50px;
}

.readability-tool__mode-options .readability-tool__label {
  padding-left: 10px;
}

.readability-tool__mode-options svg {
  margin-left: -10px;
}

.readability-tool__container
  .readability-tool__mode-options
  > div
  .readability-tool__label {
  order: 2;
  flex: 30%;
  line-height: 1;
}

.readability-tool__decrease-font-size {
  order: 1;
}

.readability-tool__increase-font-size {
  order: 4;
}

.readability-tool__decrease-line-height {
  order: 1;
}

.readability-tool__increase-line-height {
  order: 4;
}

.readability-tool__decrease-letter-spacing {
  order: 1;
}

.readability-tool__increase-letter-spacing {
  order: 4;
}

.readability-tool__decrease-word-spacing {
  order: 1;
}

.readability-tool__increase-word-spacing {
  order: 4;
}

.readability-tool__container
  span.options.readability-tool__toggle--reader-mode
  a {
  width: 105px;
  display: inline-block;
  text-align: right;
  padding: 15px 15px 0 0px;
  margin-top: -15px;
  margin-right: -15px;
}
.readability-tool__container .readability-tool__reset-container {
  text-align: center;
  padding: 0.5rem 0 0 0;
  border: 1px #000 solid;
}

.readability-tool__reset-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #000;
  width: 350px;
  margin: 0 auto;
  text-align: center;
}

.readability-tool__reset-btn:active {
  background: #36c;
  color: #fff;
  padding: 0.25rem;
}

.readability-tool__reset-btn-text {
  top: -10px;
  position: relative;
}

.readability-tool__reader-mode {
  width: 100%;
  margin: 0.25rem;
}

.readability-tool__reader-modes-container {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 1rem;
}

.readability-tool__container .readabilityModeOptionsFontSize {
  background-color: #ffffff;
  color: #000000;
}

.readability-tool__toggle--reader-mode p,
.readability-tool__toggle--dark-mode p,
.readability-tool__toggle--contrast-mode p {
  margin: 0 0 0.25rem 0;
  line-height: 1;
  font-size: 0.75rem;
}

.readability-tool__btn--modes {
  width: 100%;
  background: #fff;
  color: #000;
  border: 1px #000 solid;
}

.readability-tool__btn--modes svg {
  fill: #000;
}

.readability-tool__icon {
  margin-top: 0.45rem;
}

.readability-tool__text-size-icon {
  order: 2;
  flex: 30%;
}

.readability-tool__line-height-icon {
  order: 2;
  flex: 30%;
}

.readability-tool__letter-spacing-icon {
  order: 2;
  flex: 30%;
}

.readability-tool__word-spacing-icon {
  order: 2;
  flex: 30%;
}

.readability-tool__hr {
  border-top: solid 2px #ddd;
}

.readability-tool__label {
  font-size: 0.75rem;
}

/* media query for narrow screens */
@media screen and (max-width: 481px) {
  .readability-tool__container {
    width: 240px;
  }
  .readability-tool__container--open {
    width: 90%;
    margin: 0;
  }
  .readability-tool__container .readability-tool__tools-toogle {
    line-height: 1.5;
  }
}

.readability-tool__reader-mode-on,
.readability-tool__dark-mode-on,
.readability-tool__contrast-mode-on {
  background: #36c;
  /* color: #fff; */
}

.readability-tool__btn--modes.readability-tool__reader-mode-on p,
.readability-tool__btn--modes.readability-tool__dark-mode-on p,
.readability-tool__btn--modes.readability-tool__contrast-mode-on p {
  color: #fff;
}

.readability-tool__reader-mode-on svg,
.readability-tool__dark-mode-on svg,
.readability-tool__contrast-mode-on svg {
  fill: #fff;
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape - fix for readability bug */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
  .readability-tool__container {
    border-radius: 0;
  }
}

/* ----------- iPhone XS ----------- */
/* @media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) {
  .readability-tool__container {
      bottom: 2rem;
  }
} */