:root {
    --border-color: #2f3f47;
    --control-bg-color: #ededf3;
    --control-border: 1px solid #b9b7b7;
    --sign-bg-color: #b6cbe94a;
    --active-color: #E8E3CE;
    --active-bg-color: #477B8E;
    --bg-color: #efefee;
    --link-color: #0d6ef8;
    --nav-link-color: #E8E3CE;
    --filter-color: #e7e3d0;
    --btn-bg-color: #d9d9d2;
    --btn-color: #444;
    --btn-hover-color: #0d76ab;
    --tab-bg-color: #859dad;
    --tab-color: #0e0e18;
    --header-color: #fff;
    --bg-color-box: #f7eee85c;
    --bx-shadow-color: #dee2ed;
    --bx-info-color: #fff;
    --box-header-color: #104569;
    --box-sub-header-color: #24539d;
    --box-text-color: #104569;
    --box-bg-color: #e3ebefb0;
    --model-header-color: #fff;
    --line-bg: linear-gradient(90deg, #a9b3b9 0%, #c8d1d787 50%, #a9b3b9 100%);
    --line-shadow: 1px 0px 1px inset #93939385, 0px 1px 8px rgb(76 78 93 / 55%);
    --line-border: 1px solid rgb(123 75 75 / 19%);
    --line-color: #0a0a0ce0;
    --menu-shadow: 1px 2px 6px 0px #7e8a976e;
    --menu-border: 1px solid #777778;
    --menu-bg-color: #accced94;
    --side-nav-bg: #2f3f47;
    --modal-header-bg-color: #477B8F;
    --modal-header-color: #e9e2cf;
    --box-wrap-bg-color: #f5f4f0;
    /*linear-gradient(0deg, rgb(30 33 37) 0%, rgb(26 27 35) 50%, rgb(33 35 39 / 95%) 100%); --bg-color-box: #f7eee85c; linear-gradient(90deg, #34749d 0%, #2a678be8 50%, #1a6fa1 100%);*/
    /**
    
        blue colors:
        #132633
        #0e1a2fe3
        #2d3c53
        
    */
    /**
        Gray Color        
        --active-bg-color: #4b4b4b;
    */
    /**
    background: linear-gradient(90deg, #a4a6b3 0%, #b2b3bbd6 50%, #a4a6b3 100%);
    box-shadow: 1px 0px 1px inset #93939385, 0px 1px 8px rgb(76 78 93 / 55%);
    border: 1px solid rgb(123 75 75 / 19%);
    color: #0a0a0ce0;

    */
    /* Common Style Variables */
    /* Color */
    --color-gray: rgba(0, 0, 0, 10%);
    --color-maroon: #000000;
    --color-whitesmoke: #f8f8f6;
    --color-white:#fff;
    /* BorderRadius */
    --br-50: 50%;
    /* Font */
    --font-inter: Inter;
    /* FontSize */
    --fs-14: 14px;
    /* WidthHeights */
    --height-15: 15px;
    /* LineHeights */
    --lh-20: 20px;
    /* LetterSpacings */
    --ls-0_05: 0.05;

}
/* #################  Barcode Scanner Start ####################*/
#barcodeScanner {
    text-align: center;
    font-size: medium;
    height: 60%;
    width: 60%;
    margin: auto;
}

.header {
    background-color: rgb(200, 25, 60);
    color: white;
    padding: 20px;
    text-align: center;
    font-family: Verdana, sans-serif;
    font-weight: 500;
    font-size: 15px;
}

.scanner-button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#scanbot-rtu-ui-controller{
    z-index:999000 !important;
}
.scanner-button {
    margin: 10px 20px;
    padding: 10px 10px 10px 0;
    color: rgb(50, 50, 50);
    font-family: Verdana, sans-serif;
    cursor: pointer;
    font-weight: 300;
    font-size: 14px;
    max-width: 100%;
    border-bottom: 1px solid gray;
}
video {
    width: 80%;
    max-width: 600px;
    border: 2px solid #333;
    border-radius: 8px;
    margin: 20px auto;
    display: block;
}

#result {
    font-size: 1.2rem;
    margin-top: 10px;
}

.scan-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height:500px;
}
#reader {
    width: 600px;
}


/* #################  Barcode Scanner End ####################*/

.navbar-expand-sm .navbar-collapse .he-il {
    flex-direction: row-reverse;
}
.navbar-nav flex-grow-1 .he-il {
    flex-direction: row-reverse;
}

