.listing .restaurant-status .bookmarkRibbon {
    border-top: 10px solid #00a474;
    border-bottom: 10px solid #00a474;
}

.open {
    background: #00a474 !important;
}
@media (max-width: 1199px) {

}
@media (min-width: 1200px) {
    .open {
        background: #00a474 !important;
    }
}
@media (min-width: 1300px){
    .menuGrid{margin-left: 9px;margin-right: 0px;display: grid;grid-template-columns: repeat(2,calc(50% - 8px));gap: 8px}
}
@media (min-width: 1299px){
    .menuGrid{margin-left: 9px;margin-right: 0px;display: grid;gap: 8px}
}
.listing .restaurant-status:before {
    border-top: 10px solid #7ec5b0;
}
.listing .restaurant-status.close {
    font-size:7pt !important;
}
.hideElement {
    display: none !important;
}

a[aria-expanded=false] .iminus {
    display: none !important;
    transition: .3s transform ease-in-out;
    transform: rotate(90deg);
    text-decoration: none !important;
    padding-top:4px;
    margin-right:10px;
}
a[aria-expanded=true] .iplus {
    display: none !important;
    transition: .3s transform ease-in-out;
    transform: rotate(90deg);
    text-decoration: none !important;
    padding-top:4px;
    margin-right:10px;
}
/*
COLOR MAIN : #141A26
DARK : #9d1e1f
LIGHT: #fd2c2d
*/
html {
    scroll-behavior: smooth;
}
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
.panel-title > a:before {
    float: right !important;
    font-family: FontAwesome;
    content:"\f106";
    padding-right: 5px;
}
.panel-title > a.collapsed:before {
    float: right !important;
    content:"\f107";
}
.panel-title > a:hover,
.panel-title > a:active,
.panel-title > a:focus  {
    text-decoration:none;
}
.close {
    font-size:30pt !important;
    font-weight: 300 !important;
    text-shadow: none !important;
    margin-top:-10px !important;
}
.selectedServiceSearch {
    color:#141A26;
    font-weight:bold;
}
.p0 {padding:0px;}
.p5 {padding:5px;}
.p10 {padding:10px;}
.p15 {padding:15px;}
.p20 {padding:20px;}
.ph10 {padding:0px 10px;}
.pt10 {padding-top:10px;}
.noBorder{ border:none;}
.noBorderRadius{ border-radius:0px;}
.borderRadiusCircle{ border-radius:34px;}

.mb5 {margin-bottom:5px;}

.panel-default {
    border:none;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border:none !important;
    background: #fafafa;
}
.panel-default > .panel-heading {
    background: #fafafa;
    border:none;
    text-align:center;
}
.topAlignPrice {
    vertical-align: super;
    font-size:8pt;
    color:#000;
}
.menuProductDesign {
    padding:5px;
}
.menuProductDesign:hover {
    background:#efefef;
    cursor: pointer;
}


