* {
    font-family: 'Montserrat';
}
.container {
    max-width: 1140px;
}
.top-page {
    position: relative;
    top: -100px;
}
body {
    min-height: 500px;
}
#user-dropdown-menu {
    min-width: 350px !important;
}
#header-logo {
    width: 80px;
    border-radius: 100px;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);
    max-width: 100%;
}
.header {    
    height: 250px;
    background: #033047;
    background: url('../images/emerald-bg.png');
    background-repeat: repeat;
    background-position: center bottom;
    background-size: cover;

}
.header .navbar .navbar-collapse {
    background-color: #023047 !important;
}
#user-logo {
    height: 15px;
    width: 15px;
}
.text-dirty-white {
    color: #F1F1F1;
}
.text-3-px {
    font-size: 3px;
}
.text-6-px {
    font-size: 6px;
}
.text-8-px {
    font-size: 8px;
}
.text-10-px {
    font-size: 10px;
}
.text-12-px {
    font-size: 12px;
}
.text-14-px {
    font-size: 14px;
}
.text-16-px {
    font-size: 16px;
}
.text-18-px {
    font-size: 18px;
}
.text-20-px {
    font-size: 30px;
}
.text-justify {
    text-align: justify !important;
}
.header-text {
    font-size: 14px;
    color: #DCDCDC;
    font-weight: 500;
}
.header-text:hover {
    font-size: 14px;
    color: #DCDCDC;
    font-weight: 500;
}
.header-text:active {
    font-size: 14px;
    color: #DCDCDC;
    font-weight: 500;
}
.reservation-tooltip {
    --bs-tooltip-bg: #023047;
    --bs-tooltip-color: var(--bs-white);
    z-index: 990;
}
.text-reservation-price,
.text-reservation-price:hover {
    cursor: default;
}
.border-darklight {
    border: 1px solid #C6C6C6;
}
.border-economy {
    border-color: #219EBD !important;
    border-radius: 0px !important;
}
.border-emerald {
    border-color: #06994E !important;
    border-radius: 0px !important;
}
.border-reservation-blue {
    border-color: #023047 !important;
    border-radius: 0px !important;
}
.border-emerald {
    border-color: #06994E !important;
    border-radius: 0px !important;
}
.bg-economy {
    background-color: #219EBD !important;
}
.bg-emerald {
    background-color: #06994E !important;
}
.bg-reservation-orange {
    background-color: #FB8402 !important;
}
.bg-reservation-blue {
    background-color: #023047 !important;
}
.bg-darkgray {
    background-color: #E0DAD8 !important;
}
.btn-reservation-lightgray {
    background-color: #9F9E9E !important;
}
.btn-reservation-orange {
    background-color: #FB8402 !important;
}
.btn-reservation-blue {
    background-color: #023047 !important;
}
.btn-economy {
    background-color: #219EBD !important;
}
.btn-emerald {
    background-color: #06994E !important;
}
.text-reservation-lightgray {
    color: #9F9E9E !important;
}
.text-reservation-orange {
    color: #FB8402 !important;
}
.text-reservation-blue-active {
    color: #023047 !important;
}
.text-reservation-blue {
    color: #023047 !important;
}
.text-reservation-lightblue {
    color: #219EBD !important;
}
.text-economy {
    color: #219EBD !important;
}
.text-emerald {
    color: #06994E !important;
}
.card-economy {
    background-color: #F8F9FA !important;
    border: 2px solid #219EBD !important;
}
.card-emerald {
    background-color: #F8F9FA !important;
    border: 2px solid #06994E !important;
}
.border-white {
    border: 1px solid #F8F9FA !important;
}
.select-reservation-passenger {
    font-size: 12px !important;
}
.select-reservation-passenger {
    --webkit-appearance: none;
}
.reservation-input .btn-booking:hover {
    border-color: #023047 !important;
    border-radius: 0px !important;
}
#booking-edit-depart-datepicker {
    display: flex;
    margin-top: -25px !important;
    cursor: pointer;
    z-index: -999;
}
.dropdown-item.booking-edit-dropdown {
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-booking {
    padding-right: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}
.ri.ri-arrow-drop-down-line {
    position: absolute;
    right: 9px;
}
.destination-connector {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.dotline {
    border: dashed;
    display: block;
    content: '';
    border-block-end: 0;
}
.connector-ferry {
    width: 30px;
    margin: 0 10px;
}
.flex-grow-05 {
    flex-grow: 0.5;
}
.navbar-brand {
    position: absolute;
    z-index: 999;
    top: 0px;
}
#navbar-reservation-header {
    padding-top: var(--bs-navbar-brand-padding-y);
    margin-top: .5rem;
    flex-direction: column-reverse !important;
    position: absolute;
    top: 25px;
    right: 20px;
    height: 116px;
    justify-content: space-between;
}
#booking-widget .form-select, #booking-widget .form-control, #booking-widget label, #booking-widget label:after {
    background-color: transparent;
}
#booking-widget .form-select, #booking-widget .form-control {
    font-weight: 700 !important;
    border-radius: 0 !important;
    border-color: var(--bs-dark-border-subtle) !important;
}
#booking-widget label {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
    font-weight: 600 !important;
    font-size: 0.9em;
}
#passenger-frame button {
    height: 58px;
}
#booking-edit-passengers {
    position: relative;
    top: -6px;
}
.navbar-separator {
    padding-top: .5rem !important;
}
@media (min-width: 430px) {
    .navbar-brand {
        position: relative;
    }
}
.header-active.sm-no-line {
    border-bottom: none;
}
.header-active {
    border-bottom: 3px solid #FFC107;
}
@media (min-width: 768px) {
    #header-logo {
        width: 110px;
    }
    .header .navbar .navbar-collapse {
        background-color: transparent !important;
    }
    #navbar-reservation-header {
        flex-direction: row !important;
    }   
    .navbar-separator {
        padding-top: .25rem;
    }
}
#reservation-details {
    z-index: 999;
}
#reservation-edit {
    z-index: 999;
}
#login-modal {
    z-index: 999999;
}
.dropdown-fare-summary {
    min-width: 215px;
}

