body{
    padding-top:0px;

}

.btn-success{
    background-color:rgb(2,25,54)!important;
}

.btn-success:hover{
     background-color:rgb(60,60,60);
}

.menu-button{
    color:white;
}

.fs-08 {
    font-size:0.8rem;
}



input[type=checkbox]{
    width:25px;
    height:25px;
    margin-bottom:3px;
    margin-top:3px;
    margin-right:7px
}

.form-check{
    display:flex;
    align-items:center;
}


input[type=checkbox]{
    width:20px;
    height:20px;
    margin-bottom:3px;
    margin-top:3px;
    margin-right:7px
}

.form-check{
    display:flex;
    align-items:center;
    
}

#filter-selection-options > div.button-holder{
    margin-top: 5px;
    display:flex;
    flex-direction: row!important;
    justify-content:space-around;
    padding:0;
    border:none;
}
.dates-avail-group {
    flex-direction: row!important;
    font-size: 0.7rem;
    margin-top: 5px;
    /* border-bottom: 1px solid #001788; */
    cursor: pointer;
    max-width: 500px;
    /* border-top: 1px solid #001788; */
    /* border-bottom-right-radius: 5px; */
    /* border-top-right-radius: 5px; */
    align-items: center;
    background-color: #eee;
}

.dates-avail-group .number{
    padding:0;
    /* height: 1.4rem; */
    font-size:1.3rem;
    font-weight: 600;
}
.dates-avail-group .month{
    padding:0;
    height: 0.9rem;
    display:none;
}
.dates-avail-group .day{
    padding:0;
    height: 0.9rem;
    margin-bottom:0.4rem;
    display:none;
}

.dates-avail-group .selected{
 border: 1px solid black;
 border-radius:10px;
 font-weight: 500;
 font-size:0.7rem;
    .filter-edit {
 flex-basis: 80px;
 flex-grow: 1;
 border: 1px solid #333;
 padding: 0.2rem 0.6rem 0.2rem 0.6rem;
 background-color: #EEE;
 border-radius: 5px;
 height: min-content;
 /* text-align: center; */
 font-weight: 500;
 background-color: #021936;
 color: white;
 margin-left: 0.5rem;
 height: 100%;
}
 background-color: #021936;
 margin: 2px 5px 2px 5px;
 text-decoration: none;
 opacity: 1;
 box-shadow: 0px 2px 2px 1px #332c2c;
}
.dates-avail-group .selected .number,.dates-avail-group .selected .month{
    font-size: 1.3rem;
    color: white;
    height: 1.5rem;
    
}

.dates-avail-group .selected .month{
    display:block;
}

.dates-avail-group .selected .day{
    display:block;
}

#date-manager{
    display:flex;
    flex-direction: column;
    box-shadow: none;
    overflow: hidden;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 45px;
    background-color: #eee;
    /* border-bottom: 1px solid #666; */
}

div#date-manager.focus {
    background: #00000006;
}

.btn-update{
    background-color: #021936;
    color: #ffffff;
    font-weight:bold;
    /* border:2px solid #910000; */
    margin:0.8rem;
}
.btn-cancel{
    background-color:#EEE;
    border:1px solid #333;
    font-weight:600;
    margin:0.8rem;
}

.text-blue{
    color:blue;
}
.bg-eee{
    background-color:#eee;
}
.dates-avail-container {
    flex: 1 1 auto;
    text-align: center;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #021936;
    color: #EEE;
}

div#d-1.disabled {.disabled:;opacity: 50%;cursor: pointer;}

.dates-avail {
    /* background: white; */
    color: black;
    /* border-bottom: 1px solid #000; */
    font-weight: 400;
    border-radius: 2px;
}

    .dates-avail.available.selected {
        /* background: rgb(158, 230, 145, 1); */
        flex: 2 1 auto;
    }

.dates-avail-form-control {
    font-weight: bold;
    color: white;
    background: #910000;
}

.filter{
    padding:2px 10px 2px 10px;
    margin: 4px 2px 4px 10px;
    
    border: 1px solid;
    border-radius:10px;
    
}
.filter::before{
    content:"X ";
}
.focus {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    overflow-y: scroll;
    
    max-height: 98svh !important;
    max-height: 90vh;
    
    z-index: 9999;
}

.focusable .card-header{/* background-color: rgb(32 141 202 / 40%); */color: silver;padding-top: 8px;width: 100%;position: absolute;}
.focusable  h5 {font-size:1.1em;}
.focusable.focus  h5 {font-size:1.3em;}
.focus > .card{
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
}
.card-header{
    padding-bottom:2px!important;
}
#filter-selection.focus{
    width:auto;
    padding: 20px!important;
     box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8);
    border-radius:5px;
}
.focus .boats-avail div{
    flex-direction: column;
    flex-basis: 33.3%;
    flex-grow: 1;
    height: auto;
    display:flex;
    /* justify-content: flex-end; */
}

