/* Notification Inbox */
.notif-wrapper{
    width: 355px;
    /* height: 390px !important; */
    background-color: #ffffff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 0 4px rgba(19, 20, 20, 0.08), 0 4px 8px 0 rgba(19, 20, 20, 0.12);
    display: none;
    transition: opacity 1s ease;
    opacity: 0;
    min-width: 100%;
    position: absolute;
    right: -85px;
    top: 63px;
    z-index: 1;
}

.notif-wrapper.hovered{
    display: block;
    opacity: 1;
}

.icon-box .notif-wrapper .triangle-up{
    display: none !important;
}

.notif-wrapper .triangle-up{
   right: 85px;
}

.notif-wrapper .triangle-up.hovered{
    display: block;
    right: 85px;
}

.notif-unread{
    background-color: lightgray;
}

.wrapper-notif-header{
    /* background-color: #335997; */
    padding-left: 5%;
    padding-top: 5%;
    height: 55px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.wrapper-notif-content{
    /* overflow-y: auto; */
    margin-top:10px;
    /* height: 270px; */
}

.wrapper-notif-center-content{
    width: 80%;
    margin-right: 20%;
    margin-left: 10%;
    background-color: #fff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 0 4px rgba(19, 20, 20, 0.08), 0 4px 8px 0 rgba(19, 20, 20, 0.12);
    padding-left: 10px;
    padding-right: 10px;
}

.wrapper-notif-center-message{
    border-bottom: 1px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.wrapper-notif-footer{
    /* background-color: #335997; */
    padding-left: 5%;
    padding-top: 3%;
    height: 55px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.notif-hover{
    margin-right: 10px;
    margin-left: 10px;
}
    
.notif-hover:hover{
    background-color: whitesmoke;
}

.icon-inbox.has-unread:after{
    content: '';
    position: absolute;
    top: 8px;
    right: 1px;
    padding: 5px 5px;
    border-radius: 50%;
    background: red;
    color: white;
}

.inbox-see-notification-list{
    color: #FF8136;
    font-size: 12px;
    text-decoration: underline;
    margin: 90px;
}

.visa-image{
    width: 80px;
    height: 79px;
    margin-left: -8px;
}

.success-checklist-image{
    width: 28px;
    height: 28px;
    margin-left: -26px;
    margin-top: -2px;
}

.time-sand-image{
    width: 14px;
    height: 20px;
}

.inbox-ose{
    margin-top: -20px;
    margin-bottom: -15px;
    box-shadow: none;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #BDBDBD; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #BDBDBD; 
    border-radius: 10px;
  }

/* ================== */

/* Notification Full */
@media only screen and (min-width:768px) {
    .account-page-container {
        font-weight: 500;
        color: #335997;
        font-size: 12px;
    }

    .account-page-header .title {
        font-size: 14px;
        font-weight: 700;
    }
    
    .notification-tab ul.nav, 
    .notification-tab .tab-content {
        display: flex;
        margin: 0 16px;
        margin-bottom: -8px;
    }

    .hovered-notif-tab ul.nav, 
    .hovered-notif-tab .tab-content {
        display: flex;
        margin: 0
    }

    .notification-tab li.nav-item {
        height: min-content;
    }

    .notification-tab a.nav-link {
        padding: 8px !important;
    }

    .notification-tab .nav-item > .nav-link {
        font-size: 14px;
        color: #BDBDBD !important;
        /* font-weight: bold; */
        background-color: transparent !important;
        border: transparent !important;
        border-radius: 0 !important;
        /* border-bottom: 1px solid #BDBDBD !important; */
    }

    .notification-tab .nav-item > .nav-link.active {
        font-size: 14px;
        color: #335997 !important;
        font-weight: bold;
        background-color: transparent !important;
        border: transparent !important;
        border-radius: 0 !important;
        border-bottom: 2px solid #355997 !important;
    }

    .tabs {
        height: fit-content;
    }

    .notification-tab .tab-content {
        padding: 0;
    }

    .notification-tab .tab-content > .active {
        width: 100%;
    }

    .notification-tab .tab-pane.active > .btn-group {
        width: 100%;
        height: 85px;
        margin-top: 10px;
    }

    .box-container {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 16px 0;
    }

    .header-box{
        box-shadow: 2px 1px 10px #00000029;
    }

    .inbox-box-container{
        background-color: #ffffff;
        padding: 16px 0;
    }

    button:focus {
        outline: none;
        box-shadow: none !important;
    }

    .btn.button-subheader{
        color: #707070;
        font-size: 12px;
        background-color: #ffffff;
        padding: 0 20px;
        border: none;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .btn.button-subheader:hover,
    .btn.button-subheader:focus, .btn.button-subheader:active {
        color: #355997;
        font-weight: bold;
        font-size: 12px;
        background-color: #ffffff;
        padding: 0 20px;
        border: none;
        box-shadow: none !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .btn.button-subheader.activated, .btn.button-subheader.activated:hover,
    .btn.button-subheader.activated:focus, .btn.button-subheader.activated:active {
        color: #355997;
        font-weight: bold;
        /* background-color: #eaeaea; */
        border: none;
    }

    .button-content {
        /* display: inline-flex; */
        padding: 16px 20px;
        text-align: center;
    }

    .inbox-button-content{
        text-align: center;
        padding: 16px 20px;
    }

    .button-content.hovered-button-content {
        display: block;
        padding: 0 !important;
        padding-top: 20px !important;
    }

     .button-content-text:hover{
       color: #355997;
       font-weight: bold;
    }

    .button-content-img {
        width: 36px;
        max-height: 32px;
    }

    .button-content-text {
        font-size: 12px;
        /* width: 112px; */
        /* max-width: 119px; */
        max-height: 32px;
        /* padding-left: 31px; */
        text-align: center;
        margin-top: 5px;
    }

    .inbox-button-content-text{
        font-size: 12px;
        width: auto;
        max-width: 81px;
        max-height: 32px;
        padding-left: 10px;
        text-align: center;
        margin-top: 10px;
    }

    .col-left {
        float: left;
        width: auto;
        height: auto;
    }

    .col-right {
        float: right;
        width: auto;
        height: auto;
    }

    .transparent {
        background: none;
        /* display: flex;
        flex-wrap: wrap; */
        justify-content: space-evenly;
    }

    .row-content {
        display: flex;
    }

    .change-order-button-list > .row-content{
        display: block;
    }

    /**
     *  transaction content
     */
    .transaction-content > .box-container {
        padding: 0 16px;
        margin: 16px 0;
        box-shadow: 2px 1px 10px #00000029;
    }

    .inbox-transaction-content > .box-container {
        padding: 0 16px;
        margin: 16px 0;
        box-shadow: 2px 1px 10px #00000029;
        width: 320px;
        margin-left: 15px;
    }

    .inbox-transaction-content{
        height: 353px;
        overflow-y: scroll;
    }

    .inbox-promo-content{
        height: 472px;
        overflow-y: scroll;
    }

    .inbox-container{
        height: auto;
        max-height: 375px;
        overflow-y: scroll;
    }

    .icon-container {
        width: 10%;
        max-width: 36px;
    }

    .data-container-transaction {
        width: 100%;
        margin-left: 18px;
        min-width: 70%;
        max-width: 83%;
    }

    .data-title {
        color: #E60019;
        font-size: 12px;
        font-weight: bold;
        margin: 0;
        width: 50%;
    }

    .data-title.success{
        color: #2A702F;
    }

    .data-title.waiting{
        color: #FF8236;
    }

    .data-label {
        color: #345797;
        font-size: 12px;
        margin: 0;
        width: 50%;
        max-width: 160px;
        margin-top: 5px;
        font-weight: 400;
    }

    .data-text {
        color: #345797;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 0;
        margin-right: 10px;
    }

    .detail-link{
        width: 100px;
    }

    .detail-link > a,
    .detail-link > a:hover,
    .detail-link > a:focus,
    .detail-link > a:visited,
    .detail-link > a:link {
        color: #FF8236;
        font-size: 12px;
        font-weight: bold;
    }

    .data-container-promo > .change-order-container > .row-content > .data-label{
        color: #345797;
        font-size: 12px;
        margin: 0;
        font-weight: 400;
        margin-top: 30px;
        margin-left: -179px;
        width: 90%;
        max-width: 100%;
    }

    .data-container-promo > .change-order-container > .row-content > .data-text{
        margin-left: 20px;
        margin-top: 10px;
    }

    .data-container-promo > .waiting-payment-container > .row-content > .data-text{
        margin-left: 20px;
        margin-top: 10px;
        color: red
    }

    .data-container-promo > .waiting-payment-container > .row-content > .data-label{
        color: #345797;
        font-size: 12px;
        margin: 0;
        font-weight: 400;
        margin-top: 30px;
        margin-left: -166px;
        width: 90%;
        max-width: 100%;
    }

    .change-order-button-list{
        margin-left: 527px;
        margin-top: -104px;
    }

    .change-order-container,
    .waiting-payment-container{
        display: flex;
    }

    .inbox-data-container-promo > .inbox-change-order-container > .row-content > .data-label{
        color: #345797;
        font-size: 12px;
        margin: 0;
        font-weight: 400;
        margin-top: 25px;
        margin-left: -179px;
        width: 160px;
    }

    .inbox-data-container-promo > .inbox-change-order-container > .row-content > .data-text{
        width: 170px;
        margin-left: 20px;
    }

    .inbox-data-container-promo > .inbox-waiting-payment-container > .row-content > .data-text{
        width: 170px;
        margin-left: 20px;
        color: red;
    }

    .inbox-data-container-promo > .inbox-waiting-payment-container > .row-content > .data-label{
        color: #345797;
        font-size: 12px;
        margin: 0;
        font-weight: 400;
        margin-top: 25px;
        margin-left: -179px;
        width: 160px;
    }    

    .inbox-change-order-container,
    .inbox-waiting-payment-container{
        display: flex;
        margin-left: 15px;
        margin-top: 15px;
        margin-bottom: 20px;
    }

    /**
     *  transaction content
     */
    .box-promo {
        /* padding: 0; */
        margin-bottom: 20px;
        margin-right: 20px;
        box-shadow: 2px 1px 10px #00000029;
        width: 960px;
        height: auto;
        /* margin-left: 15px; */
    }

    .inbox-box-promo{
        margin-top: -10px;
        /* margin-bottom: 20px; */
        margin-right: 20px;
        /* box-shadow: 2px 1px 10px #00000029; */
        width: 350px;
    }

    .inbox-line{
        color: #335997;
        border-style: dashed;
        border-width: 0.5px 156px;
        border-top-width: 0px;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
    }

    .no-transaction-pic{
        width: 360px;
        height: 238px;
    }

    .inbox-no-transaction-pic{
        width: 360px;
        height: 200px;
    }

    .no-transaction-title{
        font-size: 16px;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .inbox-no-transaction-title{
        color: #355997;
        font-size: 16px;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .no-transaction-desc{
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        width: 40%;
    }

    .inbox-no-transaction-desc{
        font-size: 12px;
        font-weight: 400;
        margin-left: 45px;
        text-align: center;
        width: 75%;
        margin-bottom: 36px;
        margin-top: -10px;
        color: #355997;
    }

    .flight-ticket-btn{
        width: 240px;
        height: 48px;
    }

    .inbox-flight-ticket-btn{
        margin-left: 35px;
        width: 240px;
        height: 48px;
    }

    .flight-ticket-btn-text{
        font-size: 12px;
        font-weight: 500;
    }

    /* .box-promo:nth-child(even){
        margin-right: 0;
    } */

    .image-container {
        width: auto;
        height: auto;
        max-height: 216px;
    }

    .image-promo {
        width: 20px;
        height: 21px;
        /* max-height: 216px; */
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        margin-left: 15px;
    }

    .notification-promo{
        margin-left: 5px;
        margin-top: 20px;
        color: #FF8136;
    }

    .inbox-notification-promo{
        margin-left: 10px;
        color: #FF8136;
        font-size: 12px;
        font-weight: 500;
    }

    .promo-date{
        margin-left: auto;
        margin-right: 15px;
    }

    .inbox-promo-date{
        color: #707070;
        font-size: 12px;
        margin-top: 4px;
        margin-left: auto;
        margin-right: 15px;
    }

    .promo-pricing-container{
        display: flex;
    }

    .post-rebooking-amount{
        color: #707070;
        text-decoration: line-through;
    }

    .post-rebooking-new-amount{
        font-size: 12px;
        font-weight: 500;
        color: #355997;
    }

    .data-container-promo {
        width: 100%;
        padding: 16px;
        margin-left: 32px;
    }

    .data-rebooking-pricing{
        display: flex;
    }

    .inbox-data-rebooking-pricing > .inbox-row-content{
        display: grid;
        margin-top: 5px;
    }

    .data-container-promo > .row-content > .data-text {
        width: 75%;
        margin-top: -10px;
    }

    .inbox-data-container-promo > .inbox-row-content > .data-text {
        width: 75%;
        margin-top: 10px;
        margin-left: 45px;
        font-size: 12px;

    }

    .data-container-promo > .row-content > .data-label {
        width: 100%;
        max-width: 88px;
    }

    .data-container-promo > .row-content > .data-label:last-child {
        width: auto;
        max-width: 60%;
        margin-right: 20px;
    }

    .data-post-rebooking > .data-rebooking-pricing > .row-content{
        display: grid;
        margin-top: 5px;
        margin-right: 25px;
    }

    .promo-button-list{
        margin-left: auto;
        margin-right: 15px;
        margin-top: -27px;
    }

    .inbox-promo-button-list{
        margin-top: 10px;
    }

    .inbox-promo-button-list > .inbox-row-content{
        display: flex;
        margin-left: 15px;
    }

    .promo-button-list > .row-content{
        display: grid;
    }

    .proceed-btn{
        width: 180px;
        height: 40px;
        border-radius: 12px !important;
    }

    .white-btn{
        width: 180px;
        height: 40px;
        background: #FFFFFF !important;
        border: 2px solid #FF8136 !important;
        border-radius: 12px !important;
        margin-bottom: 10px;
    }

    .inbox-white-btn{
        width: 100px;
        height: 28px;
        background: #FFFFFF !important;
        border: 2px solid #FF8136 !important;
        border-radius: 8px !important;
        margin-bottom: 10px;
        margin-left: 10px;
    }

    .inbox-proceed-btn{
        width: 210px;
        height: 28px;
        
    }

    .inbox-proceed-btn-text{
        font-size: 12px;
        font-weight: 500;
        vertical-align: top;
    }

    .proceed-btn-text{
        font-size: 12px;
        font-weight: 500;
    }

    .white-btn-text{
        color: #FF8136;
        font-size: 12px;
        font-weight: 500;
    }

    .inbox-white-btn-text{
        color: #FF8136;
        font-size: 12px;
        font-weight: 500;
        position: relative;
        bottom: 6px;
    }

    .data-post-rebooking{
        margin-left: 48px;
        margin-top: -5px;
    }

    .inbox-data-post-rebooking{
        margin-left: 45px;
        margin-top: -5px;
        color: #355997;
        font-size: 12px;
    }

    .post-rebooking-date,
    .post-rebooking-total-price{
        font-weight: 400;
    }

    .inbox-post-rebooking-detail{
        font-weight: 500;
    }

    .account-section-body{
        margin-top: 20px;
    }

    .no-transaction{
        box-shadow: 2px 1px 10px #00000029;
        display: grid;
        place-items: center;
    }
}

@media only screen and (max-width: 767px){
    .notification-tab .nav-tabs .nav-item{
        height: auto;
    }

    .notification-tab .nav-tabs .nav-link{
        border-color: #bdbdbd;
    }

    .notification-tab ul.nav{
        display: flex;
    }

    .notification-tab .tab-content{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .notification-tab .btn.button-subheader{
        margin-right: 15px;
        background-color: #335997;
        color: white;
    }

    .notification-tab .button-content .button-content-img{
        width: auto;
        height: auto;
        max-width: 71px;
        max-height: 61px;
    } 

    .notification-tab .button-content .button-content-text{
        margin-top: 10px;
    } 

    .notification-tab .btn-group{
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .transaction-content .box-container.row-content{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        border: 1px solid;
        border-radius: 8px;
    }

    .transaction-content .data-title{
        text-align: center;
    }

    .transaction-content .icon-container{
        width: 71px;
        height: 61px;
        margin-top: 10px;
    }

    .transaction-content .data-container-transaction{
        margin-top: 10px;
        color: #355997;
    }

    .transaction-content .row-content{
        display: flex;
        flex-direction: row;
    }

    .transaction-content .data-label{
        width: 120px;
    }

    .transaction-content .data-text:last-child{
        margin-left: 10px;
    }

    .transaction-content .detail-link{
        margin-bottom: 10px;
    }

    .transaction-content .detail-link a{
        color: #FF8236;
        text-decoration: underline;
    }

    .transaction-content .box-container{
        margin-bottom: 20px;
    }

    .promo-content .box-container.box-promo{
        border: 1px black solid;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .promo-content .image-container .image-promo{
        width: 100%;
    }

    .promo-content .data-container-promo{
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .promo-content .data-container-promo .row-content{
        display: flex;
        justify-content: space-between;
    }

    .promo-content .data-container-promo .detail-link a{
        color: #FF8236;
    }

    .no-transaction-title{
        font-size: 16px;
        margin-top: 20px;
        color: #355997;
    }

    .no-transaction-desc{
        font-size: 14px;
        color: #355997;
    }

    .flight-ticket-btn-text{
        font-size: 14px;
        font-weight: 500;
    }

    .order-summaries-empty{
        margin-bottom: 20px;
    }

    .promo-header{
        margin-top: 20px;
    }

    .notification-promo{
        color: #FF8136;
        font-weight: 500;
    }

    .promo-date{
        margin-left: auto;
        margin-right: 20px;
        color: #707070;
    }

    .image-container{
        margin-left: 20px;
    }

    .data-container-promo > .row-content > .data-text,
    .change-order-container > .row-content > .data-text{
        color: #355997;
        font-weight: 500;
        margin-left: 30px;
    }

    .data-container-promo > .row-content > .data-label,
    .change-order-container > .row-content > .data-label,
    .waiting-payment-container > .row-content > .data-label{
        font-size: 14px;
        color: #355997;
        margin-left: 30px;
    }

    .waiting-payment-container > .row-content > .data-text{
        color: red;
        font-weight: 500;
        margin-left: 30px;
    }

    .post-rebooking-title,
    .post-rebooking-total-price{
        color: #355997;
        font-weight: 500;
        margin-left: 38px;
    }

    .post-rebooking-detail{
        font-size: 14px;
        color: #355997;
        margin-left: 38px;
    }

    .post-rebooking-date{
        display: block;
        font-size: 14px;
        color: #355997;
        margin-left: 38px;
    }

    .post-rebooking-amount{
        font-size: 14px;
        color: #707070;
        margin-left: 38px;
        text-decoration: line-through;
    }

    .promo-button-list > .row-content,
    .change-order-button-list > .row-content{
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 35px;
    }

    .white-btn{
        background: #FFFFFF !important;
        border: 2px solid #FF8136 !important;
        border-radius: 12px !important;
    }

    .white-btn-text{
        color: #FF8136;
        font-size: 14px;
        font-weight: 500;
    }

    .promo-change-btn-text{
        font-size: 14px;
        font-weight: 500;
    }

    .image-promo {
        width: 20px !important;
        height: 21px;
        /* max-height: 216px; */
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        margin-left: 15px;
    }

    .visa-image{
        width: 80px;
        height: 79px;
        margin-left: 18px;
    }

    .time-sand-image{
        width: 56px;
        height: 80px;
        margin-left: 25px;
    }

}

.filter-types-container {
    white-space: nowrap;
    overflow-x: auto;
}

.btn-filter-types {
    background-color: #ffffff !important;
    font-size: 14px;
    border-radius: 8px !important;
    border: none !important;
    color: #FF8136 !important;
    padding: 6px 15px !important;
    margin-right: 10px;
    cursor: pointer;
}

.btn-filter-types.active {
    background-color: #FF8136 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-filter-types:focus {
    box-shadow: none !important;
}
/*================== */