/*element*/
@font-face{
  font-family: text-security-disc;
  src: url("/static/tt_website/fonts/text-security-disc.woff");
}

.cancel-pin-num-input {
  font-family: text-security-disc !important;
  -webkit-text-security: disc;
}


body {
    font-size: 13px;
    background: #f7f7f7;
    color: #444444;
}

header{
    z-index: 1001 !important
}

.modal-content{
    border:unset;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1240px;
  }
}

.title_logo{
    color: black;
}

::selection {
    color: #ffffff !important;
}

label{
    margin-bottom: 5px;
    font-weight: bold;
}

hr{
    margin: 15px 0;
    border-top: 1px solid #cdcdcd;
}

h1, .h1 {
  font-size: 36px;
}

h2, .h2 {
  font-size: 30px;
}

h3, .h3 {
  font-size: 24px;
}

h4, .h4 {
  font-size: 18px;
}

h5, .h5 {
  font-size: 16px;
}

h6, .h6 {
  font-size: 14px;
}


blockquote {
  background: #f9f9f9;
  border-left: 5px solid #ccc;
  margin: 1.5em 2em;
  padding: 1.5em 10px 2.5em 10px;
}

input[type="radio"].activity, input[type="checkbox"].activity {
    margin: 4px !important;
    opacity: 0;
    margin-right: -15px !important;
}

/* create new */
ul.create_tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.create_tabs li{
    /*background: rgba(0,0,0,0.5);*/
    color:#171b26;
    display: inline-block;
    padding: 10px 15px 5px 15px;
    cursor: pointer;
}
ul.create_tabs li:hover{
   color:#205B95;
}
li.create_tab-link label{
    cursor: pointer;
    text-align:center;
}
ul.create_tabs li label:hover{
   color:#205B95;
   cursor:pointer;
}
ul.create_tabs li.current{
    /*background: rgba(0,0,0,0.5);*/
    border-bottom: 5px solid #205B95;
    color: #205B95;
}
ul.create_tabs li.current .image-rounded-icon{
    background: #205B95 !important;
}
.create_tab-content{
    display: none;
    /*background: rgba(0,0,0,0.5);*/
    padding: 20px;
}
.create_tab-content.current{
    display: inherit;
}

/* setting template new */
ul.template_tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.template_tabs li{
    /*background: rgba(0,0,0,0.5);*/
    color:#171b26;
    display: inline-block;
    padding: 10px 15px 5px 15px;
    cursor: pointer;
}

ul.template_tabs li:hover{
   color:#205B95;
}

li.template_tab-link label{
    cursor: pointer;
    text-align:center;
}

ul.template_tabs li.current{
    /*background: rgba(0,0,0,0.5);*/
    border-bottom: 5px solid #205B95;
    color: #205B95;
}

ul.template_tabs li.current .image-rounded-icon{
    background: #205B95 !important;
}

.template_tab-content{
    display: none;
    /*background: rgba(0,0,0,0.5);*/
    padding: 20px;
}

.template_tab-content.current{
    display: inherit;
}


/* edit new */
ul.edit_tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.edit_tabs li{
    /*background: rgba(0,0,0,0.5);*/
    color:#171b26;
    display: inline-block;
    padding: 10px 15px 5px 15px;
    cursor: pointer;
}

ul.edit_tabs li:hover{
   color:#205B95;
}
ul.edit_tabs li label:hover{
    color: #205B95 !important;
}

li.edit_tab-link label{
    cursor: pointer;
    text-align:center;
}

ul.edit_tabs li.current{
    /*background: rgba(0,0,0,0.5);*/
    border-bottom: 5px solid #205B95;
    color: #205B95;
}

ul.edit_tabs li.current .image-rounded-icon{
    background: #205B95 !important;
}

.edit_tab-content{
    display: none;
    /*background: rgba(0,0,0,0.5);*/
    padding: 20px;
}

.edit_tab-content.current{
    display: inherit;
}


/* ul li button */
ul.btn_tabs{
    list-style: none;
}
ul.btn_tabs li{
    /*background: rgba(0,0,0,0.5);*/
    color:#171b26;
    margin-bottom:10px;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    border: 2px solid #205B95;
}

ul.btn_tabs li:hover{
   color:#205B95;
}

li.btn_tab-link label{
    cursor: pointer;
    text-align:center;
}

ul.btn_tabs li.current{
    background: #205B95;
    color: white;
}

ul.btn_tabs li.current .image-rounded-icon{
    background: #205B95 !important;
}

.btn_tab-content{
    display: none;
    /*background: rgba(0,0,0,0.5);
    padding: 20px;*/
}

.btn_tab-content.current{
    display: inherit;
}

/* popular1 new */
ul.popular1_tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.popular1_tabs li{
    /*background: rgba(0,0,0,0.5);*/
    color:#171b26;
    display: inline-block;
    padding: 10px 15px 5px 15px;
    cursor: pointer;
}

ul.popular1_tabs li:hover{
   color:#205B95;
}

li.popular1_tab-link label{
    cursor: pointer;
    text-align:center;
}

ul.popular1_tabs li.current{
    /*background: rgba(0,0,0,0.5);*/
    border-bottom: 5px solid #205B95;
    color: #205B95;
}

ul.popular1_tabs li.current .image-rounded-icon{
    background: #205B95 !important;
}

.popular1_tab-content{
    display: none;
    /*background: rgba(0,0,0,0.5);
    padding: 20px;*/
}

.popular1_tab-content.current{
    display: inherit;
}

/* popular2 new */
ul.popular2_tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.popular2_tabs li{
    /*background: rgba(0,0,0,0.5);*/
    color:#171b26;
    display: inline-block;
    padding: 10px 15px 5px 15px;
    cursor: pointer;
}

ul.popular2_tabs li:hover{
   color:#205B95;
}

li.popular2_tab-link label{
    cursor: pointer;
    text-align:center;
}

ul.popular2_tabs li.current{
    /*background: rgba(0,0,0,0.5);*/
    border-bottom: 5px solid #205B95;
    color: #205B95;
}

ul.popular2_tabs li.current .image-rounded-icon{
    background: #205B95 !important;
}

.popular2_tab-content{
    display: none;
    /*background: rgba(0,0,0,0.5);
    padding: 20px;*/
}

.popular2_tab-content.current{
    display: inherit;
}

.origin-code-snippet {
  border-radius:50%;
  position:absolute;
  height:10px;
  width:10px;
  top:12px;
}
.p-5px{
    padding:5px;
}

/*preview admin setting*/
.preview_login{
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.preview_login_header{
    min-height: 12%;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.preview_login_bg{
    width: 100%;
    min-height: 88%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
/*preview admin setting*/

/*owl carousel*/
.owl-carousel-banner.owl-drag .owl-item{
   background: url("https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/ajax-loader.gif") no-repeat center center;
}

.owl-carousel-banner .owl-item img{
    width: 100% !important;
}
.owl-carousel-suggest.owl-drag .owl-item{
   background: url("https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/ajax-loader.gif") no-repeat center center;
}
.owl-carousel-suggest .owl-item img{
   width: 100% !important;
}
.owl-carousel-login.owl-drag .owl-item{
   height: 400px;
   background: url("https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/ajax-loader.gif") no-repeat center center;
}

.owl-bg-border{
    border-bottom: 5px solid #205B95;
}
/*owl carousel*/

/*placeholder stripe*/
.div_stripe{
    position: relative;
    height: 100%;
    width: 100%;
    background: rgb(227,227,227);
    background: linear-gradient(90deg, rgba(227,227,227,1) 0%, rgba(182,182,182,1) 7%, rgba(182,182,182,1) 13%, rgba(227,227,227,1) 25%);
    background-size:900%;
    background-position: 100% 0%;
    z-index: 0;
    overflow: hidden;
}

.loading_stripe{
  position: absolute;
  left: -45%;
  height: 100%;
  width: 45%;
  background-image: linear-gradient(to left, rgba(255,255,255, .05), rgba(255,255,255, .3), rgba(255,255,255, .6), rgba(255,255,255, .3), rgba(255,255,255, .05));
  background-image: -moz-linear-gradient(to left, rgba(255,255,255, .05), rgba(255,255,255, .3), rgba(255,255,255, .6), rgba(255,255,255, .3), rgba(255,255,255, .05));
  background-image: -webkit-linear-gradient(to left, rgba(255,255,255, .05), rgba(255,255,255, .3), rgba(255,255,255, .6), rgba(255,255,255, .3), rgba(255,255,255, .05));
  animation: loading 1s infinite;
  z-index: 45;
}
@keyframes loading {
  0%{
    left: -45%;
  }
  100%{
    left: 100%;
  }
}

@keyframes left-right {
  0%{
    left: -30%;
  }
  50%{
    left: 100%
  }
  100%{
    left: -45%;
  }
}
.stripe {
  border: 1px solid white;
  height: 20%;
  background-color: #babbbc;
}

.small-stripe {
  width: 40%;
}

.medium-stripe {
  width: 70%;
}

.long-stripe {
  width: 100%;
}

.stripe_dynamic_page_login{
    height:180px !important;
    width:100%;
}

.stripe_dynamic_page{
    height:290px !important;
    width:100%;
}

.stripe_image_vbig{
    height:350px;
    width:100%;
}

.stripe_description{
    height:250px;
    width:100%;
}

.stripe_breadcrumb_text{
    width:45px;
    display: inline-flex;
    height: 15px;
    position: relative;
    top: 3px;
}

.stripe_sorting{
    width: 80px;
    height: 15px;
    position: relative;
    display: inline-flex;
    top: 3px;
    margin: 5px 15px 10px 15px;
}

.stripe_change_date{
    width: 100%;
    height: 50px;
}

.stripe_checkbox{
    width: 20px;
    height: 20px;
}

.stripe_div_hsmall100p{
    width: 100%;
    height: 10px;
}
.stripe_div_hsmall50p{
    width: 100%;
    height: 10px;
}
.stripe_div_hsmall40{
    width: 40px;
    height: 10px;
}

.stripe_div_hsmall70{
    width: 70px;
    height: 10px;
}

.stripe_div_hsmall85{
    width: 85px;
    height: 10px;
}

.stripe_div_hsmall100{
    width: 100px;
    height: 10px;
}

.stripe_div_hsmall115{
    width: 115px;
    height: 10px;
}
.stripe_div_hsmall130{
    width: 130px;
    height: 10px;
}
.stripe_div_hsmall145{
    width: 145px;
    height: 10px;
}
.stripe_div_hsmall160{
    width: 160px;
    height: 10px;
}
.stripe_div_hsmall175{
    width: 175px;
    height: 10px;
}
.stripe_div_hsmall190{
    width: 190px;
    height: 10px;
}
.stripe_div_hsmall220{
    width: 220px;
    height: 10px;
}
.stripe_div_hsmall50p{
    width: 50%;
    height: 10px;
}

.stripe_checkbox{
    width: 20px;
    height: 20px;
}

.stripe_div_100p{
    width: 100%;
    height: 20px;
}
.stripe_div_small40{
    width: 40px;
    height: 20px;
}

.stripe_div_small70{
    width: 70px;
    height: 20px;
}

.stripe_div_small85{
    width: 85px;
    height: 20px;
}

.stripe_div_small100{
    width: 100px;
    height: 20px;
}

.stripe_div_medium115{
    width: 115px;
    height: 20px;
}

.stripe_div_medium130{
    width: 130px;
    height: 20px;
}

.stripe_div_medium145{
    width: 145px;
    height: 20px;
}

.stripe_div_medium160{
    width: 160px;
    height: 20px;
}

.stripe_div_medium175{
    width: 175px;
    height: 20px;
}

.stripe_div_medium190{
    width: 190px;
    height: 20px;
}

.stripe_div_50p{
    width: 50%;
    height: 20px;
}

.stripe_div_pagination{
    width: 50%;
    height: 30px;
}

/*Checkbox with 100% text*/
.place_div_100{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stripe_div_100{
    width: 100%;
    height: 20px;
}

.place_div_grid{
    display:grid;
}

.stripe_span{
    width: 120px;
    height: 15px;
    margin-bottom:5px;
}

.stripe_icon_img{
    width: 55px;
    height: 55px;
}
.stripe_icon_pax{
    width: 50px;
    height: 50px;
}
.stripe_icon_share{
    width: 30px;
    height: 30px;
}

.stripe_price{
    width: 160px;
    height: 50px;
    margin-bottom: 10px;
}

.stripe_price100p{
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
}

.stripe_label40{
    width: 40px;
    height: 30px;
}
.stripe_label70{
    width: 70px;
    height: 30px;
}
.stripe_label100{
    width: 100px;
    height: 30px;
}
.stripe_label115{
    width: 115px;
    height: 30px;
}
.stripe_label130{
    width: 130px;
    height: 30px;
}
.stripe_label145{
    width: 145px;
    height: 30px;
}
.stripe_label160{
    width: 160px;
    height: 30px;
}
.stripe_label100p{
    width: 100%;
    height: 30px;
}
.stripe_button_copy{
    width: 70px;
    height: 30px;
}
.stripe_button{
    width: 100px;
    height: 40px;
}
.stripe_button100p{
    width: 100%;
    height: 40px;
}
.stripe_med_button{
    width: 150px;
    height: 40px;
}
.stripe_long_button{
    width: 200px;
    height: 40px;
}

.stripe_2row_small{
    width: 100%;
    height: 30px;
}

.stripe_row_big{
    width: 100%;
    height: 80px;
}

.stripe_img_big_hotel{
    width: auto;
    height: 200px;
}
.stripe_img_activity{
    width: auto;
    height: 175px;
}

.stripe_img_insurance{
    width: auto;
    height: 130px;
}

.stripe_img_big_room{
    width: auto;
    height: 175px;
}

.place_div_dynamic{
    background:#205B95;
    padding:10px;
    display:flex;
    position:relative;
}

.place_div_white{
    background:white;
    padding:10px;
    display:flex;
    position:relative;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
}

.place_div_left_right{
    display:flex;
    position:relative;
    margin-bottom:10px;
}

.place_div_trans{
    display:flex;
}

.place_div_share_copy{
    display:inline-flex;
}

/*placeholder stripe*/
/*button*/
.button-custom{
    background-color: #205B95;
}

.btn-primary {
    color: #fff;
    background-color: #205B95;
}
.btn-primary:hover{
    background-color: #205B95;
    opacity:1;
}

.tags_btn{
    padding:3px 7px;
    font-size:12px;
    margin-right:5px;
    color: #205B95;
    background: white;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    cursor:pointer;
    line-height:26px;
}

.tags_btn:hover{
    background: #205B95;
    color:white;
    text-decoration: unset;
}

.tags_btn_rsv{
    padding:0px 5px;
    font-size:13px;
    margin-right:5px;
    color: #205B95;
    background: white;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    cursor:pointer;
    line-height:26px;
}

.tags_btn_rsv:hover{
    background: #205B95;
    color:white;
}

.border-event{
    padding:10px;
    border-right:2px solid #205B95;
}

@media (max-width: 767px) {
    .border-event{
        border-right:unset;
        margin-bottom:15px;
    }
}

.border-event-sold{
    padding:10px;
    border-right:2px solid gray;
}

@media (max-width: 767px) {
    .border-event-sold{
        border-bottom:2px solid gray;
        border-right:unset;
    }
}

.radio-img {
    margin-right:5px;
    cursor:pointer;
    text-align:center;
}

.radio-img  > input {
  display:none;
}

.radio-img > img{
  cursor:pointer;
  padding:10px;
  border:2px solid #ffffff;
}
.radio-img > div{
    color:#171b26;
    background: white;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 5px;
}

.radio-img > input:checked + img{
  border:2px solid orange;
}
.radio-img > input:checked ~ div{
  color: white !important;
  background: #205B95 !important;
}

.radio-img .title_prd{
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    word-spacing: 0px;
    letter-spacing: 1px;
    padding-left:5px;
}


.btn-del-room {
    margin: -10px;
    padding: 0px;
    position: absolute;
    right: 40px;
    font-size: 15px;
    cursor: pointer;
}

.activity-rooms-modal {
    margin: 0px auto;
    width:650px !important;
}

.btn-activity {
    background: white;
    border: 2px solid #205B95;
    color:#171b26;
}

.btn-activity:hover, .btn-activity:active, .btn-activity.active {
    background-color: #205B95;
    color: white;
    opacity: 1;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background-color: #205B95 !important;
}

.btn-add-rooms {
    font-size: 11px;
    padding: 5px 15px;
}

/* The container */
.radio-button-custom {
  position: relative;
  padding-left: 25px;
  padding-right: 15px;
  margin-top:5px;
  margin-bottom:5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio-button-custom input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom radio button */
.checkmark-radio {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #D0D0D0;
  border-radius: 50%;
}

.radio-button-custom input:disabled ~ .checkmark-radio {
  background-color: #ededed !important;
}

.radio-button-custom input:disabled ~ .span_type_radio {
    text-decoration: line-through !important;
    color: #cdcdcd !important;
}

/* On mouse-over, add a grey background color */
.radio-button-custom:hover input ~ .checkmark-radio {
  background-color: #9A9A9A;
}

/* When the radio button is checked, add a blue background */
.radio-button-custom input:checked ~ .checkmark-radio {
  background-color: #205B95;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-radio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-button-custom input:checked ~ .checkmark-radio:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-button-custom .checkmark-radio:after {
 	top: 7px;
	left: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: white;
}

/* The container */
.check_box_custom {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.check_box_custom input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.check_box_span_custom {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #D0D0D0;
}

.check_box_custom input:disabled ~ .check_box_span_custom {
  background-color: #cccccc;
  cursor:not-allowed;
}

/* On mouse-over, add a grey background color */
.check_box_custom:hover input ~ .check_box_span_custom {
  background-color: #9A9A9A;
}

/* When the checkbox is checked, add a blue background */
.check_box_custom input:checked ~ .check_box_span_custom {
  background-color: #205B95;
}

/* Create the checkmark/indicator (hidden when not checked) */
.check_box_span_custom:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check_box_custom input:checked ~ .check_box_span_custom:after {
  display: block;
}

/* Style the checkmark/indicator */
.check_box_custom .check_box_span_custom:after {
  left: 7px;
  top: 4px;
  width: 7px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.chatcs {
  background-color: #205B95;
  color: white;
  height:55px;
  width:55px;
  border: 1px solid gray;
  border-radius: 5px;
  cursor: pointer;
}

.filtersort {
  background-color: #205B95;
  color: white;
  height:40px;
  padding: 0px 10px 0px 10px;
  padding-right padding-left: 10px;
  border: 1px solid gray;
  border-radius: 5px;
  cursor: pointer;

  position: fixed;
  top: 140px;
  left: 25px;
  z-index: 99;
  float:left;
}

.filtersort:hover {
  background-color: #205B95;
}

.button-seat-map {
  border: none;
  color:#171b26;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  height: 50px;
  margin: 5px 2px;
  cursor: pointer;
  border-radius: 5px;
}

.button-seat-map2 {
  border: none;
  color:#171b26;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 5px;
}

.button-route-pass {
  background-color:white;
  color:#171b26;
  border:unset;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  padding: 0px 10px;
  margin-right: 10px;
  text-align: left;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  line-height:unset;
  width:300px;
  height: 100px;
}

.button-route-pass:focus{
    outline:unset;
}

.div_for_add {
  background-color:white;
  color:#171b26;
  border-radius: 5px;
  border: 1px solid #cdcdcd;
  padding: 5px 10px 0px 10px;
  text-align: left;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  line-height:unset;
  width:100%;
  min-height:45px;
  margin-right:10px;
  margin-bottom:10px;
}

.button-seat-pass {
  background-color:white;
  color:#171b26;
  border:unset;
  border: 1px solid #cdcdcd;
  padding: 10px 10px;
  text-align: left;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  line-height:unset;
  width:100%;
}

.button-seat-pass:focus{
    outline:unset;
}

.button_date_np{
    background:white;
    border:2px solid #cdcdcd;
    padding: 10px 11px;
    text-align: center;
    border-radius: 5px;
    font-size:12px;
}

.button_date_np:hover{
    color:#205B95;
    border:2px solid #205B95;
    cursor:pointer;
}

.button_date_np_disabled{
   background: #cccccc !important;
   color: #666666 !important;
   cursor: not-allowed !important;
   border:2px solid #cdcdcd;
   padding: 10px 11px;
   text-align: center;
}

@media (max-width: 425px) {
    .button_date_np{
        padding:10px 11px !important;
        text-align: center;
    }
}

#mybuttonchat {
  position: fixed;
  bottom: 25px;
  right: 30px;
  z-index: 99;
  float:right
}

#myBtnBTP {
    display: none;
    position: fixed;
    bottom: 90px;
    left: 40px;
    z-index: 998;
    font-size: 20px;
    border-radius: 50%;
    border: 1px solid #cdcdcd;
    outline: none;
    background-color: #205B95;
    color: white;
    cursor: pointer;
    height: 50px;
    width: 50px;
}

#myBtnBTP:hover {
  background-color: #205B95;
}

.header_breadcrumb{
    background:white !important;
    border-bottom: 1px solid #cdcdcd;
    padding-bottom:10px;
    z-index:1041 !important;
}

.menu_header{
    padding-left: 15px !important;
    padding-top: 10px !important;
    padding-bottom: 15px !important;
    font-weight: 600;
}

.li-activity {
    background-color:#205B95;
    height: 41px;
    display: inline-block;
    vertical-align: middle;
}

.li-activity:hover {
    background-color:white;
}

.li-activity.active {
    background-color:white;
}

.tab-menu-activity {
     color: white;
     background-color:#205B95;
     display: block;
     width: 100%;
     height: 100%;
     padding-top: 10px;
}

.tab-menu-activity:hover {
     color: white;
     background-color:#205B95;
     text-decoration: unset;
     opacity:1;
}

.tab-menu-activity.active {
     color: white;
     background-color:#205B95;
     opacity:0.9;
}

.icon-search-ticket{
    background: #205B95;
    color: white;
}

.nav-tabs-activity {
    background-color: #205B95;
    height: 41px !important;
}

.info_user{
    top: 0px !important;
}

#info_user_search{
    position: sticky;
    top: 66px;
    z-index: 2;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 0px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 260px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}

/* Ion.RangeSlider, Simple Skin
// css version 2.0.3
// © Denis Ineshin, 2014    https://github.com/IonDen
// © guybowden, 2014        https://github.com/guybowden
// ===================================================================================================================*/

/* =====================================================================================================================
// Skin details */

.irs {
    height: 55px;
}
.irs-with-grid {
    height: 75px;
}
.irs-line {
    height: 10px; top: 33px;
    background: #EEE;
    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%); /* W3C */
    border: 1px solid #CCC;
    border-radius: 16px;
    -moz-border-radius: 16px;
}
    .irs-line-left {
        height: 8px;
    }
    .irs-line-mid {
        height: 8px;
    }
    .irs-line-right {
        height: 8px;
    }

.irs-bar {
    height: 10px;
    top: 33px;
    border-top: 1px solid #205B95;
    border-bottom: 1px solid #205B95;
    background: #205B95;
    background: linear-gradient(to top, rgba(241,90,34,1) 0%,rgba(255,110,57,1) 100%); /* W3C */
}
    .irs-bar-edge {
        height: 10px; top: 33px;
        width: 14px;
        border: 1px solid #428bca;
        border-right: 0;
        background: #428bca;
        background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
        border-radius: 16px 0 0 16px;
        -moz-border-radius: 16px 0 0 16px;
    }

.irs-shadow {
    height: 2px; top: 38px;
    background: #000;
    opacity: 0.3;
    border-radius: 5px;
    -moz-border-radius: 5px;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=30);
}

.irs-slider {
    top: 25px;
    width: 27px; height: 27px;
    border: 1px solid #AAA;
    background: #DDD;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */
    border-radius: 27px;
    -moz-border-radius: 27px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

.irs-slider.state_hover, .irs-slider:hover {
    background: #FFF;
}

.irs-min, .irs-max {
    color: #333;
    font-size: 12px; line-height: 1.333;
    text-shadow: none;
    top: 0;
    padding: 1px 5px;
    background: rgba(0,0,0,0.1);
    border-radius: 5px;
    -moz-border-radius: 5px;
}

.lt-ie9 .irs-min, .lt-ie9 .irs-max {
    background: #ccc;
}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 14px; line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: #205B95;
    border-radius: 5px;
    -moz-border-radius: 5px;
}
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
    background: #999;
}

