@import 'vars.css';
@import 'base_store_wnd.css';
@import 'base_entry_wnd.css';
@import 'base_home_page.css';
@import 'base_content.css';
@import 'base_client_elements.css';
@import 'bread_crumb.css';
@import 'more_info.css';
@import 'search.css';
@import 'message_dialog.css';
@import 'shopping_bag_wnd.css';
@import 'contact_us.css';
@import 'delivery_wnd.css';
@import 'new_customer_wnd.css';
@import 'order_details_wnd.css';
@import 'tag_card.css';
@import 'tag_content.css';
@import 'supplier_card.css';
@import 'supplier_content.css';
@import 'sale_card.css';
@import 'sale_content.css';
@import 'groups_card.css';
@import 'groups_content.css';
@import 'product_content.css';
@import 'product_card.css';
@import 'product_full_page.css';
@import 'cg_payments.css';
@import 'gama_payments.css';
@import 'terms_wnd.css';
@import 'send_product_by_mail.css';
@import 'base_entity_wnd.css';
@import 'product_entity_wnd.css';
@import 'note.css';
@import 'menu_entity.css';
@import 'modal_box.css';
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--main-font);
    background: var(--color_12);
}

body::-webkit-scrollbar{
   display: none;
}

input[type="search"]::-webkit-search-decoration:hover,
input[type="search"]::-webkit-search-cancel-button:hover {
    cursor:pointer;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: light-gray;
  opacity: 0.6; /* Firefox */
}

/* because this element type force monospace font - here I force my default font*/
textarea {
    font-family: var(--main-font);
}

.dialog-header-1 {
    font-size: 24px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.04px;
    color: var(--color_1);
    text-align: center;
}

.dialog-header-2 {
    z-index: 2;
    font-size: 20px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.03px;
    text-align: center;
    color: var(--color_1);
    background: var(--color_2);
}

.dialog-header-3 {
    font-size: 24px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.04px;
    color: var(--color_1);
    text-align: right;
    cursor: default;
}

.dialog-header-4 {
    z-index: 2;
    font-size: 18px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.03px;
    text-align: right;
    color: var(--color_1);
    background: var(--color_2);
}

.dialog-header-2-line {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    height: 13px;
    border-bottom: var(--border_line_1);
    width: 100%;
}

.header-line-div {
    display: flex;
    visibility: visible;
    position: relative;
    justify-content: center;
    height: 2px;
}

.header-line {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    border-bottom: var(--border_line_1);
    align-self: center;
    width: 100%;
}

.header-3 {
    font-size: 24px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.04px;
    text-align: right;
    color: var(--color_1);
    margin: 0;
    padding: 0;
    margin-inline-end: auto;
    cursor: default;
}

.pagination-btn.not-active{
    opacity:0.6;
    pointer-events: none;
}

.pagination-btn > span{
    margin:0;
}
.pagination-btn {
    /*
        with out the font-family here this font is not active even the body
        and I don't know why!, yet!
    */
    /*1.2.1.10*/
    display:flex;
    align-items:center;
    margin: 0 0 0 5px;
/*
    gap: 12px;
    padding-right: 12px;
    width: 120px;
*/
    /*up to here*/
    font-family: var(--main-font);
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.03px;
    text-align: center;
    color: var(--color_10);
    background: var(--color_12);
    border: solid 1px var(--color_9);
    border-radius: 4px;
    box-shadow: var(--box_shadow_1);
    cursor: pointer;
    outline: 0;
}

.button-4 {
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.03px;
    border-radius: 2px;
    text-align: center;
    box-shadow: var(--box_shadow_1);
    cursor: pointer;
    outline: 0;
    border: none;
}

.btn-background-2 {
    color: var(--color_29);
    background: var(--color_3);
}

.btn-background-4 {
    color: var(--color_5);
    background: var(--color_3);
}

.btn-background-8 {
    color: var(--color_10);
    /* change from def*/
    background: var(--color_11);
}

.button-7 {
    margin: 0;
    margin-left: 6px;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.89;
    letter-spacing: -0.03px;
    text-align: right;
    color: var(--color_4);
    pointer-events: none;
}

.label-2 {
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.03px;
    border-radius: 2px;
    text-align: center;
    color: var(--color_29);
    background: var(--color_3);
    box-shadow: var(--box_shadow_1);
    cursor: pointer;
    outline: 0;
    border: none;
}

.label-3 {
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.02px;
    color: var(--color_9);
    text-align: right;
}

.label-4 {
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.02px;
    color: var(--color_29);
    text-align: right;
}

.label-5 {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.02px;
    color: var(--color_1);
    text-align: right;
    margin-right: 2px;
}

.label-7 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    align-self: center;
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.22;
    letter-spacing: -0.03px;
    color: var(--color_1);
    text-align: center;
}

.label-8 {
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.88;
    text-align: right;
    letter-spacing: -0.02px;
    color: var(--color_1);
}

.label-9 {
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.88;
    letter-spacing: -0.02px;
    color: var(--color_25);
}

.label-10 {
    font-size: 20px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.03px;
}

.label-11 {
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.02px;
    color: var(--color_8);
    text-align: right;
}

