@charset "UTF-8";
/* CSS Document */
.agoda-swiper-bk{
background-image: linear-gradient(to bottom, #d0eef9, #fff 10%, #fff 90%, #d0eef9);
padding: 30px 0;
margin-top: 30px;
}
.pagination-style{
--swiper-theme-color: #1f67da;
position: relative;
bottom: 0 !important;
}
.usage-screen{
width: 100%;
max-width: 360px;
height: auto;
padding: 0 40px
}
.swiper-usagebtn-prev{
position: absolute;
width: 40px;
height: 100%;
left: 20px;
top: 0;
background: url("../images/agoda-preview-arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 40px auto;
cursor: pointer;
z-index: 10;
}
.swiper-usagebtn-next{
position: absolute;
width: 40px;
height: 100%;
right: 20px;
top: 0;
background: url("../images/agoda-next-arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 40px auto;
cursor: pointer;
z-index: 10;
}
.swiper-usagebtn-prev.swiper-button-disabled,
.swiper-usagebtn-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper {
      width: 100%;
      height: 100%;
    }
.usage-swiper-row{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: relative;
margin-left: -20px;
margin-right: -20px;
}
.usage-swiper-col1{
width: 55%;
padding: 0 20px 10px;
position: relative;
}
.usage-swiper-col2{
width: 45%;
padding: 0 20px;
height: 400px;
}
.usage-swiper-col2-c{
width: 45%;
padding: 0 15px;
height: 500px;
}
    .usage-thumb1 .swiper-slide, .usage-thumb2 .swiper-slide, .usage-thumb3 .swiper-slide, .usage-thumb4 .swiper-slide, .usage-thumb5 .swiper-slide, .usage-thumb6 .swiper-slide, .usage-thumb7 .swiper-slide, .usage-thumb8 .swiper-slide {
      filter: grayscale(100%);
opacity: 0.6;
    }
.usage-thumb1 .swiper-slide-thumb-active, .usage-thumb2 .swiper-slide-thumb-active, .usage-thumb3 .swiper-slide-thumb-active, .usage-thumb4 .swiper-slide-thumb-active, .usage-thumb5 .swiper-slide-thumb-active, .usage-thumb6 .swiper-slide-thumb-active, .usage-thumb7 .swiper-slide-thumb-active, .usage-thumb8 .swiper-slide-thumb-active{
filter: grayscale(0);
opacity: 1;
}
.swiper-slide.usage-thumb-theme{
display: flex;
flex-flow: column;
justify-content: center;
}
.swiper-slide.usage-thumb-theme strong{
color: #0066b3;
}
@media all and (max-width:1023px) {
.usage-swiper-row{
margin: 0;
}
.swiper-usagebtn-prev{
left: 0;
}
.swiper-usagebtn-next{
right: 0;
}
.usage-swiper-col1{
width: 100%;
}
.usage-swiper-col2, .usage-swiper-col2-c{
width: 100%;
padding-top: 20px;
height: 140px;
}
.usage-thumb1 .swiper-slide, .usage-thumb2 .swiper-slide, .usage-thumb3 .swiper-slide, .usage-thumb4 .swiper-slide, .usage-thumb5 .swiper-slide, .usage-thumb6 .swiper-slide, .usage-thumb7 .swiper-slide, .usage-thumb8 .swiper-slide  {
display: none;
    }
.swiper-slide-thumb-active{
display: block !important;
width: 100% !important;
}
}
.swiper-slide{
text-align: center;
}