﻿
#booking-heading{
	margin-top:110px;
}
.booking-section .btn-outline-secondary{
	max-width:100px;
	margin:5px 5px;
}

.booking-section .booking-table {
    position: relative;
    text-align: center;
    z-index: 10;
    background-color:black !important;
    min-height:340px; 
}

.booking-section .booking-table{
  /*width: calc(100vw / 7);*/
}

.booking-section .sidecol{
	margin-top:30px;
}

.booking-section .booking-table th{
   text-transform: uppercase;
   font-weight: 700;
   background-color:black !important;
   color:#fff;
}
.booking-section .booking-table tr td {
    font-size: 20px;
    font-weight:bold;
    vertical-align: middle;
    background-color:black !important;
    color:#fff; 
}
.booking-section .booking-table tr td span {
    font-size: 12px;
    /*line-height:10px;*/
    margin-top:5px !important;
    vertical-align: middle;
    background-color:black !important;
    color:#fff;
    font-weight:normal; 
}
.bi-arrow-left-circle-fill,
.bi-arrow-right-circle-fill{
	font-size: 24px;
}
.booking-section .booking-table tr td a{
	/*color:var(--default-color);*/
	color:#fff;
	font-weight:bold;
	line-height: 20px; 
	font-size: 22px; 
	display: block; 
	height: 20px;
	transition: transform 0.25s 0s;
	transform: scale(1);
}
.booking-section .booking-table tr td a:hover{
    color: var(--accent-color);
    font-size:24px;
    /*line-height: 1.5rem;*/
    display:block;
}
.booking-section .booking-form{
	padding-left:15px;
}
.booking-section .booking-form input[type=text],
.booking-section .booking-form input[type=email],
.booking-section .booking-form input[type=number],
.booking-section .booking-form input[type=date],
.booking-section .booking-form input[type=time],
.booking-section .booking-form input[type=tel],
.booking-section .booking-form select,
.booking-section .booking-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 20%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.booking-section .booking-form input[type=text]:focus,
.booking-section .booking-form input[type=email]:focus,
.booking-section .booking-form input[type=number]:focus,
.booking-section .booking-form input[type=date]:focus,
.booking-section .booking-form input[type=tel]:focus,
.booking-section .booking-form input[type=time]:focus,
.booking-section .booking-form select:focus,
.booking-section .booking-form textarea:focus {
  border-color: var(--accent-color);
}

.booking-section .booking-form input[type=text]::placeholder,
.booking-section .booking-form input[type=email]::placeholder,
.booking-section .booking-form input[type=number]::placeholder,
.booking-section .booking-form input[type=date]::placeholder,
.booking-section .booking-form input[type=tel]::placeholder,
.booking-section .booking-form input[type=time]::placeholder,
.booking-section .booking-form select::placeholder,
.booking-section .booking-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.booking-section .booking-form select{
	background-color: var(--background-color);
}
.booking-section .booking-form button[type=submit] {
  color: var(--default-color);
  border: 2px solid var(--accent-color);
  background: transparent;
  padding: 14px 60px;
  transition: 0.4s;
  border-radius: 50px;
}

.booking-section .booking-form button[type=submit]:hover {
  background: var(--accent-color);
}

.booking-section .booking-form ,form-check-inline{
	text-align:left !important;
}

@media (max-width: 600px) {
  .booking-section .booking-table{
	min-height:auto;
}
  .booking-section .sidecol{
	margin-top:0;
  }
  .booking-section .booking-table {
     overflow-x: hidden;
     margin-left:13px;
   }
    
}