/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 21, 2014, 2:02:52 PM
    Author     : sebastian
*/

/*need this styles to overide avant theme styles*/
body#public-body {
    padding-top:40px;
}

/*not using navbar-brand anymore?*/
.navbar-brand {
    background: url('../img/logo-public.png') no-repeat scroll center center transparent;
    width:170px;
}

.navbar-logo {
    margin: 0 10px;
    white-space: nowrap;
    height:45px;
}

@media (max-width: 768px) {
    .navbar-logo {
        height: 60px;
    }

    body {
        padding-top: 60px;
    }
}

.navbar-logo .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.navbar-nav.social > li > a {
    padding-left:5px;
    padding-right:5px;
}

.navbar-nav.social > li:last-child > a {
    padding-right:30px;
}


#page-content {
   margin: 0 auto;
   padding: 0 20px;
   max-width: 1440px;
}


a {
  color: #425c77;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #425c77;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.info-tiles.tiles-midnightblue a {color:#fff;text-decoration: underline;}
.info-tiles.tiles-midnightblue a:hover,a:focus {color:#fff;}


@media (max-width: 992px) { 
    #page-content {
        margin: 0;
        padding: 0;
    }
}


#public-heading {
    text-align: center;
}

#public-heading ul.gb-no-bul{
    list-style-type: none;
}

.gb-label {
	text-align: right;
	font-weight: 600;
}

.gb-panel > div {
	margin-bottom: 15px;
	position: relative;
}


/* Main Image panel*/

#main-image-panel {
    position: relative;
}

#itin-intro {
	position: relative;
	height: 250px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow: hidden;
	text-align: center;

	/*margin-bottom: 40px;*/
}

.itin-intro-multi {
    position: relative;
    display:flex!important;
    justify-content:center;
    align-items:center;
    overflow: hidden;
	text-align: center;
}

#itin-intro img {
    flex-shrink:0;
    width:100%;
    min-width:100%;
    min-height:100%;
    object-fit: cover;
    z-index: 1;
}

.itin-intro-multi img {
    flex-shrink:0;
    width:100%;
    min-width:100%;
    min-height:100%;
    object-fit: cover;
    z-index: 1;
}

#itin-intro .intro-block-container {
    display:none;
}

div.intro-block-wrapper-multi {
    position: absolute;
    bottom: 65px;
    left: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

div.intro-block-container-multi {
    width: 95%;
    display: flex;
    justify-content: center;
}

.intro-block-container-multi h2 {
    text-align: center;
}

div.intro-block-wrapper {
    display:flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left:0;
    bottom: 45px;
    z-index: 5;
    width: 100%;
}

.intro-block {
    margin: 20px auto;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    padding: 15px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    min-width: 40%;
    max-width: 90%;
    display: inline-block;
}

div.intro-block-below-image h2{
    text-align: center;
    margin: 10px 0;
}

div.intro-block-below-image p {
    font-size:1.15em;
    text-align: justify;
}

@media (min-width: 400px) {
    #itin-intro {
        height: 300px;
    }

    .itin-intro-multi {
        height: 300px!important;
    }
}

@media (min-width: 500px) {
    #itin-intro {
        height: 350px;
    }

    .itin-intro-multi {
        height: 350px!important;
    }
}

@media (min-width: 600px) {
    #itin-intro {
        height: 400px;
    }

    .itin-intro-multi {
        height: 400px!important;
    }
}

/*@media print {*/
    /*#itin-intro {*/
        /*height: 450px;*/
        /*max-height: 450px;*/
        /*overflow: hidden !important;*/
        /*overflow-y: hidden !important;*/
        /*overflow-x: hidden !important;*/
    /*}*/
/*}*/

@media (min-width: 768px) {
    #itin-intro {
        height: 500px;
    }

    .itin-intro-multi {
        height: 500px!important;
    }
}

