.slider-controls .btn-more span {
  width: 30px;
  height: 30px;
  border-radius: 0;
}
.mt-block {
  margin-top: 15px;
}
@media (max-width: 991px) {
  .content-wrap {
    padding-top: 0;
  }
}
a.dropdown-toggle {
  display: flex;
}
ul.header__buttons li {
  padding: 6px 0;
}
/*--Slider Controls (prev next arrows)--*/

.slider-controls {
    display: inline-flex;
    gap: 1rem;
}
.slider-controls span.arrow-box {
  border: 1px solid #4a4a4a;
width: 30px;
    height:30px;
}

/*---focus-story----*/
.focus-story {
    overflow: hidden;
    display: block;
    border: none;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 20px;
}
.focus-story .content {
  margin: 0;
  margin-bottom: 12px;
}

/*---focus-story--alt---*/
.focus-story {
  max-height: unset !important;
}
.focus-story.focus-story--alt .content {
  margin: 0;
  margin-bottom: 12px;
}
.focus-story.focus-story--alt .focus-related {
    margin-top: 12px;
    padding-bottom: 12px;
    margin-bottom: -20px;
}
.related-inline {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
}
.related-title {
  flex: 0 0 13%;
  font-size: 12px;
  white-space: nowrap;
  text-transform: uppercase;
}
.related-list-wrapper {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.related-arrow {
  position: absolute;
}
.related-arrow.related-arrow--right {
  right: 0;
  background: #ffffff;
  border: none;
}
.related-arrow.related-arrow--left {
  left: 15.3%;
  background: #ffffff;
  border: none;
}
.related-list {
  display: inline-flex;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 0;
}
.related-list li {
  display: flex;
  font-size: 14px;
 padding: 0 16px;
}
.focus-story--alt .related-list li a:hover {
  text-decoration: underline;
}
/*---focus-story--alt 2---*/
.focus-story--alt.two .related-list li a.kicker {
  text-decoration: none;
}
.focus-story--alt.two .related-title {
  margin-top: 1px;
}
.focus-story--alt.two a.headline-link:hover {
  text-decoration: underline;
}
.related-list .bullet {
  color: #bb0000;
  margin-right: 5px;
}
.focus-story .exclusive-label {
    margin: 0 0 10px;
}
.focus-story--alt.two .kicker {
    font-size: 12px;
    font-weight: 400;
}
@media (max-width: 767px) {
  .focus-story--alt.two .meta-line, .focus-story--alt.two .headline-link {
    display: inline;
    line-height: 17px;
  }
  .focus-story--alt.two .related-list li {
    display: block;
  }
  .related-inline {
    display: block;
  }
  .related-title {
    flex: none;
    margin-bottom: 8px;
  }
  .related-list-wrapper {
    overflow-x: visible;
    white-space: normal;
  }
  .related-list {
    display: block;
  }
  .related-list li {
    align-items: flex-start;
    gap: 5px;
    white-space: normal;
    margin-bottom: 6px;
  }
  .focus-story--alt.two .related-list li {
    margin-bottom: 12px;
  }
  .focus-story--alt.two .related-list li .kicker {
    display: inline-block;
  }

}
.related-arrow {
  visibility: hidden; /* controlled via JS */
  opacity: 0;
  transition: opacity 0.2s;
}
.related-arrow[style*="visibility: visible"] {
  opacity: 1;
}
.related-list-wrapper {
  overflow-x: auto;   /* allow horizontal scrolling */
  overflow-y: hidden; /* prevent vertical scrollbars */
  scrollbar-width: none; /* Firefox */
}

.related-list-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

@media (max-width: 767px) {
  .related-arrow {
    display: none !important;
  }
  .related-inline {
    display: block;
  }
  .related-title {
    flex: none;
    margin-bottom: 8px;
  }
  .related-list-wrapper {
    overflow-x: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
  }
  .related-list {
    display: block !important; /* switch from inline-flex */
    gap: 0 !important;
  }
  .related-list li {
    white-space: normal !important; /* prevent nowrap */
    margin-bottom: 6px;
  }
}
/*Truncate*/
.truncate-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate-5-lines {
  display: -webkit-box;
  -webkit-line-clamp: 5; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate-7-lines {
  display: -webkit-box;
  -webkit-line-clamp: 7; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*Kicker*/
.kicker {
  font-size: 12px;
  font-weight: 400;
}
.kicker-2 {
    font-size: .75em;
    font-weight: 400;
    color: var(--color-primary);
    letter-spacing: .3px;
    text-transform: capitalize;
    text-align: left;
}
/*Next arr Story Slider*/
.slider-story .slick-arrow {
    border: 1px solid #4a4a4a;
    width: 30px;
    height: 30px;
    display: flex!important;
    justify-content: center;
    padding: 0;
    margin: 0;
    align-items: center;
}


.slider-story .slick-disabled {
    display: none!important;
}

.slider-story .slick-arrow:hover {
    background-color: var(--color-bg-2);
    color: var(--color-on-bg-2);
}
 .slider-controls {
        display: inline-flex !important;
        gap: 1rem;
    }
    /* Taken from https://staging.thestar.com.my/tsol2025/css/heading.css */
    .btn-more span {
        cursor: pointer;
        width: 22px;
        height: 22px;
        display: inline-flex;
        justify-content: center;
        box-sizing: border-box;
        background: #fff;
        padding: 0;
        align-items: center;
    }
    .heading-flex .btn-more {
        color: var(--color-primary);
        font-size: 12px;
        line-height: 16px;
        text-transform: capitalize;
    }
    .btn-more span:hover {
        background-color: var(--color-bg-2);
        color: var(--color-on-bg-2);
    }
    .btn-more a {
        color: var(--color-primary);
        font-size: 12px;
        line-height: 16px;
        text-transform: capitalize;
        display: inline-flex;
        align-items: center;
    }
    .heading-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    position: relative;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 6px;
    margin-bottom: 18px;
    overflow: hidden;
}
.heading-flex h1 a, .heading-flex h2 a {
    color: var(--color-primary);
    font-weight: 900;
}
.heading-flex hr {
    background-color: var(--color-red-2);
    border: 1.5px solid var(--color-primary);
    width: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
}
.heading-flex p {
    margin: 0;
}
.heading-flex .button-more label {
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: inline-flex;
    justify-content: center;
    box-sizing: border-box;
    background: #fff;
    padding: 0;
    align-items: center;
}
.heading-flex .button-more label
{
    border: none;
}
.heading-flex .button-more label i.arrow-r, .heading-flex .button-more label i.arrow-l
{
    margin-bottom:0;
}
.button-more a {
  text-decoration: none;
}

.button-more a:hover {
  color: #4a4a4a;
}

.button-more a:hover label {
  background-color: #f2f2f2;
  color: #4a4a4a;
  cursor: pointer;
}
.heading-flex p {
  margin: 0;
  display: flex;
  align-items: baseline;
}
.sponsored-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Taken from https://staging.thestar.com.my/tsol2025/css/tsol2017.css */
/*------------------------*
    COMPONENT - JUST IN
-------------------------*/

ul.timeline {
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
	position: relative;
	display: block;
	overflow: hidden;
}
ul.timeline .tm-content-wrap:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #d6d6d6;
}
ul.timeline > li {
	position: relative;
}
/*May 2025 update - removed to fix timeline component*/
ul.timeline > li .timestamp {
    /* display: block; */
    /* background: #333; */
    background: none;
    color: #4a4a4a;
    /* padding: 1px 6px; */
    margin: 0;
    text-align: left;
}
ul.timeline > li .tmicon {
	width: 12px;
	height: 12px;
	position: absolute;
	background: #eeeeee;
	border-radius: 50%;
	left: 5px;
	top: 0;
	border: 1px solid #d6d6d6;
}
/*May 2025 update - removed to fix timeline component*/
/*.latest-news ul.timeline > li .tmicon {
	left: -5px;
}*/
ul.timeline > li .timeline-content {
	margin-left: 16px;
	position: relative;
}
ul.timeline > li .tm-content-wrap {
	position: relative;
	padding-left: 10px;
}
.timeline-content p {
	margin-bottom: 30px;
}
.tm-content-wrap .s-img {
	margin-bottom: 20px;
}

.slider-controls .btn-more label {
    width: 30px;
    height: 30px;
    border-radius: 4px;
}
#justIn-div .arrow-r {
	display: inline-block;
	width: 7px;
	height: 7px;
	line-height: 7px;
	border-top: 2px solid #4a4a4a;
	border-right: 2px solid #4a4a4a;
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	vertical-align: middle;
	margin-right: 2px;
	margin-bottom: 0px;
}
#justIn-div .arrow-l {
	display: inline-block;
	width: 7px;
	height: 7px;
	line-height: 7px;
	border-top: 2px solid #4a4a4a;
	border-right: 2px solid #4a4a4a;
	-ms-transform: rotate(-136deg);
	-moz-transform: rotate(-136deg);
	-webkit-transform: rotate(-136deg);
	transform: rotate(-136deg);
	vertical-align: middle;
	margin-left: 2px;
	margin-bottom: 0px;
}
#justIn-div .kicker {
  font-size: 12px;
  color: var(--color-primary);
  text-transform: uppercase;
  text-align: left;
  margin-right: 6px
}
#justIn-div #tickerPrev.btn-ticker-navi-disable span.arrow-box,
#justIn-div #tickerNext.btn-ticker-navi-disable span.arrow-box {
    border-color: #A9A9A9 !important;
}

