:root {
    --gradient-blue: linear-gradient(270deg, #79D3C3 0%, #41A0DD 100%);

    --primary: #1f81b9;
    --accent: #FDD000;

    --btn-primary-hover: #3899CF;

    --bg: #fff;
    --text: #333;
    --text-white: #fff;
    --lightgrey: #888;

    --divider: 1px solid #e1e1e1;

    --btn-highlight: #FDD000;
    --btn-highlight-hover: #FFDA55;
    --btn-highlight-text: #1f81b9;

    --btn-whatsapp: #11c246;
    --btn-whatsapp-hover: #42D46E;

    --btn-applied: #3AC080;
    --btn-applied-hover: #61DCA1;

    --story-anchor-hover: #98f6ff;
    
    --screen-height: 0;
    --screen-width: 0;
}

body {
    height: auto;
}

/* Nav Bar */
/*------------------------------------------------------------*/
.navbar {
    position: static;
}

.nav__divider {
    width: 100%;
    height: 4px;
    background-color: var(--primary);
    display: block;
}

.nav__divider.on {
    z-index: 1040;
}

/* Nav Bar Shortcut */
/*------------------------------------------------------------*/
.swiper-navbar-shortcut {
    background-color: var(--bg);
    border: var(--divider);
    border-left: 0;
    border-right: 0;
    width: 100%;
    padding: 0 12px;
}

.swiper-navbar-shortcut .swiper-slide {
    width: auto;
}

.swiper-navbar-shortcut .swiper-slide a {
    font-size: 12px;
    line-height: 24px;
}


/* Story Bubbles */
/*------------------------------------------------------------*/
.sb-wrapper {
	position: sticky;
	top: -122px;
	z-index: 1040;
    transition: top .3s ease-in-out;
}

.sb-wrapper.on {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    top: -24px;
}

.sb-wrapper.focus {
    z-index: 99999;
}

.sb-wrapper-title {
    background-color: var(--bg);
    color: var(--primary);
    font-size: 12px;
    font-weight: bold;
    padding: 6px 10px 0 10px;
}

.sb-component {
    background: var(--bg);
}

.sb-component .container {
    padding-left: 0;
    padding-right: 0;
}

.swiper--sb .swiper-slide {
    width: auto;
}

.swiper--sb .swiper-slide:first-child {
    margin-left: 40px;
}

.swiper--sb .swiper-slide:last-child {
    margin-right: 40px;
}

.swiper--sb .swiper--prev-sb-btn,
.swiper--sb .swiper--next-sb-btn {
    background-color: var(--bg);
    display: flex;
    position: absolute;
    height: 100%;
    padding: 0 5px;
    justify-content: center;
    z-index: 2;
}

.swiper--sb .swiper--control-btn {
    background-color: #26A6EF;
    border: 2px solid var(--text-white);
    border-radius: 24px;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.25);
    color: var(--text-white);
    display: flex;
    font-size: 10px;
    height: 24px;
    width: 24px;
    margin-top: 25px;
    align-items: center;
    justify-content: center;
}

.swiper--sb .swiper--next-sb-btn {
    right: 0;
}

.sb-item,
a.sb-item {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 70px;
    padding: 10px 0;
}

.sb-item,
a.sb-item:link,
a.sb-item:visited {
    color: var(--lightgrey);
    font-weight: normal;
}

a.sb-item:hover {
    opacity: .8;
}

.sb-avator-bg {
    border: 3px solid transparent;
    border-radius: 40px;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.15);
    background-image: linear-gradient(#e1e1e1, #e1e1e1), linear-gradient(to right, #e1e1e1, #e1e1e1);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    display: flex;
    height: 56px;
    width: 56px;
    align-items: center;
    justify-content: center;
}