@media (min-width: 992px) {
    #itin-intro {
        height: 600px;
    }

    .itin-intro-multi {
        height: 600px!important;
    }

    div.intro-block-below-image.hide-on-large {
        display:none;
    }

    #itin-intro .intro-block-container{
        display:block;
        position: absolute;
        left:0;
        bottom: 45px;
        z-index: 5;
        width: 100%;
    }

    div.intro-block-wrapper-multi {
        display: flex;
    }

    .intro-block {
        margin: 20px auto;
        background: rgb(255, 255, 255);
        background: rgba(255, 255, 255, 0.85);
        overflow: hidden;
        padding: 15px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        min-width: 40%;
        max-width: 90%;
        display: inline-block;
    }

    /* #itin-intro p {
        text-align: left;
        font-size:1.15em;
        color: #333;
        margin:0;
    } */

    .intro-block p {
        text-align: left;
        font-size:1.15em;
        color: #333;
        margin:0;
    }

}

@media (min-width: 1200px) {
    #itin-intro {
        height: 700px;
    }

    .itin-intro-multi {
        height: 700px!important;
    }
}



/* END Main Image panel*/

.day-header {
	margin-top: 20px;
        /*border-bottom: solid 2px #76c4ed;*/
        border-bottom: solid 2px #8c9cad;
}

.day-header:before,.day-header:after {
	content: " ";
	display: table;
   	clear:both;
}

.day-date h3 {
	color: #888;
}

.day-content {
	padding:15px 0;
        margin: 0 -15px;
}

.day-content h4 {
    margin-top: 0;
    padding-left:15px;
    padding-right:15px;
}

.day-content p {
    padding-left:15px;
    padding-right:15px;
}

.day-content .img-container {
    padding: 0 15px 15px 15px;
}

.day-content img {
  padding: 3px;
  background-color: #f7f8fa;
  border: 1px solid #8c9cad;
  border-radius: 3px;
}

.day-details {
	float:right;
	padding: 0 15px 0 15px;
	display:inline;
}

.accommodation-content img {
  float:right;
  padding: 3px;
  background-color: #f7f8fa;
  border: 1px solid #8c9cad;
  border-radius: 3px;
  width:100%;
  height:100%;
  margin: 0 0 15px 15px;
}


.itin-container .tiles-body ul.sm-tile {
	font-size: 14px;
    padding-left:20px;
}


.info-tiles.tiles-summary {
    color: #ffffff;
}
.info-tiles.tiles-summary .tiles-heading {
    background: #425c77;
}
.info-tiles.tiles-summary .tiles-body {
    background: #34495e;
}
.info-tiles.tiles-summary .tiles-body-alt {
    background: #34495e;
}
.info-tiles.tiles-summary .tiles-footer {
    background: #222f3d;
}

.info-tiles.tiles-callout {
    color: #ffffff;
}
.info-tiles.tiles-callout .tiles-heading {
    background: #1bc2a1;
}
.info-tiles.tiles-callout .tiles-body {
    background: #16a085;
}
.info-tiles.tiles-callout .tiles-body-alt {
    background: #16a085;
}
.info-tiles.tiles-callout .tiles-footer {
    background: #107360;
}

/*
These styles need to be included for the wysiwig editor
*/
.info-tiles.tiles-callout .tiles-body.sm-txt > i
{
    font-size: 14px;
    opacity: 1;
    position: relative;
}

/*
These styles need to be included for the wysiwig editor
*/

div.sm-txt {
	font-size: 14px !important;
}

.info-tiles.tiles-sky div.tiles-body-clear, .info-tiles.tiles-sky div.tiles-body-clear:hover {

	background-color: #fff;
	border: solid 2px #76c4ed;
	padding:15px;
}

.info-tiles.tiles-midnightblue div.tiles-body-clear, .info-tiles.tiles-midnightblue:hover div.tiles-body-clear {
	background-color: #fff;
	border: solid 2px #34495e;
	padding:15px;
}



.tiles-body table {
	margin: 0 0 0 auto;
	padding:15px;
	font-size:32px;
}	

.price-label {
	text-align: left;
	font-weight: 400;
}

.price-value {
    padding-left: 20px;
	text-align: right;
}

.price-negative:before {
    content: '(';
}

.price-negative:after {
    content: ')';
}

.final-payment {
    padding-top: 10px;
    text-align: right;
    font-size: 20px;
}
.price-perperson {
    padding-left: 20px;
	text-align: right;
    font-size: 20px;
    font-style: italic;
}

.summary-cost > td {
    padding-top: 10px;
    border-top: solid 1px #fff;
}

.amount-bold > td.price-value {
    font-weight: bold;
}

/* Custom Content */

.row-custom-content {
    margin-bottom: 15px;
}

/* Optional Items*/