#justIn-div #tickerPrev.btn-ticker-navi-disable .arrow-l,
#justIn-div #tickerNext.btn-ticker-navi-disable .arrow-r {
    border-top-color: #A9A9A9 !important;
    border-right-color: #A9A9A9 !important;
}

/*---- 15/10/2025 ----*/
/* HEADER PROFILE ICON */
.nav>li>a.log-in-light
 {
    position: relative;
    display: block;
    padding: 9px 6px 7px 6px;
}
.material-icons-round.person {
  vertical-align: middle;
}
@media (max-width: 768px) {
    .navbar-nav li a.log-in
    {
        padding: 0 8px 0 0;
    }
}
/* css to apply new headline ui ux */
:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) {
  border-bottom: none;
  overflow: hidden;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) > .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  position: relative;
  border-bottom: 1px solid #d6d6d6;
  padding-bottom: 6px;
  gap: 10px;
}

/* neutralize Bootstrap grid + allow flex behavior */
:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) > .row > h1,
:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) > .row > p {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
  float: none;
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
  margin: 0;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) > .row > h1.title-02 {
  flex: 1 1 auto;
  margin: 0;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) > .row > p {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  align-items: baseline;
  margin: 0;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) > .row > hr {
  background-color: var(--color-red-2);
  border: 1.5px solid var(--color-primary);
  width: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) .button-more {
  color: var(--color-primary);
  font-size: 12px;
  line-height: 16px;
  text-transform: capitalize;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) .button-more a {
  color: var(--color-primary);
  font-size: 12px;
  line-height: 16px;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) .button-more a:hover {
  color: #4a4a4a;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) .button-more label,
:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) .button-more span {
	border: none;
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: inline-flex;
  justify-content: center;
  box-sizing: border-box;
  background: #fff;
  padding: 0;
  align-items: center;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) .button-more span:hover,
:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) .button-more a:hover label {
  background-color: #f2f2f2;               
  color: #4a4a4a;                          
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) .button-more label i.arrow-r,
:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) .button-more label i.arrow-l {
  margin-bottom: 0;
}

:is(
  .headline.type-02,
  .headline:not(.type-02):has(> .row > h1.title-02)
) p span {
  padding: 0;
}

@media (max-width: 576px) {
  :is(
    .headline.type-02,
    .headline:not(.type-02):has(> .row > h1.title-02)
  ) > .row {
    flex-wrap: wrap;
  }
  :is(
    .headline.type-02,
    .headline:not(.type-02):has(> .row > h1.title-02)
  ) > .row > p {
    flex: 0 0 auto;
  }
}
/* END css to apply new headline ui ux */
.mt-15
{
  margin-top: 15px;
}