.cta{ 
    text-decoration: none; display:flex; flex: none; align-items: center; color: var(--reverse-text); background: var(--main-color); padding: 0.5em 1em; border-radius: 1.5em;
    font-family: "Chakra Petch", serif; transition: background-color 1s, color 1s;
}
.cta .material-icons{ font-size: inherit; }
.cta lab{ display: inline-block; flex: 1; padding: 0 0.5em; text-align: center; }

.cta.ccm{
    padding: 0.18em;
    color: var(--main-text); border: 2px solid var(--main-text); background: var(--reverse-text);
}
.cta.ccm lab{ margin-left: 0.25em; }
.cta.ccm:before{ display: inline-block; font-size: 1.75em; content: '\e887'; font-family: 'Material Icons'; }

.cta.logout{
    background-image: linear-gradient(to bottom right, var(--sec-color), var(--sec-color-grad) ); margin-left: 0.5em;
}
.cta.logout lab{ margin-left: 0.25em; }
.cta.logout:before{ display: inline-block; content: '\e9ba'; font-family: 'Material Icons'; }

.cta.payment{
    background-image: linear-gradient(to bottom right, var(--third-color), var(--third-color-grad) ); color: var(--reverse-text)!important; font-size: 1.2em;
}
.cta.saved{
    background-color: var(--third-color)!important; color: var(--reverse-text)!important; pointer-events: none; cursor: not-allowed;
}
.cta.saved .material-icons{ display: none; }
.cta.saved:before{ display: inline-block; font-size: inherit; content: 'rotate_right'; font-family: 'Material Icons';  animation: spin 1s linear infinite; }
@keyframes spin {
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}


