/*General styles for Assigned seats*/
#customer-enhancements-assigned-seating-index .border-right{
border-right: 2px solid #f7f9ff; 
}
#customer-enhancements-assigned-seating-index .border-bottom{
border-bottom: 2px solid #f7f9ff;
}
/* Section: hero Carousel */
#carouselHero .carousel-item {
    /* height: 100%; */
    max-height: 480px;
    /* max-height: max(480px, 30vw); */
    width: 100%;
    object-position: center;
}
#carouselHero .carousel-item img {
    /* height: 100%;
    object-fit: cover; */
}
#carouselHero button.carousel-control-prev, button.carousel-control-next {
    background: none;
    border: none;
    opacity: 1;
}
#carouselHero .carousel-control-next-icon, .carousel-control-prev-icon {
    width: 80px;
    height: 80px;
    /* backdrop-filter: blur(10px); */
    background-size: 37px;
    background-color: rgba(0, 0, 55, 0.21);
    border-radius: 40px;
}
#carouselHero .overlay-image{position: fixed; top:20%; right:25%; width: 50%; height: auto; z-index: 10;}
@media (min-width: 2000px){
#carouselHero .overlay-image{
 right: 34%;
 width: 35%;
}
}
#carouselHero .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8' clip-rule='evenodd'/></svg>");
}
#carouselHero .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8' clip-rule='evenodd'/></svg>");
}
@media all and (max-width: 1440px) {
    #carouselHero .carousel-item img {
        height: auto;
    }
}
/* Section: Assigned seat banner */ 
.assignedSeatsBanner { background: linear-gradient(270deg, #3458FF 0%, #263C8E 60%, #1C2D6A 100%), #FFFFFF;}
.assignedSeatsBanner p{color: #fff;}
.assignedSeatsBanner h3{color: #fff; padding-bottom: 0;}
.assignedSeatsBanner .justify-self-center{justify-self: center; min-width: 73%;}                                                   
.assignedSeatsBanner .calendar-container{display: flex; gap: 10px; padding: 20px 30px; border-radius: 10px;}
.assignedSeatsBanner .calendar-box{width: 71px; height: 51px; border-radius: 10px; overflow: hidden; box-shadow:0 4px 6px rgba(0, 0, 0, 0.2);}                                         
.assignedSeatsBanner .calendar-box .top {background-color: #f44336; color: #fff; text-align: center; padding: 1px 0; font-weight: bold; font-size: 14px;}       
.assignedSeatsBanner .calendar-box .bottom {background-color: #fff; color: #1a1a1a; text-align: center; font-weight: bold; padding: 10px 0; font-size: 24px; height: 54%; display: flex; align-items: center; justify-content: center;}                                       
@media (max-width: 480px) {
   .assignedSeatsBanner .calendar-container{width: 237px;
    margin-left: -50px;}
}


/* Section: Seat names */
.seat-names {
    background: #F7F9FF;
}
.seat-names h2 {
    padding-bottom: 0.5rem;
}
.seat-names .card {
    padding: 1rem;;
}
.seat-names .card .card-title {
    color: #090F23;
    font-family: var(--main-font-family);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.rewards .card .card-title sup {
    font-size: 50%;
    top: -0.8em;
}
@media all and (max-width: 768px) {
    /* .rotation-wrapper-outer {
        display: table;
    }
    .rotation-wrapper-inner {
        padding: 50% 0;
        height: 0;
    } */
    .seat-names .seating-chart img { 
        /* transform: rotate(90deg); */
    }
    /* .seat-names .seating-chart img {
        display: block;
        transform-origin: top left;
        transform: rotate(90deg) translate(0, -100%);
        margin-top: -50%;
    } */
}


/* Section: Fare Benefits */
/* benefits tabs */
.fare-benefits {
    background: #F7F9FF;
}
.fare-benefits .nav-tabs  { 
    /* override default bootstrap */
    border: none;
}
.fare-benefits .nav-tabs .nav-link { 
    /* override default bootstrap */
    background: none;;
    border: none;
    border-bottom: 2px solid transparent; 
}
.fare-benefits .nav-tabs .nav-link:focus { 
    /* override default bootstrap */
    outline: none;
}
.fare-benefits .nav-tabs {
    font-size: 1.25rem;
}
.fare-benefits .nav-tabs .active {
    border-bottom: 2px solid var(--main-accent-color);
    color: #111B40;
}

/* fare charts */

#fare-benefits{
padding-top: 0;
}
#fare-benefits .fare-chart-header { 
    background: unset;
    color: unset;
    display: inline-block;
}
#fare-benefits .fare-chart-header .right { 
    filter: brightness(0.1);
    vertical-align: baseline;
}
/* #fare-benefits .fare-chart-body { overflow-x: auto; } */
/* Override legacy fare chart background colors */
#fare-benefits .fare-chart-body table tr td:nth-child(2),
#fare-benefits .fare-chart-body table tr td:nth-child(3),
#fare-benefits .fare-chart-body table tr td:nth-child(4),
#fare-benefits .fare-chart-body table tr td:nth-child(5) {
    background-color: unset;
}
#fare-benefits .fare-chart-body table tbody tr th:nth-of-type(1) {
    background-color: var(--primary-dark-blue-color);
    color: #ffffff;
    font-size: 1rem;
    line-height: 1rem;
    /*padding-right: 79px;*/
}
#fare-benefits .fare-chart-body table {
    border-collapse: separate;
    border-spacing: 0;
  }
#fare-benefits .fare-chart-body .table thead th {
    background: var(--primary-dark-blue-color);
    color: #ffffff;
    font-size: 1.125rem;
    padding: 0.655rem;
    vertical-align: baseline;
}
#fare-benefits .fare-chart-body table thead tr th:nth-child(1) {
    border-radius: 5px 0 0 0;
}
#fare-benefits .fare-chart-body table thead tr th:nth-child(5) {
    background: linear-gradient(270deg, #1A2C80 27%, #14204C 77%, #111B40 100%);
    border: none;
    /*border-bottom: 4px solid #FFBF27;*/
    color: var(--primary-yellow-color);
}
#fare-benefits .fare-chart-body table thead tr th:nth-child(4) {
    border: none;
    /*border-bottom: 4px solid var(--primary-midnight-blue-color);*/
}
#fare-benefits .fare-chart-body table thead tr th:nth-child(3) {
    background: var(--primary-bold-blue-color);
    border: none;
    /*border-bottom: 4px solid var(--primary-dark-blue-color);*/
}
#fare-benefits .fare-chart-body table thead tr th:nth-child(2) {
    background: #ffffff;
    border-radius: 0 5px 0 0;
    border: 2px solid  var(--secondary-light-blue-color);
    /*border-bottom: 4px solid var(--secondary-light-blue-color);*/
    color: var(--primary-bold-blue-color);
}
#fare-benefits .fare-chart-body table tbody tr.dark-blue-bg td {
    background: var(--primary-dark-blue-color);
}
#fare-benefits .table-underfare-tag{
font-size: .8rem;
padding: 0;
}
#fare-benefits .table-underfare-tag-goless{
background-color: var(--secondary-light-blue-color) !important;

}
#fare-benefits .table-underfare-tag-toppick{
background-color: var(--primary-dark-blue-color) !important; 
color: #fff !important;
}
#fare-benefits .table-underfare-tag-earlieraccess{
background-color: var(--primary-midnight-blue-color) !important; 
color: #fff !important;
}
#fare-benefits .table-underfare-tag-allin{
background-color: var(--primary-yellow-color) !important;
}
#fare-benefits .fare-chart-body table tr td, #fare-benefits .fare-chart-body table tr th {
    height: auto;
    width: auto;
}
#fare-benefits .fare-chart-body table tbody tr:last-child th {
    border-radius: 0 0 0 5px;
}
#fare-benefits .fare-chart-body table tbody tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}
#fare-benefits .fare-chart-body table thead tr th:first-child {
    position: relative;
}
#fare-benefits .fare-chart-body table thead tr th:first-child::after {
   /* content: "";
    background: var(--primary-dark-blue-color);
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    position: absolute;*/
}
#fare-benefits .fare-chart-body table thead tr th:not(:first-child) {
    /* simulating border spacing in thead */
    border-left: #ffffff solid 2px;
}
#fare-benefits .fare-chart-body table tr th {
    height: auto;
    width: 250px !important;
}

