@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root {
    --Font_One: "DM Sans", sans-serif !important;
    --Primary_Color: #1c2d64;
    --Primary_BGColor: #1c2d64;
    --Secondary_Color: #f2f4ff;
    --Secondary_BGColor: #f2f4ff;
    --Paragraph_Color: #2e2e2e;
    --Icon_Color: #1c2d64;
    --Icon_BGColor: #f2f4ff;
    --Heading_Color: #1c2d64;
    --Link_Color: #1c2d64;
    --Border_Color: #1c2d64;
    --Secondary_BtnBgColor: #F15A25;
}

/* Theme Controls Starts */

body {
    font-family: var(--Font_One) !important;
    font-size: 14px;
    line-height: 24px;
}

.primaryColor {
    color: var(--Primary_Color) !important;
}

.primaryColor a {
    color: var(--Primary_Color) !important;
}

.primaryBgColor {
    background-color: var(--Primary_BGColor) !important;
}

.secondaryColor {
    color: var(--Primary_Color) !important;
}

.secondaryColor a {
    color: var(--Primary_Color) !important;
}

.secondaryBgColor {
    background-color: var(--Secondary_BGColor) !important;
}

.headingColor {
    color: var(--Heading_Color) !important;
}

.headingColor a {
    color: var(--Heading_Color) !important;
}

.linkColor {
    color: var(--Link_Color) !important;
}

.linkColor a {
    color: var(--Link_Color) !important;
}

.iconColor {
    color: var(--Icon_Color) !important;
}

.iconColor a {
    color: var(--Icon_Color) !important;
}

.borderColor {
    border-color: var(--Primary_Color) !important;
}

a {
    color: var(--Primary_Color) !important;
    text-decoration: none !important;
}

.paragraphColor {
    color: var(--Paragraph_Color) !important;
}

.offerBg {
    background-color: var(--Secondary_BtnBgColor) !important;
}

.secondaryBtnBgColor {
    background-color: var(--Secondary_BtnBgColor) !important;
}

/* Theme Controls Ends Here */

/* Master CSS Starts Here */

.customBackgroundColor {
    background-color: #e9ecee;
}

.br0 {
    border-radius: 0 !important;
}

.br5 {
    border-radius: 5px !important;
}

.br7 {
    border-radius: 7px !important;
}

.br10 {
    border-radius: 10px;
}

.br50 {
    border-radius: 50px !important;
}

.h100 {
    height: 100vh;
}

.width300 {
    width: 300px;
}

.height231 {
    height: 300px;
}

.card.boxShadowNone.p-0.transparentBg .height231 {

    height: 100%;
}

.height40 {
    height: 40px;
}

.wh13 {
    width: 15px;
    height: 15px;
}

.wh20 {
    width: 20px;
    height: 20px;
}

.wh28 {
    width: 28px;
    height: 28px;
}

.wh40 {
    height: 40px;
    width: 40px;

    object-fit: contain;
}

.card.border-0.cardBoxShadow.borderRadius10 .col-auto .wh40 {
    height: 60px;
    width: 60px;
}

.height44 {
    height: 44px;
}

.wh50 {
    width: 50px;
    height: 50px;
}

.wh59 {
    width: 59px;
    height: 59px;
}

.wh87 {
    width: 87px;
    height: 87px;
}

.width85 {
    width: 85px;
}

.wh140 {
    /* width: 140px; */
    height: 140px;
}

.w140h100 {
    /* width: 140px; */
    height: 100px;
}

.width305 {
    width: 305px !important;
    z-index: 9999 !important;
}

.wh35 {
    width: 35px;
    height: 35px;
}

.textDecorationNone a {
    text-decoration: none;
}

.customBorder {
    border: 1px solid #cccbcb !important;
}

.customFocusBorder:focus {
    border-color: #ced4da !important;
}

.focusRemove:focus {
    box-shadow: none;
}

.transparentBg {
    background-color: transparent;
}

.customBg {
    background-color: #1c2d64 !important;
}

.orangeBg {
    background-color: #f15a25;
    color: #fff;
}

.orangeBg:hover {
    background-color: #f15a25;
}

.customBg:hover {
    background-color: var(--Primary_BGColor);
}

.redBg {
    background-color: #e30b3f;
}

.lightWarningBg {
    background-color: #fff9ec;
}

.lightOrangeBg {
    background-color: #fcf2ee;
}

.warningBg {
    background-color: #fbb30d;
}

.mutedBg {
    background-color: #e9e9e9;
}

.greenBg {
    background-color: #1a9a2f;
}

.rejectedBg {
    background-color: #ff1c1c;
}

.mutedPurpleBg {
    background-color: #faf8ff;
}

.lightMutedBg {
    background-color: #f8f4f4;
}

.orange1Bg {
    background-color: #ff8223;
}

.mutedTableBg {
    background-color: #f5f5f5;
}

.lightGreenBg {
    background-color: #77f98c;
}

.lightRedBg {
    background-color: #ffe1e5;
}

.mutedBg1 {
    background-color: #f1f1f1;
}

.mutedBg2 {
    background-color: #eeeeee !important;
}

.primaryBlueBg {
    background-color: #0b75d2;
}

.yellowBg {
    background-color: #f9ac38;
}

.brownBg {
    background-color: #b90404;
}

.secondaryBgColor1 {
    background-color: #f0eaff;
}

.blueBg {
    background-color: #0a17a7;
}

.redBackground2 {
    background-color: #db1f35;
}

.greenBackground {
    background-color: #299603;
}

.lightPinkBg {
    background-color: #f65078;
}

.lightOrangeBg {
    background-color: #ffebe4;
}

.darkOrangeBg {
    background-color: #ff5012;
}

.mutedBg3 {
    background-color: #f6f6f6;
}

.darkMuted {
    color: #7c7b84;
}

.selectedEffectColor {
    background: #edf0ff;
}

.cursorInvalid {
    cursor: not-allowed !important;
}

.yellowColor {
    color: #fbb30d;
}

.acceptedColor {
    color: #35cf00;
}

.scheduledColor {
    color: #fe52a8;
}

.rejected {
    color: #ff0101;
}

.shipped {
    color: #1d0dfb;
}

.cancelled {
    color: #b90000;
}

.delivered {
    color: #296d08;
}

.orangeColor {
    color: #ff5012;
}

.successColor {
    color: #1a9a2f;
}

.colorMuted {
    color: #3f3e3e;
}

.lightMuted {
    color: #c3c3c3;
}

.black12 {
    color: #282c3f;
}

.redText {
    color: #e30b3f !important;
}

.redText:hover {
    color: #e30b3f !important;
}

.currencyBg {
    background-color: #3283cb;
}

.pendingYellowBg {
    background-color: #fdb205;
}

.customBorder1 {
    border: 0.75px solid var(--Primary_Color);
}

.borderRadius5 {
    border-radius: 5px !important;
}

.borderRadius10 {
    border-radius: 10px !important;
}

.borderRadiusTop15 {
    border-radius: 0px 0px 0px 0px;
}

.borderRadiusBottom10 {
    border-radius: 0px 0px 0px 0px;
}

.borderRadius21 {
    border-radius: 20px !important;
}

.borderRadius50 {
    border-radius: 50px !important;
}

.borderRadiusStart10 {
    border-radius: 10px 0px 0px 10px;
}

.borderRadiusEnd10 {
    border-radius: 0px 10px 10px 0px;
}

.borderRadiusStart50 {
    border-radius: 0px 0px 0px 0px;
}

.borderRadiusEnd50 {
    border-radius: 0px 0px 0px 0px;
}

.borderRadius1505 {
    border-radius: 0px 0px;
}

.borderRadiusLeft5 {
    border-radius: 0px 0px 0px 0px;
}

.font400 {
    font-weight: 400 !important;
}

.font500 {
    font-weight: 500 !important;
}

.font600 {
    font-weight: 600 !important;
}

.font700 {
    font-weight: 700 !important;
}

.font800 {
    font-weight: 800 !important;
}

.font9 {
    font-size: 9px;
}

.font10 {
    font-size: 10px;
}

.font11 {
    font-size: 11px;
}

.font12 {
    font-size: 12px;
    line-height: 18px;
}

.font13 {
    font-size: 13px;
}

.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

.font22 {
    font-size: 22px;
}

.font26 {
    font-size: 26px;
}

.font30 {
    font-size: 30px;
}

.blackColor {
    color: #000000;
}

.blackColor a {
    color: #000000 !important;
}

.mutedSubHeading {
    color: #bab8be;
}

.customColor {
    color: var(--Primary_Color) !important;
}

.customColor a {
    color: #1c2d64;
}

.darkMutedColor {
    color: #989797;
}

.lightBlackColor {
    color: #302834;
}

.darkBlackColor {
    color: #262626;
}

.blackText {
    color: #292929;
}

.facebookColor {
    color: #385c8e;
}

.black1 {
    color: #010101;
}

.black2 {
    color: #313030;
}

.black8 {
    color: #1d1d1d;
}

.muted1 {
    color: #b0adad;
}

.muted2 {
    color: #666363;
}

.muted3 {
    color: #6d6d6d;
}

.muted4 {
    color: #b7a9a9;
}

.muted5 {
    color: #8e8e8e;
}

.muted6 {
    color: #c0b3b3;
}

.muted7 {
    color: #717171;
}

.muted8 {
    color: #8d8989;
}

.muted9 {
    color: #c4c4c4;
}

.muted10 {
    color: #373737 !important;
}

.muted11 {
    color: #b5b5b5;
}

.muted12 {
    color: #979797;
}

.muted13 {
    color: #a0a0a0;
}

.muted19 {
    color: #5e5e5e;
}

.warningColor {
    color: #f2ad22;
}

.muted14 {
    color: #767474;
}

.muted15 {
    color: #646464;
}

.muted16 {
    color: #494949;
}

.muted18 {
    color: #808080;
}

.muted17 {
    color: #4d4b4b !important;
}

.muted20 {
    color: #686868;
}

.muted21 {
    color: #b4b3b3;
}

.pendingColor {
    color: #fdb205;
}

.kdsWrapper .orangeColor {
    background: gray;
    padding: 2px 8px;
    border-radius: 100px;
    color: #ffffff;
}

.kdsWrapper .orangeColor.active {
    background: #f15a25;
}

.greenColor {
    color: #1a9a2f;
}

.darkGreenColor {
    color: #4f8000;
}

.blueColor {
    color: #0b75d2;
}

.black3 {
    color: #020202;
}

.black4 {
    color: #202020;
}

.black5 {
    color: #232323;
}

.black6 {
    color: #0c0c0c;
}

.black7 {
    color: #3a3a3a;
}

.black9 {
    color: #060606;
}

.rejectColor {
    color: #ff1c1c !important;
}

.darkMuted1 {
    color: #919191;
}

.mutedBlack {
    color: #3d3d3d;
}

.lightBlack {
    color: #2b2a2c;
}

.red2 {
    color: #ff0000;
}

.black10 {
    color: #161616;
}

.blackLightColor {
    color: #363636;
}

.lightMutedColor {
    color: #aeaeae;
}

.mutedPlaceholder {
    color: #4a4a4a;
}

.delMuted {
    color: #8b8686;
}

.redColor {
    color: #df1414;
}

.yellowText {
    color: #ffaa00;
}

.yellowText a {
    color: #ffaa00;
}

.pinkBg {
    background-color: #f5044e;
}

.skyblueBg {
    background-color: #0b75d2;
}

.itemMute {
    color: #a4a4a4;
}

.categoriesBlack {
    color: #303030;
}

.mutedWeight {
    color: #636060;
}

.mutedPrice {
    color: #8d8d8d;
}

.black11 {
    color: #252525;
}

.labelBlack {
    color: #333333;
}

.mutedPlaceholder {
    color: #b9b9b9;
}

.unpaidRedColor {
    color: #db1f35;
}

.labelMuted {
    color: #666666;
}

.blackColor1 {
    color: #3b3b3b;
}

.lightMuted1 {
    color: #a8a5a5;
}

.redBackground {
    background-color: #df1414;
}