.irs-grid {
    height: 27px;
}
.irs-grid-pol {
    opacity: 0.5;
    background: #428bca;
}
.irs-grid-pol.small {
    background: #999;
}

.irs-grid-text {
    bottom: 5px;
    color: #99a4ac;
}

.irs-disabled {
}

.fast-change-date{
    position:sticky;
    top: 70px;
    z-index: 2;
}

/*
.sorting-search-train{
    position:sticky;
    top: 66px;
    z-index: 2;
}

.sorting-search-bus{
    position:sticky;
    top: 66px;
    z-index: 2;
}*/

.sticky-sort-filter {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
}

#mybuttonsticky {
    top:-1px;
    position:sticky;
    z-index:100;
    display:none;
    margin-bottom:15px;
}
.my_button_sticky {
    top:-1px;
    position:sticky;
    z-index:100;
    display:none;
    margin-bottom:15px;
}

.mytickethotel {
    position: fixed;
    top: 75px;
    right: 0px;
    background-color: #205B95;
    color: white;
    font-size:16px;
    height: 55px;
    width: 55px;
    border: 1px solid transparent;
    border-radius: 0px;
    cursor: pointer;
    outline: none;
    cursor: pointer;
    z-index: 1005;
}
.mytickethotel:hover {
    background-color: #205B95;
}

.myticket_static {
    background-color: #205B95;
    color: white;
    height: 32px;
    width: 180px;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    float: right;
}
.myticket_static_detail {
    background-color: #205B95;
    color: white;
    height: 32px;
    width: 180px;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    float: right;
    margin: 8px;
}

.mystickyticket {
  position: fixed;
  top: 85px;
  right: 55px;
  z-index: 99;
  height: 55px;
  cursor: pointer;
  outline: none;
  cursor: pointer;
}

