.norepeat {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

#MasterPanelBorder {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    height:100%;
}

#MasterPanel {
    transition: opacity 0.1s ease-in-out;
    height: 100%;
}

.inputcss {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.linkss {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 0px;
    overflow: hidden;
}

    .linkss > * {
        flex: 1;
        max-width: 33%;
        border-radius: 10px;
        display: table-cell;
        vertical-align: middle;
    }

.linkss2 {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 0px;
    overflow: hidden;
}

    .linkss2 > * {
        width: 30% !important;
        border-radius: 10px;
        display: table-cell !important;
        vertical-align: middle;
        text-align:start !important;
    }


.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

    .popup input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .popup button {
        padding: 10px 15px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }

        .popup button:hover {
            background-color: #0056b3;
        }

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
}

.slidemenu {
    background-color: var(--bgcolor);
    position: fixed;
    top: 0px;
    width: 210px;
    display: flex;
    flex-direction: column;
    z-index: 99998;
    padding: 50px 0 0 0;
    margin: 0 0 10px 0;
    height: 100%;
    max-height: 100%;
}



.slidemenuinside {
    
    max-height: 100% !important;
    overflow-y: auto;
}

.slidemenutop {
    overflow: hidden;
}

.sldmbtm {
    width: 100%;
    height: 42px;
}

.slidemenuf {
    height: 100% !important;
    max-height: 100% !important;
}

.sidebtn {
    border-radius: 5px;
    margin: 10px 10px;
    background-color: var(--mncolor);
    display: flex;
    height: 50px;
    max-width: 100%;
    cursor: pointer;
    /* background: linear-gradient(90deg, rgba(220,220,221,0) 33%, rgba(85,85,85,0.6671043417366946) 100%);*/
}

    .sidebtn img {
        margin: 14px 10px 0 10px;
        width: 22px;
        height: 22px;
    }

    .sidebtn span {
        display: flex;
        align-items: center;
        height: 100%;
        font-weight: bold;
    }

.ondesm {
}

.phonepnl {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 15px;
}

    .phonepnl > select {
        width: 100px;
        height: 46px;
        background-size: 60px;
        padding: 5px;
    }

    .phonepnl > input {
        flex: 1;
    }

    .phonepnl > select > option {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-left: 46px;
    }

.onlinedescription {
    font-weight: bold;
    flex: 4;
    min-width: 250px;
    max-width: 100vw;
    overflow: auto;
    padding: 20px;
    text-align: initial !important;
    color: var(--txcolor) !important;
    background-color: var(--bgcolor) !important;
}

   
   

.ondesm {
    position: relative;
    max-height: 400px;
    overflow: hidden;
    transition: all 0.15s ease-out;
    padding-bottom: 32px;
}

    .ondesm > a {
        display: block;
        position: absolute;
        top: 368px;
        height: 32px;
        width: 100%;
        text-align: start;
        font-weight: bold;
    }

.deliverycostp {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    color: var(--mcolor);
}

    .deliverycostp > * {
        flex: 100%;
    }

.pdescview {
    text-align: initial !important;
    max-width: 100%;
    background-color: var(--bgcolor) !important;
}

    .pdescview img, .onlinedescription img {
        max-width: 100%;
        height: auto !important;
    }

    .pdescview *, .onlinedescription * {
        background-color: var(--bgcolor) !important;
    }



.forcetx {
}


    .forcetx *:is( [color*="black" i], [color="#000" i], [color="#000000" i], [color="rgb(0, 0, 0)" i], [color="rgba(0, 0, 0, 1)" i], [color="hsl(0, 0%, 0%)" i], [color="hsla(0, 0%, 0%, 1)" i], [color*="white" i], [color="#fff" i], [color="#ffffff" i], [color="rgb(255, 255, 255)" i], [color="rgba(255, 255, 255, 1)" i], [color="hsl(0, 0%, 100%)" i], [color="hsla(0, 0%, 100%, 1)" i], [color="rgb(51, 51, 51)" i], [color="#333" i], /* Hexadecimal shorthand */[color="rgb( 51, 51, 51 )" i],[color="rgb(051,051,051)" i]) {
        color: var(--txcolor);
    }

    .forcetx *:is( [style*="color: black" i], [style*="color: #000" i], [style*="color: #000000" i], [style*="color: rgb(0, 0, 0)" i], [style*="color: rgba(0, 0, 0, 1)" i], [style*="color: hsl(0, 0%, 0%)" i], [style*="color: hsla(0, 0%, 0%, 1)" i], [style*="color: white" i], [style*="color: #fff" i], [style*="color: #ffffff" i], [style*="color: rgb(255, 255, 255)" i], [style*="color: rgba(255, 255, 255, 1)" i], [style*="color: hsl(0, 0%, 100%)" i], [style*="color: hsla(0, 0%, 100%, 1)" i], [style*="color: rgb(51, 51, 51)" i], [style*="color: #333" i], [style*="color: rgb( 51, 51, 51 )" i], [style*="color: rgb(051,051,051)" i] ) {
        color: var(--txcolor);
    }