.boat-card-heading {
    background: rgb(235,237,240);
    padding: 0.3rem 0rem 0.4rem 0.5rem;
    font-weight: 500!important;
    color: black;
    font-size:0.9rem;
    /* border-bottom: 1px black solid; */
    /* border-top: 1px black solid; */
}

#AvailIcon{display:none;}

#AvailIcon, .avail-badge{
    height:fit-content;
    width: auto;
    font-style:normal;
    position: absolute;
    bottom: -0.4rem;
    left: 0.4rem;
    text-wrap:nowrap;
}

.avail-badge{
     bottom: 1rem;
    right: 0.4rem;
    left:auto;
    font-size:1.2rem;
}

#AvailIcon div, .avail-badge div{
    border-radius: 12px;
    color: white;
    padding: 4px 1em 4px 1em;
    font-size: 0.8rem;
    border: 0.6px solid #999;
    width: auto;
}

.avail-badge div{
    font-size: 0.8rem;
    font-weight: 700;
}

.avail-icon div.d-avail, .avail-badge div.d-avail{display:none!important;}
.avail-icon div.d-not-avail, .avail-badge div.d-not-avail{display:block;}
.avail-icon.available div.d-avail, .avail-badge.available div.d-avail{display:block!important;}
.avail-icon.available div.d-not-avail, .avail-badge.available div.d-not-avail{display: none!important;}

#avail-icon:not(.available) a{
    color:red!important;
}

.d-not-avail, d-not-avail:hover{
    background-color:#e37777;
    color:white;
    border-color:#e37777;
}

.available .d-not-avail{
    display:none;
}

.d-avail{
    background-color:green;
    display:none;
}

.price-line > div:nth-child(2){
    font-size:1.1rem;
    font-weight:500;
}

.boat-item.not-avail .d-not-avail{
    display:block;
}

.boat-item.available .d-avail{
    display:block;
}

#AvailableBoats.not-avail a{
    display:none;
}

#AvailableBoats.not-avail .d-not-avail{
    display:block!important;
}

#AvailableBoats.not-avail .d-avail{
    display:none!important;
}
.card-experience .card-footer{
    flex-basis:100%;
}

.show-all {
    border:1px solid #999;
    background: #EEE;
    font-weight:700;    
}

.show-all a, .show-all a::visited{
    font-weight:500;
    font-size: 1rem;
    background:#499e49;
    color:white;
    padding:20px 5px;
    margin:7px;
}


.boat-container-overlay.active{
    position:absolute;
    width:100%;
    height:100%!important ;
    background-color:white;
    opacity:70%;
    z-index:100;
}
    .boat-container-overlay.active .max-ppl{
        color:red;
        text-decoration:underline;
    }

    div.boat-tiles {
        padding: 0;
        text-align: center;
        margin: 2px;
    }

.boat-tiles img{
    flex-basis:30%;
    flex-grow: 1;
    /* min-width: 100px; */
    /* max-width:150px; */
}

.boat-tiles .avail-icon {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
}
.boat-tiles .avail-icon div {
    padding: 1px 0.4rem 1px 0.4rem;
    border:1px solid #FFF;
    border-radius:5px;
    font-weight:500;
    color:white;    
}

.boat-tiles.available  div.d-avail{
    display: block!important;
} 
.boat-tiles.available  div.d-not-avail{
    display: none!important;
} 

    .dates-avail-form-control.available {
        background: green;
    }



.date-selected {
    font-weight: bold;
    font-size: 1em;
    background: #FFF;
    color: black;
    border-top: 2px solid #910000;
}

.date-picker-holder {
    display:none;
}

.date-picker-holder > div{
    margin-top:10px;
    margin-bottom:10px;
    padding: 15px;
    border: 1px solid #910000;
    background: #e2d7d7;
    border-radius: 8px;
    box-shadow: 0px 0px 4px 4px #333;
    color: white;
}



.focus .date-picker-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.focus .dates-avail-group {
    display: none!important;
}

.focus .card-img-holder img{
    display:none;
}

.focus .card-header{
   position:relative;
}

.focus .avail-badge{
    display:none;
}

#filter-selection{
    display:none;

}
#filter-selection{
    display:none;
    
    padding-top: 20px;
    padding-bottom: 20px;

    margin-left:5px;
    margin-right:5px;
    
}

.focus#filter-selection  {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    color: #393939;
    
}

