/*
Theme Name: boutique
Theme URI: https://kosherboutique.co.il/
Description: A system for kosher boutique
Author: fr-system Team

Version: 1.0.0
Text Domain: boutique
*/

:root {
    --b-global-color-dark-gray: #AFAFAF;
    --b-global-color-light-gray: #F9F9F9;
    --b-global-color-gold: #ce9c3d;
    --b-global-color-gold-hover: #b68b36;
    --b-global-color-dark-green: #1A7870;
    --b-global-color-dark-green-hover: #0f544e;
    --b-global-color-light-light-blue: #D9F5F3;
    --b-global-color-light-light-blue-hover: #c2e3e0;
    --b-global-color-light-orange: #f8d9a3;

    color: #000000;
;
    font-size: 62.5%;
}
.gold, .gold:hover {
   color:var(--b-global-color-gold);
}
.dark-green, .dark-green:hover{
    color:var(--b-global-color-dark-green);
}
.background-white {
    background-color:white;
}
.background-white.gold{
    border: var(--b-global-color-gold) 1px solid;
}
.background-white.dark-green{
    border: var(--b-global-color-dark-green) 1px solid;
}
.background-gold {
    background-color:var(--b-global-color-gold);
    color: white;
    border: var(--b-global-color-gold) 1px solid;
}
.background-gold:hover{
    background-color: var(--b-global-color-gold-hover);
    color: white;
    border-color: var(--b-global-color-gold-hover);
}
.background-dark-green {
    background-color: var(--b-global-color-dark-green);
    color: white;
    border: var(--b-global-color-dark-green) 1px solid;
}
.background-dark-green:hover{
    background-color: var(--b-global-color-dark-green-hover);
    border-color: var(--b-global-color-dark-green-hover);
    color: white;
}
.background-light-light-blue {
    background-color: var(--b-global-color-light-light-blue);
    color: #000000;
    border: var(--b-global-color-light-light-blue) 1px solid;
}

.background-red {
    background-color:red;
    color: #FFFFFF;
    border: red 1px solid;
}

svg circle.background-light-light-blue, svg rect.background-light-light-blue{
    fill: var(--b-global-color-light-light-blue);
}
svg:hover circle.background-light-light-blue, a:hover svg rect.background-light-light-blue{
    fill: var(--b-global-color-light-light-blue-hover);
}

svg circle.background-dark-green, svg rect.background-dark-green{
    fill: var(--b-global-color-dark-green);
}
svg:hover circle.background-dark-green, a:hover svg rect.background-dark-green{
    fill: var(--b-global-color-dark-green-hover);
}
svg circle.background-gold, svg rect.background-gold{
    fill: var(--b-global-color-gold);
}
svg:hover circle.background-gold, a:hover svg rect.background-gold{
    fill: var(--b-global-color-gold-hover);
}

svg path.background-gold {
    fill: var(--b-global-color-gold);
}
svg:hover path.background-gold, a:hover svg path.background-gold{
    fill: var(--b-global-color-dark-green-hover);
}

svg path.stroke-background-gold {
    stroke: var(--b-global-color-gold);
 }
svg:hover path.stroke-background-gold, a:hover svg path.stroke-background-gold{
    stroke: var(--b-global-color-dark-green-hover);
}

svg path.stroke-background-black {
    stroke: black;
}
svg:hover path.stroke-background-black, a:hover svg path.stroke-background-black{
    /*stroke: var(--b-global-color-dark-green-hover);*/
}



.background-light-light-blue:hover{
    background-color: #c6e2e0;
    border-color: #c6e2e0;
}
.background-light-orange {
    background-color: var(--b-global-color-light-orange);
    color: #000000;
    border: var(--b-global-color-light-orange) 1px solid;
}
.background-light-orange:hover{
    background-color: #ebc687;
    border-color: #ebc687;
}


.black{
    color: black;
}
.border-dark-gray{
    border: var(--b-global-color-dark-gray) 1px solid;
    border-radius: 12px;
}
html { margin:0 !important; }
body{
    direction: rtl;
    background:white;
    font-family:"Noto Sans Hebrew","Heebo",Arial,sans-serif;
    font-weight:400;
    height: 100vh;
    max-height: 100vh;
    overflow: auto;
    margin:0;
    font-size: 1.7rem;
    /*overflow-y: hidden; זה בעצם מונע גלילה לבודי*/
}
section{
    height: 100%;
}
input, textarea, select, button{
    font-family:"Noto Sans Hebrew","Heebo",Arial,sans-serif;
}