.menuiteminsidem {
    font-size: 18px;
    padding: 0 10px 0 10px;
    width: 100%;
    min-height: 42px;
    font-weight: bold;
    line-height: 42px;
    /* background: linear-gradient(90deg, rgba(220,220,221,0) 33%, rgba(85,85,85,0.6671043417366946) 100%);*/
}

    .menuiteminsidem:hover, .sidebtn:hover {
        background-color: var(--mhcolor);
    }

.menuiteminside {
    color: dimgrey;
    font-size: 18px;
    font-weight: bold;
    padding: 0 10px 0 10px;
    width: 100%;
    min-height: 42px;
    line-height: 42px;
}

    .menuiteminside:hover {
        font-size: 20px;
    }

.cardv {
    box-shadow: var(--mcolor) 0px 7px 29px 0px;
    box-shadow: 0 1px 3px var(--mcolor), 0 1px 2px var(--mcolor);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    border-radius: 10px;
}

.card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.1s cubic-bezier(.25,.8,.25,1);
    border-radius: 10px;
}

    .card:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

.cardx {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 10px;
}

    .cardx:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

.card-n {
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.picpanel {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    margin-bottom: 10px;
}

    .picpanel > * {
        width: 60px;
        height: 60px;
        cursor: pointer;
    }

.linkcontainer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    list-style-type: none;
}

    .linkcontainer > * {
        margin-bottom: 10px;
        
    }


    .linkcontainer > :not(:last-child) {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 16px;
        border-radius: 7px;
        padding: 7px 10px 7px 10px;
        background: var(--mncolor);
        transition: all 0.25s;
    }

    .linkcontainer > :last-child {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        text-align: start;
    }

    .linkcontainer > :not(:last-child):hover {
        background: var(--mhcolor);
    }



.pdescselect {
    height: 40px;
    min-height: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px;
    border-bottom-style: solid;
    border-bottom-color: lightgray;
    margin-bottom: 15px;
}

    .pdescselect > * {
        height: 100%;
    }

.pdescselectactive {
    border-bottom: 3px solid var(--mcolor);
}

/* .pdescselectactive:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 0;
        height: 0;
        border-top: 25px solid #6A0136;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }*/

.relatedproducts {
    margin-top: 15px;
}

#alertpanelparent {
    position: fixed;
    top: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 999999;
    height: auto;
}

#alertpanel {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transition: all .15s ease;
    height: auto;
}

    #alertpanel > div {
        width: 100%;
        min-height: 42px;
        color: white;
        display: flex;
        transition: all .15s ease;
    }

        #alertpanel > div > span {
            flex: 1;
            height: 100%;
            line-height: 40px;
            text-align: center;
            text-shadow: 0 0 1px #666;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
        }

        #alertpanel > div > a {
            display: block;
            width: 40px;
            height: 40px;
            padding: 4px;
            line-height: 40px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            /* background-image: url('https://www.jumia.com.eg/assets_he/images/i-icons.e70b7734.svg#close')*/
            background-image: url('/images/res/svg/close.svg');
            background-size: 32px 32px;
            background-repeat: no-repeat;
            background-position: center;
        }

.imgcol {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.glbl {
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0px;
    color: white;
}

/* Loading */
.no-js #loader {
    display: none;
}

.js #loader {
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
}

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: center no-repeat;
}
/*END Loading */
/*GridViewCSS*/
.xGridViewStyle1 {
    font-weight: bold;
    font-size: 18px;
    margin-top: 8px;
    max-width: 100%;
}

    .xGridViewStyle1 th {
        background-color: #808080;
        color: white;
        text-align: right;
    }

    .xGridViewStyle1 a /** FOR THE PAGING ICONS  **/ {
        padding: 5px 5px 5px 5px;
        text-decoration: none;
    }

        .xGridViewStyle1 a:hover /** FOR THE PAGING ICONS  HOVER STYLES**/ {
            background-color: dodgerblue;
        }

    .xGridViewStyle1 span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
        background-color: aqua;
        padding: 5px 5px 5px 5px;
    }

