/* === “barreCioccolato” : divisori verticali tra Modifica | Aggiungi | Elimina === */

/* 1) stile del divisore esistente (.sep) dentro il titolo-camera */
.bg-recobat .ml-auto.d-flex.align-items-center > .sep{
  display:inline-block;        /* rimane in linea con le icone  */
  width:2px;                   /* spessore barra                */
  height:1em;                  /* altezza circa pari alle icone */
  background:#8c5e30;          /* marrone “cioccolato”          */
  margin:0 8px;                /* aria orizzontale ai lati      */
  flex-shrink:0;               /* la barra non si riduce        */
  pointer-events:none;         /* non intercetta i click        */
}

/* 2) fallback: se .sep non fosse presente, crea la barra con ::before             */
/*    (non interferisce con i modali perché il selettore è molto specifico)        */
.bg-recobat .ml-auto.d-flex.align-items-center > *:not(:first-child):not(.sep)::before{
  content:'';
  display:inline-block;
  width:2px;
  height:1em;
  background:#8c5e30;
  margin:0 8px 0 0;            /* spazio solo a destra          */
  vertical-align:middle;
}




body {
  margin: 0;
  color: #6a6f8c;
  background: #c8c8c8;
  /* font:600 16px/18px 'Open Sans',sans-serif; */
}
*,
:after,
:before {
  box-sizing: border-box;
}
.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}

