html {
  scroll-behavior: smooth !important;
}

.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
    background-color: #00c0ef !important;
}
.bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body {
    background-color: #269a26 !important;
}

.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
    background-color: #f8ac59 !important;
}

.bg-red, .callout.callout-danger, .alert-danger, .alert-error, .label-danger, .modal-danger .modal-body {
    background-color: #dd6861 !important;
}

.text-muted {
  color: #999999 !important;
}

.text-primary {
  color: #428bca !important;
}

.text-primary:hover {
  color: #3071a9 !important;
}

.text-warning {
  color: #f8ac59 !important;
}

.text-warning:hover {
  color: #e37905 !important;
}

.text-danger {
  color: #ed5565 !important;
}

.text-danger:hover {
  color: #c70e21 !important;
}

.text-success {
  color: #269a26 !important;
}

.text-success:hover {
  color: #51a653 !important;
}

.text-info {
  color: #31708f;
}

.text-info:hover {
  color: #245269;
}

.flash-info {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    background-color: #17a2b8 !important;
    color: #FFF !important;
    min-height: 30px !important;
    padding: 11px !important;
    font-weight: bold !important;
}

.flash-notice {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    background-color: #269a26 !important;
    color: #FFF !important;
    min-height: 30px !important;
    padding: 11px !important;
    font-weight: bold !important;
}

.flash-success {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    background-color: #269a26 !important;
    color: #FFF !important;
    min-height: 30px !important;
    padding: 11px !important;
    font-weight: bold !important;
}

.flash-error {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    background-color: #ed5565 !important;
    color: #FFF !important;
    min-height: 30px !important;
    padding: 11px !important;
    font-weight: bold !important;
}

.flash-warning {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    background-color: #f8ac59 !important;
    color: #FFF !important;
    min-height: 30px !important;
    padding: 11px !important;
    font-weight: bold !important;
}

.free {
  background-color: #e3fae3 !important;
  color: #000000 !important;
}

.reserved {
  background-color: #0055B4 !important;
  color: #000000 !important;
}

.unselectable {
  background-color: #e3fae3 !important;
  color: #000000 !important;
}

.places  {
  background-color: #e3fae3 !important; /* #ffe5c9 */
  color: #000000 !important;
}

.unavailable  {
  background-color: #FFF7F6 !important;
  color: #000000 !important;
}

.disclaimer-text {
  padding: 10px !important;
  font-size: 14px !important;
  white-space: normal !important;
  line-height: 1.5 !important;
}

.jumbotron {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    color: #000000 !important;
}

.bd-callout-danger {
    border-left-color: #d9534f !important;
}

.bd-callout-warning {
    border-left-color: #f0ad4e !important;
}

.bd-callout-info {
    border-left-color: #5bc0de !important;
}

.bd-callout {
    padding: 1.25rem;
    /*margin-top: 1.25rem;*/
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem;
    color: #000000 !important;
}

.sidebar-search {
    padding: 15px;
    background: white !important;
}

.login-page {
    background: url('/img/background.jpg') no-repeat; /* center center fixed !important;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}

.navbar-default {
    background-color: #017189 !important;
}

.navbar-top {
  background-color: #FFFFFF !important;
}

.navbar-logo {
  max-height: 150px !important;
  max-width: 150px !important;
}

.btn-info {
    color: #ffffff;
    background-color: #017189;
    border-color: #017189;
}

a, .table-responsive .btn {
    /*color: #FFFFFF !important;*/
}

.external-link {
    color: #017189 !important;
}

.external-link:first-child:before {
    content: "";
}

.external-link:first-child:after {
    content: "\f08e";
    float: right;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
    padding-left: 5px !important;
    padding-right: 10px !important;
}

.book-link {
    color: #000000 !important;
}

/* unvisited link */
.book-link:link {
  color: transparent;
  text-decoration: none;
}

/* visited link */
.book-link:visited {
  color: transparent;
  text-decoration: none;
}

/* mouse over link */
.book-link:hover {
  color: transparent;
  text-decoration: none;
}

/* selected link */
.book-link:active {
  color: transparent;
  text-decoration: none;
}

.book-link:first-child:before {
    content: "";
}

.book-link:first-child:after {
    /*content: "\f274";*/
    float: center;
    font-family: fontawesome;
    color: rgba(255,255,255,.6);
    padding-left: 5px !important;
    padding-right: 10px !important;
}