.mystickycopybot {
    position: fixed;
    bottom: 180px;
    right: 0px;
    z-index: 99;
    border: 1px solid gray;
    outline: none;
    background-color: #205B95;
    color: white;
    cursor: pointer;
    height: 55px;
    width: 55px;
    border-radius: 0px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.mystickycopybot:hover {
  background-color: #205B95;
  opacity:1;
}

.mystickywhatsapp {
    position: fixed;
    bottom: 165px !important;
    right: 40px;
    z-index: 99;
    font-size: 20px;
    border-color: transparent;
    outline: none;
    background-color: #205B95;
    color: white;
    cursor: pointer;
    height: 55px;
    width: 55px;
    border-radius: 100%;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.mystickywhatsapp:hover {
  background-color: #205B95;
}

.mystickypaxs {
    position: fixed;
    bottom: 120px;
    right: 0px;
    z-index: 99;
    font-size: 20px;
    border-color: transparent;
    outline: none;
    background-color: #205B95;
    color: white;
    cursor: pointer;
    height: 55px;
    width: 55px;
    border-radius: 0px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.mystickypaxs:hover {
  background-color: #205B95;
}


.mystickybookingvendor {
    position: fixed;
    bottom: 180px;
    right: 0px;
    z-index: 99;
    font-size: 20px;
    border-color: transparent;
    outline: none;
    background-color: #205B95;
    color: white;
    cursor: pointer;
    height: 55px;
    width: 55px;
    border-radius: 0px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.mystickybookingvendor:hover {
  background-color: #205B95;
}

.myticket {
    position: fixed;
    top: 75px;
    right: 0px;
    z-index: 1049;
    background-color: #205B95;
    color: white;
    font-size:16px;
    height: 55px;
    width: 55px;
    border: 1px solid transparent;
    border-radius: 0px;
    cursor: pointer;
    outline: none;
    cursor: pointer;
}

.myticket:hover {
  background-color: #205B95;
}

.primary-btn-sorting {
    background: transparent;
    line-height: 17px;
    padding: 7px 15px 7px 15px;
    border: none;
    color: #333;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    position: relative;
}

.primary-btn-sticky-hotel {
  background: transparent;
  line-height: 17px;
  height: 43px;
  padding: 15px 20px 15px 20px;
  border:none;
  border-bottom: 3px solid #cdcdcd;
  color:#171b26;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
}

.primary-btn-sticky-hotel:hover {
  border-bottom: 3px solid #205B95;
  color: #205B95;
}


.radio-label {
    padding-right:15px;
    cursor:pointer;
}
.radio-label  > input {
  display:none;
}
.radio-label  > .div_label{
    cursor:pointer;
    padding:10px;
    min-height:80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    border:2px solid #cdcdcd;
    font-size:13px;
    background:white;
}
.radio-label > input:checked + .div_label{
  border:2px solid red !important;
  color:white;
}

.radio-label .div_radio_bg{
    height:43px;
    background:white;
    border-radius:5px;
    color:#171b26;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px; border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.radio-label .div_radio_bg:hover{
    height:43px;
    background:#205B95;
    color:white;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px; border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.radio-label > input:checked + .div_radio_bg{
    height:40px;
    background:#205B95;
    color:white;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px;
    border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}

.radio-label .div_radio_img_txt{
    height:60px;
    background:white;
    color:#171b26;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px;
    border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.radio-label .div_radio_img_txt:hover{
    height:60px;
    background:#205B95;
    color:white;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px;
    border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.radio-label > input:checked + .div_radio_img_txt{
    height:60px;
    background:#205B95;
    color:white;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px; border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}


.radio-label100 {
    padding-right:15px;
    cursor:pointer;
    text-align:left;
    font-weight: 200;
    display:flex;
}
.radio-label100 > input {
  display:none;
}
.radio-label100 > .div_label100{
    cursor:pointer;
    padding:10px;
    text-align:left;
    background:white;
    border:1px solid #cdcdcd;
    font-size:13px;
    border-radius:5px;
    font-weight:500;
    width: 250px;
    min-height: 120px;
    height:auto;
    position: relative;
}
.radio-label100 > .div_label100:hover{
}

.radio-label100  > .div_label100 > .check_label100{
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    padding:5px;
    border-radius: 5px;
    font-size: 13px;
    background: #205B95;
    color: white;
}

.radio-label100 > input:checked + .div_label100{
  border:1px solid #205B95 !important;
}

.radio-label100 > input:checked + .div_label100 > div > .price_template{
}

.radio-label100 > input:checked + .div_label100 > .check_label100{
    opacity: 1;
}

.radio-label100 .div_radio_bg{
    height:40px;
    background:white;
    color:#171b26;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px; border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.radio-label100 .div_radio_bg:hover{
    height:40px;
    background:#205B95;
    color:white;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px; border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.radio-label100 > input:checked + .div_radio_bg{
    height:40px;
    background:#205B95;
    color:white;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px;
    border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}

.radio-label100 .div_radio_img_txt{
    height:60px;
    background:white;
    color:#171b26;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px;
    border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.radio-label100 .div_radio_img_txt:hover{
    height:60px;
    background:#205B95;
    color:white;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px;
    border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.radio-label100 > input:checked + .div_radio_img_txt{
    height:60px;
    background:#205B95;
    color:white;
    cursor:pointer;
    text-align:center;
    padding:5px 5px 5px 5px; border:1px solid #cdcdcd;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}



.activity_btn_advance{
    background: rgb(241, 90, 34);
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
}

.button_cst{

}

.primary-btn {
  background: #205B95;
  line-height: 42px;
  padding-left: 25px;
  padding-right: 25px;
  border: none;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn:focus {
  outline: none;
}
.primary-btn:hover{
  background: #205B95;
  opacity: 1;
}
.primary-btn:disabled {
  cursor:not-allowed;
  background: #cccccc !important;
  color: #666666;
}

.primary-btn-standard {
  background: #f7f7f7;
  line-height: 42px;
  padding-left: 30px;
  padding-right: 30px;
  color:#171b26;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn-standard:hover{
    background:#205B95;
    color:white;
    opacity: 1;
    border: 1px solid #205B95;
}

.primary-btn-ad {
  background: #205B95;
  line-height: 42px;
  padding-left: 15px;
  padding-right: 15px;
  margin-right:5px;
  margin-bottom:15px;
  border: none;
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;\
  border-radius: 5px;
}
.primary-btn-ad:hover{
  background: #205B95;
  opacity: 1;
}
.primary-btn-ad:disabled {
  cursor:not-allowed;
  border: 1px solid #999999 !important;
  background: #cccccc !important;
  color: #666666;
}

.primary-btn-custom {
  background: #205B95;
  line-height: 43px;
  height: 43px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom:5px;
  border: none;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  cursor: pointer;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn-custom:hover {
  background: #205B95;
}
.primary-btn-custom:disabled {
  cursor:not-allowed !important;
  border: 1px solid #999999 !important;
  background: #cccccc !important;
  color: #666666 !important;
}

.primary-btn-modal {
  background: lightgray;
  line-height: 35px;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  border-radius: 5px;
  color:#171b26;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}

.primary-btn-modal:hover{
  background: #9B9B9B;
}

.primary-btn-white {
  background: #fcfffd;
  border: 1px solid #cacaca;
  color:#171b26;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  margin-bottom:15px;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn-white:hover {
  background: #205B95;
  color: white;
}
.primary-btn-white:disabled {
  cursor:not-allowed;
  background: #cccccc !important;
  color: #666666 !important;
}

.primary-btn-white-cl {
  background: #fcfffd;
  border: 1px solid #cacaca;
  color:#171b26;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  margin-bottom:15px;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn-white-cl:hover {
  background: #205B95;
  color: white;
}
.primary-btn-white-cl:disabled {
  cursor:not-allowed;
  border: 1px solid #999999 !important;
  background: #cccccc !important;
  color: #666666 !important;
}

.primary-btn-gr {
  background: white;
  border: 1px solid #cacaca;
  color: #205B95;
  border: 2px solid #205B95;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  margin-bottom:15px;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn-gr:hover {
  background: #205B95;
  color: white;
}
.primary-btn-gr:disabled {
  cursor:not-allowed;
  border: 1px solid #999999 !important;
  background: #cccccc !important;
  color: #666666 !important;
}

.primary-btn-white-short {
  background: #ffffff;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border: 1px solid #ffffff;
  color:#171b26;
  line-height: 20px;
  height:43px;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  margin-bottom:15px;
  border-radius: 5px;
}
.primary-btn-white-short:hover {
  background: #205B95;
  color: white;
}
.primary-btn-white-short:disabled {
  cursor:not-allowed;
  border: 1px solid #999999 !important;
  background: #cccccc !important;
  color: #666666 !important;
}


.primary-btn-custom-un {
  background: #ffffff;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  border: none;
  cursor: not-allowed;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  border-radius: 5px;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}

.primary-delete {
  background: #ff0002;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  border: none;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}

.primary-delete:hover {
  background: #e60019;
}

.primary-btn-cancel {
  background: #ff0002;
  line-height: 35px;
  padding-left: 15px;
  padding-right: 15px;
  border: none;
  border-radius: 5px;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  border: 2px solid red;
}

.primary-btn-cancel:hover {
  background: #e04022;
  color: white;
}

.primary-btn-white-cancel {
  background: #fcfffd;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  border: none;
  border-radius: 5px;
  color: #e60019;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  margin-right:10px;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  margin-bottom:15px;
  border: 1px solid #cdcdcd;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}

.primary-btn-white-cancel:hover {
  background: #e60019;
  color: white;
}

.primary-btn-white-cancel:disabled {
  cursor:not-allowed !important;
  border: 1px solid #999999 !important;
  background: #cccccc !important;
  color: #666666 !important;
}

.button-seat-pass-cancel{
    background: #ff0002 !important;
}
.button-seat-pass-cancel:hover{
    background: #e04022 !important;
}

.primary-delete-date {
    background: transparent;
    line-height: 45px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    border: none;
    display: inline-block;
    font-weight: 500;
    height:43px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    position: relative;
}

.primary-btn-logout {
    background: #205B95;
    line-height: 30px;
    padding-left: 20px;
    padding-right: 20px;
    border: none;
    border-radius: 5px;
    color:#171b26;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    position: relative;
    width: 100%;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
}

.primary-btn-logout:hover{
    background: #205B95;
    opacity: 1;
}

.disabled-btn {
    border: 1px solid #999999 !important;
    background: #cccccc !important;
    color: #666666;
    line-height: 35px;
    padding-left: 15px;
    padding-right: 15px;
    border: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor:not-allowed;
}

.primary-myticket {
  top: 99px;
  right: 55px;
  z-index: 99;
  background: #205B95;
  line-height: 35px;
  padding-left: 20px;
  padding-right: 20px;
  width:200px;
  border: none;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  position: fixed;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-myticket:hover{
  background: #205B95;
}

.primary-btn-ticket {
  background: #205B95;
  height: 43px;
  line-height: 41px;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn-ticket:hover{
  background: #205B95;
  opacity: 1;
}
.primary-btn-ticket:disabled{
  cursor:not-allowed;
  border: 1px solid #999999 !important;
  background: #cccccc !important;
  color: #666666;
}

.primary-btn-sign {
  background: #205B95;
  line-height: 28px;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn-sign:hover{
  background: #205B95;
}

.primary-btn-close {
  background: #D1D1D1;
  line-height: 25px;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  border-radius: 5px;
  color: #323232;
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
}
.primary-btn-close:hover{
  background: #C6C6C6;
}

.primary-btn-all-sticky {
  background: #205B95;
  line-height: 38px;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  width:100%;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn-all-sticky:hover{
  background: #205B95;
  opacity: 1;
}

.primary-btn-white-bd {
  background: white;
  border: 1px solid #cacaca;
  color:#171b26;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  margin-bottom:15px;
  box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
  border-radius: 5px;
}
.primary-btn-white-bd:hover {
  background: #205B95;
  color: white;
}
.primary-btn-white-bd:disabled {
  cursor:not-allowed;
  border: 1px solid #999999 !important;
  background: #cccccc !important;
  color: #666666 !important;
}

.btn-custom-circle {
    text-align: center;
    background-color: #205B95;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    border: 1px solid transparent;
    cursor: pointer;
    color:#171b26;
    height: 43px;
    width: 43px;
    border-radius: 100%;
}

.btn-custom-circle:hover {
  background-color:#E16133;
  opacity:1;
}

.btn-custom-circle:disabled {
    cursor:not-allowed;
    border: 1px solid #999999 !important;
    background: #cccccc !important;
    color: #666666;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.btn-secondary{
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.share-btn {
  display: inline-block;
  color: #ffffff;
  border: none;
  padding: 0.8em 1.4em;
  outline: none;
  text-align: center;
  font-size: 0.9em;
  margin: 0 0.2em;
}
.share-btn:focus,
.share-btn:hover {
  text-decoration: none;
  opacity: 1;
  color:#171b26;
}
.share-btn:active {
  color: #e2e2e2;
}
.share-btn.copy-link   { background: #918c7c; }
.share-btn.twitter     { background: #6cbfe0; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.reddit      { background: #ff5700; }
.share-btn.hackernews  { background: #ff6600; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.email       { background: #444444; }
.share-btn.whatsapp    { background: #3AC371; }
.share-btn.telegram    { background: #419fd9; }
.share-btn.line    { background: #53cf48; }


.share-btn-popup {
  color: #ffffff;
  border: none;
  padding: 10px;
  outline: none;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  width:150px;
  margin-bottom:10px;
  display: block;
}
.share-btn-popup:focus,
.share-btn-popup:hover {
  text-decoration: none !important;
  opacity: 1 !important;
  color: #fff !important;
}
.share-btn-popup:active {
  color: #e2e2e2 !important;
}
.share-btn-popup.copy-link   { background: #918c7c; }
.share-btn-popup.twitter     { background: #6cbfe0; }
.share-btn-popup.google-plus { background: #dd4b39; }
.share-btn-popup.facebook    { background: #3B5998; }
.share-btn-popup.stumbleupon { background: #EB4823; }
.share-btn-popup.reddit      { background: #ff5700; }
.share-btn-popup.hackernews  { background: #ff6600; }
.share-btn-popup.linkedin    { background: #4875B4; }
.share-btn-popup.email       { background: #444444; }
.share-btn-popup.whatsapp    { background: #3AC371; }
.share-btn-popup.telegram    { background: #419fd9; }
.share-btn-popup.line    { background: #53cf48; }

.copy-btn-popup{
    background: #205B95;
    padding: 10px;
    margin-bottom:10px;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    text-align:left;
    width: 150px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    position: relative;
}


.payment_method:disabled{
    cursor: not-allowed;
}

.notif-btn {
  background: #C30F42;
  cursor: pointer;
  outline: 0;
  border: none;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-animation: pulse 1.6s infinite;
  animation: pulse 1.6s infinite;
}

.notif-btn:hover,
.notif-btn:active {
  background: rgba(238, 46, 45, 1);

  -webkit-animation: none;
  animation: none;
}

/* Animations */

@-webkit-keyframes pulse {

  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(238, 46, 45, .85);
    box-shadow: 0 0 0 0 rgba(238, 46, 45, .85);
  }

  70% {
    -webkit-box-shadow: 0 0 0 2em rgba(238, 46, 45, 0);
    box-shadow: 0 0 0 2em rgba(238, 46, 45, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(238, 46, 45, 0);
    box-shadow: 0 0 0 0 rgba(238, 46, 45, 0);
  }

}

@keyframes pulse {

  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(238, 46, 45, .85);
    box-shadow: 0 0 0 0 rgba(238, 46, 45, .85);
  }

  70% {
    -webkit-box-shadow: 0 0 0 2em rgba(238, 46, 45, 0);
    box-shadow: 0 0 0 2em rgba(238, 46, 45, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(238, 46, 45, 0);
    box-shadow: 0 0 0 0 rgba(238, 46, 45, 0);
  }

}
/*button*/

/*table*/
tbody {
    vertical-align: top !important;
}

th input {
    min-width: 10px;
    max-width: 100%;
    width: 100%;
}

.list-of-history tr:nth-child(even){background-color:#FAF9FA;}
.list-of-history-left {
    padding-left: 10px;
    text-align:center;
}

.list-of-history-right {
    padding-right: 10px;
}

.list-of-history td, .list-of-history th {
  border: 1px solid #cdcdcd;
  padding: 8px;
  background:white;
}

#list-of-passenger tr:nth-child(even){background-color:#FAF9FA;}
.list-of-passenger-left {
    padding-left: 10px;
    text-align:center;
}

.list-of-passenger-right {
    padding-right: 10px;
}

#list-of-passenger td, #list-of-passenger th {
  border: 1px solid #ddd;
  padding: 8px;
}

.list-of-passenger-class tr:nth-child(even){background-color:#FAF9FA;}
.list-of-passenger-left {
    padding-left: 10px;
    text-align:center;
}

.list-of-passenger-right {
    padding-right: 10px;
}

.list-of-passenger-class td, .list-of-passenger-class th {
  border: 1px solid #ddd;
  padding: 8px;
}


.list-of-reservation tr:nth-child(even){background-color:#FAF9FA;}
.list-of-reservation-left {
    padding-left: 10px;
    text-align:center;
}

.list-of-reservation-right {
    padding-right: 10px;
}

.list-of-reservation td, .list-of-reservation th {
  border: 1px solid #ddd;
  padding: 10px;
  vertical-align: middle;
}


.list-of-table tr:nth-child(even){background-color:#FAF9FA;}
.list-of-table-left {
    padding-left: 10px;
    text-align:center;
}

.list-of-table-right {
    padding-right: 10px;
}

.list-of-table td, .list-of-table th {
  border: 1px solid #ddd;
  padding: 8px;
}

#reservation_table_mode_id th {
  position: sticky;
  top: -1px;  /* 0px if you don't have a navbar, but something is required */
  background: white;
  z-index: 9999;
}

table.dataTable{
    background:white;
}
.table-layout{
    table-layout: fixed;
}

table.dataTable.no-footer{
    border-bottom: unset;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody{
    border-bottom: unset;
}

table.dataTable thead th, table.dataTable thead td{
    border-bottom: unset;
}

.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable, .dataTables_wrapper.no-footer div.dataTables_scrollBody>table{
    background: white;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{
    background: white;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

/*table*/

/*text*/
.color-custom{
    color: white;
}
.text-btn-custom{
    color: #205B95;
}

.text-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 1s linear forwards, filling 1s ease-in forwards;
  font-size: 40px;
}

.span-change-search-ticket{
  float:left;
  color:white;
  margin-bottom:3px;
  font-size:14px;
}

.span-activity-desc {
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-description {
  max-width: 400px;
  position:relative;
}
.notes-description .text {
/*   width: 660px;  */
  position:relative;
  display: block;
}

.notes-description .show-more-height {
  height: 65px;
  overflow:hidden;
}

.faq-que{
    cursor:pointer;
}

.text-block-custom {
  bottom: 20px;
  background-color: #205B95;
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  font-size:12px;
  margin-bottom:10px;
}

.our-partner{
    width: auto;
    height:40px;
    padding-left:10px;
    padding-right:10px;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
}

.text_btn_custom{
    color:#171b26;
    cursor:pointer;
}
.text_btn_custom:hover{
    color:#205B95;
}

.badge {
    background-color: #6394F8;
    border-radius: 5px;
    color: white;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 3px 7px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.badge-notif {
    position: absolute;
    top: -20px;
    right: 35px;
    font-size:13px;
    padding: 10px 16px;
    border-radius: 21px;
    background-color: white;
    color:#171b26;
    border: 1px solid red;
}

.badge-notif2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    padding: 1px 10px 0 10px;
    background: #e04022;
    border: 1px solid white;
    border-radius: 500px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    text-align: center;
}

.badge-notif-n{
    position: absolute;
    top: -20px;
    right: -20px;
    font-size:13px;
    padding: 0px 15px;
    border-radius: 21px;
    background-color: white;
    color:#171b26;
    border: 1px solid red;
}

.status {
  width: 100%;
  padding: 15px;
  font-size: 14px;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  color: #FFF;
  transition: all .575s;
  position:fixed;
  top:0px;
  z-index:9999;
}

.status.on {
  background: rgba(66,169,128,0.9);
  color:white;
}
.status.off {
  background: rgba(253,96,79,0.9);
}

.span_link_cl{
    font-weight:600;
    cursor:pointer;
    font-size:14px;
    color:#205B95;
}

.span_link{
    font-weight:600;
    cursor:pointer;
    font-size:14px;
    color:#171b26 !important;
}
.span_link:hover{
    color:#205B95;
}

.span_link_white{
    font-weight:500;
    cursor:pointer;
    font-size:14px;
    color:white;
}
.span_link_white:hover{
    color:#205B95;
}

.detail-link{
    text-decoration: unset;
    color: #205B95;
}
.detail-link:hover{
    color: #1497BF;
    opacity: 1;
}

.cross_price {
    position: relative;
    display: inline-block;
}
.cross_price::before, .cross::after {
    content: '';
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
}
.cross_price::before {
    border-bottom: 1px solid #929292;
}
/*
.cross_price::after {
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);pny before klo mau miring

    border-bottom: 2px solid blue;
    -webkit-transform: skewY(10deg);
    transform: skewY(10deg);
}*/

.text_link_cst{
    color: #205B95;
    cursor: pointer;
    font-weight: 700;
}

.text_link_cst:hover{
    opacity: 1;
}

.text_link_cst a{
    color: #205B95;
    cursor: pointer;
    font-weight: 700;
}

.text_link_cst a:hover{
    opacity: 1;
    text-decoration: none;
}

.span-search-ticket{
  float:left;
  color:white;
  margin-bottom:3px;
  font-size:13px;
}

.span-search-txt{
  color:white;
  margin-bottom:3px;
  font-size:13px;
}

.required-txt{
    color:red;
}
.forgot-pass-login{
    color: #205B95;
    font-size:18px;
    font-weight:700;
}
/*
.notif-hover:hover{
    color: #205B95;
    opacity:1;
}
*/

.notification-hover:hover{
    color:#205B95;
}

.c-pointer{
    cursor:pointer;
}

.breadcrumb-header{
    padding-right:0px;
}

.breadcrumbs-rdx{
    font-size: 12px;
    font-weight:500;
    padding-right:10px;
    color:#a3a3a3;
    text-align: center;
}
.breadcrumb-rdx-icon{
    display: inline-block;
    height: 20px;
    width: 20px;
    line-height: 20px;
    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */
    text-align: center;
    background-color: #9B9B9B;
    color: white;
}
.breadcrumbs_flex{
    display:flex;
}
.br-active{
    color: #205B95;
}
.br-icon-active {
    background-color: #205B95;
}
.br-done{
    color: #545454;
}
.br-icon-done {
    background-color: #545454;
    color: #ffffff;
    cursor: pointer;
}

.br-book {
    color: #545454;
}
.br-icon-book {
    background-color: #545454;
}
.br-fail {
    color: #DB2B2B;
    font-weight: bold;
}
.br-icon-fail {
    background-color: #DB2B2B;
}
.br-pending {
    color: #E2BF0F;
    font-weight: bold;
}
.br-icon-pending {
    background-color: #E2BF0F;
}
.br-none {
    color: #424242;
    font-weight: bold;
}
.br-icon-none {
    background-color: #424242;
}
.br-book:hover{
    cursor: not-allowed;
}
.br-icon-book:hover {
    cursor: not-allowed;
}
.br-fail:hover{
    cursor: not-allowed;
}
.br-icon-fail:hover {
    cursor: not-allowed;
}
.br-pending:hover{
    cursor: not-allowed;
}
.br-icon-pending:hover {
    cursor: not-allowed;
}
.br-fa{
    padding-left:10px;
    display:block;
}

.count_time{
    font-size:14px;
    font-weight:700;
    color:#205B95;
}

.legs_word_break {
    display: block;
}

.price_template{
    font-size: 15px;
    font-weight: bold;
    color: #205B95;
}

.flight_type_template{
    font-weight: bold;
    font-size: 14px;
    color: #205B95;
}

.carrier_code_template{
    color: #205B95;
    font-weight: 700;
}

.text-block-img {
  position: absolute;
  top: 50%;
  left: 50%;
  padding:15px;
  transform: translate(-50%, -50%);
}

.link_popular{
    font-size:14px;
    padding-left:10px;
    padding-right:10px;
    font-weight:500;
    cursor:pointer;
}

.link_popular.popular_activities.active{
    color:#205B95;
    border-bottom: 2px solid #205B95;
}

.text_title_user{
    margin-left:5px;
    background:gold;
    font-size:13px;
    color:#171b26;
    padding:3px 10px;
    display:unset;
    border-radius:5px;
}
/*text*/

/*image*/
.picture_identity_customer:hover{
    border:1px solid #205B95 !important;
}

.image-rounded-profile {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center right;
  border: 1px solid;
}

.image-rounded-profile2 {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 1px solid #cdcdcd;
  object-fit: cover;
  object-position: center right;
  border: 1px solid;
}

.image-square-icon {
  background: white;
  font-size: 18px;
  text-align: center;
  margin-right: 10px;
  display:inline-block;
  padding:10.8px;
}

.activity-detail-images {
    height: 187px;
    padding: 0px;
}

.activity-image-thumbnail {
    margin: 0px;
}

.picture_passenger_small{
    width:auto;
    height:50px;
    border-radius:5px;
}

.picture_passenger_agent{
    width:auto;
    height:60px;
    border-radius: 10px;
}

@media (min-width: 575px) {
    .picture_passenger_agent{
        width:auto;
        height:60px;
    }
}

.icon-search-ticket {
  padding: 14px;
  background: white;
  color: #7F7F7F;
  width: 45px;
  height: 43px;
  text-align: center;
}

.bg-img {
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.img-event-detail {
    width: auto;
    height: 120px;
    background-size:cover;
    background-position:50% 50%;
}
.img-fluid{
  border-radius:5px;
}

.dark-img {
  position: relative;
  border-radius:5px;
}

.dark-img img {
  display: block;
  width: 100%;
}

.dark-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.img-hotel-search {
    width: auto;
    min-height: 200px;
    height: 100%;
    background-size:cover;
    background-position:50% 50%;
}
.img-hotel-search-c {
    width: auto;
    height: 150px;
    background-size:cover;
    background-position:50% 50%;
}
.img-hotel-detail {
    width: auto;
    height: 120px;
    background-size:cover;
    background-position:50% 50%;
}
.img_hotel_smallbot{
    margin-right:15px;
    border-radius: 5px;
    cursor:pointer;
    border:1px solid #cdcdcd;
}

.img_hotel_smallbot:hover{
    border:1px solid #205B95;
}

.picture_identity_customer{
    width:80px;
    height:80px;
    object-fit: cover;
    border:1px solid #cdcdcd;
    cursor:pointer;
}
/*image*/

/*line*/
.single_border_custom_top{
    border-top:5px solid #205B95;
}
.single_border_custom_right{
    border-right:5px solid #205B95;
}
.single_border_custom_bottom{
    border-bottom:5px solid #205B95;
}
.single_border_custom_left{
    border-left:5px solid #205B95;
}

.border_custom_top{
    border-top:10px solid #205B95;
    border-right:1px solid #cdcdcd;
    border-bottom:1px solid #cdcdcd;
    border-left:1px solid #cdcdcd;
}
.border_custom_right{
    border-top:1px solid #cdcdcd;
    border-right:10px solid #205B95;
    border-bottom:1px solid #cdcdcd;
    border-left:1px solid #cdcdcd;
}
.border_custom_bottom{
    border-top:1px solid #cdcdcd;
    border-right:1px solid #cdcdcd;
    border-bottom:10px solid #205B95;
    border-left:1px solid #cdcdcd;
}
.border_custom_left{
    border-top:1px solid #cdcdcd;
    border-right:1px solid #cdcdcd;
    border-bottom:1px solid #cdcdcd;
    border-left:10px solid #205B95;
}

.border_custom_top_red{
    border-top:5px solid red !important;
    border-right:1px solid #cdcdcd;
    border-bottom:1px solid #cdcdcd;
    border-left:1px solid #cdcdcd;
}
.border_custom_right_red{
    border-top:1px solid #cdcdcd;
    border-right:5px solid red !important;
    border-bottom:1px solid #cdcdcd;
    border-left:1px solid #cdcdcd;
}
.border_custom_bottom_red{
    border-top:1px solid #cdcdcd;
    border-right:1px solid #cdcdcd;
    border-bottom:5px solid red !important;
    border-left:1px solid #cdcdcd;
}
.border_custom_left_red{
    border-top:1px solid #cdcdcd;
    border-right:1px solid #cdcdcd;
    border-bottom:1px solid #cdcdcd;
    border-left:5px solid red !important;
}

.border_custom_top_green{
    border-top:5px solid green !important;
    border-right:1px solid #cdcdcd;
    border-bottom:1px solid #cdcdcd;
    border-left:1px solid #cdcdcd;
}
.border_custom_right_green{
    border-top:1px solid #cdcdcd;
    border-right:5px solid green !important;
    border-bottom:1px solid #cdcdcd;
    border-left:1px solid #cdcdcd;
}
.border_custom_bottom_green{
    border-top:1px solid #cdcdcd;
    border-right:1px solid #cdcdcd;
    border-bottom:5px solid green !important;
    border-left:1px solid #cdcdcd;
}
.border_custom_left_green{
    border-top:1px solid #cdcdcd;
    border-right:1px solid #cdcdcd;
    border-bottom:1px solid #cdcdcd;
    border-left:5px solid green !important;
}
/*line*/

/*modal*/
.modal-obs{
    top:0px !important;
}

.modal{
    padding-right:unset !important;
}

.modal_custom_fixed{
    position: fixed !important;
    right:0px !important;
    margin:0px !important;
    width: 600px;
    max-width: 600px;
    height:100% !important;
    z-index: 1050;
}


.modal_custom_fixed .modal-content{
    height:100% !important;
    border-radius:0px;
}

.modal_custom_fixed .modal-header{
    background-color: white;
    display: block !important;
    padding: 15px 15px 0px 15px;
}

.modal_custom_fixed .modal-body{
    background-color: #f7f7f7;
    overflow:auto;
}

.modal_custom_fixed .modal-title{
    color:#171b26;
    text-align:left;
}

.overlay_modal_custom {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.1);
  z-index: 1000;
  cursor:pointer;
}

/*
.modal-backdrop{
    z-index: 999;
}
*/

.dropdown-menu{
    width: 100% !important;
    max-height: 470px !important;
    overflow:auto;
    left: 0px !important;
}

.modal-header{
    background-color:white;
}
.modal-title{
    color:#171b26;
}

.box-getbooking{
    float:right;
    overflow: hidden;
    background: #f0e68c;
    display:none;
    position:relative;
    z-index:1002;
}

/* Add padding and border to inner content
for better animation effect */
.box-getbooking-inner{
    width: 600px;
    height: 100%;
    padding: 0px 15px 0px 15px;
    background: rgba(255, 255, 255, 1);
    border:1px solid #cdcdcd;
    color:#171b26;
    z-index:1002;
    position: fixed;
    top:0px;
    bottom:0px;
    right:0px;
    overflow:auto;
    transition: 0.4s;
}


.overlay_box_getbooking {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  cursor: pointer;
}

.box-getbooking-fv{
    float:right;
    overflow: hidden;
    background: #f0e68c;
    display:none;
    position:relative;
    z-index:9999999;
}

/* Add padding and border to inner content
for better animation effect */
.box-getbooking-fv-inner{
    width: 600px;
    height: 100%;
    padding: 0px 15px 0px 15px;
    background: rgba(255, 255, 255, 1);
    border:1px solid #cdcdcd;
    color:#171b26;
    z-index:1002;
    position: fixed;
    top:0px;
    bottom:0px;
    right:0px;
    overflow:auto;
    transition: 0.4s;
}

.overlay_box_getbooking_fv {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  cursor: pointer;
}

.box-passenger-db{
    float:right;
    overflow: hidden;
    background: #f0e68c;
    display:none;
    position:relative;
    z-index:1041;
}

/* Add padding and border to inner content
for better animation effect */
.box-passenger-db-inner{
    width: 600px;
    height: 100%;
    padding: 0px 15px 0px 15px;
    background: rgba(255, 255, 255, 1);
    border:1px solid #cdcdcd;
    color:#171b26;
    z-index:1001;
    position: fixed;
    top:0px;
    bottom:0px;
    right:0px;
    overflow:auto;
    transition: 0.4s;
}

.overlay_box_passenger_db {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  cursor: pointer;
}

.overlay_box_menu {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  cursor: pointer;
}
/*modal*/


/*box*/
.hotel-city{
    width:250px;
    height:250px;
}

.activity-description-thumbnail {
    margin: 0px;
    padding: 5px 10px 15px 10px;
    color: #333;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: content-box;
}

.panel_activity {
    position:relative;
    border: none;
    background-color: #ececec;
    padding: 0px;
    text-align: left;
    margin: 15px;
    overflow: hidden;
}

.panel_activity:after, .panel_activity:before {
    position:absolute;
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.panel_activity:after {
    content:'\A';
    width:100%; height:100%;
    top:0; left:0;
    background: rgba(241, 90, 34, 1);
}
.panel_activity:before {
    content: attr(data-content-1) '\A ' attr(data-content-2);
    white-space: pre-wrap;
    width: 80%;
    color: white;
    z-index: 1;
    top: 35%;
    left: 10%;
    text-align: center;
}

.panel_activity:hover:after, .panel_activity:hover:before {
    opacity:1;
}


.placeholder {
    margin: 0 auto;
    max-width: 200px;
    min-height: 100px;
    background-color: #eee;
}
@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: darkgray;
    background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: inherit;
    position: relative;
}

.boxPlaceholder{
    background-color:white;
    padding:10px;
    margin-bottom:15px;
    border:1px solid #cdcdcd;
}

.labelPlaceholder{
    margin-bottom:unset;
}

.form-select-2 {
  width: 100%;
  height: 40px;
}


.form-select-2 .nice-select .list{
    border: 1px solid #205B95;
    width: 100%;
}
/*
.form-select-2 .nice-select .list .option {
    white-space: normal;
    float: left;
    width: 100%;
    height: auto;
    word-wrap: break-word;
    border-top:1px solid #cdcdcd;
    min-height:50px;
    align-items: center;
    display: flex;
}
*/

.form-select-2 .nice-select .list .option.selected{
    color: #205B95;
    font-weight:600;
}

.form-select-2 .nice-select .list .option:hover{
    color: #205B95 !important;
    background:#f7f7f7;
    font-weight:600;
}

.form-control-custom {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 5px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-login-control:focus {
    color:#171b26;
}

.form-control:focus {
  border: 1px solid #205B95;
}

.form-select {
    height: 43px;
    width: 100%;
    margin-bottom: 15px;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.form-pd-border{
    padding:15px;
    border-radius:5px;
    border: 1px solid #cdcdcd;
    margin-bottom:15px;
}

.input-container-search-ticket {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom:5px;
}

.change_search_area {
    padding: 10px 0px 9px 0px;
    background: white;
    border: 1px solid #cdcdcd;
    position: sticky;
    top: -1px;
    z-index: 998;
}
.change_search_n{
    padding: 15px 15px 10px 15px;
    background: white !important;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
    margin-bottom:15px;
}
.change_search_div{
    position:sticky;
    top: -5px;
    z-index: 98;
}

.search-area-pcw{
    padding-top:30px;
    padding-bottom:40px;
}

.change-search-area-pcw{
    padding-top:30px;
}

.section_change_search{
    position: sticky;
    top: -1px;
    z-index: 998;
    padding-top:30px;
}

.box-notification{
    float:right;
    overflow: hidden;
    background: #f0e68c;
    display:none;
    position:relative;
    z-index:9999;
}

.box-notification-inner{
    width: 600px;
    padding: 0px 15px 0px 15px;
    background: rgba(255, 255, 255, 1);
    border:1px solid #cdcdcd;
    color:#171b26;
    z-index:9999;
    position: fixed;
    top:0px;
    bottom:0px;
    right:0px;
    overflow:auto;
    transition: 0.4s;
}

.box-sticky-hotel{
    background-color:white;
    border: 1px solid #cdcdcd;
    padding-right:20px;
    margin-bottom:15px;
}
.box-date-hotel{
    background-color:#205B95;
    margin-bottom:15px;
}

.passenger_div {
    background-color: white;
    padding: 15px;
    cursor: pointer;
    border: 1px solid #cdcdcd;
}

.voucher_div {
    background-color: white;
    text-align:left;
    padding: 10px;
    margin-top: 15px;
    position: relative;
    z-index: 5;
}

.sorting-box{
    background-color:white;
    padding:10px;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
}
.sorting-box-b{
    background-color:white;
    padding:0px 10px 0px 0px;
    margin-bottom:15px;
    border:1px solid #cdcdcd;
}
.sorting-box-b:hover{
    border:1px solid #205B95;
    z-index: 9;
}

.search-box-result{
    margin-top:15px;
    background-color:white;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
    border:1px solid #ffffff;
    padding:15px;
}
.search-box-result:hover{
    border:1px solid #205B95 !important;
}

.search-box-hotel{
    margin-top:15px;
    background-color:white;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
}
.search-box-hotel:hover{
    border:1px solid #205B95 !important;
}

.detail-hotel-box{
    margin-top:15px;
    background-color:white;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
    border:1px solid #cdcdcd;
    padding:0px 15px;
}
.detail-hotel-box:hover{
    border:1px solid #205B95;
}

.detail-event-box{
    background-color:white;
    padding:0px 15px;
    margin-bottom:15px;
    border:1px solid #cdcdcd;
    border-radius: 5px;
}
.detail-event-box:hover{
    border:1px solid #205B95;
}
.detail-event-box-sold{
    background-color:white;
    padding:0px 15px;
    margin-bottom:15px;
    border:1px solid #cdcdcd;
    border-radius: 5px;
    cursor:not-allowed;
}


.sticky-hotel-active{
    border-bottom: 3px solid #205B95;
    color: #205B95;
    font-weight: bold;
}
.sticky-event-active{
  background: #205B95;
  color:white;
}
.sticky-activity-active{
    border-bottom: 3px solid #205B95;
    color: #205B95;
    font-weight: bold;
}
.sticky-tour-active{
    border-bottom: 3px solid #205B95;
    color: #205B95;
    font-weight: bold;
}

/*ALERT NOTIFICATION*/
.alert-area {
  position: fixed;
  top: 5px;
  left: 20px;
  right: 20px;
  z-index:10000000;
}

.alert-box {
  font-size: 16px;
  color: white;
  background: rgba(255, 0, 60, 0.9);
  line-height: 1.3em;
  padding: 10px 15px;
  margin: 5px 10px;
  position: relative;
  border-radius: 5px;
  transition: opacity 0.5s ease-in;
}

.alert-box.hide {
  opacity: 0;
}

.alert-box-success {
  font-size: 16px;
  color: white;
  background: rgba(85, 255, 0, 0.9);
  line-height: 1.3em;
  padding: 10px 15px;
  margin: 5px 10px;
  position: relative;
  border-radius: 5px;
  transition: opacity 0.5s ease-in;
}

.alert-box-success.hide {
  opacity: 0;
}

.alert-close {
  background: transparent;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 15px;
  right: 15px;
}

.alert-close:before,
.alert-close:after {
  content: '';
  width: 15px;
  border-top: solid 2px white;
  position: absolute;
  top: 5px;
  right: -1px;
  display: block;
}

.alert-close:before {
  transform: rotate(45deg);
}

.alert-close:after {
  transform: rotate(135deg);
}

.alert-close:hover:before,
.alert-close:hover:after {
  border-top: solid 2px #d8d8d8;
}
/*box*/

/*style*/
.notification-pc{
    display: inline-block !important;
}

.hover_name:hover {
    color: #205B95 !important;
}

.activity-detail-description {
    background-color: #205B95;
    color: white;
    padding: 20px;
    height: 187px;
}

.progress_kuota {
  padding:0;
  width:100%;
  height:30px;
  overflow:hidden;
  background:#e5e5e5;
  border:1px solid darkgray;
  border-radius: 5px;
}

.bar_kuota {
  position:relative;
  float:left;
  min-width:0%;
  height:100%;
  background:cornflowerblue;
}

.percent_kuota {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  font-family:tahoma,arial,helvetica;
  font-size:14px;
  font-weight:bold;
  color:#171b26;
}

.img-phc-priksain{
    background: white;
    width: auto;
    height:70px;
    border-radius:5px;
}

@media (max-width: 575px) {
    .img-phc-priksain{
        background: white;
        width: auto;
        height:70px;
    }
}

.prev-next-form{
    width:110px;
    height:46px;
    padding-left:15px !important;
    padding-right:15px !important;
    line-height:30px !important;
}

@media (max-width: 481px) {
    .prev-next-form{
        width:auto;
        height:60px;
    }
}

.tab-content-activity {
    border: none;
    border-top: 1px solid #d9d9d9;
    padding: 20px !important;
    font-size:13px !important;
    text-align: justify;
}

.ticket-layout {
  min-height: 150px;
  margin: 5px auto;
  position: relative;
  transition: all 300ms cubic-bezier(0.03, 0.98, 0.53, 0.99) 0s;
  background: linear-gradient(
    to right,
    #474747,
    #474747,
    #474747,
    #474747
  );
  border-radius: 20px;
  padding: 5px;
}

.ticket-layout:before,
.ticket-layout:after {
  content: '';
  display: block;
  position: absolute;
  top: 60px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 2;
  background-color: white;
}

.ticket-layout:before {
  border: 5px solid #474747;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(-45deg);
  left: -20px;
}

.ticket-layout:after {
  border: 5px solid #474747;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(135deg);
  right: -20px;
}

.ticket-content-wrapper {
  width: 100%;
  min-height: 150px;
  position: relative;
  background: white;
  border-radius: 5px;
  padding: 15px 50px;
}

ul.progress_tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.progress_tabs li{
    background: white;
    color:#171b26;
    display: inline-block;
    padding: 15px 15px 10px 15px;
    cursor: pointer;
    margin:10px 5px;
    border:1px solid #cdcdcd;
}

ul.progress_tabs li:hover{
   color:#205B95;
}

li.progress_tabs-link label{
    cursor: pointer;
    text-align:center;
}

ul.progress_tabs li.current{
    /*background: rgba(0,0,0,0.5);*/
    border-bottom: 5px solid #205B95;
    color: #205B95;
}

ul.progress_tabs li.current .image-rounded-icon{
    background: #205B95 !important;
}

.progress_tabs-content{
    display: none;
    /*background: rgba(0,0,0,0.5);*/
    padding: 20px;
}

.progress_tabs-content.current{
    display: inherit;
}

.progresses_icon{
    font-size: 12px;
    font-weight:500;
    padding-right:10px;
    color:#9B9B9B;
    text-align: center;
}
.progress_icon{
    display: inline-block;
    height: 20px;
    width: 20px;
    line-height: 20px;
    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */
    text-align: center;
    background-color: #9B9B9B;
    color: white;
}
.progress_flex{
    display:flex;
    padding-top:5px;
}
.progress_icon-active {
    background-color: #205B95;
}

.left-to-right{
    text-align:right;
}

@media (max-width: 991px) and (min-width: 576px) {
    .left-to-right{
        text-align:left !important;
    }
}

.price_bottom{
    position:absolute;
    bottom:15px;
}

@media (max-width: 991px) {
    .price_bottom{
        position:unset;
        bottom:unset;
    }
}

.chartjs-size-monitor {
    position:relative;
    overflow:auto;
}

.eventstep li {
  display: flex;
}

.eventstep time {
  position: relative;
  width:230px;
  font-weight:600;
  font-size:14px;
  padding: 0 1.5em;  }

.eventstep time::after {
   content: "";
   position: absolute;
   z-index: 2;
   right: 0;
   top: 0;
   transform: translateX(50%);
   border-radius: 50%;
   background: #fff;
   border: 1px #ccc solid;
   width: .8em;
   height: .8em;
}


.eventstep span {
  padding: 0 1.5em 1.5em 1.5em;
  position: relative;
  width: 100%;
}

.eventstep span::before {
   content: "";
   position: absolute;
   z-index: 1;
   left: 0;
   height: 100%;
   border-left: 1px #ccc solid;
}

.eventstep strong {
   display: block;
   font-size:15px;
   font-weight: bold;
}

.eventstep { margin: 1em; width: 100%; }
.eventstep,
.eventstep *::before,
.eventstep *::after { box-sizing: border-box; }

.sk-circle {
  margin: 30px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #333;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.overlay-bg-sold {
  background: rgba(4, 9, 30, 0.4);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  opacity: 0.5;
}

#overlay-search-box {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 3;
  cursor: pointer;
}

#overlay-div-box {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
}

.overlay-div-opt {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
}

.bold{font-weight:bold;}
.time{position:absolute; left:-110px;}
.timeline-wrapper {
    min-width: 400px;
    font-size: 13px;
    /*border: 1px solid #CCC;*/
}

.t7{
    top: 7px;
}
.mt5{
    margin-top:5px;
}
.mt10{
    margin-top:10px;
}
.mb5{
    margin-bottom:5px;
}
.mb10{
    margin-bottom:10px;
}
.mr5{
    margin-right:5px;
}
.mr10{
    margin-right:10px;
}
.ml5{
    margin-left:5px;
}
.ml10{
    margin-left:10px;
}
.pt3{
    padding-top:3px;
}
.mt3{
    margin-top:3px;
}
.pt5{
    padding-top:5px;
}
.pt10{
    padding-top:10px;
}
.pb5{
    padding-bottom:5px;
}
.pb10{
    padding-bottom:10px;
}
.pt12{
    padding-top:12px;
}
.mt12{
    margin-top:12px;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes filling {
   0%, 90% { fill: #205B95;
    fill-opacity: 0; }
  100% { fill: #205B95;
    fill-opacity: 1; }
}

/*
.animate {
   display: inline;
   margin-left:10px;
   padding: 10px;
   font-size:12px;
   border: 1px solid #cdcdcd;
   border-radius: 5px;
   color:white;
}

.animate:before {
   content: 'Airline';
   -webkit-animation-name: animate;
   -webkit-animation-duration: 4s;
   animation-name: animate;
   animation-duration: 4s;
   animation-delay: 3s;
   animation-iteration-count: infinite;
}

@keyframes animate {
   0% {
       content: 'Airline';
   }
   12.5% {
       content: 'Train';
   }
   25% {
       content: 'Hotel';
   }
   37.5% {
       content: 'Activity';
   }
   50% {
       content: 'Tour';
   }
   62.5% {
       content: 'Visa';
   }
   75% {
       content: 'Passport';
   }
   87.5% {
       content: 'Group Booking';
   }
   100% {
       content: 'Airline';
   }
}
*/

.lamp {
/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #205B95, 0 0 15px #205B95, 0 0 20px #205B95, 0 0 40px #205B95, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
  text-transform: uppercase;
  letter-spacing: 4px;
}

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #205B95, 0 0 15px #205B95, 0 0 20px #205B95, 0 0 40px #205B95, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #205B95, 0 0 15px #205B95, 0 0 20px #205B95, 0 0 40px #205B95, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}

.StepProgress {
    position: relative;
    padding-left: 45px;
    list-style: none;
}
.StepProgress::before {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 13px;
    width: 10px;
    border-left: 2px solid #CCC;
}
.StepProgress-item {
    position: relative;
    counter-increment: list;
}
.StepProgress-item:not(:last-child) {
    padding-bottom: 20px;
}
.StepProgress-item::before {
    display: inline-block;
    content: '';
    position: absolute;
    left: -32px;
    height: 100%;
    width: 10px;
}
.StepProgress-item::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: -37px;
    width: 12px;
    height: 12px;
    border: 2px solid #CCC;
    border-radius: 50%;
    background-color: #FFF;
}
.StepProgress-item.is-done::before {
    border-left: 2px solid #205B95;
}
.StepProgress-item.is-done::after {
    /*content: "?";*/
    font-size: 10px;
    color: #FFF;
    text-align: center;
    border: 2px solid #205B95;
    background-color: white;
}
.StepProgress-item.is-end::after{
    font-size: 10px;
    color: #FFF;
    text-align: center;
    border: 2px solid #205B95;
    background-color: white;
}
/*.StepProgress-item.current::before {
    border-left: 2px solid green;
}
.StepProgress-item.current::after {
    content: counter(list);
    padding-top: 1px;
    width: 19px;
    height: 18px;
    top: -4px;
    left: -40px;
    font-size: 14px;
    text-align: center;
    color: green;
    border: 2px solid green;
    background-color: white;
}*/
.StepProgress strong {
    display: block;
}

.progressbar {
  margin: 0;
  padding: 0;
  counter-reset: step;
  position: relative;
  z-index:1;
}
.progressbar li {
  list-style-type: none;
  width: 20%;
  float: left;
  font-size: 14px;
  position: relative;
  text-align: center;
}
.progressbar li:before {
  width: 40px;
  height: 40px;
  content: counter(step);
  counter-increment: step;
  line-height: 32px;
  border: 4px solid #B6B6B6;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  position:relative;
  z-index:3;
}
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: 2;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color: #205B95;
}
.progressbar li.active:before {
  border-color: #205B95;
  background-color:#205B95;
  color:white;
}

.progressbar li.current:before {
  width: 40px;
  height: 40px;
  content: counter(step);
  counter-increment: step;
  line-height: 32px;
  border: 4px solid #205B95;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  position:relative;
  z-index:3;
}
.progressbar li.fail:before {
  border-color: red;
  background-color: red;
  color:white;
}
.progressbar li.active + li:after {
  background-color: #205B95;
}

.filter_general{
    padding-bottom:10px;
    cursor:pointer;
}
.filter_general:hover{
    color:#205B95;
}

.search-airlines-subheader {
    /*color: #205B95;*/
    color:#171b26;
    padding: 15px 15px 15px 15px;

    .first-col-subheader {
        padding-top: 5px;
    }
    .second-col-subheader {

    }
    .third-col-subheader {
        text-align: right;
        padding: 0px;
        display: inline-block;
    }
}

.filter-sch {
    .filter-title {
        padding: 5px 0px 0px 0px;
    }
    .filter-item {
        width: 100%;
        margin-bottom:10px;
        font-size: 12px;
        padding-left: 15px;
        padding-top: 5px;
        text-align: left;
        background-size: 20px 20px!important;
        background-position: 70px 4px!important;
        background: url(/static/tt_website/images/icon/symbol/up-icon.png) no-repeat scroll 2px 2px;
    }
}


.sort-sch {
    .sort-title {
        padding: 5px 0px 0px 0px;
    }

    .sort-item {
        width: 100%;
        padding-left: 10px;
        padding-top: 5px;
        text-align: left;

    }
    .item-asc {
        background-size: 20px 20px!important;
        background-position: 70px 4px!important;
        background: url(/static/tt_website/images/icon/symbol/up-icon.png) no-repeat scroll 2px 2px;
        margin-bottom:10px;
        font-size: 12px;
        }
     .item-desc {
        background-size: 20px 20px!important;
        background-position: 70px 4px!important;
        background: url(/static/tt_website/images/icon/symbol/up-icon.png) no-repeat scroll 2px 2px;
        margin-bottom:10px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 992px) {
  /* For desktop: */
  .search_type {padding-right: 0;}
  .activity_sort {padding-right: 0;}
}

@media only screen and (max-width: 991px) {
  /* For desktop: */
  .search_type {padding: 0;}
  .activity_sort {padding: 0;}
}


/*color scroll
.style-scrollbar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.style-scrollbar::-webkit-scrollbar
{
	width: 10px;
	height: 8px;
	background-color: #F5F5F5;
}

.style-scrollbar::-webkit-scrollbar-thumb
{
	background-color: #282828;
	border: 2px solid #555555;
}
*/

.center-load-screen{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loader-rodextrip {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: url('/static/tt_website/images/gif/loading_rolling.gif') 50% 50%/200px auto no-repeat rgb(0,0,0,0.8);
	background: rgba(0,0,0,0.3);*/
	background-size:30px auto;
}

/* Three column layout */
.side-review {
  float: left;
  width: 15%;
  margin-left:10px;
  font-weight:500;
}

.middle-review {
  float: left;
  margin-left:10px;
  width: 50%;
}

/* Place text to the right */
.right-review {
  text-align: right;
}

/* The bar container */
.bar-container-review {
  width: 100%;
  background-color: #f1f1f1;
  text-align: center;
  color: white;
}

/* Individual bars */
.bar-5-review {width: 60%; height: 18px; background-color: #205B95;}
.bar-4-review {width: 30%; height: 18px; background-color: #205B95;}
.bar-3-review {width: 13%; height: 18px; background-color: #205B95;}
.bar-2-review {width: 5%; height: 18px; background-color: #205B95;}
.bar-1-review {width: 2%; height: 18px; background-color: #205B95;}

.nearby_hover:hover{
    color:#205B95;
}

.nearby_all:hover{
    color:#205B95 !important;
}


.hide{
    display: none;
}

.facility_hotel {
    margin-right:5px;
    color:#205B95;
    font-size:11px;
    word-break: break-all;
}
/*style*/

/*nice select / select2*/
.nice-select-text{
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    border-radius: 5px;
    border: unset !important;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    height: 15px !important;
    width: fit-content !important;
    line-height: 20px;
    outline: none;
    padding-left: 0px !important;
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
    white-space: nowrap;
    border-radius:0px;
    margin-bottom: 15px;
}

.form-select-btn .nice-select{
    background: transparent !important;
}

.form-select-btn .current{
    font-size: 13px;
    font-weight: 400;
    color: black;
}

.form-select .nice-select::after{
    right: 10px;
    margin-top: -3px !important;
}


.form-select-text .nice-select{
    background: transparent !important;
}

.form-select-text .current{
    font-size: 14px;
    font-weight: 700;
}

.nice-select-default {
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #cacaca;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 13px;
    font-weight: 300;
    height: 43px;
    width: 100% !important;
    line-height: 40px;
    outline: none;
    padding-left: 8px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
    white-space: nowrap;
    border-radius:0px;
    margin-bottom: 15px;
    height: 43px;
    width:100%;
}
.nice-select:after{
    height:8px;
    width:8px;
}

/*nice select / select2*/


/*responsive*/
.center_vh{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.center-div {
    border-radius: 50%;
    text-align: center;
    margin: 15px auto;
    position: relative;
}

.center-div div {
    background-color: rgb(241, 89, 34);
    display: inline-block;
    color: rgb(174, 215, 241);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -webkit-animation-name: inner-center-div;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-name: inner-center-div;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes inner-center-div {
    0% {transform: scale(1.0);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1.0);}
}

.center-div div img {
    margin-top: 25%;
}

.center-div-t {
    border-radius: 50%;
    text-align: center;
    margin: 15px auto;
    position: relative;
}

.center-div-t div {
    background-color: rgb(255, 255, 255);
    display: inline-block;
    color: rgb(174, 215, 241);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    -webkit-animation-name: inner-center-div-t;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-name: inner-center-div-t;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes inner-center-div-t {
    0% {transform: scale(1.0);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1.0);}
}

.center-div-t div img {
    margin-top: 25%;
}

.span_responsive{
    width:250px;
}

.i_responsive{
    width:250px;
}

.for-show-mobile-inb{
    display:none;
}
.for-show-website-inb{
    display:inline-block;
}

.for-show-mobile{
    display:none;
}
.for-show-website{
    display:block;
}

/*responsive*/

.single_page_bg{
    height:200px;
}

/*MEDIA*/
/*MIN WIDTH*/
@media (min-width: 1200px) {

    .owl-carousel-hotel-img .owl-item img{
        max-height:452px;
    }
    .owl-carousel-hotel-img-modal .owl-item img{
        max-height:452px;
    }
}

@media (min-width: 1200px) {

    .stripe_small_banner.show_hide_mb{
        display:block;
    }
    .stripe_small_banner.show_hide_tb{
        display:block;
    }
    .stripe_small_banner.show_hide{
        display:block;
    }

    .stripe_dynamic_page.show_hide_mb{
        display:block;
    }
    .stripe_dynamic_page.show_hide{
        display:block;
    }
}
@media (min-width: 992px) {
  .primary-myticket {
    display:block !important;
  }
  .button-filter-search-train{
    display: none;
  }
  .filter-search-train{
    display: block;
  }
  .filter-search-bus{
    display: block;
  }
  .filter-search-bus{
    display: block;
  }
  .sorting-search-train2{
    display: block;
  }
  .sorting-search-bus{
    display: block;
  }
  .button-filter-search-bus{
    display: none;
  }
  .filter-search-bus{
    display: block;
  }
}
@media (min-width: 992px) {
  .for-show-mobile-inb{
    display:none !important;
  }
  .for-show-website-inb{
    display:inline-block !important;
  }
}
@media (min-width: 992px) {
  .for-show-mobile{
    display:none !important;
  }
  .for-show-website{
    display:block !important;
  }
}

@media (min-width: 992px) {
    #info_user_search{
        display:block;
    }
}

@media (min-width: 768px) {
    .hotel_stripe_price{
        text-align:right;
        position:absolute;
        bottom:30px;
        right:0px;
    }

    .hotel_stripe_button{
        text-align:right;
        position:absolute;
        bottom:0px;
        right:0px;
    }
}
@media (min-width: 768px) {
  .br-fa {
    display:inline-flex;
  }
}
@media (min-width: 768px) {
  .alert-area {
    width: 500px;
    left: auto;
    right: 0;
  }
}
@media (min-width: 576px) {
    #phone-detail {
        display: block !important;
    }
    #email-detail {
        display: block !important;
    }
    #phone-detail-show {
        display: none !important;
    }
    #email-detail-show {
        display: none !important;
    }
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 750px;
    }
}
@media (min-width: 406px) {
  .span_icon_fixed{
    display:inline-block !important;
  }
}
@media (max-width: 400px) {
  .side-review, .middle-review {
    width: 100%;
  }
  .right-review {
    display: none;
  }
}
@media (min-width: 376px) {
  .breadcrumb-text{
    display:block !important;
  }
}

/*MAX WIDTH*/
@media (max-width: 991px) {
  .primary-myticket {
    display:none !important;
  }
  .img-one {
    margin-bottom: 45px;
  }
  .button-filter-search-train{
    display: block;
  }
  .filter-search-train{
    display: none;
  }
  .filter-search-bus{
    display: none;
  }
  .sorting-search-train2{
    display: none;
  }
  .sorting-search-bus{
    display: none;
  }
  .button-filter-search-bus{
    display: block;
  }
  .filter-search-bus{
    display: none;
  }
}
@media (max-width: 991px) {
  .for-show-mobile-inb{
    display:inline-block !important;
  }
  .for-show-website-inb{
    display:none !important;
  }
}
@media (max-width: 991px) {
  .for-show-mobile{
    display:block !important;
  }
  .for-show-website{
    display:none !important;
  }
  #response_name_hotel_div{
    display:none !important;
  }
}
@media (max-width: 991px) {
    #info_user_search{
        display:none !important;
    }
}
@media (max-width: 767px) {
  .br-fa {
    display:none !important;
  }
}
@media (max-width: 767px) {
    .change_search_area{
        position:relative !important;
        top:unset !important;
    }
    .change_search_div{
        position:relative !important;
        top:unset !important;
    }
    .nav-hotel{
        top:-2px !important;
    }

    .myticket_static_detail{
        margin: 10px 0px 10px 0px !important;
    }
}
@media (max-width: 767px) {
    .box-notification-inner{
        width: 500px;
    }

    .search_hotel_button{
        position:unset !important;
        padding:0px !important;
    }

    .checkbox_search_hotel{
        padding-left:5px !important;
    }

    .search_hotel_vendor{
        padding-right:15px !important;
    }

}
@media (max-width: 767px) {
    .li-activity {
        width: 25% !important;
        background-color: #205B95;
    }

    .activity-rooms-modal {
        margin: 0px auto;
        width: 100% !important;
    }
}
@media (max-width: 599px) {
    .box-getbooking-inner{
        width: 100vw;
    }
}
@media (max-width: 599px) {
    .box-getbooking-fv-inner{
        width: 100vw;
    }
}
@media (max-width: 599px) {
    .box-passenger-db-inner{
        width: 100vw;
    }
}
@media (max-width: 599px) {
    .modal_custom_fixed{
        width:auto;
    }
    .modal_custom_fixed .modal-body{
        width: 100vw;
    }
}
@media (max-width: 575px) {
    .table-layout{
        table-layout: unset;
    }
}
@media (max-width: 575px) {
    .count_time{
        display:block;
        width:150px;
        word-wrap:break-word;
    }

    .legs_word_break{
        display: block;
        word-wrap:break-word;
        width: 250px;
        white-space: normal;
    }

    #phone-detail {
        display: none !important;
    }
    #email-detail {
        display: none !important;
    }
    #phone-detail-show {
        display: block !important;
    }
    #email-detail-show {
        display: block !important;
    }
}
@media (max-width: 767px) {
    .owl-carousel-banner .owl-nav .owl-next{
        top: calc(50% - 20px);
    }
    .owl-carousel-banner .owl-nav .owl-prev{
        top: calc(50% - 20px);
    }
    .owl-carousel-banner .owl-nav button.owl-next{
        width: 30px !important;
        height: 40px !important;
    }
    .owl-carousel-banner .owl-nav button.owl-prev{
        width: 30px !important;
        height: 40px !important;
    }

    .owl-carousel-suggest .owl-nav .owl-next{
        top: calc(50% - 20px);
    }
    .owl-carousel-suggest .owl-nav .owl-prev{
        top: calc(50% - 20px);
    }
    .owl-carousel-suggest .owl-nav button.owl-next{
        width: 30px !important;
        height: 40px !important;
    }
    .owl-carousel-suggest .owl-nav button.owl-prev{
        width: 30px !important;
        height: 40px !important;
    }
}
@media (max-width: 575px) {
    .box-notification-inner{
        width: auto;
    }
}
@media (max-width: 425px) {

    /*BIG BANNER Style #1-2*/
    .big_banner_home{
        max-height:130px !important;
    }
    .owl-carousel-banner.owl-drag .owl-item{
        min-height:80px !important;
        border-radius:5px;
    }
    .owl-carousel-banner .owl-stage-outer{
        min-height:80px !important;
        border-radius:5px;
    }
    .owl-carousel-banner .owl-item img{
        max-height:130px !important;
        border-radius:5px;
    }
    /**/

    /*SMALL BANNER 500 Style #1-2
    .owl-carousel-suggest.owl-drag .owl-item{
        height:370px !important;
        border-radius:5px;
    }
    .owl-carousel-suggest .owl-stage-outer{
        height:370px !important;
        border-radius:5px;
    }
    .owl-carousel-suggest .owl-item img{
        height:370px !important;
        border-radius:5px;
    }
    /**/

    /*SMALL BANNER 400 Style #1-2*/
    .owl-carousel-suggest.owl-drag .owl-item{
        max-height:300px !important;
        border-radius:5px;
    }
    .owl-carousel-suggest .owl-stage-outer{
        max-height:300px !important;
        border-radius:5px;
    }
    .owl-carousel-suggest .owl-item img{
        max-height:300px !important;
        border-radius:5px;
    }
    /**/

}
@media (max-width: 425px) {
    .stripe_big_banner{
        height:120px !important;
        width:100%;
    }

    /*SMALL BANNER 500 Style #1-2
    .stripe_small_banner{
        max-height:370px !important;
        width:100%;
    }
    /**/

    /*SMALL BANNER 400 Style #1-2*/
    .stripe_small_banner{
        height:300px !important;
        width:100%;
    }
    /**/

    .stripe_small_banner.show_hide_mb{
        display:none;
    }
    .stripe_small_banner.show_hide_tb{
        display:none;
    }
    .stripe_small_banner.show_hide{
        display:none;
    }

    .stripe_dynamic_page.show_hide_mb{
        display:none;
    }
    .stripe_dynamic_page.show_hide{
        display:none;
    }
}
@media (max-width: 405px) {
  .span_icon_fixed{
    display:none !important;
  }
  .btn_icon_fixed{
    width:50px !important;
  }
}
@media (max-width: 375px) {
  .breadcrumb-text{
    display:none;
  }
}

/*MAX MIN WIDTH*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {

}
@media only screen and (min-width: 992px) and (max-width: 1199px) {

    .stripe_small_banner.show_hide_mb{
        display:block;
    }
    .stripe_small_banner.show_hide_tb{
        display:block;
    }
    .stripe_small_banner.show_hide{
        display:block;
    }

    .stripe_dynamic_page.show_hide_mb{
        display:block;
    }
    .stripe_dynamic_page.show_hide{
        display:block;
    }
}
@media (max-width: 991px) and (min-width: 768px) {

    .owl-carousel-hotel-img .owl-item img{
        max-height:400px;
    }
    .owl-carousel-hotel-img-modal .owl-item img{
        max-height:350px;
    }
}
@media (max-width: 991px) and (min-width: 768px) {

    .stripe_small_banner.show_hide_mb{
        display:block;
    }
    .stripe_small_banner.show_hide_tb{
        display:block;
    }
    .stripe_small_banner.show_hide{
        display:none;
    }

    .stripe_dynamic_page.show_hide_mb{
        display:block;
    }
    .stripe_dynamic_page.show_hide{
        display:none;
    }
}
@media (max-width: 767px) and (min-width: 576px) {

    .owl-carousel-hotel-img .owl-item img{
        max-height:250px;
    }
    .owl-carousel-hotel-img-modal .owl-item img{
        max-height:300px;
    }
}
@media (max-width: 767px) and (min-width: 576px) {

    .stripe_small_banner.show_hide_mb{
        display:block;
    }
    .stripe_small_banner.show_hide_tb{
        display:none;
    }
    .stripe_small_banner.show_hide{
        display:none;
    }

    .stripe_dynamic_page.show_hide_mb{
        display:none;
    }
    .stripe_dynamic_page.show_hide{
        display:none;
    }
}
@media (max-width: 767px) and (min-width: 481px) {
  .alert-area {
    left: 100px;
    right: 100px;
  }
}
@media (max-width: 575px) and (min-width: 426px) {

    .big_banner_home{
        max-height:180px !important;
    }
    .owl-carousel-banner.owl-drag .owl-item{
        min-height:100px !important;
        border-radius:5px;
    }
    .owl-carousel-banner .owl-stage-outer{
        min-height:100px !important;
        border-radius:5px;
    }
    .owl-carousel-banner .owl-item img{
        max-height:180px !important;
        border-radius:5px;
    }

    .owl-carousel-suggest.owl-drag .owl-item{
        max-height:242px !important;
        border-radius:5px;
    }
    .owl-carousel-suggest .owl-stage-outer{
        max-height:242px !important;
        border-radius:5px;
    }
    .owl-carousel-suggest .owl-item img{
        max-height:242px !important;
        border-radius:5px;
    }

    .owl-carousel-hotel-img .owl-item img{
        max-height:220px;
    }
    .owl-carousel-hotel-img-modal .owl-item img{
        max-height:250px;
    }
}
@media (max-width: 575px) and (min-width: 426px) {
    .stripe_big_banner{
        height:150px !important;
        width:100%;
    }

    .stripe_small_banner.show_hide_mb{
        display:block;
    }
    .stripe_small_banner.show_hide_tb{
        display:block;
    }
    .stripe_small_banner.show_hide{
        display:none;
    }

    .stripe_dynamic_page.show_hide_mb{
        display:none;
    }
    .stripe_dynamic_page.show_hide{
        display:none;
    }
}

@media (min-width: 992px) {
  .myticket {
    display:block;
  }
  .mystickycopybot {
    display:block;
  }
  .mystickyticket {
    display:block !important;
  }
  #filter-search-flight {
    display:block !important;
  }
  #sorting-search-flight {
    display:block !important;
  }
  #sorting-search-bus {
    display:block !important;
  }
  #sorting-search-hotel{
    display:block !important;
  }
  #filter-search-train {
    display:block !important;
  }
  #filter-search-bus {
    display:block !important;
  }
  #sorting-search-train {
    display:block !important;
  }
  #sorting-search-bus {
    display:block !important;
  }
  #mybuttonsticky {
    display:none !important;
  }
  #copy_selected_pc {
    display:block !important;
  }
  #copy_selected_mb {
    display:none !important;
  }
  .my_sticky_button {
    display:none !important;
  }
  .myticket_static {
    display:block !important;
  }
  .name_hotel_search{
    padding: 10px 15px 15px 0px;
  }
}
@media (max-width: 991px) {
  .header_breadcrumb{
      position:unset !important;
      top: unset !important;
  }
  .myticket {
    display:none !important;
  }
  .mystickycopybot {
    display:none !important;
  }
  .mystickyticket {
    display:none !important;
  }
  #filter-search-flight {
    display:none !important;
  }
  #sorting-search-flight {
    display:none !important;
  }
  #sorting-search-bus {
    display:none !important;
  }
  #sorting-search-hotel {
    display:none !important;
  }
  #filter-search-train {
    display:none !important;
  }
  #filter-search-bus {
    display:none !important;
  }
  #sorting-search-train {
    display:none !important;
  }
  #sorting-search-bus {
    display:none !important;
  }
  #mybuttonsticky {
    display:block !important;
  }
  #copy_selected_pc {
    display:none !important;
  }
  #copy_selected_mb {
    display:block !important;
  }
  .my_sticky_button {
    display:block !important;
  }
  .myticket_static {
    display:none !important;
  }
  .name_hotel_search{
    padding-left:15px;
    padding-top:15px;
  }
  .sorting-box-b{
    padding:10px;
  }
}
@media (max-height: 390px) {
  #myBtnBTP {
    bottom: 12px !important;
  }
  .adminActions {
    bottom: 12px !important;
  }
  .primary-btn-ticket btn_icon_fixed my_sticky_button{
    bottom: 12px !important;
  }
  .b24-widget-button-wrapper.b24-widget-button-position-bottom-right, .b24-widget-button-wrapper.b24-widget-button-position-bottom-middle, .b24-widget-button-wrapper.b24-widget-button-position-bottom-left{
    bottom: 10px !important;
  }
  .mystickypaxs{
    bottom: 80px !important;
  }
  .mystickycopybot{
    bottom: 80px !important;
    left: 20px !important;
  }
}
@media (max-width: 575px) {
  #myBtnBTP {
    left: 15px !important;
    font-size: 18px !important;
  }
  .adminActions {
    right: 15px !important;
  }
  .mystickypaxs{
    right: 0px !important;
  }
  .mystickycopybot{
    right: 0px !important;
  }
  .main-menu{
    padding-left:0px !important;
    padding-right:0px !important;
  }
  .b24-widget-button-wrapper.b24-widget-button-position-bottom-right, .b24-widget-button-wrapper.b24-widget-button-position-bottom-middle, .b24-widget-button-wrapper.b24-widget-button-position-bottom-left{
    right: -5px !important;
    font-size: 14px !important;
  }
}
@media (min-width: 576px) {
  .step_itinerary_tour {
    display: block !important;
  }
  .row_itinerary_tour {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .step_itinerary_tour {
    display: none !important;
  }
  .row_itinerary_tour {
    display: block !important;
  }
}

@media only screen and (max-width: 483px) {
  .panel_activity {
     height: 370px;
     width: 370px;
  }
  .activity-image-thumbnail {
    height: 75% !important;
  }

  .activity-description-thumbnail {
    height: 25%;
  }
}

@media only screen and (min-width: 484px) and (max-width: 767px) {
  .panel_activity {
     height: 439px;
     width: 439px;
  }
  .activity-image-thumbnail {
    height: 80% !important;
  }

  .activity-description-thumbnail {
    height: 20%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .panel_activity {
     height: 330px;
     width: 330px;
  }
  .activity-image-thumbnail {
    height: 75% !important;
  }

  .activity-description-thumbnail {
    height: 25%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .panel_activity {
     height: 290px;
     width: 290px;
  }
  .activity-image-thumbnail {
    height: 70% !important;
  }

  .activity-description-thumbnail {
    height: 30%;
  }
}

@media only screen and (min-width: 1200px) {
  .panel_activity {
     height: 255px;
     width: 255px;
  }

  .activity-image-thumbnail {
    height: 66% !important;
  }

  .activity-description-thumbnail {
    height: 34%;
  }
}

@media (max-width: 991px) {
  #notif_pc_badge{
    display: none !important;
  }
  #notif_mb_badge{
    display: block !important;
  }
  .notification-mobile{
    display: block !important;
  }
  .notification-pc{
    display: none !important;
  }
}
@media (min-width: 992px) {
  #notif_pc_badge{
    display: block !important;
  }
  #notif_mb_badge{
    display: none !important;
  }
  .notification-mobile{
    display: none !important;
  }
  .notification-pc{
    display: inline-block !important;
  }
}
/*MEDIA*/

.checkbox_extrabed {
    margin-right: 5px;
}

.col-extrabed {
    height: 57px;
    padding-top: 10px;
    font-size: 14px;
}

.room_field {
    border: 1px solid #ddd;
    padding: 20px;
}

.btn-add-room {
    background: white;
    color: #444;
    border-radius: 5px;
    border: 2px solid #205B95;
}

.activity-price-container {
    background-color: #f5f5f5;
    padding:10px 10px 10px 20px;
    font-size: 12px;
    color: #444;
}

.price-itinerary-activity {
    font-size:12px;
    background-color: #f5f5f5;
    padding: 10px;
    border: 1px solid #ddd;
    position: relative;
    top: 10px;
}

.container-review-activity {
    background-color: #f5f5f5;
    padding: 20px;
    margin-bottom:15px;
    font-size:13px;
}

.header-review-activity {
    background-color: #205B95;
    color: white;
    margin: -20px -20px 20px -20px;
    padding: 8px;
}

.centerModal20 {
    top: 20%;
    bottom: 20%;
}

.maxwidth100 table {
    width:100% !important;
}

/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: 'Molle', cursive;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}


/*owl carousel*/
.owl-theme .owl-nav [class*=owl-] {
    font-size: 20px;
    margin: 0px;
    padding: 5px;
    background: transparent;
    text-shadow: unset;
    display: inline-block;
    cursor: pointer;
    border-radius: 0px;
}
.owl-theme .owl-nav{
    margin-top:0px;
}
.owl-theme .owl-nav .disabled{
    background: rgba(200,200,200,1) !important;
    text-shadow: unset !important;
    cursor: unset !important;
}
.owl-theme .owl-nav .disabled:hover i{
    background: transparent !important;
    text-shadow: unset !important;
    color: white !important;
    cursor: unset;
}

.owl-theme .owl-dots .owl-dot span{
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  width: 20px;
  height: 5px;
  margin-left: 2px;
  margin-right: 2px;
  background: #ccc;
  border:none;
}
/*big banner*/

.owl-carousel-banner .owl-nav button.owl-prev{
    background: rgba(30,30,30,0.5);
    color:#171b26;
    width: 40px;
    height: 60px;
}
.owl-carousel-banner .owl-nav button.owl-prev i{
    color: white;
}
.owl-carousel-banner .owl-nav button.owl-prev:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
    color: gray;
}
.owl-carousel-banner .owl-nav button.owl-prev:hover i{
    text-shadow: unset;
    color: white;
}

.owl-carousel-banner .owl-nav button.owl-next{
    background: rgba(30,30,30,0.5);
    color:#171b26;
    width: 40px;
    height: 60px;
}
.owl-carousel-banner .owl-nav button.owl-next i{
    color: white;
}
.owl-carousel-banner .owl-nav button.owl-next:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
    color: gray;
}
.owl-carousel-banner .owl-nav button.owl-next:hover i{
    text-shadow: unset;
    color: white;
}

/*small banner*/
.owl-carousel-suggest .owl-nav button.owl-prev{
    background: rgba(30,30,30,0.5);
    color:#171b26;
    width: 40px;
    height: 60px;
}
.owl-carousel-suggest .owl-nav button.owl-prev i{
    color: white;
}
.owl-carousel-suggest .owl-nav button.owl-prev:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
    color: gray;
}
.owl-carousel-suggest .owl-nav button.owl-prev:hover i{
    text-shadow: unset;
    color: white;
}

.owl-carousel-suggest .owl-nav button.owl-next{
    background: rgba(30,30,30,0.5);
    color:#171b26;
    width: 40px;
    height: 60px;
}
.owl-carousel-suggest .owl-nav button.owl-next i{
    color: white;
}
.owl-carousel-suggest .owl-nav button.owl-next:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
    color: gray;
}
.owl-carousel-suggest .owl-nav button.owl-next:hover i{
    text-shadow: unset;
    color: white;
}


/*dynamic*/
.owl-carousel-login .owl-nav button.owl-prev{
    background: rgba(120,120,120,0.5) !important;
    color:#171b26 !important;
    width: 35px;
    height: 35px;
    margin: 0px;
}
.owl-carousel-login .owl-nav button.owl-prev i{
    color:#171b26 !important;
}
.owl-carousel-login .owl-nav button.owl-prev:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5) !important;
}
.owl-carousel-login .owl-nav button.owl-prev:hover i{
    text-shadow: unset;
    color: white;
}

.owl-carousel-login .owl-nav button.owl-next{
    background: rgba(120,120,120,0.5) !important;
    color:#171b26 !important;
    width: 35px;
    height: 35px;
    margin: 0px;
}
.owl-carousel-login .owl-nav button.owl-next i{
    color:#171b26 !important;
}
.owl-carousel-login .owl-nav button.owl-next:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5) !important;
}
.owl-carousel-login .owl-nav button.owl-next:hover i{
    text-shadow: unset;
    color: white !important;
}

.owl-controls .owl-buttons
{
    width: 100%;
    position: absolute;
    top: 50%;
}


/*activity img*/
.owl-carousel-activity-img .owl-nav button.owl-prev{
    background: rgba(200,200,200,0.7);
    color:#171b26;
    width:40px;
    height: 60px;
}
.owl-carousel-activity-img .owl-nav button.owl-prev i{
    color:#171b26;
}
.owl-carousel-activity-img .owl-nav button.owl-prev:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.7);
}
.owl-carousel-activity-img .owl-nav button.owl-prev:hover i{
    text-shadow: unset;
    color: white;
}

.owl-carousel-activity-img .owl-nav button.owl-next{
    background: rgba(200,200,200,0.7);
    color:#171b26;
    width: 40px;
    height: 60px;
}
.owl-carousel-activity-img .owl-nav button.owl-next i{
    color:#171b26;
}
.owl-carousel-activity-img .owl-nav button.owl-next:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
}
.owl-carousel-activity-img .owl-nav button.owl-next:hover i{
    text-shadow: unset;
    color: white;
}


/*hotel img*/
.owl-carousel-hotel-img .owl-nav button.owl-prev{
    background: rgba(200,200,200,0.7);
    color:#171b26;
    width:30px;
    height: 100px;
}
.owl-carousel-hotel-img .owl-nav button.owl-prev i{
    color:#171b26;
}
.owl-carousel-hotel-img .owl-nav button.owl-prev:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.7);
}
.owl-carousel-hotel-img .owl-nav button.owl-prev:hover i{
    text-shadow: unset;
    color: white;
}

.owl-carousel-hotel-img .owl-nav button.owl-next{
    background: rgba(200,200,200,0.7);
    color:#171b26;
    width: 30px;
    height: 100px;
}
.owl-carousel-hotel-img .owl-nav button.owl-next i{
    color:#171b26;
}
.owl-carousel-hotel-img .owl-nav button.owl-next:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
}
.owl-carousel-hotel-img .owl-nav button.owl-next:hover i{
    text-shadow: unset;
    color: white;
}

/*hotel modal img*/
.owl-carousel-hotel-img-modal .owl-nav button.owl-prev{
    background: rgba(200,200,200,0.7);
    color:#171b26;
    width: 30px;
    height: 100px;
}
.owl-carousel-hotel-img-modal .owl-nav button.owl-prev i{
    color:#171b26;
}
.owl-carousel-hotel-img-modal .owl-nav button.owl-prev:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
    color: gray;
}
.owl-carousel-hotel-img-modal .owl-nav button.owl-prev:hover i{
    text-shadow: unset;
    color: white;
}

.owl-carousel-hotel-img-modal .owl-nav button.owl-next{
    background: rgba(200,200,200,0.7);
    color:#171b26;
    width: 30px;
    height: 100px;
}
.owl-carousel-hotel-img-modal .owl-nav button.owl-next i{
    color:#171b26;
}
.owl-carousel-hotel-img-modal .owl-nav button.owl-next:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
    color: gray;
}
.owl-carousel-hotel-img-modal .owl-nav button.owl-next:hover i{
    text-shadow: unset;
    color: white;
}


/*tour img*/
.owl-carousel-tour-img .owl-nav button.owl-prev{
    background: rgba(120,120,120,0.5);
    color: white;
    width:35px;
    height: 60px;
}
.owl-carousel-tour-img .owl-nav button.owl-prev i{
    color: white;
}
.owl-carousel-tour-img .owl-nav button.owl-prev:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
}
.owl-carousel-tour-img .owl-nav button.owl-prev:hover i{
    text-shadow: unset;
    color: white;
}

.owl-carousel-tour-img .owl-nav button.owl-next{
    background: rgba(120,120,120,0.5);
    color: white;
    width:35px;
    height: 60px;
}
.owl-carousel-tour-img .owl-nav button.owl-next i{
    color: white;
}
.owl-carousel-tour-img .owl-nav button.owl-next:hover{
    text-shadow: unset;
    background: rgba(30,30,30,0.5);
}
.owl-carousel-tour-img .owl-nav button.owl-next:hover i{
    text-shadow: unset;
    color: white;
}

.change_search_bg{
    padding:15px 0px 15px 0px;
    background:white;
    border-top:1px solid #cdcdcd;
    border-bottom:1px solid #cdcdcd;
    z-index:90;
    position:relative;
}

.sign_in_up{
    text-align:left;
}
@media (max-width: 991px) {
    .sign_in_up{
        text-align:left;
        padding-top:15px;
    }
}


.icon-button-notif {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  color: #333333;
  background: transparent;
  border: none;
  outline: none;
  border-radius: 50%;
}

.icon-button-notif:hover {
  cursor: pointer;
}

.icon-button__badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 15px;
  height: 15px;
  background: red;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

/* menu setting new */
ul.main_menu_tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
    background:white''
}
ul.main_menu_tabs li{
    background: white;
    color:#171b26;
    display: inline-block;
    padding: 15px;
    cursor: pointer;
    border:1px solid #cdcdcd;
}

li.main_menu_link label{
    cursor: pointer;
    text-align:center;
}

ul.main_menu_tabs li.current{
    /*background: rgba(0,0,0,0.5);*/
    background: #205B95;
}

ul.main_menu_tabs li.current h5{
    color: white;
}

.main_menu_content{
    display: none;
    /*background: rgba(0,0,0,0.5);*/
}

.main_menu_content.current{
    display: inherit;
}

ul.main_menu_tabs li{
    width:100%;
}

/* sub menu setting new */
ul.sub_menu_tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
    width: 100%;
}
ul.sub_menu_tabs li{
    background: white;
    color:#171b26;
    display: inline-block;
    padding: 15px;
    cursor: pointer;
    border:1px solid #cdcdcd;
    margin-bottom:15px;
}

ul.sub_menu_tabs li{
    width:100%;
}

li.sub_menu_link label{
    cursor: pointer;
    text-align:center;
}

ul.sub_menu_tabs li.current{
    /*background: rgba(0,0,0,0.5);*/
    border: 1px solid #205B95;
}

ul.sub_menu_tabs li.current h5{
    color: #205B95;
}

.sub_menu_content{
    display: none;
    /*background: rgba(0,0,0,0.5);*/
}

.sub_menu_content.current{
    display: inherit;
}

ul.sub_menu_tabs li{
    width:100%;
}

button.accordion {
  width: 100%;
  height: 80px;
  background-color: aliceblue;
  border: 1px solid #cdcdcd;
  outline: none;
  text-align: left;
  padding: 16px 20px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}


button.no_edit_accordion {
  width: 100%;
  height: 80px;
  background-color: aliceblue;
  border: 1px solid #cdcdcd;
  outline: none;
  text-align: left;
  padding: 16px 20px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

button.no_edit_accordion:after {
  font-family: FontAwesome;
  content: "\f06e" !important;
  font-family: "fontawesome";
  font-size: 18px;
  float: right;
}
button.no_edit_accordion.is-open:after {
  content: "\f00d" !important;
}

button.accordion:after {
  font-family: FontAwesome;
  content: "\f044";
  font-family: "fontawesome";
  font-size: 18px;
  float: right;
}

button.accordion.is-open:after {
  content: "\f00d";
}

button.accordion:hover,
button.accordion.is-open {
  background-color: #ddd;
}

.accordion-content {
  background-color: white;
  border: 1px solid #cdcdcd;
  padding: 0px 15px;
  margin-bottom:15px;
  display:none;
  transition: max-height 0.2s ease-in-out;
}

.form-control{
    margin-bottom:15px !important;
    border-radius: 5px !important;
}

.txt_clr{
    color: white;
}

.nice-select{
    border-radius: 5px !important;
    width:100%;
}


.style_h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.style_h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
.style_h1 em {
  font-style: normal;
  font-weight: 600;
}

/* === HEADING STYLE #1 === */
.one .style_h1 {
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 5px;
}
.one .style_h1:before {
  width: 28px;
  height: 5px;
  display: block;
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  margin-left: -14px;
  background-color: #b80000;
}
.one .style_h1:after {
  width: 100px;
  height: 1px;
  display: block;
  content: "";
  position: relative;
  margin-top: 25px;
  left: 50%;
  margin-left: -50px;
  background-color: #b80000;
}

/* === HEADING STYLE #2 === */
.two .style_h1 {
  text-transform: capitalize;
}
.two .style_h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  content: "";
  background-color: #c50000;
}

.two .style_h1 span {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
  line-height: 3em;
  padding-left: 0.25em;
  color: rgba(0, 0, 0, 0.4);
  padding-bottom: 10px;
}
.alt-two .style_h1 {
  text-align:center;
}
.alt-two .style_h1:before {
  left:50%; margin-left:-30px;
}

/* === HEADING STYLE #3 === */
.three .style_h1 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 15px;
  position: relative;
}
.three .style_h1:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 55px;
  background-color: #111;
}
.three .style_h1:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 95%;
  max-width: 255px;
  background-color: #333;
}

/* === HEADING STYLE #4 === */
.four .style_h1 {
  text-align: center;
  padding-bottom: 0.7em;
}
.four .style_h1 span {
  font-weight: 300;
  word-spacing: 3px;
  line-height: 2em;
  padding-bottom: 0.35em;
  color: rgba(0, 0, 0, 0.5);
}
.four .style_h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 1px;
  content: "";
  left: 50%;
  margin-left: -30px;
  background-color: #777;
}

/* === HEADING STYLE #5 === */
.five .style_h1 {
  text-align: center;
  font-size: 22px;
  font-weight: 700; color:#202020;
  text-transform: uppercase;
  word-spacing: 1px; letter-spacing:2px;
}
.five .style_h1 span {
  margin-top: 40px;
  text-transform: none;
  font-size:.75em;
  font-weight: normal;
  font-style: italic; font-family: "Playfair Display","Bookman",serif;
  color:#999; letter-spacing:-0.005em; word-spacing:1px;
  letter-spacing:none;
}
.five .style_h1:before {
  position: absolute;
  left: 0;
  bottom: 38px;
  width: 60px;
  height: 4px;
  content: "";
  left: 50%;
  margin-left: -30px;
  background-color: #dfdfdf;
}

/* STYLE 6
   ----------------------------- */
.six .style_h1 {
  text-align: center;
  color:#222; font-size:30px; font-weight:400;
  text-transform: uppercase;
  word-spacing: 1px; letter-spacing:2px; color:#c50000;
}
.six .style_h1 span {
  line-height:2em; padding-bottom:15px;
  text-transform: none;
  font-size:.7em;
  font-weight: normal;
  font-style: italic; font-family: "Playfair Display","Bookman",serif;
  color:#999; letter-spacing:-0.005em; word-spacing:1px;
  letter-spacing:none;
}
.six .style_h1:after, .six .style_h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px;
  margin:auto;
  background-color: #ccc;
}
.six .style_h1:before {
background-color:#d78b8b;
  left:45px; width:90px;
}

/* Style 7
   ----------------------------- */
.seven .style_h1 {
text-align: center;
    font-size:30px; font-weight:300; color:#222; letter-spacing:1px;
    text-transform: uppercase;

    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
}

.seven .style_h1:after,.seven .style_h1:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #c50000;
    border-top: 1px solid #c50000;
    height: 5px;
  background-color:#f8f8f8;
}

/* Style 8
   ----------------------------- */
.eight .style_h1 {
  text-align:center;

  text-transform:uppercase;
  font-size:26px; letter-spacing:1px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 16px 0;
  grid-gap: 22px;
}

.eight .style_h1:after,.eight .style_h1:before {
  content: " ";
  display: block;
  border-bottom: 2px solid #ccc;
  background-color:#f8f8f8;
}


/* Style 9
   ----------------------------- */
.nine .style_h1 {
  text-align:center; font-size:50px; text-transform:uppercase; color:#222; letter-spacing:1px;
  font-family:"Playfair Display", serif; font-weight:400;
}
.nine .style_h1 span {
  margin-top: 5px;
    font-size:15px; color:#444; word-spacing:1px; font-weight:normal; letter-spacing:2px;
    text-transform: uppercase; font-family:"Raleway", sans-serif; font-weight:500;

    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
}

.nine .style_h1 span:after,.nine .style_h1 span:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    height: 5px;
  background-color:#f8f8f8;
}


.ten .style_h1 {
  font-size:34px; font-weight:500; text-transform:uppercase;
}
.ten .style_h1:before {
    background-color: #c50000;
    border-radius: 0.25rem;
    content: '';
    display: block;
    height: 0.25rem;
    width: 42px;
    margin-bottom: 1.25rem;
}


.eleven .style_h1 {
  font-size:30px;text-align:center; line-height:1.5em; padding-bottom:45px; font-family:"Playfair Display", serif; text-transform:uppercase;letter-spacing: 2px; color:#111;
}


.eleven .style_h1:before {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 60%;
  left:50%; margin-left:-30%;
  height: 1px;
  content: "";
  background-color: #777; z-index: 4;
}
.eleven .style_h1:after {
  position:absolute;
  width:40px; height:40px; left:50%; margin-left:-20px; bottom:0px;
  content: '\00a7'; font-size:30px; line-height:40px; color:#c50000;
  font-weight:400; z-index: 5;
  display:block;
  background-color:#f8f8f8;
}


.twelve .style_h1 {
  font-size:26px; font-weight:700;  letter-spacing:1px; text-transform:uppercase; width:160px; text-align:center; margin:auto; white-space:nowrap; padding-bottom:13px;
}
.twelve .style_h1:before {
    background-color: #c50000;
    content: '';
    display: block;
    height: 3px;
    width: 75px;
    margin-bottom: 5px;
}
.twelve .style_h1:after {
    background-color: #c50000;
    content: '';
    display: block;
  position:absolute; right:0; bottom:0;
    height: 3px;
    width: 75px;
    margin-bottom: 0.25em;
}



.thirteen .style_h1 {
  position:relative; font-size:20px; font-weight:700;  letter-spacing:0px; text-transform:uppercase; width:150px; text-align:center; margin:auto; white-space:nowrap; border:2px solid #222;padding:5px 11px 3px 11px;
}
.thirteen .style_h1:before, .thirteen .style_h1:after {
    background-color: #c50000;
    position:absolute;
    content: '';
    height: 7px;

    width: 7px; border-radius:50%;
    bottom: 12px;
}
.thirteen .style_h1:before {
   left:-20px;
}
.thirteen .style_h1:after {
   right:-20px;
}

#radio_airline_search{
    margin-bottom: 10px;
}

#radio_train_search{
    margin-bottom: 10px;
}

#radio_bus_search{
    margin-bottom: 5px;
}

#checkbox_combo_price{
    margin-bottom:10px;
}

.switch_a{
    font-size:22px;
}


@media (min-width: 576px) {
    .modal-dialog.modal-sign{
        max-width: 475px !important;
    }
}

@media (max-width: 650px) {
    #ori_airline_top{
        display: grid;
    }
}

.title_cst{
    font-size: 22px;
    font-weight: 700;
    color: #202020;
    text-transform: uppercase;
    word-spacing: 1px;
    letter-spacing: 2px;
}
.title_cst_sub {
    text-transform: none;
    font-size: 24px;
    font-weight: 700;
    font-family: "Playfair Display","Bookman",serif;
    color:#171b26;
    letter-spacing:-0.005em; word-spacing:1px;
    letter-spacing:none;
}
.name_cst{
  position: relative;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: bold;
  font-size:24px;
  font-style: italic;
  color: #205B95;
  -webkit-text-fill-color: #205B95; /* Will override color (regardless of order) */  -webkit-background-clip: text;
  -webkit-text-size-adjust: none;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}


/*
.title_shine {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #205B95, #fff, #205B95);
  background-repeat: no-repeat;
  background-size: 95%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -200%;
  }
  100% {
    background-position: 500%;
  }
}


.title_shine {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  background: linear-gradient(to right, #f15a22 0, white 10%, #f15a22 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  text-decoration: none;
  white-space: nowrap;
}

@keyframes shine{
  0%{
    background-position: 0;
  }
  60%{
    background-position: 180px;
  }
  100%{
    background-position: 180px;
  }
}
*/

.search_country_tour{
    border: 1px solid #cdcdcd;
    background: #f7f7f7;
    color:#171b26;
    margin-right:0px;
    margin-bottom:15px;
    padding: 30px 15px;
    height:85px;
    width: 100%;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

.search_country_tour:hover{
    color: white;
    background: #205B95;
}

.text_cap::marker{
    content: none;
}

.prd_img{
    width:auto;
    height:70px;
    border:1px solid #cdcdcd;
    border-radius: 5px;
    padding:15px;
    background:white;
}

.train_provider_img{
    width:auto;
    height:55px;
    border:1px solid #cdcdcd;
    border-radius: 5px;
    padding:5px;
    margin-right: 10px;
    margin-top: 3px;
    background:white;
}

.airlines_provider_img{
    width:auto;
    height:55px;
    border:1px solid #cdcdcd;
    border-radius: 5px;
    padding:5px;
    margin-right: 10px;
    margin-top: 3px;
    background:white;
}

.airlines_provider_img_seat{
    width:auto;
    height:40px !important;
    border-radius: 5px;
    padding:5px;
    margin-right: 10px;
    margin-top: 3px;
    background:white;
}

.airlines_provider_img_detail{
    width:auto;
    height:40px;
    border:1px solid #cdcdcd;
    border-radius: 5px;
    padding:5px;
    margin-right: 5px;
    background:white;
}

.airlines_provider_img_fd{
    width:auto;
    height:40px;
    margin-right: 5px;
}

.show_pc{
    display:block !important;
}
.show_mbl{
    display:none !important;
}

@media (min-width: 992px) {
    .show_fd{
        display:block !important;
    }
    .show_fd_mbl{
        display:none !important;
    }
    .min_height_fare{
        min-height:140px;
    }
    .button_choose_bot{
        position:absolute;
        bottom:0px;
    }
    .border_seat_seat_price{
        border-left: 1px solid #cdcdcd;
    }
    .show_price_seat_pc{
        display: block;
    }
    .show_price_seat_mbl{
        display: none;
    }
}
@media (max-width: 991px) {
    .show_fd{
        display:none !important;
    }
    .show_fd_mbl{
        display:block !important;
    }
    .min_height_fare{
        min-height:unset;
    }
    .button_choose_bot{
        position:unset;
        bottom:unset;
    }
    .show_price_seat_pc{
        display: none;
    }
    .show_price_seat_mbl{
        display: block;
    }

    .sticky_time_fs{
        position: unset !important;
    }
    .sticky_ru_fs{
        position: unset !important;
    }

}

@media (min-width: 768px) {
    .show_pc{
        display:block !important;
    }
    .show_mbl{
        display:none !important;
    }
    .border_customer_route{
        border-right: 1px solid #cdcdcd;
    }
    .txt-right-left{
        text-align:right;
    }
    .my_button_sticky{
        display:none;
    }
}

@media (max-width: 767px) {
    .show_mbl{
        display:block !important;
    }
    .show_pc{
        display:none !important;
    }
    .border_customer_route{
        border-bottom: 1px solid #cdcdcd;
        margin-bottom:10px;
        padding-bottom:10px;
    }
    .txt-right-left{
        text-align:left;
    }

    .my_button_sticky{
        display: block;
    }

    .search-area-pcw{
        padding-top:0px;
    }

    .change-search-area-pcw{
     padding-top:0px;
    }
}

.custom_seat_cls{
    padding: 5px 0px;
    background:white;
    margin-bottom:2px;
    margin-left:5px;
    display: inline-block;
    text-align:center;
    border:1px solid #205B95;
    border-radius: 5px;
    width: 35px;
}

.custom_fare_cls{
    font-size: 13px;
    margin-bottom:2px;
    margin-right:5px;
    display: inline-block;
    width:auto;
}

.small_img_icon{
    width:auto;
    height:20px;
}

.passenger_seat_map_choose{
    background:#205B95;
    color:white;
}

.we_found_box{
    background-color: white;
    padding: 10px;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
}

.filter_box{
    background-color:white;
    padding:10px;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
}

.time_user_box{
    padding:10px;
    background:white;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
    border-radius: 5px;
}

/*
.filter-search-flight{
    max-height: 50vh;
    overflow: auto;
    height: auto;
    min-height: 0px;
}
*/

.change_search_box_bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 15px;
    padding: 20px;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
}

.div-dropdown-btn {
    width: fit-content;
    padding: 0.375rem 0.75rem;
    height: 43px;
    background: white;
    color: black;
    font-size: 13px;
    font-weight: 400;
    border-radius:5px;
}

.div-dropdown-txt {
    width: fit-content;
    margin-right: 7px;
    margin-bottom: 15px;
}
.dropdown-menu-w{
    min-width:270px;
}
.btn-dropdown-txt{
    color:#171b26;
    background: transparent;
    font-weight: bold;
    height:30px;
    line-height:20px;
    font-size: 15px;
    cursor:pointer;
    padding: 0px;
}
.dropdown-menu-txt{
    top: -10px !important;
    padding: 15px;
    min-width:270px;
    width: 100% !important;
    max-height: 470px !important;
}
.dropdown-menu-txt0{
    padding: 15px;
    min-width:270px;
    width: 100% !important;
    max-height: 470px !important;
}

.dropdown-menu-txt-lm30{
    left: -30px !important;
}

.dropdown-toggle.remove-arrow-dt::after{
    display:none;
}

.dropdown-toggle::after{
    margin-top: 13px;
    font-size: 18px;
    color:white;
}

.dropdownh20::after{
    margin-top: 7px !important;
}

.drop_inline{
    display: inline-block;
}

@media (max-width: 400px) {
    .div-dropdown-txt {
        display: block;
    }
}

.input-icons i {
    position: absolute;
    padding: 15px 10px 10px 10px;
    min-width: 40px;
}

.input-icons {
    width: 100%;
    margin-bottom: 10px;
}

.input-field {
    width: 100%;
    padding: 10px 10px 10px 30px;
    text-align: left;
    height:43px;
    border-radius: 5px;
}

.h_title_prd{
    color: #FFFFFF;
    background: rgba(0,0,0,0.5);
    border-radius: 7px;
    width: fit-content;
    margin: auto;
    padding: 5px 15px;
    letter-spacing: 4px;
}

.form-select .nice-select .list{
    margin-top: 10px !important;
    min-width: 200px;
}

.sticky_time_fs{
    position: sticky;
    top: -1px;
    z-index: 99;
}

.sticky_ru_fs{
    position: sticky;
    top: 45px;
    z-index: 23;
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.adminActions {
  position: fixed;
  bottom: 90px;
  right: 40px;
  z-index: 99;
}

.adminButton {
    height: 60px;
    width: 60px;
    background-color: #205B95;
    border-radius: 50%;
    border:unset;
    display: block;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
}

.adminButton i {
  font-size: 22px;
}

.adminButtons {
    position: absolute;
    width: 100%;
    bottom: 120%;
    text-align: center;
    border: unset;
}

.adminButtons button {
      display: block;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-decoration: none;
      margin: 10px auto 0;
      line-height: 1.15;
      color: #fff;
      opacity: 0;
      visibility: hidden;
      position: relative;
      border: unset;
      box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3);
}

.adminButtons button:hover {
    transform: scale(1.1);
    cursor:pointer;
}

.adminButtons button:nth-child(1) {background-color: #ff5722; transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;}
.adminButtons button:nth-child(2) {background-color: #03a9f4; transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;}
.adminButtons button:nth-child(3) {background-color: #f44336; transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;}
.adminButtons button:nth-child(4) {background-color: #4CAF50; transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;}

.adminActions button i {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 18px;
    transform: translate(-50%, -50%);
}

.adminToggle {
    -webkit-appearance: none;
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    z-index: 2;
    transition: box-shadow .2s ease-in-out;
    box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
}

.adminToggle:hover {
  box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
}

.adminToggle:checked ~ .adminButtons button {
  opacity: 1;
  visibility: visible;
}

.wave {
  animation-name: wave;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes wave {
  0% {box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.5);}
  100% {box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0);}
}


body {
  margin: 0;
}

#main-div {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 0;
}

#main-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 50px;
  width: 50px;
  font-size: 20px;
  color: #0064f3;
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

#main-button ~ button {
  visibility: hidden;
  font-weight: 600;
  height: 50px;
  padding: 0 20px;
  color: #fff;
  background: linear-gradient(90deg, #00a1f5, #0064f3);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
  border: 0;
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  opacity: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: .2s all linear;
  -webkit-transition: .2s all linear;
  -moz-transition: .2s all linear;
  -ms-transition: .2s all linear;
  -o-transition: .2s all linear;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

#main-button.open ~ button {
  visibility: visible;
  right: 70px;
  opacity: 1;
  transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
  -webkit-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
  -moz-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
  -ms-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
  -o-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
}

#main-button ~ a {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 50px;
  width: 50px;
  font-size: 20px;
  opacity: 0;
  text-decoration: none;
  color: #fff;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transition: .2s all linear;
  -webkit-transition: .2s all linear;
  -moz-transition: .2s all linear;
  -ms-transition: .2s all linear;
  -o-transition: .2s all linear;
}

#main-button ~ .telegram-color {
  background: linear-gradient(0deg, #017AB1, #01ABE6);
}

#main-button ~ .whatsapp-color {
  background: linear-gradient(0deg, #00B100, #09db09);
}

#main-button ~ .messenger-color {
  background: linear-gradient(0deg, #0078FF, #00C6FF);
}

#main-button.open ~ a {
  opacity: 1;
  transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
  -webkit-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
  -moz-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
  -ms-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
  -o-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
}
#main-button.open ~ a:nth-of-type(1) {
  bottom: 60px;
}
#main-button.open ~ a:nth-of-type(2) {
  bottom: 120px;
}
#main-button.open ~ a:nth-of-type(3) {
  bottom: 180px;
}

.wave {
  animation-name: wave;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes wave {
  0% {box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.5);}
  100% {box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0);}
}

.open {
  animation-iteration-count: 1;
}

.swal2-container{
    z-index: 9999999 !important;
}

#div_4 {
    background: white;
}

.form_booker{
    background-color:white;
    padding:15px;
    border-radius: 5px;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
}

.form_customer{
    background-color:white;
    padding:0px 15px;
    border-radius: 5px;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
}

.div_price_detail{
    background-color:white;
    padding:15px;
    border-radius: 5px;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
}

.div_box_default{
    background-color:white;
    padding:15px 15px 15px 15px;
    border-radius: 5px;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
}

.div_box_default_hov{
    background-color:white;
    padding:15px 15px 15px 15px;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: rgb(3 18 26 / 15%) 4px -1px 10px -4px, rgb(3 18 26 / 15%) -4px -1px 10px -4px;
}
.div_box_default_hov:hover{
    border: 1px solid #205B95;
}

.div_customer{
    padding:15px;
    cursor:pointer;
}

.select2-container .select2-selection--single{
    border-radius: 5px !important;
}

.btn_standard_sm{
    background: #205B95;
    line-height: 32px;
    padding-left: 15px;
    padding-right: 15px;
    border: none;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
}

.btn_standard_md{
    background: #205B95;
    line-height: 42px;
    padding-left: 15px;
    padding-right: 15px;
    border: none;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
}

.destinations-area{
    background: #f7f7f7;
}


/* OTP input styles */
.pin-container,
.email-otp-container,
.pin-otp-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.otp-input,
.email-otp-input,
.pin-otp-input,
.email-otp-input-user,
.pin-input,
.pin-num-input{
    width: 37px;
    height: 37px;
    text-align: center;
    font-size: 30px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
}
.cancel-pin-num-input{
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
}

.otp-input:focus,
.email-otp-input:focus,
.pin-otp-input:focus,
.email-otp-input-user:focus,
.pin-input:focus,
.pin-num-input:focus {
    border-color: #007bff;
}
.cancel-pin-num-input:focus {
    border-color: #007bff;
}

/* Chrome, Safari, Edge, Opera */
.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button,
.email-otp-input::-webkit-outer-spin-button,
.email-otp-input::-webkit-inner-spin-button,
.pin-otp-input::-webkit-outer-spin-button,
.pin-otp-input::-webkit-inner-spin-button,
.email-otp-input-user::-webkit-outer-spin-button,
.email-otp-input-user::-webkit-inner-spin-button,
.pin-input::-webkit-outer-spin-button,
.pin-input::-webkit-inner-spin-button,
.pin-num-input::-webkit-outer-spin-button,
.pin-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cancel-pin-num-input::-webkit-outer-spin-button,
.cancel-pin-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.otp-input[type=number],
.email-otp-input[type=number],
.pin-otp-input[type=number],
.email-otp-input-user[type=number],
.pin-input[type=number],
.pin-num-input[type=number] {
    -moz-appearance: textfield;
}
.cancel-pin-num-input[type=number] {
    -moz-appearance: textfield;
}

#verificationCode,
#emailverificationCode {
    width: 100%;
    margin-top: 15px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
}

#verificationCode:focus,
#emailverificationCode:focus {
    border-color: #007bff;
}
.email-otp {
    margin-top: 25px;
}

