*, *::before, *::after {
		box-sizing: border-box;
}

html,body,div,input,textarea,select,option,table,td,tr,th{
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size:14px;
}

textarea,select,input{
	margin:0;
	padding:0;
	min-width:250px;
}

.w300 {font-weight: 300 !important;}
.w400 {font-weight: 400 !important;}
.w500 {font-weight: 500 !important;}
.w600 {font-weight: 600 !important;}
.w700 {font-weight: 700 !important;}

.italic{font-style: italic !important;}

.obscurer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #323232dd;
	z-index: 100;
	align-items: center;
	justify-content: center;
}

.windowform {
	display: none;
	width: fit-content;
	min-width: 60%;
	max-width: 90%;
	width: auto;
	position: relative;
	/* aspect-ratio: 2/1; */
	z-index: 101;
	background-color: #f8f6f0;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0px 0px 30px #202020;
	overflow-y: scroll;
	max-height:600px;
	margin: 0 auto;
}

.windowform::-webkit-scrollbar,
.windowform::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.windowform::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 5px;
}

.windowform::-webkit-scrollbar-thumb {
	background-color: #202020;
	border-radius: 20px;
	border: 3px solid transparent;
}

.windowform h1{
	font-size:16px;
}

.windowform table{
	width:100%;
	border-collapse:collapse;
	clear:both;
}

.windowform table th{
	color:#fff;
	text-transform: uppercase;
	background-color: #4c4c4c;
	text-align:left;
}

.windowform table tr{
	padding:2px;
	border-bottom:1px solid #aaa;
}

.clearer{
	width:100%;
	height:1px;
	clear:both;
}

#closewindow {
	float: right;
	cursor: pointer;
	width: 36px;
	aspect-ratio: 1/1;
	margin: 0;
	background-image: url("../template/ui-icon/line/close-circle.svg");
	background-size: cover;
	transition: all .1s;
}

#closewindow:hover {
	background-image: url("../template/ui-icon/solid/close-circle.svg");
	transition: all .1s;
}

.myIcon{
	vertical-align:middle;
	width:20px;
	cursor:pointer;
	margin:3px;
}

.big{
	width:36px !important;
}

#pagination_header{
	text-align:center;
}

/* il wrapper della tabella */
#contatti {
    width:100%;
    overflow-x:auto;
}

/* tabulator vero e proprio */
#container_table_container_parsed .tabulator {
    min-width:100%;
}

/* la tabella interna */
#container_table_container_parsed .tabulator-table {
    min-width:100%;
}

.table_container {
  max-height: 80vh;           /* o quello che ti serve */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.msgbox{
	width:100%;
	border:1px solid #4c4c4c;
	padding:5px;
	margin:5px;
	background-color:#e8e8e8;
}

.tabulator-page.active{
	background-color:#aaffaa;
}

#agent_load{
	position:fixed;
	top:10px;
	right:10px;
	width:fit-content;
	padding:5px;
	box-shadow: 0 0 30px #aaa;
	border:1px solid #4c4c4c;
	z-index:100;
	background-color:#f8f8f8;
	height:auto;
	overflow:hidden;
}

#agent_load .title{
	background-color:#4c4c4c;
	color:#fff;
	text-align:center;
	text-transform: uppercase;
	width:100%;
	padding:1px;
	margin-bottom:2px;
	cursor:pointer;
}

.monitor{
	width:100%;
}

.monitor .mylabel{
	display:inline-block;
	width:100px;
}

.monitorBar{
	display:inline-block;
  	max-width: 85px;        /* larghezza massima */
  	background: linear-gradient(
    to right,
    #00c853 0%,   /* verde */
    #ffeb3b 75%,  /* giallo */
    #d50000 100%  /* rosso */
  	);
  	background-size: 85px 100%; /* 🔑 gradiente fisso */
  	background-repeat: no-repeat;
	margin:1px;
	text-align:center;
}

.inactiveBar{
	display:inline-block;
	margin:1px;
	text-align:center;
	background-color:#36e4ff;
	color:#000;
}

.loginbox{
	margin:50px auto;
	padding:20px;
	border: 1px solid #aaa;
	background-color: #f8f8f8;
	width:fit-content;
	border-radius:100px;
	text-align:center;
	padding-bottom:50px;
}

.loginbox img{
	width:150px;
}

.loginbox input{
	margin:5px;
	border-radius:2px;
	text-align:center;
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
    width: 100% !important;
    box-sizing: border-box;
	min-width:auto;
}

.mwauto{
	min-width:auto !important;
}

.littleButton{
	width:fit-content;
	min-width:100px !important;
	margin:5px;
	padding:5px;

}

.graphBox{
	width:47%;
	margin:1%;
	float:left;
	height:400px;
	border:1px solid #aaa;
	border-radius:5px;
}

.tabulator .tabulator-row,.tabulator .tabulator-cell{
	min-height:34px !important;
}

.tabulator .tabulator-row:hover {
    background-color: #ffff00;   /* colore che vuoi */
    transition: background-color 0.2s ease;
}
.tabulator .tabulator-row a{
	text-decoration:none;
	font-weight:bold;
	color:#333;
}

#myrowcounter{
	background-color:#4c4c4c;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	margin-top:5px;
	clear:both;
}

.status-icon{
	border-radius:50px;
	font-weight:bold;
	font-size:12px;
	width:24px;
	height:24px;
	border: 2px solid #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor:pointer;
}

.all{
	border:1px solid #000;
}

.status-no-event{
	background-color:#aaa;
}

.status-action-ok{
	background-color:#009a00;
	color:#fff
}

.status-action-ko{
	background-color:#9a0000;
	color:#fff
}

.status-waiting-for-agent{
	background-color:#ffff00;
}

.status-waiting-for-lead{
	background-color:#36e4ff;
}

.status-recall{
	background-color:black;
	color:#fff
}

/* Nascondiamo il radio button originale */
.container-radio input {
  display: none !important;
}

/* Creiamo la base del cerchio personalizzato */
.checkmark {
  height: 16px;
  width: 16px;
  margin:2px;
  border-radius: 50%;
  padding:0;
  float:left;
  cursor: pointer;
  position: relative;
}

/* Colore di sfondo quando è selezionato */


/* Creiamo il pallino interno (nascosto di default) */
.checkmark:after {
   content: "";
  position: absolute;

  width: 8px;
  height: 8px;

  background: #555;
  border:1px solid #fff;
  border-radius: 50%;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

/* Mostriamo il pallino quando selezionato */
.container-radio input:checked ~ .checkmark:after {
  display: block !important;
transform: translate(-50%, -50%) scale(1);
}

.badge{
	width:200px;
	float:left;
	margin:10px;
	text-align:left;
	border:1px solid #aaa;
}

.tablePerc{
	width:100%;
	border-collapse: collapse;
}

.tablePerc th{
	background-color: #4c4c4c;
	color:#fff;
	font-weight:bold;
}

.tablePerc td{
	border-bottom:1px solid #aaa;
	padding-bottom:5px;
	padding-top:15px;
	text-align:center;
}