/* Tier Benefits Chart */
#tier-benefits .fare-chart-body table tr td, #tier-benefits .fare-chart-body table tr th {
    width: 33.33%
}
#fare-benefits #tier-benefits .fare-chart-body table thead tr th:nth-child(3) {
    background: var(--primary-midnight-blue-color);
    border-bottom: none;
    color: #ffffff;
}
#fare-benefits #tier-benefits .fare-chart-body table thead tr th:nth-child(2) {
    background: var(--primary-bold-blue-color);
    border: none;
    color: #ffffff;
}
#fare-benefits #tier-benefits .fare-chart-body table thead tr th:nth-child(3) {
    border-bottom: none;
}
#tier-benefits .fare-chart-body table tbody tr th:nth-of-type(1) {
    padding-right: 30px;
}

/* Cardmember Benefits Chart */
#cardmember-benefits #fares .fare-chart-body table thead tr th:not(:first-child) {
    background: #ffffff;
    border: none;
    color: var( --primary-midnight-blue-color);
}
#cardmember-benefits #fares .fare-chart-body table thead tr th:not(:first-child):nth-child(even), #cardmember-benefits #fares .fare-chart-body table tbody tr td {
    /* simulating border spacing in thead */
    border-left: #dddddd solid 2px;
}
#cardmember-benefits table thead th img {
    display: block;
    margin-bottom: 0.5rem;
    max-width: 137px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