.container-fluid .he-il {
    flex-direction: row-reverse;
    column-gap: 30px;
}
.navbar > .container-fluid.he-il {
    flex-direction: row-reverse;    
}
.navbar > .container-fluid.he-il > .navbar-brand {
    margin-left: 40px;   
}
.text-gold {
    --bs-text-opacity: 1;
    color: rgb(250 245 198) !important;
}
.pub-container {
    width: 100%;
}
.sticky {
    position: sticky;
    box-shadow: 0 6px 10px 3px #0009;
    transition: box-shadow .5s ease;
    top: 59px;
}
.pub-header {
    display: block;   
    z-index: 9;        
    padding: 0;    
    background-color:antiquewhite;
}
/* Body Background */
.bg-opt {    
    background-color: var(--bg-color);
    font-family: "Assistant", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.modal-dialog{
    color:var(--border-color);
}
.barlist-data{
    width:100%;
}
.form-he-il{
    direction:rtl;
}
.logo-img {
    background-image: url('../images/logoa2.png');
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
}
.link {
    text-decoration: underline;
    color: var(--link-color);
}
    .link:hover {
        cursor: pointer;
        text-decoration:underline        
    }
    .logo-img-dark {
        background-image: url('../images/logob2.png');
        height: 60px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
    }
.logo-text.dark {
    color: #5d5c5c;
}
.text-full-width{
    width:100% !important;
}
.logo-text {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
    color: #ccc;
    font-size: 36px;
    margin-right: 20px;
    margin-top: 10px;
    font-weight: 100;
    caret-color: transparent;
    caret: unset;
}
.modal.show .modal-dialog{
    top:75px;
}
#top-root {
    background-color: unset;
}
.varela-round-regular {
    font-family: "Varela Round", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.ibm-plex-sans-hebrew-thin {
    font-family: "IBM Plex Sans Hebrew", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.ibm-plex-sans-hebrew-extralight {
    font-family: "IBM Plex Sans Hebrew", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.ibm-plex-sans-hebrew-light {
    font-family: "IBM Plex Sans Hebrew", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.ibm-plex-sans-hebrew-regular {
    font-family: "IBM Plex Sans Hebrew", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.ibm-plex-sans-hebrew-medium {
    font-family: "IBM Plex Sans Hebrew", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.ibm-plex-sans-hebrew-semibold {
    font-family: "IBM Plex Sans Hebrew", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.ibm-plex-sans-hebrew-bold {
    font-family: "IBM Plex Sans Hebrew", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.lunasima-regular {
    font-family: "Lunasima", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lunasima-bold {
    font-family: "Lunasima", sans-serif;
    font-weight: 700;
    font-style: normal;
}

html {
    font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
html {
  position: relative;
  min-height: 100%;
}
body {
    /*background-color: var(--bg-color);*/    
}
header > h4 {
    font-family: 'HelveticaNeueW01-UltLt', 'wf_SegoeUILight', 'wf_SegoeUI', 'Segoe UI Light', 'Segoe WP Light', 'Segoe WP Light', 'Segoe UI', 'Segoe', 'Segoe WP', 'Arial Unicode MS', Arial;
    font-size: 16pt;
    color: #af0303;
    font-weight: 700;
}
fieldset {
    margin: 8px;
    border: 1px solid #8f8383;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    border-radius: 8px;
    width: auto;
}
footer {
    /*position: fixed;*/
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    display: none;
}
datalist {
    position: absolute;
    max-height: 20em;
    border: 0 none;
    overflow-x: hidden;
    overflow-y: auto;
}

datalist option {
font-size: 0.8em;
padding: 0.3em 1em;
background-color: #ccc;
cursor: pointer;
}

datalist option:hover, datalist option:focus {
    color: #fff;
    background-color: #036;
    outline: 0 none;
}
.my-dd {
    appearance: auto !important;
    -webkit-appearance: auto;
    background: #98a19a;
    border: 2px solid #ddd;
    border-radius: 9px;
    font-size: 18px;
    font-weight: 500;
    color: var(--border-color);
    display: block;
    width: 100%;
    padding: .375rem .75rem;    
    line-height: 1.5;        
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;    
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.my-input {
    appearance: auto !important;
    -webkit-appearance: auto;
    background: #98a19a;
    border: 2px solid #ddd;
    border-radius: 9px;
    font-size: 18px;
    font-weight: 500;
    color: var(--border-color);
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    line-height: 1.5;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.bar-control-buttom{
    margin-top: 20px;
    padding: 10px;
    padding-top:15px;
    padding-bottom:15px;
    display:flex;
    flex-direction: row-reverse;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #aaa;
    box-shadow: 4px 4px 12px 0px #a6a6a6;
    border-radius: 12px;
    column-gap: 15px;
    row-gap: 15px;
}
.control-buttom-divider{
    width: 2px;
    border-right: 1px solid #666;
    margin-right: 1px;
}
.control-buttom{
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 1px 1px 4px 0px #a6a6a6;
}
.domobile{
    display:none;
}
.modal-bottom-line {
    position: absolute;
    bottom: 25px;
    right: 15px;    
}
#popupmodal {
    z-index: 3199;
    top:40px;
}
#image-pop-up {
    z-index: 3299;
    top: 40px;
}
.model-title-exl {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--modal-header-color);
    margin-left: 45px;
    margin-right: unset;
}
.model-title-exl.he-il {
    text-align: right;
    margin-right:45px;
    margin-left:unset;
}
    .modal-title {        
        font-size: 28px;
        font-weight: 500;
        color: var(--modal-header-color);
    }
.lblinstruction {    
    font-size: 24px;
    font-weight: 300;
}
.popup-edit-title {
    width: 100%;
    text-align: center;
}
.modal-dialog {
    margin: auto !important;
}
#image-pop-up {
    z-index: 3199;
}
legend {
    padding: 2px;
    float: none !important;
    width: auto !important;
    font-size: medium;
    font-weight: 600;
}
*:focus {
    outline: none;
}

.toast-header{
    justify-content:space-between;
}
.toast {
    position: fixed;
    top: 50px;
    right: 0;
    min-height: 100px;
    z-index:9999;
}
.country-flag {
    width: 46px;
    height: 37px;
    background-repeat: no-repeat;
    background-size: cover;    
}
.country-flag-frame{
    border:2px solid var(--border-color);
    border-radius:4px;
}
.country-flag-header {
    margin-top: 4px;
}
.country-flag-position.buy {
    top: -18px;
    left: 95px;
}
.country-flag-position {
    position: absolute;
    bottom: -18px;
    right: 25px;
    border: 3px solid var(--border-color);
    box-shadow: 0px 4px 12px 0px #a5a3a3;
    border-radius: 4px;
}
.country-flag-position.he-il {    
    left: 25px;    
}
    .toast-body {
        background-color: var(--control-bg-color);
        margin-right: 10px;
        margin-left: 10px;
    }

.qrcode{
    width:180px;
    position:absolute;
    left:10px;
    top:20px;
}
.bx-info.he-il  .qrcode {
    left:unset;
    right:10px;
}
.bx-info.en-us  .qrcode {
    right: unset;
    left: 10px;
}
#image-pop-up-img {
    text-align: center;
    justify-content: center;
}
#image-pop-up-img > img {
    border-radius: 16px;
}

#image-pop-up img {    
    text-align: center;
    max-height:650px;
    max-width:400px;
    mix-blend-mode:multiply;
}
.curency-sign {
    margin-left: 15px;    
    display: inline-block;
}

.table.he-il{
    direction:rtl;
}
.inv-header-text {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 10px;
    width: 100%;    
    padding-left: 40px;
}
    .inv-header-text.he-il {
        flex-direction: row-reverse;
        padding-right: 40px;
    }
.inv-info-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 10px;
    width: 100%;
   
    padding-left: 10px;
}
    .inv-info-header > .col1 {
        max-width: 200px;
        word-wrap: normal;
        margin-top: auto;
        margin-bottom: auto;
    }
    .inv-info-header > .col2 {
        max-width: 200px;
        word-wrap: normal;
        margin-top: auto;
        margin-bottom: auto;
    }
    .inv-info-header > .col3 {
        padding-left: 20px;
        margin-top: auto;
        margin-bottom: auto;
    }
    .inv-info-header.he-il {
        flex-direction: row;
    }
.inv-list-side{
    margin-left:40px;
}
.line-cover {
    position: absolute;
    width: 100%;
    height: 4px;
    top: 16px;
    left:0px;   
    background-color: var(--bg-color);
    z-index: 1;
}
.link-text-over {
    position: relative;
    z-index: 2;
}
.inv-list-side.he-il {
    margin-left: 0px;
}
#inventory-items {
    margin-top: 45px;
}
.do-bottleSize-span {
    white-space: nowrap;
    margin-right:8px;
}
.inv-create-name {
    width: 100%;
    margin-bottom: 10px;
}
.vertical-line {
    border-right: 2px solid var(--model-header-color);
    margin-top: 5px;
    margin-bottom: 5px;
}
.invenotry-header-line {
    height: 28px;
    text-align: center;
    font-weight: 700;
    color: #4f4f55;
    padding: 0px !important;
    background: var(--line-bg);    
    color: var(--line-color);    
    font-weight: 600;
    font-size: larger;    
}

.buy-home-link {
    position: sticky;
    top: 0px;    
    border-bottom: 2px solid #7b0e0b38;    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%
}
.cls-brnd{
    max-width:180px;
}

.inv-slider-ctl {
    height: 137px;
    width: 35px;
    margin-top:auto;
    
}
.inv-slider-list-pos {
    position: absolute;
    left: 30px;
    bottom: 101px;
}

.slider-control-box {
    position: absolute;    
    display:flex;
    flex-direction:column-reverse;
    justify-content:space-between;
    width:44px;
    height:110px;
}
.slider-control-box-list {
    bottom: 5px;
    left: -54px;
}

.inv-qty-icn {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border:3px solid var(--border-color);
    box-shadow: 4px 0px 12px 0px #a5a3a3;
    caret-color: transparent;
    caret: unset;
}
.inv-qty-icn-plus {
    background-image: url('../images/plus-buttons.png');
    background-position: center;
    width: 44px;
    height: 44px;
    display: inline-block;
    caret-color: transparent;
    caret: unset;
}
.inv-qty-icn-minus {
    background-image: url('../images/minus-buttons.png');
    background-position: center;
    width: 44px;
    height: 44px;
    display: inline-block;
    caret-color: transparent;
    caret: unset;
}
.inv-qty-icn-minus:hover {
    cursor: pointer;
}
.inv-qty-icn-plus:hover {
    cursor: pointer;
}
.inv-qty-icn:hover {
    cursor: pointer;
}   
.inv-slider-view {
    margin: auto;
    width: 100%;
    height: 100%;
    caret-color: transparent;
    caret: unset;    
}
.inv-slider-view:hover {    
}
.inv-slider-steps {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 0px;
    margin-right: 0px;
    height: 100%;
    width: 100%;
    caret-color: transparent;
    caret: unset;
}
    .inv-slider-steps:hover {
        /*cursor: pointer;*/
    }
.line-fields{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    column-gap:10px;
    flex-wrap:wrap;
}
    .line-fields.he-il {
        
    }
.bottleSize-lable{
    width:auto;
}
.line-fields-1 {
}
.line-fields-2 {
}
.line-fields-3 {
    display: flex;
    flex-direction: row;     
    column-gap: 30px;
    margin-top: auto;
    margin-bottom: auto;
}

.step-0 {
    background-image: url('../images/bottole_0_4.svg');    
}
.step-25 {
    background-image: url('../images/bottole_1_4.svg');    
}
.step-50 {
    background-image: url('../images/bottole_2_4.svg');    
}
.step-75 {
    background-image: url('../images/bottole_3_4.svg');    
}
.step-100 {
    background-image: url('../images/bottole_4_4.svg');    
}

    .inv-slider-step {
        height: 100%;
    }
.inv-slider-mark {
    /* border-bottom: 1px solid #306a9b;*/
}
.slider-view {
    display: inline-block;
    border: 1px solid #aaa;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 6px;
}
.mobile-nav{
    display:none;
}
.mobile-nav > img {

}
.radio-group {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-left: 0px;
    
}
.radio-lable {
    display: inline-block;
    margin-right: 10px;
}
.radio-group > legend {
    margin-bottom: 2px;
}
    .form-box {
        display: inline-block;
        margin-left: 10px;
        border: 1px solid #aaa;
        padding: 5px;
        padding-left: 15px;
        padding-right: 15px;
        border-radius: 4px;
    }
.logo-box {
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;        
    width:200px;
}
.logo-only {
    width: 60px;
    padding-top: 6px;
    margin-right: 5px;
    margin-left: 15px;
}
.logo {
    width: 150px;
    margin-right:10px;    
}
.instruction-line.he-il {
    text-align: right;
    margin-top: -10px;
    margin-right: 10px;
}

.instruction-line.en-us {
    text-align:left;
    margin-left:125px;    
    margin-top:-10px;
    margin-bottom:5px;
}
/*###################### GALERY ####################################*/
.galery-wrapper {
    background-color: #100e0e;
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
}
.gallery-tiket {
    background: #212529;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 500px;
    height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.galery-item-name{
    color:#c4cec5;
    width:100%;
    text-align:center;
    margin-right:20px;
    font-size:28px;
    margin-top:20px;
}
.galery-item-brand {
    color: #c4cec5;
    width: 100%;
    text-align: right;
    padding-right: 40px;
    font-size: 20px;
    
}
.gallery-bg {
    position: relative;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-size: cover;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.gallery-bg-1 {
    background-image: url('../images/galery/galery-bg-1.png');
}
.gallery-bg-2 {
    background-image: url('../images/galery/galery-bg-2.png');
}
.gallery-bg-3 {
    background-image: url('../images/galery/galery-bg-3.png');
}
.galery-bottole {
    position: absolute;
    top: 500px;
    left: 660px;
    width: 160px;
    height: 240px;
    background-size: contain;
    background-repeat: no-repeat;
}
.galery-bottole-1 {
    background-image: url('../images/galery/galery-bottle-1.png');
    position: absolute;
    top: 500px;
    left: 660px;
    width: 160px;
    height: 240px;
}
.galery-bottole-2 {
    background-image: url('../images/galery/galery-bottle-2.png');
    position: absolute;
    top: 500px;
    left: 660px;
    width: 160px;
    height: 240px;
}

.galery-items {
    
    margin-bottom: auto;
    border-radius: 6px;
}
.galery-items-1 {    
    margin-left: 250px;
    margin-top: 380px;
}
.galery-items-2 {    
    margin-left: 70px;
    margin-top: 290px;
}
.galery-items-3 {    
    margin-left: 420px;
    margin-top: 250px;
}
.galery-items-4 {    
    margin-left: 320px;
    margin-top: 100px;
}
.galery-items-5 {    
    margin-left: 30px;
    margin-top: 150px;
}
.galery-items-6 {    
    margin-left: 420px;
    margin-top: 320px;
}

.galery-items-7 {    
    margin-left: 110px;
    margin-top: 90px;
}

.galery-items-8 {
    margin-left: 400px;    
    margin-top: 320px;
}

.galery-items-9{
    margin-left: 510px;
    margin-top: 150px;
}

.galery-items-10 {    
    margin-left: 210px;
    margin-top: 250px;
}

    .inventory-item-box-first.galery {
        background-color: #afafaf;
    }
.inventory-brand-title.galery {    
    bottom: 10px;
    left: 30px;    
    padding-left: 10px;
    padding-right: 10px;    
}
.country-flag-position.galery {
    top: 10px;
    left: 35px;
    border:unset;
    box-shadow: unset;
    border-radius: unset;
}
.box-style.hidden {
    display: none;
}
.box-style-title.galery-title {
    top:10px;
    background:unset;
}
.box-style.galery{
    box-shadow:unset;
    border:unset;
}
.carousel-container {
    
    overflow: hidden;
    width: 500px;
    height: 340px;    
}

.carousel {
    display: flex;
    transition: transform 0.3s ease;
}

.carousel-slide {
    flex: 0 0 100%;
}

.galery-imag-catalog {
    width: 220px;
    caret-color: transparent;
    caret: unset;
    min-height: 260px;
    height: 60%;
    display: flex;

    position: absolute;
    bottom: 10px;
    left: 10px;
    background-blend-mode: multiply;
}
.galery-imag {
    
}

/*################## SCROLL BAR START ############################*/

.scroll-content {
    /*
    width: 600px;
    height: 400px;
    */
    margin: 0;
    padding: 0;
    background: white;
    position: relative;
    scrollbar-gutter: auto;
}

.scroll-content-container {
    /*width: 100%;*/
    height: 100%;
    border: 1px solid black;
    overflow: scroll;
}

.scroll-content::after {
    content: "";
    position: absolute;
    width: calc(100% - 6px); /*6px difference from your custom scrollers (1px is from the border)*/
    height: 20px;
    bottom: 6px; /*6px difference from your custom scrollers (1px is from the border)*/
    left: 0;    
    z-index: 1;
}

.scroll-inner {
    height: 220px;    
    background-color: red;
    transform: translateZ(0);
}

::-webkit-scrollbar {
    width: 18px;
    height: 12px;
    display: none;
}

::-webkit-scrollbar-thumb {
    
    border-radius: 0px;
    
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;

}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    
}

/*################## SCROLL BAR END ############################*/
/* TOOLS*/
.act-sort{
    text-decoration:underline;
}
.act-sort:hover{
    cursor:pointer;
}
    .tab-table-col {
        vertical-align: middle;
    }
.ctl-range {
    width: 186px;
}
.ctl-range-value {
    margin-left: 10px;
    margin-bottom: 5px;
    border: none;
    width: 40px;
}
.act-do-link:hover{
    cursor:pointer;
}
.errorMsg {
    width: 90%;
    display: block;
    background-color: lightyellow;
    border-radius: 12px;
    border: 1px solid #aaaaaa;
    box-shadow: 2px 1px 8px 1px #aaaaaa;
    height: 50px;
    margin: 10px;
    padding: 10px;
}

.type-filter-mobile.active {
    background-color: var(--active-bg-color);
    color: var(--active-color);
}
.type-filter-mobile {
    background-color: var(--border-color);
    border: 1px solid #888;
    border: 1px solid #888;
    padding-top: 2px;
    width: 35px;
    text-align: center;
    border-radius: 6px;
    height: 30px;
    margin-right: 5px;
    margin-left: 5px;
    caret-color: transparent;
    caret: unset;
    margin-top: 6px;
    margin-bottom: 5px;
}
.type-filter-mobile:hover{
    cursor:pointer;
}
.type-filter-icon {
    background-image: url('../images/mobile-lines.png');
    /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");*/
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    
}
.act-products {
    padding: .275rem .75rem;
}
.side-menu-view{
    display:flex;
    width:100%;
    flex-direction:row;
    flex-wrap:nowrap;
}
.side-menu-view.he-il{
    flex-direction:row-reverse;
}

.sidenav {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 84px;    
    background: var(--border-color);
    overflow-x: hidden;
    padding-top: 10px;
}
.sidenav2 {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 84px;
    background: var(--border-color);
    overflow-x: hidden;
    padding-top: 10px;
}
.main {
    margin-left: 220px; /* Same as the width of the sidenav */
    margin-right:0;
}
.main.he-il {
    margin-right: 220px; /* Same as the width of the sidenav */
    margin-left:0;
}
.sidenav.he-il {
    direction: rtl;
    right: 0;
}

.sys-filter-box {
    margin: 10px;
    border: 1px solid #c7c5c5;
    border-radius: 12px;
    box-shadow: 2px 2px 8px 1px #5e6063b5;
    position: sticky;
    top: 60px;
    z-index: 299;
    background-color: #d2d5db;
}


    .type-filter-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;        
        row-gap: 10px;
        margin-top:40px;
        /*background-color: var(--tab-bg-color);*/
    }
    .type-filter-section.he-il {
        flex-direction: column;        
    }
.filter-spacer{
    display:block;
    height:10px;
}
.type-filter-box-mobile {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    row-gap: 15px;
    column-gap: 15px;
    margin-left: 10px;
    margin-right: 10px;
}
.filter-header {
    color: var(--filter-color);
    padding: 5px;
    min-width: 80px;
    line-height: 38px;
    caret-color: transparent;
    caret: unset;
    font-size: 24px;    
    font-weight: 300;
    padding-left: 15px;
    padding-right: 15px;
}
.filter-header.he-il {
    text-align: right;    
}
    .filter-header.active {
        font-weight: 400;
        font-size: 26px;
        color:var(--active-color);
    }
    .filter-header:hover {
        cursor: pointer;
    }
    .filter-lable {
        font-size: 14px;
        color: var(--filter-color);
        height: 30px;
    }
.filter-lable.he-il {
    direction:rtl;
}
.btn-add-plus {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    caret-color: transparent;
    caret: unset;
}
.btn-add-plus-text{
    line-height:44px;
    font-size:18px;
    color:var(--filter-color);
}
.btn-add-plus.he-il {
    flex-direction: row-reverse;
}
.btn-plus {
    width: 44px;
    height: 44px;
    background-image: url('../images/btn-plus.png');
    background-size:contain;
    
}
    .btn-plus:hover{
        cursor:pointer;
    }
.filter-divider {
    border-bottom: 2px solid #3d6579;
    height: 10px;
    line-height: 9px;
    margin-left: 15px;
    margin-right: 15px;
}

    


.type-filter-item {
    color: var(--filter-color);
    padding: 5px;
    min-width: 80px;    
    line-height: 38px;
    caret-color: transparent;
    caret: unset;
    font-size: 24px;    
    font-weight: 300;
    padding-left:15px;
    padding-right:15px;
}
.type-filter-item.he-il {    
    text-align: right;    
}

.type-filter-all {
    border: 1px solid #6885af;
    box-shadow: 0px 0px 4px 0px #aaa;
    padding: 5px;
    border-radius: 2px;
    min-width: 80px;
    text-align: center;
    line-height: 30px;
    caret-color: transparent;
    caret: unset;
    background-color: #cbc8b2;
}
.search-icon-box {
    border-right: 2px solid #ddd;
   border-radius:6px;
    background-color: #98a19b;
    width: 43px;
    text-align: center;
    background-color: #c7c7b9;
}
.search-icon {
    max-width: 40px;
    max-height: 40px;
    margin-top: 6px;
    border-radius: 6px;
}
.search-icon:hover{
    cursor:pointer;
}
.inv-search-text {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 4px;
    background-color: #98a19b;
    border-radius: 8px;
    border: 2px solid #dddddd;
    max-width: 174px;
    max-height: 40px;
    margin-top: auto;
    margin-bottom: auto;
}
    .inv-search-text input {
        width: 124px;
        border: none;
        padding: .375rem .75rem;
        line-height: 1.5;
        background-clip: padding-box;
        
        font-weight: 400;
        background-color: #98a19b;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }
.inv-search-text input.he-il {
    direction: rtl;
}
.inv-search-type select {
    width: 174px;    
}
#brand-filter input {
    width: 158px;
    background-color: #98a19a;
}

.filter-imput-bg {
    background-color: #98a19a;
}


.inv-search-brand-filter {
    text-align: left;
    text-indent: 10px hanging;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    max-width: 174px;
}

.type-filter-item:hover {
    cursor: pointer;
    color: var(--active-color);
}

.type-filter-item.active {
    color: var(--active-color) !important;
    background-color: var(--active-bg-color);
}

.type-filter-all:hover {
    cursor: pointer;
}

.type-filter-all.active {
    background-color: var(--active-bg-color);
    color: var(--active-color);
}

h1, h2, h3, h4, h5, h6 {
    caret-color: transparent;
    caret: unset;
}
label {
    caret-color: transparent;
    caret: unset;
}

.back-line {
    border-top: 3px solid #4f5089;
    width: 100%;
    margin-top: 25px;
    padding-top: 10px;
}

/*check mark with circle*/
.checkmark_base_circle {
    display: inline-block;
    width: 22px;
    height: 22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    margin-top:9px;
}
tbody, td, tfoot, th, thead, tr{
    border-color:var(--active-bg-color) !important;
}
.table {
    border-radius: 3px;
}
.system-form-controls {
    background-color: #ededed;
    border-radius:8px;
    padding:10px;
}
.system-form-controls .form-control {
    display: inline-block !important;
    width: 89% !important;
    margin-bottom: 10px;    
}
.system-form-controls .control-label {
    width: 10% !important;
    vertical-align: top !important;
}

.checkmark_circle {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    left: 0;
    top: 0;
}
    .checkmark_circle.all {
        background-color: #946b63;
    }
.checkmark_circle.partial {
     background-color: darkgoldenrod;
}
.checkmark_stem_circle {
    position: absolute;
    width: 3px;
    height: 9px;
    background-color: #fff;
    left: 11px;
    top: 6px;
}

.checkmark_kick_circle {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #fff;
    left: 8px;
    top: 12px;
}


.checkmark_base_circle_l {
    display: inline-block;
    width: 32px;
    height: 33px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: 9px;
    caret-color:transparent;
    caret:unset;
}
.checkmark_base_circle_l:hover{
    cursor:pointer;
}

.checkmark_circle_l.active {
    background-color: var(--border-color);
    box-shadow: 2px 1px 6px 0px #595959;
}
.checkmark_kick_circle_l.active {
    background-color: #fff;
}
.checkmark_stem_circle_l.active {
    background-color: #fff;
}
.checkmark_circle_l {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background-color: #e9e7e7;
    left: 0;
    top: 0;
    box-shadow: 0px 0px 4px 2px #ccc;
}
.checkmark_kick_circle_l {
    position: absolute;
    width: 6px;
    height: 3px;
    background-color: #b9b7b7;
    left: 12px;
    top: 19px;
}
.checkmark_stem_circle_l {
    position: absolute;
    width: 3px;
    height: 14px;
    background-color: #b9b7b7;
    left: 17px;
    top: 8px;
}


/* Check mark*/
.checkmark_base {
    display: inline-block;
    width: 22px;
    height: 22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width: 3px;
    height: 9px;
    background-color: #0f5132;
    left: 11px;
    top: 6px;
}

.checkmark_kick {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #0f5132;
    left: 8px;
    top: 12px;
}


.top-close {
    width: 35px;
    height: 35px;
    border-radius: 8px;
}

/* MODAL & SPIINER */
#popup-image-modal {
}
#image-pop-up {
    
}

#image-pop-up-header{
    text-align:right;
    width:100%;
    float:right;
    color:white;
    margin-right:5px;
    margin-bottom:2px;
    margin-top:-20px;
    font-size:x-large;
}
    #image-pop-up-header:hover{
        cursor:pointer;
    }
    div#spinner {
        display: none;
        width: 130px;
        height: 130px;
        position: fixed;
        top: 50%;
        left: 50%;
        background-color: #fff;
        text-align: center;
        padding: 10px;
        border: 1px solid #666;
        margin-left: -50px;
        margin-top: -50px;
        z-index: 9999;
        overflow: auto;
        -webkit-border-radius: 24px;
        border-radius: 24px;
    }