/* The container */
.checkboxLabel {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkboxLabel input {
    position: absolute;
    opacity: 0;
}

/* Create a custom checkbox */
.checkboxCheckmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkboxLabel:hover input ~ .checkboxCheckmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkboxLabel input:checked ~ .checkboxCheckmark {
    background-color: #d4282c;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkboxCheckmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkboxLabel input:checked ~ .checkboxCheckmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkboxLabel .checkboxCheckmark:after {
    left: 7px;
    top: 4px;
    width: 7px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* Customize the label (the container) */
.radioLabel {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radioLabel input {
    position: absolute;
    opacity: 0;
}

/* Create a custom radio button */
.radioCheckmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radioLabel:hover input ~ .radioCheckmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radioLabel input:checked ~ .radioCheckmark {
    background-color: #d4282c;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radioCheckmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioLabel input:checked ~ .radioCheckmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radioLabel .radioCheckmark:after {
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}


/* STYLE TOGGLE FRONTEND PICKUP DELIVERY START */


.switch {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 34px;
}

.switch input {display:none;}
.switch2 {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch2 input {display:none;}

.slider1 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider1:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider1 {
    background-color: #141A26;
}

input:focus + .slider1 {
    box-shadow: 0 0 1px #141A26;
}

input:checked + .slider1:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded slider1s */
.slider1.round {
    border-radius: 34px;
}

.slider1.round:before {
    border-radius: 50%;
}

.input-group-addon {
    background: transparent !important;
}
/* STYLE TOGGLE FRONTEND PICKUP DELIVERY END */


img {
    /*max-width:800px !important;*/
}
/* PIZZA ICON START */
.pizzaRadioContainerFirstHalf {
    cursor: pointer;
    user-select: none;
}
.pizzaRadioContainerFirstHalf input {
    display: none;
}
.pizzaRadioContainerFirstHalf .pizzaIconFirstHalf {
    display: inline-block;
    width:24px;
    height:24px;
    background: url('../assets/images/Unselected-half-1.png');
    border-radius:50%;
}
.pizzaIconFirstHalf{
    background: url('../assets/images/Selected-half-1.png');
}
.pizzaRadioContainerFirstHalf:checked + .pizzaIconFirstHalf{
    background: url('../assets/images/Selected-half-1.png');
}
.pizzaIcon {
    margin:auto;
    width:34px;
    height: 34px;
    border-radius:50%;
    cursor: pointer;
    user-select: none;
    background-size: cover !important;
}
.pizzaIconFirstHalf {
    background: url('../assets/images/Unselected-half-1.png')
}
.pizzaIconFirstHalfSelected{
    background: url('../assets/images/Selected-half-1.png');
}

.pizzaIconSecondtHalf {
    background: url('../assets/images/Unselected-half-2.png');
}
.pizzaIconSecondtHalfSelected{
    background: url('../assets/images/Selected-half-2.png');
}

.pizzaIconWhole {
    background: url('../assets/images/Unselected-whole.png');
}
.pizzaIconWholeSelected{
    background: url('../assets/images/selected-whole.png');
}

.pizzaRadioContainerSecondHalf {
    cursor: pointer;
    user-select: none;
}
.pizzaRadioContainerSecondHalf input {
    display: none;
}
/*.pizzaRadioContainerSecondHalf .pizzaIconSecondtHalf {*/
/*    display: inline-block;*/
/*    width:24px;*/
/*    height:24px;*/
/*    background: url('../../front/icons/second_half2.png');*/
/*    border-radius:50%;*/
/*}*/
/*.pizzaRadioContainerSecondHalf:hover .pizzaIconSecondtHalf{*/
/*    background: url('../../front/icons/second_half.png');*/
/*}*/
/*.pizzaRadioContainerSecondHalf input:checked + .pizzaIconSecondtHalf{*/
/*    background: url('../../front/icons/second_half.png');*/
/*}*/

/*.pizzaRadioContainerWhole {*/
/*    cursor: pointer;*/
/*    user-select: none;*/
/*}*/
/*.pizzaRadioContainerWhole input {*/
/*    display: none;*/
/*}*/
/*.pizzaRadioContainerWhole .pizzaIconWhole {*/
/*    display: inline-block;*/
/*    width:24px;*/
/*    height:24px;*/
/*    background: url('../../front/icons/whole2.png');*/
/*    border-radius:50%;*/
/*}*/
/*.pizzaRadioContainerWhole:hover .pizzaIconWhole{*/
/*    background: url('../../front/icons/whole.png');*/
/*}*/
/*.pizzaRadioContainerWhole input:checked + .pizzaIconWhole{*/
/*    background: url('../../front/icons/whole.png');*/
/*}*/
/* PIZZA ICON END */

.deleteIcon:hover {
    color: rgb(30, 37, 51);
    cursor:pointer;
}

.loadingSVG {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .2 )
    url('/front/images/loading.svg')
    50% 50%
    no-repeat;
}

#overlayLoading {
    position: absolute;
    visibility: hidden;
    left: 0;
    top: 0;
    width:100%;
    text-align:center;
    z-index: 9999;
    background: rgba( 255, 255, 255, .6 );
    /* Required for IE 5, 6, 7 */         /* ...or something to trigger hasLayout, like zoom: 1; */         width: 100%;           /* Theoretically for IE 8 & 9 (more valid) */         /* ...but not required as filter works too */         /* should come BEFORE filter */         -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";          /* This works in IE 8 & 9 too */         /* ... but also 5, 6, 7 */         filter: alpha(opacity=90);          /* Older than Firefox 0.9 */         -moz-opacity:0.9;          /* Safari 1.x (pre WebKit!) */         -khtml-opacity: 0.9;          /* Modern!         /* Firefox 0.9+, Safari 2?, Chrome any?         /* Opera 9+, IE 9+ */         opacity: 0.9;
}
.gap{
    height: 50px;
}

/*!* When the body has the loading class, we turn*/
/*the scrollbar off with overflow:hidden *!*/
/*body.loading .loadingSVG {*/
/*overflow: hidden;*/
/*}*/

/*!* Anytime the body has the loading class, our*/
/*modal element will be visible *!*/
/*body.loading .loadingSVG {*/
/*display: block;*/
/*}*/


/* Customize the label (the container) */
.radioLabelRegister {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    margin-right:20px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radioLabelRegister input {
    position: absolute;
    opacity: 0;
}

/* Create a custom radio button */
.radioCheckmarkRegister {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #999;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radioLabelRegister:hover input ~ .radioCheckmarkRegister {
    background-color: #484848;
}

/* When the radio button is checked, add a blue background */
.radioLabelRegister input:checked ~ .radioCheckmarkRegister {
    background-color: #141A26;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radioCheckmarkRegister:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioLabelRegister input:checked ~ .radioCheckmarkRegister:after {
    display: inline-block;
}

/* Style the indicator (dot/circle) */
.radioLabelRegister .radioCheckmarkRegister:after {
    top: 5px;
    left: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/*Override Menu Script*/
.mm-hasnavbar-top-3 .mm-panels {
    top:0 !important;
}
.mm-navbar-size-3 {
    height:0 !important;
}
.colorWhite {color:#fff;}
.centerImage {
    max-height:200px;
    max-width:100%;
    margin:auto;
}
.titleFront{height:21px;overflow: hidden;}
.addressFront {font-size:8pt;}
.list-card-badge {
    height:80px;
    overflow:hidden;
}
.checkedRadio{
    display: inline-block;
    width:24px;
    height:24px;
    background: url('../../front/icons/second_half.png') !important;
}
.modal-body p {
    color:#000 !important;
}
/* width */
::-webkit-scrollbar {
    width: 2px;
}

/* Track */
@media (min-width: 601px) {
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }
}
@media (max-width: 600px) {
    ::-webkit-scrollbar-track {
        border-radius: 10px;
    }

}

@media (min-width: 601px) {
    ::-webkit-scrollbar-thumb {
        background: #bcc3d2;
        border-radius: 2px;
    }
}
/* Handle */
@media (max-width: 600px) {
    ::-webkit-scrollbar-thumb {
        border-radius: 2px;
    }

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #bcc3d2;
}
.panel-heading {
    cursor: pointer;
    font-size:12pt;
}
/* CSS Method for adding Font Awesome Chevron Icons */
.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: "Font Awesome 5 Free";
    content:"\f146";
    color: #000;
}
.panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    font-family: "Font Awesome 5 Free";
    content:"\f0fe";
    color: #000;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 2px !important;
}
.categories-scrollbar::-webkit-scrollbar-track{
    box-shadow: none;
}

@media (min-width: 601px) {
    /* Works on Chrome/Edge/Safari */
    *::-webkit-scrollbar {
        width: 20px;
    }
    *::-webkit-scrollbar-track {
        background: #efefef;
        border-radius:0;
    }
    *::-webkit-scrollbar-thumb {
        background-color: #cccccc;
        border: 2px solid #cccccc;
    }

}
@media (max-width: 600px) {
    /* Works on Chrome/Edge/Safari */
    *::-webkit-scrollbar {
        width: 2px;
    }
    *::-webkit-scrollbar-track {
        /*background: #efefef;*/
        border-radius:0;
    }
    *::-webkit-scrollbar-thumb {
        /*background-color: #cccccc;*/
        /*border: 2px solid #cccccc;*/
    }

}

.pac-logo {
    z-index:9999999 !important;
}
.table td, .table th{
    border-top:none;
}
.p5 {padding:5px;}
.pl0{padding-left:0;}
.p0 {padding:0;}

progress {
    text-align: center;
    height: 15px;
    width: 100%;
    -webkit-appearance: none;
    border: none;

    /* Set the progressbar to relative */
    position:relative;
}
progress:before {
    content: attr(data-label);
    font-size: 0.8em;
    vertical-align: 0;
    color:#000;
    /*Position text over the progress bar */
    position:absolute;
    right:0;
}
progress::-webkit-progress-bar {
    background-color: #edc6c5;
}
progress::-webkit-progress-value {
    background-color: #d9534f;
}
progress::-moz-progress-bar {
    background-color: #d9534f;
}
.hoverProductShadow {
    padding:5px;
    border-radius: 5px;
}
.hoverProductShadow:hover {
    background: #fafafa;
    box-shadow: 1px 1px 4px #cccccc;
}
/*.price-holder {*/
/*    right:10px !important;*/
/*}*/
.modal-footer22 {
    /*position: sticky;*/
    background: #fff;
    bottom: 0;

}

.modal-dialog22{
    height:calc(100% - 60px) !important;
}
.modal-content22{
    height:100vh !important;
    min-height:100vh ;
    overflow: hidden;
}
.modal-header22{
    height:50px !important;

}
.modal-body22 {
    /*height:calc(100% - 85px) !important;*/
    height:86vh;
    overflow-y: scroll;     /*give auto it will take based in content */
}
.modal-body22::-webkit-scrollbar {
    width: 1px !important;
}

.padding-left-5-m {
    padding-left: 5px !important;
}
@media (max-width: 1068px) {
    .container, .container-sm{
        max-width: 100%;
    }
}
@media (min-width: 1069px) {
    .container, .container-sm{
        max-width: 70%;
    }
}
@media (min-width: 1471px) {
    .accordion-with{
        width: 11.5vw !important;
    }
}
@media (max-width: 1470px) {
    .accordion-with{
        width: 17.5vw !important;
    }
}
@media only screen and (max-width: 1199px) {
    .padding-left-5-m {
        padding-left: 0 !important;
    }
    .modal-dialog {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .product-modal::-webkit-scrollbar {
        width: 2px !important;
    }
    .fixedTopPosition{
        position: fixed;
        top:0;
        left:0;
        right: 0;
        background: white;
        z-index: 99;
       height: 60px;
    }
    .menu-category-link{
        color:black !important;
        /*border:1px solid black;*/
        border-radius:15px;
        padding:5px 15px;
        font-weight: bold;
    }
    .active-category {
        background:black;
        border:1px solid #fff;
        border-radius:15px;
        padding:5px 15px;
        color: white !important;
        font-weight: bold;
    }
}
@media only screen and (min-width: 1020px) {
    .pizzaRadioContainerFirstHalf:hover .pizzaIconFirstHalf{
        background: url('../assets/images/Selected-half-1.png');
    }

    .pizzaIconFirstHalf:hover {
        background: url('../assets/images/Selected-half-1.png');
    }
    .pizzaIconSecondtHalf:hover {
        background: url('../assets/images/Selected-half-2.png');
    }
    .pizzaIconWhole:hover {
        background: url('../assets/images/selected-whole.png');
    }
    .modal-content22 {
        width: 800px;
        margin: auto;
        max-width: 100%;
    }
    .modal-content {
        width: 685px;
        margin: auto;
        max-width: 100%;
    }
}

/*!* Track *!*/
/*::-webkit-scrollbar-track {*/
/*    background: #f1f1f1;*/
/*}*/

/*!* Handle *!*/
/*::-webkit-scrollbar-thumb {*/
/*    background: #888;*/
/*}*/
/*body.modal-open {*/
/*    overflow: hidden;*/
/*    position: fixed;*/
/*}*/
* {
    touch-action: manipulation;
}
.btn-not-selected{
    border:1px solid #000;
    background: white;
}

.btn-not-selected span{
    color:#000 !important;
}
.btn-selected{
    border:1px solid #d4282c;
    background: #d4282c;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.btn-selected span{
    color:#fff !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    @media (max-width:576px){
        .margin-t-sm-1{
            margin-top: 1rem;
        }
    }


input:focus {
    outline: none !important;
}
input[type='text'],
input[type='number'],
input[type='password'],
textarea {
    outline: none;
    box-shadow:none !important;
}