.book-link.places:first-child:after {
    /*content: "\f251";*/
    float: center;
    font-family: fontawesome;
    color: rgba(255,255,255,.6);
    padding-left: 5px !important;
    padding-right: 10px !important;
}

.book-link.reserved:first-child:after {
    /*content: "\f022";*/
    float: center;
    font-family: fontawesome;
    color: rgba(255,255,255,.6);
    padding-left: 5px !important;
    padding-right: 10px !important;
}

.state-payed {
  background-color: #269a26 !important;
  color: #ffffff !important;
}

.state-conf {
  background-color: #f8ac59 !important;
  color: #ffffff !important;
}

.state-pre  {
  background-color: #f8ac59 !important;
  color: #ffffff !important;
}

.state-canc  {
  background-color: #17a2b8 !important;
  color: #ffffff !important;
}

.state-penalty  {
  background-color: #d9534f !important;
  color: #ffffff !important;
}

.server-data-hour {
    color: #313131 !important;
    float: right;
    padding: 0px !important;
}

.server-data-hour-admin {
  color: #000000 !important;
}

.server-data-hour:first-child:before {
    content: "\f017";
    float: left;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
    padding-left: 5px !important;
    padding-right: 10px !important;
}

.login-logo-small {
    margin: auto;
    width: 100%;
    max-height: 150px;
    max-width: 150px;
    background-color: #FFFFFF !important; /*transparent !important;*/
    text-align: center;
}

.login-body {
  background-color: #FFFFFF !important; /*#017189 !important;*/
}

.btn-blue {
  background-color: #000 !important; /*#3c8dbc !important;*/
  border-color: #367fa9;
}

.login-panel .panel-heading {
  background-color:  #000 !important; /*#3c8dbc !important;*/
  opacity: 0.7;
  color: #FFF;
}

.img-square {
  border-radius: 0% !important;
  max-height: 200px !important;
  max-width: 200px !important;
}

.img-square-center {
  margin: auto;
  text-align: center;
  margin-bottom: 15px !important;
}

.img-square-full {
  max-height: 100% !important;
  max-width: 100% !important;
  margin-bottom: 15px !important;

}

.img-square-unavailable {
  opacity: 25% !important;
}