.label-12 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    align-self: flex-start;
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.22;
    letter-spacing: -0.03px;
    color: var(--color_8);
    text-align: right;
}

.loader {
  margin: auto;
  border: 20px solid #ffe2cf;
  border-radius: 50%;
  border-top: 20px solid #FF7A59;
  animation: loader-spinner 1.75s linear infinite;
}

@keyframes loader-spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  width:30px;
  height:30px;
  transform: translate(-50%, -50%);
  padding: 10px;
}

/*.password {
    font-size: 16px;
    border-radius: 4px;
    border: var(--border_line_1);
    box-shadow: var(--box_shadow_2);
    outline: 0;
    background: var(--color_2);
}*/


/*.password-2 {
    font-size: 16px;
    border-radius: 4px;
    border: var(--border_line_2);
    box-shadow: var(--box_shadow_2);
    outline: 0;
    background: var(--color_2);
}*/

.message-1 {
    font-size: 20px;
    color: var(--color_2);
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.03px;
    text-align: center;
    pointer-events: none;
    color: var(--color_1);
}

.option-1 {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.02px;
    text-align: right;
    color: var(--color_7);
}

.select-1 {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.02px;
    text-align: right;
    cursor: pointer;
    outline: 0;
    border-radius: 4px;
    box-shadow: var(--box_shadow_2);
    border: var(--border_line_2);
    color: var(--color_7);
    background: var(--color_2);
}

.select-2 {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.02px;
    text-align: right;
    outline: 0;
    border-radius: 4px;
    box-shadow: var(--box_shadow_2);
    border: var(--border_line_2);
    color: var(--color_7);
    background: var(--color_2);
}

.frame-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.15);
    background: var(--color_2);
}

.password-2,
.input-1 {
    font-size: 16px;
    border-radius: 4px;
    border: var(--border_line_2);
    box-shadow: var(--box_shadow_2);
    outline: 0;
    background: var(--color_2);
}

.input-2 {
    color: var(--color_7);
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.02px;
    text-align: right;
}

.password,
.date-input {
    font-size: 16px;
    border-radius: 4px;
    border: var(--border_line_1);
    box-shadow: var(--box_shadow_2);
    outline: 0;
    background: var(--color_2);
}

.card-div {
    display: flex;
    flex-direction: column;
    background: var(--color_2);
    border-radius: 3px;
    box-shadow: var(--box_shadow_4);
}

.card-div-1 {
    /*
        this div must be flex type
    */
    display: flex;
    background: var(--color_2);
    border-radius: 4px;
    box-shadow: var(--box_shadow_4);
    cursor: pointer;
}

.card-div-2 {
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.02px;
    color: var(--color_10);
    text-align: right;
    pointer-events: none;
}

.dialog-div {
    z-index: 3;
    height: 86%;
    width: 100%;
    background: rgba(255, 226, 207, 0.8);
}

.store-logo-image {
    /*  width: 132px;
    height: 111px;*/
    /* fix 1.0.2 */
    margin: 0px auto 10px;
    object-fit: contain;
    content: var(--image_store_logo_2);
}

#forgot-password-msg-1-p {
    width: 292px;
    height: 52px;
    margin: 0 auto 45px;
}

.qty-image {
    width: var(--std_icon_size);
    height: var(--std_icon_size);
    object-fit: contain;
    cursor: pointer;
    align-self: center;
}

#qty-plus-image {
    content: var(--image_plus_1);
}

#qty-minus-image {
    content: var(--image_minus_1);
}

.favorite-image {
    right: 10px;
    position: absolute;
    object-fit: contain;
    margin: auto;
    content: var(--image_favorite);
}

.favorite-image-product-card {
    width: 25px;
    height: 25px;
    top: 5px;
}

.favorite-image-product-page {
    width: 35px;
    height: 35px;
    top: 10px;
}

.shekel-currency-image {
    width: var(--std_icon_size);
    height: var(--std_icon_size);
    align-self: baseline;
    object-fit: contain;
    content: var(--image_shekel_currency);
}

.circle-image {
    width: 20px;
    height: 20px;
    right: 0;
    position: absolute;
    object-fit: contain;
    margin: auto;
}

.circle-unselected-image {
    content: var(--image_circ_unselected);
}

.circle-selected-image {
    content: var(--image_circ_selected);
}

#more-tags-check-box-image {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    margin: auto;
    object-fit: contain;
}

.circle-blank-image {
    content: var(--image_circ_blank);
}

.circle-plus-image {
    content: var(--image_circ_plus);
}


@media only screen and (max-width: 800px) {
    .pagination-btn {
        /*
            with out the font-family here this font is not active even the body
            and I don't know why!, yet!
        */
        font-family: var(--main-font);
        font-size: 16px;
        margin: 0 5px;
    }
}

@media only screen and (max-width: 550px) {
    body {
        overscroll-behavior-y: contain;
    }
    .center {
      top: 40%;
      left: 38%;
      /*1.3.6*/
      width:20px;
      height:20px;
    }
    .label-7 {
        white-space:normal;
        overflow: hidden;
    }
    .frame-div{
        border-radius:unset;
    }
}