<table class="table-tours-date" style="margin: 150px 50px;">
    
    <tr class="table-tours-date__header">
        <th><div>Индивидуальный тур под ваши даты</div></th>
        <th><div>Продолжительность</div></th>
        <th><div>Группа</div></th>
        <th><div class="no-decor">Стоимость</div></th>
        <th><div> </div></th>
    </tr>
  
  <tr class="last-tr js-individual-price-container">
        <td class="tour-period">с июля по сентябрь</td>
        <td class="tour-duration">12 дней</td>
        <td class="tour-group">
          <div class="tour-select">
            <select class="js-select-group" name="" id="">
              <option value="50 000 р.">1</option>
              <option value="100 000 р.">2</option>
              <option value="150 000 р.">3</option>
              <option value="200 000 р.">4</option>
              <option value="250 000 р.">5</option>
            </select>
          </div>
        </td>        
    <td class="js-tour-individual-price">50 000 руб.</td>
        <td><a class="btn btn_book-date js-book-tour-individual" href="#modalBookTour" data-num-participants="1" data-tour-name="Тур «Медведи, Вулканы и Косатки» на Камчатке" data-tour-period="10 июня – 21 июня 2019"  data-tour-cost="50 000 руб." title="Забронировать тур на 14 августа – 27 августа 2019">Забронировать</a></td>
    </tr>


</table><!-- /table-tours-date -->

html,
body {
  height: 5000px;
}

.table-tours-date th {
  text-align: center;
  color: #fff;
}

.table-tours-date th, 
.table-tours-date td {
  text-align: center;
  font-weight: 600;
}

.table-tours-date td {
  padding: 15px 0;
  border-radius: 4px;
  color: #676767;
}

.table-tours-date__header th>div {
  background-color: #32bde7;  
  padding: 10px 40px;
  box-sizing: border-box;
  height: 38px;
  position: relative;
}

.table-tours-date tr:nth-child(odd){
  background-color: #f2f2f2;
}

.table-tours-date__header th>div:before,
.table-tours-date__header th>div:after {
  content: "";
  position: absolute;
  right: 0;
  height: 7px;
  width: 2px;
  background-color: #fff;
}
.table-tours-date .tour-period {
  text-align: left;
  padding-left: 40px;
}
.table-tours-date__header th>div:before {
  top: 0;
}

.table-tours-date__header th>div:after {
  bottom: 0;
}

.table-tours-date__header th:last-child>div:before,
.table-tours-date__header th:last-child>div:after,
.table-tours-date .no-decor:after,
.table-tours-date .no-decor:before {
  display: none;
}

.table-tours-date__header th:first-child>div {
    border-radius: 4px 0 0 4px;
}

.table-tours-date__header th:last-child>div {
  border-radius: 0 4px 4px 0;
}

.btn_book-date {
  padding: 4px 26px;
  text-transform: uppercase;
}

.not-available .tour-period {
  color: #cdcdcd;
}

.not-available .tour-places {
  color: #d54f4f;
}

.not-available .tour-cost {
  color: #cdcdcd;
}

.not-available__btn {
  padding: 4px 26px;
  text-transform: uppercase;
  background-color: #cbcbcb;
  border-radius: 4px;
  color: #fff;  
}

.table-tours-date tr.last-tr {
  background-color: transparent;
  border-bottom: 1px dashed #32bde7;
}

.bng-button {
  padding: 10px;
  background: #32bde7;
  display: inline-block;
  position: relative;
}
.bng-tooltip {
  position: relative;
  cursor: pointer;
}
span.bng-arrow {
  width: 0;
  height: 0;
  margin-left: -8px;
  border-style: solid;
  position: absolute;
  left: 50%;
  line-height: 0px;
}
.bng-arrow-down {
  border-width: 8px 8px 0 8px;
  border-color: #da2e2b transparent transparent transparent;
  top: 100%;
}
.bng-arrow-up {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #da2e2b transparent;
  top: -8px;  
}
#bngTooltip {
  padding: 10px;
  text-align: center;
  position: absolute;
  display: none;
  box-sizing: border-box;
}
#bngTooltip img {
  width: 100%;
}
#bngTooltip,
.bngTooltip-content {
  height: auto;
}