.b-white{
    background:white !important;
}
.form-select-2 .nice-select .list{
    height: 150px;
    overflow-y: scroll;
}

.single-destination{
    border: unset;
}


/*wrapper cart*/
/*.wrapper-cart {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper-cart button {
  padding: 20px;
  border: none;
  background: #d5d8e7;
  position: relative;
  outline: none;
  border-radius: 5px;
  color: #292d48;
  font-size: 18px;
}
.wrapper-cart button .cart-item {
  position: absolute;
  height: 24px;
  width: 24px;
  top: -10px;
  right: -10px;
}
.wrapper-cart button .cart-item:before {
  content: '1';
  display: block;
  line-height: 24px;
  height: 24px;
  width: 24px;
  font-size: 12px;
  font-weight: 600;
  background: #2bd156;
  color: white;
  border-radius: 20px;
  text-align: center;
}
.wrapper-cart button.sendtocart .cart-item {
  display: block;
  animation: xAxis 1s forwards cubic-bezier(1, 0.44, 0.84, 0.165);
}
.wrapper-cart button.sendtocart .cart-item:before {
  animation: yAxis 1s alternate forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cart-animate {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #292d48;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.cart-animate i {
  font-size: 25px;
  color: white;
}
.cart-animate:before {
  content: attr(data-totalitems);
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: -12px;
  right: -12px;
  background: #2bd156;
  line-height: 24px;
  padding: 0 5px;
  height: 24px;
  min-width: 24px;
  color: white;
  text-align: center;
  border-radius: 24px;
}
.cart-animate.shake {
  animation: shakeCart .4s ease-in-out forwards;
}

@keyframes xAxis {
  100% {
    transform: translateX(calc(50vw - 105px));
  }
}
@keyframes yAxis {
  100% {
    transform: translateY(calc(-50vh + 75px));
  }
}
@keyframes shakeCart {
  25% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}*/

