/*** VARIABLES ***/
:root {
    --custom-brand-primary: #004065;
    --custom-brand-primary-rgb: 0, 64, 101;
    --custom-brand-primary-dark: color-mix(in hsl, var(--custom-brand-primary) 93%, black);
    --custom-brand-primary-light: color-mix(in hsl, var(--custom-brand-primary) 85%, white);
    --custom-brand-secondary: #BFDCE9;
    --custom-brand-secondary-dark: color-mix(in srgb, var(--custom-brand-secondary) 92%, black);
    --custom-brand-secondary-light: color-mix(in srgb, var(--custom-brand-secondary) 92%, white);
    --custom-brand-surface: #E8F2F7;
    --custom-app-background: #E9ECEF;
}

/*** ABSTRACTS ***/
label {
    font-family: "font regular", serif;
}
input.form-control {
    font-family: "font bold", serif;
}
input.form-control::placeholder {
    font-family: "font light", serif;
}
input.form-control:focus {
    border-color: var(--custom-brand-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--custom-brand-primary-rgb), .3);
}
.btn, h1, h2, h3, h4, h5, h6 {
    font-family: "font bold", serif;
}
.font-light {
    font-family: "font light", serif;
}

/*** COMPONENTS ***/
    /*autocomplete*/
    ul.ui-menu.ui-autocomplete {
        font-family: "font regular", serif;
        background-color: var(--custom-brand-surface);
    }
    ul.ui-menu.ui-autocomplete:not(.not-scroll)::-webkit-scrollbar-thumb {
        background-color: var(--custom-brand-primary);
    }
    ul.ui-menu.ui-autocomplete:not(.not-scroll)::-webkit-scrollbar-track {
        background-color: var(--custom-brand-secondary-light);
    }
    ul.ui-menu.ui-autocomplete li.ui-autocomplete-category {
        color: var(--custom-brand-surface) !important;
        background-color: var(--custom-brand-primary);
        border-bottom: 0.0625rem solid var(--custom-brand-primary);
        border-left: .0625rem solid var(--custom-brand-primary);
        border-right: .0625rem solid var(--custom-brand-primary);
    }
    ul.ui-menu.ui-autocomplete li.ui-autocomplete-category:hover {
        background-color: var(--custom-brand-primary-dark) !important;
    }
    ul.ui-menu.ui-autocomplete li.ui-autocomplete-category label {
        color: var(--custom-brand-surface) !important;
    }
    ul.ui-menu.ui-autocomplete li.ui-menu-item:hover {
        background-color: var(--custom-brand-secondary);
    }
    ul.ui-menu.ui-autocomplete li.ui-menu-item label {
        font-family: "font light", serif;
    }
    ul.ui-menu.ui-autocomplete li.ui-menu-item.active-focus {
        background-color: var(--custom-brand-secondary);
    }
    /*button*/
    .btn.btn-primary {
        background-color: var(--custom-brand-primary);
        border-color: var(--custom-brand-primary);
    }
    .btn.btn-primary:active, .btn.btn-primary:hover {
        background-color: var(--custom-brand-primary-dark) !important;
        border-color: var(--custom-brand-primary-dark) !important;
    }
    .btn.btn-primary:focus {
        background-color: var(--custom-brand-primary-dark) !important;
        box-shadow: 0 0 0 .2rem rgba(var(--custom-brand-primary-rgb), .3) !important;
    }
    /*daterange*/
    div.daterangepicker {
        font-family: "font regular", serif;
    }
    div.daterangepicker div.calendar-table table tr:first-child th {
        background-color: var(--custom-brand-primary);
    }
    div.daterangepicker div.calendar-table table tr:first-child th.next:hover,
    div.daterangepicker div.calendar-table table tr:first-child th.prev:hover {
        background-color: var(--custom-brand-primary-dark);
    }
    div.daterangepicker div.calendar-table table tr:first-child th.next:hover span,
    div.daterangepicker div.calendar-table table tr:first-child th.prev:hover span {
        border-color: var(--custom-brand-surface) !important;
    }
    div.daterangepicker div.calendar-table table tr th.available:hover {
        background-color: var(--custom-brand-primary-dark);
    }
    div.daterangepicker div.calendar-table table tr td.available:hover {
        background-color: var(--custom-brand-surface) !important;
    }
    div.daterangepicker div.calendar-table table tr td.in-range {
        background-color: var(--custom-brand-secondary) !important;
    }
    div.daterangepicker div.calendar-table table tr td.in-range.available:hover {
        background-color: var(--custom-brand-secondary-light) !important;
    }
    div.daterangepicker div.calendar-table table tr td.active {
        background-color: var(--custom-brand-primary) !important;
    }
    div.daterangepicker div.calendar-table table tr td.active:hover {
        background-color: var(--custom-brand-primary-dark);
    }
    /*dropdown*/
    .dropdown-menu a.dropdown-item.active {
        background-color: var(--custom-brand-primary);
    }
    .dropdown-menu a.dropdown-item:hover,
    .dropdown-menu a.dropdown-item:active {
        background-color: var(--custom-brand-secondary);
    }
    .dropdown-menu#activitiesHistorySearchLayer:not(.not-scroll)::-webkit-scrollbar-thumb {
        background-color: var(--custom-brand-primary);
    }
    .dropdown-menu#activitiesHistorySearchLayer:not(.not-scroll)::-webkit-scrollbar-track {
        background: var(--custom-brand-surface);
    }
    /*fancybox*/
    div.fancybox-container  {
        font-family: "font regular", serif;
    }
    /*loading*/
    div.spinner-overlay div.spinner-border {
        color: var(--custom-brand-primary-dark);
    }
    /*pills*/
    ul.nav-pills li.nav-item button.nav-link {
        background-color: var(--custom-brand-secondary);
        border-color: var(--custom-brand-secondary);
    }
    ul.nav-pills li.nav-item button.nav-link:hover,
    ul.nav-pills li.nav-item button.nav-link:focus,
    ul.nav-pills li.nav-item button.nav-link:active {
        background-color: var(--custom-brand-secondary-dark);
        border-color: var(--custom-brand-secondary-dark);
    }
    ul.nav-pills li.nav-item button.nav-link.active {
        font-family: "font bold", serif;
        background-color: var(--custom-brand-primary);
        border-color: var(--custom-brand-primary);
    }
    ul.nav-pills li.nav-item button.nav-link.active:hover {
        background-color: var(--custom-brand-primary-dark);
        border-color: var(--custom-brand-primary-dark);
    }
    ul.nav-pills li.nav-item button.nav-link:not(.active) {
        color: var(--custom-brand-primary);
    }
    /*modal*/
    .modal .modal-content .modal-header {
        background: var(--custom-brand-primary);
    }
    .modal .modal-content .modal-body div#mapLocationActivities.map div.gm-style-mtc button,
    .modal .modal-content .modal-body div#mapLocationActivities.map div.gm-style-iw,
    .modal .modal-content .modal-body div#mapLocationActivities.map .custom-iw-container .gm-style-iw.gm-style-iw-c .gm-style-iw-d .pointHeading,
    .modal .modal-content .modal-body div#mapLocationActivities.map .custom-iw-container .gm-style-iw.gm-style-iw-c .gm-style-iw-d .cardHeading,
    .modal .modal-content .modal-body .contentGoogleButtons div .googleButtons {
        font-family: "font bold", serif;
    }
    /*select*/
    div.bootstrap-select button.dropdown-toggle .filter-option .filter-option-inner-inner {
        font-family: "font light", serif;
    }
    div.bootstrap-select button.dropdown-toggle .filter-option .filter-option-inner-inner.selected {
        font-family: "font bold", serif;
    }
    div.bootstrap-select button.dropdown-toggle:focus,
    div.bootstrap-select.required button.dropdown-toggle:focus {
        border: 1px solid var(--custom-brand-primary);
        box-shadow: 0 0 0 .2rem rgba(var(--custom-brand-primary-rgb), .3);
    }
    /*tooltip*/
    div.tooltip.bs-tooltip-top .arrow::before {
        border-top-color: var(--custom-brand-secondary);
    }
    div.tooltip.tooltip.bs-tooltip-right .arrow::before {
        border-right-color: var(--custom-brand-secondary);
    }
    div.tooltip.tooltip.bs-tooltip-bottom .arrow::before {
        border-bottom-color: var(--custom-brand-secondary);
    }
    div.tooltip.tooltip.bs-tooltip-left .arrow::before {
        border-left-color: var(--custom-brand-secondary);
    }
    div.tooltip .tooltip-inner {
        color: var(--custom-brand-primary);
        background-color: var(--custom-brand-secondary);
        font-family: "font regular", serif;
    }
    /*cookies*/
    #cookiesModalWithBootstrap .modal-dialog .modal-content .modal-footer .btn.btn-success {
        border-color: var(--custom-brand-primary) !important;
        background-color: var(--custom-brand-primary) !important;
    }
    #cookiesModalWithBootstrap .modal-dialog .modal-content .modal-footer .btn.btn-success:hover {
        border-color: var(--custom-brand-primary-dark) !important;
        background-color: var(--custom-brand-primary-dark) !important;
    }
    #cookiesModalWithBootstrap .modal-dialog .modal-content .modal-footer .btn.btn-danger {
        border-color: var(--custom-brand-secondary) !important;
        background-color: var(--custom-brand-secondary) !important;
    }
    #cookiesModalWithBootstrap .modal-dialog .modal-content .modal-footer .btn.btn-danger:hover {
        border-color: var(--custom-brand-secondary-dark) !important;
        background-color: var(--custom-brand-secondary-dark) !important;
    }