.TabContainer {
    font: bold 0.75em Verdana;
    width: 60em;
    margin-top: 1.5em;
    padding-top: 2em;
}

.ContentPanel {
    background-color: #bbbbbb;
    padding: 10px 10px 10px 10px;
    width: 60em;
    font: 0.8em Verdana;
}

.left {
    float: left;
}

.lbl {
    display: block
}

.lbl1 {
    display: block;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 8px;
}

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

    .jbasictable th, .jbasictable td {
        padding: 6px;
        text-align: start;
    }

        .jbasictable td:nth-child(1) {
            font-weight: bold;
        }

        .jbasictable td:nth-child(2) {
            font-weight: lighter;
        }

.searchpanelmain {
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    overflow: hidden;
}

.scanbox {
    background-color: var(--tbcolor) !important;
    color: var(--txcolor) !important;
    font-size: 14pt;
    flex: 1;
    min-width: 80px !important;
}

.filterpanel {
    background:var(--bgcolor3);
    width: 280px;
    overflow: hidden;
    text-align: start;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.plistmain {
    background: var(--bgcolor3);
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.panelheader {
    font-weight: bold;
    width: 100%;
    min-height: 42px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 5px;
    text-align: center;
}

    .panelheader > span {
        flex: 1;
        padding-left: 10px;
        padding-right: 10px;
        text-align: start;
        line-height: 30px;
    }

.listcollbl {
    margin: 10px 0 10px 0;
    box-shadow: 0 0 3px rgba(0,0,0,0.12);
    display: block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    cursor: pointer;
}

.filterpanelinside {
    max-height: 340px;
    overflow-y: auto;
}

.lscr {
    scrollbar-color: #ededed transparent;
    scrollbar-width: thin;
}

    .lscr::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .lscr::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .lscr::-webkit-scrollbar-thumb {
        background-color: #ededed;
        border-radius: 3px;
    }

        .lscr::-webkit-scrollbar-thumb:hover {
            background-color: #c7c7cd;
        }



.plist {
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}

.lblsearch {
    color: var(--mcolor);
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 2em;
}

.loading {
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}


/*.dvLoading {*/
/* background: #000 url(Images/res/loading.gif) no-repeat center center;*/
/*background: #000 url(Images/res/svg/colorloading.svg) no-repeat center center;
    width: 100px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
}*/



.glabel {
    display: block;
    width: 100%;
    margin-top: 8px;
    font-weight: bold;
    font-size: 25px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-decoration: none;
    color: var(--mcolor)
}

.aboutus {
    padding: 10px;
    text-align: start;
}

    .aboutus > div {
        margin-bottom: 5px;
    }

        .aboutus > div > span {
            color: var(--mcolor);
            font-weight: 400;
            font-size: 20px;
            /*font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif !important;*/
        }

        .aboutus > div > p {
            text-align: justify;
            text-justify: inter-word;
            padding: 5px 0 0 0;
            font-weight: bold;
            font-size: .8rem;
            /*font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif !important;*/
        }

.brushbtn {
    float: left;
    color: #FFF;
    text-align: center;
    cursor: pointer;
    margin: 1%;
    width: 23%;
    height: 60px;
    line-height: 60px;
}

.brushbtn-11 {
    height: 50px;
    color: var(--mcolor);
    border-bottom: 3px solid #C4CACE;
    -webkit-box-shadow: inset 0 -3px #C4CACE;
    box-shadow: inset 0 -3px #C4CACE;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.brushbtn:hover {
    transition: 1s all ease-in-out;
    border-radius: 30px;
}

.resp-share-a {
    display: inline-block;
}

.resp-share {
    margin: 0.3em;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 25ms ease-out;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    width: 100px;
    height: 45px;
    border-radius: 5px;
    color: #fff;
}

    .resp-share > img {
        width: 24px;
        height: 24px;
        margin: 0 7px 0 0;
    }

.resp-share-w {
        background-color: #25D366
}
    .resp-share-w:hover {
        background-color: #1da851
    }

.resp-share-f {
    background-color: #3b5998
}
    .resp-share-f:hover {
        background-color: #2d4373
    }

.resp-share-m {
    background: linear-gradient(45deg, #0078FF, #8E39F7);
}

    .resp-share-m:hover {
        background: linear-gradient(45deg, #8E39F7, #A062FF); /* a lighter hover effect */
    }

.gbtn {
    font-size: large;
    font-weight: bold;
    border: none;
    height: 48px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    -webkit-border-radius: 0;
    /*-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);*/
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    /*margin: 5px 0px 40px 0px;*/
    width: 100%;
    background: center no-repeat;
    background-size: contain;
    cursor: pointer;
}

.gbtn1 {
    color:var(--txcolor);
    font-size: large;
    font-weight: bold;
    border: none;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    -webkit-border-radius: 0;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background: center no-repeat;
    background-size: contain;
    cursor: pointer;
}

.g_id_signin_p {
    min-height: 48px;
    margin-top: 10px;
}

.g-signin2-p {
    margin-top: 20px;
    width: 100%;
    height: 48px;
    border-radius: 5px;
}

    .g-signin2-p > div > div {
        width: 100% !important;
        min-width: 100% !important;
    }

        .g-signin2-p > div > div > div {
            width: 100% !important;
            min-width: 100% !important;
        }

.gbtnx {
    font-weight: bold;
    border: none;
    color: white;
    padding: 5px 0 0 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-border-radius: 0;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background: center no-repeat;
    background-size: contain;
    cursor: pointer;
}

    .gbtn:hover, .gbtnx:hover {
        background-color: #39ace7;
    }

    gbtn:active, .gbtnx:active {
        -moz-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -o-transform: scale(0.95);
        transform: scale(0.95);
    }

.gcheckbox {
    font-weight: bold;
    width: 100%;
    display: block;
    text-align: var(--cdir);
}

.pitemcard {
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*.addtocartbtn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 40px;
    font-size: 16px;
    text-align: start;
    color: white;
    text-align: center;
    margin: 6px 0 17px 0;
    transition: all 0.15s ease;
}
*/


.paddtocart {
    height: 40px !important;
    background-color: var(--mcolor) !important;
    color: white;
    border-radius: 10px;
}


    .paddtocart :hover {
        background-color: var(--mcolor) !important;
    }


.placeorderbtn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 40px;
    font-size: 16px;
    text-align: start;
    color: white;
    text-align: center;
    transition: all 0.15s ease;
    background-color: var(--mcolor)
}

.loginpanel {
   padding:25px;
   width:90%;
   max-width:450px;
   background-color:var(--bgcolor2)
}

.loginpanel > *:not(:last-child) {
    margin-bottom: 10px;
}

    .addpbpx {
    }

.pfavpanel {
    padding: 4px;
    width: 100%;
    border-radius: 10px;
    display: flex;
    justify-content: flex-start;
    column-gap: 10px;
    cursor: pointer;
    height: 40px;
    line-height: 32px;
    border: solid 1px lightgray;
}

    .pfavpanel > img {
        width: 32px;
        height: 32px;
    }

.lbl_qaddmin {
    display: block;
    border-radius: 4px;
    text-align: center;
    font-size: 24px;
    background-size: cover;
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.lbl_qadd {
    background-color: #15B391;
}

.lbl_qmin {
    background-color: #BE7C7C;
}

.disabled {
    pointer-events: none;
}

.cdisabled {
    filter: brightness(0.85);
}

input[type=checkbox] + label {
    display: block;
    margin: 0.2em;
    cursor: pointer;
    padding: 0.2em;
    -webkit-user-select: none;
    -moz-user-select: none !important;
    user-select: none !important;
}

input[type=checkbox] {
    display: none;
}

    input[type=checkbox] + label:before {
        content: "\2714";
        border: 0.1em solid var(--txcolor);
        border-radius: 0.2em;
        display: inline-block;
        width: 1em;
        height: 1em;
        padding-left: 0.2em;
        padding-bottom: 0.3em;
        margin-right: 0.2em;
        margin-left: 0.2em;
        vertical-align: bottom;
        color: transparent;
        transition: 100ms;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        user-select: none !important;
    }

    input[type=checkbox] + label:active:before {
        transform: scale(0);
        color: var(--txcolor);
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        user-select: none !important;
    }

    input[type=checkbox]:checked + label:before {
        background-color: #15AF8E;
        border-color: var(--txcolor);
        color: var(--txcolor);
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    input[type=checkbox]:disabled + label:before {
        transform: scale(1);
        border-color: maroon;
    }

    input[type=checkbox]:checked:disabled + label:before {
        transform: scale(1);
        background-color: gray;
        border-color: maroon;
    }


.gtextbox {
    /*background-color: #f0f0f0;*/
    background-color: var(--tbcolor) !important;
    color: var(--txcolor) !important;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    padding: 10px 0 10px 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    border: 2px solid var(--cbborder);
    transition: all 0.15s ease-in-out;
}

    .gtextbox:hover {
        border-color: var(--mhcolor);
    }

    .gtextbox:focus {
        border: 2px solid var(--cbfocus);
    }

    .gtextbox::placeholder {
        text-align: center;
        font-size: 15px;
        color: #757575;
    }

    .gtextbox::-webkit-input-placeholder { /* Edge */
        text-align: center;
        font-size: 15px;
        color: #757575;
    }

    /* Target the input field when autofilled in Chrome, Edge, and Safari */
    .gtextbox:-webkit-autofill {
        -webkit-text-fill-color: var(--txcolor) !important;
        -webkit-box-shadow: 0 0 0 30px var(--tbcolor) inset !important;
    }


.select-css {
    color: var(--txcolor);
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    border: 2px solid var(--cbborder);
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, var(--tbcolor) 0%,var(--tbcolor) 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    transition: all 0.15s ease-in-out;
}

    .select-css:hover {
        border-color: var(--mhcolor);
    }

    .select-css:focus {
        border: 2px solid var(--cbfocus);
    }

    .select-css option {
        font-weight: normal;
        background: var(--bgcolor);
        color: var(--txcolor);
    }

    /* Support for rtl text, explicit support for Arabic and Hebrew */
    .select-css[style*="rtl"] {
        background-position: left .7em top 50%, 0 0;
        padding: .6em .8em .5em 1.4em;
    }

    /* Disabled styles */
    .select-css:disabled, .select-css[aria-disabled=true] {
        color: #7A312E;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%237A312E%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, var(--dscolor) 0%, var(--dscolor) 100%);
    }

        .select-css:disabled:hover, .select-css[aria-disabled=true] {
            border-color: #7A312E;
        }

/**
 * Credit to Sara Soueidan
 * @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css
 */

.removed-item {
    -webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    -o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)
}

.searchselect {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    background-color: var(--bgcolor);
    z-index: 999899;
}

    .searchselect div:first-child {
        font-weight: bold;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
        font-size: 14pt;
    }

    .searchselect div:nth-child(2) {
        width: 100%;
        max-height: 100%;
        flex: 1;
        overflow-x: hidden;
        overflow-y: scroll;
    }

        .searchselect div:nth-child(2) > button {
            width: 100%;
            background: var(--mncolor);
            color: var(--txcolor);
            font-weight: bold;
            font-size: 20px;
            padding: 5px;
            margin-bottom: 5px;
            border: 0px;
            border-radius: 5px;
            cursor: pointer;
        }

            .searchselect div:nth-child(2) > button:hover {
                background: var(--mhcolor);
            }

            .searchselect div:nth-child(2) > button:focus {
                outline: none; /* To remove the default focus outline */
                border-bottom  : 1px solid var(--txcolor);
            }


.searchselectlb {
    height: 42px;
    width: 42px;
    background-color : var(--mncolor);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    border: 0;
    border-radius:5px;
}

/* Add this CSS to style the highlighted text */
.shighlight {
    color: var(--fblue);
}

/* Custom styles for the search interface */
.search-select {
    position: relative;
}

.search-select__input {
    width: 100%;
    padding: 5px;
}

.search-select__results {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
}

.search-select__result-item {
    padding: 5px;
    cursor: pointer;
}

    .search-select__result-item.highlight {
        background-color: #f2f2f2;
    }

@keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-webkit-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-o-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

.sb-container {
    position: relative;
    width: 150px;
    height: 400px;
    margin: 30px auto 0 auto;
    color: white;
}

    .sb-container div[swatch="-1"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 130px;
        height: 400px;
        border-radius: 5px;
        box-shadow: -1px -1px 3px rgba(0,0,0,0.1);
        cursor: pointer;
        text-align: center;
        -webkit-transform-origin: 25% 90%;
        -moz-transform-origin: 25% 90%;
        -o-transform-origin: 25% 90%;
        transform-origin: 25% 90%;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    .sb-container divdiv[swatch="-1"]:last-child {
        box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 12px 12px 20px rgba(0,0,0,0.6), inset 2px 2px 0 rgba(255, 255, 255, 0.1);
    }

        .sb-container divdiv[swatch="-1"]:last-child:after {
            content: '';
            position: absolute;
            bottom: 15px;
            left: 15px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #dddddd;
            background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dddddd), color-stop(48%,#58535e), color-stop(100%,#889396));
            background: -webkit-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%);
            background: -o-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%);
            background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#889396',GradientType=1 );
            box-shadow: -1px -1px 1px rgba(0,0,0,0.7), 1px 1px 1px rgba(255,255,255,0.1);
        }



.paycheckbox {
    max-width: 500px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 60px;
    margin-bottom: 10px;
}

    .paycheckbox input[type=radio] {
        height: 60px;
        height: 40px;
        margin: 0px 10px 0px 10px;
        -webkit-appearance: radio !important;
        -moz-appearance: radio !important;
    }

    .paycheckbox label {
        padding: 10px;
        flex: 1;
        flex-grow: 1;
        text-align: start;
        font-weight: bold;
        font-size: 16px;
    }

    .paycheckbox img {
        padding: 10px;
        width: 60px;
        height: 60px;
    }

.cardpaypanelmain {
    display: none;
    width: 100%;
    height: 300px;
    background-color: green;
    direction: ltr;
}

.cardpaypanelinsdie {
    width: 100%;
    height: 100%;
    background-color: gainsboro;
}

.cardpaypanelinfo {
}

.multislider {
    padding: 0 10px 0 10px;
}


.multisliderpnl {
    margin: auto;
    text-align: center;
    position: relative;
    height: 32px;
    margin-bottom: 10px;
}

    .multisliderpnl svg,
    .multisliderpnl input[type=range] {
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .multisliderpnl input[type=range] {
        -webkit-appearance: none;
        width: 100%;
    }

        .multisliderpnl input[type=range]:focus {
            outline: none;
        }

            .multisliderpnl input[type=range]:focus::-webkit-slider-runnable-track {
                background: #1da1f2;
            }

        .multisliderpnl input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 5px;
            cursor: pointer;
            animate: 0.2s;
            background: #1da1f2;
            border-radius: 1px;
            box-shadow: none;
            border: 0;
        }

        .multisliderpnl input[type=range]::-webkit-slider-thumb {
            z-index: 2;
            position: relative;
            box-shadow: 0px 0px 0px #000;
            border: 1px solid #1da1f2;
            height: 18px;
            width: 18px;
            border-radius: 25px;
            background: #a1d0ff;
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: -7px;
        }

        .multisliderpnl input[type=range]::-moz-range-track {
            width: 100%;
            height: 5px;
            cursor: pointer;
            animate: 0.2s;
            background: #1da1f2;
            border-radius: 1px;
            box-shadow: none;
            border: 0;
        }

        .multisliderpnl input[type=range]::-moz-range-thumb {
            z-index: 2;
            position: relative;
            box-shadow: 0px 0px 0px #000;
            border: 1px solid #1da1f2;
            height: 18px;
            width: 18px;
            border-radius: 25px;
            background: #a1d0ff;
            cursor: pointer;
        }


.liselect {
    width: 200px;
    padding: 5px;
    border: none;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-size: 14px;
    transition: all 0.3s ease;
    text-align: start;
    display: flex;
    list-style-type: none;
    position: relative;
}

    .liselect:hover {
        background: var(--mncolor);
        cursor: pointer;
    }

    .liselect span:first-child {
        flex: 1;
    }

    .liselect > span > i {
        border: solid white;
        margin: 0 5px 0 5px;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        border-color: var(--txcolor);
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    .liselect > div {
        background: var(--mncolor);
        z-index: 4;
        position: absolute;
        width: 200px;
        border-radius: 0px 0px 7px 7px;
        cursor: default;
    }

        /*.liselect:hover > div {
        z-index: 4;
        opacity: 1;
   visibility: visible;
   transform: translateY(0px);
}*/

        .liselect > div a {
            display: block;
            text-align: start;
            font-size: 14px;
            padding: 10px 15px;
            transition: all 0.3s ease;
        }

            .liselect > div a:hover {
                background: var(--mhcolor);
            }

            .liselect > div a:last-of-type {
                border-radius: 0px 0px 7px 7px;
            }

            .liselect > div a:not(:first-child) {
                border-top: 1px solid var(--mhcolor);
            }

.customerpanel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 100%;
}

    .customerpanel > :nth-child(1) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 280px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px;
        border-radius: 15px;
        overflow: hidden;
        align-content: flex-start;
        background:var(--bgcolor2)
    }

        .customerpanel > :nth-child(1) > div {
            text-align: start;
            width: 100%;
            min-height: 50px;
            padding: 10px;
            transition: all 0.25s;
            display: flex;
            align-items: center;
        }

            .customerpanel > :nth-child(1) > div > a {
                font-weight: bold;
                display: flex;
                align-items: center;
                height: 100%;
                width: 100%;
            }

    .customerpanel > :nth-child(2) {
        flex: 1;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px;
        border-radius: 15px;
        overflow: hidden;
    }

    .customerpanel > :nth-child(1) > div:hover {
        background-color: var( --mhcolor);
    }

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

    .customerpanel {
        flex-direction: column;
    }

        .customerpanel > :nth-child(1) {
            width: 100%
        }

            .customerpanel > :nth-child(1) > div {
                flex: 1;
                width: initial;
                text-align: center;
                min-height: 40px;
            }

                .customerpanel > :nth-child(1) > div > a {
                    justify-content: center;
                }
}

.customerorderpid {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-bottom: 15px;
}

    .customerorderpid > img {
        width: 100px;
    }

    .customerorderpid > div {
        flex: 1;
        height: 100%;
        text-align: start;
        font-weight: bold;
        padding: 10px;
    }

        .customerorderpid > div > * {
            display: block;
        }

        .customerorderpid > div > span:nth-child(2) {
            color: gray;
        }


.customerorder {
    overflow: hidden;
    border-radius: 15px;
}

    .customerorder > :nth-child(1) {
        min-height: 60px;
        background-color: var(--mncolor);
        display: flex;
        flex-wrap: wrap;
    }

        .customerorder > :nth-child(1) > * {
            padding: 10px;
            background-color: var(--mncolor);
            font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif !important;
            font-size: 12px;
        }

.userinfo {
    display: flex;
    flex-wrap: wrap;
    text-align: start;
    padding: 10px 10px;
    gap: 10px;
}

    .userinfo > div:not(.sigpnl) {
        flex: 47%;
        min-width: 200px;
    }

    .userinfo > div > span {
        color: darkgrey;
        display: block;
        width: 100%;
        font-weight: bold;
    }

    .userinfo > div:not(.sigpnl) > :not(span) {
        display: block;
        width: 100%;
        text-align: start !important;
        padding: 10px !important;
    }

    .userinfo > div > select {
        height: 46px;
    }


.multiselect-container {
    width: 100%;
    overflow-y: scroll !important;
}

    .multiselect-container > button {
        text-align: start;
    }

.select2-results__option--selectable {
    display: block;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* #cdiv {
            display: flex !important;
            flex-direction:  column !important;
        }*/

    .searchpanel {
        flex: 1 0 600px !important;
    }

    .pidlistv {
        display: -ms-flexbox !important;
        -ms-flex-wrap: wrap !important;
    }

        .pidlistv > div {
            min-width: 187px !important;
            max-width: 205px !important;
        }

    .ptcat1[dir=rtl] {
        margin: 0 0 10px 6px;
    }

    .ptcat2[dir=rtl] {
        margin: 0 6px 10px 0;
    }

    .ptcat1 {
        margin: 0 6px 10px 0;
    }

    .ptcat2 {
        margin: 0 0 10px 6px;
    }

        .ptcat2 > div > div img {
            width: 100% !important;
            height: 100% !important;
        }
}