.img-square-caption {
  max-height: 100% !important;
  max-width: 100% !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* -------- Messages (Sweet Alert) ----------- */

.swal-overlay {
  background-color: rgba(0, 0, 0, 0.9) !important;
  background-color: #7D8086 !important;
}

.swal2-container.swal2-shown {
    background-color: rgba(0,0,0,0.9) !important;
    background-color: #7D8086 !important;
}

.swal-text {
  /*background-color: #FEFAE3;*/
  background-color: #FFFFFF;
  /*border: 1px solid #F0E1A1;*/
  border: 1px solid #FFFFFF;
  padding: 17px;
  display: block;
  margin: 22px;
  margin-top: 31px;
  margin-bottom: 56px;
  text-align: center;
  color: #3A3A3A;
  font-size: 25px !important;
  letter-spacing: 0.37px;
  line-height: 39px;
  text-align: center;
}

.swal2-content {
  margin-top: 31px !important;
  margin-bottom: 56px !important;
  color: #3A3A3A !important;
  font-size: 16px !important;
  letter-spacing: 0.37px !important;
  line-height: 25px !important;
  text-align: center !important;
}

.swal2-confirm {
  width: 318px !important;
  border-radius: 17px !important;
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22px  !important;
  line-height: 34px !important;
  text-align: center !important;
}

.swal-footer {
  /*background-color: rgb(245, 248, 250);*/
  background-color: #FFFFFF !important;
  margin-top: 32px;
  /*border-top: 1px solid #E9EEF1;*/
  border-top: 1px solid #FFFFFF;
  overflow: hidden;
  text-align: center;
}

.swal-button-previous {
  padding: 7px 19px;
  border-radius: 2px;
  background-color: #4962B3;
  font-size: 12px;
  border: 1px solid #3e549a;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}

.swal-button {
  height: 76px;
  width: 318px;
  border-radius: 17px;
  background-color: #E2574C !important;
  color: #FFFFFF;
  font-size: 29px;
  font-weight: 500;
  letter-spacing: 0.22px;
  line-height: 34px;
  text-align: center;
}

.swal-button:hover {
  background-color: #6c757d !important;
}

.swal2-popup {
  border-radius: 19px !important;
}

.swal2-title {
  font-weight: 700 !important;
  font-size: 2em !important;
  text-transform: uppercase !important;
}

/* -------- Canvas and image mapster ----------- */

.imagemapster-container,
.layer-parent {
    /*height: 750px;*/
    max-height: 100%;
}

.imagemapster-container {
    margin-bottom: 30px !important;
    margin-top: 0px !important;
}

.imagemapster-map {
    height: calc(100% - 29px);
    ;
}

.imagemapster-controls .fa-search-minus,
.imagemapster-controls .fa-search-plus {
    cursor: pointer;
    font-size: 25px;
}

.fix-to-content-h {
    /*display: block;*/
    margin: 0 auto;
    max-height: 100%;
}

/* -------- Loader and spinner ----------- */

#loader {
  /*position: relative;*/
  /*left: 50%;*/
  /*top: 50%;*/
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

.loader-content {
  text-align: center;
}

.loader-content-hide {
  display: none;
}

.page-header {
    margin-top: 10px; 
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 20px;
}

.parallax-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* 400px;*/
    min-height: 60px; /* 105px;*/
    /*background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mountain-range.jpg);*/
    /*background-image: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/mountains.jpg);*/
    /*background-image: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/forest.jpg);*/
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(/img/background.jpg);
    background-size: cover;
    background-position: center;
    background-color: rgba(#000, 1.0) !important;
    opacity: 1.0 !important;
    overflow: hidden;
    .parallax-nav__inner{
        z-index: 9999 !important;
    }
    h1{
        color: #FFFFFF !important;
        font-size: 5vw;
    }
    &:before{
        content: "";
        background: rgba(#000, 0);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: background 400ms;
    }
    &.parallax-fixme{
        &:before{
            background: rgba(#000, 0.8) !important;
            z-index: 999999 !important;
            background-color: rgba(#000, 1.0) !important;
            opacity: 1.0 !important;
        }
    }
}

.parallax-nav-title{
    color: #FFFFFF !important;
    font-size: 2vw;
}

.parallax-page-content{
    z-index: -1 !important;
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    line-height: 1.625;
}

.parallax-logo {
  width: 100%;
  margin: 0 auto;
  max-width: 265px;
  margin-top: 20px;
}

.parallax-fixme{
    background: rgba(#000, 0.8) !important;
    z-index: 999999 !important;
    background-color: rgba(#000, 1.0) !important;
    opacity: 1.0 !important;
}

#page-custom-wrapper {
  width: 100%;
  margin: auto;
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-left: 21% !important;
  padding-right: 21% !important;
  background-color: #F5F6FA !important;
}

.booking-header {
  background-color: #FFFFFF !important;
  width: 100% !important;
  margin: auto !important;
  margin-top: 40px !important;
}

.booking-header-title {
  margin-top: 0px !important;
  margin-bottom: 36px !important;
  color: #313131;
  font-family: "Montserrat";
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 49px;
  text-align: center;
}

.booking-header-title.t-left{
  text-align: left !important;
}

.booking-background {
  background-color: #F5F6FA !important;
  padding-bottom: 40px !important;
}

.booking-rectangle {
  box-sizing: border-box;
  border: 1px solid rgba(26,26,139,0.24);
  background-color: #FFFFFF;
  padding: 40px !important;
}

.booking-rectangle-thin {
  padding: 10px !important;
}

.booking-area {
  margin-top: 36px !important;
  margin-bottom: 21.5px !important;
}

.booking-area-title {
  padding-left: 13px !important;
  color: #313131;
  font-family: "Montserrat";
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
  text-transform: uppercase !important;
}

.booking-actions {
  margin-top: 10px;
  /*text-align: right;*/
  text-align: center !important;
}

.booking-row {
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
}

.booking-action {
  box-sizing: border-box;
  height: 48px;
  width: 256px;
  border: 1px solid rgba(151,151,151,0.55);
  background-color: #017189;
}

.booking-action-secondary {
  box-sizing: border-box;
  height: 48px;
  width: 256px;
  border: 1px solid rgba(151,151,151,0.55);
  background-color: #FFFFFF;
}

.booking-action-green {
  box-sizing: border-box;
  height: 48px;
  width: 256px;
  border: 1px solid rgba(151,151,151,0.55);
  background-color: #009D00;
}

.booking-action-danger {
  box-sizing: border-box;
  height: 48px;
  width: 256px;
  border: 1px solid rgba(151,151,151,0.55);
  background-color: #dd6861;
}

.booking-action-danger-area {
  text-align: right !important;
}

.booking-action-text {
  color: #FFFFFF;
  font-family: "Montserrat";
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 27px;
  text-align: center;
}

.booking-action-text-secondary {
  color: #017189;
  font-family: "Montserrat";
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 27px;
  text-align: center;
}

.booking-action-text-danger {
  color: #FFFFFF;
  font-family: "Montserrat";
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 27px;
  text-align: center;
}

.booking-privacy {
  padding-top: 20.5px !important;
  color: #909090;
  font-family: "Montserrat";
  font-size: 14px;
  letter-spacing: 0;
  line-height: 19px;
  text-align: center;
}

.booking-privacy-warning {
  padding-top: 20.5px !important;
  width: 42.29%;
  margin: auto;
  color: #000000;
  font-family: "Montserrat";
  font-size: 16px;
  letter-spacing: 0;
  line-height: 22px;
  text-align: center;
}

.booking-back-area {
  margin-top: 30px !important;
  cursor: pointer;
}

.booking-back-icon {
  font-size: 20px;
  font-weight: bolder;
  color: #313131;
}

.booking-back-title {
  padding-left: 5px !important;
  color: #313131;
  font-family: "Montserrat";
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
}

.booking-label {
  color: #313131;
  font-family: "Montserrat";
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 20px;
  text-transform: uppercase !important;
}

.booking-control {
  box-sizing: border-box;
  background-color: #F5F6FA !important;
  border-radius: 0px !important;
}

.booking-control:focus {
  border: 1px solid #017189 !important;
}

.booking-control[disabled], .booking-control[readonly] {
    cursor: not-allowed;
    background-color: #BFBFBF !important;
}

.booking-cancel-area {
  margin: auto !important;
  margin-top: 25px !important;
  margin-bottom: 25px !important;
  width: 95% !important;
  background: white;
  text-align: center;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
}

.booking-cancel-area iframe {
  width: 100% !important;
  height: 500px !important;
}

.booking-cancel-border {
  height: 12px;
  width: 100%;
  background-color: #dd6861;
}

.booking-cancel-title {
  margin-top: 23px !important;
  color: #313131;
  font-family: "Montserrat";
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 30px;
  text-align: left !important;
  padding-left: 50px !important;
}

.booking-cancel-text {
  margin-top: 7px !important;
  margin-bottom: 39px !important;
  color: #313131;
  font-family: "Montserrat";
  font-size: 18px;
  letter-spacing: 0;
  line-height: 26px;
  text-align: left !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
}

.booking_cancel_action {
  margin: auto !important;
  text-align: center;
}

.booking-new-border {
  height: 12px;
  width: 100%;
  background-color: #017189;
}

.companion-item{
  border-bottom: 1px solid rgb(189, 189, 189);
  margin-bottom: 20px;
  padding: 20px 0;
}

.three-column-layout{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 95%!important;
  margin: auto !important;
}

.three-column-layout .booking-cancel-area{
  background: white;
  flex:1 1 30%;
  margin-left:10px!important;
  margin-right:10px!important;
}

.two-column-layout{
  display: flex;
  justify-content: space-between;
  width: 95%!important;
  margin: auto !important;
}

.two-column-layout .booking-row{
  display:unset!important;;
}

@media (max-width: 768px) {
  .two-column-layout{
    flex-wrap: wrap;
  }
}

.two-column-layout .booking-cancel-area{
  background: white;
  flex:1 1 48%;
  margin-left:10px!important;
  margin-right:10px!important;
}

.icon-center{
  text-align: center;
}

.companion-items{
  display: flex;
  flex-wrap: wrap;
}

.companion-items .form-group{
  flex:1 1 48%;
  margin-left:5px;
  margin-right:5px;
}

.booking-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 20px !important;
}

.booking-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-basis: 100%;
  flex: 1;
}

.equipment-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}


.equipment-container .equipment-column{
  flex:1 1 30%;
  margin:10px;
  text-align: center;
}

.welcome-column{
  text-align: left;;
}

.booking-column .btn{
  margin-top: 40px !important;
}

.booking-text {
  color: #313131 !important;
}

.booking-button {
  color: #009D00;
  box-sizing: border-box !important;
  border: 1px solid #009D00 !important;
  border-radius: 7px !important;
  width: 90px !important;
  padding: 5px !important;
  margin: auto !important;
  margin-top: 10px !important;
}

.booking-table {
    border-collapse: separate;
    border-spacing: 0 15px;
    border: 0px solid #dddddd !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom-width: 0px !important;
}

.booking-table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 0px solid #dddddd !important;
    margin-top: 10px !important;
}

.box-body.booking_admin{
  display:flex;
  flex-wrap: wrap;
}

.booking_admin .form-group{
  flex:1 1 48%;
  margin:5px;
}

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 0px solid #dddddd !important;
    margin-top: 10px !important;
}

.table-bordered {
  border: 0px solid #dddddd;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 0px solid #dddddd;
}

table {
  border-collapse: separate;
  border-spacing: 0 5px;
}

.swal2-styled.swal2-cancel{
  font-size: 22px!important;
  border-radius: 15px!important;
}

.price-breakdown li{
  text-align: left!important;
}

input[type="checkbox"]{
  width:20px!important;
  height:20px!important;
  margin-left: 15px;
}

/* -------- File validation styles ----------- */
.file-error {
    border: 2px solid #dc3545 !important;
    background-color: #f8d7da !important;
}

.error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.error-message.show {
    display: block;
}

.companion-item.has-error {
    border-color: #dc3545;
    background-color: #f8d7da;
}

.required-field {
    border-color: #e74c3c !important;
}

.required-field:focus {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25) !important;
}