/* remove this */
.optional-tour:after {
        content: " (OPTIONAL)"
        
}

.optional-container {
    padding: 0 15px;

}

.optional-container div.accordion-item .accordion-title h4 {
    background-color: #f2b257;
    margin-bottom: 0;
    border: 0;
}

.optional-container [id^="optional"] {
    background-color: #F5F6CE;
    border-top: solid 1px #DDD;
}

.optional-container [id^="optional"] div.accordion-body > div h4 {
    color: #4d4d4d;
}

.optional-container [id^="optional"] div.accordion-body > div {
    border-top: solid 1px #8c9cad;
    padding:  15px 0;
}

.optional-container [id^="optional"] div.accordion-body > div:first-child {
    padding: 0 0 15px 0;
    border: 0;
}

.optional-container [id^="optional"] div.accordion-body > div:last-child {
    padding: 15px 0 0 0;
}

.optional-item {


}

.optional-img-container {
    float:right;
}

.img-small {
    width:200px;
    height:150px;
}


.voucher-label {
    padding:5px 8px;
    border-radius: 3px;
    margin: 3px 0;
}

.label-tour {
    background-color: rgba(255,102,102,0.5);
}
.label-transportation {
    background-color: rgba(102,178,255,0.5);
}
.label-flights {
    background-color: rgba(178,255,102,0.5);
}
.label-accommodation {
    background-color: rgba(192,192,192,0.8);
}
.label-meals {
    background-color: rgba(192,192,192,0.5);
}

.label-lighthighlight {
    background-color:#faf2cc;
    color:#777;
    font-style: italic;
    margin: 0; padding: 0;
}

.clear {
	clear:both;
}

/*Forms*/
.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

.help-block a {
    color: #8d8d8d;
}

/*Date picker bugfix*/
.datepicker-dropdown.datepicker-orient-bottom:before,
.datepicker-dropdown.datepicker-orient-bottom:after,
.datepicker-dropdown.datepicker-orient-top:before,
.datepicker-dropdown.datepicker-orient-top:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.datepicker-dropdown.datepicker-orient-bottom:before,
.datepicker-dropdown.datepicker-orient-bottom:after {
    bottom: 100% !important;
}
.datepicker-dropdown.datepicker-orient-top:before,
.datepicker-dropdown.datepicker-orient-top:after {
    top: 100% !important;
}

#form-error-msg, #form-working-msg {
    margin: 15px 0;
}

/*#form-error-msg {
    margin: 15px 0;
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
    padding: 15px;
}

#form-working-msg {
    margin: 15px 0;
    background-color: rgb(250, 255, 189);
    color: #555;
    border: 1px solid #ccc;
    padding: 15px;
}

#form-success-msg {
    margin: 15px 0;
    background-color: #ebf6e1;
    border-color: #b8df92;
    color: #527f26;
    padding: 15px;
}*/

input[name=ymar_dicuuh] {
    display: none;
}

.error-link {
    color: #111;
    text-decoration: underline;
}



#footer-404 {

    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

@page { size:8.5in 11in; margin: 0.5cm 0;  }

@page :first {margin-top: 0 }