.addresspanel {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0 15px 15px 15px;
}

    .addresspanel > div:nth-child(1) {
        flex: 100%;
        height: 40px;
        margin: 0 -15px 0 -15px;
        border-radius: 15px 15px 0 0;
        background-color: var(--mncolor);
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }

        .addresspanel > div:nth-child(1) > *:nth-child(1) {
            flex: 1;
            line-height: 40px;
            font-weight: bold;
            text-align: start;
            padding: 0 15px 0 15px;
        }

        .addresspanel > div:nth-child(1) > *:nth-child(2) {
            width: 150px;
            height: 40px;
            background-color: white;
            color: var(--mcolor);
            line-height: 40px;
            font-weight: bold;
            cursor: pointer;
        }


    .addresspanel > div:not(:nth-child(1)) {
        flex: 49%;
        /* height: 210px;*/
        /*  min-width: 370px;*/
    }

    .addresspanel > div > div {
        border-radius: 15px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        display: flex;
        flex-wrap: wrap;
        padding: 15px;
        height: 100%;
        width: 100%;
        text-align: start;
        align-content: flex-start;
    }

        .addresspanel > div > div > * {
            width: 100%;
        }

            .addresspanel > div > div > *:nth-child(1) {
                font-size: 20px;
                font-weight: bold;
                color: var(--mcolor)
            }

            .addresspanel > div > div > *:nth-child(2) {
            }

            .addresspanel > div > div > *:nth-child(3) {
                height: 88px;
            }

            .addresspanel > div > div > *:nth-child(5) {
                border-top: solid 1px lightgray;
                color: #345A77;
                cursor: pointer;
                text-align: end;
                font-weight:bold;
                font-size:18px;
            }

