/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#ratalityPaymentCancel{
    width: var(--purchase-button-width,auto);
    float: none;
    color: var(--purchase-button-normal-text-color,#fff);
    min-height: auto;
    padding: var(--purchase-button-padding,1em 1em);
    border-radius: var(--purchase-button-border-radius,3px);
    font-weight:bold;
    color: #fff !important;
    border: 1px solid var(--e-global-color-secondary);
    background-color: var(--e-global-color-secondary);
    transition: .3s all;
    cursor: pointer;
    display:inline-block;
    line-height:14px !important;
}

#ratalityPaymentCancel:hover{
    color: var(--e-global-color-secondary);
    background-color: #fff !important;
}

#ratalityPaymentCancel:before{
    font-family:"Font Awesome 7 Pro";
    content:'\f01e';
    margin-right:10px;
}

#place_order:before{
    font-family:"Font Awesome 7 Pro";
    content:"\f07a";
    margin-right:10px;
}

#ratalityPaymentRow{ padding-top:10px; margin-top:10px; border-top: 1px var(--sections-border-type,solid) var(--sections-border-color,#d4d4d4); }

#ratalityPaymentRow .textleft{ text-align:left; }
#ratalityPaymentRow .textright{ text-align:right; }


#RatalityProgress{
      background: var(--sections-background-color,#fff);
  border-radius: var(--sections-border-radius,3px);
  padding: var(--sections-padding,16px 30px);
  margin: var(--sections-margin,0 0 24px 0);
  border: 1px var(--sections-border-type,solid) var(--sections-border-color,#d4d4d4);
  display: block;
    text-align:center;
font-size:18px; text-transform:uppercase;
}

#RatalityProgress .active-step{ color:var(--e-global-color-primary) !important; font-weight:bold; }

#RatalityProgress .step-icon{ margin-bottom:5px; font-size:24px; line-height:30px; }

.e-checkout__column.e-checkout__column-start{ /*display:none; visibility:hidden; opacity:0;*/ }
.e-checkout__column.e-checkout__column-end{ width:100%;  }
.elementor-widget-woocommerce-checkout-page .e-checkout__container{ display:block !important; }
.ratality_disabled{
    pointer-events: none;
    cursor: not-allowed;
    background-color: grey;
}


#ratalityLoader{
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: all;
    cursor: wait;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0; 
    visibility: hidden;
    transition: .3s all;

}

#ratalityLoader.SHOWING{
    opacity: 1; 
    visibility: visible;
    z-index: 99999;
}

.route_one_select.inactive, .route_two_select.inactive{
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.trip_container{
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid;
}

.trip_container:last-of-type{
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: none;
}

.trip_container > h2{
    margin-bottom: 10px;
}

.trip_item{
    padding: 20px;
    border: 1px solid;
    margin-bottom: 20px;
    position: relative;
}

.trip_item:last-of-type{
    margin-bottom: 0px;
}

.trip-action-row{
    padding-top: 20px;
    margin-top: 20px !important;
    border-top: 1px solid;
}

.route_select_button{
    display: block;
    width: 100%;
    text-align: center;
    padding: 0 20px;
    line-height: 40px;
    border: 1px solid;
    text-transform: uppercase;
    cursor: pointer;
}

.selected_trip_one_item, .selected_trip_two_item{
    box-shadow: 0px 0px 50px -6px rgba(0, 0, 0, 0.11);
    border-color: gold;
}

#RATALITYSEARCHCONTAINER input,
#RATALITYSEARCHCONTAINER select{
    width: 100%;
}

.ratality_ticket_block{
    padding: 20px;
    border: 1px solid;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.ratality_ticket_block label{
    display: block;
}

.ratality_ticket_block input,
.ratality_ticket_block select{
    width: 100%;
}

#ratalityTicketActionBack{float:left; }
#ratalityTicketActionContinue{float:right;}
#ratalityTicketActionBack,
#ratalityTicketActionContinue{
    display: block;
    width: 50%;
    text-align: center;
    padding: 0 20px;
    line-height: 40px;
    border: 1px solid;
    text-transform: uppercase;
    cursor: pointer;
}

.TRIPSTOPS{ 
    padding-top: 20px;
    margin-top: 20px !important;
    border-top: 1px solid;
    display:none; 
}

.TRIP_MAP_TOGGLE{
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

.RATALITY_MAP{min-height: 600px;}

.ratality_map_marker{ font-size:20px; color:#fff; background-color:#000; width:40px; line-height:40px; border-radius:120px; text-align:center; }