#cardmember-benefits table thead th span {
    display: block;
}
#cardmember-benefits .fare-chart-body table tbody tr th:nth-of-type(1) {
    padding-right: 50px;
    width: 100%;;
}

/*Boarding Enhancements Chart */
#boarding-process .fare-chart-header{ 
    background: unset;
    color: unset;
    display: inline-block;
}
#boarding-process table {
    border-collapse: separate;
    border-spacing: 0 2px;
  }
#boarding-process .fare-chart-header .right { 
    filter: brightness(0.1);
    vertical-align: baseline;
}
/* #fare-benefits .fare-chart-body { overflow-x: auto; } */
/* Override legacy fare chart background colors */

#boarding-process table tbody tr th:nth-of-type(1) {
    background-color: var(--primary-dark-blue-color);
    color: #ffffff;
    font-size: 1rem;
    line-height: 1rem;
    padding-right: 26px;
min-width:13rem;
text-align:left;
}
#boarding-process table {
    border-collapse: separate;
    border-spacing: 2px;
  }
#boarding-process table thead th {
    background: var(--primary-dark-blue-color);
    color: #ffffff;
    font-size: 1.125rem;
    padding: 0.655rem;
    vertical-align: baseline;
border-bottom: 2px solid rgba(0, 0, 0, -9.5);
}
#fare-benefits table thead tr th:nth-child(1) {
    border-radius: 5px 0 0 0;
}
#fare-benefits .fare-chart-body table thead tr th:nth-child(5) {
    background: linear-gradient(270deg, #1A2C80 27%, #14204C 77%, #111B40 100%);
    border: none;
    /*border-bottom: 4px solid #FFBF27;*/
    color: var(--primary-yellow-color);
border-top-right-radius: 5px;
}
#fare-benefits .fare-chart-body table thead tr th:nth-child(4) {
    border: none;
    /*border-bottom: 4px solid var(--primary-midnight-blue-color);*/
}
#fare-benefits .fare-chart-body table thead tr th:nth-child(3) {
    background: var(--primary-bold-blue-color);
    border: none;
    /*border-bottom: 4px solid var(--primary-dark-blue-color);*/
}
#fare-benefits .fare-chart-body table thead tr th:nth-child(2) {
    background: #ffffff;
    border-radius: 0 0 0 0;
    border: 2px solid  var(--secondary-light-blue-color);
    /*border-bottom: 4px solid var(--secondary-light-blue-color);*/
    color: var(--primary-bold-blue-color);
padding:2%;
}
#boarding-process table tbody tr.dark-blue-bg td {
    background: var(--primary-dark-blue-color);
}
#boarding-process tbody tr{
 background: #f5f5f5;
}
#boarding-process table tr td{
    height: auto;
    width: 320px;
}
#boarding-process table tbody tr:last-child th {
    border-radius: 0 0 0 5px
}
#boarding-process table tbody tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}
#boarding-process table thead tr th:first-child {
    position: relative;
}
#boarding-process table thead tr th:first-child::after {
    content: "";
    background: var(--primary-dark-blue-color);
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    position: absolute;
}
#boarding-process table thead tr th:not(:first-child) {
    /* simulating border spacing in thead */
    border-left: rgba(0, 0, 0, -9.5) solid 2px;
}