.sb-item.unread .sb-avator-bg,
a.sb-item.unread .sb-avator-bg {
    background-image: linear-gradient(white, white), linear-gradient(135deg, #FFF0A8 15%, #FDD000 55%, #00B6F8 85%);
}

a.sb-item.unread .sb-title {
    color: var(--primary);
}

.sb-avator {
    background-image: url("../../images/story/story-bubble-job4.png");
    background-position: center center;
    background-size: cover;
    border: 3px solid var(--bg);
    border-radius: 36px;
    display: flex;
    height: 50px;
    width: 50px;
    align-items: center;
    justify-content: center;
}

.sb-avator img {
    height: 24px;
}

.sb-title {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    word-break: break-all;
}

.sb-recomjob .sb-avator {
    background-image: url("../../images/story/story-bubble-job4.png");
}

.sb-hotjobs .sb-avator {
    background-image: url("../../images/story/story-bubble-job3.png");
}

.sb-hotarticles .sb-avator {
    background-image: url("../../images/story/story-bubble-news2.png");
}

.sb-gossip .sb-avator {
    background-image: url("../../images/story/story-bubble-gossip.png");
}

.sb-pt .sb-avator {
    background-image: url("../../images/story/story-bubble-pt.png");
}

.sb-ct-article .sb-avator {
    background-image: url("../../images/story/story-bubble-news.png");
}


/* Channels Shortcut */
/*------------------------------------------------------------*/
.sb-shortcut-wrapper {
    padding: 0;
}

.sb-shortcut-wrapper .icon--left {
    margin-right: 4px;
}

.sb-shortcut-wrapper.focus {
    background-color: white;
    width: 100%;
    position: absolute;
    z-index: 99999;
}

.sb-shortcut-wrapper .container {
    background: linear-gradient(90deg, #0366C2, #00B5D4);
    border-radius: 0px;
}

.sb-shortcut-wrapper .swiper-wrapper {
    padding-top: 5px;
    padding-bottom: 5px;
}

.sb-shortcut-wrapper .swiper-slide {
    width: auto;
}

.wrapper-sec-name {
    color: var(--accent);
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sb-shortcut-wrapper a,
.sb-shortcut-wrapper a:link,
.sb-shortcut-wrapper a:visited {
    color: var(--text-white);
    font-size: 12px;
    line-height: 24px;
    white-space: nowrap;
}

.sb-shortcut-wrapper a:hover {
    color: var(--story-anchor-hover);
}

.channels-wrapper .channel-pt i {
    color: #8dfacb;
}

.channels-wrapper .channel-grad i {
    color: #f5e57a;
}


/* Story Module */
/*------------------------------------------------------------*/
.modal-story .modal-dialog {
    width: 100%;
}

.modal-story.fade .modal-dialog {
    transition: none;
    transform: none;
}

.modal-story .v-align .modal-content.modal-story-container {
    background: linear-gradient(180deg, #FFEFB7, #BBF0B9, #31C4FF);
    border-radius: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: center;
}

.story-control-btn {
    display: none;
    color: var(--text);
    font-size: 48px;
    position: absolute;
    opacity: .5;
    top: 370px;
    z-index: 1100;
    pointer-events: auto;
    cursor: pointer;
}

.story-control-btn:hover {
    opacity: .4;
}

.story-feed {
    background-color: var(--bg);
    border-radius: 15px;
    display: none;
    height: 440px;
    width: 220px;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    top: 180px;
}

.story-feed .sb-item {
    position: absolute;
    width: 110px;
    z-index: 3;
}

.story-feed .sb-item .sb-title {
    color: var(--text-white);
}

.story-mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.sb-component .line-clamp,
.modal-story .line-clamp {
    line-clamp: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modal.modal-story a.btn--view-details:link,
.modal.modal-story a.btn--view-details:visited {
    padding: 10px 16px;
}

.modal-story a.btn--small:link {
    font-size: 13px;
}

.modal-story a.btn--round {
    border-radius: 48px;
}

.modal-story a.iconBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.modal-story .icon--left {
    margin-right: 6px;
}

.modal-story .video__length {
    font-size: 14px;
    font-weight: 600;
    background-color: rgba(0, 0, 0, .9);
    color: #FFF;
    padding: 4px 8px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}


/* Story Article */
.story-feed .article {
    margin-bottom: 0;
}

.story-feed .article .article__link--thumb {
    padding-top: 0;
}

.story-feed .article .article__thumb {
    position: unset;
}

.story-feed .category--badge .tag {
    font-size: 11px;
}

.story-feed .category--badge .tag--sponsor {
    font-size: 9px;
}

.story-feed .article__link h3 {
    font-size: 14px;
}

/* Story Job */
.story-job .jd,
.story-job .jd .container {
    padding: 0;
}

.story-job .jd .container {
    width: 100%;
}

.story-job .story-content a {
    pointer-events: none;
}

.story-job .jd .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}

.story-job .jd .d-block {
    display: block !important;
}

.story-job .jd .img-fluid {
    max-width: 100%;
    height: auto;
}

.story-job .jd .row-cols-2 > * {
    flex: 0 0 auto;
    width: 50%;
}

.story-job .jd .flex-grow-1 {
    flex-grow: 1 !important;
}

.story-job .jd__cover img {
    width: 100%;
}

.story-job .jd__main {
    padding-left: 15px;
    padding-right: 15px;
}

.story-job .jd__logo {
    margin: 10px 0;
}

.story-job .jd__job-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

.story-job .jd__comp,
.story-job .jd__sec {
    font-size: 15px;
}

.story-job .jd__sec .sec-title {
    font-size: 16px;
}

.story-job .tab-content {
    margin-top: 20px;
    opacity: 1;
}

.story-job .tab-content > .active {
    display: block;
    opacity: 1;
}

.story-job .job-highlight {
    margin-bottom: 30px;
}

.story-job .job-highlight ul {
    background-color: #f5f5f5;
    padding: 15px 15px 15px 38px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    list-style-type: disc;
    gap: 5px;
}

.story-feed.story-job .story-content {
    align-self: start;
}

.story-feed.story-job .jd__main {
    padding-left: 10px;
    padding-right: 10px;
}

.story-feed.story-job .jd__job-title {
    font-size: 14px;
}

.story-feed.story-job .jd__comp,
.story-feed.story-job .jd__sec {
    font-size: 13px;
}

.story-feed.story-job .job-highlight {
    margin-bottom: 10px;
}

.story-feed.story-job .job-highlight .sec-title {
    font-size: 12px;
}

.story-feed.story-job .job-highlight ul {
    font-size: 11px;
    padding: 10px 10px 10px 24px;
}

.story-feed.story-job span[style="font-size:20px"] {
    font-size: 12px !important;
}


/* Story Feed */
.modal-story .story-feed-active {
    width: 100%;
    min-height: 100vh;
    max-width: calc(100% - 20px);
}

.modal-story .story-feed-active .story-content {
    border-radius: 0;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .15);
    height: calc(var(--screen-width) * 1.25);
    max-height: 570px;
    position: relative;
    overflow: hidden;
    margin: 15px -10px 15px -10px;
}

.modal-story .story-pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    list-style: none;
    margin-block-start: 10px;
    margin-block-end: 10px;
    padding: 0;
    gap: 5px;
}

.modal-story .story-pageitem {
    background-color: var(--bg);
    border-radius: 15px;
    display: inline-flex;
    overflow: hidden;
    height: 4px;
    width: 100%;
}

.modal-story .story-progress {
    background-color: var(--primary);
    border-radius: 15px;
    transition: width .3s ease-in-out;
}

.modal-story .story-pageitem.read .story-progress {
    width: 100%;
}

.modal-story .story-author-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.modal-story .story-author-wrapper .sb-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    margin-right: 20px;
    padding: 0;
    align-items: center;
}

.modal-story .story-author-wrapper .sb-item .sb-avator-bg {
    border: 2px solid var(--bg);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .15);
    height: 36px;
    width: 36px;
}