.th-modal {
  max-width: 480px;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}
.th-modal__inner {
  padding: 0 30px 40px 30px;
}
.th-modal__header {
  text-align: center;
    padding: 20px 45px;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
text-shadow: 1px 1px 1px #FFFFFF;
}


.th-modal__tour-opt {
  padding: 20px 0;  
}

.th-modal__tour-opt-item {
  margin-bottom: 7px;
}
.th-modal__tour-opt-item {
  font-weight: 700;
  font-size: 20px;
}
.th-modal__tour-opt-item span {
  color: #343434;
  font-weight: 300;
}

.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  padding: 8px 30px 6px 12px;
  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;
  max-width: 280px; 
  width: 68px;
  margin: 0 auto;
  
  border-radius: 4px;
  border: solid 2px #32bde7;
}
.nice-select:hover {
  border-color: #32bde7; 
}
.nice-select:active, 
.nice-select.open, 
.nice-select:focus {
  border-color: #32bde7; 
}
.nice-select:after {
  border-bottom: 2px solid #fe7e00;
  border-right: 2px solid #fe7e00;
  content: '';
  display: block;
  height: 7px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
        -ms-transform-origin: 66% 66%;
            transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 7px; 
}
.nice-select.open:after {
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg); 
}
.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
      -ms-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0); 
}
.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none; 
}
.nice-select.disabled:after {
  border-color: #cccccc;
}
.nice-select.wide {
  width: 100%; 
}
.nice-select.wide .list {
  left: 0 !important;
  right: 0 !important; 
}
.nice-select.right {
  float: right; 
} 
.nice-select.right .list {
  left: auto;
  right: 0; 
}
.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px; 
}
.nice-select.small:after {
  height: 4px;
  width: 4px; 
}

.nice-select.small .option {
  line-height: 34px;
  min-height: 34px; 
}
  
.nice-select .list {
  background-color: #fff;
  /*border-radius: 5px;*/
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform: scale(0.75) translateY(-21px);
      -ms-transform: scale(0.75) translateY(-21px);
          transform: scale(0.75) translateY(-21px);
  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9999; 
  width: 100%;
}
    
.nice-select .list:hover .option:not(:hover) {
  background-color: transparent !important; 
}
  
.nice-select .option {
  cursor: pointer;
  font-weight: 300;
  line-height: 40px;
  list-style: none;
  min-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 29px;
  text-align: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s; 
}
.nice-select .option:hover, 
.nice-select .option.focus, 
.nice-select .option.selected.focus {
  background-color: #f6f6f6; 
}
.nice-select .option.selected {
 /* font-weight: bold; */
 color: #fe7e00;
}
.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default; 
}
.no-csspointerevents .nice-select .list {
  display: none; 
}
.no-csspointerevents .nice-select.open .list {
  display: block; 
}

.table-tours-date .tour-active-part-cost {
  text-align: left;
  padding: 0 0 0 40px;
}

.th-modal .mfp-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 8040;
  background-image: url(../img/fancybox_sprite.png);
  opacity: 1;
  font-size: 0;
}

.th-modal .mfp-close:active {
    top: -18px;
}

.mfp-bg {
      background: rgba(34, 180, 224, 0.95) !important;
}

    $('.js-select-group').on('change', function(){

      $(this).closest('.js-individual-price-container').find('.js-tour-individual-price').html($(this).val());
      $(this).closest('.js-individual-price-container').find('.js-book-tour-individual').attr('data-tour-cost', $(this).find('option:selected').val());
      $(this).closest('.js-individual-price-container').find('.js-book-tour-individual').attr('data-num-participants', $(this).find('option:selected').text());
      
      console.log($(this).find('option:selected').val());
      console.log($('.js-book-tour-individual').data('tour-cost'));

      console.log($(this).find('option:selected').text());
      console.log($('.js-book-tour-individual').data('num-participants'));
    
    });