/* ---------------------------------------------------
    MAIN STYLE
----------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

select {
    background: url(../assets/drp.svg) no-repeat 95% 50%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.border-top-bottom-radius-right {
    border-bottom-right-radius: 18px;
    border-top-right-radius: 18px;
}

.border-top-bottom-radius-left {
    border-bottom-left-radius: 18px;
    border-top-left-radius: 18px;
}

.jerry-btn:focus, .jerry-btn:hover {
    color: #FFFF00 !important;
    background-color: #0c1c3d !important;
    border-color: #0c1c3d !important;
}

.header-attr {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Poppins';
}

.price-attr{
    font-size:16px;
    font-weight:400;
}

.jerry-red {
    color: #c63d3a;
}

/*.jerry-attr-align {
    position: relative;
    top: 10px;
    right: 10px;
    text-align: left;
}*/

.jerry-addon-align {
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: right;
}

.jerry-blue-green {
    color: #21b6a8;
}

.jerry-gold {
    color: #daa520;
}

.jerry-tab-mobile {
    color: #fff;
    background-color: transparent;
    border-color: #0c1c3d;
}

.jerry-link {
    color: #6dafcb;
    font-family: Roboto, Courier, monospace;
    font-size: 16px;
    font-weight: 600;
}

.pax-count {
    color: white;
    font-family: 'Poppins';
    font-size: 19px;
}

.jerry-btn {
    color: #0c1c3d;
    background-color: white;
    border-color: #0c1c3d;
}

.jerry-btn-secondary {
    color: #ff0;
    background-color: #c63d3a;
    border-color: #c63d3a;
}

.jerry-btn-third {
    color: #0c1c3d;
    background-color: white;
    font-weight: 700;
    border-color: #E2E2E2;
    border-radius:8px;
}

.jerry-btn-third:focus, .jerry-btn-third:hover, .highlight {
        color: #ff0;
        background-color: #c63d3a;
        border-color: #c63d3a;
        font-weight:700;
}

.booking-btn {
    background: #FFFFFF;
    border: 2px solid #E2E2E2;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.jerry-action-button {
    background: #C63D3A;
    border-radius: 8px;
    color: #FFFF00;
}

.booking-btn:hover, .booking-btn:active, .booking-btn:focus {
     background: #FFFFFF;
     border: 2px solid #c63d3a;
     border-radius: 12px;
     font-weight: 700;
     text-transform: uppercase;
}

.round-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d9d9d9;
    outline: none;
    cursor: pointer;
}

    .round-checkbox:checked {
        background-color: white;
        border: 6px solid #C63D3A;
    }

.rectangle-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #d9d9d9;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    position: relative;
}

    .rectangle-checkbox:checked {
        background-color: #C63D3A;
        border: 2px solid #C63D3A;
    }

    .rectangle-checkbox:checked:before {
        content: "\2714";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: white;
        background-color: #C63D3A;
    }

.booking-add-btn {
    font-weight: 600;
    font-size: 18px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #FFFF00;
    background: #C63D3A;
    border-radius: 8px;
}

.jerry-mandatory-field {
    color: #c63d3a;
}

.forgot-password {
    color: #c63d3a;
}

input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="email"], select {
    border-color: #c5c5c5 !important;
    border-radius: 8px !important;
}

.full-width {
    width: 80%;
}

.jerry-mandatory-field, .privacy-policy {
    color: #c63d3a;
}

.form-control {
    font-size: 15px;
    color: #626363;
}

.jerry-label, .jerry-text {
    color: #0c1c3d !important;
    
}

.jerry-label-alert {
    color: #C63D3A !important
}

.jerry-header {
    background-color: #0C1C3D;
}

.jerry-footer {
    background-color: #0C1C3D;
}



/* JERRY LINE COLOR */

.jerry-line-color {
    border: 1px solid #001539;
}

/* JERRY ACTIVE TAB */

.jerryTabActive {
    background: #0c1c3d;
    color: #FFFF00;
}

/* JERRY BOOKING TAB */

.jerry-tab-select {
    border-color: #c63d3a;
}

/* JERRY LOCATION CARD*/

.jerry-location-card {
    background-color: #FFE1B4;
    border-radius: 15px;
}