#filter-selection-options > div {
    border: 1px solid #6c6b6b;
    border-radius:5px;
    padding: 0.7rem;
    margin-top:0.5rem;
    
    display:flex;
    flex-direction:column;
}

#MaxPpl{
        margin-bottom:10px
}

#sliderContainer{
    display:flex;
    flex-direction: row;
}

#sliderContainer div{
    flex-grow:1;
}

.slider-label{
    font-size: 0.8rem;
    margin-top: -1rem;
    font-weight: bold;
}

#capacityValue{
    font-weight:bold;
    padding:0.2rem 1rem 0.2rem 1rem;
    border:1px solid #888;
    border-radius:5px;
    flex-grow:0!important;
    flex-basis:content;
    margin-right:1rem;
    margin-top:auto;
    margin-bottom:auto;
    background:green;
    color:white;
}




#filter-selection-options .btn-toggle{
    background: #c863638c !important;
    color: #dee2e6;
   flex-wrap:nowrap;
    display:flex;
    font-size:0.9rem
}

#filter-selection-options .btn-toggle.active{
    background:green!important;
    font-weight:bold;
    color:white;
    text-decoration:none;
}

.pills-filter button{
    background: #af3333 !important;
    color: #dee2e6;
    /* text-decoration: line-through; */

}
.btn i{
    display:none;
}
.btn.active i{
    display:inline-block;
    margin-top:5px;
    margin-right:5px;
}


    .pills-filter button.active {
        background: green!important;
        font-weight: bold;
        color: white;
        text-decoration: none;
        /* border-color: #0085ff !important; */
    }


.focus::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

/* Hide scrollbar for IE, Edge, and Firefox */
.focus {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.focus h5{
    
}
/* Overlay for the background */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #555555b5;
    z-index: 9998;
}

.boats-avail{
    /* flex-basis:70%; */
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .focus .d-focus {
        display: block !important;
    }

    .focus .h-focus {
        display: none;
    }

    .focus-3 {
        height:100%;
    }

    .focus .col-12 {
        
        width:50%;
        padding: 0.3em;
        
    }

    .focus-show {
        display:none;
    }
    .focus .focus-show{
        display: flex!important;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        position:relative;
    }

    .focus .focus-show.show-all{
        display:none!important;
    }

    .focus .has-hidden .focus-show.show-all{
        display:flex!important;
    }
    .focus .has-hidden .focus-show.show-all.d-none, .focus .has-hidden.not-avail .show-all{
        display:none!important;
    }

.d-focus {
    display: none;
}

.focus .boats-avail {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    justify-content: space-around;
}

.focus-3{
    margin-top:2rem;
}
.focus .boat-option-lg {
    flex-basis: 185px!important;
    flex-shrink:0;
    flex-grow: 1;
    border: 1px solid #999;
    padding-bottom:0.3rem;
}

.dates-avail.selected .day {
    color:red;
    font-size: 1.2em;
    font-weight:bold;
    height:1em;
}

.dates-avail.selected{
    border-bottom: 3px solid #000491;
    font-weight: 600;
    opacity: 1;
}
   
.available_div{
    color:white;
    background:green;
    text-align:center;
    width:100%;
}

.card, .card-header:first-child{
    border-radius: 0;
}


.card-header{
    color:white;
    font-weight:bold;
   background: linear-gradient(90deg, #021936, #0219364d);
}

.card-header.fw-semibold.text-white {}



.focus-3{
    background-color:#fff;
    
}

.card-horizontal-container{
    display:flex;
    flex-direction:column;
    flex-grow: 1;
    /* background: linear-gradient(180deg, #03486f, transparent); */
    color: black;
    background-color: #ebedf0;
}

.card-horizontal-container .card-body{
    flex-grow:1;
    color: b;
}

.card-experience {
    background-color: #4c80b5;
    color: #000;
}

.boat-details > div{
    flex-direction:row!important;
        justify-content:start;   
}



.boat-details > div >div{
    flex: 0 0 auto!important;
    margin-top:auto;
    margin-bottom:auto;
}

.boat-details > div > div:nth-child(1) {
    flex: 0 0 20px!important;
}

.card.card-experience > .card-body {padding: 0;}

.card-experience .card-header i{
    color:white;
}

.card-experience > .card-footer{
    padding:3px;
}

.card-experience i{
    display: inline-block;
    color:#999999;
}

#availIcon i, #AvailIcon i{color:white;}


.focus .boats-avail .avail-icon.available span {
    background-color: green !important;
}
.focus .available_div{
    font-size:1.1em;
    font-weight:bold;
}
.focus-3{
    margin:0.5em 0.3rem 0.5rem 0.3rem;
}

.show-all{
    border:3px dotted #AAA;
    font-weight:700;
    background-color:#EEE;
}
.show-all a, .show-all a:visited {
    font-weight:500;
    font-size: 1.2rem;
    background:#499e49d1;
    color:white;
    padding:30px 8px;
    margin:7px;
}

.focus .boats-avail.focus-show div{
    border: 1px #333 solid;
    height:100%;
}

.focus .focus-hide{
    display: none!important;
}

.card-footer .focus-hide{
    font-size:0.8rem;
  text-align:center;
    width:100%;
}

.filter-edit{
    flex-basis: 80px;
    flex-grow: 1;
    border: 1px solid #333;
    padding: 0.2rem 0.6rem 0.2rem 0.6rem;
    background-color: #EEE;
    border-radius: 5px;
    height: min-content;
    /* text-align: center; */
    font-weight: 500;
    background-color: #021936;
    color: white;
    margin-left: 0.5rem;
    /* height: 2rem; */
    display: flex;
    align-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.8rem;
}

div#filter-edit .fa {
    margin-right: 0.4rem;
}

    .focus .boats-avail .avail-icon span {
        border-radius: 30px;
        background-color: white;
        width: 1.2em;
        height: 1.2em;
        line-height: 1.2em;
        background-color: red;
        color: white;
    }

    .focusable{
       display:flex;
       flex-direction:column;
       justify-content: space-between;
    }

    .focusable .card {
        flex-grow:1;
        justify-content: flex-start;
    }
    .focusable .card-body{
        flex-grow:1;
    }

.card-horizontal-container .card-body {
    /* background: linear-gradient(180deg, #03486f, transparent); */
    /* background-color: #03486f; */
    color:black;
    
}



#search-day > .month, #search-day > .number{
    display:inline-block;
}