/* CAMPI NASCOSTI PER HONEYPOT */
.ohno {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

[contenteditable] {
  outline: 0px solid transparent;
}
/* MULTISELECT */
.field_multiselct {
  position: relative;
  width: 100%;
  display: block;
  min-height: 46px;
  border: 1px solid #cdd6f3;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 12px 40px 10px 16px;
  font-size: 14px;
  color: #a8acc9;
  outline-color: #cdd6f3;
}
.field_multiselect button {
  position: relative;
  padding: 7px;
  background: #ebe4fb;
  border-radius: 4px;
  margin-right: 9px;
  margin-bottom: 10px;
  border: none;
}
.field_multiselct:after {
  content: "";
  position: absolute;
  right: 14px;
  top: 15px;
  width: 6px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg width='6' height='16' viewBox='0 0 6 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0L6 5H0L3 0Z' fill='%23A8ACC9'/%3E%3Cpath d='M3 16L6 11H0L3 16Z' fill='%23A8ACC9'/%3E%3C/svg%3E")
    50% 50% no-repeat;
}
.field_multiselect_help {
  position: absolute;
  max-width: 100%;
  background-color: #fff;
  top: 0px;
  left: 0;
  opacity: 0;
}

.form_label input.error {
  border-color: red;
}

.error_text {
  color: red;
}

.multiselect_block {
  position: relative;
  width: 100%;
  height: 50px;
}

input.multiselect_checkbox {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border: none;
  opacity: 0;
}

.multiselect_checkbox:checked ~ .field_select {
  display: block;
}

.multiselect_checkbox:checked ~ .multiselect_label {
  width: 40px;
  left: initial;
  right: 4px;
  background: #ffffff
    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%234F5588'/%3E%3C/svg%3E")
    50% 50% no-repeat;
}

/* .multiselect_checkbox:checked ~ .field_multiselect_help {
	opacity: 1;
  } */

.form_label input,
.field_multiselect {
  position: relative;
  width: 100%;
  display: block;
  height: 46px;
  border: 1px solid #cdd6f3;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 5px 40px 5px 16px;
  font-size: 14px;
  color: #a8acc9;
  outline-color: #cdd6f3;
}

.multiselect_label {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 100%;
  height: 44px;
  cursor: pointer;
  z-index: 3;
}

.field_select[multiple] {
  overflow-y: auto;
}
.field_select {
  display: none;
}

.field_select {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  width: 100%;
  border: 2px solid #cdd6f3;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  box-sizing: border-box;
  outline-color: #cdd6f3;
  z-index: 6;
}

.field_select option {
  display: block;
  padding: 8px 16px;
  /* width: calc(370px - 32px); */
  cursor: pointer;
}
/*  */
.login-wrap {
  width: 30%;
  margin: 60px auto;
  min-width: 500px;
  min-height: 640px;
  position: relative;
  /* background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center; */
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.login-html {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 50px 70px 50px 70px;
  /* background: rgba(223, 168, 134, 0.9); */
  background: rgba(191, 113, 64, 0.9); 
}
.login-html .sign-in-htm,
.login-html .sign-up-htm {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transition: all 0.4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check {
  display: none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button {
  text-transform: uppercase;
}
.login-html .tab {
  font-size: 22px;
  margin-right: 15px;
  padding-bottom: 5px;
  margin: 0 15px 10px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab {
  color: #fff;
  border-color: #a0522d;
}
.login-form {
  margin-top: 30px;
  min-height: 345px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.login-form .group {
  margin-bottom: 15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button {
  width: 100%;
  color: #fff;
  display: block;
}
.login-form .group .input,
.login-form .group .button {
  border: none;
  padding: 15px 20px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
}
.login-form .group input[data-type="password"] {
  text-security: circle;
  -webkit-text-security: circle;
}
.login-form .group .label {
  color: #aaa;
  font-size: 12px;
}
.login-form .group .button {
  background: #a0522d;
}
.login-form .group label .icon {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  position: relative;
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after {
  content: "";
  width: 10px;
  height: 2px;
  background: #fff;
  position: absolute;
  transition: all 0.2s ease-in-out 0s;
}
.login-form .group label .icon:before {
  left: 3px;
  width: 5px;
  bottom: 6px;
  transform: scale(0) rotate(0);
}
.login-form .group label .icon:after {
  top: 6px;
  right: 0;
  transform: scale(0) rotate(0);
}
.login-form .group .check:checked + label {
  color: #fff;
}
.login-form .group .check:checked + label .icon {
  background: #1161ee;
}
.login-form .group .check:checked + label .icon:before {
  transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after {
  transform: scale(1) rotate(-45deg);
}
.login-html
  .sign-in:checked
  + .tab
  + .sign-up
  + .tab
  + .login-form
  .sign-in-htm {
  transform: rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm {
  transform: rotate(0);
}

.hr {
  height: 2px;
  margin: 40px 0 30px 0;
  background: rgba(255, 255, 255, 0.2);
}

.foot-lnk {
  text-align: center;
}

.datatable-thead {
  position: fixed !important;
  background-color: lightsteelblue !important;
  top: 0 !important;
}

.box-input-number {
  display: flex;
  align-items: center;
  border: 1px solid #d1d3e2;
  padding: 0 0.75rem;
  border-radius: 0.35rem;
}

.box-input-number input {
  border: none;
}

.box-input-number input#box-input-different {
  border: 1px solid transparent;
  border-top-color: var(--recobat);
  border-bottom-color: var(--recobat);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 0;
}

.box-input-number:has(input:focus) {
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.box-input-number input:focus-visible {
  outline: none;
}

.box-input-number input:focus {
  border-color: transparent;
  box-shadow: none;
}
/* #accordionSidebar {
	position: fixed;
	width: 14rem;
	overflow-x: scroll;
	z-index:9999;
} */

/* input.skip-main {
	left: -999px;
	position: absolute;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -999;
  }
  input.skip-main:focus {
	left: auto;
	top: auto;
	width: 30%;
	height: auto;
	overflow: auto;
	margin: 0 35%;
	padding: 5px;
	font-size: 20px;
	outline: 3px solid red;
	text-align: center;
	z-index: 999;
  } */
 
  .rwd-table {
  margin: auto;
width: 100%;
  border-collapse: collapse;
}

.rwd-table  tr:first-child { 
  border-top: none;
  background:  var(--primary); 
  color: #fff;
}

.rwd-table  tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #f5f9fc;
}

.rwd-table  tr:nth-child(odd):not(:first-child) {
  background-color: #ebf3f9;
}

.rwd-table th {
  display: none;
  font-weight: 200;
}

.rwd-table td {
  display: block;
}

.rwd-table td:first-child {
  margin-top: .5em;
}

.rwd-table td:last-child {
  margin-bottom: .5em;
}

/* .rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 120px;
  display: inline-block;
  color: #000;
} */

.rwd-table th,
.rwd-table td {
  text-align: left;
}

.rwd-table {
  color: #333;
  border-radius: .4em;
  overflow: hidden;
}

.rwd-table tr {
  border-color: #bfbfbf;
}

.rwd-table th,
.rwd-table td {
  padding: .5em 1em;
}
@media screen and (max-width: 601px) {
  .rwd-table tr:nth-child(2) {
    border-top: none;
  }
}
@media screen and (min-width: 600px) {
  .rwd-table tr:hover:not(:first-child) {
    background-color: #d8e7f3;
  }
  .rwd-table td:before {
    display: none;
  }
  .rwd-table th,
  .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child,
  .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child,
  .rwd-table td:last-child {
    padding-right: 0;
  }
  .rwd-table th, 
  .rwd-table td {
    padding: 0.5rem !important;
  }
}