.page-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-wrapper button {
  padding: 20px;
  border: none;
  background: #d5d8e7;
  position: relative;
  outline: none;
  border-radius: 5px;
  color: #292d48;
  font-size: 18px;
}
.page-wrapper button .cart-item {
  position: absolute;
  height: 24px;
  width: 24px;
  top: -10px;
  right: -10px;
}
.page-wrapper button .cart-item:before {
  content: '1';
  display: block;
  line-height: 24px;
  height: 24px;
  width: 24px;
  font-size: 12px;
  font-weight: 600;
  background: #2bd156;
  color: white;
  border-radius: 20px;
  text-align: center;
}
.page-wrapper button.sendtocart .cart-item {
  display: block;
  animation: xAxis 1s forwards cubic-bezier(1, 0.44, 0.84, 0.165);
}
.page-wrapper button.sendtocart .cart-item:before {
  animation: yAxis 1s alternate forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cart {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #292d48;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.cart i {
  font-size: 25px;
  color: white;
}
.cart:before {
  content: attr(data-totalitems);
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: -12px;
  right: -12px;
  background: #2bd156;
  line-height: 24px;
  padding: 0 5px;
  height: 24px;
  min-width: 24px;
  color: white;
  text-align: center;
  border-radius: 24px;
}
.cart.shake {
  animation: shakeCart .4s ease-in-out forwards;
}

@keyframes xAxis {
  100% {
    transform: translateX(calc(50vw - 105px));
  }
}
@keyframes yAxis {
  100% {
    transform: translateY(calc(-50vh + 75px));
  }
}
@keyframes shakeCart {
  25% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}


.state_check{
    display:inline-block;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    margin-top:5px;
}

@media (max-width: 425px) {
    .single-page-area{
        min-height: 130px !important;
    }
}

@media (max-width: 575px) and (min-width: 426px) {
    .single-page-area{
        min-height: 170px !important;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .single-page-area{
        min-height: 225px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-page-area{
        min-height: 280px !important;
    }
}

@media (min-width: 992px) {
    .single-page-area{
        min-height: 320px !important;
    }
}

.login_preview_page{
    margin: 0;
    position: relative;
    top: 100%;
    left: 50%;
    width: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 575px) {
    .login_preview_page{
        margin: 0;
        position: relative;
        top: 100%;
        left: 50%;
        width: auto;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}




.input-outer {
    position: relative;
    padding: 0px;
}
.form-control-dr{
    padding-left:40px !important;
}
.form-control-dl{
    padding-left:40px !important;
}
.form-control-ng{
    padding-right:40px !important;
}
.clear-input {
    position: absolute;
    float: right;
    top: 0px;
    right: 0px;
    background: #ccc;
    text-align: center;
    cursor: pointer;
}
.clear-input:after {
    content: "\f00d";
    font-family: FontAwesome;
    font-family: "fontawesome";
    position: absolute;
    color: #373737;
    font-size: 18px;
    top: 10px;
    right: 15px;
}
.form-control-ng:invalid + .clear-input {
    visibility: hidden;
}

.input-left-icon {
    position: absolute;
    float: right;
    top: 15px;
    left: 10px;
    font-size:14px;
    text-align: center;
    cursor: pointer;
}
.input-left-icon:after {
    position: absolute;
    color: #373737;
    font-size: 18px;
    top: 10px;
    right: 10px;
}

.input-left-icon-bg {
    position: absolute;
    float: right;
    top: 0px;
    left: 0px;
    width:38px;
    height:43px;
    padding: 15px 10px;
    font-size:14px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}
.input-left-icon-bg:after {
    position: absolute;
    color: #373737;
    font-size: 18px;
    top: 0px;
    left: 0px;
}

.input-right-icon {
    position: absolute;
    float: right;
    top: 15px;
    right: 10px;
    font-size:14px;
    text-align: center;
    cursor: pointer;
}
.input-right-icon:after {
    position: absolute;
    color: #373737;
    font-size: 18px;
    top: 10px;
    right: 10px;
}

.z-idx1{
    z-index: 1;
}

.input-left-icon-se .select2-container .select2-selection--single{
    padding-left: 40px !important;
}


.autocomplete-suggestion{
    white-space: unset;
    border-bottom: 1px solid #cdcdcd;
    line-height: 25px;
    font-size: 13px;
}

.autocomplete-suggestion b{
    font-weight: inherit;
}
#guest_nationality_item #select2-hotel_id_nationality_id-container{
    line-height:20px;
    color: black !important;
    padding-right:5px;
    font-weight:400;
    font-size:14px;
}
#select2-hotel_id_nationality_id-container{
    color: white;
    border: unset !important;
    font-weight: bold;
    font-size: 15px;
    padding-left: 5px;
    line-height: 41px;
}
#select2-hotel_id_nationality_id-container:after{
    content: "\f078";
    font-family: FontAwesome;
    font-family: "fontawesome";
    padding-left:5px;
}

span[aria-labelledby="select2-hotel_id_nationality_id-container"] {
    background: transparent !important;
    border: unset !important;
}

.background_img_prd{
    background-image: url('/static/tt_website/images/background/default/def_bg_home.jpg') !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: fixed;
    min-height: 300px;
    position:relative;
    z-index:1;
}


.switch_on_off {
  width: 24rem;
  position: relative;
}
.switch_on_off input {
  position: absolute;
  top: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.switch_on_off input:checked { z-index: 1; }
.switch_on_off .toggle-outside {
  height: 100%;
  border-radius: 2rem;
  padding: 0.25rem;
  overflow: hidden;
  transition: 0.25s ease all;
}
.switch_on_off .toggle-inside {
  border-radius: 5rem;
  background: #4a4a4a;
  position: absolute;
  transition: 0.25s ease all;
}
.switch_on_off--horizontal {
  width: 18rem;
  height: 3rem;
  font-size: 0;
  margin-bottom: 1rem;
}
.switch_on_off--horizontal input {
  height: 3rem;
  width: 6rem;
  left: 6rem;
  margin: 0;
}
.switch_on_off--horizontal .toggle-outside {
  background: #e5e5e5;
  position: absolute;
  width: 6rem;
}
.switch_on_off--horizontal .toggle-inside {
  height: 2.5rem;
  width: 2.5rem;
}
.switch_on_off--horizontal input:checked ~ .toggle-outside .toggle-inside { left: 0.25rem; }
.switch_on_off--horizontal input ~ input:checked ~ .toggle-outside .toggle-inside { left: 3.25rem; }
.switch_on_off--no-label label {
  width: 0;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}
.switch_on_off--no-label input:checked ~ .toggle-outside .toggle-inside {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.2);
}
.switch_on_off--no-label input ~ input:checked ~ .toggle-outside {
  background: #2ecc71;
}
.switch_on_off--no-label input ~ input:checked ~ .toggle-outside .toggle-inside { background: #fff; }
.switch_on_off--no-label.switch_on_off--horizontal { width: 6rem; }
.switch_on_off--no-label.switch_on_off--horizontal input,
.switch_on_off--no-label.switch_on_off--horizontal .toggle-outside { left: 0; }
.switch_on_off--expanding-inner input:checked + label:hover ~ .toggle-outside .toggle-inside { height: 2.5rem; width: 2.5rem; }
.switch_on_off--expanding-inner.switch_on_off--horizontal input:hover ~ .toggle-outside .toggle-inside { width: 3.5rem; }
.switch_on_off--expanding-inner.switch_on_off--horizontal input:hover ~ input:checked ~ .toggle-outside .toggle-inside { left: 2.25rem; }

b.off {
  color: #bbb;
  position: absolute;
  left: 50%;
  margin-left: -0.7rem;
  font: 0.7rem/2.5rem Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}
b.on {
  color:#171b26;
  position: absolute;
  left: 50%;
  margin-left: -0.5rem;
  font: 0.7rem/2.5rem Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0;
}
.switch_on_off--no-label input ~ input:checked ~ .toggle-outside b.on {
  opacity: 1;
  transition: 0.25s ease all;
}
.switch_on_off--no-label input ~ input:checked ~ .toggle-outside b.off {
  opacity: 0;
  transition: 0.25s ease all;
}


.rangeValue {
  position: relative;
  display: block;
  text-align: left;
  font-size: 16px;
  color:#171b26;
  font-weight: 400;
}
.range {
  width: 300px;
  height: 15px;
  -webkit-appearance: none;
  background: #111;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00fd0a;
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px #00fd0a;
}

dd{
    margin-bottom:0px;
}

.zoom-img{
    cursor:pointer;
}


/* variables */
.container-star {
  --star-fill-color: yellow;
  --star-grey-color: #444;
  --box-border-color: #777;
  --box-padding: 10px;
  width: min-content;
  font-size: 15px;
  color: var(--star-grey-color);
  position: relative;
  z-index: 1;
}

.star-cst {
  display: flex;
}

.star-cst.yellow-cst {
  color: var(--star-fill-color);
}

.rating-cst {
  width: var(--percent, 0%);
  height: 100%;
  overflow: hidden;
}

.grey-cst {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: -1;
}



/*Gradient color*/
.gradient-background-1 {
 background: #282537;
 background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 border-radius: 5px;
}

.gradient-background-2 {
 background: #092756;
 background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
 background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
 background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
 background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
 background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
 }

 .gradient-background-3 {
     background-image: linear-gradient(#8b9da9, #fff6e4);
     box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
 }
 .gradient-background-4 {
background: rgb(105,155,200);
background: -moz-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%, rgba(181,197,216,1) 57%);
 background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%,rgba(105,155,200,1)), color-stop(57%,rgba(181,197,216,1)));
 background: -webkit-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 background: -o-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 background: -ms-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 background: radial-gradient(ellipse at top left, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#699bc8', endColorstr='#b5c5d8',GradientType=1 );
}
.gradient-background-5 {
background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%),
linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
}