.jerry-full_modal-dialog {
    width: 98% !important;
    height: 92% !important;
    min-width: 98% !important;
    min-height: 92% !important;
    max-width: 98% !important;
    max-height: 92% !important;
    padding: 0 !important;
}

.jerry-full_modal-content {
    height: 99% !important;
    min-height: 99% !important;
    max-height: 99% !important;
}

/* JERRY ATTRIBUTE CARD*/

@media screen and (max-height: 780px) {

    .modal-popup-detail {
        padding-top:3rem;
        padding-bottom:3rem;
    }
}

/* JERRY CARD */

.jerry-body-card {
    background: #0C1C3D;
    border-radius: 0px 0px 30px 30px;
}

.jerry-body-card-mobile {
    background: #0C1C3D;
    border-radius: 30px 30px 30px 30px;
    padding: 1rem;
}

.jerry-card-select-top {
    border: 3px solid #c63d3a !important;
}

.jerry-card-select {
    /*border: 3px solid #c63d3a;*/
    background: #c63d3a;
}

.jerry-body-card-title {
    color: #FFFF00;
    font-family: 'Poppins' !important;
    font-weight: 700;
    font-size: 29px;
}

/* Medium screens */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .jerry-body-card-title {
        font-size: 20px;
    }
}

.jerry-body-card-description {
    color: white;
    font-family: 'Poppins' !important;
    font-weight: 700;
}

.jerry-body-card-description-invert {
    color: #0C1C3D;
    font-family: 'Poppins' !important;
    font-weight: 700;
    font-size: 16px;
}

/* Medium screens */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .jerry-body-card-description-invert {
        font-size: 12px;
    }
}

.jerry-calendar-title-count {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Poppins' !important;
    font-weight: 700;
    font-size:16px;
}


.jerry-calendar-title-period {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Poppins' !important;
    font-weight: 700;
    font-size: 16px;
}


.pax-wrapper {
    background-color: white;
    border-radius: 7px;
}

.jerry-top-card-border {
    border: 3px solid #0C1C3D;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

/*JERRY TALK BUBBLE SHAPE*/

.talkbubble-plain {
    background: #c63d3a;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font-size: 14px;
}

.talkbubble {
    background: #c63d3a;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font-size: 14px;
}

    .talkbubble:before {
        content: "";
        position: absolute;
        right: 95%;
        top:3px;
        width: 0;
        height: 0;
        border-top: 3px solid transparent;
        border-right: 26px solid #c63d3a;
        border-bottom: 13px solid transparent;
        z-index: -100;
    }

@media screen and (max-width: 768px) {
    .talkbubble {
        font-size: 11px;
    }

        .talkbubble:before {
            right: 93%;
            border-bottom: 10px solid transparent;
        }
}

@media screen and (min-width: 500px) {
    .jerry-text-image-addon {
        width: 55%;
    }
}

@media screen and (max-width: 500px) {
    .jerry-text-image-addon {
        width: 70%;
    }
}

@media screen and (max-width: 365px) {
    .jerry-text-image-addon {
        width: 90%;
    }
}

/*
    JERRY BOOKING PLAN DESCRIPTION
*/

.jerry-border-decsription {
    border-radius: 15px;
    border-color: #FFE1B4;
    border: 2px solid #FFE1B4;
}

/* JERRY BOOKING FORM*/

.jerry-booking-form-text {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size:16px;
}

.jerry-booking-detail-form-border {
    border: 1.3px solid #E2E2E2;
    border-radius: 20px;
}

/*JERRY BOOKING HISTORY*/

.jerry-bh-color-1 {
    background-color: #FFE1B4;
    border-radius: 15px;
}

.jerry-bh-color-2 {
    background-color: #c63d3a;
    border-radius: 15px;
}

.jerry-card-header-color {
    color: #FFFF00;
    font-weight:700;
}

.jerry-card-header-color-2 {
    color: #001539;
    font-weight: 700;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    transition: all 0.3s;
}

    #sidebar.active {
        margin-left: -250px;
    }

    #sidebar .sidebar-header {
        padding: 20px;
        background: #6d7fcc;
    }

    #sidebar ul.components {
        padding: 20px 0;
        border-bottom: 1px solid #47748b;
    }

    #sidebar ul p {
        color: #fff;
        padding: 10px;
    }

    #sidebar ul li a {
        padding: 10px;
        font-size: 1.1em;
        display: block;
    }

        #sidebar ul li a:hover {
            color: #7386D5;
            background: #fff;
        }

    #sidebar ul li.active > a,
    a[aria-expanded="true"] {
        color: #fff;
        background: #6d7fcc;
    }

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}