@media print 
{
    .confirmation-documents-container {
        display: none !important;
    }
    
    td.fr-print-show, .fr-print-show {
      display: block !important;
    }
    
    .fr-print-hide {
      display: none !important;
    }
    
    body {
        width:815px;
        padding: 0px;
    }
    
    body#public-body {
        padding-top:0px;
    }
    
    
   .col-sm-6{width:50%}
    /*div[class|=col-]{float:left;}*/

    #page-container {
        overflow: visible;
    }
    
    #page-content {
        margin: 0;
        padding: 0;
    }
    
    #wrap {
         overflow: visible;
    }
    
    h1#intro-header  {
        font-size: 32px;
    }
    
    h2.mobile-intro-header {
        font-size: 24px;
    }
    
    .break-abb {
        page-break-before: always;
    }
    
    .break-nbb {
        page-break-before: avoid;
    }
    
    .break-nba {
        page-break-after: avoid;
    }
    
    .break-nbi {
        page-break-inside: avoid;
    }

    
    .ui-pnotify-history-container, .ui-pnotify, .ui-pnotify-container {
        display: none;
    }

    .itin-container .tiles-body ul.sm-tile {
        margin-left: 0 !important;
    }
    
    div.print-footer a {
        color: #fff;
        text-decoration: none;
    }
    div.print-footer a:hover,
    div.print-footer a:focus {
        color: #fff;
        text-decoration: underline;
    }

    div.print-header  { 
        font-size: 10pt;
        line-height: 1.5;
        color: #fff;
    }
    div.print-footer  { 

        font-size: 9pt;
        line-height: 1.5;
        color: #fff;
    }

    div.print-header-content {
        margin:0; 
        padding-bottom: 2pt;
        border:none;
        border-bottom: 4pt solid #34495e;
        height:60pt;
    }
    div.print-header-inner {
        margin:0;
        padding: 10pt 16pt 4pt 16pt;
        background: -webkit-linear-gradient(#425c77, #34495e); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#425c77, #34495e); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#425c77, #34495e); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#425c77, #34495e); /* Standard syntax */
        height:54pt;
        border:none;
    }

    div.print-header-inner p, div.print-footer-inner p {
        margin: 5pt 0 0 0;
    }

    div.print-footer-content {
        margin:0; 
        padding-top: 2pt;
        border:none;
        border-top: 4pt solid #34495e;
        height:62pt;
    }

    div.print-footer-inner {
        margin:0;
        padding: 0 16pt 10pt 16pt;
        background: -webkit-linear-gradient(#34495e, #425c77); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#34495e, #425c77); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#34495e, #425c77); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#34495e, #425c77); /* Standard syntax */
        height:56pt;
        border:none;
    }

    span.page-counter {
        content: "Page " counter(page) " of " counter(pages);
    }


}

body.invoice-page, body.invoice-page #page-content , body.invoice-page #page-container {
    background-color: #ffffff;
}

.invoice-header {
    margin: 20px 0 0 0;
    padding: 20px;
    background-color: #ffffff;
    border-top:1px solid #dddddd;
    border-right:1px solid #dddddd;
    border-left:1px solid #dddddd;
}

.invoice-logo , .invoice-company {
    text-align:  center;
    
}

.invoice-logo {
    margin-bottom: 20px;
}

.invoice-company h2 {
    line-height: 33px;
}


@media (min-width: 768px) {

    .invoice-logo {
        text-align:  left;
        margin-bottom: 0;
    }

    .invoice-company {
        text-align:  right;
    }
}


div.panel .panel-body.invoice-panel  {
    border-top:1px solid #dddddd;
    background-color: #f7f8fa;
}

.invoice-container .invoice-top-row {
    padding-bottom:20px;
}

.invoice-buttons {
    padding:20px 10px 20px 10px;
}

.invoice-container .invoice-row {
    padding:20px 10px 20px 10px;
    border-top:1px solid #dddddd;
}

.invoice-container div.panel .panel-footer {
    background-color: #ffffff;
}

.table.table-invoice > tbody > tr > td {
    border-top: 0px;
}

td.title-dark {
    font-weight: 400;
    color: #333333;
    font-size: 18px;
    border-bottom: 1px solid #e6e7e8;
}

.invoice-unpaid {
    color:#ff6f6f;
}

#custom-payment-container {
    margin-top: 30px;
}


.custom-payment-inputs-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.custom-payment-input-container {
    width: 250px;
}

#stripe-custom-error {
    color: red;
    margin-top: 5px;
    display: none;
}

#show-custom-payment {
    margin-top: 35px;
    margin-bottom: 20px;
}

#loader-container {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    display: none;
    align-items: center;
    justify-content: center;
}

.loader {
    border: 1px solid rgba(0,0,0,0);
    border-radius: 50%;
    border-top: 1px solid blue;
    border-bottom: 1px solid blue;
    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); }
}



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

.test-slick-images {
    margin: 25px;
}

.slick-arrow {
    background-color: black;
    position: absolute;
    z-index: 1;
    top: 50%;
    font-size: 2em;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.815);
    font-weight: 100;
}

.slick-arrow:hover {
    cursor: pointer;
}

.slick-arrow-left {
    left: 20px;
    padding-right: 5px;
}

.slick-arrow-right {
    right: 20px;
    padding-left: 5px;
}

.slick-next {
    right: 20px !important;
}

.slick-prev {
    left: 20px !important;
}

.accommodation-container {
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: solid 1px #dedede;
}