.gradient-background-6 {
background: rgb(244,226,156);
background: -moz-linear-gradient(-45deg, rgba(244,226,156,0) 0%, rgba(59,41,58,1) 100%), -moz-linear-gradient(left, rgba(244,226,156,1) 0%, rgba(130,96,87,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), -webkit-linear-gradient(left, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
background: -o-linear-gradient(-45deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), -o-linear-gradient(left, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), -ms-linear-gradient(left, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
background: linear-gradient(135deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), linear-gradient(to right, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);

}


.show-more-height {
  height: 20px;
  overflow:hidden;
}


.snippet-dot{
  position: relative;
  background: #fff;
  padding: 2rem 5%;
  margin: 1.5rem 0;
  box-shadow: 0 .4rem .8rem -.1rem rgba(0,32,128,.1),0 0 0 1px #f0f2f7;
  border-radius: .25rem;
}

.stage-dot {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  margin: 0 -6%;
  overflow: hidden;
 }

.stage-dot-nh {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
 }

/**
 * ==============================================
 * Dot Elastic
 * ==============================================
 */
.dot-elastic {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotElastic 1s infinite linear;
}

.dot-elastic::before, .dot-elastic::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-elastic::before {
  left: -15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotElasticBefore 1s infinite linear;
}

.dot-elastic::after {
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotElasticAfter 1s infinite linear;
}

@keyframes dotElasticBefore {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1.5);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes dotElastic {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 1.5);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes dotElasticAfter {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9999px 0 0 -5px #9880ff;
  animation: dotPulse 1.5s infinite linear;
  animation-delay: .25s;
}

.dot-pulse::before, .dot-pulse::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
}

.dot-pulse::before {
  box-shadow: 9984px 0 0 -5px #9880ff;
  animation: dotPulseBefore 1.5s infinite linear;
  animation-delay: 0s;
}

.dot-pulse::after {
  box-shadow: 10014px 0 0 -5px #9880ff;
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: .5s;
}

@keyframes dotPulseBefore {
  0% {
    box-shadow: 9984px 0 0 -5px #9880ff;
  }
  30% {
    box-shadow: 9984px 0 0 2px #9880ff;
  }
  60%,
  100% {
    box-shadow: 9984px 0 0 -5px #9880ff;
  }
}

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 -5px #9880ff;
  }
  30% {
    box-shadow: 9999px 0 0 2px #9880ff;
  }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px #9880ff;
  }
}