td a{ 
    display: inline-flex; flex: none; align-items: center; text-decoration: none;
    padding: 0.25em 0.33em 0.25em 0.5em; 
    color: var(--main-color); border: 1px solid var(--main-text); background: var(--reverse-text); border-radius: 1em;
}
td a lab{ font-size: 0.66em; padding: 0.33em; }
td .bt_multi{ display: inline-flex; flex: none; flex-direction: column; align-items: stretch; }
td .bt_multi .mainbt{ display: flex; flex: none; align-items: stretch; }
td .bt_multi a{ border-radius: 0; margin: 0 -1px 0 0; }
td .bt_multi a.arrow{ display: inline-flex; flex: none; align-items: center; justify-content: center; padding: 0; width: 1.25em; }
td .bt_multi .opts{ display: none; position: absolute; z-index: 2; border: 1px solid #aaa; background: var(--reverse-text); }
td .bt_multi .opts optsin{ display: flex; flex: none; flex-direction: column; align-items: stretch; }

.flex{ display: flex; flex: none; flex-wrap: wrap; align-items: center; }
.inline-flex{ display: inline-flex; flex: none; flex-wrap: wrap; align-items: center; }

filter{ display: flex; flex: none; flex-wrap: wrap; align-items: center; }

/*------------ ERROR 404 ------------*/

.err404{
    display: flex; flex: none; align-items: center; justify-content: center; width: 100%; min-height: 70vh;
}
.err404 div{ padding: 2em; text-align: center; font-size: 1.5em; border: 4px solid #c33; background: #fff; box-shadow: 0 0 1em #0004; }
.err404 div h1{ color: var(--row-error); margin: 0; padding: 0 0 1em 0;  }

h4.error, span.error{ color: var(--row-error); font-size: 0.88em; text-align: center; }

.check{ color: var(--pay-payed); }
.clear{ color: var(--pay-cancel); }

/*------------  EDIT elements ------------------*/

input:not([type=checkbox]):not([type=radio]), select, textarea{
    width: 100%; font-size: 1em; padding: 0.5em 1em; border-radius: 0.5em; border: 1px solid var(--main-color);
}
input[type=checkbox]:checked, input[type=radio]:checked{ accent-color: var(--sec-color); }
input.error:not([type=checkbox]):not([type=radio]), select.error, textarea.error, .error .w_search{
    background: var(--field-error);
}
.row.error, section.error{ background: var(--row-error); }

.row{ display: flex; flex: none; align-items: center; margin-bottom: 1em; }
.row lab{ width: 33%; margin: 0 0.5em 0 0;  }
.row dom{ flex: 1; }
.row.invert lab{ width: auto; flex: 1; margin: 0 0 0 0.5em; }
.row.invert dom{ flex: none; }
.row.fullline{ flex-direction: column; }
.row.fullline lab, .row.fullline dom{ width: 100%; margin: 0.2em 0; }
lab.added, h3.added{ color: var(--third-color); }
dom.inline{ display: flex; flex: none; align-items: center; }
dom.inline .row{ margin-right: 2em; margin-bottom: 0; }
dom.inline .row dom{ width: auto; }
dom.money, span.money{ display: flex; flex: none; align-items: center; width: 14em; }
dom.money:after, span.money:after{ content: '₪'; margin-left: 0.5em; font-weight: bold; }
dom.fois{ display: flex; flex: none; align-items: center; width: 14em; }
dom.fois:after{ content: 'fois'; margin-left: 0.5em; font-weight: bold; }

.reverseResults{  display: flex; flex: none; flex-direction: column-reverse;  }

small.oblig{ display: block; text-align: center; }
.oblig:before{ content: '* '; color: var( --row-error ); }

refresh{ display: none; }

.search{ display: flex; flex: none; align-items: center; border-radius: 0.5em; border: 1px solid var(--main-color); background: var(--reverse-text); color: var(--main-text); }
.search input{ border: none!important; }
.search:has(input:focus-visible){ outline: 1px auto; }
.search input:focus-visible{ outline: none; }
.search:before{ display: inline-block; content: '\e8b6'; font-family: 'Material Icons'; font-size: 1.25em; padding: 0 0.33em; }
.datePicker:before, .dateTimePicker:before{ content: '\ebcc'; } 
.tel:before{ content: '\e0cd'; } 
.tel .ind{ font-size: 0.75em; font-family: "Chakra Petch", serif; color: var(--main-color); }
.tz:before{ content: '\ea67'; } 
.email:before{ content: '\e0be'; } 

.flag{ display: inline-flex; flex: none; align-items: center; padding: 0 0.5em;  }
.flag img{ height: 1.5em; }

.editct h3{ display: flex; flex: none; flex-wrap: wrap; align-items: center; }
.editct h3 small{ display: block; width: 100%; }
.editct form{ display: flex; flex: none; justify-content: space-around; }
.editct .panel{ width: 48%; margin: 0 0.5em; }
.editct p{ font-size: 0.88em; }
.editct fieldset{ display: block; border-radius: 0.5em; margin-bottom: 1em; width: 100%; }
.editct fieldset legend{ font-size: 1em; }

/*------------ AjxFail ------------------*/
#ajaxFail{ display: none; width: 100vw; height: 100vh; position: fixed; top: 4em;  background: #fccd;  color: #000; backdrop-filter: blur(3px); z-index: 50; }
#ajaxFail in{ display: flex; flex: none; flex-direction: column; width: 100vw; height: calc(100vh - 4em); padding: 2em 2em 0 2rm; }
#ajaxFail .head{ display: flex; flex: none; align-items: center; justify-content: space-between; height: 4em; padding: 1em; background: #fff6; }
#ajaxFail .head h1{ padding: 0; margin: 0; }
#ajaxFail .head a{ 
    display: flex; flex: none; align-items: center; justify-content: center;
    text-decoration: none; font-size: 1.5em; width: 1.75em; aspect-ratio: 1/1;
    color: #c33; background: #fff; border: 2px solid #c33; border-radius: 100%;
}
#ajaxFail .err{ overflow: auto; padding: 0 1em; }
#ajaxFail .err table{  font-size: 1.75em; }

/*----------- fiche saved ---------*/
#saved{ display: block; width: 100vw; height: 100vh; position: fixed; top: -100vh; left: 0; z-index: 40; opacity: 0;  transform: translateZ(1px); /*-prop bidon pour la transition-*/ transition: transform 1s, opacity 0.5s;  }
#saved.show{ top: 0; opacity: 1; transform: translateZ(0); }
#saved in{ display: flex; flex: none; flex-direction: column; justify-content: center; align-items: center;  width: 100vw; height: 100vh; }
#saved in .cta{  font-size: 1.5em; padding: 1em 2em; background-image: linear-gradient(to bottom right, var(--third-color), var(--third-color-grad) ); border-radius: 0.5em; box-shadow: 0 0 1em #0004; }


/*----------- payement / cotiz / valid status --------*/
.paiement dom select{ width: auto; }
.paiement .signal{ width: 1.75em; aspect-ratio: 1/1; margin-right: 0.5em; }
.paiement.pending .signal{ background: var(--pay-pending); }
.paiement.payed .signal, .paiement.valid .signal{ background: var(--pay-payed); }
.paiement.cancel .signal, .paiement.reject .signal{ background: var(--pay-cancel); }
.paiement.refund .signal{ background: var(--pay-refund); }
.paiement.cotiz .signal{ clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.paiement.admvalid .signal{ clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
td.paiement{ width: 3em; }
/*----------- sanitaires indicateurs --------*/
.sanitaire .signal{ 
    display: inline-flex; flex: none; align-items: center; justify-content: center; 
    width: 1.75em; aspect-ratio: 1/1; margin-right: 0.5em; color: var(--reverse-text); border: 2px solid var(--reverse-text); border-radius: 100%; 
}
.sanitaire.clear .signal{ background: var(--pay-payed); outline: 2px solid var(--pay-payed); }
.sanitaire.problem .signal{ background: var(--pay-cancel); outline: 2px solid var(--pay-cancel); }


.pageLegend{ display: inline-flex; flex: none; flex-direction: column; align-items: stretch; position: relative; max-width: 100%; margin-bottom: 1em; }
.pageLegend .cta{ font-size: 0.88em; color: var(--main-text); border: 2px solid var(--main-text); background: var(--reverse-text); border-radius: 0; }
.pageLegend .legendToggleBlock{ display: none; }
.pageLegend .legendCt{ display: flex; flex: none; align-items: center; justify-content: center; }
.pageLegend .legendCt h3{ font-size: 0.88em; width: 100%; margin: 0; text-align: center; }
.pageLegend .legendCt .legendBlock{ flex-wrap: wrap; justify-content: center; }
.pageLegend .legendBlock{ display: inline-flex; flex: none; align-items: center; font-weight: normal; font-size: 1.2em; }
.pageLegend .legendBlock .paiement{ display: inline-flex; flex: none; align-items: center; margin: 0 0.5em; }
.pageLegend .legendBlock .paiement .signal{ width: 1em; }

.pageLegend.columns{ flex-direction: row; align-items: center; }
.pageLegend.columns .cta{ background: var(--liste-th); }
.pageLegend.columns .legendToggleBlock{ margin-left: 1em; }
.pageLegend.columns .checkzone{ display: flex; flex: none; align-items: center; flex-wrap: wrap; }
.pageLegend.columns .checkzone span{ display: flex; flex: none; align-items: center; margin-right: 2em; }

/*en savoir plus*/
.esp{ display: inline; }
.esp + .next{ display: none; }

.detailsTab tr th, .detailsTab tr td{ text-align: center; }
.detailsTab tr th:first-child, .detailsTab tr td:first-child{ text-align: left; }
.detailsTab tr th:last-child, .detailsTab tr td:last-child{ text-align: right; }
.detailsTab tr .money{ justify-content: flex-end; }

/*----------- patcch AjaxUpload --------------*/
.ajaxinput.std a{ color: var(--reverse-text); background: var(--third-color); background-image: linear-gradient(to bottom right, var(--third-color), var(--third-color-grad) ); border-radius: 0.5em; }
.ajxinBar .ajxinVoir{ color: var(--reverse-text); background: var(--third-color); background-image: linear-gradient(to bottom right, var(--third-color), var(--third-color-grad) ); border-radius: 0.5em 0 0 0.5em; }
.ajxinBar .ajxinDel{ color: var(--reverse-text); background: var(--row-error); border-radius: 0 0.5em 0.5em 0; }

.ajaxinput.pic{ width: 16em; aspect-ratio: 1/1; border: 3px solid var(--third-color); border-radius: 0.5em; }
.ajaxinput.pic a{ background: #fffb; color: var(--main-text); }