.header .navbar {
    position: relative;
    z-index: 1000;
}

.reservation-carousel .carousel-inner {
    height: 0;
    padding-bottom: 90%;
}
.reservation-carousel .carousel-item {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.reservation-carousel .carousel-item .card {
    height: 100%;
}
.card-availabilities-images .card {
    height: 100% !important;
}
input[type='radio'] {
    border: 1px solid #c4c8cb;
}
input[type='checkbox'] {
    border: 1px solid #c4c8cb;
}
.form-check-input:checked {
    background-color: #023047 !important;
    border-color: #023047 !important;
}
#reservation-edit .form-control, #booking-widget .form-control {
    font-weight: 700 !important;
    border-radius: 0 !important;
    border-color: var(--bs-dark-border-subtle) !important;
}
#booking-widget label, #reservation-edit label {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
    font-weight: 600 !important;
    font-size: 0.9em;
}
.btn-disabled {
    background-color: #E9ECEF !important;
}
.bg-disabled {
    background-color: #AFB2B6 !important;
}
.disabled {
    pointer-events: none;
}
.disabled input {
    background-color: var(--bs-secondary-bg);
}
.ticket-select-container {
    min-height: 100px !important;
}

#passenger-info .firstname, #passenger-info .lastname,  #passenger-info .passport {
    text-transform: uppercase;
}
#copassenger-container .firstname, #copassenger-container .lastname,  #copassenger-container .passport {
    text-transform: uppercase;
}
.supported_cc {
    height: 25px;
}
.btn-addon-plus, .btn-addon-minus {
    border: none;
    outline: none;
    background: none;
}
.btn-addon-plus:focus, .btn-addon-minus:focus {
    border: none;
    outline: none;
    background: none;
}
.btn-addon-owner-plus, .btn-addon-owner-minus {
    border: none;
    outline: none;
    background: none;
}
.btn-addon-owner-plus:focus, .btn-addon-owner-minus:focus {
    border: none;
    outline: none;
    background: none;
}

.g-loading-text {
    background-image: linear-gradient(45deg, #000, #ddd, #000);
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientAnimation 2s linear infinite;
    animation-direction: reverse;
    background-size: 300% 100%;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0;
    }
    to {
        background-position: 100%;
    }
}
.addon-controls .btn:disabled {
    border: none;
}

.btn-account {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 32px;
    height: 32px;
}
.navbar-page-indicator {    
    background-color: #ffffff;
    color: #023047;
    border-radius: 50%;
    width: 25px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    margin-left: 5px;
}
.navbar-page-indicator-completed {
    background-color: #FFC107;
}
.fare-card-body {
    min-height: 50px;
}