/*** LAYOUT ***/
    /*body*/
    body {
        font-family: "font regular", serif;
    }
    body main {
        background-color: var(--custom-app-background);
    }
    /*header-navbar*/
    body header#header-desktop nav.navbar {
        border-bottom: .375rem solid var(--custom-brand-primary) !important;
    }
    body header#header-desktop nav.navbar ul.navbar-nav li.nav-item a.nav-link,
    body header#header-desktop nav.navbar ul.navbar-nav li.nav-item a.nav-link.link-svg {
        color: var(--custom-brand-primary);
    }
    body header#header-desktop nav.navbar div#searchhistory_content ul.searchhistories-list .item::after {
        border-bottom: 0.625rem solid var(--custom-brand-primary);
    }
    body header#header-desktop nav.navbar div#searchhistory_content h3, body header#header-desktop nav.navbar div#searchhistory_content .show-all {
        background: var(--custom-brand-primary);
    }
    body header#header-desktop nav.navbar div#searchhistory_content .js-show-searchhistories {
        color: var(--custom-brand-primary);
    }
    body header#header-desktop div#menu_products div.item {
        background-color: var(--custom-brand-primary);
    }
    body header#header-desktop div#menu_products div.item a {
        font-family: "font regular", serif;
    }
    /*footer*/
    footer ul.list-group li a.active {
        color: var(--custom-brand-primary);
    }
    footer ul.list-group li a:hover {
        color: var(--custom-brand-primary) !important;
    }