.font-12{
    font-size: 1.2rem;
}
.font-15{
    font-size: 1.5rem;
}
.font-17{
    font-size: 1.7rem;
}
.font-18{
    font-size: 1.8rem;
}
.font-20{
    font-size: 2rem;
}
.font-22{
    font-size: 2.2rem;
}
.font-25{
    font-size: 2.5rem;
}
.font-30{
    font-size: 3rem;
}
.font-40{
    font-size: calc(22px + 1.15vw);
}
.font-50{
    font-size: calc(22px + 1.15vw);
}

.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
.bold{
    font-weight:700;
}
.underline {
    text-decoration: underline
}
.hidden, .d-none{
    display: none !important;
}
.flex-display{
    display:flex;
}
.flex-display.align-center{
    align-items: center;
}
.flex-display.align-end{
    align-items: end;
}
.flex-display.start{
    justify-content: flex-start;
}
.flex-display.end{
    justify-content: flex-end;
}
.flex-display.space-between{
    justify-content: space-between;
}
.flex-display.space-around{
    justify-content:  space-around;
}
.flex-display.center{
    justify-content: center;
}
.flex-display .align-self-center{
    align-self: center;
}
.flex-display.direction-column {
    flex-direction: column;
}
.flex-display .part-5{
    flex-basis: 5% !important;
}
.flex-display .part-10{
    flex-basis:10% !important;
}
.flex-display .part-20{
    flex-basis:20% !important;
}
.flex-display .part-30{
    flex-basis:30% !important;
}
.flex-display .part-40{
    flex-basis:40% !important;
}
.flex-display .part-45{
    flex-basis:45% !important;
}
.flex-display .part-50{
    flex-basis:50% !important;
}
.flex-display .part-60{
    flex-basis:60% !important;
}
.flex-display .part-65{
     flex-basis:65% !important;
 }
.flex-display .part-70{
    flex-basis:70% !important;
}
.flex-display .part-80{
    flex-basis:80% !important;
}
.flex-display .grow, #primary{
    flex-grow: 1;
}

.grid-display {
    display: grid;
    /*grid-gap: 25px;*/
    grid-gap: 2.5vh;
}
.grid-display .stretch{
     grid-column: 1 / -1;
 }
.grid-display.cols-5{
      grid-template-columns: repeat(5, 1fr);
  }
.grid-display.cols-4{
    grid-template-columns: repeat(4, 1fr);
}
.grid-display.cols-2{
     grid-template-columns: repeat(2, 1fr);
 }
.margin-bottom-5{
    margin-bottom: 5px;
}
.margin-bottom-10{
    margin-bottom: 10px;
}
.margin-bottom-20{
    margin-bottom: 2vh;
}
.margin-bottom-30{
    margin-bottom: 30px;
}
.margin-bottom-40{
    margin-bottom: 4vh;
}
.margin-after-10{
    margin-left: 10px;
}
.margin-before-10{
    margin-right: 10px;
}
.padding-bottom-20 {
    padding-bottom: 20px;
}
.padding-10{
    padding: 10px;
}
.padding-15{
    padding: 15px;
}
.padding-40{
    padding: 40px;
}
.padding-20{
    padding: 2vh;
}
.padding-left-40{
    padding-left: 40px;
}
.margin-r-30{
    margin-right: 30px;
}
.margin-20{
    margin: 20px;
}
.w-h-25{
    width: 25px;
    height: 25px;
}

button, .pointer{
    cursor: pointer;
}

button:hover, .button:hover, span.ellipse{
    /*box-shadow: 1px 2px 19px 5px rgba(0, 0, 0, 0.06);*/
}

button, .button{
    min-width: 130px;
    height: 40px;
    border-radius: 50px;
    outline: none;
    margin: 0 10px;
    padding: 0 20px;
}
a.button{
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    text-decoration: none;
    justify-content: center;
}
button svg, a.button svg{
    margin-left: 5px;
}
button.background-white:hover, .button.background-white:hover{
    background-color: var(--b-global-color-light-gray);
}
.site-main{
    height: 92vh;
    overflow: hidden;
}
header{
    height: 8vh;
}
.page-header{
}
.logout_button{
}
h1,h2,h3{
    margin:0 3px;
}
section.page{
    flex-grow: 1;
   /* padding: 3%;*/
    padding: 2vh 3vw;
    line-height: 1.3;
    height: 100%;
}
section.page .dt-layout-table .dt-layout-cell{
    height: 60vh;
    overflow-y: auto;
}
section.page.single .dt-layout-table .dt-layout-cell{
    height: 30vh;
}
.box {
    border-radius: 30px;
    box-shadow: 2px 4px 23.6px 7px rgba(0, 0, 0, 0.06);
}

table {
    width: 100%;
    text-align: center !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    /*border: 2px red solid;*/
}


th{
    outline: none !important;
    text-align: center !important;
}

th:hover{
    color: var(--b-global-color-gold-hover);
}
.dt-length, .dt-search{
    display: none !important;
}