div#spinnerShow {
    display: block;
    width: 130px;
    height: 130px;
    position: relative;
    background-color: #fff;
    text-align: center;
    padding: 10px;
    border: 1px solid #666;
    z-index: 2;
    overflow: auto;
    -webkit-border-radius: 24px;
    border-radius: 24px;
}
.modal-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--modal-header-bg-color);
    box-shadow: 0px 8px 14px -8px #675f5f;
    border-bottom:unset;
    /*
    opacity: 80%;
    border-bottom: 1px solid #cdbeb44a;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background: linear-gradient(0deg, rgb(13 27 37) 0%, rgb(32 36 55) 50%, rgb(17 23 35 / 95%) 100%);
    color: var(--model-header-color);
    */
}
.modal-header.he-il {
    flex-direction: row-reverse;
}
.modal-header > h1 {
    font-family: 'HelveticaNeueW01-UltLt', 'wf_SegoeUILight', 'wf_SegoeUI', 'Segoe UI Light', 'Segoe WP Light', 'Segoe WP Light', 'Segoe UI', 'Segoe', 'Segoe WP', 'Arial Unicode MS', Arial;
    font-size: 52pt;
    line-height: 60px;
    font-weight: 500;
    color: white;
}
.modal-header > h2 {
    font-family: 'HelveticaNeueW01-UltLt', 'wf_SegoeUILight', 'wf_SegoeUI', 'Segoe UI Light', 'Segoe WP Light', 'Segoe WP Light', 'Segoe UI', 'Segoe', 'Segoe WP', 'Arial Unicode MS', Arial;
    font-size: 32pt;
    line-height: 40px;
    font-weight: 500;
    color: white;
}
.modal-content {
    width: 780px;
    background-color: var(--bg-color);
    border-radius: 10px;
    box-shadow: 0px 0px 2px inset #93939361, 0px 0px 4px rgb(63 63 63);
    border: 5px solid var(--border-color);
}
.modal-body {
    margin-left: 10px;
    min-height:350px;
}
.close {
    background-image: url(../images/close-w.png);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    box-shadow: 0px 4px 8px 0px #3c6271;
    border-radius: 24px;
    border:none;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0px;
}
.remove {
    background-image: url(../images/Remove.png);
    background-repeat: no-repeat;
    width: 48px;
    height: 44px;
    border-radius: 22px;
}
.remove:hover{
    cursor:pointer;
}
    /*  GENERAL SITE GLOBALS  */
    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }
.act:hover {
    cursor: pointer;
}
/* ############## Button Style ############### */
.mybtn {
    min-width: 90px;
    font-weight: 600 !important;
    border: 3px solid #4e6a79;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    box-shadow: 2px 2px 8px 0px #aba4a4d4;
    background-color: var(--btn-bg-color) !important;
    color: var(--btn-color);
    max-width: 250px;
    border-radius:12px;
}
    .mybtn:hover {
        cursor: pointer;        
    }
    .mybtn.save {        
        background-color: #e9ebec !important;
        color: #2f3f47;
    }
    .mybtn.delete {
        background-color: #8f3939cc !important;
        color: #fff;
    }

.link-btn {
    background-color: var(--btn-bg-color);
    color: var(--btn-color);
    text-decoration: none;
    width: 62px;
    height: 28px;
    display: inline-block;
    text-align: center;
    vertical-align: central;
    font-family: Arial;
    font-size: larger;
    box-shadow: var( --bx-shadow-color) 0px 0px 6px 1px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    line-height: 31px;
    caret-color: transparent;
    margin-right: 8px;
    margin-left: 8px;
}
    .link-btn:hover {
        cursor: pointer;
        color: var(--btn-hover-color);
    }
    .link-btn.sign {
        width: 32px;
        height: 32px;
        margin-right: 0px;
        margin-left: 0px;
        background-color: var(--sign-bg-color);
        border: 1px solid #c9bebe;
    }
        .link-btn.sign:hover{
            color:#1c1c51;
        }
        .link-btn.delete {
            background-color: #822222 !important;
            color: #fff;
        }
.link-btn.do {
    color: #0f5132;
}
/* ######################################### */



.inv-type{
    margin-top:10px;
}
.form-box1 {
    display: flex;
    flex-direction:row;
    column-gap:10px;
    border: 1px solid #aaa;
    margin-top: 10px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 4px;
}
    .form-box1.he-il {
        flex-direction: row-reverse;
        column-gap: 25px;
    }
    .list-type-option {
        margin-top: 2px;
    }
.supplier-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 10px;
    padding-top: 14px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #666666;
    box-shadow: 0px 7px 4px -4px #aaa;
}
.inv-item-info{
    display:none;
}
#inventory-control-type.he-il{
    direction:rtl;
}
.inv-edit-fieldset-group{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
}
.inv-edit-comments{
    width:240px;
}
.inv-edit-fieldset-group.he-il {
    flex-direction: row-reverse;
}
    .inv-filed {
        display: flex;
        flex-direction: row;
        column-gap: 5px;
        justify-content: flex-start;
        line-height: 30px;
        vertical-align: middle;
    }
    .inv-filed.he-il {
        flex-direction: row-reverse;
    }
    .inventory-products select {
        max-width: 173px;        
        margin-left:10px;
        margin-right:10px;
    }