.modal-story .story-author-wrapper .sb-item .sb-avator {
    border: none;
    height: 32px;
    width: 32px;
}

.modal-story .story-author-wrapper .sb-item .sb-title {
    color: var(--text);
    font-size: 14px;
    margin: 0 15px 0 10px;
}

.modal-story .story-author-wrapper .sb-item .sb-date {
    color: var(--text);
    font-size: 14px;
    font-weight: normal;
}

.modal-story .story-author-wrapper .iconBtn {
    width: 36px;
    height: 36px;
    font-size: 1.8rem;
    background-color: transparent;
    border: 0;
    display: flex
;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.modal.modal-action.modal-story .btn:link, .modal.modal-action .btn:visited {
    padding: 8px 16px;
}

.modal-story .storyfooter-btns-wrapper.desktop a.btn--whatsapp,
.modal-story .storyfooter-btns-wrapper.desktop a.btn--whatsapp:link, 
.modal-story .storyfooter-btns-wrapper.desktop a.btn--whatsapp:visited,
.modal-story a.btn--vertical.btn--whatsapp .iconBtn,
.modal-story a.btn--vertical.btn--whatsapp:link .iconBtn,
.modal-story a.btn--vertical.btn--whatsapp:visited .iconBtn {
    background: var(--btn-whatsapp);
    color: #FFF;
}

.modal-story .storyfooter-btns-wrapper.desktop a.btn--whatsapp:hover,
.modal-story a.btn--vertical.btn--whatsapp:hover .iconBtn {
    background: var(--btn-whatsapp-hover);
}

.modal-story .storyfooter-btns-wrapper.desktop a.btn--highlight,
.modal-story .storyfooter-btns-wrapper.desktop a.btn--highlight:link, 
.modal-story .storyfooter-btns-wrapper.desktop a.btn--highlight:visited {
    font-weight: bold;
    background: var(--btn-highlight);
    color: var(--btn-highlight-text);
}

.modal-story .storyfooter-btns-wrapper.desktop a.btn--highlight:hover {
    background: var(--btn-highlight-hover);
}

.modal-story .storyfooter-btns-wrapper.desktop a.btn--savejob,
.modal-story .storyfooter-btns-wrapper.desktop a.btn--savejob:link,
.modal-story .storyfooter-btns-wrapper.desktop a.btn--savejob:visited {
    background: var(--primary);
    color: var(--text-white);
}


.modal-story .storyfooter-btns-wrapper.desktop a.btn--savejob:hover,
.modal-story a.btn--vertical.btn--savejob:hover .iconBtn {
    background: var(--btn-primary-hover);
}


.modal-story .storyfooter-btns-wrapper.desktop a.btn--applied.btn--success,
.modal-story a.btn--vertical.btn--applied.btn--success .iconBtn {
    background: var(--btn-applied);
    color: var(--text-white);
}

.modal-story .storyfooter-btns-wrapper.desktop a.btn--applied.btn--success:hover,
.modal-story a.btn--vertical.btn--applied.btn--success:hover .iconBtn {
    background: var(--btn-applied-hover);
}

.modal.modal-story .adv-btns-wrapper.desktop a.btn--view-details,
.modal.modal-story .adv-btns-wrapper.desktop a.btn--view-details:link,
.modal.modal-story .adv-btns-wrapper.desktop a.btn--view-details:visited,
.modal.modal-story a.btn--vertical.btn--view-details .iconBtn,
.modal.modal-story a.btn--vertical.btn--view-details:link .iconBtn,
.modal.modal-story a.btn--vertical.btn--view-details:visited .iconBtn {
    background-color: var(--primary);
    color: var(--text-white);
}

.modal.modal-story .adv-btns-wrapper.desktop a.btn--view-details:hover,
.modal.modal-story a.btn--vertical.btn--view-details:hover .iconBtn {
    background-color: var(--btn-primary-hover);
}


.modal-story .storyfooter-btns-wrapper.desktop a.btn--white,
.modal-story .storyfooter-btns-wrapper.desktope a.btn--white:link,
.modal-story .storyfooter-btns-wrapper.desktop a.btn--white:visited,
.modal-story a.btn--vertical.btn--white.btn--view-details:link .iconBtn,
.modal-story a.btn--vertical.btn--white.btn--view-details:visited .iconBtn {
    background-color: var(--bg);
    color: var(--primary);
}

.modal-story .storyfooter-btns-wrapper.desktop a.btn--white:hover,
.modal-story a.btn--vertical.btn--white:hover .iconBtn {
    background-color: #e5f5fe;
}

.modal.modal-story a.btn--vertical.btn--view-details {
    padding: 0;
}

.modal-story .story-feed-footer {
    padding-bottom: 100px;
}

.modal-story .story-job .story-feed-footer {
    margin-top: 24px;
}


/* Story Share dropdown */
.modal-story .story-author-wrapper .dropdown-storyshare .btn--storyshare {
    color: #1f81b9;
}

.modal-story .story-author-wrapper .dropdown-storyshare .btn--storyshare:hover {
    color: #3899CF;
}

.modal-story .story-author-wrapper .dropdown-storyshare .dropdown-menu {
    border: none;
    border-radius: 8px;
    padding: 0;
    left: auto;
    right: 0;
}

.modal-story .story-author-wrapper .dropdown-storyshare .dropdown-list {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    overflow-y: unset;
    width: fit-content;
    padding-inline-start: 0;
}

.modal-story .story-author-wrapper .dropdown-storyshare .dropdown-list .dropdown-item {
    padding: 10px 15px;
}

.modal-story .story-author-wrapper .dropdown-storyshare .dropdown-list li:first-child {
    border-radius: 8px 0 0 8px;
}

.modal-story .story-author-wrapper .dropdown-storyshare .dropdown-list li:last-child {
    border-radius: 0 8px 8px 0;
}

.modal-story .story-author-wrapper .dropdown-storyshare .dropdown-item i {
    font-size: 15px;
}

.modal-story .story-content {
    background-color: var(--bg);
}

.modal-story .story-content .story-content-mask {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    position: absolute;
    height: 100px;
    width: 100%;
    bottom: 0;
    z-index: 2;
}

.modal-story .story-content a.btn--action {
    position: absolute;
    pointer-events: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
}


/* Story Active Feed - Job */
.modal-story .story-content-fab {
    position: absolute;
    width: 100%;
    bottom: 15px;
    text-align: center;
    z-index: 10;
}

.modal-story .story-content-fab  a.btn--view-details {
    background: var(--gradient-blue);
    border-radius: 48px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .15);
    color: var(--text-white);
    display: inline-block;
    pointer-events: auto;
}