@keyframes dotPulseAfter {
  0% {
    box-shadow: 10014px 0 0 -5px #9880ff;
  }
  30% {
    box-shadow: 10014px 0 0 2px #9880ff;
  }
  60%,
  100% {
    box-shadow: 10014px 0 0 -5px #9880ff;
  }
}

/**
 * ==============================================
 * Dot Flashing
 * ==============================================
 */
.dot-flashing {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFlashing 1s infinite linear alternate;
  animation-delay: .5s;
}

.dot-flashing::before, .dot-flashing::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-flashing::before {
  left: -15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 0s;
}

.dot-flashing::after {
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dotFlashing {
  0% {
    background-color: #9880ff;
  }
  50%,
  100% {
    background-color: #ebe6ff;
  }
}

/**
 * ==============================================
 * Dot Collision
 * ==============================================
 */
.dot-collision {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
}

.dot-collision::before, .dot-collision::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-collision::before {
  left: -10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotCollisionBefore 2s infinite ease-in;
}

.dot-collision::after {
  left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotCollisionAfter 2s infinite ease-in;
  animation-delay: 1s;
}

@keyframes dotCollisionBefore {
  0%,
  50%,
  75%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-15px);
  }
}

@keyframes dotCollisionAfter {
  0%,
  50%,
  75%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(15px);
  }
}

