/* 
    Created on : Mar 13, 2024, 10:25:27 PM
    Author     : duongca
*/

.iwj-reels {
    margin-bottom: 30px;
    margin-top: 15px;
    padding: 0 15px;
}
.reel-slider-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 80px;
}
.reel-slider-item .job-image {
    display: flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: solid 2px var(--colors-primary-600);
    overflow: hidden;
    cursor: pointer;
}
.reel-slider-item .job-image img{
    transform: scale(1.05);
}
.reel-slider-item .job-title {
    color: var(--colors-base-black);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.reel-slider.owl-carousel.s-next .owl-stage {
    padding-right: initial!important;
    padding-left: 0 !important;
}
.reel-slider.owl-carousel.s-prev .owl-stage {
    padding-right: 0!important;
    padding-left: initial!important;
}

/*Reel popup*/
#reel-modal-popup{
    display: none;
}
div#reel-modal-popup {
    max-width: 800px;
    margin: 1rem;
    position: relative;
    border-radius: 12px;
    background: var(--colors-base-white);
    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
    min-height: 300px;
}
.custombox-fullscreen div#reel-modal-popup {
    max-width: 100%;
    border-radius: 0;
    margin: 0;
}
div#reel-modal-popup .close-btn {
    text-align: right;
    position: relative;
    display: block;
    background: transparent;
}
div#reel-modal-popup .close-btn span{
    padding: 5px 9px;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    z-index: 1;
    font-size: 20px;
    /*opacity: 0;*/
    transition: all .5s linear;
    color: var(--colors-primary-500);
}
div#reel-modal-popup .close-btn span:hover{
    color: red;
}
div#reel-modal-popup .custombox-modal-content {
    height: 100%;
}
div#reel-modal-popup .custombox-modal-content > div.video-popup-wrap {
    padding: 45px 5px 15px;
    overflow: hidden;
    border-radius: 12px;
}
div#reel-modal-popup .custombox-modal-content > div.no-padding {
    padding: 0;
    overflow: hidden;
}
div#reel-modal-popup .custombox-modal-content > * {
    padding: 24px;
}
div#reel-modal-popup .custombox-modal-content .modal-header{
    display: flex;
    gap: 16px;
    flex-direction: column;
    padding: 0;
}
div#reel-modal-popup .custombox-modal-content .header-icon{
    display: flex;
}
div#reel-modal-popup .custombox-modal-content .modal-title{
    color: var(--colors-grey-900);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}
div#reel-modal-popup .custombox-modal-content .modal-desc{
    color: var(--colors-grey-600);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