.linearBackgroundRed {
    background: linear-gradient(270deg, #f2305f 1.2%, #a70a30 100%);
}

.customboxshadow {
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

.topHeaderShadow {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    justify-content: center;
}

.dashboardCardShadow {
    box-shadow: 0px 3.725px 18.625px rgba(0, 0, 0, 0.05);
}

/* .listingShadow {
box-shadow: -1px 3px 40px rgba(0, 0, 0, .1);
}

.cardBoxShadow {
box-shadow: -1px 3px 40px rgba(0, 0, 0, .1);
} */

.borderLeftOrange {
    border-left: 3.72px solid #f15a25 !important;
}

.borderLeftblue {
    border-left: 3.72px solid #0b75d2 !important;
}

.borderLeftRed {
    border-left: 3.72px solid #df1414 !important;
}

.borderLeftPink {
    border-left: 3.72px solid #dd0e53 !important;
}

.cardBorder {
    border: 1px solid #eaeaea;
}

.cursorPointer {
    cursor: pointer;
}

input[type="radio"] {
    accent-color: var(--Primary_Color);
}

input[type="checkbox"] {
    accent-color: var(--Primary_Color);
}

.closeModal {
    background-image: none;
}

.width410 {
    width: 410px !important;
}

.width900 {
    max-width: 900px !important;
}

.opacity05 {
    opacity: 0.5;
}

.btnWidth {
    width: 82px;
    height: 31px;
}

.btn-increment {
    display: none;
}

.fixed-width {
    width: 31px !important;
}

.lightPurpleBorderColor {
    border-color: #c8b4fb !important;
}

.paymentCard {
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.08);
}

.circleBox {
    border-radius: 50%;
}

/* 15/06/2022 */
.muted22 {
    color: #707070;
}

.font15 {
    font-size: 15px;
    line-height: 21px;
}

/* 16/06/2022 */
.activeOrderGrid {
    border: 2px solid #0b75d2 !important;
    box-shadow: 0px 3.725px 18.625px rgba(0, 0, 0, 0.1) !important;
}

.width35 {
    width: 35px;
}

.labelText {
    color: #434343;
}

.font24 {
    font-size: 24px;
    line-height: 36px;
}

.wh121 {
    width: 121px;
    height: 121px;
    border-radius: 50%;
}

.redborder {
    border: 4px solid #db1f35;
}

.lightPurpleBackground {
    background-color: #ede5ff;
}

.instaPrimaryColor {
    color: #1c2d64;
}

.instaPrimaryBgColor {
    background-color: #1c2d64;
}

.instaSecondaryColor {
    color: #ede5ff;
}

.instaSecondaryBgColor {
    background-color: #ede5ff;
}

.darkBlack {
    color: #1a181e;
}

.mutedWait {
    color: #8f8f8f;
}

.mutedDark {
    color: #505050;
}

/* 17/06/2022 */
.mutedPlaceholderColor {
    color: #b6b6b6;
}

/* .width107 {
width: 107px;
} */

.mutedText {
    color: #777777;
}

.greenColor1 {
    color: #298e06 !important;
}

.customBorderColor {
    border: 1px solid #1c2d64;
}

/* Master CSS Ends Here */

/* Main CSS Starts Here */

.displayForMobile {
    display: none !important;
}

.envelopIcon {
    background-color: #f14336;
    border-radius: 50px;
    color: #ffffff;
}

.accordion-button:not(.collapsed) {
    color: #313030 !important;
}

.customNav.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--Primary_Color) !important;
    background-color: #ffffff !important;
    font-weight: 500;
    border-radius: 10px;
    margin: 0px 10px;
}

.customNav.nav-pills .nav-link,
.nav-pills .show>.nav-link {
    /* font-weight: 500; */
    color: #ffffff;
}

.customIndicators.carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
    border-radius: 50% !important;
    background-color: #e0d0ff;
}

.customIndicators.carousel-indicators {
    left: 0;
    /* margin-right: 70%; */
    /* margin-bottom: 13rem; */
    bottom: 0;
}

.customIndicators.carousel-indicators .active {
    background-color: var(--Primary_BGColor) !important;
}

.prevControl .carousel-control-prev-icon,
.nextControl .carousel-control-next-icon {
    background-image: none;
}

.prevControl.carousel-control-prev {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

.nextControl.carousel-control-next {
    right: 0;
    opacity: 1;
}

.selectedOrder {
    border: 1px solid #f15a25 !important;
    border-radius: 10px;
    box-shadow: 0px 4px 20px rgb(241 90 37 / 72%);
}

.actionButton {
    border: 1.8625px solid #f15a25;
    border-radius: 50px;
    color: #f15a25;
    font-size: 8.38125px;
    line-height: 13px;
    padding-top: 18px;
}

.takeactionButton {
    border: 1.8625px solid #df1414;
    border-radius: 50px;
    color: #df1414;
    font-size: 8.38125px;
    line-height: 13px;
    padding-top: 10px;
}

.topHeaderShadow span.font12.font500.muted4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 250px;
    display: inline-block;
}

.paddingTop2 {
    padding-top: 2px !important;
}

.sidebarWidth300 {
    width: 300px;
}

.paddingLeft300 {
    padding-left: 305px;
}

.paddingRight300 {
    padding-right: 305px;
}

.activeOrder {
    background: var(--Primary_BGColor);
    border-radius: 10px;
    color: #ffffff;
}

.updateOutlineBtn button {
    font-weight: 600;
    font-size: 12.5px;
    line-height: 19px;
    color: var(--Primary_Color);
    border: 1.225px solid var(--Primary_Color);
    border-radius: 6.125px;
}

.customOrderTab.nav-pills .nav-link.active {
    background-color: var(--Primary_BGColor) !important;
    color: #ffffff !important;
}

.customScrollspyNav.nav-pills .nav-link {
    font-weight: 600;
    font-size: 16px;
    border-radius: 0px !important;
}

.customScrollspyNav.nav-pills .nav-link.active {
    background-color: #ffffff !important;
    color: var(--Primary_Color) !important;
    border-bottom: 1.5px solid var(--Primary_Color) !important;
    padding-bottom: 4px !important;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.customPaymentsTab.nav-pills .nav-link {
    background-color: #f5f1ff;
    color: var(--Primary_Color);
    padding: 12px 10px;
}

.customPaymentsTab.nav-pills .nav-link.active {
    background-color: var(--Primary_BGColor) !important;
    color: #ffffff !important;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
    background-color: var(--Primary_BGColor);
    z-index: 9;
}

.mySidebar {
    width: 275px !important;
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
    color: #ffffff;
    text-decoration: non;
}

.openbtn {
    font-size: 20px;
    cursor: pointer;
    border: none;
}

.openbtn:hover {
    background-color: #444;
}

#main {
    transition: margin-left 0.5s;
}

.indexSidebar {
    width: 250px;
}

.indexMain {
    width: calc(100% - 275px);
    margin-left: auto;
}

.mobileView {
    display: none;
}

.displayDesktop {
    display: inline;
}

.displayDesktop.desktopMenu.zIndex2 {
    z-index: 123;
}

.scrollGrid {
    overflow: scroll;
    white-space: nowrap;
    display: flex;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    padding: 8px !important;
}

.scrollGrid .alloptions {
    display: inline-block;
}

.scrollGrid::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.categoryScrollGrid {
    overflow: scroll;
    white-space: nowrap;
    display: flex;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    padding: 2px !important;
}

.categoryScrollGrid .alloptions {
    display: inline-block;
}

.categoryScrollGrid::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.customOrderTab.scrollGrid .nav-link {
    padding: 10px !important;
}

.form-check-input:checked {
    background-color: #298e06;
    border-color: #298e06;
}

.btn {
    font-size: 14px;
    border-radius: 10px;
    padding: 10px;
}

/* Main CSS Ends Here */


/* My Custom CSS Starts Here */
.topHeaderShadow button.btn.primaryBgColor.text-white {
    margin-left: 4px !important;
    padding: 7px !important;
}

.availableTable {
    background-color: #f5f5f5;
    border: 1px dashed #8C8C8C;
}

.allocatedTable {
    background-color: #ffe1e5;
    border: 1px dashed #dc3545;
}

.selectedTable {
    background-color: #77f98c;
    border: 1px dashed #016a1b;
}

.hideDesktop {
    display: none;
}