.slick-images-accommodation {
    height: auto;
    width: 40%;
    margin-left: 30px;
    float: right;
}

@media screen and (max-width: 770px) {
    .slick-images-accommodation {
        width: 100%;
    }
}


/* use to keep headers with panel
.print-panel-wrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    page-break-inside: avoid;
    break-inside: avoid-page;
}

.print-panel-wrapper:before,
.print-panel-wrapper:after {
    content: " ";
    display: table;

}

.print-panel-wrapper:after {
    clear: both;
}

.print-panel-wrapper .panel-body:after {
    clear: none;
}

 */

/*working with iframes for tripclip*/
.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 62.5%;
}
.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* FLIGHTS SECTION */

.flights-section-item-container {
    margin-bottom: 20px;
}

.flights-section-title {
    margin-bottom: 0;
}

.flights-section-date {
    margin-top: 0;
    margin-bottom: 0;
}

.flights-section-item-details-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.flights-section-image {
    height: 45px;
    width: auto;
}

.flights-section-item-details-left {
    display: flex;
    flex-direction: row;
    width: 40%;
    align-items: flex-end;
}

.flights-section-item-details-right {
    display: flex;
    flex-direction: row-reverse;
    width: 40%;
    align-items: flex-end;
}

.flights-section-label {
    font-size: 20px;
    flex: .5;
    align-items: flex-end;
}

.flights-section-airport {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
}

.flights-section-airport-code {
    font-size: 20px;
}

.flights-section-city {
    margin-left: 5px;
    margin-bottom: 1px;
}

.flights-section-time {
    font-size: 20px;
    flex: 1;
    text-align: center;
}

@media (max-width: 950px) {

    .flights-section-item-details-left {
        width: 100%;
    }
    
    .flights-section-item-details-right {
        flex-direction: row;
        width: 100%;
    }

    .flights-section-item-details-container {
        flex-direction: column;
    }

    .flights-section-airport {
        justify-content: center;
    }

    .flights-section-time {
        text-align: left;
    }
    
    .flights-section-image {
        display: none;
    }
}

#itin-footer-unbranded-container {
    display: none;
}

.itin-day-image-container {
    aspect-ratio: 4 / 3;
}

.itin-day-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Below is HTML services CSS styles */

.oasis-html-service {
    padding-left: 15px;
    padding-right: 15px;
}
.oasis-html-service p {
    margin: 0px;
    padding: 0px;
}

/* Per person Mobile font changes */

.tiles-payment.info-tiles .tiles-body table {
    font-size: 16px;
}

@media (min-width: 600px) {
    .tiles-payment.info-tiles .tiles-body table {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    div.info-tiles.tiles-payment>div.tiles-body>table>tbody>tr>td.price-perperson.hidden-xs.fr-print-show {
        font-size: 16px !important;
    }

    #booking-button {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

#show-custom-payment {
    display: none;
}

.label-service.voucher-label .label-inner a {
    color: white;
}

.label-call-out.voucher-label .label-inner a {
    color: white;
}

.info-tiles.tiles-callout .tiles-body a {
    color: white;
}

/* MAPBOX Styles */



.map-container {
    display: flex;
    width: 100%;
    height: 700px;
}

#poi-popup {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background: white;
    border-right: 1px solid #ccc;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1;
    visibility: hidden;
}

#poi-popup.active {
    transform: translateX(0);
    visibility: visible;
}

.poi-popup-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.poi-popup-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: var(--secondary-color); */
    /* color: #fff; */
}

.poi-popup-header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.poi-popup-header h3 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 700;
    /* color: #fff; */
    letter-spacing: 0.5px;
}

.poi-popup-subtitle {
    /* color: #fff; */
    font-size: 1.08em;
    font-weight: 400;
    margin-top: 2px;
    margin-bottom: 0;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.close-popup {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
}

.poi-popup-body {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
}

.poi-popup-body h4 {
    margin: 0 0 10px 0;
}

.poi-description {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

#oasis-mapbox-container {
    width: 100%;
    height: 100%; 
}

.marker {
    width: 30px;
    height: 30px;
    background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png');
    background-size: cover;
    cursor: pointer;
    position: relative;
}

.marker-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
}

.mapboxgl-ctrl-logo {
    display: none !important;
}

@media (max-width: 767px) {
    #overview-container, .map-container {
        width: 100%;
    }
}