/*========================================================
turn read more links into buttons, 
and style bento buttons and blog load more buttons for consistency 
==========================================================*/

.klrn_button.read-more__link,
.simple-button-component .simple-button-value .text-input,
.blogRiver__2-Wjj .load-more-wrapper .load-more {
  margin-top: 2px;
  margin-bottom: 6px;
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  padding: 16px;
  background-color: var(--klrn-primary-lightest) !important;
  border: 2px solid currentColor;
  display: inline-block;
  position: relative;
  text-decoration: none;
  word-wrap: break-word;
  max-width: 100%;
  padding-right: 35px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s !important;
  cursor: pointer;
  left: auto !important;
  top: auto !important; 
}

.simple-button-component {
    margin: 2px 0 6px;
}

.simple-button-component.ghost
  .simple-button-value
  .text-input[style*='color: rgb(255, 255, 255)'] {
  color: #fff !important;
  background-color: transparent !important;
}

.blogRiver__2-Wjj .load-more-wrapper .load-more {
  text-transform: capitalize;
}

.simple-button-component.filled .simple-button-value .text-input {
  background-color: var(--klrn-primary) !important;
  opacity: 0.92;
}

.klrn_button.read-more__link.klrn_button_display_block {
  width: 96%;
  width: 100%;
}

p:not(:first-child)
  .klrn_button.read-more__link.klrn_button_display_block:first-child {
  margin-top: 8px;
  margin-top: 6px;
}

@media (max-width: 1025px) {
  .text-container .read-more__link.klrn_button_display_block {
    width: 100%;
  }
}

/* PBS button should match padding on text boxes */
@media (max-width: 1311px) {
    .simple-button-component {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.blogRiver__2-Wjj .load-more-wrapper .load-more:after,
.klrn_button.read-more__link:after,
.simple-button-component .simple-button-value .text-input:after {
  content: '\F105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
  font-style: normal;
  text-decoration: inherit;
  display: flex;
  align-items: center;
  position: absolute;
  height: 100%;
  right: 15px;
  top: 0px;
  font-size: 22px;
}

.klrn_button.read-more__link,
.klrn_button.read-more__link * {
  color: var(--klrn-primary);
}

a.klrn_button.read-more__link:hover,
a.klrn_button.read-more__link:focus,
a.klrn_button.read-more__link:active,
a.klrn_button.read-more__link:hover *,
a.klrn_button.read-more__link:focus *,
a.klrn_button.read-more__link:active *,
.simple-button-component.ghost.hasHoverEffect
  .simple-button-value
  .text-input:hover,
.simple-button-component.ghost.hasHoverEffect
  .simple-button-value
  .text-input:focus,
.simple-button-component.ghost.hasHoverEffect
  .simple-button-value
  .text-input:active,
.simple-button-component.ghost.hasHoverEffect
  .simple-button-value
  .text-input:hover
  *,
.simple-button-component.ghost.hasHoverEffect
  .simple-button-value
  .text-input:focus
  *,
.simple-button-component.ghost.hasHoverEffect
  .simple-button-value
  .text-input:active
  *,
.blogRiver__2-Wjj .load-more-wrapper .load-more:hover,
.blogRiver__2-Wjj .load-more-wrapper .load-more:focus,
.blogRiver__2-Wjj .load-more-wrapper .load-more:active,
.blogRiver__2-Wjj .load-more-wrapper .load-more:hover *,
.blogRiver__2-Wjj .load-more-wrapper .load-more:focus *,
.blogRiver__2-Wjj .load-more-wrapper .load-more:active *,
.simple-button-component.filled.hasHoverEffect
  .simple-button-value
  .text-input:hover,
.simple-button-component.filled.hasHoverEffect
  .simple-button-value
  .text-input:focus,
.simple-button-component.filled.hasHoverEffect
  .simple-button-value
  .text-input:active,
.simple-button-component.filled.hasHoverEffect
  .simple-button-value
  .text-input:hover
  *,
.simple-button-component.filled.hasHoverEffect
  .simple-button-value
  .text-input:focus
  *,
.simple-button-component.filled.hasHoverEffect
  .simple-button-value
  .text-input:active
  * {
  background-color: var(--klrn-primary-dark) !important;
  border-color: var(--klrn-primary-dark) !important;
  border-width: 2px !important;
  color: var(--klrn-primary-lightest) !important;
  max-width: 100% !important;
  text-decoration: none;
}

.simple-button-component.filled .simple-button-value .text-input:hover,
.simple-button-component.filled .simple-button-value .text-input:focus,
.simple-button-component.filled .simple-button-value .text-input:active,
.simple-button-component.filled .simple-button-value .text-input:hover *,
.simple-button-component.filled .simple-button-value .text-input:focus *,
.simple-button-component.filled .simple-button-value .text-input:active * {
  background-color: var(--klrn-primary-dark) !important;
  border-color: var(--klrn-primary-dark) !important;
  opacity: 1;
}