/* Timline summary styles */
.card_tokki_container{
  display: flex;
  width: 100%;
  justify-content: center;
  position: relative;
}
.card_left_border{
  width: 5px;
  height: 100%;
  border-radius: 2px;
  left: 0;
  background: #B3DC6C;
  position: absolute;
}
.card_tokki { 
  display: flex;
  width: 80%;
  max-width: 1165px;
  text-align:left; 
  border-radius:12px; 
  margin-bottom:0; 
  border-top:none;
  overflow: hidden; 
  background: var(--tokki-summary-background); 
  border: solid 1px var(--tokki-summary-border);
  padding: 16px; 
  position:relative; 
  box-shadow: none !important; 
  overflow: visible; }
.tl-summary-title .tl-logo-title {
  width: 16px;
}
.tl-summary-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-summary-title > h3 {
  font-size: 13.33px;
  font-weight: 600;
  color: var(--petrokko);
  line-height: 20px;
}
.card_tokki .tl_event_body {
  font-size: 14px;
  color: var(--petrokko);
  line-height: 28px;
}

/* Tokki summary box styles */
#tokki-summary-box {
  border-radius: 12px;
  background: var(--tokki-summary-background);
  padding: 16px;
  border: solid 1px var(--tokki-summary-border);
}
#tokki-summary-box .tokki-summary-header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  position: relative;
}
#tokki-summary-box .tokki-summary-header i{
  position: absolute;
  right: 0;
  color: var(--petrokko);
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
#tokki-summary-box .tokki-summary-header i.icon-dropdown-rotate{
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
#tokki-summary-box .tokki-logo{
  width: 16px;
}
#tokki-summary-box .tokki-summary-title{
  font-size: 13.33px;
  font-weight: 600;
  color: var(--petrokko);
  line-height: 20px;
}
#tokki-summary-box .tokki-summary-content{
  font-size: 14px;
  color: var(--petrokko);
  line-height: 28px;
}
#tokki-summary-box .summary-content{
  overflow: hidden;
  transition: max-height 0.5s ease;
  max-height: 28px;
}

/* Tokki feedback section styles */
.tokki-feedback-section {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #C2CCD3;
}
.tokki-feedback-text {
  font-size: 14px;
  color: var(--petrokko);
  line-height: 28px;
}
.tokki-feedback-icons {
  display: flex;
  gap: 32px;
}
.tokki-feedback-icon {
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tokki-feedback-icon-active {
  color: var(--petrokko);
}
.tokki-feedback-icon-inactive {
  color: var(--petrokko);
  opacity: 0.7;
}
.tokki-feedback-icon-disabled {
  color: var(--petrokko);
  opacity: 0.3;
  cursor: default;
}

.highlighted-word {
  display: inline;
  background: rgba(24, 156, 123, 0.15);
  background-blend-mode: multiply;
  border-radius: 24px;
  padding: 2px 8px;
  font-weight: 700;
  vertical-align: middle;
}
.tokki-text-container {
  display: inline;
}

.tokki-smart-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--petrokko);
  line-height: 28px;
}