/* 
	style.css file Gestionale m2labs 2019-2020
	autore - Maurizio Amati     		   		  
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* TASTO AGGIUNGI PER DIPENDENTI CLIENTI ECC.. */
.aggiungi {
  background-color: #689f38;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

/* TASTO RESET PER DIPENDENTI CLIENTI ECC.. */
.reset {
  background-color: #9f3838;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

/* SFONDO GIALLO CIRCOLARE PER LIVELLO DIPENDENTI */
.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd54f 0%, #df00ff 100%);
  color: white;
  font-weight: bold;
  font-size: 12px;
}

svg {
  fill: #677d91;
  font-size: 20px;
  padding: 0px 6px 0px 5px;
}

svg:hover {
  fill: red;
}

.checked {
  color: orange;
}

.iconDiv {
  width: 100%;
  text-align: center;
  padding-top: 5px;
}

.foto {
  background: white;
  border: 1px solid darkgray;
  border-radius: 10px;
  width: 105px;
  height: 135px;
  margin: 0 auto;
  box-shadow: 1px 1px 3px #aaa;
}

.ml-0 {
  margin-left: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

#ticket {
  position: absolute;
  width: 1100px;
}

a {
  display: block;
}

a:link,
a:visited {
  color: black;
  text-decoration: none;
}

/* Struttura di visualizzazione base */

#container-CRM {
  position: relative;
  margin: 0 auto;
  width: 1700px;
}
#menu-CRM {
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  width: 1698px;
  height: 70px;
  border-radius: 5px 5px 0px 0px;
  /* 1. Sfondo semi-trasparente (bianco o nero) */
  background: rgba(255, 255, 255, 0.2);

  /* 2. Il cuore dell'effetto: sfocatura dello sfondo */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Supporto Safari */

  /* 3. Bordo sottile e chiaro per definire la forma */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Opzionale: bordi arrotondati e ombra */

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

#container-CRM iframe {
  width: 100%;
  padding: 0;
  border: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

#container-scheda iframe {
  width: 100%;
  padding: 0;
  border: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

#container2 {
  position: relative;
  width: 1130px !important;
  top: 0px !important;
  margin: 0 auto;
}

.Sub-Container {
  background-color: #f6f5f4;
  /*width: 1136px;
	width:99%; 
	max-width:1674px !important;	*/
  min-height: calc(100vh - 50px);
  margin: 0px;
  border: 1px solid #888888;
  padding: 12px 9px 10px 5px;
  border-radius: 0px 0px 5px 5px;
  box-shadow: 0px 5px 5px #5d5d5d;
  margin-bottom: 20px;
}

.Sub-Container-small {
  background-color: #f6f5f4;
  width: 1108px;
  min-height: calc(100vh - 50px);
  margin: 0px auto;
  border: 1px solid #888888;
  padding: 12px 9px 10px 5px;
  border-radius: 5px;
  box-shadow: 0px 5px 5px #5d5d5d;
  margin-bottom: 20px;
  position: relative;
}

.title {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 20px;
  line-height: 30px;
  font-weight: bold;
  color: #888888;
  padding: 5px;
}

.title-small {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px;
  line-height: 20px;
  color: #888888;
  padding: 5px;
}

.Sub-Container-Internal {
  background-color: #ffffff;
  /*width: 1130px;*/
  width: 100%;
  min-height: 600px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin: auto;
  font-family: 'Open Sans', sans-serif !important;
  color: #333;
  padding: 15px 7px 0px 7px;
  box-sizing: border-box;
}

.Little-Container-small {
  border-style: dashed;
  border-color: gray;
  border-width: 1px;
  border-radius: 5px;
  box-shadow: 1px 1px 2px 1px #bdbdbd;
  background-color: #f6f6f6;
  /* margin: 3px 6px; */
  margin: 10px 0px;
}

.Tab-select {
  float: right;
  width: 150px;
  height: 26px;
  text-align: center;
  border-top: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #fff;
  background-color: #fff;
  padding: 3px 0px 0px 0px;
  font-weight: bold;
}

.Tab {
  float: right;
  width: 150px;
  height: 26px;
  text-align: center;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #cccccc;
  background-color: #dfdfdf;
  box-shadow: inset -0px -0px 0px #a4a4a4;
  padding: 3px 0px 0px 0px;
}