.height50 {
    height: 45px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-close {
    opacity: 1 !important;
    background: none !important;
    padding: 0 !important;

}

.form-label {
    font-weight: 600;
    color: #41464b;
}

.d-h100 {
    height: 100vh;
}

.listingButton {
    width: 80px;
    height: 40px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    float: right;
}

.increment-decrement-btn-container {
    display: flex;
    width: 80px;
    height: 40px;
    background-color: var(--Primary_BGColor);
    border-radius: 10px;
    position: relative;
    float: right;
    cursor: pointer;
}

.increment-decrement-btn-container div:first-child {
    width: 35px;
    border-radius: 18px 0 0 18px;
}

.increment-decrement-btn-container div {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600 !important;
}

.cartIncrementButton {
    color: rgb(255, 255, 255) !important;
}

.increment-decrement-btn-container div:nth-child(2) {
    flex: 1 1;
    word-wrap: normal;
    border-radius: 0;
}

.increment-decrement-btn-container div:nth-child(3) {
    width: 35px;
    border-radius: 0 18px 18px 0;
}

@media (max-width: 576px) {
    .d-h100 {
        height: auto;
    }

    .splashImage {
        width: 165px;
    }

    .splashText {
        width: 165px !important;
    }

    .screenWidth .row.secondaryBgColor .dropdown-menu li {
        margin: 0px !important;
    }

    .screenWidth .row.secondaryBgColor .dropdown-menu li a {
        text-decoration: none;
        color: #333;
        padding: 8px 8px !important;
        font-size: 14px !important;
        line-height: 14px !important;
    }
}

.selectOutletHeader {
    padding: 1rem 1.25rem;
}

.btnHoverColor:hover {
    background-color: var(--Secondary_BtnBgColor) !important;
}

.lightsecondaryBtnBgColor {
    background-color: #ffe5dc;
}

.mobileNavigation {
    background-color: var(--Primary_BGColor) !important;
}

.modal-content {
    border-radius: 10px;
}

.boxShadowNone {
    box-shadow: none !important;
}

.mutedInput {
    color: #999999;
}

.checkBoxMute {
    color: #8e8787;
}

.trashIcon {
    color: #f22f46;
}

.cancelBackground {
    background-color: #f22f46;
}

.modalCustomHeight {
    height: 400px;
    overflow-y: scroll;
}

.servicesCheckBox {
    height: 420px;
}

::-webkit-scrollbar-thumb {
    background: var(--Primary_Color);
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.form-check-input:checked {
    background-color: var(--Primary_BGColor) !important;
    border-color: var(--Primary_Color) !important;
}

/* .modal-body {
max-height: 400px !important;
overflow-y: auto;
} */

.productImage {
    max-height: 175px !important;
    min-height: 175px !important;
    object-fit: cover;
}

.activeBorder {
    border: 2px solid var(--Primary_Color) !important;
}

.scrollOffer {
    overflow: scroll;
    white-space: nowrap;
    display: flex;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    z-index: 123;
}

.scrollOffer::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.borderLeft2 {
    border-left: 2px solid #ffffff;
}

.mobileNavinagtion {
    display: none;
}

@media (max-width: 1400px) {
    .scrollGrid {
        gap: 15px !important;
        padding: 0px 10px !important;
    }

    .scrollGrid .alloptions {
        width: unset !important;
        padding: 8px 0px;
    }

    .manageDetail .buttonGroupPrint span {
        padding: 3px 10px !important;
        font-size: 12px !important;
    }

    .customOrderTab.nav-pills .nav-link i {
        font-size: 18px;
    }

    .manageDetail table.table tr td {

        padding: 8px 5px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 600px) {
    .mobileNavinagtion {
        display: block;
    }

    .mobileNavinagtion .btn-dropdown {
        color: #3f51b5 !important;
        background-color: white;
        border: 1px solid #ddd;
        text-align: left;
        display: flex;
        align-items: center;
        margin-top: 10px;
        padding: 10px;
        text-transform: uppercase;
        position: relative;
    }

    .mobileNavinagtion .btn-dropdown i {
        font-size: 20px;
    }

    .mobileNavinagtion .dropdown-menu {
        max-width: 100% !important;
        width: 100%;
    }

    .mobileNavinagtion .dropdown-menu i {
        font-size: 18px;
        width: 20px;
        text-align: center;
    }

    .mobileNavinagtion .dropdown-toggle::after {
        display: none;
    }

    .mobileNavinagtion .btn-dropdown .fa-angle-down {
        position: absolute;
        right: 10px;
    }
}

.customResourcesBoxShadow {
    box-shadow: 0px 4px 20px rgb(0 0 0 / 10%);
}

.bgWhite {
    background: #ffffff;
}

.borderRadius5 {
    border-radius: 10px;
}

.listingDropdown li:hover {
    background: linear-gradient(270deg,
            var(--Primary_Color) 0%,
            rgba(243, 243, 243, 0) 97.1%);
    color: var(--PrimaryColor) !important;
    border-right: 3px solid var(--Primary_Color) !important;
}

.discountTag {
    background-color: #ff8223;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    border-radius: 4px 0px 0px 4px;
}

.productListingImage {
    max-height: 105px;
    min-height: 105px;
    object-fit: cover;
    border: 1px solid #d7d7d7;
}

.productGridImage {
    max-height: 250px;
    min-height: 250px;
    object-fit: cover;
    border: 1px solid #d7d7d7;
}

.quantities .customBorder1 {
    border-radius: 50px !important;
}

.discount {
    width: 100%;
}

.installment {
    width: 100%;
}

.dineInUserImg {
    width: 22px;
    height: 22px;
    border-radius: 100px;
}

.order-type {
    background-color: #f9f9f9;
    border-radius: 10px;
    font-size: 14px;
}

.order-type button:focus {
    box-shadow: none;
}

.left-btn {
    background: linear-gradient(to left, #3f51b5 50%, #f9f9f9 50%) right;
    background-size: 250% !important;
    transition: 0.5s ease-out;
}

.right-btn {
    background: linear-gradient(to left, #f9f9f9 50%, #3f51b5 50%) right;
    background-size: 250% !important;
    transition: 0.5s ease-out;
}

.slider-btn {
    background-position: left;
}

.btn:focus {
    box-shadow: none;
}

button.focus,
button:focus {
    outline: 0;
    box-shadow: none !important;
}

.modifyServiceBooking {
    border: 1px solid var(--Primary_Color) !important;
    color: var(--Primary_Color) !important;
    font-weight: 600;
    padding: 0px 12px;
    margin-left: 15px;
    border-radius: 50px;
    font-size: 14px;
}

.tableLike p .btn {
    border: 1px solid var(--Primary_Color) !important;
    color: var(--Primary_Color) !important;
    font-weight: 600;
    padding: 5px 15px;
    margin-left: 15px;
    border-radius: 50px;
    font-size: 14px;
}

.cardHeader {
    background-color: var(--Secondary_BGColor);
    padding: 1rem;
    color: var(--Primary_Color) !important;
    font-weight: 600;
}

.linkedOrders ul li h5 {
    color: var(--Primary_Color) !important;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.linkedOrders ul li p .btn {
    background-color: var(--Primary_Color) !important;
    color: white;
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    float: right;
}

.linkedOrders ul li p {
    margin-bottom: 5px;
}

.linkedOrders ul li small {
    display: block;
    color: #858585;
    font-size: 12px;
}

.linkedOrders ul li span {
    color: #adadad;
    font-size: 12px;
}

.orderBox .totalAmount {
    position: absolute;
    right: 15px;
    bottom: 10px;
    font-weight: 600;
}

.linkedOrders ul {
    padding: 0px;
    margin: 0px;
}

.linkedOrders .card-body {
    padding: 10px 10px;
}

.linkedOrders ul li {
    list-style: none;
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
}

.card-header {
    padding: 10px 10px;
}

.customModalHeight {
    height: 600px;
}

.modelHeight500 {
    height: 500px;
    overflow-y: scroll;
}

.newChat .btn {
    background-color: #3d55ba;
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
}

.newChat .btnNewChat .iconChange {
    width: 20px;
    height: 20px;
    background-image: url();
    display: inline-block;
    background-image: url(../img/plus.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-left: 10px;
}

.chatHistory ul li small {
    color: #8e8787;
    font-size: 12px;
}

.chatHistory ul li p {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 0px;
    margin-top: 10px;
}

.newChat .btnNewChat.active .iconChange {
    background-image: url(http://contrivance.co.in/instaciti-ecom/assets/img/minus.svg) !important;
}

.newChat .btnNewChat .iconChange {
    width: 20px;
    height: 20px;
    background-image: url();
    display: inline-block;
    background-image: url(http://contrivance.co.in/instaciti-ecom/assets/img/plus.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-left: 10px;
}

.newChat .btn.active {
    background-color: #fdb205 !important;
}

.newChat .collapsebleForm {
    overflow: hidden;
    transition: 0.5s;
    padding: 20px 0px;
    display: none;
}

.chatHistory ul li .icon {
    margin-right: 10px;
}

.chatHistory ul li .icon img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.chatHistory ul li .text {
    line-height: 1;
}

.chatHistory ul li {
    list-style: none;
    display: flex;
    margin-bottom: 30px;
}

.chatHistory ul {
    margin: 0px;
    padding: 0px;
    height: 280px;
}

.newChat form .btn {
    background-color: #ed0149;
    width: 100%;
    border-radius: 10px;
    margin-top: 15px;
}

.newChat .file input {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    opacity: 0;
}

.newChat .file i {
    background-color: #f3f3f3;
    color: #ed0149;
    line-height: 1;
    padding: 8px 40px;
    font-size: 20px;
    border-radius: 10px;
}

.newChat .file {
    position: relative;
}

.infoAccrodions .accordion-body {
    padding: 0px;
}

.infoAccrodions .enterIntro {
    padding: 25px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.infoAccrodions .accordion-item {
    background-color: transparent;
    border: none;
    margin-bottom: 15px;
}

.infoAccrodions .accordion-button:not(.collapsed) {
    background-color: var(--Primary_BGColor);
    color: #fff !important;
    max-width: 315px;
}

.infoAccrodions .accordion-button {
    padding: 8px 15px;
    border-radius: 10px;
    max-width: 315px;
    background-color: var(--Primary_BGColor);
    color: white;
}

.infoAccrodions .accordion-button img {
    margin-right: 10px;
}

.enquiryTableWrapper h4 {
    font-size: 18px;
    margin: 0px;
    padding: 12px;
    color: var(--Primary_Color);
    background-color: var(--Secondary_BGColor);
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 600;
}

.editIcon {
    color: #0b75d2 !important;
    font-size: 16px;
}

.deleteIcon {
    color: #ff0000 !important;
    font-size: 16px;
}

/* .enterIntro select {
    margin-bottom: 20px;
} */

@media only screen and (max-width: 1920px) {
    .enterIntro .media {
        height: 400px;
    }
}

.enterIntro .media {
    border-radius: 10px;
    height: 250px;
    object-fit: cover;
    margin-bottom: 20px;
    width: 100%;
    border: 1px solid #ced4da;
}

.mediaContainer .mediaImage .uploadBtn {
    background-color: #e3d8ff;
    color: var(--Primary_Color) !important;
    margin-right: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.mediaContainer .mediaImage .deleteBtn {
    background-color: #ffd3e9;
    color: #e70777 !important;
    margin-right: 10px;
    padding: 10px 15px;
    border-radius: 10px;
}

.mediaImage .note {
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 0px;
}

.enterIntro .mediaVideo {
    display: none;
}

.enterIntro .mediaVideo video {
    border-radius: 10px;
    margin-bottom: 20px;
}

.mediaContainer .mediaImage .saveBtn {
    background-color: #3f51b5;
    color: #fff !important;
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 600;
}

.mediaContainer .mediaImage .uploadBtn input {
    position: absolute;
    left: 0;
    opacity: 0;
}

.enterIntro input {
    font-size: 14px;
}

.dropImg {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #ececec;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

.dropImg i {
    color: #b0b0b0;
    font-size: 20px;
}

.dropImg input {
    position: absolute;
    left: 0;
    top: 25px;
    opacity: 0;
}

.imagePreview {
    position: relative;
    max-width: 80px;
}

.imagePreview img {
    border: 1px solid #d1d1d1;
}

.imagePreview img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: 10px;
}

.imageDelete {
    color: red;
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 20px;
}

.form-label {
    font-weight: 600 !important;
    color: #4d4d4d !important;
}

/* My Custom CSS Ends Here */

.cardBoxShadow .tab-content {
    width: 80%;
}

.cardBoxShadow .nav-pills {
    width: 20%;
}

.cardBoxShadow .nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--Primary_BGColor);
}

.cardBoxShadow .nav-pills .nav-link {
    background: 0 0;
    border: 0;
    border-radius: 10px;
    color: var(--Primary_Color);
    text-align: left;
}

.card-body .fa-pencil {
    color: #dc3545;
}

.card-body .fa-bars {
    color: #fdb205;
}

.screenWidth .col-lg-6.col-md-6.mobileHeight10 {
    text-align: end;
}

.mustardYellowColor.textDecorationNone button.btn.float-right {
    font-size: 12px;
}

.cdk-overlay-pane {
    border: none;
}

.desktoptoggleBtn {
    /* height: 35px;
width: 35px; */
    display: inline-block !important;
    text-align: center;
    line-height: 32px;
    /* border-radius: 100px;
background: var(--Primary_BGColor); */
}

.desktoptoggleBtn i {
    font-size: 20px !important;
    color: black !important;
    margin-right: 10px;
}

.row.bodyContent .carousel-control-next,
.carousel-control-prev {
    opacity: 1;
}

div#devcity-kt8n84d4-header {
    border-radius: 10px !important;
    overflow: hidden;
}

.category-content {
    display: flex;
    align-items: center;
}

td.text-end .col-auto.align-self-center.ps-0 .dropdown .btn.btn-sm:hover {
    background-color: transparent !important;
    color: #000 !important;
}

.famousOne .col-md-3.col-lg-3.col-xl-3.col-xxl-3 {
    padding: 0px 8px;
}

@media (max-width: 767px) {
    .cardBoxShadow .nav-pills .nav-link {
        text-align: center;
        background: #fbfbfb;
        margin-bottom: 2px;
    }

    body .screenWidth .accordion-body .shoplayoutPreview {
        height: 100px !important;
    }

    .scrollBarModal .col-12 a .btn.primaryBgColor.customButton {
        width: 100%;
        margin-top: 10px;
    }

    .card.card-body .AlTouchUps button.currentBalance {
        padding: 6px 8px;
        font-size: 12px;
    }

    .AlTouchSection .tableHeader td {
        min-width: 200px;
    }

    .AlTouchSection .tableRow td {
        min-width: 200px;
    }

    .sidebar .input-group {
        border: 1px solid #ced4da;
        border-radius: 8px;
    }

    .table-responsive .actionDropBtn {
        position: relative !important;
        right: 0px !important;
    }

    .table-responsive td.text-end .col-auto.align-self-center.ps-0 {
        position: relative !important;
        right: 0px !important;
        margin-top: 0px;
    }

    .customCellWidth table.table th,
    .table td:last-child {
        min-width: 120px;
    }

    .responsiveTable::-webkit-scrollbar {
        height: 5px !important;
    }

    .modal-content button.btn.btn-danger.customButton {
        margin-right: 0px !important;
        margin-bottom: 10px;
        width: 100%;
    }

    .modal-header.modal-header-block p {
        margin-bottom: 10px !important;
    }

    .table-responsive table.table button#dropdownMenuButton1 {
        margin-top: 0px !important;
    }

    .storePickUp p span img {
        width: 16px;
        margin-right: 2px !important;
    }

    .font10 {
        font-size: 9px;
    }

    .instacitiStar.mt-4 td:nth-child(3) {
        min-width: 200px !important;
    }

    .paymentStatus.mb-3 p.font15 i {
        margin-left: 4px !important;
    }

    .instacitiStar.mt-4 td:nth-child(1) {
        min-width: 130px !important;
    }

    .PackageCustomerDetails .col-md-4.col-12.text-end {
        text-align: start !important;
    }

    .instacitiStar.mt-4 p.font20.font600 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .instacitiStar.mt-4 .row.mt-4 {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    .row.bodyContent .borderLeftOrange.card .col-lg-5.col-5 {
        padding-right: 5px;
    }

    .EmailReceiverList {
        padding: 0px 0px !important;
    }

    .bookingOrderStatus {
        padding: 5px 5px !important;
        margin-left: 0px !important;
    }

    .row.borderRadius5.bg-white.m-0.p-3.mt-4 label.col {
        padding: 0px 5px;
    }

    .row.borderRadius5.bg-white.m-0.p-3.mt-4 label.col span.font600.primaryColor {
        margin-left: 4px !important;
    }

    .cardBoxShadow .col-6.customButton button.primaryBgColor.font18.fontt600 {
        font-size: 14px !important;
    }

    .row.bodyContent .card .col-md-3 p.font15.d-inline {
        font-size: 12px !important;
    }

    .modal-content .modal-body.pt-2 .col-md-6.mt-5 {
        margin-top: 20px !important;
    }

    .manageServiceModal {
        height: 350px;
        padding-bottom: 15px;
    }

    .updateOutlineBtn button {
        font-size: 12px !important;
        padding: 5px !important;
    }

    .helping.secondaryBgColor {
        padding: 8px;
        border-radius: 10px;
    }

    body .customOrderTab.nav-pills .nav-link {
        width: 110px !important;
    }

    .zIndex2.position-sticky.runningOrder {
        top: 0px !important;
    }

    .card-body .blackColor a i {
        font-size: 16px !important;
    }

    .cardBoxShadow.orderBox .row.borderRadius5.bg-white {
        padding: 15px 0px !important;
    }

    .cardBoxShadow.orderBox .row.borderRadius5.bg-white label.col {
        padding-right: 0px;
    }

    .MobiletoggleBtn {
        /* background: var(--Primary_BGColor);
    height: 38px;
    width: 38px; */
        display: inline-block !important;
        text-align: center;
        line-height: 36px;
        /* border-radius: 100px; */
    }

    .MobiletoggleBtn i {
        font-size: 28px;
        color: black !important;
        margin-right: 10px;
    }

    .row.bodyContent .card .input-group.mb-0 {
        margin: 10px 0px !important;
    }

    .card.cardBoxShadow.border-0.borderRadius10 .col-md-3 {
        padding: 0px 12px !important;
    }

    .row.bodyContent .card .col-md-3 {
        padding: 0px 0px !important;
    }

    .input-group {
        flex-wrap: initial;
    }

    .row.bodyContent .card {
        margin-bottom: 10px !important;
    }

    body .customOrderCardButton {
        padding: 5px 5px !important;
        font-size: 12px !important;
    }

    .row.enquiryTableWrapper .col-md-12.card .col-md-7.col-12 {
        padding: 0px;
    }

    .row.enquiryTableWrapper .col-md-12.card .col-md-5.col-12 {
        padding: 0px;
    }

    .row.enquiryTableWrapper .col-md-12.card {
        margin-bottom: 0px !important;
        padding: 20px !important;
        border: 0px;
        border-bottom: 1px dashed #777777;
    }

    .height231 {
        height: 200px;
    }

    .variantCard .gridViewImage {
        height: 150px !important;
    }

    .currentActivation .packageStats {
        margin-bottom: 5px;
        display: inline-block;
        margin-right: 10px;
        font-size: 18px;
    }

    div#collapseOne button.btn.primaryBgColor.customButton {
        margin-bottom: 10px;
    }

    .bodyContent button.btn.btn-success.customButton {
        width: 100%;
    }

    div#collapseOne .accordion-body.pt-0 .row {
        justify-content: start;
    }

    .width410 {
        width: 100% !important;
    }

    .screenWidth .col-lg-6.col-md-6.mobileHeight10 {
        text-align: left !important;
        margin-top: 10px;
    }

    .screenWidth .dropdown-menu.dropdown-menu-end {
        position: absolute !important;
        /* right: 10px !important; */
        /* transform: initial !important; */
        top: 10px !important;
        left: auto !important;
    }


    .table-responsive {
        overflow-x: auto;
        -ms-overflow-style: none;
    }

    .cardBoxShadow .nav-pills,
    .cardBoxShadow .tab-content .form-group {
        margin-bottom: 15px;
    }

    .table {
        width: 100%;
        border-collapse: collapse;
    }

    .table th,
    .table td {
        padding: 15px 10px !important;
        border: 1px solid #ddd;
        text-align: left;
        /* min-width: 160px; */
    }

    .table thead {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .table tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .table tr:hover {
        background-color: #f1f1f1;
    }

    .table> :not(caption)>*>* {
        /* padding: 0.3rem 0.5rem !important; */
        font-size: 13px;
        line-height: 20px;
    }


    .accordion-body .btn.primaryBgColor.focusRemove {
        padding: 8px 10px !important;
        margin-bottom: 7px;
    }


    .enterIntro.cardBoxShadow {
        box-shadow: none;
    }

    .enquiryTableWrapper .accordion-body {
        padding: 0;
    }

    .enterIntro .btn.saveBtn {

        width: 100%;
        margin-bottom: 15px;
    }

    .mediaContainer .mediaImage .deleteBtn {

        margin-top: 0px !important;
    }

    .mediaImage {
        display: flex;
    }

    button.btn.settingBtn {
        margin-top: 0px !important;
    }



    .cancelBackground {
        margin-bottom: 10px;
    }

    .bodyContent .card-body button.btn {
        width: 100%;
        display: inline-block;
        margin-top: 10px !important;
    }

    .editIcon {
        font-size: 14px;
    }

    .deleteIcon {
        font-size: 14px;
    }

    .deleteIcon i {
        padding-left: 5px !important;
    }

    .card.card-body.cardBoxShadow .col-md-5 .d-grid.ps-4 {
        padding: 0px !important;
    }

    .card.card-body.cardBoxShadow .col-md-7 .d-grid.pe-4 {
        padding: 0px !important;
        margin-bottom: 10px;
    }

    .cardBoxShadow .col-6 {
        margin-bottom: 10px;
    }

    .cardBoxShadow .d-flex.align-items-start {
        flex-direction: column;
    }

    .cardBoxShadow .nav-pills {
        margin: 0 0px 20px 0 !important;
    }

    .cardBoxShadow .nav-pills,
    .cardBoxShadow .tab-content {
        width: 100%;
        margin-bottom: 10px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
}


.custom-border-bottom {
    border-bottom: 1px solid #c3c3c3 !important;
    align-items: start !important;
}

.selectedEffectColor {
    background: #edf0ff;
}

.pinkBgColor {
    background-color: #ef1c74 !important;
}

.colorWhite {
    color: #ffffff !important;
}

.effectPreviewImage:hover {
    transform: scale(1.4);
    cursor: pointer;
    transition: all .5s ease-in-out;
    box-shadow: 0px 4px 20px rgb(0 0 0 / 20%);
}

.effectPreviewImage {
    width: 100%;
    border: 1px solid var(--Primary_Color);
    border-radius: 10px;
}

.megasldierPreview {
    width: 100%;
    border: 1px solid var(--Primary_Color);
    border-radius: 10px;
    height: 300px;
    object-fit: cover;
    z-index: 12;
    position: relative;
}

/* Booking Dashboard Calender */
.servicesModule span {
    font-size: 20px;
    color: #000;
    font-weight: 600;
}

.servicesModule .month {
    border: 1px solid #ddd;
    padding: 0px 12px;
    border-radius: 10px;
}

.checkoutScroll {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 300px;
    height: auto;
}

.col-md-12.border-start.p-2.overflow-hidden.position-sticky {
    top: 65px;
    z-index: 123;
}

.servicesModule .calenderIocn i {
    font-size: 22px;
    color: var(--Icon_Color);
}

.servicesModule .label {
    font-size: 16px;
    font-weight: 600;
}

.servicesModule .monthLabel {
    padding-left: 5px;
}

.servicesModule .arrow {
    font-size: 16px;
    color: #000;
    padding: 0px 10px;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: #fff !important;
    background-color: var(--Primary_BGColor);
    border-color: #ddd;
}

.servicesModule .form-select {
    padding: 10px 30px;
    border-radius: 10px;
}

.servicesModule .weekDay .btn-group {
    border: 1px solid #ddd !important;
    border-radius: 10px;
    overflow: hidden;
}

.servicesModule .weekDay .btn {
    font-size: 16px;
    border: none;
    padding: 12px 25px;
    font-weight: 600;
    /* border-radius: 10px; */
    color: var(--Primary_BGColor);
}

.servicesModule .weekDay {
    margin-left: 15px;
}

.servicesModule .editBtnPlus a {
    font-size: 16px;
    background: var(--Primary_BGColor);
    padding: 12px 35px 10px 20px;
    border-radius: 10px;
    color: #fff !important;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
}


.servicesModule .dropdown .btn {
    font-size: 17px;
    border: 1px solid #ddd;
    width: 100%;
    color: #000;
    font-weight: 600;
    padding: 10px 20px 10px 30px;
    background: #fff;
    text-align: left;
    border-radius: 10px;
}

.bookingOrderAction {
    border-bottom: 1px solid var(--Primary_Color);
    padding-bottom: 15px;
    margin: 20px 0px;
}

.helping .btn.float-right {
    padding: 4px 8px !important;
    border-radius: 10px;
}

.servicesModule .weekDay .btn:hover {
    background: var(--Primary_BGColor) !important;
    color: #fff !important;
}

.servicesModule .dropdown-toggle::after {
    display: none;
}

.servicesModule .dropdown {
    margin-left: 20px;
}

.servicesModule .dropdown .btn i {
    float: right;
    margin-top: 5px;
}

.servicesModule .helping {
    margin-left: 20px;
}

.servicesModule .helping i {
    font-size: 24px;
    border-radius: 10px;
    color: var(--Primary_BGColor);
    margin-top: 3px;
}

.servicesModule .helping .wh28 {
    width: 20px;
    height: 20px;
}

.order-type {
    background-color: #ebebeb;
    border-radius: 10px;
}

.helping .left-btn {
    background: linear-gradient(to left, white 50%, #f9f9f9 50%) right;
    background-size: 250% !important;
    transition: 0.5s ease-out;
}

@media(max-width:767px) {
    .justify-content-end {
        justify-content: flex-start !important
    }

    .servicesModule .month {
        padding: 15px 20px;
        justify-content: space-between;
    }

    .paymentStatus p.text-secondary {
        font-size: 12px !important;
        line-height: 20px;
    }

    .monthWeek.d-flex {
        display: block !important;
    }

    .servicesModule .monthLabel {
        padding-left: 0 !important;
    }

    .servicesModule .arrow {
        padding: 0px 15px;
    }

    .servicesModule .weekDay {
        margin: 10px 0px;
    }

    .servicesModule .weekDay .btn {
        font-size: 15px;
        padding: 12px 20px;
    }

    .servicesModule .helping .wh28 {
        width: 24px;
        height: 24px;
    }

    .servicesModule .helping {
        margin-left: 0;
    }

    .settLedBox {
        padding: 2px 7px !important;
    }

    .accordion-body {
        padding: 1rem 12px !important;
    }

    .servicesModule .helping i {
        font-size: 18px;
        margin-right: 8px;
    }

    .servicesModule .editBtnPlus a {
        font-size: 16px;
        padding: 12px 20px;
    }

    .borderRadius5.cardBorder.bg-white.p-1.scrollGrid {
        margin-top: 0px;
    }

    .servicesModule .dropdown {
        margin-left: 10px;
    }

    .servicesModule span {
        font-size: 18px;
    }

    .servicesModule .helping .btn.float-right {
        padding: 5px 8px !important;
        display: flex;
    }

    .breadcrumpArea {
        margin-top: 10px;
    }
}


@media(max-width:320px) {
    .servicesModule .month {
        padding: 15px 15px;
        justify-content: space-between;
    }

    .servicesModule .label {
        font-size: 15px;
    }

    .helping .btn.float-right {
        padding: 5px !important;
    }

    .updateOutlineBtn button {
        font-size: 11px !important;
        padding: 5px !important;
    }

    .updateOutlineBtn i.fa-solid.fa-circle-plus {
        margin-right: 2px !important;
    }

    .servicesModule .weekDay .btn {
        font-size: 14px;
        padding: 12px 15px;
    }

    .servicesModule .editBtnPlus a {
        font-size: 16px;
        padding: 10px 15px;
    }


    .servicesModule .dropdown .btn {
        font-size: 15px;
        padding: 10px;
    }

    .servicesModule .helping {
        top: 302px;
    }
}

.servicesModule .container {
    margin: 10px 0px;
    padding: 0px;
}

.dashboardContainer .customBackgroundColor {
    padding: 0px;
}

.cal-month-view .cal-cell-top:hover {
    background: #fff !important;
    box-shadow: 0 2px 4px 0 #0003 !important;
}

.cal-month-view .cal-cell-top {
    min-height: 130px !important;
}

.cal-month-view .cal-day-cell.cal-today .cal-day-number {
    font-size: 30px !important;
    color: #000 !important;
    font-weight: 600 !important;
}

.cal-month-view .cal-day-number {
    font-size: 20px !important;
    color: #000 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.cal-month-view .cal-header .cal-cell {
    padding: 10px 0 !important;
    background: #e5ecf2e8 !important;
    border: 1px solid #e1e1e1;
    border-bottom: none !important;
    border-right: 0 !important;
}

.cal-month-view .cal-header .cal-cell:last-child {
    border: 1px solid #e1e1e1 !important;
}

@media(max-width:767px) {
    .cal-month-view .cal-header .cal-cell {
        padding: 10px 18px !important;
        overflow: initial !important;
        font-size: 15px !important;
    }

    .cal-month-view {
        overflow-x: scroll;
    }

    .cal-month-view .cal-cell-top {
        min-height: 80px !important;
        min-width: 92px;
    }

    .cal-month-view .cal-day-number {
        font-size: 17px !important;

    }

    .increment-decrement-btn-container {
        width: 80px !important;
        height: 35px !important;
    }

    .listingButton {
        height: 35px !important;
    }

    .modal-body.servicesCheckBox .row .col-auto {
        padding: 0px 0px 0px 10px;
    }

    body .rejectedBg {
        background-color: #ff1c1c;
        font-size: 13px !important;
    }

    .cal-month-view .cal-day-cell.cal-today .cal-day-number {
        font-size: 24px !important;

    }

    .card-body .input-group>.form-control,
    .input-group>.form-select {
        width: 100%;
    }
}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {



    .servicesModule .row .col-md-6.col-12 {
        width: 100%;
    }

    .servicesModule .row {
        flex-direction: column;
    }

    .monthWeek.d-flex {
        justify-content: space-between;
    }

    .servicesModule .row .col-md-6.col-12.d-flex.justify-content-end {
        justify-content: flex-start !important;
        margin-top: 10px;
    }

    .accordion-body button.btn.primaryBgColor {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    .editFormRow .btn.cancelBackground {
        padding: 5px 8px;
    }

    .textDecorationNone a {
        font-size: 13px;
    }

    .textDecorationNone .float-end i {
        margin-top: 9px;
    }

    .topHeaderShadow .wh28 {
        width: 24px;
        height: 24px;
    }

    .topHeaderShadow button.btn-sm.focusRemove {
        padding: 5px 0px;
    }

    .topHeaderShadow .col-auto.align-self-center {
        padding: 0px 8px;
    }

    .topHeaderShadow .wh40 {
        height: 40px;
        width: 40px;
    }

    .card.border-0.cardBoxShadow.borderRadius10 .col-auto .wh40 {
        height: 40px;
        width: 40px;
    }

    .topHeaderShadow .muted4 {
        color: #b7a9a9;
        font-size: 10px;
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .modal-content p.black8 {
        font-size: 13px;
    }

    .instaPrimaryColor {
        font-size: 12px;
    }

    .topHeaderShadow {
        justify-content: end;
    }

    .ng-star-inserted span.float-end {
        font-size: 15px;
    }

    .enterIntro .btn.saveBtn {
        font-size: 10px !important;
        padding: 8px 5px !important;
    }

    .enterIntro.cardBoxShadow .note {
        font-size: 12px !important;
    }

    .accordion-body input#checkBoxMute {
        margin-right: 5px !important;
    }

    .accordion-body label.form-label.muted19 {
        font-size: 11px !important;
        padding-left: 0px !important;
    }

    .row.bodyContent .blackColor.mb-0 {
        font-size: 15px;
    }

    .cardBoxShadow .col-md-12 img {
        width: 100%;


    }
}

/* ENTER PIN CSS START HERE */

.formSection h4 {
    font-size: 24px;
    font-weight: 600;
}

.loginpage a img.img-fluid {
    width: 150px;
}

.loginpage p {
    font-size: 15px;
    font-weight: 600;
    text-align: right;
}

.loginpage p i {
    color: var(--Primary_Color);
}

.logindetails {
    width: 600px;
    margin: 0 auto;
}

button.focusRemove.ps-1.border-0.bg-white {
    background: transparent !important;
}

.formSection {
    padding: 50px 25px;
    border-radius: 10px;
    background: #ffffff;
}

.formSection .form-control {
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    padding: 5px 0px;
    margin-bottom: 20px;
}

.logindetails .Initialize.text-center img {
    width: 150px;
    margin-bottom: 8px;
}

.formSection .btn {
    width: 100%;
}

.logindetails .Initialize h3 {
    font-size: 28px;
    font-weight: 600;
    color: #000;
}

.selectOutlet ul li a img {
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 10px;
}

.selectOutlet ul li {
    display: inline-block;
    list-style: none;
    padding: 12px;
    text-align: center;
}

.selectOutlet ul li p {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}


.options h3 {
    font-size: 30px;
    font-weight: 600;
    color: #000;
}

.options .input-group .form-control {
    width: 500px;
}

.options .search {
    position: absolute;
    right: 10px;
    top: 7px;
}

.coreOptions .productsView i {
    font-size: 56px;
    display: block;
    color: var(--Primary_Color);
}

.coreOptions .productsView h4 {
    font-size: 16px;
    font-weight: 600;
}

.coreOptions .productsView {
    background: var(--Secondary_BGColor);
    text-align: center;
    padding: 15px 0px;
    border-radius: 10px;
    border: 1px solid var(--Primary_Color);
    cursor: pointer;
}

.coreOptions {
    padding: 50px 0px 50px 0px;
}

.coreOptions h2 {
    font-size: 22px;
    font-weight: 600;
    color: #262626;
}

.coreOptions .enter {
    font-size: 15px;
    background: #2ca800;
    color: #ffff;
    border-radius: 100px;
    border: none;
    padding: 8px 20px;
}

.coreOptions .productsView.disable i {
    color: #959595;
}

.row.bodyContent .card-body .row.mt-3 .col-4 .btn {
    width: 100%;
    padding: 5px 2px;
}

.row.bodyContent .card-body .row.mt-3 .col-4 {
    padding: 0px 5px;
}

.coreOptions .productsView.disable {
    background: #bbbbbb;
}

.enterIntro .cardBoxShadow td button.btn-success {
    padding: 5px 10px;
}

.cardBoxShadow .headerClass {
    margin-top: 10px !important;
    padding: 0px 15px !important;
}

.enterIntro .cardBoxShadow td .balanceInput {
    padding: 10px !important;
}

@media(max-width:767px) {
    .options.d-flex {
        display: block !important;
    }

    .responsiveTable {
        overflow-x: scroll;
    }

    .responsiveTable .table>:not(caption)>*>* {
        min-width: 200px;
    }

    .coreOptions .productsView i {
        font-size: 60px;
    }

    .coreOptions .productsView h4 {
        font-size: 16px;
    }

    .coreOptions .col-md-12.mb-4.d-flex {
        justify-content: space-between;
    }

    .coreOptions .enter {
        font-size: 13px;
        padding: 5px 12px;
    }

    .coreOptions h2 {
        font-size: 16px;
    }

    .logindetails {
        width: 100%;
    }

    .logindetails .Initialize.text-center img {
        width: 150px;
    }

    .loginpage p {
        font-size: 14px;
    }

    .loginpage a img.img-fluid {
        width: 100px;
    }

    .logindetails .Initialize h3 {
        font-size: 20px;
    }

    .selectOutlet ul li a img {
        width: 58px;
        height: 70px;
    }

    .monthWeek .dropdown-menu {
        left: 0px !important;
    }


}


.enterIntro .btn.saveBtn {
    font-size: 14px;
    background: var(--Primary_BGColor);
    color: #fff;
    padding: 5px 15px;
}

.enterIntro.cardBoxShadow .note {
    font-size: 14px;
    color: #000;
}

.month.d-flex.align-items-center {
    position: relative;
}

.monthWeek .dropdown-menu {
    top: 50px !important;
    transform: initial !important;
}

.example-form {
    width: 100% !important;
    max-width: 100% !important;
}

.screenWidth .accordion-body img {
    width: 100px;
    height: 50px;
    object-fit: cover;
}

.filterDashboardItems {
    margin-bottom: 10px;
}

.customButtonHeight {
    height: 50px;
    font-weight: 600;
}

.buttonHeight45 {
    height: 45px;
    font-weight: 600;
}

.buttonHeight50 {
    height: 50px;
    font-weight: 600;
}

.form-control {
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 14px !important;
}

.backButton {
    border-radius: 50px;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

.customButton {
    border-radius: 10px;
    padding: 10px 10px !important;
    font-size: clamp(11px, 1.1vw, 14px) !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

.customButton:hover {
    color: #ffffff !important;
    background-color: #140024 !important;
}

.btn:hover {
    color: #ffffff !important;
    background: #3c3c3c !important;
    border: 1px solid transparent !important;
}

.topHeaderShadow .btn i:hover {
    color: #fff !important;
}

.customOutlineButton {
    border-radius: 10px;
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 2px solid var(--Primary_Color);
}

.customOutlineButton:hover {
    color: var(--Prmary_Color) !important;
    background: #e9ecee !important;
}

.customPlainButton {
    border-radius: 10px;
    padding: 10px 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    background: #e9ecee;
}

.customOrderCardButton {
    border-radius: 8px;
    padding: 5px 5px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

.selectedNavigation {
    background-color: #e5e5e5;
    border-radius: 10px;
    padding: 12px 15px;
}

.form-select {
    padding: 10px 10px;
    border-radius: 10px;
}

.formHeight100 {
    height: 100px;
}

.todos ul li {
    list-style: none;
}

.orderUpdateButton {
    padding: 10px !important;
    font-size: 14px !important;
}

.btnUpdateStatus {
    background-color: #9B3B08;
    padding: 12px !important;
    font-size: 14px !important;
}

.btnUpdateStatus i {
    margin-right: 10px;
}

.btnMarkAsPaid {
    background-color: #024E0E;
}

.btnSendPaymentLink {
    background-color: #0B75D2;
}

.btnSendReminder {
    background-color: #FF5012;
}

.btnCheckIn {
    background-color: #1A9A2F;
    padding: 12px !important;
    font-size: 15px !important;
}

.btnAddMoreServices {
    background-color: #000088;
}

.btnSettleInvoice {
    background-color: #F49700;
    padding: 12px !important;
    font-size: 15px !important;
}

.modal-body .downArrowIcon {
    position: absolute;
    right: 15px;
    top: 45px;
    font-size: 18px;
}

.ServiceDetailBox img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 20px;
}

.splashText {
    width: 300px;
}

.merchantLogoWrapper {
    background-color: white;
    padding: 10px !important;
    border-radius: 10px;
    text-align: center;
}

.merchantLogo {
    width: 135px;
}

.editIcon i {
    padding-right: 15px;
}

.deleteIcon i {
    padding: 0px !important;
}

.scrollBarModal {
    overflow-y: scroll;
    height: 400px;
}

.PackageCustomerDetails {
    background: #ffffff;
    padding: 0px 20px;
    border-radius: 10px;
    box-shadow: -1px 3px 40px rgba(0, 0, 0, .1);
}

.PackageCustomerDetails .paymentLinkBtn a {
    background: var(--Primary_BGColor);
    display: block;
    color: #ffffff !important;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    border-radius: 10px;
    margin-top: 10px;
}

.currentActivation .packageStats {
    background: var(--Secondary_BGColor);
    font-size: 18px;
    color: var(--Primary_Color);
    padding: 5px 10px;
    border-radius: 10px;
    margin-right: 5px;
}

.customSideNav.nav a.nav-link {
    padding: 0px;
}

.customSideNav .nav-link span {
    display: inline-block;
    width: 100%;
    padding: 12px 15px !important;
}

.mat-option {
    font-family: var(--Font_One) !important;
    font-size: 14px !important;
}

.productThumbnail {
    border-radius: 10px;
    margin-right: 8px !important;
}

.modalScrollable {
    height: 400px;
    overflow-y: scroll;
}

.row.bodyContent .input-group {
    position: initial;
}

.runningOrder .input-group {
    border: none !important;
}

.runningOrder .input-group span.input-group-text {
    border: 1px solid #ced4da !important;
}

.runningOrder .input-group input.form-control.customFocusBorder {
    border: 1px solid #ced4da;
}

.runningOrder .input-group span.input-group-text .fa-magnifying-glass {
    padding-right: 10px;
}

.customFocusBorder {
    position: initial !important;
}

.card.cardBoxShadow.border-0 .col-md-12.mt-3 ul.list-group li.list-group-item {
    display: inline-block;
    width: 32.5%;
    border: 1px solid #ced4da;
    border-radius: 10px;
    margin-right: 8px;
    margin-bottom: 10px;
}

.card.cardBoxShadow.border-0 .col-md-12.mt-3 ul.list-group {
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

/* Responsive CSS Starts Here */

div#main div#accordionExample .accordion-header button.accordion-button {
    margin-bottom: 0px !important;
}

.customNav.nav-pills .nav-link i.me-3,
.nav-pills .show>.nav-link i.me-3 {
    margin-right: 10px !important;
    font-size: 15px;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (min-resolution: 144dpi) {
    .screenWidth .accordion-body .shoplayoutPreview {
        height: 200px !important;
    }

    .height50 {
        height: 40px;
    }
}

/* responsive for 1366px and below */
@media only screen and (max-width: 1440px) {
    .increment-decrement-btn-container {
        width: 70px;
        height: 35px;
    }

    .height50 {
        height: 40px;
    }

    div#main div#accordionExample .accordion-header button.accordion-button {
        padding: 10px 10px;
        font-size: 14px;
    }

    .topButtonGreen button,
    .topButtonPurple button,
    .topButtonOrange button {
        height: 30px !important;
        font-size: 13px;
    }

    select.form-select.gridLayout {
        padding: 5px !important;
        font-size: 12px !important;
    }

    .card.leftcardOrange p,
    .card.centercardPurple p,
    .card.rightcardGreen p {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .kdsCanbanView .leftcardOrange,
    .kdsCanbanView .centercardPurple,
    .kdsCanbanView .rightcardGreen {
        margin: 15px 0 !important;
    }

    .scrollOffer {
        padding: 10px 0px !important;
    }

    div#main div#accordionExample .accordion-header button.accordion-button .paddingTopBottomQuarter .row.scrollGrid {
        padding: 0px 10px !important;
    }

    .kdsCanbanView .card-header {
        padding: 5px 10px !important;
        font-size: 12px !important;
        line-height: 20px;
    }

    div#main div#accordionExample .accordion-body select.form-select.gridLayout {
        background-size: 14px !important;
        background-position-y: 12px !important;
    }

    .card.card-body.cardBoxShadow.borderRadius5.p-3 p.mb-0.font600 {
        font-size: 12px;
        font-weight: 500 !important;
    }

    .kdsCanbanView .updateBtn {
        font-size: 12px !important;
    }

    .refresnKotBtn button.btn-warning {
        font-size: 12px !important;
    }

    .scrollOffer .kdsTitle {
        font-size: 18px;
    }

    .font16 {
        font-size: 14px;
    }

    .font14 {
        font-size: 12px !important;
    }

    .mySidebar {
        width: 250px !important;
    }

    .form-select {
        padding: 10px 10px;
        border-radius: 10px;
    }

    .refreshButton {
        padding: 8px 10px !important;
        margin-right: 6px !important;
    }

    .font20 {
        font-size: 16px;
    }

    a.btn.yellowBg.customButton {
        padding: 4px 6px !important;
    }

    .input-group.changeOutlet select#inputGroupSelect01 {
        height: 35px !important;
        padding: 0px;
    }

    .refreshButton i {
        font-size: 16px !important;
    }

    .input-group.changeOutlet label.input-group-text {
        height: 35px !important;
    }

    .scrollGrid button.btn.primaryColor.focusRemove {
        padding: 2px 8px;
        font-size: 12px !important;
    }

    .customButton {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    .focusRemove.customFocusBorder {
        padding: 10px !important;
    }

    .topHeaderShadow .wh28 {
        width: 24px;
        height: 24px;
    }

    .add-clickbtn .listingButton {
        height: 32px;
    }

    .row.bodyContent .variantCard .gridViewImage {
        height: 120px;
    }

    .wh13 {
        width: 12px;
        height: 12px;
        margin-left: 0px;
        margin-top: 0px;
    }

    div#main .variantCard h3 {
        font-size: 13px !important;
    }

    .cardBoxShadow .card-footer .btn {
        font-size: 12px;
        padding: 10px 10px;
    }

    .variantCard {
        padding: 8px !important;
    }

    .updateStatus {
        padding: 3px 20px !important;
        font-size: 14px;
    }

    .row.bodyContent .card-body .row.mt-3 .col-4 .btn p {
        font-size: 9px !important;
        margin-bottom: 5px !important;
    }

    .customNav.nav-pills .nav-link i.me-3,
    .nav-pills .show>.nav-link i.me-3 {
        margin-right: 8px !important;
    }

    .customNav.nav-pills .nav-link,
    .nav-pills .show>.nav-link {
        font-weight: 500;
        color: #ffffff;
        font-size: 13px;
        padding: 6px 6px;
    }

    /* .font16 {
    font-size: 14px;
}

.font14 {
    font-size: 12px;
} */

    .wh40 {
        height: 30px;
        width: 30px;
    }

    .topHeaderShadow .form-select {
        height: 30px;
    }

    .topHeaderShadow .font15 {
        font-size: 13px;
        line-height: 21px;
        padding: 0px 4px !important;
    }

    .indexMain {
        width: calc(100% - 250px);
        margin-left: auto;
    }

    .topHeaderShadow {
        font-size: 12px;
    }

    .ps-lg-5 {
        padding-left: 2rem !important;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .displayDesktop {
        display: none !important;
    }

    .font15 {
        font-size: 13px;
        line-height: 21px;
    }

    .hideDesktop {
        display: inline !important;
    }

    .hideMobile {
        display: none !important;
    }

    .displayForMobile {
        display: inline !important;
        font-size: 12px !important;
    }

    .indexMain {
        width: calc(100% - 0px);
        margin-left: auto;
    }

    .screenWidth .dropdown-menu.dropdown-menu-end {
        position: absolute !important;
        right: 0px !important;
        transform: initial !important;
        top: 62px !important;
        left: auto !important;
    }

    .font14Mobile {
        font-size: 14px;
        line-height: 17px;
    }

    .mobileScreenRemoveHeight {
        height: 100% !important;
        background-color: #f8f8fb !important;
        padding-top: 45px;
    }

    .mobileView {
        display: block !important;
    }

    .indexMain {
        margin-left: 0px !important;
    }

    .indexSidebar {
        width: 0px !important;
    }

    .customNav.nav li a {
        color: var(--Primary_Color) !important;
        border-radius: 30px 0px 0px 30px;
    }

    .customNav.nav li .nav-link.sidebaractive {
        color: #ffffff !important;
        background-color: var(--Primary_BGColor) !important;
    }

    .closebtn {
        color: var(--Primary_Color) !important;
    }

    .font14 {
        font-size: 12px;
    }

    .font16 {
        font-size: 14px;
    }

    .sidebar {
        top: 57px !important;
    }

    .wh87 {
        width: 65px !important;
        height: 65px !important;
    }

    .wh140 {
        width: 115px;
        height: 115px;
        padding-top: 0px !important;
    }

    .w140h100 {
        width: 116px !important;
    }

    .paddingRemove {
        padding: 10px !important;
    }

    .mobile-mt-1 {
        margin-top: 10px !important;
    }

    .mobile-mt-2 {
        margin-top: 20px !important;
    }

    .mobile-mt-3 {
        margin-top: 30px !important;
    }

    .mobile-mt-4 {
        margin-top: 30px !important;
    }

    .mobile-mb-1 {
        margin-bottom: 10px !important;
    }

    .mobile-mb-2 {
        margin-bottom: 20px !important;
    }

    .mobile-mb-3 {
        margin-bottom: 30px !important;
    }

    .mobile-mb-4 {
        margin-bottom: 30px !important;
    }

    .kdsTitle {
        font-size: 16px !important;
    }

    .topButtonOrange button {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .topButtonPurple button {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .topButtonGreen button {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .kdsCanbanView .leftcardOrange,
    .kdsCanbanView .centercardPurple,
    .kdsCanbanView .rightcardGreen {
        width: 100% !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .wh87 {
        width: 70px !important;
        height: 70px !important;
    }

    .paymentStatus.mb-3 p {
        font-size: 14px !important;
    }

    .dashboardCardShadow .settLedBox p {
        font-size: 10px !important;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
/* @media (min-width: 1400px) {
    .font16 {
        font-size: 14px;
    }
} */

@media (min-width: 1700px) {
    .customIndicators.carousel-indicators {
        margin-bottom: 16rem;
    }
}


/* Responsive CSS Ends Here */


.message .row.mt-3 {
    overflow-y: scroll;
    height: 300px;
}

.paymentLink .row.mt-3 {
    overflow-y: scroll;
    height: 300px;
}


.firstCard .bothCard,
.secondCard .bothCard {
    color: #000;
    /* border: none; */
    border-radius: 10px;
    padding: 10px;
    height: 150px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.firstCard .bothCard .card-text,
.secondCard .bothCard .card-text {
    justify-content: end;
    margin-bottom: 10px;
    text-align: center;
}

.cardContent .card-title.cd.text-center {
    font-size: 14px;
    font-weight: 600;
}

@media screen and (max-width: 768px) {

    .firstCard .bothCard,
    .secondCard .bothCard {
        height: 130px;
    }

    .firstCard .bothCard .card-text,
    .secondCard .bothCard .card-text {
        padding: 5px 10px;
    }

    .firstCard .col-4.col-lg-3 {
        padding: 5px;
    }
}

.modal-content button.btn.btn-danger.customButton {
    margin-right: 5px;
}

.card-body.p-2 .col-4:first-child {
    padding-left: 10px;
}

.card-body.p-2 .col-4:last-child {
    padding-right: 10px;
}

.card-body.p-2 .col-4 {
    padding: 0px 5px;
}

.storePickUp p .fa-truck-pickup {
    background: #f15a25;
    color: #fff;
    padding: 5px;
    margin-right: 3px;
    border-radius: 10px;
}

.storePickUp {
    padding-bottom: 16px;
    padding-top: 10px;
}

.CodBox {
    background: #cbffcb;
    display: inline-block;
    padding: 5px 10px;
    color: #209d34;
    border-radius: 8px;
}

.manageServiceModal {
    overflow-y: scroll;
    height: 400px;
}

.changeOutletDropdown {
    /* transform: translate(-70px, 28px) !important; */
    border-radius: 10px;
}

.changeOutletDropdown li {
    margin-bottom: 8px;
}

.cVerticlstep {
    position: relative;
    min-height: 1em;
    color: gray;
}

.cVerticlstep+.cVerticlstep {
    margin-top: 1.5em
}

.cVerticlstep>div:first-child {
    position: static;
    height: 0;
}

.cVerticlstep>div:not(:first-child) {
    margin-left: 1.5em;
    padding-left: 1em;
}

.cVerticlstep.cVerticlstep-active {
    color: #212529;
}

.cVerticlstep.cVerticlstep-active .circle {
    background-color: var(--Primary_Color) !important;
}

.circle {
    background: gray;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    border-radius: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 0 3px #fff;
}

.circle:after {
    content: ' ';
    position: absolute;
    display: block;
    top: 1px;
    right: 50%;
    bottom: 1px;
    left: 50%;
    height: 100%;
    width: 1px;
    transform: scale(1, 2);
    transform-origin: 50% -100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.cVerticlstep:last-child .circle:after {
    display: none
}


.cVerticlstep .title {
    font-size: 15px;
    font-weight: 500;
}

.cVerticlstep .caption {
    font-size: 13px;
    color: #8d8d8d;
}

.settLedBox {
    background: #fecfbe;
    display: inline-block;
    padding: 5px 10px;
    color: #f26635;
    border-radius: 10px;
}

.customGryButton {
    border-radius: 100px !important;
    padding: 10px 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000 !important;
    background: #e9e9e9;
}

.customMoreButton {
    color: #fff;
    font-weight: 600;
    font-size: 14px !important;
    padding: 10px;
}

.notificationDropdown i {
    font-size: 16px !important;
    height: 38px;
    width: 38px;
    padding-top: 12px !important;
}

.refreshButton i {
    color: var(--Primary_Color) !important;
    font-size: 18px;
    vertical-align: middle;
}

.refreshButton {
    background: var(--Secondary_BGColor);
    padding: 8px 10px;
    border-radius: 10px;
    margin-right: 10px;
}

.fixImg.dropdown {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 5px;
    display: flex !important;
}

.variantCard {
    border-radius: 10px;
    box-shadow: 0px 0px 3px #d1cccc;
    padding: 10px 10px;
    position: relative;
    height: 100%;
    background: #fff;
}

.variantCard .gridViewImage {
    border-radius: 10px;
    height: 160px;
    /* min-height: 200px; */
    object-fit: cover;
    border: 1px solid #d7d7d7;
    object-position: center;
    width: 100%;
    margin-bottom: 8px;
}

.cProductnature {
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 18px;
}

.variantCard h3 {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600 !important;
}

.quantities {
    overflow: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    /* scrollbar-width: none; */
    /* cursor: pointer; */
    padding: 5px 0px !important;
}

.product-quantites {
    font-size: 12px;
    border: 1px solid var(--Primary_Color);
    border-radius: 23px;
    padding: 3px 10px 3px 10px;
    color: var(--Primary_Color);
    margin-right: 8px;
    cursor: pointer;
}

.active-weight {
    background-color: var(--Primary_BGColor) !important;
    color: #ffffff !important;
}

.variantCard .productBtn {
    margin-top: 5px !important;
}

.variantCard .productBtn a {
    font-size: 15px;
    background: var(--Primary_Color);
    color: #fff !important;
    padding: 8px 14px;
    font-weight: 600;
    display: block;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
}

.productBtn a i {
    float: right;
    margin-top: 4px;
    color: #fff;
}


.modal-content .productImg {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.tabbable .nav-tabs li a {
    white-space: nowrap;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

.activeMenu {
    color: var(--Primary_Color) !important;
    border-bottom: 2px solid #000 !important;
    border-radius: 10px;
}

.variantMenu {
    line-height: 24px;
    color: #b7b4be !important;
    border-bottom: 0.5px solid #ffffff;
}

.listingButton {
    width: 80px;
    height: 40px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    float: right;
}


@media (max-width: 1400px) {
    .servicesModule .calenderIocn i {
        font-size: 18px;
    }

    .servicesModule .label {
        font-size: 14px;
    }

    .servicesModule .weekDay .btn {
        font-size: 14px !important;
        padding: 6px 10px;
        font-weight: 600;
    }

    .servicesModule .editBtnPlus a {
        font-size: 14px;
        padding: 6px 10px;
    }

    .servicesModule .form-select {
        border-radius: 10px;
        height: 37px;
        font-weight: 500;
        font-size: 14px;
        padding: 0px 30px;
    }

    .helping .btn.float-right {
        padding: 1px 8px !important;
    }
}

.updateStatus {
    border: 1px solid var(--Primary_Color);
    border-radius: 100px;
    background: #fff;
    padding: 5px 15px;
}

.activateText {
    font-size: 14px;
    font-weight: 600;
}

.card {
    border-radius: 10px !important;
    position: initial;
}

b,
strong {
    font-weight: 600 !important;
}

.paddingTopBottomQuarter {
    padding: .25rem !important;
}

.paddingTopBottomTwentyFive {
    padding: 5px.75rem !important;
}

.productDetailModal img {
    width: 70px;
    border-radius: 10px;
}

.historyBox {
    background: #fcdbd0;
    display: inline-block;
    padding: 5px 10px;
    color: #f15a25;
    border-radius: 8px;
}

.popularItemsThumb {
    border: 1px solid #dadada;
    height: 55px;
    object-fit: cover;
}

div#carouselExampleIndicators .carousel-inner .carousel-item img {
    width: 100% !important;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.weightMutedText {
    text-decoration: underline;
    color: var(--Primary_Color);
}

.addOrderInstrcution button {
    width: 100%;
    border: 2px solid var(--Primary_Color);
    background: transparent;
    padding: 10px 20px;
    text-align: left;
    font-size: 16px;
    border-radius: 10px;
    font-weight: 600;
    color: var(--Primary_Color);
}

.deleteImg img {
    width: 18px;
}

.actionBtn {
    border: 2px solid var(--Primary_Color);
    text-align: center;
    cursor: pointer;
    padding: 5px;
    font-size: 16px;
    font-weight: 600;
    color: var(--Primary_Color);
    border-radius: 100px;
}

.printerBox {
    background: var(--Primary_Color);
    text-align: center;
    cursor: pointer;
    padding: 6px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border-radius: 100px;
}

.input-group.mb-3 span.input-group-text.bg-white.border-end-0 {
    border-radius: 10px 0px 0px 10px;
}

.overflow-scroll input.form-control.height50.customFocusBorder {
    border-radius: 10px !important;
}

.view-cart-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 56px !important;
    color: #fff;
    border-radius: 10px 10px 0 0 !important;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.overflowHidden {
    overflow: hidden !important;
}

.row.bodyContent .card .col-md-4 {
    padding: 0px 0px 0px 5px;
}

.row.bodyContent .card .col-md-3 {
    padding: 0px 2px;
}

.row.bodyContent .card .col-md-2.col-2 {
    padding: 0px 4px 0px 0px;
}

@media (max-width: 992px) {

    /* .nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
    width: 110px !important;
    padding: 20px 20px !important;
} */
    .nav-fill .nav-item .nav-link,
    .nav-justified .nav-item .nav-link {
        /* width: 110px !important; */
        padding: 10px 5px !important;
        font-size: 14px;
    }
}

@media (max-width: 768px) {

    .nav-fill .nav-item .nav-link,
    .nav-justified .nav-item .nav-link {
        width: 100% !important;
        padding: 10px 5px !important;
        font-size: 14px;
    }

    .card-body.tableLike span i {
        margin-left: 5px !important;
    }

    .row.bodyContent .row.borderRadius5.bg-white label.col {
        padding: 5px 0px;
    }

    .servicesModule .helping {
        margin-left: 0px;
    }
}

.card-header:first-child {
    border-radius: 10px 10px 0px 0px !important;
}

.card-footer:last-child {
    border-radius: 0px 0px 10px 10px !important;
}

.sliderSmartMedia.smartMediaPreview img {
    width: 100% !important;
    height: 300px;
    object-fit: cover;
}


.manageDetail table.table th {
    border: 1px solid #bcbcbc;
    text-align: center;
    border-bottom-color: #bcbcbc !important;
    font-weight: 500;
    padding: 5px 10px;
}

.manageDetail table.table tr td {
    border: 1px solid #bcbcbc;
    text-align: center;
    width: 15%;
}

.manageDetail .btgroup {
    width: 40% !important;
}

.manageDetail .buttonGroupPrint .text-bg-danger {
    background: #f15a25;
    color: #fff;
}

.manageDetail .buttonGroupPrint .text-bg-success {
    background: #00a33d;
    color: #fff;
}

.manageDetail .buttonGroupPrint .text-bg-primary {
    background: #4040cc;
    color: #fff;
}

.manageDetail .buttonGroupPrint span {
    padding: 5px 12px;
    /* height: 35px; */
    display: inline-block;
    border-radius: 100px;
    margin: 0px 5px;
    font-size: 14px;
}

select.form-select.gridLayout {
    background-image: url("https://dkzxkcjlbnjui.cloudfront.net/uploads/media/icons/arrow-down-white.svg") !important;
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: 95% center !important;
    cursor: pointer;
    background-position-y: 21px !important;
}

select.form-select.gridLayout {
    -webkit-appearance: none;
}

select.form-select.gridLayout {
    border: 1px solid #a599f4;
    background: #e0dbff;
    color: #000;
    font-size: 18px;
}

select.form-select.gridLayout.sortBy {
    background: #ffe9e9;
    border: 1px solid #e30606;
}


.paddingTopBottomQuarter input[type="checkbox"] {
    height: 14px;
    accent-color: var(--Primary_Color);
    width: 14px;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .manageDetail .buttonGroupPrint span {
        padding: 5px 10px;
        margin: 0px 4px;
        font-size: 14px;
    }

}

@media only screen and (min-device-width : 768px) and (max-device-width : 991px) {

    .responsiveTable {
        overflow-x: scroll;
    }

    .responsiveTable .table>:not(caption)>*>* {
        min-width: 150px;
    }


}

.manageDetail.StatusView table.table tr td {
    padding: 30px 5px;
}

@media(max-width:767px) {

    .secondaryBgColor .col-auto.align-self-center ul.dropdown-menu {
        right: 0px;
        min-width: 8rem;

    }

    .manageDetail table.table tr td {
        border: 1px solid #bcbcbc;
        text-align: center;
        width: 16%;
    }

    .row.mt-3 .col-lg-5.col-md-4.text-end {
        /* text-align: left !important; */
        margin-top: 10px;
    }

    .modal-content .modal-content button.btn.btn-danger.customButton {
        margin-bottom: 0px;
    }

    .customSideNav .nav-link span {
        display: inline-block;
        width: 100%;
        padding: 8px 15px !important;
    }

    .card.cardBoxShadow.border-0 .col-md-12.mt-3 ul.list-group li.list-group-item {
        width: 100%;
    }

    .customCellWidth table.table th,
    .table td {
        min-width: 160px;
        padding: 12px;
    }

    .font15 {
        font-size: 13px;
        line-height: 21px;
    }

    .row.bodyContent .card .card-header.secondaryBgColor.border-0 {
        display: none;
    }

    .modal-body.pt-2 ul#pills-tab li.nav-item .nav-link.mutedBg2.borderRadius5 {
        width: 100% !important;
    }

    .balanceInput {
        width: 150px !important;
        padding: 10px;
        margin: 0 10px;
    }

    .row.borderRadius5.bg-white.m-0.p-3.mt-4 {
        padding: 10px 0px !important;
    }

    .input-group.changeOutlet {
        flex-wrap: nowrap;
        margin-top: 10px;
    }

    select.form-select.gridLayout {
        margin-bottom: 20px;
    }

    .manageDetail .buttonGroupPrint span {
        margin: 5px 0px !important;
        font-size: 12px !important;
        padding: 4px 10px;
        width: 120px;
    }

    .paddingTopBottomQuarter {
        overflow: hidden;
    }

    .card-body.tableLike .container {
        padding: 0px;
    }

    .deleteImg {
        margin: 0px 5px !important;
    }

    .d-flex.justify-content-end.bothBtn {
        justify-content: start !important;
    }

    .updateStatus {
        padding: 3px 10px !important;
        font-size: 14px;
    }

    .font18 {
        font-size: 16px;
    }

    .instacitiStar.mt-4 div {
        display: block !important;
    }

    .instacitiStar div strong {
        font-size: 18px;
        line-height: 30px !important;
    }
}



/* Canban CSS Starts */
.topButtonOrange button {
    width: 100%;
    height: 36px;
    background: #ffa942;
    border: none;
    color: #fff;
    border-radius: 10px;
}

.topButtonPurple button {
    width: 100%;
    height: 36px;
    background: #7d69ff;
    border: none;
    color: #fff;
    border-radius: 10px;
}

.topButtonGreen button {
    width: 100%;
    height: 36px;
    background: #00a33d;
    border: none;
    color: #fff;
    border-radius: 10px;
}

.kdsCanbanView .leftcardOrange,
.kdsCanbanView .centercardPurple,
.kdsCanbanView .rightcardGreen {
    width: 100%;
    border: none !important;
    margin: 20px 0;
}


.kdsCanbanView .updateBtn {
    background: #f15a25;
    border-radius: 50px;
    border: none;
}

.kdsCanbanView .leftcardOrange .card-header {
    background-color: #f9ac38;
    color: #fff;
}

.kdsCanbanView .centercardPurple .card-header {
    background: #7d69ff;
    color: #fff;
}

.kdsCanbanView .rightcardGreen .card-header {
    background: #1a9a2f;
    color: #fff;
}

/* .kdsDetails {
    position: sticky;
    z-index: 12;
    top: 75px;
} */

.kdsCanbanView .leftcardOrange .card-body {
    background: #fff2e3;
    padding: 10px;
}

.kdsCanbanView .centercardPurple .card-body {
    background: #eeebff;
    padding: 10px;
}

.kdsCanbanView .rightcardGreen .card-body {
    background: #deffea;
    padding: 10px;
}

.kdsCanbanView .leftcardOrange .card-footer {
    border-top: none !important;
    background: #fff2e3;
    padding: 10px;
}

.kdsCanbanView .rightcardGreen .card-footer {
    border-top: none !important;
    background: #deffea;
    padding: 10px;
}

.kdsCanbanView .centercardPurple .card-footer {
    border-top: none !important;
    background: #eeebff;
    padding: 10px;
}

.kdsCanbanView .card-header {
    border-bottom: none !important;
    padding: 10px;
}

.kdsCanbanView .cardServed {
    color: #00a33d;
}

.kdsCanbanView .cardPriority {
    color: #ff003d;
}

.buttonGroupPrint {
    cursor: pointer;
}

.card.border-0 .specialistImage {
    max-height: 280px !important;
    width: 100% !important;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.payCounterText.pt-3 h6 {
    font-size: 18px;
    font-weight: 600;
}

.zIndex2.position-sticky.runningOrder {
    top: 54px;
    z-index: 123;
}

.specialistLayout .specialistImage {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.specialistImage {
    max-height: 200px;
    /* min-height: 200px; */
    object-fit: cover;
    width: 160px !important;
    width: 100%;
    object-position: top;
    border-radius: 10px;
    cursor: pointer;
}

.mySidebar .merchantLogoWrapper i {
    width: 35px;
    height: 35px;
    background: var(--Primary_BGColor);
    font-size: 20px;
    border-radius: 50%;
    color: white;
    border: 2px solid #fff;
    position: absolute;
    right: -8px;
    top: 10px;
    line-height: 35px;
    z-index: 999 !important;
}

.p-3.br10.runningOrder .row.mt-2 {
    margin-top: 0px !important;
}

.p-3.br10.runningOrder {
    padding: 10px !important;
}

/* .yellowBg.customButton {
padding: 6px 8px !important;
} */

.input-group.changeOutlet label.input-group-text {
    height: 40px;
}

.input-group.changeOutlet label.input-group-text i {
    font-size: 16px !important;
}

.input-group.changeOutlet select#inputGroupSelect01 {
    height: 40px;
    line-height: 15px;
    font-size: 14px !important;
    padding: 10px 0px;
}

.scrollGrid .btn.primaryColor.focusRemove {
    padding: 8px 8px;
}

.scrollGrid .btn.primaryColor.focusRemove:hover {
    color: var(--Primary_Color) !important;
    border: 1px solid var(--Primary_Color) !important;
    background: transparent !important;
}

.bookingOrderStatus {
    background: #ffeace;
    color: #f49700;
    padding: 5px 5px;
    border-radius: 10px;
    margin-left: 4px !important;
}

.bookingOrderStatus p {
    font-size: 12px !important;
}

.famousOne ul li a {
    color: #121212 !important;
}

.imagePreview video {
    width: 100%;
    height: 200px;
}

.runningOrder .card.card-body.cardBoxShadow.borderRadius5 {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 300px;
    height: auto;
}

.scrollableCart {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 300px;
    height: auto;
}

.EmailReceiverList {
    border-top: 1px dashed;
    padding: 10px 10px;
    margin-top: 10px;
}

.kdsTitle {
    font-size: 24px;
}

.employeeDetail table.table tr td {
    width: 33.33%;
}

.icon-container1 i.socialShareIcon {
    padding: 10px;
    font-size: 24px;
    border-radius: 40px;
}

.checkoutScroll .card.card-body.cardBoxShadow {
    margin-bottom: 10px;
}

.nav-pills .nav-link {
    border-radius: 10px;
}

.addMore .rate {
    direction: rtl;
    text-align: left;
}

.indexMain .col-lg-8 .accordion-body.pt-0 .col-md-4 {
    margin-bottom: 10px;
}

.indexMain .col-lg-8 .accordion-body.pt-0 .col-md-4 p {
    margin-bottom: 4px;
}

.indexMain .col-lg-8 .accordion-body.pt-0 .col-md-6 {
    margin-bottom: 10px !important;
}

.indexMain .col-lg-8 .accordion-body.pt-0 .col-md-6 p {
    margin-bottom: 4px !important;
}

.employeeDetail .table th,
.employeeDetail .table td {
    padding: 5px 5px !important;
    border: 1px solid #ddd;
    text-align: start;
    /* min-width: 160px; */
    font-size: 14px;
    font-weight: 500;
}

.modal-header-block {
    display: block !important;
}

.modal-footer-block {
    display: block !important;
}

ul.dropdown-menu.dashboardCardShadow {
    overflow-y: scroll;
    height: 400px;
    overflow-x: hidden;
}

.instacitiStar.mt-4 td:nth-child(2) {
    width: 5%;
}

.instacitiStar.mt-4 td:nth-child(1) {
    width: 25%;
}

.instacitiStar.mt-4 td:nth-child(3) {
    width: 75%;
}

.instacitiStar div strong {
    font-size: 20px;
}

.instacitiStar div th strong {
    font-size: 15px;
}

.header .header-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--Primary_Color) !important;
    padding: 0px !important;
    margin-bottom: 0px !important;
}

.header {
    align-items: center;
}

.header .logo {
    width: 80px !important;
    height: 80px !important;
    margin-right: 15px;
    border-radius: 10px;
    object-fit: cover;
}

.instacitiStar .table th {
    background-color: var(--Primary_BGColor) !important;
    color: #fff;
}

.instacitiStar .btn {
    padding: 10px 15px;
    font-size: 16px !important;
    border-radius: 5px;
    margin-top: 0px !important;
    background: var(--Primary_Color) !important;
    border-color: var(--Primary_Color) !important;
    font-weight: 600;
}

.instacitiStar.mt-4 p.font20.font600 {
    font-size: 18px;
    margin-bottom: 5px;
}

.modalFooterShadow .incrementButton {
    padding: 10px;
    font-size: 16px !important;
}

.cartIncrementButton i.fa.fa-plus {
    float: right;
    margin-top: 5px;
}


.topHeaderShadow .col-md-5.text-center .primaryBgColor.text-white i {
    color: #fff !important;
}

@media(max-width:1024px) and (min-width:768px) {
    .alloptions .btn.primaryBgColor.customButton {
        padding: 10px 8px !important;
    }

    .card-body.tableLike span i {
        margin-left: 2px !important;
    }

    .alloptions .btn.primaryBgColor.customButton i {
        margin-right: 5px !important;
    }

    .row.bodyContent .card-body .row.mt-3 .col-4 {
        padding: 0px 15px;
    }

    .changeOutlet select#inputGroupSelect01 {
        font-size: 12px;
    }

    .card.card-body.cardBoxShadow.border-0.mt-3.borderRadius5 {
        padding: 20px !important;
    }

    .font16 {
        font-size: 12px;
        margin-bottom: 2px !important;
    }

    .font26 {
        font-size: 18px;
    }

    .btn {

        padding: 4px 6px !important;
    }

    .fixImg p {
        margin: 8px 0px !important;
    }

    .fixImg.dropdown {
        padding-left: 5px !important;
    }

    .customGryButton i {
        margin-right: 4px !important;
    }

    .customGryButton {
        padding: 6px 5px !important;
        font-size: 12px !important;
    }

    .customMoreButton {
        font-size: 11px !important;
        padding: 5px !important;
    }

    .customMoreButton i {
        margin-right: 4px !important;
    }

    .updateStatus i {
        margin-right: 5px !important;
    }

    .updateStatus {
        padding: 5px 8px !important;
    }

    .settLedBox {
        padding: 4px 5px;
    }

    .settLedBox p {
        font-size: 12px !important;
    }

    .card-header.secondaryBgColor.border-0 p {
        font-size: 13px !important;
    }

    .card-body.tableLike p {
        font-size: 13px !important;
    }

    .customOrderCardButton {
        font-size: 12px !important;
    }

    .customButton.pendingYellowBg {
        padding: 8px 5px !important;
        font-size: 11px !important;
    }

    .cardBoxShadow .nav-pills .nav-link i {
        margin-right: 5px !important;
    }

    .card.border-0.cardBoxShadow.card-body {
        padding: 8px !important;
    }

    .cardBoxShadow .nav-pills .nav-link {

        padding: 5px 5px !important;
        font-size: 12px;
    }

    .cardBoxShadow .nav-pills .nav-link i {
        margin-right: 5px !important;
    }

    button.btn.customButton.currencyBg {
        font-size: 11px !important;
        padding: 10px 3px !important;
    }
}

.row.bodyContent .card .table-responsive tr p {
    font-size: 15px;
    font-weight: 800;
}

.sidebar .input-group-text {
    padding: 12px;
}

.zIndex2 {
    z-index: 1234;
}

.headerAdBanner img {
    border-radius: 10px;
}

.modal-body.pt-2 .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 50vh;
    overflow-y: auto;
    min-height: 50vh;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

}

.table-responsive::-webkit-scrollbar {
    height: 5px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

/* .row.bodyContent .card .table th,
.table td {
    min-width: 275px;
} */

.table th,
.table td {
    padding: 15px;
    border: 1px solid #ddd;
    /* min-width: 160px; */
    text-align: left;
}

.table thead {
    background-color: #f4f4f4;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table tr:hover {
    background-color: #f1f1f1;
}


/* buddy app css start here */

.buddyApp {
    width: 500px;
    margin: 0 auto;
    background: #fff;
    height: 100vh;
    position: relative;
    padding: 20px;
}


.buddyApp .buddyApp .buddyLogo {
    text-align: center;
    /* position: absolute; */
    /* padding: 15px; */
    margin-top: 150px;
}

.buddyLogo img.img-fluid {
    width: 100px;
    text-align: center;
}

.buddyAppLogin {
    text-align: left;
    margin-top: 50px;
}

.terminalId {
    background: #f5f5f5;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #949494;
}

.terminalId p .form-control {
    background: transparent;
    border: 0px;
    border-radius: 0px;
    padding: 10px 0px;
}

.terminalId p .form-control.Terminal {
    border-bottom: 1px solid #949494 !important;

}

.buddyFooter {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.buddyFooter img {
    width: 120px;
}

@media(max-width:767px) {
    .buddyApp {
        width: 100%;
    }

    .refreshButton {
        background: #fff !important;
    }

    .zIndex2.position-sticky.runningOrder {
        position: initial !important;
    }

    .customButton {
        padding: 10px 10px !important;
    }

}

@media(max-width:768px) {
    .buddyApp {
        width: 100%;
    }
}

.buddyApp.selectTable {
    height: initial;
}

.selectTableTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed gray;
    padding-bottom: 15px;
}

.selectTableTop .notificationLogin img.loginUserImage {
    width: 35px;
    height: 35px;
    border-radius: 100px;
}

.subCategoryscroll {
    overflow: scroll;
    white-space: nowrap;
    display: flex;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    padding: 0px !important;
    margin: 15px 0px;
}

.subCategoryscroll .btn.subcategoryButton.activeSubCategory {
    padding: 4px 15px;
    border: 1px solid #f15a25;
    background: #f15a25;
    color: #fff;
}

button.btn.subcategoryButton {
    background: #e3e7e8;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 2px 20px;
    font-size: 15px;
}

.subCategoryscroll::-webkit-scrollbar {
    width: 0px;
    height: 1px;
}

.categoryscroll {
    overflow: scroll;
    white-space: nowrap;
    display: flex;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    padding: 0px !important;
    margin: 10px 0px;
}

.categoryscroll .btn.primaryColor.activeCategory {
    padding: 4px 8px;
    border-bottom: 1px solid #000;
    border-radius: 0px;
}

.categoryscroll::-webkit-scrollbar {
    width: 0px;
    height: 1px;
}

.notificationBox.notificationDropdown ul.m-0.p-0 li {
    list-style: none;
}

.buddyApp .allNotificationsBtn {
    width: 180px;
    margin: 0 auto;
    background: #ffe0d5;
    color: #f15a25 !important;
    text-align: center;
    border-radius: 70px;
    padding: 5px;
    font-size: 14px;
    margin-top: 10px !important;
}

.card.orderHistory .card-header {
    background: var(--Secondary_Color);
    display: flex;
    justify-content: space-between;
}

.card.orderHistory .tableNumber {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

/* buddy app css end here */



.sidebar .input-group {
    border: 1px solid #ced4da;
    border-radius: 8px;
}

.table-responsive .row .col-auto.align-self-center.ps-0 .dropdown,
.dropend,
.dropstart,
.dropup {
    position: initial;
}

.input-group.mb-0 {
    border: 1px solid#ced4da;
    border-radius: 50px;
}

.row.bodyContent .input-group {
    position: initial;
    background: #fff;
    border: 1px solid #ced4da !important;
    border-radius: 50px;
    overflow: hidden;
}

.enquiryTableWrapper span.input-group-text.position-absolute.search-icon {
    position: initial !important;
}

.card.cardBoxShadow .nav-tabs .nav-item .nav-link.active {
    color: var(--Primary_Color);
    font-weight: 500;
}

.row .input-group .form-control {
    border: none;
}

.row .input-group span.input-group-text {
    border: none;
}

/* .table-responsive.customCellwidthDesktop th,
td {
    min-width: 160px;
} */

.accordion .accordion-item .accordion-collapse .form-select {
    border-radius: 10px !important;
}

.accordion .accordion-item .accordion-collapse .input-group {
    border: 0;
}

.table-responsive .col-auto.align-self-center.ps-0.actionDropBtn {
    position: absolute;
    right: 60px !important;
    margin-top: 30px;
}

div#insta-qa-mcg63kw8-header {
    border-radius: 10px;
    overflow: hidden;
}

td.text-end .col-auto.align-self-center.ps-0 .dropdown {
    position: initial;
}

/* .table-responsive td.text-end .col-auto.align-self-center.ps-0 {
    position: absolute;
    right: 35px;
} */

td.text-end.quickAction {
    position: relative;
}

.kdsDetailList .table th,
.kdsDetailList .table td {
    min-width: 70px;
}

.card.card-body.mb-3 button.btn.greenBg {
    border-radius: 100px;
    padding: 3px 10px;
    font-size: 14px;
}

div#main div#carouselExample .carousel-item video.w-100.carouselVideo {
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
}

div#main div#carouselExample .carousel-item img.w-100.carouselImg {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
}

.videoPreview video {
    width: 80px !important;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
}

.priorityButton {
    background: gray;
    border-color: gray;
    padding: 2px 8px;
    border-radius: 100px;
    color: #ffffff;
    font-size: 12px;
    line-height: 14px;
}

.priorityButtonActive {
    background: #ed1717;
    border-color: #ed1717;
    padding: 2px 8px;
    border-radius: 100px;
    color: #ffffff;
    font-size: 12px;
    line-height: 14px;
}

/* shared with amit css start here */

html,
body {
    height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

.loaderModal {
    display: none;
    position: fixed;
    z-index: 1000000000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(255, 255, 255) url("https://dkzxkcjlbnjui.cloudfront.net/portal/loader/loading-page.gif") 50% 50% no-repeat;
    display: block;
}

.pac-container {
    z-index: 10000 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.background-failure {
    background-color: #dc3545;
    color: white;
}

.background-success {
    background-color: green;
    color: white;
}

.videoPreview {
    position: relative;
}

.videoDelete {
    color: red;
    position: absolute;
    font-size: 20px;
    top: -8px;
    left: 190px;
}

.cdk-overlay-container {
    z-index: 1060;
}

.showLoader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    z-index: 999999983;
    background: rgba(255, 255, 255, 0.8) url(https://dkzxkcjlbnjui.cloudfront.net/portal/loader/loading-page.gif) no-repeat center center;
}

.loader-container {
    position: relative;
    height: 100%;
    width: 100%;
}

.row {
    position: relative;
}

.col-12 {
    position: relative;
}

.customButton1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    height: 42px !important;
}

.loader-container1 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loaderModal1 {
    display: block;
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* shared with amit css end here */

.EmailReceiverList textarea.form-control {
    font-size: 14px;
}

.AlTouchSection {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
}

.AlTouchSection .tableHeader {
    background-color: var(--Secondary_Color);
    border: 0px;
    border-radius: 10px 10px 10px 10px;
    overflow: hidden;
}

.AlTouchSection .tableRow td {
    padding: 10px;
    border: 1px solid #cacaca !important;
    font-size: 14px;
    padding: 10px;
}

.table-responsive .AlTouchSection .tableHeader th:nth-child(2) {
    min-width: 50px;
}

.table-responsive .AlTouchSection .tableRow td:nth-child(2) {
    min-width: 50px;
}

.table-responsive .AlTouchSection .tableHeader th:nth-child(4) {
    min-width: 80px;
}

.table-responsive .AlTouchSection .tableRow td:nth-child(4) {
    min-width: 80px;
}

.table-responsive .AlTouchSection .tableHeader th {
    text-align: left;
    padding: 10px;
    border: 0px;
    font-size: 18px;
    font-weight: 600;
}

.AlTouchSection .tableRow td span.viewTable {
    background: var(--Primary_Color);
    padding: 5px 8px;
    border-radius: 50px;
    color: #fff;
    width: 100%;
    display: inline-block;
    text-align: center;
}

.AlTouchUps button.currentBalance {
    background: #f8780e;
    border: 0px;
    padding: 8px 10px;
    display: inline-block;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.AlTouchUps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #c3c3c3;
    padding-bottom: 10px;
}

.AlTouchUps h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0px !important;
}

.screenWidth .accordion-body .shoplayoutPreview {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border: 1px solid var(--Primary_Color);
    border-radius: 10px;
    margin-bottom: 10px;
}



.btnXs {
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

.btnSm {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    line-height: 22px !important;
    font-size: 13px !important;
}

.btnSmall {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    line-height: 22px !important;
    font-size: 13px !important;
}

.btnMd {
    padding: 8px 10px !important;
    border-radius: 6px !important;
    line-height: 22px !important;
    font-size: 14px !important;
}

.btnLg {
    padding: 10px 10px !important;
    border-radius: 10px !important;
}

.customBtnXlg {
    padding: 12px 10px !important;
    border-radius: 12px !important;
}

.btnWarning {
    background-color: #ffca2c !important;
}

.btnSuccess {
    background-color: #198754 !important;
}

.btnProceed {
    background-color: var(--Primary_Color) !important;
}

.btnCancel {
    background-color: #ffdde0 !important;
    color: #ef1212 !important;
}

.btnTeal {
    background-color: #0d9488 !important;
}

.btnIndigo {
    background-color: #6366f1 !important;
}

.btnBlue {
    background-color: #3b82f6 !important;
}

.acceptBtn {
    background-color: #16a34a !important;
}

.btnTeal:hover {
    background-color: #0f766e;
}

.btnIndigo:hover {
    background-color: #4f46e5;
}

.btnBlue:hover {
    background-color: #2563eb;
}

.acceptBtn:hover {
    background-color: #15803d;
}