.modal-story .storyfooter-btns-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.modal-story .story-job a.btn--vertical,
.modal-story .story-article a.btn--vertical {
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.modal-story a.btn:active {
    box-shadow: none;
}

.modal-story a.btn--vertical .iconBtn {
    background-color: var(--primary);
    border-radius: 24px;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.15);
    color: var(--text-white);
    font-size: 18px;
    height: 44px;
    width: 44px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.modal-story a.btn--vertical .btn--title {
    color: #004680;
    font-size: 14px;
    font-weight: bold;
}

.modal-story a.btn--vertical.btn--apply .iconBtn,
.modal-story a.btn--vertical.btn--apply:link .iconBtn, 
.modal-story a.btn--vertical.btn--apply:visited .iconBtn {
    background: var(--btn-highlight);
    color: var(--btn-highlight-text);
}

.modal-story a.btn--vertical.btn--apply:hover .iconBtn,
.modal-story a.btn--vertical.btn--like:hover .iconBtn {
    background: var(--btn-highlight-hover);
}

.modal-story a.btn--vertical.btn--like .iconBtn {
    background: var(--btn-highlight);
    color: var(--text-white);
}

.modal-story a.btn--vertical.btn--like.liked .iconBtn {
    color: var(--primary);
}

.modal-story .story-feed-active a.btn--saved i {
    color: var(--accent);
}

.modal-story a.btn--vertical.btn--white {
    background-color: transparent;
    display: flex;
    align-items: center; 
}

.modal-story .storyfooter-btns-wrapper.desktop {
    display: none;
}

.modal-story .story-btns-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
}