/* -------- Responsive design ----------- */

@media only screen and (max-width: 768px) {

  /* For mobile phones: */

  #page-custom-wrapper {
    width: 100% !important;
    margin: auto;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .booking-action {
    margin-top: 10px !important;
  }

  .booking-privacy-warning {
    width: 90% !important;
  }
}

/* DataTables Responsive Styles */
.table-responsive {
    border: none;
    transition: all 0.3s ease;
    overflow-x: visible !important;
}

/* Force table to be responsive immediately */
#dataTables-example {
    width: 100% !important;
    max-width: 100%;
}

/* DataTables responsive styles */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    background-color: #337ab7;
    border-radius: 3px;
    transition: all 0.2s ease;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    background-color: #d33724;
}

/* Smooth transitions for responsive changes */
table.dataTable tbody tr,
table.dataTable tbody td {
    transition: all 0.2s ease;
}

/* DataTable state background colors - override existing state classes */
.state-payed {
    background-color: #269a26 !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
}

.state-conf {
    background-color: #cce4f0 !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
}

.state-pre {
    background-color: #f8ac59 !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
}

.state-canc {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
}

.state-penalty {
    background-color: #f5c6cb !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
}

/* Ensure state colors work in responsive mode */
table.dataTable tbody tr.child ul li .state-payed {
    background-color: #269a26 !important;
    color: #ffffff !important;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
}