/**
 * ==============================================
 * Dot Revolution
 * ==============================================
 */
.dot-revolution {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
}

.dot-revolution::before, .dot-revolution::after {
  content: '';
  display: inline-block;
  position: absolute;
}

.dot-revolution::before {
  left: 0;
  top: -15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  transform-origin: 5px 20px;
  animation: dotRevolution 1.4s linear infinite;
}

.dot-revolution::after {
  left: 0;
  top: -30px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  transform-origin: 5px 35px;
  animation: dotRevolution 1s linear infinite;
}

@keyframes dotRevolution {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(360deg) translate3d(0, 0, 0);
  }
}

/**
 * ==============================================
 * Dot Carousel
 * ==============================================
 */
.dot-carousel {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  animation: dotCarousel 1.5s infinite linear;
}

@keyframes dotCarousel {
  0% {
    box-shadow: 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff;
  }
  50% {
    box-shadow: 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff;
  }
  100% {
    box-shadow: 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff;
  }
}

/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */
.dot-typing {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  animation: dotTyping 1.5s infinite linear;
}

@keyframes dotTyping {
  0% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  16.667% {
    box-shadow: 9984px -10px 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  33.333% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  50% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px -10px 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  66.667% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  83.333% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px -10px 0 0 #9880ff;
  }
  100% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
}

/**
 * ==============================================
 * Dot Windmill
 * ==============================================
 */
.dot-windmill {
  position: relative;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  transform-origin: 5px 15px;
  animation: dotWindmill 2s infinite linear;
}

.dot-windmill::before, .dot-windmill::after {
  content: '';
  display: inline-block;
  position: absolute;
}

.dot-windmill::before {
  left: -8.66px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
}

.dot-windmill::after {
  left: 8.66px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
}

@keyframes dotWindmill {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(720deg) translate3d(0, 0, 0);
  }
}

/**
 * ==============================================
 * Dot Bricks
 * ==============================================
 */
.dot-bricks {
  position: relative;
  top: 8px;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
  animation: dotBricks 2s infinite ease;
}

@keyframes dotBricks {
  0% {
    box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
  }
  8.333% {
    box-shadow: 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
  }
  16.667% {
    box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff;
  }
  25% {
    box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
  }
  33.333% {
    box-shadow: 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
  }
  41.667% {
    box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
  }
  50% {
    box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
  }
  58.333% {
    box-shadow: 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
  }
  66.666% {
    box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
  }
  75% {
    box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
  }
  83.333% {
    box-shadow: 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
  }
  91.667% {
    box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
  }
  100% {
    box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
  }
}

/**
 * ==============================================
 * Dot Floating
 * ==============================================
 */
.dot-floating {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
}

.dot-floating::before, .dot-floating::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-floating::before {
  left: -12px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFloatingBefore 3s infinite ease-in-out;
}

.dot-floating::after {
  left: -24px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1);
}

@keyframes dotFloating {
  0% {
    left: calc(-50% - 5px);
  }
  75% {
    left: calc(50% + 105px);
  }
  100% {
    left: calc(50% + 105px);
  }
}

@keyframes dotFloatingBefore {
  0% {
    left: -50px;
  }
  50% {
    left: -12px;
  }
  75% {
    left: -50px;
  }
  100% {
    left: -50px;
  }
}

@keyframes dotFloatingAfter {
  0% {
    left: -100px;
  }
  50% {
    left: -24px;
  }
  75% {
    left: -100px;
  }
  100% {
    left: -100px;
  }
}

/**
 * ==============================================
 * Dot Fire
 * ==============================================
 */
.dot-fire {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9999px 22.5px 0 -5px #9880ff;
  animation: dotFire 1.5s infinite linear;
  animation-delay: -.85s;
}

.dot-fire::before, .dot-fire::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
}

.dot-fire::before {
  box-shadow: 9999px 22.5px 0 -5px #9880ff;
  animation: dotFire 1.5s infinite linear;
  animation-delay: -1.85s;
}

.dot-fire::after {
  box-shadow: 9999px 22.5px 0 -5px #9880ff;
  animation: dotFire 1.5s infinite linear;
  animation-delay: -2.85s;
}

@keyframes dotFire {
  1% {
    box-shadow: 9999px 22.5px 0 -5px #9880ff;
  }
  50% {
    box-shadow: 9999px -5.625px 0 2px #9880ff;
  }
  100% {
    box-shadow: 9999px -22.5px 0 -5px #9880ff;
  }
}

/**
 * ==============================================
 * Dot Spin
 * ==============================================
 */
.dot-spin {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: transparent;
  color: transparent;
  box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
  animation: dotSpin 1.5s infinite linear;
}

@keyframes dotSpin {
  0%,
  100% {
    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  12.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  25% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  37.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  50% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  62.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
  }
  75% {
    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
  }
  87.5% {
    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #9880ff;
  }
}

/**
 * ==============================================
 * Dot Falling
 * ==============================================
 */
.dot-falling {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9999px 0 0 0 #9880ff;
  animation: dotFalling 1s infinite linear;
  animation-delay: .1s;
}

.dot-falling::before, .dot-falling::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-falling::before {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFallingBefore 1s infinite linear;
  animation-delay: 0s;
}

.dot-falling::after {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFallingAfter 1s infinite linear;
  animation-delay: .2s;
}

@keyframes dotFalling {
  0% {
    box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%,
  50%,
  75% {
    box-shadow: 9999px 0 0 0 #9880ff;
  }
  100% {
    box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

@keyframes dotFallingBefore {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%,
  50%,
  75% {
    box-shadow: 9984px 0 0 0 #9880ff;
  }
  100% {
    box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

@keyframes dotFallingAfter {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%,
  50%,
  75% {
    box-shadow: 10014px 0 0 0 #9880ff;
  }
  100% {
    box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

/**
 * ==============================================
 * Dot Stretching
 * ==============================================
 */
.dot-stretching {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  transform: scale(1.25, 1.25);
  animation: dotStretching 2s infinite ease-in;
}

.dot-stretching::before, .dot-stretching::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-stretching::before {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotStretchingBefore 2s infinite ease-in;
}

.dot-stretching::after {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotStretchingAfter 2s infinite ease-in;
}

@keyframes dotStretching {
  0% {
    transform: scale(1.25, 1.25);
  }
  50%,
  60% {
    transform: scale(0.8, 0.8);
  }
  100% {
    transform: scale(1.25, 1.25);
  }
}

@keyframes dotStretchingBefore {
  0% {
    transform: translate(0) scale(0.7, 0.7);
  }
  50%,
  60% {
    transform: translate(-20px) scale(1, 1);
  }
  100% {
    transform: translate(0) scale(0.7, 0.7);
  }
}

@keyframes dotStretchingAfter {
  0% {
    transform: translate(0) scale(0.7, 0.7);
  }
  50%,
  60% {
    transform: translate(20px) scale(1, 1);
  }
  100% {
    transform: translate(0) scale(0.7, 0.7);
  }
}

/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Gathering
 * ==============================================
 */
.dot-gathering {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color:#171b26;
  color: transparent;
  margin: -1px 0;
  filter: blur(2px);
}

.dot-gathering::before, .dot-gathering::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: -50px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color:#171b26;
  color: transparent;
  opacity: 0;
  filter: blur(2px);
  animation: dotGathering 2s infinite ease-in;
}

.dot-gathering::after {
  animation-delay: .5s;
}

@keyframes dotGathering {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  35%,
  60% {
    opacity: 1;
    transform: translateX(50px);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}

/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Hourglass
 * ==============================================
 */
.dot-hourglass {
  position: relative;
  top: -15px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color:#171b26;
  color: transparent;
  margin: -1px 0;
  filter: blur(2px);
  transform-origin: 5px 20px;
  animation: dotHourglass 2.4s infinite ease-in-out;
  animation-delay: .6s;
}

.dot-hourglass::before, .dot-hourglass::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color:#171b26;
  color: transparent;
  filter: blur(2px);
}

.dot-hourglass::before {
  top: 30px;
}

.dot-hourglass::after {
  animation: dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes dotHourglass {
  0% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes dotHourglassAfter {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(30px);
  }
  50% {
    transform: translateY(30px);
  }
  75% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Overtaking
 * ==============================================
 */
.dot-overtaking {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: transparent;
  color:#171b26;
  margin: -1px 0;
  box-shadow: 0 -20px 0 0;
  filter: blur(2px);
  animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
}

.dot-overtaking::before, .dot-overtaking::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: transparent;
  color:#171b26;
  box-shadow: 0 -20px 0 0;
  filter: blur(2px);
}

.dot-overtaking::before {
  animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
  animation-delay: .3s;
}

.dot-overtaking::after {
  animation: dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
  animation-delay: .6s;
}

@keyframes dotOvertaking {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Shuttle
 * ==============================================
 */
.dot-shuttle {
  position: relative;
  left: -15px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color:#171b26;
  color: transparent;
  margin: -1px 0;
  filter: blur(2px);
}

.dot-shuttle::before, .dot-shuttle::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color:#171b26;
  color: transparent;
  filter: blur(2px);
}

.dot-shuttle::before {
  left: 15px;
  animation: dotShuttle 2s infinite ease-out;
}

.dot-shuttle::after {
  left: 30px;
}

@keyframes dotShuttle {
  0%,
  50%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-45px);
  }
  75% {
    transform: translateX(45px);
  }
}

/**
 * ==============================================
 * Experiment-Emoji
 * Dot Bouncing
 * ==============================================
 */
.dot-bouncing {
  position: relative;
  height: 10px;
  font-size: 10px;
}

.dot-bouncing::before {
  content: '⚽🏀🏐';
  display: inline-block;
  position: relative;
  animation: dotBouncing 1s infinite;
}

@keyframes dotBouncing {
  0% {
    top: -20px;
    animation-timing-function: ease-in;
  }
  34% {
    transform: scale(1, 1);
  }
  35% {
    top: 20px;
    animation-timing-function: ease-out;
    transform: scale(1.5, 0.5);
  }
  45% {
    transform: scale(1, 1);
  }
  90% {
    top: -20px;
  }
  100% {
    top: -20px;
  }
}

/**
 * ==============================================
 * Experiment-Emoji
 * Dot Rolling
 * ==============================================
 */
.dot-rolling {
  position: relative;
  height: 10px;
  font-size: 10px;
}

.dot-rolling::before {
  content: '⚽';
  display: inline-block;
  position: relative;
  transform: translateX(-25px);
  animation: dotRolling 3s infinite;
}

@keyframes dotRolling {
  0% {
    content: '⚽';
    transform: translateX(-25px) rotateZ(0deg);
  }
  16.667% {
    content: '⚽';
    transform: translateX(25px) rotateZ(720deg);
  }
  33.333% {
    content: '⚽';
    transform: translateX(-25px) rotateZ(0deg);
  }
  34.333% {
    content: '🏀';
    transform: translateX(-25px) rotateZ(0deg);
  }
  50% {
    content: '🏀';
    transform: translateX(25px) rotateZ(720deg);
  }
  66.667% {
    content: '🏀';
    transform: translateX(-25px) rotateZ(0deg);
  }
  67.667% {
    content: '🏐';
    transform: translateX(-25px) rotateZ(0deg);
  }
  83.333% {
    content: '🏐';
    transform: translateX(25px) rotateZ(720deg);
  }
  100% {
    content: '🏐';
    transform: translateX(-25px) rotateZ(0deg);
  }
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

@media (max-width: 991px) and (min-width: 467px) {
    .otp-input, .email-otp-input, .pin-otp-input, .email-otp-input-user, .pin-input, .pin-num-input{
        height: 50px;
        width: 50px;
    }
    .cancel-pin-num-input{
        height: 50px;
        width: 50px;
    }
}
@media (max-width: 466px) {
    .otp-input, .email-otp-input, .pin-otp-input, .email-otp-input-user, .pin-input, .pin-num-input{
        height: 36px;
        width: 36px;
    }
    .cancel-pin-num-input{
        height: 36px;
        width: 36px;
    }
}

.background-title-general{
    background:#f7fffe;
    padding:15px;
    border-radius:5px;
}

.background-title-highlight{
    background:transparent;
    padding:15px 0px;
    border-bottom: 1px solid #cdcdcd;
}

.product_list_head{
    border-top: 1px solid #cdcdcd;
    background: white;
}
.span_link_product{
    color:black;
    cursor: pointer;
    font-weight:bold;
}

.a_color5{
    color: black;
    font-weight:bold;
}

.a_color5:hover{
    color: #205B95;
}


.form-select-2 .current{
    width: inherit;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.thumbnail-container {
    width: 100%; /* Sesuaikan ukuran thumbnail */
    height: 318px; /* Sesuaikan */
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar akan menyesuaikan penuh tanpa terpotong */
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 24px;
    padding: 15px 15px 15px 20px;
    border-radius: 50%;
}

.border-right-and-bottom{
    border-right: 1px solid #cdcdcd;
}

@media (max-width: 767px) {
    .border-right-and-bottom{
        border-right: unset;
        border-bottom: 1px solid #cdcdcd;
    }
}


.dynamic_content img {
    display: none !important;
}
.dynamic_content * {
    text-align: left !important;
    font-size: inherit !important; /* Mengatur ukuran teks ke default */
    font-weight: normal !important; /* Menghapus bold */
    font-style: normal !important; /* Menghapus italic */
    text-decoration: none !important; /* Menghapus underline */
}

.dynamic_content img {
    display: none !important; /* Menyembunyikan semua gambar */
}

.state-radio-group {
  display: flex;
  overflow-x: auto;
  gap: 0;
  border-radius: 8px;
  background-color: #ffffff;
  white-space: nowrap;
  scroll-behavior: smooth;
  transition: justify-content 0.3s;
}

.state-radio-group.fill-space {
  justify-content: space-between; /* atau space-evenly biar lebih rata */
  overflow-x: hidden; /* gak bisa discroll klo muat semua */
}
.state-radio-group.fill-space label {
  flex: 1 1 0; /* bagi rata lebarnya */
  text-align: center;
}

.state-radio-group input[type="radio"] {
  display: none;
}

.state-radio-group label {
  flex: 0 0 auto;
  padding: 10px 16px;
  margin-bottom: 0;
  cursor: pointer;
  font-weight: 600;
  color: #0d1e46;
  border-right: 1px solid #ddd;
  background-color: transparent;
  user-select: none;
  transition: background-color 0.3s, color 0.3s;
}

.state-radio-group label:last-child {
  border-right: none;
}

.state-radio-group input[type="radio"]:checked + label {
  background-color: #0d1e46;
  color: white;
}


  .scroll-wrapper {
    position: relative;
    margin-bottom: 10px;
  }

  .reservation-type-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    scroll-behavior: smooth;
    white-space: nowrap;
  }

  .reservation-type-scroll::-webkit-scrollbar {
    display: none;
  }

  .radio-img-type {
    flex: 0 0 auto;
    display: flex;
    margin-bottom:0px;
    flex-direction: column;
    align-items: center;
    width: 90px;
    padding: 8px 10px 5px 10px;
    background: #f5f5f5;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 12px;
    text-align: center;
  }

  .radio-img-type:hover {
    background: #e0e0e0;
  }

  .radio-img-type input[type="radio"] {
    display: none;
  }

  .radio-img-type img {
    width: auto;
    height: 28px;
    margin-bottom: 4px;
  }

    .radio-img-type input[type="radio"]:checked ~ img {
      filter: brightness(0) saturate(100%) invert(19%) sepia(78%) saturate(1736%) hue-rotate(210deg) brightness(90%) contrast(100%);
    }

    .radio-img-type input[type="radio"]:checked ~ span {
      font-weight: bold;
      color: #1d3b63;
    }

    /* Tambahan efek untuk background kotak terpilih */
    .radio-img-type:has(input[type="radio"]:checked) {
      background: #dbeafe; /* biru muda */
      border: 1px solid #1d3b63;
    }
  .scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #1d3b63;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    z-index: 10;
    display: none;
  }

  .scroll-btn-left {
    left: -14px;
  }

  .scroll-btn-right {
    right: -14px;
  }




.contact-container {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.contact-card {
  flex: 1;
  min-width: 300px;
  background: #fff;
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.contact-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
}

.contact-info img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.contact-details {
  font-size: 14px;
  color: #444;
}

.contact-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.arrow-right-cst {
  display: inline-block;
  color: #333;
  border-bottom: 3px solid black;
  font-weight: bold;
  padding: 5px 10px 5px 0px;
  width:115px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}

.form-select .current{
    margin-right: 5px;
}

.form-select .nice-select{
    padding-right: 20px;
}



.filter-container {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 15px;
  gap: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.filter-item select {
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.filter-button {
  padding: 6px 14px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.filter-button:hover {
  background-color: #0056b3;
}

@media (max-width: 600px) {
  .filter-container {
    flex-direction: column;
    align-items: stretch;
  }
}


.dropdown-toggle::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black; /* warna panah */
}

.ta_rl{
    text-align:right;
}
@media (max-width: 991px) {
    .ta_rl{
        text-align:left;
    }
}


  .insurance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 16px;
  }

  .insurance-card {
    position: relative;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    background-color: #fff;
    cursor: pointer;
  }

  .insurance-card input[type="radio"] {
    display: none;
  }

  .insurance-card.selected {
    border-color: #007bff;
    background-color: #e9f3ff;
  }

  .insurance-logo {
    max-height: 40px;
    max-width: 100px;
    margin-bottom: 8px;
    object-fit: contain;
  }

  .insurance-name {
    font-size: 13px;
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.text-truncate {
  display: inline-block;            /* atau flex kalau mau sejajar dengan icon */
  max-width: 90px;                 /* bebas disesuaikan */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;           /* biar sejajar icon */
}

.currency-button {
  display: inline-block;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px solid #cdcdcd;
  width:100%;
  text-decoration: unset !important;
  transition: background-color 0.3s ease;
}

.currency-button:hover {
  background-color: #0056b3;
  background-color: #ffffff;
}

.currency-button.active_cur_btn {
  background-color: #004080;
  color: white;
}
.currency-button.active_cur_btn i {
  color: white;
}

.border-ltt{
    border-left: 1px solid #cdcdcd;
}

@media (max-width: 575px) {
    .border-ltt{
        border-left: unset;
        border-top: 1px solid #cdcdcd;
    }
}

.info-dropdown {
  position: relative;
  width: 100%;
}

.info-trigger {
  width: 100%;
  padding: 12px;
  background-color: #f0f0f0;
  border-radius: 6px;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.info-trigger .icon-right {
  margin-left: auto;
}

.info-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 12px;
  margin-top: 4px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  box-sizing: border-box;
  z-index: 10;
}

.info-content button.close-btn {
  margin-top: 10px;
  background-color: #ddd;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}