/* creo animazione della tabella aggiungendo e rimiovno la class table-success */
body {
    padding-right: 0px !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f100;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #8b8b8b;
  }
  
.dt-search{
  display: none;
}

.dt-type-numeric {
    text-align: left !important;
}

.table-row {
   transition-property: all;
    transition-duration: 1s;
}

.role-item {
    cursor: pointer;
}

#permsList {
  overflow-x: scroll;
}
.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 0.25rem;
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #5867dd;
    border-color: #5867dd;
}

.awesomplete{
  width: 100%;
}

.awesomplete mark {
  background: hsl(233.23deg 66.17% 60.59% / 53%);
  border-radius: 4px;
}

.awesomplete li:hover mark {
  background: hsla(233, 74%, 51%, 0.53);
}

.awesomplete li[aria-selected="true"] mark {
  background: hsla(233, 89%, 64%, 0.712);
  color: inherit;
}

.awesomplete > ul > li[aria-selected="true"] {
  background: hsl(207, 5%, 43%);
  color: white;
}
.awesomplete > ul > li:hover {
  background: hsla(0, 0%, 73%, 0.521);
  color: black;
}
.awesomplete > ul {
	border-radius: .3em;
	margin: .2em 0 0;
	background: hsla(0,0%,100%,.9);
	background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
	text-shadow: none;
	max-height: 350px;
	overflow-y: auto;
}

.scarico.btn-primary.active, .scarico.btn-primary:active {
  background-color: #3d4896;
  border-color: #4857d0;   
  border-style: inset;
  border-width: 5px;
}
.scarico.btn-danger.active, .scarico.btn-danger:active{
  background-color: #a1392c;
  border-color: #d73925;   
  border-style: inset;
  border-width: 5px;
}
.scarico.btn-warning.active, .scarico.btn-warning:active {
  background-color: #b87509;
  border-color: #d48506;   
  border-style: inset;
  border-width: 5px;
}

.scarico.btn-success.active, .scarico.btn-success:active{
  background-color: #326b32;
  border-color: #419641;    
  border-style: inset;
  border-width: 5px;
}

.element-garanzia {
  border-radius: 4px;
  padding: 0.5rem;
  box-shadow: 5px 6px 10px 0px #888888;
  background-color: #d9ffcd;
}

.element-fuori_garanzia {
  border-radius: 4px;
  padding: 0.5rem;
  box-shadow: 5px 6px 10px 0px #888888;
  background-color: #ffcdcd;
}



.select2-container .select2-selection--single .select2-selection__rendered{
  margin-top: auto;
}

.refresh:hover .fa-refresh {
  animation: spin 1s ease-in-out;
}

.tagify__tag:focus div::before, .tagify__tag:hover:not([readonly]) div::before {
  --tag-bg-inset: -0.5px;
  --tag-bg: #7fbde1;
}

.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before {
  --tag-bg: rgba(179, 217, 255, 0.53);
  animation: readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused
}
:root {
  --fc-now-indicator-color: #5867dd;
  --fc-event-border-color: #5867dd;
  --fc-event-bg-color: #5867dd;
  --dt-row-selected: 88, 103, 221;
}

.content-wrapper {
  padding-bottom: 50px;
}

#draggable-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 5px;
  border: 1px solid #dee2e6;
  color: white;
}
.draggable-item {
  padding: 5px;
  border-radius: 5px;
  color: white;
  background-color: #5867dd;
  cursor: move;
}

.draggable-item .nominativo {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  text-shadow: 0px 0px 3px #fff;
}

.foto-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #f1f1f1;
  border-radius: 5px;
  border: 1px solid #dee2e6;
  color: #8d8d8d;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

.btn-custom {
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 10px;
  background-color: red;
  color: white;
  border: none;
  padding: 2px 5px; /* Ridurre il padding */
  cursor: pointer;
  font-size: 10px; /* Ridurre la dimensione del font */
  line-height: 1;
  text-align: center;
}

.btn-custom:hover {
  background-color: darkred;
}

.lg-backdrop {
  z-index: 1050;
}

/* file upload button */
input[type="file"]::file-selector-button {
  border-radius: 5px;
  padding: 0 16px;
  height: 40px;
  cursor: pointer;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;
}

/* file upload button hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #f3f4f6;
}

/* file upload button active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb;
}

.fc .fc-button-group {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .fc .fc-toolbar {
    flex-wrap: wrap;
    justify-content: center;
  }
  .fc .fc-toolbar.fc-header-toolbar {
    gap: 1rem;
    flex-direction: column;
  }
  .fc .fc-button-group {
    flex-wrap: wrap;
    gap: 0.24rem;
  }
  .fc .fc-button-group .fc-button {
    border-radius: 4px;
  }
  .fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
  
}

@keyframes readonlyStyles {
  0% {
    background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
    box-shadow: none;
    filter: brightness(.95)
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