.inventory-group-box-side {
    margin-top: -10px;
    width:100%;    
    padding-right:20px;    
}

.opt-rtl.he-il {
    direction: rtl;
}
.itemprice {
    margin-right: 10px;    
}
.inv-comments {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%;
    flex-wrap: nowrap;
}
.inv-comments.he-il{
    text-align:right;
    direction:rtl;
}
    .inv-edit-full-line {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 15px;
    }
    .inv-edit-full-line.he-il{
        flex-direction:row-reverse;
    }
.inventory-edit{
    font-size:18px;
}
.inventory-group-box-side-ref {
    margin-top: -10px;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    height: 100%;
    font-size: 20px;
}
.inventory-item-image-name-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 10px;
    padding:10px;
}
.edit-field-full-line{
    width:100%;
}
.popup-end-margin {
    margin-bottom: 60px;
}
.inventory-item-image-name-group.he-il {
    flex-direction: row-reverse;
}
.inv-info-image-section {
    display: flex;
    flex-direction: row;
    justify-content: center;    
}
.inv-slider-edit-pos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap:15px;
}
.slider-control-box-edit {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100px;
    width:44px;  
    margin-top:auto;
}
.inv-slider-steps-edit {    
    height: 137px;
    width: 35px;
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

.inventory-item-image-group {
    /*
    box-shadow: 0px 0px 5px inset #75595985, 4px 4px 12px rgb(111 99 99 / 60%);
    padding: 5px;
    background-color: #ffffff;
    */
}
.box-style.catalog{
    min-width:420px;
}
.inventory-amount-title {
    position: absolute;
    top: -20px;
    right: 10px;
    width: 105px;
    color: var(--border-color);
    height: 38px;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    background-color: var(--bg-color);
    font-size: 20px;
    font-weight:400;
    line-height: 22px;
    padding-top: 4px;
}
.inventory-amount-title.he-il {
    
    left: 30px;    
}
.inventory-item-name-group {    
    width: 70%;
    max-width: 450px;
    min-width: 345px;
}
.inventory-item-name-group-info {
    width: 65%;    
    max-width: 350px;
    min-width: 345px;
}
.inventory-button-line {
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin-bottom: 7px;
    margin-top: 5px;
}
.inv-item-info-block{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    column-gap:25px;
}
.width100{
    width:100% !important;
}
.inv-comments-header {
    font-size: larger;
    font-weight: 600;
    border-bottom: 2px solid #656556;
    margin-top:15px;
}
.itemName {
    font-size: larger;
    font-weight: 600;
}
.inv-item-info-block.he-il {
    justify-content: flex-end;
    direction: rtl;
}

.inv-static-field {
    font-weight: 600;
}
.itemAge {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 10px;
}
.itemAge.he-il {
    
}
.btn-inv.catalog{
    width:158px;
}
.btn-inv {
    padding-top: 7px;
    box-shadow: #95959582 0px 0px 2px inset, 1px 1px 4px #55555570;
    border: 1px solid #9f9f9f7d;
    min-width: 80px;
    text-align: center;
    caret-color: transparent;
    caret: unset;
    color: var(--filter-color);
    display: inline-block;
    height: 40px;
    margin-top: 6px;
    margin-bottom: auto;
    background-color: var(--border-color);
    border-radius: 6px;
    padding-left: 7px;
    padding-right: 7px;
}
.btn-inv:hover {
    cursor: pointer;
}
.btn-inventory {
    margin-right: 15px;
}
.inventory-order-replace-select {
    margin-top: 15px;
    text-align: center;
    width: 100%;
}
.paheHeaderGroup {
    display: flex;
    align-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
}
.he{
    text-align:right;    
}
.en{
    text-align:left
}
/* checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/images/fi-cwlrxt-none.png);
    background-position: left center;
    background-size: auto 100%;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: right center;
}
.contk {
    display: block;
    position: relative;
    margin-top: 3px;
}

.contk input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.contk input:checked ~ .checkmark {
    background-image: url(/images/fi-cwsuxt-check.png);
    background-position: left center;
    background-size: auto 100%;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: right center;
}
.system-link {
    display: block;
    text-align: left;    
    color:red;
}
.barsys-list{
    margin-bottom:10px;
}
#InventoyList input[type=number] {
    max-width: 78px;
}

.years-btn {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.year-value {
    border: groove 1px rgba(132, 132, 132, 0.18);
    margin: 5px;
    padding: 5px;
    width: 35px;
    text-align: center;
    background-color: #4c74c7;
    color: white;
    border-radius: 6px;
    caret-color: transparent;
    caret: unset;
}
.year-value:hover{
    cursor:pointer;
}

    /* TAB CONTROL*/
.tab-bottom-btn {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    column-gap:20px;
}
.tab-bottom-btn.he-il {    
    flex-direction: row-reverse;    
}

.tbl-link {
    width: 140px;
}
.tab-search-block {
    width: 100%;
    background-color: var(--border-color);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 20px;
    padding-top: 10px;    
    height:80px;
}
    .tab-search-block.he-il {
        flex-direction: row-reverse;
        padding-left: unset;
        padding-right: 20px;
    }
    .tab-containers {    
    box-shadow: inset 0 0 6px rgb(181 142 135 / 39%), 2px 2px 10px 2px rgb(115 95 95 / 17%);
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    padding-bottom: 18px;
    caret-color: transparent;
}
.tabs-header {
    width: 100%;
    display: flex;
    list-style: none;
    flex-direction: row;
    border-bottom: 6px solid var(--active-bg-color);
    margin-top: 10px;
    padding-left: 0px;
    margin-bottom: 0px;
}
.tabs-header.he-il {
    flex-direction: row-reverse;
}
#tab-control {
    
}
.tab {
    text-decoration: none;
    background-color: var(--tab-bg-color);
    width: 140px;
    margin-left: 4px;
    margin-right: 2px;
    height: 38px;
    display: inline-block;
    text-align: center;
    box-shadow: #dcdcdc 2px 2px 9px 3px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    color: var(--tab-color);
    padding-top: 5px;
    box-shadow: 1px -1px 1px 1px #aaa;
    caret-color: transparent;
    caret: unset;
}
.tabactive {
    color: var(--active-color);
    background-color: var(--active-bg-color);
    box-shadow: 1px -1px 1px 1px #5f6a99;
}
.tab:hover {
    cursor: pointer;
}
.table-header-line {
    position: sticky;
    top: 80px;    
    border-bottom-style: groove;
    border-bottom-color: #e3cfca;
    border-bottom-width: 1px;
    box-shadow: 0px 1px 0px 0px #e3cfca;
    background-color:var(--bg-color);
    z-index:2;
}
/* ########## SUMMARY START ######################*/
.summary-img {    
    width: 180px;
    height: 190px;        
    display: flex;
    justify-content: center;
    flex-direction: column;    
    text-align: center;
    align-items: center;
    caret-color:transparent;
    caret:unset;
}
.summary-container {
    display: flex; /* Makes this a true flex container! */
    
    padding: 10px;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    -webkit-border-radius: 20px;
    border-radius: 20px,20px;
    column-gap: 50px;
    row-gap: 25px;
}
.summary-pic{
    width:210px;    
}
.summary-action-link{
    text-align:right !important;    
    padding-right:10px;
    padding-bottom:5px;
}
.summary-header-box div {    
    margin-left: 5px;
    margin-right: 5px;
}
.summary-header-box div.he-il {
    text-align: right;    
}
.summary-header-box div.en-us {
    text-align: left;
}
.summary-header-box {
    
    width:190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
    margin-bottom:10px;
}
.summary-item {    
    min-width: 240px;    
}
.summary-item-box {
    display: flex; /* Makes this a true flex container! */
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;    
}
.summary-item-box-row-first {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.summary-item-box-item {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction:row;
    column-gap:10px;
}
.summary-item-box-item.he-il {
    flex-direction: row-reverse;
}
    .summary-header-title {
        color: darkblue;
        display: block;
    }
.summary-header-title:hover{
    cursor:pointer;
}
.summary-header-item-name {
    color: #1a1a1a;
    font-weight: 500;
    margin-left: 5px;
    font-size: 22px;
    margin:15px;
}
.summary-header-item-value {
    color: var(--box-text-color);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    vertical-align: middle;
    padding-top: 3px;
}
/* ########## SUMMARY END ######################*/
/* ##############  APP HEADER START ##################*/
.app-header {
    
    
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height:100%;
}
.app-header.he-il{
    flex-direction:row-reverse;
}
.app-menu-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    list-style: none;
    flex-wrap: wrap;
    padding-left: 0px;
    margin-block-end: unset;
}
.app-menu-box.he-il {
    flex-direction: row-reverse;
    
}
.app-menu-link {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    line-height: 70px;
}
.nav-link {
    color: var(--btn-color);
}
.nav-link:hover {
    color: var(--active-color);
}
.navbar-brand {
    color: var(--nav-link-color);
}
.nav-header {
    position: sticky;
    top: 0px;
    z-index: 1919;        
    background: var(--border-color);
    height:85px;
}
.nav-item:hover {
    color: var(--active-color);
}
.nav-item a:hover {
    color: var(--active-color);
}
.nav-header.app {

}
.nav-link-cl {
    color: var(--nav-link-color);
}
.nav-header.he-il {
    background-image: linear-gradient(to left, #1c1a1a, #353333);
}
.app-menu {
    margin-left: 20px;    
    min-width: 110px;
    text-align: center;
    font-size: 24px;   
    height:100%;
    /*
    border: var(--menu-border);
    box-shadow: var(--menu-shadow);
    border-radius: 18px;
    background-color: var(--menu-bg-color);
    */
}
.app-menu-link.dark {
    color: #57554e;
}
    .app-menu-link {
    color: var(--filter-color);
    font-weight:300;
}
.app-menu-link:hover {
    color: #92c0d1 !important;
}
.app-menu-link.dark:hover {
    color: #477b8e !important;
}
.app-menu:hover {
    color: #477b8e;
}

.app-menu.active {
    background-color:var(--active-bg-color);
    color: var(--active-color) !important;
}
.app-menu.active > a {
    color: var(--active-color) !important;
}

      
    /* ##############  APP HEADER END ##################*/
    /*  HOME CONTROLER  */
.header-product-link {
    color: var(--box-header-color);
    text-decoration: none;
}
.header-product-link:hover{
    cursor:pointer;
}
.home-schedule-heder-block {
    display: block;
    text-align: left;
    margin-left: 15px;
    margin-top: 10px;
}
.home-schedule-header {
    color: seagreen;
    font-style: italic;
    margin-top: 10px;
    font-size: 1.5rem;
}
.home-schedule-header-new-link {
    color: #626797;
}
.home-icn:hover {
    content: url('../images/home-over.png');
}
.HomeHeaderBox div {
    text-align: left;
    margin-left: 5px;
    margin-right: 5px;
    margin-top:15px;
}
.home-schedule-link {
    color: #626797;
    font-size: larger;
    font-weight: 500;
}
.barinfo {
    flex: content;
    flex-flow: column;
    flex-direction: column;   
}
.BarStatusHeader {
    color: #1a1a1a;
    font-weight: 500;    
    margin-left:5px;    
}
.BarStatusValue{
    color:#2e2d2d;
    font-weight:400;
}
#home-products {
    display: flex;    
    padding: 10px;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    -webkit-border-radius: 20px;
}
#home-products .inventory-item {
    width: 400px;    
    margin-bottom:30px;
}
.HomeHeaderBox {
    display: block;    
    margin-right: 10px;
}
.home-schedule-box
{
    margin-top:10px;
}
.home-schedule-box h5{
    margin-block:0px;
}
.HomeHeader {
    text-align: left;
    margin-bottom: 10px;
    /*justify-content: space-around;*/
    /*background-color:#b9a99f;*/
}