.customerpointsp {
    overflow: hidden;
}

    .customerpointsp > div:nth-child(1) {
        display: flex;
        position: sticky;
        top: 0px;
        font-weight: bold;
        min-height: 30px;
    }

        .customerpointsp > div:nth-child(1) > span {
            display: flex;
            align-items: center;
        }

    .customerpointsp > div:not(:nth-child(1)) {
        display: flex;
    }


    .customerpointsp > div > span:nth-child(1) {
        background-color: var(--mncolor);
        width: 100px;
    }

    .customerpointsp > div:not(:nth-child(1)):last-child > span:last-child {
        font-weight: bold;
        color: var(--mcolor)
    }

    .customerpointsp > div > span {
        flex: 1;
        max-width: 150px;
        text-align: start;
        padding: 0 7px;
    }

.sigpnl > a:first-child {
    cursor: pointer;
}

.lblsh {
    background: linear-gradient(90deg, var(--mcolor) 0%, rgba(0,0,0,0) 100%);
}

.lblsh[style*="rtl"] {
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--mcolor) 100%)
}

.xdropdown {
    position: relative;
    display: inline-block;
    min-width: 200px;
}

    .xdropdown > :first-child {
        position: relative;
        width: 100%;
        padding: 5px;
        cursor: pointer;
        border: none;
        background-color: var(--tbcolor);
        color: var(--txcolor);
        font-size:16px;
    }

        .xdropdown > :first-child::before {
            content: '\002B'; /* Unicode character for plus sign */
            position: absolute;
            right: 10px; /* Adjust the position as needed */
            top: 50%;
            transform: translateY(-50%);
        }