/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 767px) {
    #sidebar {
        margin-left: -252px;
    }
    #sidebar.active {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }
}

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
}

.fixed-top {
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    z-index: 2000;
}



/*
    HACK DATERANGEPICKER
*/

.daterangepicker td.disabled, .daterangepicker option.disabled {
    color: #c9c9c9 !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
    position: relative;
}

    .daterangepicker td.disabled:after, .daterangepicker option.disabled:after {
        text-emphasis: filled circle red;
        text-emphasis-position: under right;
        content: '.';
        position: absolute;
        left: 0px;
        width: 100%;
        display: inline-block;
        color: transparent;
    }

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #c63d3a !important;
    border-color: transparent !important;
    color: #ffff00 !important;
    border-radius: 50px 50px 50px 50px !important;
}

/* TOAST MESSAGE */

.toast {
    position: fixed;
    top: 10% !important; /* adjust this value to set the distance from the top of the screen */
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    border-radius: 4px;
    animation: toastFadeInOut 3s ease-in-out;
    z-index: 1100;
}

.success {
    background-color: #0C1C3D;
    color: #fff;
}

.danger  {
    background-color: #c63d3a;
    color: #fff;
}

.toast-error {
    background-color: #c63d3a;
    color: #fff;
}

@keyframes toastFadeInOut {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.select2-container .select2-selection--single {
    height: 36px !important; 
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    margin-top: 5px;
}

.booking-detail-kv strong {
    font-size: 12px;
    color: #3a3a3a;
    background: #c63d3a;
    color: #fff600;
    padding: 2px 12px;
    border-radius: 9px;
    font-weight: 400;
}

#booking-summary .table {
    background: white;
}

    #booking-summary .table thead th {
        border-bottom: 2px solid #c63d3a;
    }

.text-green {
    color: green;
}

.text-gray {
    color: #ccc;
}

#authModal {
    z-index: 1100;
}

#authModal .modal-title {
    font-weight: bold;
    font-size: 18px;
    width: 100%;
}

#authModal .modal-subtitle {
    font-size: 14px;
    width: 100%;
}

#updateDetailsModal {
    z-index: 1100;
}

#updateDetailsModal .modal-title {
    font-weight: bold;
    font-size: 18px;
    width: 100%;
}

#updateDetailsModal .modal-subtitle {
    font-size: 14px;
    width: 100%;
}

.jerry-referral-text {
    width: 100%;
    resize: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
}

.aff-page-header {
    font-size: 25px;
    font-weight: bold;
}

.aff-page-subheader {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 20px;
}

.image-modal-body {
    padding: 3px;
}

.image-modal-body img {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .jerry-image-dialog {
        width: 80% !important;
        min-width: 80% !important;
        max-width: 80% !important;
        padding: 0 !important;
    }
}

.j-text-responsive {
    font-size: calc(100% + 0.3vw + 0.3vh);
}

.promotion-header {
    position: sticky;
    top: 55px;
    z-index: 1090;
}

.promotion-subheader {
    width: 100%;
    background-color: yellow;
    color: #0c1c3d;
    padding: 10px 10px 10px 10px;
    height: auto !important;
    line-height: 2rem !important;
    display: flex;
    align-items: center;
    font-family: 'Poppins' !important;
    font-weight: 600;
}

.promotion-timer {
    background-color: whitesmoke;
    color: #212529;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
}

.promotion-subtotal {
    box-shadow: 3px 5px 5px #888888;
    padding: 10px 30px 10px 10px;
    background-color: yellow;
    color: #212529;
    border-radius: 100px;
}

.promotion-bottom-label {
    z-index: 100;
    background-color: yellow;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    position: absolute;
    bottom: -40px;
    right: -30px;
    display: flex;
    align-items: center;
    box-shadow: 2px 2px 3px #888888;
    font-family: 'Poppins' !important;
    font-weight: 900;
    font-size: 20px;
    line-height: 1em;
}