table.dataTable tbody tr.child ul li .state-conf {
    background-color: #cce4f0 !important;
    color: #ffffff !important;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
}

table.dataTable tbody tr.child ul li .state-pre {
    background-color: #f8ac59 !important;
    color: #ffffff !important;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
}

table.dataTable tbody tr.child ul li .state-canc {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
}

table.dataTable tbody tr.child ul li .state-penalty {
    background-color: #f5c6cb !important;
    color: #ffffff !important;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
}

/* Hover effects for state cells */
.state-payed:hover {
    background-color: #228a22 !important;
}

.state-conf:hover {
    background-color: #b8daff !important;
}

.state-pre:hover {
    background-color: #f6a142 !important;
}

.state-canc:hover {
    background-color: #138496 !important;
}

.state-penalty:hover {
    background-color: #f1a8b0 !important;
}

/* Custom responsive breakpoints */
@media screen and (max-width: 768px) {
    .dt-buttons {
        text-align: center;
        margin-bottom: 10px;
    }
    
    .dt-buttons .btn {
        margin: 2px;
    }
    
    .dataTables_length,
    .dataTables_filter {
        text-align: center;
        margin-bottom: 10px;
    }
    
    .dataTables_info,
    .dataTables_paginate {
        text-align: center;
        margin-top: 10px;
    }
    
    /* Force table to recalculate on mobile */
    #dataTables-example {
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    #dataTables-example {
        font-size: 11px;
    }
    
    .dt-buttons .btn {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Improve mobile button styling */
.dt-button {
    margin: 2px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    transition: all 0.2s ease;
}

/* Better spacing for mobile */
.dataTables_wrapper .row {
    margin: 0;
}

.dataTables_wrapper .col-sm-6 {
    padding: 5px;
}

/* Child row styling */
table.dataTable tbody tr.child {
    background-color: #f9f9f9;
    transition: all 0.3s ease;
}

table.dataTable tbody tr.child ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

table.dataTable tbody tr.child ul li {
    border-bottom: 1px solid #eeeeee;
    padding: 5px 0;
    transition: all 0.2s ease;
}

table.dataTable tbody tr.child span.dtr-title {
    font-weight: bold;
    display: inline-block;
    min-width: 100px;
}

/* Ensure smooth column visibility changes */
table.dataTable thead th,
table.dataTable tbody td {
    transition: opacity 0.2s ease, width 0.2s ease;
}

/* Loading state improvements */
.dataTables_processing {
    z-index: 1001;
}

/* -------- Admin Booking Form Styles ----------- */

.admin-booking-form {
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding: 20px;
}

.section-title {
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3498db;
    display: flex;
    align-items: center;
}

.section-title i {
    margin-right: 10px;
    color: #3498db;
    font-size: 20px;
}

.form-group-enhanced {
    margin-bottom: 20px;
}

.form-group-enhanced label {
    font-weight: 600;
    color: #34495e;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.form-group-enhanced label i {
    margin-right: 8px;
    color: #7f8c8d;
    width: 16px;
}

.form-control-enhanced {
    border: 2px solid #e1e8ed;
    border-radius: 6px;
    padding: 5px 15px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-control-enhanced:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.readonly-field {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.extension-history-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.extension-history-table th {
    background: #3498db;
    color: white;
    font-weight: 600;
    padding: 15px;
    border: none;
}

.extension-history-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f2f6;
}

.companions-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.companions-table th {
    background: #27ae60;
    color: white;
    font-weight: 600;
    padding: 15px;
    border: none;
}

.companions-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f2f6;
}

.action-buttons {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-enhanced {
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    border: none;
}

.btn-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-success-enhanced {
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    color: white;
}

.btn-danger-enhanced {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    color: white;
}

.btn-primary-enhanced {
    background: linear-gradient(45deg, #3498db, #2980b9);
    color: white;
}

.btn-warning-enhanced {
    background: linear-gradient(45deg, #f39c12, #e67e22);
    color: white;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-free {
    background: #d4edda;
    color: #155724;
}

.status-paid {
    background: #fff3cd;
    color: #856404;
}

.no-data-message {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
    font-style: italic;
}

/* Admin Form Responsive Design */
@media only screen and (max-width: 768px) {
    .admin-booking-form {
        border-radius: 5px;
        margin: 10px;
    }
    
    .section-card {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .section-title {
        font-size: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .section-title i {
        margin-bottom: 5px;
    }
    
    .btn-enhanced {
        width: 100%;
        margin: 5px 0;
        padding: 15px;
    }
    
    .form-control-enhanced {
        padding: 12px 15px;
        font-size: 16px; /* Prevents zoom on mobile */
    }
    
    .extension-history-table,
    .companions-table {
        font-size: 12px;
    }
    
    .extension-history-table th,
    .companions-table th {
        padding: 10px 8px;
    }
    
    .extension-history-table td,
    .companions-table td {
        padding: 8px 6px;
    }
}

@media only screen and (max-width: 480px) {
    .section-card {
        padding: 10px;
    }
    
    .btn-enhanced {
        padding: 12px;
        font-size: 14px;
    }
    
    .status-badge {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* -------- Extend Booking Success Styles ----------- */

.extend-booking-success {
    padding: 20px 0;
}

.extend-booking-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

.extend-booking-success .alert {
    border-radius: 8px;
    border: 1px solid transparent;
}

.extend-success-alert {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #0f3b1a !important;
    margin-bottom: 20px;
}

.extend-success-heading {
    margin-bottom: 10px;
}

.extend-success-text {
    margin-bottom: 15px;
}

.extend-success-details {
    margin-bottom: 0;
}

.extend-success-divider {
    border-top: 1px solid #c3e6cb;
}

.extend-success-alert h4,
.extend-success-alert p,
.extend-success-alert strong {
    color: white !important;
}

.extend-email-alert {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
    margin-bottom: 0;
}

.extend-email-icon {
    margin-right: 8px;
}

.extend-booking-success .bd-callout {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem;
    background-color: #ffffff;
}

.extend-details-callout {
    border-left-color: #5bc0de;
    margin-bottom: 20px;
}

.extend-details-title {
    margin-bottom: 15px;
    color: #31708f;
}

.extend-detail-item {
    margin-bottom: 8px;
}

.extend-booking-actions {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 20px 0;
}

.extend-action-link {
    margin: 0 10px;
    vertical-align: middle;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.extend-booking-success .booking-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
}

@media (max-width: 768px) {
    .extend-action-link {
        display: block;
        margin: 10px auto;
        width: 80%;
        max-width: 300px;
    }
}