/* Initial state for the dropdown content */
.xdropdown-content {
    pointer-events: none;
    background-color: var(--mncolor);
    color: var(--txcolor);
    position: absolute;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    opacity: 0;
    transform: translateY(-10px); /* Move the content up by 10px */
    transition: opacity 0.15s, transform 0.15s;
}

.xdropdown-flex-panel > * {
    padding: 5px;
}

    .xdropdown-flex-panel > *:hover {
        background-color: var(--bgheader);
    }


/* The flex container inside the dropdown-content */
.xdropdown-content .xdropdown-flex-panel {
    display: flex;
    flex-direction: column;
    flex: 0; /* Hide the content initially */
    transition: flex 0.15s; /* Transition flex property */
}

/* Animation when hovering over the dropdown */
/*.xdropdown:hover .xdropdown-content {
    pointer-events:auto;
    opacity: 1;
    transform: translateY(0);*/ /* Reset the translateY */
/*}*/

    /* Animation for the flex container when hovering over the dropdown */
/*.xdropdown:hover .xdropdown-content .xdropdown-flex-panel {
        flex: 1;*/ /* Make the content visible by changing flex value */
    /*}*/


.adrbtnblock {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

    .adrbtnblock > * {
        margin-top: 5px;
        cursor: pointer;
    }

    .adrbtnblock > input {
        flex: 1;
        padding: 10px;
        border-radius: 10px;
        font-weight: bold;
        font-size: 16px;
    }

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}