#boarding-process .fare-chart-header { 
    background: unset;
    color: unset;
    display: inline-block;
}
#boarding-process .fare-chart-header .right { 
    filter: brightness(0.1);
    vertical-align: baseline;
}

/*Section: Seatisfaction */
#videoCarousel button.carousel-control-prev, button.carousel-control-next {
    background: none;
    border: none;
    opacity: 1;
}
#videoCarousel .carousel-control-next-icon, .carousel-control-prev-icon {
    width: 80px;
    height: 80px;
    /* backdrop-filter: blur(10px); */
    background-size: 37px;
    background-color: rgba(0, 0, 55, 0.21);
    border-radius: 40px;
}
#videoCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8' clip-rule='evenodd'/></svg>");
}
#videoCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8' clip-rule='evenodd'/></svg>");
}

/* Section: See More Video */
.see-more {
    background: linear-gradient(180deg, #F8F9FD 0%, #E2E7F0 100%);
    padding: min(80px, 6%) min(15px, 0%);
  }
  .see-more h2 {
    color: #090F23;
    font-size: clamp(2rem, calc(2vw + 1rem), 3rem);
    line-height: clamp(2.5rem, calc(4vw + 1rem), 3.5rem);
  }
  .see-more button.img-btn {
    background-color: transparent;
    border: none;
    height: 100%;
    position: absolute;
    width: 96%;
    z-index: 1;
  }
  .see-more p, .see-more ul {
    list-style: none;
    padding-left: 3rem;
  }
  .see-more p, .see-more ul li::before {
    content: '';
    background: url('/swa-resources/images/responsive/customer-enhancements/assigned-seating/icon-checkmark-circle.png'); 
    background-size: contain;
    height: 35px;
    left: 1rem;
    position: absolute;
    width: 35px;
  }
  .see-more p, .see-more ul li h3 {
    color: var(--primary-bold-blue-color);
    font-size: clamp(2rem, calc(2vw + 1rem), 3rem);
  }
  .see-more img {
    cursor: pointer;
  }
  .see-more .play-icon::after {
    content: url('/swa-resources/images/responsive/customer-enhancements/play-button.svg');
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -32px;
    margin-top: -32px;
    transition: all ease 0.2s;
    z-index: 0;
  }
    .see-more .play-icon:hover::after {
      /* backdrop-filter: blur(5px); */
      filter: drop-shadow(2px 2px 10px #fff);
    }
  .see-more .play-icon::after:hover {
    opacity: 1;
  }


/* Section: New benefits */
.new-benefits h2 {
    font-size: clamp(2rem, calc(2vw + 1rem), 2.5rem);
}
@media all and (max-width: 767px) {
    .new-benefits img {
        margin: -2rem 0 2rem;
        width: 100%;
    }
}

/* Section: Boarding process */
.boarding-process {
    background-image: url('/swa-resources/images/responsive/customer-enhancements/assigned-seating/boarding-process-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: #ffffff;
    padding: min(80px, 6%) min(15px, 0%);
}
.boarding-process p, .boarding-process h2 {
    color: #ffffff;
}
.boarding-process h2 span {
    color: var(--main-accent-color);
}
.boarding-process ul li { 
    color: var(--primary-dark-blue-color);
  padding-bottom: 10%;
  }

/* Section: Rewards */
.rewards {
    background: #F7F9FF;
}
.rewards .card, .rewards .list-group-item { 
    background: none;
    border: none;
}
.rewards .card .card-body {
    border-bottom: 4px solid var(--main-accent-color);
    padding: 0.5rem 0;
    margin: 0 1.25rem;
}
.rewards .card .card-body {
    margin-bottom: 0.5rem;
}
.rewards .card .card-title {
    color: var(--heading-1-text-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
}
.rewards .card .list-group-item {
    border: none;
}
.rewards .card .list-group .card-subtitle {
    color: var(--heading-1-text-color);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0;
}
.rewards .card .list-group .card-text {
    color: #515151;
    font-size: 1rem;
    line-height: 1.5rem;
}
.rewards .card .list-group .card-text span {
    color: var(--heading-1-text-color);
    font-weight: 700;
}
@media all and (min-width: 767px) and (max-width: 991px) {
    .rewards .card .card-title { 
        font-size: 1rem;
    }
}