th .dt-column-header{
    flex-direction: row !important;
}

td {
    border-top: var(--b-global-color-dark-gray) 1px solid !important;
    border-bottom: var(--b-global-color-dark-gray) 1px solid !important;
}
/* עיצוב לעמודה הראשונה */
td:first-child {
   border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
   border-right: var(--b-global-color-dark-gray) 1px solid;
}
/* עיצוב לעמודה האחרונה */
td:last-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-left: var(--b-global-color-dark-gray) 1px solid;
}
.archive-table thead {
    height: 55px;
}
.archive-table .tr-head{
    position: sticky;
    top: 0px;
    background-color: white;
    height: 55px;
}
table thead tr th{
    border-bottom: none !important;
}
.archive-table tr {height: 50px}
.archive-table tr img{
    max-width: 55px;
    max-height: 45px;
    height: auto;
    width: auto;
}

.archive-table tr a{
    width: fit-content;
    min-width: fit-content;
}
/* popups */

.popup_page_overlay{
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, .7);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    transition: opacity 0.35s, visibility 0s .35s;
}

.popup_open .popup_page_overlay{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    overflow-y: auto;
}
.popup_open .popup{
    transform: none;
    -webkit-transform: none;
}

.popup form.hide{
    display: none;
}
.popup{
    width: 80%;
    min-height: 70%;
    background-color: white;
    border-radius: 30px;
    box-shadow: 2px 4px 23.6px 7px rgba(0, 0, 0, 0.06);
    margin: 1.75rem auto;
    position: relative;
    /*margin-top: 60px;*/
    padding: 20px 50px 50px;
}

.text-align-end, .close-popup{
    text-align: end;
}

.small-popup{
    position: absolute;
    z-index: 999;
    width: fit-content;
    height: auto;
}

.small-popup .box{
    padding: 10px 20px;
    border-radius: 20px;
}
.small-popup input{
    width: 100%;
}
input:-webkit-autofill {
    background-color: white;
}

input:-webkit-autofill:-internal-autofill-selected {
    background-color: white;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset; /* צבע הרקע */
}
input, textarea, select, .input-acting{
    background-color: transparent;
    border: none;
    outline: none;
    padding: 3px 7px;
}
.radio-options, .status-options{
    padding: 3px 7px;
}

input, input[type="datetime-local"], input[type="date"], input[type="time"],.input-acting {
    height: 30px;
}
input[type="checkbox"]{
    accent-color: black;
    width: 18px;
    margin-right: 10px;
    /*
    height: 17px;
    */
}
select {
    height: 36px;
}

.flex-display.expanding{
    flex-grow: 1
}
.flex-display.expanding input, .flex-display.expanding textarea{
    width: 100%;
}

.label-value{
    margin-bottom: 20px;
}
.label-value label{
    margin-left: 10px;
    width: max-content;
    max-width: 140px;
}

label span{
    margin-right: 25px;
}


/* slider-message */
.slider-message{
    display: none;
    width: 400px;
    /* height: 400px;*/
    position: fixed;
    right:-500px;
    margin: auto;
    /*bottom: 40px;*/
    top: 100px;
    background: #FFFFFF;
    box-shadow: 0px 1px 26px -2px #0000002E;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    z-index: 999
}

.login-rigth{
    padding: 2%;
}

.login-image {
    height: 100%;
    background-image:url(https://kosherboutique.co.il/wp-content/themes/boutique/assets/images/login.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.login-area{
    padding: 50px 7%;
}
.login-area form > * {
    margin-bottom: 10px;
}

.login-area input{
    background-color: white;
    padding: 0 15px;
    height: 40px;
}
.login-area button{
    border: none;
    /*padding: 10px 40px;*/
    border-radius:   100px;
    width: fit-content;
}

form#registration button{
    background: none;
    padding: 0;
}

label.error, #form_error_msgs_container,.color-red{
    color: red;
}

svg{
    cursor: pointer;
}
ul.tables-list li:hover{
     background-color: var(--b-global-color-light-light-blue);
 }
ul.tables-list li.selected {
    font-weight: bold;
    background-color: var(--b-global-color-dark-green);
    color: white;
}

ul.tables-list li{
     display: inline;
     padding: 10px 18px;
     border:  var(--b-global-color-dark-gray) 1px solid;
 }
ul.tables-list li:first-child{
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-right: var(--b-global-color-dark-gray) 1px solid;
}
ul.tables-list li:last-child{
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: var(--b-global-color-dark-gray) 1px solid;
}

.list-table{
    width: 620px;
}
.list-table  tr{
    height: 40px;
 }
.list-table .td-action{
    width: 10%;
    padding-top: 5px;
}
.modal button.btn-close{
    min-width: auto;
}
.textarea-label{
    padding: 3px 0;
}