.focus .boats-avail {
    flex-direction: row;
    /* flex-basis:10px; */
    /* flex-grow: 0; */
    color:#000;
    font-weight:500;
    background-color: white;
}

.focus-show.hidden-boat{
    display:none!important;
}

.msg-avail{
    color: green;
    /* background: white; */
    font-size: 0.8em;
    font-weight:bold;
}

.dates-avail .day{
    font-size: 1rem;
    line-height: 1;
}

.loading {
    position: relative;
    opacity:30%;
}


.loading::after {
    content: '';
    position: absolute;
    top: 30vh;
    left: 50%;
    transform: translate(-50%, -30vh);
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    animation: spin 2s linear infinite;
    z-index: 9999;
}

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



.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dim background */
    z-index: 9998; /* Ensure loading animation appears above dimmed background */
}


@media (orientation:portrait) and (max-width:767px){

    .focus{
        /* position:absolute; */
        /* top:100px; */
        margin:0px;
        overflow:scroll;
        padding:3px;
        width:100%;
    }
    .card-horizontal-container{
        display:flex;
    }
        .card-horizontal-container div{
            flex-basis:50%;
        }
        .focus .card-horizontal-container {
            display: block;
        }
}


@media (min-width:768px) {

    .focus{
        width:80%;
    }
    
    .focus .card{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        border: 1px solid #EEE;
    }

    .focus .card-header{
        flex-basis:100%;
    }

    .focus .card-body:nth-child(1){
        flex-basis:50%;
        flex-grow:1;
        flex-shrink:1;
        margin-top:50px;
    }

    .focus .card-horizontal-container{
       /* margin-top:50px; */
        flex-basis:50%;
        flex-grow:1;

    }
    
  .focus .boats-avail div{
    flex-direction:column;
    flex-basis: 31%;
    flex-grow: 0;
    /* height: auto; */
    
    /* justify-content: flex-end; */
    }
    .focus .card-horizontal-container{
       display:flex;
       flex-basis: 50%;
       flex-direction: row;
    }

   
}


    @media (min-width:1024px){
     .focus .card-horizontal-container{
       display:flex;
        flex-basis: 100%;
       flex-direction: row;
       flex-grow: 1;
    }
    .focus .card-footer{
        flex-basis:40%;
        flex-shrink:1;
        flex-grow:1;
    }
    .focus .boats-avail div{
    flex-direction:column;
    flex-basis: 22.5%;
    flex-grow: 0;
    /* height: auto; */
    
    /* justify-content: flex-end; */
    }
        
}

 @media (min-width:1440px){
     
    .focus .boats-avail div{
    flex-direction:column;
    flex-basis: 15%;
    flex-grow: 0;
    /* height: auto; */
    
    /* justify-content: flex-end; */
    }
        
}

.focus-show.d-none{
    display:none!important;
}