.Tab:hover {
  background-color: #ffc700;
  box-shadow: inset -0px -0px 0px #fff;
  height: 26px;
  font-size: 15px;
}

.Tab2 {
  float: right;
  width: 120px;
  height: 28px;
  text-align: center;
  color: lightgray;
  padding-top: 3px;
  font-size: 15px;
}

.Tab2-select {
  float: right;
  width: 120px;
  height: 29px;
  text-align: center;
  background-color: white;
  font-weight: 800;
  border-top: 0px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  font-size: 15px;
}

.Tab-container {
  display: flex;
  justify-content: flex-end;
  /* simula float: right */
  align-items: center;

  /* allinea i tab in basso */
  height: 28px;
  background-color: gray;
}

.Tab2:hover {
  float: right;
  width: 120px;
  height: 26px;
  text-align: center;
  background-color: #ffc700;
  color: black;
}

/* Overlay style */
/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  font-family: 'Open Sans', sans-serif !important;
  height: 0%;
  width: 100%;
  position: fixed;
  /* Stay in place */
  z-index: 3;
  /* Sit on top */
  left: 0;
  top: 0;

  background-color: rgba(0, 0, 0, 0.95);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  width: 630px;
  height: 400px;
  position: absolute;
  top: 40%;
  left: 50%;
  margin: -170px 0 0 -315px;
  z-index: 1;
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  /* Display block instead of inline */
  transition: 0.3s;
  /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 35px;
  right: 45px;
  font-size: 60px;
}

.modulo-bacheche {
  border-style: dashed;
  border-color: gray;
  padding: 10px;
  height: 640px;
}

.modulo-pannelli-led {
  border-style: dashed;
  border-color: gray;
  padding: 10px;
}

.modulo-croci {
  border-style: dashed;
  border-color: gray;
  padding: 10px;
  height: 640px;
}

/* dropdown menu */
.menuDiv {
  float: right;
  margin-right: 20px;
  padding: 0;
  margin: 0;
}

.sf-menu li {
  background: #000 !important;
}

.sf-menu li a {
  color: white !important;
  text-transform: uppercase;
  font-size: 12px;
}

.sf-menu li img {
  padding: 0;
  margin: 0;
  border: 0;
}

/* Struttura di visualizzazione tabelle */
table.sortable tbody tr:nth-child(2n) td {
  background: #ffffff;
}

table.sortable tbody tr:nth-child(2n + 1) td {
  background: #eeeeee;
}

/* table.sortable tbody tr:nth-child(5n) td 		{		
		background: #11ffff;		
		}  
	table.sortable tbody tr:nth-child(n+7) {display:none;}  */
td {
  border-bottom: 1px solid #bbbbbb;
}
.admin td {
  padding: 0px 10px 0px 10px;
}

table {
  border-collapse: collapse;
}

table.sortable tbody tr:hover td {
  background-color: #ffc700;
  cursor: pointer;
}

#ssortable,
.sortable {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 12px;
}

/* fine menu */

@media screen and (min-width: 1024px) and (max-width: 1690px) {
  #container-CRM,
  #menu-CRM {
    position: relative;
    margin: 0 auto;
    width: 1140px !important;
  }

  #container2 {
    width: 1130px !important;
  }

  .Sub-Container-Internal {
    width: 1108px;
  }

  .choise {
    width: 160px !important;
  }
}

#popup {
  position: fixed;
  /* Rimane in posizione fissa mentre scorri */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Centra rispetto al proprio centro */
  width: 300px;
  height: 200px;
  background: white;
  border: 2px solid #444;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  /* Più in alto di qualsiasi altro elemento */
  padding: 20px;
  text-align: center;
  display: none;
  /* Inizialmente nascosto */
  /* Inizialmente nascosto */
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.row {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 5px 0px 5px 0px;
}

input.capitalize {
  text-transform: capitalize;
}

input.uppercase {
  text-transform: uppercase;
}

/* PAGINA CALL */
#iframeContenuti {
  position: relative;
  width: 100%;
  top: 40px;
  overflow: hidden;
  border: none;
  z-index: 50;
}

html {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif !important;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
  /* riempimento radiale e sfondo */
}

.sfondo {
  background: -moz-radial-gradient(circle, #fefefe, #667c90);
  background: radial-gradient(circle, #fefefe, #667c90);
  margin: 0px;
  background-attachment: fixed;
}