.home-space-header{
    display:block;
    height:40px;
}
.HomeHeaderTitle {
    color: darkblue;
    display: block;
}
.home-status-info-live {
    float: left;
    margin-right: 20px;
    padding-top: 9px;
    margin-left:5px;
}
.home-status-info-lock {
    float: left;
    margin-right: 10px;
}
.home-status-info-line {
    float: left;
    margin-right: 10px;
    margin-top: 7px;
}
.lock-icon-container {
    width: 22px;
    height: 30px;
    margin-right: 15px;
    position: relative;    
}
.lock-icn {
    position: absolute;
    clip: rect(0px, 22px, 30px, 0px);
    left: 2px;
    top: -10px;
}
.lock-icn.active {
    clip: rect(0, 44px, 30px, 22px);
    margin-right: 22px;
    left: -19px;
    top: -7px;  
    }
/* COCKTAIL */
.cocktail-box-wrap {    
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 27px;
    padding-bottom: 32px;    
}
.box-wrap {
    background-color: var(--box-wrap-bg-color);
    box-shadow: 4px 4px 18px 0px #a9a6a6;
    border-radius: 22px;
}

.cocktail-image {
    width: 257px;
    height: 303px;
}
.cocktail-garnish-plus {
    font-size: 30px;
    font-weight: 500;
    color: var(--modal-header-bg-color);
    width: 40px;
    height: 40px;
    background-size: auto;
    background-repeat: no-repeat;
    background-image: url('../images/arrowdown.png');
    display: inline-block;
}
.cocktail-garnish-plus.active {
    background-image: url('../images/arrowup.png');
}

.cocktail-garnish-header {
    margin-top: 10px;
    line-height: 27px;
    color: var(--modal-header-bg-color);
    font-weight: 600;
    font-size: 27px;
}
.cocktail-garnish-data {
    color: var(--modal-header-bg-color);
    font-weight: 600;
}
.cocktail-garnish-header.he-il {
    direction: rtl;
}
  
    .cocktail-garnish-header:hover{
        cursor:pointer;
    }
    .missing {
        color: red;
    }
.cocktail-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.cocktail-details-icon-block {
    display: flex;
    flex-direction: row;
    justify-content: center;    
}
.cocktail-details-icon-block.he-il {
    flex-direction: row-reverse;    
}
.cocktail-detail.he-il {
    flex-direction: row-reverse;
}
.cocktail-detail-text {
    width: 75%;
    padding-right:10px;
    padding-top:30px;
}
.cocktail-detail-img{
    max-width:220px;
}

.cocktail-name-description {
    width:100%;
    padding-left:10px;
    padding-right:10px;
}
.cocktail-name-description-info {
    display: flex;
    flex-direction: column;
    column-gap: 10px;
    justify-content: space-evenly;      
    margin-left:10px;
}
.cocktail-name-description-info-col {
    display: flex;
    flex-direction: row;
    row-gap: 0px;
    justify-content: flex-start;
    padding-top: 5px;
}
.cocktail-name-description-info-col-block{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100px;
}
.cocktail-name-description-info-col.he-il {
    flex-direction: row-reverse;
}
.pipeeadge {
    border-left: 2px inset var(--border-color);
    padding-left: 10px;
    padding-right: 10px;
    border-right: 2px outset var(--border-color);
}
.cocktail-name-description-info-col-val {    
    margin-bottom: auto;
    font-size:18px;
    font-weight:500;
}
.cocktail-name-description-info-col-val.he-il {
    text-align: right;
}

.cocktail-name-description-info-col-lable {    
    margin-bottom: auto;
    margin-top: auto;
    border-bottom: 2px solid var(--border-color);
    font-size: 16px;
}
.cocktail-name-description-info-col-lable.he-il {
    text-align:right;
}

    .popup-close {
            
    caret-color: transparent;
    caret: unset;    
    margin-bottom:auto;
}
    .popup-close:hover{
        cursor:pointer;
    }
    .popup-close > span {
      
    }

    .cockail-info-header.brown {
        background: linear-gradient(0deg, rgb(153 89 23 / 50%) 0%, rgb(123 74 24 / 69%) 63%, rgb(127 81 17 / 76%) 100%);
        color: #fbefd8;
    }
.lblitemname.brown {
    color: #f9cbbc;
}