div#reel-modal-popup .custombox-modal-content form{
    display: flex;
    flex-direction: column;
    gap: 32px;
}
div#reel-modal-popup .custombox-modal-content form .modal-content{
    background: #fff;
    gap: 16px;
    display: flex;
    flex-direction: column;
}
div#reel-modal-popup .custombox-modal-content form .modal-content .field-group{
    display: flex;
    gap: 16px;
}
div#reel-modal-popup form .modal-content .field-group > div{
    flex: 1;
}
div#reel-modal-popup .modal-footer{
    border: hidden;
    padding: 0;
    display: flex;
    gap: 16px;
}
div#reel-modal-popup .modal-footer button{
    flex: 1;
}
div#reel-modal-popup .modal-footer:before,div#reel-modal-popup .modal-footer:after{
    display: none;
}
div#reel-modal-popup .modal-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
}
div#reel-modal-popup .custombox-modal-content > .reels-detail-listing{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 28, 43, 0.99);
    padding: 0;
}
.reels-item-wrap{
    width: 448px;
    height: 796px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.reels-detail-slider{
    transition: all 0.25s ease 0s;
    height: 100%;
    display: flex;
}
.reels-detail-slider .reel-item{
    display: none;
    height: 100%;
    position: relative;
    transition: all 0.25s ease 0s;
}
.reels-detail-slider .reel-item.prev,
.reels-detail-slider .reel-item.active{
    display: block;
}
.reels-detail-slider .reel-item .reel-data-tabs {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.reels-detail-slider .reel-item .reel-data-tabs .tab-item{
    width: 100%;
    height: 100%;
    display: none;
}
.reels-detail-slider .reel-item .reel-data-tabs .tab-item.active{
    display: flex;
}
.reels-detail-slider .reel-item .reel-data-tabs .tab-item.tab-reel{
    justify-content: center;
    align-items: center;
}
.reels-detail-slider .reel-item .reel-data-tabs .tab-item.tab-job{
    padding: 90px 16px 150px;
    background: #101828;
}
.reels-detail-slider .reel-item .reel-data-tabs .tab-item.tab-job .job-detail-inner{
    overflow: hidden;
}
.reels-detail-slider .reel-item .job-detail-inner .block-title{
    color: var(--colors-grey-25);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
}
.reels-detail-slider .reel-item .job-detail-inner .job-detail-content{
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.reels-detail-slider .reel-item .detail-section.job-lsks{
    margin: 0;
    flex-direction: column;
    gap: 10px;
}
.reels-detail-slider .reel-item .detail-section.job-lsks .lsk-item{
    justify-content: initial;
    gap: 16px;
}
.reels-detail-slider .reel-item .detail-section.job-lsks .lsk-item > div{
    flex: 1;
}
.reels-detail-slider .reel-item .detail-section.job-lsks .lsk-item > div.lsk-value {
    flex: 0 0 auto;
}
.reels-detail-slider .reel-item .detail-section.benefits .jbenefit-item span,
.reels-detail-slider .reel-item .detail-section.job-lsks .lsk-item .lsk-text{
    color:var(--colors-grey-400);
}
.reels-detail-slider .reel-item .detail-section .section-title {
    color: var(--colors-grey-300);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}
.reels-detail-slider .reel-item .reel-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.reels-detail-slider .reel-item video{
    height: 100%;
}
.reels-detail-slider .reel-item .reel-functions{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.reels-detail-slider .reel-item .reel-functions .reel-header{
    display: flex;
    gap: 13px;
    padding: 12px 16px 60px;
    background: linear-gradient(180deg, rgba(81, 81, 82, 1.0), rgba(42, 115, 70, 0.0));
}
.reels-detail-slider .reel-item .reel-functions .reel-header .actions{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reels-detail-slider .reel-item .reel-functions .reel-header .company-name{
    color: var(--colors-base-white);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.reels-detail-slider .reel-item .reel-functions .reel-header .tab-actions{
    display: flex;
    gap: 3px;
}
.reels-detail-slider .reel-item .reel-functions .reel-header .tab-actions > span{
    display: flex;
    width: 72px;
    height: 5px;
    background: var(--colors-grey-700);
    position: relative;
    cursor: pointer;
}
.reels-detail-slider .reel-item .reel-functions .reel-header .tab-actions > span.active:before{
    background: linear-gradient(90deg, #FFF 34.03%, #98A2B3 77.08%);
    position: absolute;
    width: var(--data-progress);
    content: "";
    height: 100%;
    top: 0;
    left: 0;
    /*transition: width 1s linear;*/
}
.reels-detail-slider .reel-item .reel-functions .reel-header .logo{
    width: 33px;
    height: 33px;
    border-radius: 50%;
    overflow: hidden;
}
.reels-detail-slider .reel-item .reel-functions .reel-navigate{
    display: flex;
    flex-grow: 1;
}
.reels-detail-slider .reel-item .reel-functions .reel-navigate > div{
    display: flex;
    flex: 1;
    cursor: pointer;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer{
    padding: 16px;
    border-radius: 8px;
    background: rgba(81,81,82, 0.30);
    backdrop-filter: blur(10px);
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .job-info{
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .job-title{
    display: flex;
    gap: 16px;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .job-title .title{
    flex: 1;
    color: var(--colors-base-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .job-title .open-link{
    flex: 0 0 auto;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .job-title .open-link a{
    font-size: 18px;
    line-height: 28px;
    padding: 0;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .reel-job-meta{
    color: var(--colors-grey-25);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    gap: 16px;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .reel-job-meta .job-meta-info{
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .job-meta-info .job-address{
    display: flex;
    gap: 16px;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .job-meta-info .job-address > span{
    display: flex;
    gap: 4px;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .job-meta-info .job-price{
    display: flex;
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .job-meta-info .job-price > span{
    display: flex;
    padding: 2px 8px;
    align-items: center;
    border-radius: 16px;
    background: var(--colors-secondary-700);
    color: var(--colors-grey-25);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}
.reels-detail-slider .reel-item .reel-functions .reel-footer .reel-job-meta .job-meta-action{
    display: flex;
    flex: 0 0 auto;
    gap: 16px;
    align-items: flex-end;
}
.reels-detail-slider .reel-item .reel-job-meta .job-meta-action .action-button{
    padding: 8px;
    font-size: 20px;
    display: flex;
}
.reels-detail-slider .reel-item .reel-job-meta .job-meta-action .action-button a.saved i {
    color: var(--colors-primary-500);
    font-weight: 900;
}
.reels-detail-slider .reel-item .action-button .social-share-items {
    position: absolute;
    margin: 0;
    padding: 5px 0;
    list-style: none;
    background: #fff;
    min-width: 220px;
    box-shadow: 1px 2px 4px #888;
    z-index: 1;
    display: none;
    right: 0;
    bottom: 0;
    top: auto;
}
.reels-detail-slider .reel-item .action-button .social-share-items li a {
    font-size: 16px;
    margin: 0;
    padding: 0;
    display: block;
    width: auto;
    height: auto;
    border: hidden;
    text-align: left;
    color: #606060;
    padding: 10px 15px;
    border-radius: 0;
}
.reels-detail-slider .reel-item .action-button .social-share-items li  a i {
    margin-right: 15px;
    font-size: 20px;
}

@media (max-width: 480px){
    .reels-detail-listing .reels-item-wrap,
    .reels-detail-listing .reels-detail-slider{
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .reels-detail-slider .reel-item .reel-functions .reel-header{
        padding: 30px 16px;
    }
    .reels-detail-slider .reel-item .reel-functions .reel-footer{
        border-radius: 8px 8px 0 0;
    }
}