/*** PAGES ***/
    /*index*/
    #booking-search p.title,
    #activity-search p.title {
        font-family: "font bold", serif;
    }
    #booking-search div.card#searcher_card .card-body .title_card,
    #activity-search div.card#searcher_card .card-body .title_card {
        font-family: "font bold", serif;
    }
    #booking-search div.card#searcher_card .card-body input.form-check-input[type=checkbox],
    #activity-search div.card#searcher_card .card-body input.form-check-input[type=checkbox] {
        accent-color: var(--custom-brand-primary);
    }
    #booking-search div.card#information_card .card-body .phone,
    #activity-search div.card#information_card .card-body .phone {
        font-family: "font bold", serif;
        color: var(--custom-brand-primary);
    }
    #booking-search div.card#information_card .card-body ul li,
    #activity-search div.card#information_card .card-body ul li {
        font-family: "font bold", serif;
    }
    #booking-search div.card#information_card .card-body ul li span.email,
    #activity-search div.card#information_card .card-body ul li span.email {
        color: var(--custom-brand-primary);
    }
    #booking-search div.card#information_card .card-body p.description a span,
    #activity-search div.card#information_card .card-body p.description a span {
        color: var(--custom-brand-primary) !important;
    }
    #booking-search div.card#error_card p,
    #activity-search div.card#error_card p {
        font-family: "font bold", serif;
    }
    #booking-detail p.title {
        font-family: "font bold", serif;
    }
    #booking-detail div.card#results_card .card-body .info {
        font-family: "font bold", serif;
    }
    #booking-detail div.card#results_card .card-body #details p i.fa-asterisk {
        color: var(--custom-brand-primary);
    }
    #booking-detail div.card#results_card .card-body #details p.note {
        font-family: "font light", serif;
    }
    #booking-detail div.card#error_card p {
        font-family: "font bold", serif;
    }
    #booking-detail div#map .custom-iw-container .gm-style-iw.gm-style-iw-c .gm-style-iw-d .pointHeading,
    #booking-detail div#map .custom-iw-container .gm-style-iw.gm-style-iw-c .gm-style-iw-d .cardHeading {
        font-family: "font bold", serif;
    }
    #booking-detail div.card#results_card .card-body div#details {
        background-color: var(--custom-brand-surface);
    }

    #search_block div.card .card-body ul.nav-pills li.nav-item a.nav-link.active {
        border-bottom: 0.25rem solid var(--custom-brand-primary);
    }
    /*results activities*/
    #btn-activities-pagination.paginacion div.actual {
        background-color: var(--custom-brand-primary);
        border: 0.25rem solid var(--custom-brand-primary);
        font-family: "font bold", serif;
    }
    #btn-activities-pagination.paginacion div.actual:hover {
        background-color: var(--custom-brand-primary-dark);
    }
    #wrapper .card.result-box div.card-header {
        background-color: var(--custom-brand-surface);
    }
    #wrapper .card.result-box div.card-body .nav-tabs .nav-link {
        font-family: "font light", serif;
    }
    #wrapper .card.result-box div.card-body div.card.info_mobile div.card-body p.bg-primary {
        background-color: var(--custom-brand-primary); !important;
    }
    #wrapper .card.result-box div.card-body .nav-tabs .nav-link:hover {
        background-color: var(--custom-brand-surface);
        color: var(--custom-brand-primary);
    }
    #wrapper .card.result-box div.card-body .nav-tabs .nav-link.active {
        border-bottom: .1875rem var(--custom-brand-primary) solid;
        color: var(--custom-brand-primary);
        font-family: "font bold", serif;
        background-color: var(--custom-brand-surface);
    }
    #wrapper .card.otherActivities .card-body .card-title-truncated,
    #wrapper .card.otherActivities .card-body span.related_activity_price {
        font-family: "font bold", serif;
    }
    #wrapper .card div.gm-style .gm-style-iw {
        font-family: "font regular", serif !important;
    }