.cockail-info-header.yellow {
    background: linear-gradient(0deg, #e3d5ae96 0%, #e9e74db0 50%, #cdcb2bc7 100%);
}
.lblitemname.yellow {
    color: #37340e;
}

.cockail-info-header.red {
    background: linear-gradient(0deg, rgb(233 95 88 / 68%) 0%, rgb(221 73 40 / 70%) 50%, rgb(229 46 25 / 66%) 100%);
    color: #ffe7e7;
}
    .lblitemname.red {color: #fbe6b5;}

.cockail-info-header.orange {
    background: linear-gradient(0deg, #e9c079a8 0%, #e3b25a9c 50%, #e1a43ab5 100%);
    color: #181714;
}
    .lblitemname.orange {color: #ffde7c;}

.cockail-info-header.clear {
    background: linear-gradient(0deg, #f5f2ed6e 0%, #f5ecdc78 50%, #f9f9f991 100%);
}
    .lblitemname.clear {color: #333;}

.cockail-info-header.green {
    background: linear-gradient(0deg, #bbe3ae96 0%, #71e94db0 50%, #6be33cc7 100%);
}
.lblitemname.green {
    color: #003900;
}

.cockail-info-header.pink {
    background: linear-gradient(0deg, rgb(170 148 179 / 54%) 0%, rgb(140 80 165 / 72%) 50%, rgb(221 72 239 / 77%) 100%);
}
    .lblitemname.pink {color: #edd8f3;}

.cockail-info-header.white {
    background: linear-gradient(90deg, #fbfbfb96 0%, #ffffff9c 50%, #ffffffd6 100%);
}
    .lblitemname.white {color: #610505;}

.cockail-info-header.blue {
    background: linear-gradient(0deg, #c0caef96 0%, #156be98a 50%, #2e62dfd6 100%);
    color: #fff;
}
.lblitemname.blue {color: #c2c9f1;}    
.lblitemname.peach {color: #ededd8;}

.cockail-info-header.rainbow {
    background: linear-gradient(0deg, rgb(131 58 180 / 79%) 0%, rgb(253 29 29 / 55%) 50%, rgb(252 176 69 / 74%) 100%);
    color: #fdfdfd;
}
    .lblitemname.rainbow {color: #f9dbdb;}

.cockail-info-header.black {
    background: linear-gradient(0deg, rgb(65 57 57 / 54%) 0%, rgb(71 59 56 / 72%) 50%, rgb(33 28 27 / 77%) 100%);
    color: white;
}
    .lblitemname.black {color: wheat;}

.cockail-info-header.purple {    
    background: linear-gradient(0deg, #e6a8c791 0%, #e6a8c791 50%, #e6a8c791 100%);
}
    .lblitemname.purple {color: #f6d5f9;}

.cockail-info-header.black-dark {
    background: linear-gradient(0deg, rgb(24 24 24) 0%, rgb(0 0 0) 50%, rgb(28 25 24 / 95%) 100%);
    color: white;
}


.cockail-info-header {
    
}
.cocktail-edit-fields {
    direction: rtl;
    max-width: 500px;
}
.cocktail-edit-en {
    direction: ltr;
    margin-bottom: 10px;
}
.cocktail-area{
    width:700px;
}
.my-cocktail-dd {
    max-width: 200px;
    min-width: 200px;
    margin-bottom: 10px;
}
.cocktail-recipe {
    text-align: center;
    width: 100%;    
    color: var(--box-header-color);
    font-size:20px;
    margin-bottom:20px;
    height:60px;
}

.cocktail-name-link {
    text-decoration: none !important;
    color: var(--box-text-color) !important;
    font-size: 26px;
    text-shadow: 1px 1px #aaa;
}
.coctail-images {
    display: flex;
    flex-direction: row;
    justify-content: center;        
    margin: 10px;    
    caret-color: transparent;
    caret: unset;    
}

.coctail-image-part img {
    height: 130px;
    margin-left:5px
}
.cocktail-description {
    max-height: 270px;
    overflow: auto;
}
.coctail-recipe-row-subType {
    margin-right: 15px;
}
.coctail-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.coctail-item-missing{
    color:darkred;
    font-weight:700;
    font-size:larger;
}
.cocktail-name {
    width: 100%;
    position: absolute;
    top: -24px;
    background-color: var(--box-wrap-bg-color);
    width: auto;
    right: 15px;
    padding-left: 5px;
    padding-right: 5px;
}
.coctail-image{
    width:30px;    
}
.coctail-recipe-row {
    display: flex;
    flex-direction: row-reverse;
    justify-items: flex-start;
    flex-wrap: wrap;
    column-gap:6px;
    font-size:22px;
}
.coctail-recipe-row.en-us {
    display: flex;
    flex-direction: row;
}
.coctail-recipe-row.he-il {    
    flex-direction: row-reverse;    
    margin-left: 10px;
}
.he-il{
    text-align:right;    
}
.instruction-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.instruction-line {
    font-size: 20px;
    font-weight: 500;
}
.instruction-list.he-il {
    direction: rtl;
}
    .lblitemname.he-il {
        direction: rtl;
    }
.lblinstruction.he-il {
    direction: rtl;
}
textarea.he-il {
    direction: rtl;
    text-align: right !important;
}
input[type=text].he-il {
    direction: rtl;
    text-align: right !important;
}
.coctail-recipe-row-item {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    column-gap:8px;
}
.coctail-recipe-row-item.he-il {
    flex-direction: row-reverse;
}
.coctail-recipe-row-check{    
    width:20px;
}
.coctail-recipe-row-qty {    
    
}
.coctail-recipe-row-qty-rap{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    column-gap:2px;
    min-width:55px;
}
.coctail-recipe-row-qty-rap.he-il {
    flex-direction: row-reverse;
}
.coctail-recipe-row-qtytype {
    font-size: small;
    margin-top: auto;
}
.lblitemname {
    
    text-align:center;
}
.lblinstruction {    
}

h1.lblitemname {
    width:auto;
    text-decoration:underline;
    text-shadow:2px 2px #aaaaaa;
    color:#353162;
}
.coctail-recipe-row-note {
    color: #7e5e7e;
    font-size: smaller;
    font-weight: 600;
}
.coctail-recipe-row-note-star {
    color: #223072;
    margin-left: 5px;
    margin-right: 5px;
    font-size: large;
    font-weight: 700;
    margin-top:-3px;
}
.coctail-recipe-item-header {
    display: block;
    font-size: x-large;
    font-weight: 700;
    color: #bd4335;
    border-radius: 6px;
    box-shadow: #e8e7e7 1px 4px 12px 0px;
    padding-left: 9px;
    padding-bottom: 7px;
    padding-right: 10px;
    width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;
    background-color: #531f1a36;
}
.coctail-container {
    display: flex; /* Makes this a true flex container! */    
    padding: 10px;
    flex-direction: column;
    justify-content: flex-start;    
    flex-wrap: wrap;
    -webkit-border-radius: 20px;
    border-radius: 20px,20px;
}
.cocktail-recipe-page-header{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
}
.cocktail-recipe-page-header-link {
    float:left;        
    width: 150px;
    font-size: larger;
}
.cocktail-recipe-page-header-name {
    width:100%;
    text-align:center;
}
/* BASKET */
.btn-basket-next {
    background-color: #287017;    
    color: white !important;
    min-width: 120px !important;
    font-weight: 600 !important;
    border-color: #121212;
    max-width: 150px;
}
.btn-basket-back {
    background-color: #5b1111;
    margin-right:20px;
    min-width:90px;
}
    .basket-next {
        display: block;
        width: 100%;
        text-align: center;
    }
.order-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom:10px;
    padding-left:20px;
}
.order-header.he-il {
    justify-content:flex-end !important;
}
.order-header-line span{
font-weight:600;
margin-right:5px;
color:black;
}
.order-header-suppliername {
    width: 100%;
    font-size: large;
    font-weight: 600;
}
    .order-header-suppliername.he-il {
        text-align: right;
        margin-right: 5px;
    }
.order-header-line{
    margin-right:10px;
    color:darkblue;
}
/*  SUPPLIER LIST   */
.inventory-supplier {
    display: inline-block;
    padding: .375rem .75rem;
    border-radius: .25rem;
}
.supplier-item-box-item.he-il {
}
.supplier-item-description {
    border-top: solid 1px #c9c9c9;
    border-bottom: solid 1px #c9c9c9;
    margin-right: 8px;
    padding: 5px;
    background-color: #f8f8f8;
    box-shadow: #fef6f6 2px 2px 3px 1px;
    width: 100%;
}
    .supplier-item-description.he-il {
        width: 100%;
        text-align: right;
    }
.supplier-item-name {
    width: 100%;
    text-align:center;
    font-size:larger;
    font-weight:600;
}
.supplier-item-type {
    width: 100%;
    text-align: center;
}
.supplier-item-price {
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: larger;
}
.basket-total {
    display: flex;
    flex-direction: row;
    font-size: larger;
    font-weight: 600;
    width: 100%;
    margin-top: 10px;
    box-shadow: #d3d4d9 1px 1px 10px 1px;
    border-radius: 16px;
    padding: 10px
}
.basket-total-lable{
    margin-right:8px;
}
.basket-total-value {
    color: #8b1723;
    font-size: x-large;
    margin-top: -4px;
}

/*  INVENTORY LIST   */
.inv-type {
    display: inline-block;
    
}
.edit-ref-line{
    display:flex;
    flex-flow:row;
    margin-top:10px;
    width:100%;
    row-gap:5px;
    column-gap:25px;
}
.field-price {
    max-width: 85px;
    margin-left: 0px;
}
.field-number {
    max-width: 95px;
    margin-left: 0px;
    padding-top: 0.35rem;
    padding-right: 0.2rem;
    padding-bottom: 0.35rem;
    padding-left: 0.2rem;
}
.cocktail-ingrediant-info {
    margin-left: 15px;
    margin-right: 15px;
}
.inv {
    display: inline-block;
}
    .inv > select {
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: var(--control-bg-color);        
        background-clip: padding-box;
        border: 1px solid #ced4da;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        width: fit-content;
       /* max-width: 220px;*/
        display: inline-block;
    }
.cmd-inventory-stock-plus {
    color: #106f0f;
}
.cmd-inventory-stock-minus {
    color: firebrick;
}
.cmd-inventory-cnt-plus {
    color: #106f0f;
}
.cmd-inventory-cnt-minus {
    color: firebrick;
}
.stl-inventory-create {
    text-decoration: underline;
    color: darkblue;
    font-size: larger;
}
.stl-home-create {
    text-decoration: underline;
    color: var(--header-color);
    font-size: larger;
}
.act-home-create:hover {
    cursor: pointer;
}
.stl-inventory-create:hover {
    cursor: pointer;
}
#picUpload {
    margin-bottom: -30px;
}
output {
    opacity: 100%;
    height: 1px;
    overflow: hidden;
}
.upload-picture {
    height: 1px;
    opacity: 100%;
}
.upload-picture-lable {
    font-size: larger;
    font-weight: 600;
    color: #172f68;
    text-decoration: underline;
}
#files {
    opacity: 0;
    width: 1px;
    height: 1px;
}
.inventory-edit div.img {
    margin-right: auto;
    margin-left: auto;
}
.inventory-edit div.imgedit {
    text-align: center;
    max-height: 260px;
    margin-right: auto;
    margin-left: auto;
}

.inventory-edit .form-control {
    display: inline-block !important;
    border: var(--control-border);
    /*width: auto !important;*/
    text-align: left;
    min-width: 220px;
}
.users  .form-group {
    margin-block: 8px;
}
.form-control {
    background-color: var(--control-bg-color);
    border: var(--control-border);
}
.my-form-control {
    display: inline-block;
    padding: .375rem .5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: var(--control-bg-color);
    background-clip: padding-box;
    border: var(--control-border);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.inventory-edit .control-label {
    display: inline-block !important;
    width: 20% !important;
    text-align: left;
}
.inventory-edit .form-group {
    
}
.inventory-dd {
    appearance: auto !important;
    -webkit-appearance: auto;
    min-width: 100px;
}

.inventory-item-type {
    display: flex;
    flex-flow: column;
    text-align: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;    
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
    .inventory-item-type.he-il {
        text-align:right;
    }
    .inventory-item-type .lbl {        
        margin-right: 2px;        
    }

    .inventory-item-type .val {
        font-weight: 600;
    }
    .inventory-item-type .line {
        display:block;
        width:100%;
    }
.active-lable {
    color:var(--filter-color);
    font-size: smaller;    
    text-align:center;    
    line-height:12px;
}
.open-qty-ctl {
    border: 1px solid #aaa;
    text-align: center;
    border-radius: 6px;
    min-width: 60px;
    padding: 0px;
    caret-color: transparent;
    caret: unset;
}
.open-qty-ctl.active {
    font-weight: 700;
    color: darkred;
}
.coctail-like-ctl.active {
    font-weight: 700;
    color: darkred;
}
.open-qty-box {
    background-color: var(--bx-info-color);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 10px;
    border-radius: 6px;    
    line-height: 40px;    
}
#coctail-like-ctl-img {
    box-shadow: #b9bcd7 0px 0px 4px 1px;
    padding: 11px;
    width: 55px;
    border-radius: 27px;
    background-color:#eeeef1;
    
}
.cocktail-like-box {
}
.cocktail-like-box he-il {
    text-align:right;
}
.cocktail-item {
    min-width: 360px;
}
.cocktail-item-box {
    display: flex; /* Makes this a true flex container! */    
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;    
    padding-bottom:30px;
}
/* INVENTORY LIST BOX ITEMS STYLE */
.inv-qty-stock-row{
    margin-top:10px;
    display:flex;
    flex-flow:row;
    justify-content:center;
}
.list-qty-edit {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: auto;
    margin-bottom: auto;
    column-gap: 10px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.inv-qty-stock-qty {
    display: flex;
    height: 60px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.cocktail-box-first-row {
    width: 100%;
    margin-right: 10px;
    display:flex;
    flex-direction:column;    
}
.inv-qty-stock-stock {
    width: 50px;
    

}
.inv-stock-preferences {   
}
    .inv-stock-preferences.active {
        font-weight: 700;
        color: darkred;        
    }
#inv-stock-preferences-img {    
    padding: 9px;
    width: 45px;    
    margin-top:-6px;
}
#inv-stock-preferences-img:hover{
    cursor:pointer;
}

.inventory-container {
    display: flex; /* Makes this a true flex container! */

    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    -webkit-border-radius: 20px;
    border-radius: 20px,20px;
    row-gap: 80px;
    column-gap: 28px;
    margin-top:40px;
}
.tab-container {
    display: flex; /* Makes this a true flex container! */

    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    -webkit-border-radius: 20px;
    border-radius: 20px,20px;    
    column-gap: 28px;
}
.inv-header-Line {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;    
    box-shadow: 0px 8px 8px -8px #868686;
    color: var(--border-color);
    border-bottom: 3px solid var(--active-bg-color);
    font-weight: 700;
    font-size: 36px;        

}
.inv-header-Line.he-il {
    justify-content: flex-end;
}
.inventory-container.he-il {
    flex-direction: row-reverse;
}
.tab-container.he-il {
    flex-direction: row-reverse;
}
.catalog-items {
    margin-top: 10px;
}
.box-style {
    /*
    background-color: var(--box-bg-color);
    box-shadow: inset 0 0 6px rgb(181 142 135 / 39%), 2px 2px 10px 2px rgb(115 95 95 / 17%);
    border-radius: 22px;
    border: 1px solid #99939399;
     */
    border: 4px solid var(--border-color);
    border-radius: 6px;
    position: relative;
    box-shadow:  2px 4px 4px 0 #9f9d9d;
}
.inventory-item {
    max-width: 360px;
    min-width: 360px;
    position: relative;
    min-height: 320px;
}
.inventory-item-box-first {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
    row-gap:15px;
    
}
.inventory-item-box {
    width: 100%;        
    height: 100%;
}
.inventory-item-box-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    text-align: left;
    width: 100%;    
    height:280px;
}
    .inventory-item-box-item.he-il {
        text-align: right;
    }
.inventory-brand-title {
    position: absolute;
    bottom: -20px;
    left: 30px;
    border: 3px solid #2f3f47;
    border-radius: 12px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #d9d9d2;
    height:38px;
    font-size:20px;
}
.inventory-supplier-item-name {
    text-align: center;
    width: 100%;
}
.inventory-supplier-item-notavailable {
    text-align: center;
    width: 100%;
    color:darkred;
    font-weight:600;
}
.inventory-dl {
    text-align: center;
    position: relative;
    margin: auto;
    width: auto;
}
dt.inventory-row {
    text-align: center;
    font-weight: 400;
    width: 26.9%;
    padding-left: 3px;
    color: #626797;
}
dd.inventory-row {
    text-align: center;
    font-weight: 400;
    width: 72.9%;
    float: left;
    text-align: left;
}
/*the + - buttons line*/
.act-inventory-cnt{
    /*margin-left:30px;*/
}
.cmd-inventory-qty {
    appearance: auto !important;
    -webkit-appearance: auto;
    max-width: 150px;
}


.inventory-item-box-item > img:hover{
    cursor:pointer;
}
.inv-img-box {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    caret: unset;
    caret-color: transparent;
}
.inventory-item-imag-catalog {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 5px;
    caret-color: transparent;
    caret: unset;
    margin-top: 30px;    
}
.inventory-item-imag {
    width: 100%;
    caret-color: transparent;
    caret: unset;
    min-height: 260px;
    height: 100%;
    display: flex;
}
    .inventory-item-imag.he-il {
        justify-content: flex-end;        
        
    }
    .image-enlarge-img {
        mix-blend-mode: multiply;
        width: 20px;
    }
.image-enlarge {    
    position: absolute;    
    left: 20px;    
    bottom: 30px;
    opacity: 20%;
    text-align: right;    
    padding-right: 10px;
    caret-color: transparent;
    caret: unset;
}
.image-enlarge.he-il{
    left:10px;
    right:unset;
}
    .image-enlarge:hover {
        cursor: pointer;
    }
    input[type=range] {
        /*
    writing-mode: vertical-lr;
    direction: rtl;
    width: 26px;
    */
        vertical-align: bottom;
        accent-color: #6a83cf;
        appearance: auto;
    }
.inventory-item-qty-slider{
    width:10%;
    position:relative;
    top:120px;
    left:12px;
}
.inv-qty-details {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    padding: 0 5px;
    flex-direction: column;
    writing-mode: vertical-lr;
}
.range-slider-vertical {
    transform: rotate(-90deg);
}
.img-inventory-details {
    max-height: 250px;
    height: auto;
    mix-blend-mode: multiply;    
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.img-inventory-details-icon {
    max-height: 60px;
    height: auto;
    mix-blend-mode:multiply;

}
.img-inventory-details-icon:hover{
    cursor:pointer;
}
.filter-heder-plus-line{
    display:flex;
   flex-direction:row-reverse;
   justify-content:space-between;  
   width:100%;   
}
.filter-heder-plus-line.he-il{
   flex-direction:row;
}
.filter-section-plus {
    font-size: 30px;
    font-weight: 500;
    color: var(--modal-header-bg-color);
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/arrowdown-w1.png');
    display: inline-block;
    line-height: 28px;
    margin-right: 10px;
    margin-left: 10px;
}

.filter-section-plus.active {
    background-image: url('../images/arrowup-w1.png');
}
.inv-search-filter-box.app {    
    top: 0px    
}
.sys-inv-search-filter-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 15px;
    row-gap: 15px;
    position: sticky;
    top: 52px;
    padding-bottom: 10px;
    width: 100%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: fit-content;
}
    .sys-inv-search-filter-box.he-il {
        flex-direction: row-reverse;
    }
.inv-search-filter-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 15px;
    row-gap: 15px;
    position: sticky;
    top: 52px;
    padding-bottom: 10px;
    width: 100%;
    padding-top: 30px;
    padding-left:10px;
    padding-right:10px;   
}
    .inv-search-filter-box.he-il {        
        flex-direction: row-reverse;
    }

    .inv-search-filter-box.app {
        top: 0px
    }

    .inv-search-filter-box.sys {
        top: 51px !important;
    }
.catalog-header {
    display: flex;

    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    vertical-align: central;
}

.sys-catalog-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    vertical-align: central;
}
.catalog-header-wrap {
    background-color: var(--tab-bg-color);
    width: 100%;
    border-bottom: 2px solid #7c0e0b;
    position:sticky;
}
.home-add-new-product {
    display:flex;
    flex-direction:row;
    background-color: var(--tab-bg-color);
    row-gap:15px;
    column-gap:15px;
    width: 100%;
}
.inv-search-item-count {
    background-color: #adadad;
    border-radius: 4px;
    padding-left: 5px;
    padding-right: 5px;
    color: #0c0c0c;
    height: 30px;
    margin-top: 6px;
    padding-top: 2px;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
}
.inv-search-type {
    display: inline-block;
}
.inv-search-brand {
    display: inline-block;
    /*
    margin-left:5px;
    margin-right:5px;
        */
    max-width:180px;
}
.inv-search-new {
    display: inline-block;
}
.act-do-popup:hover{
    cursor:pointer;
}
.cocktail-marks {
    position: absolute;
    bottom: -27px;
    left: 0px;
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    column-gap:4px;
}

.cocktail-list-icons {
    width: 54px;
    height: 54px;
}
.cocktail-detials-icons {
    width: 64px;
    height: 64px;
}

.filter-icon{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    column-gap:10px;
}
.filter-icon.he-il{
    flex-direction:row-reverse;
}
.filter-icon-flavor {
    width: 38px;
    height: 38px;
}
.filter-icon-strength {
    width: 38px;
    height: 38px;
}
.filter-icon-difficulty {
    width: 38px;
    height: 38px;
}
.Bitter {
    
    background-image: url('../images/taset-g.svg');
}
.Sour {
    background-image: url('../images/taset-y.svg');
}
.Sweet {
    background-image: url('../images/taset-p.svg');
}
.Savory {
    background-image: url('../images/taset-b.svg');    
}

.Gentle {
    background-image: url('../images/Gentle.svg');
}

.Neutral {
    background-image: url('../images/Neutral.svg');
}

.Boozy {
    background-image: url('../images/Boozy.svg');
}

.Beginner {
    background-image: url('../images/Beginner.svg');
}

.Intermediate {
    background-image: url('../images/Intermediate.svg');
}

.Advanced {
    background-image: url('../images/advanced.svg');    
}

.cocktail-Like {
    width: 40px;
    height: 40px;
    position: absolute;
    top: -21px;
    left: 40px;
    background-image: url('../images/dislike.svg');
    background-size:cover;
    caret-color: transparent;
    caret: unset;
}
.cocktail-Like:hover{
    cursor:pointer;
}
.cocktail-Like.like {
    background-image: url('../images/like.svg');
}
.cocktail-Check {
    width: 40px;
    height: 40px;    
    position: absolute;
    top: -21px;
    left: 85px;    
    caret-color: transparent;
    caret: unset;
    display: none;
}

.cocktail-Check:hover {
    cursor: pointer;
}

.cocktail-Check.check {
    background-image: url('../images/check.svg');
    display: unset;
}


    .cocktail-item-link {
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: #fdfbfb; /* var(--box-text-color);*/
        font-family: 'IBM Plex Sans Hebrew', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: large;
        margin-top: 1px;
        caret-color: transparent;
        caret: unset;
        word-wrap: normal;
        max-width: 255px;
        height: contain;
        line-height: 31px;
    }
.master-info-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    padding-right: 10px;
    padding-left: 15px;
    padding-bottom: 25px;
    font-size:20px;
    margin-bottom:40px;
}
.master-info-block.he-il {
    justify-content: flex-end;
    direction: rtl;
    padding-right: 15px;
    padding-left: 10px;
}
.master-inventory-item-link {
    position: absolute;
    left: 10px;
    top: -20px;
    width: auto;        
    max-width:270px;
   
}
.master-inventory-item-link.he-il {
   right: 10px;
}
.item-name-en {    
    font-size: inherit;
    display: block;
    word-wrap: normal;
    text-align:center;    
}
.master-name-years {
    text-decoration: none;    
}

    .master-name.en-hi{
        text-align:right;
    }
.box-style-title {
    text-decoration: none !important;
    color: var(--border-color) !important;
    font-size: 20px;
    text-shadow: 1px 1px #aaa;    
    font-weight: 500;
    caret-color: transparent;
    background-color: var(--bg-color);
    padding-left: 5px;
    padding-right: 5px;
}

.inventory-item-link {    
    position: absolute;
    right: 20px;
    top: -20px;
    width: auto;    
    max-width:290px;
}
.inventory-bylist-item-link {
    color: #0c4b8b;    
    font-weight: 500;
    margin-block: 5px;
    caret-color: transparent;
    caret: unset;
    text-decoration: underline;
}

.inventory-dl {
    margin-bottom: 0px !important;
}
.inventory-qty-close {
    text-align:center;
    margin-top: auto;
    margin-bottom: auto;
}

/* INVENTORY SERACH BOX */
.inventory-search-box {
    display: flex; /* Makes this a true flex container! */
    
    padding: 10px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    row-gap: 15px;
}
.inventory-search-box-item {
    display:flex;
    flex-direction:column;
    row-gap:5px;
    justify-content:flex-start;    
    min-width:85px;
    height:60px;
    margin-left:10px;
}
.inventory-search-box-item-search {
    margin-left: 10px;    
    position: relative;
    min-width: 30px;
}

.inventory-active-icn:hover {
    cursor:pointer;
}
.inventory-active-icn.active {
    clip: rect(38px, 80px, 76px, 0);
    top: -38px;
}
.inventory-active-icn {
    position: absolute;
    clip: rect(0, 80px, 38px, 0);
    top:0px;
    left: 0px;
}
.enlarge2 {
    caret-color: transparent;
    caret: unset;
}
.enlarge2:hover {
    cursor: pointer;
}
.buy-wrap {
    max-width: 800px;
    min-width: 800px;
    min-height: 300px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;    
}
.buy-image-enlarge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    opacity: 20%;
    text-align: right;
    padding-right: 10px;
    caret-color: transparent;
    caret: unset;
}
.box-style.recomendation {
    border-color: var(--active-bg-color);
}
.box-style-title .recomendation {
    color: var(--active-bg-color);
    
}
.filter-header.buy.active {
    color: var(--active-color) !important;
    background-color: var(--active-bg-color);
    font-weight:300;
}
.buy-list-divider {
    display: block;
    width: 100%;
    height: 40px;
    max-width: 800px;
    margin: auto;
    margin-top: 20px;
}
.buy-list-divider-line {
    border-top: 4px solid var(--active-bg-color);
    box-shadow: 0px 4px 8px 0px #939393;
    margin-left: 15px;
    margin-right: 15px;
}
.buy-list-divider-text {
    margin-left: 15px;
    font-size: 24px;
    font-weight: 700;
    color: var(--active-bg-color);
}
.buy-list-divider-text.he-il {
    margin-left: unset;
    margin-right: 15px;
}
.buy-item-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    row-gap: 35px;
    margin-top: 75px;
}
.buy-item {
    max-width: 760px;
    min-width: 760px;
    position: relative;
    min-height: 260px;
    margin-left:auto;
    margin-right:auto
}
.buy-item-header {
    position: absolute;
    left: 10px;
    top: -20px;
    width: auto;
    background-color: var(--box-wrap-bg-color);
}
.buy-item-header.he-il{
    direction:rtl;
     right: 10px;
}
.buy-item-box {
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    width: 100%;
    column-gap:10px;
}    
.buy-item-box .bx-picturre {
    width: 270px;
    caret-color: transparent;
    caret: unset;
    min-height: 260px;
    height: 100%;
    display: flex;
}
.buy-item-box .bx-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    padding-right: 10px;
    padding-left: 15px;
    padding-bottom: 25px;
    font-size: 20px;
    margin-bottom: 40px;
    margin-top: 20px;
    caret-color: transparent;
    caret: unset;
}
    .buy-item-box .bx-info.he-il {
        justify-content: flex-end;
        direction: rtl;
        padding-right: 15px;
        padding-left: 10px;       
    }
    .buy-item-box .bx-remove {
        display: flex;
        height: 100%;
        margin-top: 20px;
        margin-left: 15px;
        margin-right: 15px;
        caret-color: transparent;
        caret: unset;
    }
.buy-item-box.he-il {
    flex-direction: row-reverse;
}
.buy-item-box .bx-add {
    width: 90px;
    display: contents;
    height: 100%;
    padding-right: 25px;
}
.buy-qty-edit {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: auto;
    margin-bottom: auto;
    margin-left:40px;
    position:relative;
}
.buy-qty-edit.he-il {
    margin-left:unset;
    margin-right: 40px;
}
.buy-qty-text{
    font-size:32px;
    height:105px;
    width:80px;
    text-align:center;
    line-height:60px;    
    box-shadow:2px 2px 8px 1px #888;
    border-radius:18px;
    background-color:#fff;
    z-index:6;
    display:flex
}
.trush {
    width: 44px;
    height: 48px;
    background-color: #e9b2b26b;
    background-image: url('../images/trush4.png');
    background-position: center;
    border-radius: 8px;
    background-repeat: no-repeat;
    border: 1px solid #d39fc58a;
    box-shadow: 2px 2px 8px 0px #cec6c6;
    
}
    .trush:hover {
        cursor: pointer;
    }
    .buy-qty-text-num {
        margin: auto;
    }
.buy-price{
    font-size:22px;
    font-weight:500;
    color:var(--active-bg-color);
}
.buy-price.he-il{

}
    .buy-plus {
        position: absolute;
        right: 18px;
        top: -22px;
        z-index: 8;
        box-shadow: 2px 2px 8px 1px #888;
        border-radius: 22px;
    }
.buy-minus {
    position: absolute;
    right: 18px;
    bottom: -22px;
    z-index: 8;
    box-shadow: 2px 2px 8px 1px #888;
    border-radius:22px;
}



.buylist-active-icn {
    position: absolute;
    clip: rect(38px, 80px, 76px, 0px);
    top: -36px;
}

.buylist-active-icn:hover {
    cursor: pointer;
}
.image-box-clip{
    position:relative;
}


.inventory-search-box-search {
    min-width: 120px;
}
#src_active:hover {
    cursor: pointer;
}
.inventory-search-box-search-button {    
    box-shadow: rgb(220, 220, 220) 0px 0px 6px 1px;
    background-color: rgb(248, 248, 248);
    border-radius: 10px;
    padding: 5px;
}
.inventory-search-box-search-button:hover
{
    cursor:pointer;

}
.inventory-search-box button {
        background-color: #36721e; /* Green */
    border: none;
    color: white;
    padding: 3px 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}

/* KEY PAD START */
.keypad-layout {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
}
.keypad-wrapper {
    width: 100%;
}
.keypad-wrapper input {
    font-size: 20px;
    color: #1f1d1d;
    font-weight: 400;
}
.keypad-wrapper input.number-input {
    width: 100%;
    height: 55px;
    line-height: 55px;
    text-align: center;
    padding: 0 20px;
    border-radius: 10px;
    border: 0;
    -webkit-box-shadow: 8px 13px 13px 0px rgb(132 132 132 / 29%);
    -moz-box-shadow: 8px 13px 13px 0px rgb(132 132 132 / 29%);
    box-shadow: 8px 13px 13px 0px rgb(132 132 132 / 29%);
}
.keypad-wrapper .keypad-pannel {
    width: auto;
    margin: 0px auto 0 auto;
}
.keypad-wrapper .keypad-pannel span.title {
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    text-align: center;
    font-size: x-large;
}
.keypad-wrapper .keypad-pannel .lighttitle {
    margin-left: 0px;
}
.keypad-wrapper .keypad-pannel .keypad-container {
    width: 100%;
    margin-top: 30px;
}
.keypad-wrapper .keypad-pannel .keypad-container .alertmsg {
    color: red;
    font-size: x-large;
}
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons {
    margin-top: 40px;
    padding-top: 20px;
}
/*   Number Pad/Access Code   */
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .number {
    width: 380px;
    font-size: 0;
    text-align: center;
}
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .number.aling-right {
    text-align: right;
    width: 100%;
}
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .number span {
    font-size: 32px;
    color: #4f4c49;
    display: inline-block;
    width: 33%;        
    text-align: center;
    margin-bottom: 25px;
}
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .number span i {
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #ffffff;
    cursor: pointer;
    border-radius: 100%;
    transition: 250ms;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-shadow: 5px 5px 20px 1px #6b6962;
    -moz-box-shadow: 5px 5px 20px 1px #6b6962;
    box-shadow: 5px 5px 20px 1px #bbb9b2;
}
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .number span.delete {
        color:firebrick;
    }
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .number span.open {
        color: darkgreen;
    }
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .number span:hover i {
}
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .number span:active i {
    transform: translateY(1px);
    -webkit-box-shadow: 5px 5px 24px 0px rgba(132, 132, 132, 0.18);
    -moz-box-shadow: 5px 5px 16px 0px rgba(132, 132, 132, 0.18);
    box-shadow: 5px 5px 16px 0px rgba(132, 132, 132, 0.18);
}

/*   Light Buttoms   */
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .light {
        width: 500px;
        margin-left: 80px;
        margin-top: 30px;
}
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .light span {
    font-size: 26px;
    color: #4f4c49;
    display: inline-block;
    width: 45%;
    text-align: center;
    margin-bottom: 25px;
}
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .light span i {
        display: inline-block;
        width: 200px;
        height: 100px;
        line-height: 100px;
        background: #ffffff;
        cursor: pointer;
        border-radius: 15px;
        transition: 250ms;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-box-shadow: 5px 5px 20px 1px #cbc9c2;
        -moz-box-shadow: 5px 5px 20px 1px #cbc9c2;
        box-shadow: rgb(187, 185, 178) 5px 5px 20px 1px;
    }
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .light span:active i {
        transform: translateY(1px);
        -webkit-box-shadow: 5px 5px 24px 0px rgba(132, 132, 132, 0.18);
        -moz-box-shadow: 5px 5px 16px 0px rgba(132, 132, 132, 0.18);
        box-shadow: 5px 5px 16px 0px rgba(132, 132, 132, 0.18);
    }
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .light span.delete {
        color: firebrick;
        width: 432px;                
        margin-left:11px;
        
    }
.keypad-wrapper .keypad-pannel .keypad-container .keypad-buttons .light span.delete i{
        width:100%
    }

/* =============================  END  ====================================== */
.footer{
    line-height:unset !important;
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1240px;
    }
    .inv-edit-form {
        width: 780px !important;
    }
    .barlist-data {
        border: 3px solid var(--border-color);
    }
    .tab-search-block {
        margin-top: 32px;
        border: 3px solid var(--border-color);
    }
    .table.ingrediant {
        margin-top: 32px;        
    }
        .table.ingrediant > thead {
            border-bottom: 3px solid var(--border-color);
        }
    .modal-content {
        width: 780px;
    }
    .img-inventory-details
    {
        max-height:231px;
    }
   
    
}
@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1240px;
    }
}
@media (min-width: 1080px) {
    .inventory-item {
        /*min-width:23%;*/
    }
    .cocktail-item {
        width: 360px;
    }

}
@media (max-width: 1400px) {    
    .type-filter-section {
        column-gap: 12px;
    }
    .galery-items {
        margin-right: 20px;
    }
    
}

@media (max-width: 1200px) {    
    .type-filter-section {
        column-gap: 5px;
    }
    .modal.show .modal-dialog {
        top: 40px;
    }    
}

@media (min-width: 790px) {

    .inv-edit-form {
        width: 780px !important;
    }
}
@media (max-width: 990px) {
    
    .container, .container-lg, .container-md, .container-sm {
        max-width: 990px;
    }
    .type-filter-section {
        column-gap:5px;
    }
   
    
}
@media (max-width: 768px) {
    .wide{
        display:none;
    }
    .largeScreen {
        display: none;
    }
    .modal-content {
        width: 100%;
    }
    .inv-edit-fieldset-group{
        flex-direction:column;
        width:100%;
    }
    .inv-edit-comments{
        width:100%;
    }
    .width-dynamic{
        width:100%;
    }
}
@media (min-width: 601px) {
    .type-filter-section-mobile {
        display: none;
    }
    .type-filter-box-mobile {
        display: none;
    }
    .type-filter-section {
        display: flex;
    }
}
@media (max-width: 600px) {

    .inv-search-filter-box{
        position:inherit;
    }
    
    
    .type-filter-section-mobile {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 5px;
        row-gap: 5px;
    }
        .type-filter-section-mobile.he-il{
            flex-direction:row-reverse;
        }
        .type-filter-section {
          margin-top: 0px;
        }

        .modal-body {
            margin-left: 0px;
        }

        .phoneHide {
            display: none;
        }

        dd {
            margin-top: 5px !important;
        }

        dt {
            margin-top: 5px !important;
        }

        .form-control {
            display: inline-block !important;
           /* width: auto !important;*/
        }

        #home-products .inventory-item {
            width: 100%;
        }

        .link-btn {
            height: 35px;
            width: 35px;
            text-align: center;
            vertical-align: central;
            padding-top: 0px;
            font-size: x-large;
        }


        .inventory-search-box-search {
            min-width: 100px;
            max-width: 120px;
            width: 105px;
        }

        

        .inventory-search-box-search-button {
            padding: 2px;
        }

        .inventory-search-box-item-search {
            margin-left: 6px;
        }
        .inventory-search-box {
            padding: 0px;
        }
    
    .tabs-header {
        box-shadow: 0px 7px 5px -5px #171e25aa;
        border-bottom: 2px solid #172031;
    }
    .inventory-container {
        display: flex; /* Makes this a true flex container! */        
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .tab-container {
        display: flex; /* Makes this a true flex container! */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .inventory-item {
        /*width: 100%;*/
        min-width: 250px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .cocktail-item {
            
            width: 100%;
            min-width: 250px;
            margin-left: 0px;
            margin-right: 0px;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .inventory-item-box {
            display: flex;
            
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;            
        }

        .inventory-dl {
            text-align: center;
            position: relative;
            margin: auto;
            width: auto;
            margin-left: 5px;
        }

        dd.inventory-row {
            text-align: center;
            font-weight: 400;
            width: 70%;
            float: left;
            text-align: left
        }

        dt.inventory-row {
            text-align: center;
            font-weight: 400;
            width: 25%;
        }

        .inventory-dd {
            appearance: auto !important;
            -webkit-appearance: auto;
            min-width: 100px;
        }

        


        .cocktail-item {
            width: 100%;
        }
    }

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 780px;        
    }
}
    @media (max-width : 576px) {
        .mobile-nav {
            display: inline-block;
        }
        .inventory-edit .form-control {
            /*min-width:190px;*/
        }
        .inv > select{
        /*    max-width:150px;*/
        }        
    }
@media (max-width : 480px) {
    #barcodeScanner {
        height: 100%;
        width: 100%;
    }
    /* phone */
    .main-content{
        display:none;
    }
    .footer{
        display: none;
    }
    .inventory-item-imag.info {
        width: 210px;
    }
    .table-header-line {
        top: 70px;
    }
    .inv-qty-stock-qty {
        height: unset;
    }
    .list-qty-edit {
        flex-direction: column;
    }
    .inv-search-filter-box{
        margin-top: 0px;
        padding-top: 0px;
    }
    

    .inventory-amount-title.he-il {
        left: 20px;
    }
    .inventory-amount-title {
        right: 20px;
    }
    .inventory-brand-title {
        left: 20px;
    }
    #inventory-items {
        margin-top: 0px;
    }
    .inv-list-side {
        margin-left: 0px;
    }
    .inv-list-side.he-il {
        margin-left: 0px;
        margin-right:0px;
    }
    .modal-title {
        font-size: 22px;
        font-weight: 300;  
        
    }
    .inv-header-text {
        padding-left: 10px;
        padding-right: 10px;
    }
    .inv-header-text.he-il {
        padding-right: 10px;
    }
    .inv-info-image-section {
        justify-content: flex-end;
    }
    .inv-slider-edit-pos {
        margin-bottom: 60px;
        margin-right: 35px;
    }
    .slider-control-box-edit {
        bottom:unset;
        left: 25px;
        top: 230px;
    }
    .modal.show .modal-dialog {
        top: 0px;
    }
    .domobile {
        display: block;
    }
    .dofullscreen {
        display: none;
    }
    .nav-header {
        height: unset;
    }
    .cocktail-detail-text {
        width: 100%;
    }
    .cocktail-detail {
        flex-direction: column-reverse;
    }
    .cocktail-detail-img {        
        text-align: center;
        max-width:unset;
    }
    .cocktail-detail.he-il {
        flex-direction: column-reverse;
    }
    .cocktail-name-description-info-col{
        justify-content: center;
    }
    .cocktail-name-description-info-col.he-il{
        justify-content:center;
    }
    form {
        margin-bottom: 10px;
    }
    #popupmodal{
        top:0;
        margin-bottom:10px;
    }
    .modal-content {
        
        border-radius:0;
    }
    .modal-header {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 1rem 0rem;
    }
    .inventory-edit {
        /* margin-bottom:80px;*/
    }
    .inventory-item-link {
        top: -16px;
    }
    #tab-control {
        padding-left: 4px;
    }
    .tab-containers {
        padding-left: 0px;
    }
    .cocktail-item-link{
        max-width:unset;
    }
    .type-filter-item {
        background-color: var(--border-color);
        padding-left: 4px;
        padding-right: 4px;
        text-align:center;
    }
    .type-filter-item.active {
        background-color: var(--active-bg-color);
    }
    
    .side-menu-view {
        flex-direction: column;
    }
    .side-menu-view.he-il {
        flex-direction: column;
    }
    .sidenav {
       display:none;
    }
    .sidenav2 {
        width: 100%;
        height: unset;
        position: sticky;
        z-index: 1;
        top: 54px;
        background: var(--border-color);
        overflow-x: hidden;
        padding-top: 10px;
    }
    .inv-search-item-count{
        display: none;
    }
    .inventory-edit div.img{
        position:unset;
        left:unset;
        bottom:unset;
    }
    .inv-comments{
        width:250px;
        max-width:250px;
    }
    .close{
        width:54px;
    }
    .inv-comments-header {
    }
    
    .main {
        margin-right: 0px;
        margin-left: 0;
    }    
    .main.he-il {
        margin-right: 0px; /* Same as the width of the sidenav */
        margin-left: 0;
    }
    .box-style.catalog {
        min-width: 99%;
    }


    .inventory-item-name-group {
        width: 100%;
        min-width: unset;
        max-width: unset;
    }
    #site-main {
        margin-top: -15px;
    }
    #tab-control{
        margin-top:25px;
    }
   
    .inventory-item {
        min-width: 350px;
    }
    .inventory-item-imag {
        /*width:250px;*/
    }
    
    .inv-slider-steps {
    }
    .inventory-item-link {
        max-width: 360px;
        font-size: larger;
    }
    .last-column {
        word-wrap: normal;
        padding-right: 30px;
    }
    .inventory-item-image-name-group {
        flex-direction: column;
        padding: 0px;
        row-gap:10px;
    }
    .inventory-item-image-name-group.he-il {
        flex-direction: column-reverse;
        padding: 0px;
    }
    .inventory-group-box-side {
        margin-top: 5px;
    }
    .mobile-nav {
        display: inline-block;
    }
    
   
   
    .mybtn {
        min-width: 70px;
        min-height:40px;
        margin-left: 0px;
    }
    .inv-type{
        margin-left:10px;
    }
    
    .inv {
      /*  margin-top: 1px;*/
    }
    .inv > select{
        padding:unset  ;
    }
    .form-box1 {
        margin-left: 10px;
        margin-top: 0px;
    }
    legend{
        margin-bottom:0px;
    }
    .inv > select {
        height: 36px;
       /* max-width: 140px;*/
    }
    #itemName {
        /*max-width: 160px;*/
        min-width: unset !important;
    }
    .form-box {
        margin-left: 4px;        
        padding: 3px;
        padding-left: 10px;
        padding-right: 10px;        
    }
    
    .radio-group{
        min-width:unset;
    }
    .slider-view{
        width:160px;
    }
    .ctl-range{
        width:110px;        
    }
    .ctl-range-value{
        width:26px;
        margin-left:2px; 
        margin-bottom:3px;
    }
    .field-price {
        width: 85px;
        height:38px;
        line-height:38px;        
    }
    .bottleSize-lable {
        font-size: 16px;
    }
    #brand {
        max-width: 135px;
    }
    #country{
        max-width:130px;
    }
    fieldset{
        margin:0px;
    }
}