.promotion-bottom-label-mobile {
    z-index: 1000 !important;
    background-color: yellow;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 5%;
    right: 13%;
    display: flex;
    align-items: center;
    box-shadow: 2px 2px 3px #444444;
    font-family: 'Poppins' !important;
    font-size: 12px;
    line-height: 1em;
}

.booking-info-card-panel {
    background-color: #C63D3A;
    color: #FFFF00;
    border-radius: 6px;
    font-weight: 600;
}

.booking-info-label {
    color: #999999;
}

.promotion-margin-top {
    margin-top: 5rem !important;
}

.promotion-addon-icon {
    background-color: yellow;
    color: black;
    border-radius: 5px;
    box-shadow: 2px 2px 3px #444444;
    font-weight: 700;
    padding: 2px 3px 2px 3px;
    text-transform: uppercase;
}

/* Style for the WhatsApp icon container */
.sticky-whatsapp {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 2000;
}

@media (max-width: 768px) {
    .sticky-whatsapp img {
        width: 60px; /* Adjust the size as needed */
        height: auto;
        filter: drop-shadow(4px 4px 5px #00000040);
    }
}

@media (min-width: 768px) {
    .sticky-whatsapp img {
        width: 60px; /* Adjust the size as needed */
        height: auto;
        filter: drop-shadow(4px 4px 5px #00000040);
    }
}



@media (max-width: 1197px) {
    .badge-save-icon {
        position: absolute;
        top: -35px;
        right: -20px;
        z-index: 1;
        font-size: 90px;
    }
}

@media (min-width: 1196px) {
    .badge-save-icon {
        position: absolute;
        top: -35px;
        right: -30px;
        z-index: 1;
        font-size: 100px;
    }
}

@media (min-width: 1196px) {

    .text-save-icon {
        position: absolute;
        bottom: 82%;
        left: 87%;
        z-index: 1;
        font-size: 20px;
        transform: rotate(45deg);
        color: white;
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
    }
}

@media (max-width: 1197px) {

    .text-save-icon {
        position: absolute;
        top: -9px;
        right: -3px;
        z-index: 1;
        font-size: 13px;
        transform: rotate(45deg);
        color: white;
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
    }
}

@media (min-width: 1196px) {
    .text-discount-value {
        position: fixed;
        top: 24px;
        right: 20px;
        z-index: 1;
        font-size: 17px;
        transform: rotate(45deg);
        color: yellow;
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
    }
}

@media (max-width: 1197px) {
    .text-discount-value {
        position: absolute;
        top: 3px;
        right: 6px;
        z-index: 1;
        font-size: 15px;
        transform: rotate(45deg);
        color: yellow;
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
    }
}

    .pay-upfront-card {
        box-shadow: 0px 0px 0px !important;
        cursor: pointer;
        background-color: white;
        border: 2px solid #9e9e9e !important;
        border-radius: 30px;
    }

    .pay-upfront-card-mobile {
        box-shadow: 0px 0px 0px !important;
        cursor: pointer;
        background-color: white;
        border: 2px solid #9e9e9e !important;
        border-radius: 35px;
    }

    .jerry-pu-card-select {
        border: 3px solid #0c1c3d !important;
    }

.vertical-line {
    border: none;
    border-left: 1.5px solid #e2e2e2;
    height: 80px;
    margin: 0;
    position: absolute;
    top: 10%;
    left: 40%;
}

    .estacion {
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        background-color: #c84542;
        padding: 2px;
        border: 1px solid #ca4946;
        border-radius: 30px;
        width: 40%;
        text-align: center;
        position: absolute;
        top: -15%;
    }

.no-cancellation-text {
    display: flex;
    justify-content: center;
}

.booking-plan-panel {
    display: visible;
}

@media (max-width: 900px) {
    .booking-plan-panel {
        display: none;
    }
}


.addon-card {
    box-shadow: 0px 0px 0px !important;
    cursor: pointer;
    background-color: white;
    border: 2px solid #9e9e9e !important;
    border-radius: 15px;
}

.jerry-addon-select {
    border: 3px solid #c63d3a !important;
}