.modal-story .story-btns-wrapper a.btn--vertical.iconBtn {
    height: 24px;
    width: 24px;
}

.modal-story .story-btns-wrapper .iconBtn i {
    font-size: 24px;
}

.modal-story .story-feed-active.story-job .storyfooter-btns-wrapper {
    justify-content: center;
    gap: 15px;
}

.modal-story .story-feed-active.story-article .storyfooter-btns-wrapper.mobile {
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.modal-story .story-feed-active.story-article.story-ad .storyfooter-btns-wrapper.mobile {
    justify-content: center;
}

.modal-story .story-feed-active.story-article .storyfooter-btns-wrapper.mobile .article-btns-content {
    gap: 15px;
}


/* Story Active Feed - Article */
.modal-story .article__categories {
    display: flex;
    flex-wrap: nowrap;
    white-space: unset;
}

.modal-story .article__categories .tag {
    display: flex;
    align-items: center;
}

.modal-story .article__title {
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modal-story .story-feed-active.story-article .story-content {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    align-content: center;
}

.modal-story .story-feed-active.story-article .article {
    box-shadow: none;
    height: 100%;
    margin-bottom: 0;
}

.modal-story .story-feed-active.story-article .no-style {
    padding-inline-start: 0;
}

.modal-story .story-feed-active.story-article .article__link--thumb {
    height: calc(var(--screen-width) * 1.25);
    max-height: 570px;
    padding-top: unset;
}

.modal-story .story-feed-active.story-article .article__thumb {
    max-width: 100%;
    max-height: 100%;
    position: static;
    object-fit: contain;
}

.modal-story .story-feed-active.story-article .article__overview {
    display: none;
}

.modal-story .story-feed-active.story-article .storyfooter-btns-wrapper.desktop {
    align-items: center;
    justify-content: space-between;
}

.modal-story .story-feed-active.story-article .storyfooter-btns-wrapper .article-respond {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
    color: var(--text-white);
}

.modal-story .story-feed-active.story-article .article-btns-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
}

.modal-story .story-feed-active.story-article .storyfooter-btns-wrapper.desktop .btn--like {
    color: var(--text-white);
    font-size: 14px;
    height: 40px;
    width: 40px;
}

.modal-story .story-feed-active.story-article .article-btns-content a.btn--like.liked {
    color: var(--primary);
}

/* Story Active Feed - Unavailable */
.modal-story .feed-error-msg {
    background-color: #000;
    color: var(--text-white);
    display: flex;
    height: 100%;
    width: 100%;
    padding: 15px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Story Active Feed - 300x250 Ad */
.modal-story .story-feed-active.story-ad .story-content {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.modal-story .story-feed-active.story-ad img {
    display: block;
}

.modal-story .story-feed-active.story-ad .adv-300x250 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(var(--screen-width) * 1.25);
    max-height: 645px;
}

.story-content .adv-300x250 a.btn--white {
    width: auto;
}

.modal-story .story-feed-active.story-ad .adv-1080x1350 {
    height: 100%;
}

.modal-story .story-feed-active.story-ad .adv-1080x1350 img {
    height: calc(var(--screen-width) * 1.25);
    width: 100%;
    max-width: 100%;
    max-height: 540px;
    object-fit: contain;
}

.modal-story .story-feed-active.story-ad .storyfooter-btns-wrapper.desktop {
    justify-content: center;
}

.modal-story .story-feed-active.story-ad .adv-btns-wrapper.desktop a.btn--white {
    display: inline;
}

.modal-story .story-feed-active.story-ad .adv-btns-wrapper.desktop {
    display: none;
}

/* Story Active Feed - View More Story or Article */
.modal-story .story-feed-active.story-viewmore .story-content {
    background: linear-gradient(to bottom, #A4F9FF, #E4FDFF);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
}

.modal-story .story-feed-active.story-viewmore .viewmore-title {
    color: var(--primary);
    font-size: 18px;
    font-weight: bold;
}

.modal-story .story-feed-active.story-viewmore .viewmore-img {
    max-width: 80%;
    margin: 20px 0;
}

.modal-story .story-feed-active.story-viewmore .viewmore-img img {
    display: block;
    width: 100%;
}

.modal-story .story-feed-active.story-viewmore .story-content a.btn {
    background: var(--btn-highlight);
    color: var(--btn-highlight-text);
    display: inline;
    font-weight: bold;
    pointer-events: initial;
}

.modal-story .story-feed-active.story-viewmore .story-content a.btn:link,
.modal-story .story-feed-active.story-viewmore .story-content a.btn:visited {
    background: var(--btn-highlight);
    color: var(--btn-highlight-text);
}

.modal-story .story-feed-active.story-viewmore .story-content a.btn:hover {
    background: var(--btn-highlight-hover);
}


/* Modal - Ask to Login */
/*------------------------------------------------------------*/
.modal-asktologin {
    z-index: 1061;
}

.modal-asktologin .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.modal-asktologin .sticky-img {
    display: flex;
    position: absolute;
    top: -110px;
    left: calc(50% - 92px);
}

.modal-asktologin .modal-body {
    text-align: center;
}

.modal-asktologin .modal-body h2 {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: bold;
}

.modal-asktologin .modal-footer {
    border-top: none;
    display: block;
    padding-top: 0;
    text-align: center;
}

.modal-asktologin .modal-footer .btn--login {
    color: #FFF;
    width: 100%;
    margin: 0;
}

.modal-asktologin .modal-footer a.btn--login:link,
.modal-asktologin .modal-footer a.btn--login:visited {
    background-color: #1F81B9;
}

.modal-asktologin .modal-footer a.btn--login:hover {
    background-color: #3899CF;
    box-shadow: none;
}

.modal-asktologin .modal-footer p {
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}


/* Popup Launch */
/*------------------------------------------------------------*/
.ct-main .popup-story-cta {
    bottom: unset;
    top: 270px;
	z-index: 999999;
}

.ct-main .popup-story-cta .extractcv--cta-popup {
    &:before {
        content: "";
        border-width: 0 15px 20px 15px;
        border-color: #3696db transparent;
    }
}

/* Background Overlay */
.bg-overlay-popup {
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out;
    z-index: 9999;
}

.bg-overlay-popup.on {
    opacity: 1;
    visibility: visible;
}


@media (max-width: 991px) {
    .sb-shortcut-wrapper .container {
        max-width: unset;
        width: auto;
    }
}

@media (min-width: 576px) {
    .sb-wrapper {
        top: -98px;
    }
    
    .sb-wrapper.on {
        top: 0;
    }

    .sb-wrapper-title {
        display: none;
    }

    .swiper--sb .swiper--prev-sb-btn,
    .swiper--sb .swiper--next-sb-btn {
        display: none;
    }

    .swiper--sb .swiper-wrapper {
        justify-content: center;
    }

    .swiper--sb .swiper-slide:first-child {
        margin-left: unset;
    }
    
    .swiper--sb .swiper-slide:last-child {
        margin-right: unset;
    }

    .swiper-navbar-shortcut .swiper-wrapper,
    .swiper-channels-shortcut .swiper-wrapper {
        justify-content: center;
    }

    .modal-story .storyfooter-btns-wrapper.desktop {
        display: flex;
    }

    .modal-story .storyfooter-btns-wrapper.mobile {
        display: none;
    }

    .story-control-btn {
        display: flex;
    }

    .modal-story .story-feed-active {
        max-width: 456px;
    }

    .story-control-btn.btn--story-previous {
        left: calc(50% - 230px - 48px);
    }

    .story-control-btn.btn--story-next {
        right: calc(50% - 230px - 48px);
    }

    .modal-story .story-feed-active .story-content {
        border-radius: 15px;
        margin: 15px 0 15px 0;
    }

    .modal-story .story-pagination {
        margin-block-start: 15px;
        margin-block-end: 15px;
    }

    .story-feed-active .story-content .jd .container {
        max-width: 100%;
    }

    .modal-story .story-feed-active.story-viewmore .story-content {
        border-radius: 15px;
        padding: 60px;
    }

    .modal-story .story-feed-active.story-viewmore .viewmore-title {
        font-size: 22px;
    }

    .modal-story .story-feed-active.story-viewmore .viewmore-img {
        max-width: 100%;
        margin: 40px 0;
    }

    .ct-main .popup-story-cta {
        top: 225px;
    }
}

@media (min-width: 768px) {
    .ct-main .popup-story-cta {
        right: calc(50% - 170px);
    }

    .modal-story .story-feed-active {
        max-width: 440px;
    }

    .modal-story .story-feed-active .story-content {
        max-height: 645px;
    }

    .modal-story .story-feed-active.story-ad-large .story-content {
        height: auto;
    }

    .modal-story .story-feed-active.story-article .article__link--thumb {
        height: calc(440px * 1.25);
    }

    .modal-story .story-feed-active.story-article .article__overview {
        display: block;
    }
}

@media (min-width: 992px) {
    .sb-wrapper {
        top: -130px;
    }

    a.sb-item {
        width: 105px;
    }

    .sb-avator-bg {
        height: 78px;
        width: 78px;
    }

    .sb-avator {
        height: 72px;
        width: 72px;
    }
    
    .sb-avator img {
        height: 32px;
    }

    .sb-title {
        font-size: 14px;
        margin-top: 10px;
    }

    .sb-shortcut-wrapper {
        padding-bottom: 10px;
    }

    .sb-shortcut-wrapper .container {
        border-radius: 10px;
    }

    .modal-story .v-align .modal-content.modal-story-container {
        justify-content: space-between;
    }

    .story-feed:nth-child(2) {
        display: flex;
        margin-left: -30px;
    }

    .story-feed:nth-child(4) {
        display: flex;
        margin-right: -30px;
    }

    .modal-asktologin .modal-dialog {
        max-width: 480px;
    }

    .ct-main .popup-story-cta {
        top: 270px;
    }
}


@media (min-width: 1200px) {
    .swiper-navbar-shortcut {
        display: none;
    }

    .story-feed {
        display: flex;
    }

    .story-feed:first-child {
        margin-left: -140px;
    }

    .story-feed:nth-child(2) {
        margin-left: unset;
    }

    .story-feed:nth-child(4) {
        margin-right: unset;
    }

    .story-feed:last-child {
        margin-right: -140px;
    }
}

@media (min-width: 1400px) {
    .story-feed:first-child {
        margin-left: -30px;
    }
    
    .story-feed:last-child {
        margin-right: -30px;
    }
}