html,body
{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #F5FAFF;
  font-family: Roboto Slab;
}

h1,h2,h3
{
  text-align: center;
}

h1{margin: 10px auto; font-size: 32px; text-shadow: 2px 2px 5px #404040;}
h2{margin: 5px auto; font-size: 28px;}
h3{margin: 5px auto; font-size: 24px; word-wrap: break-word;}

.likeH1
{
  margin: 0 auto;
  font-size: 32px;
  text-shadow: 2px 2px 5px #404040;
  text-align: center;
  font-weight: bold;
}

a, u {text-decoration: none; color: inherit;}

input[type="checkbox"]
{
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.sezione
{
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 20px 0 20px 0;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.2) inset;
  color: black;
  background: #e6e6e6;
}

.sezioneSfondo
{
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: auto;
  margin: 0 auto;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.2) inset;
  color: white;
  background: url("../img/header-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sezioneSfondoHome
{
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0 auto;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.2) inset;
  color: white;
  background: url("../img/BackgroundHome.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

.contentContainerHome
{
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
  height: 100%;
  background-color: rgba(20,20,20,0.2);
  border-radius: 10px;
  padding: 10px;
}

.row
{
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

.rowVert
{
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.rowFullH
{
  display: flex;
  flex-flow: row wrap;
  align-items: end;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: auto;
  margin: 0 auto;
  padding: 0;
}

.col
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 0;
}

.colTop
{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 0;
}

.inlineFlex{ display: inline-flex; }
.alignSelfCenter {align-self: center;}
.alignCenter {align-items: center;}

.flexCenter
{
  align-items: center;
  justify-content: center;
}

.floatLeft {float: left;}
.floatRight {float: right;}

.whiteSpaceNormal {white-space: normal;}

/* FLexbox fix */
*
{
  max-width: 100%;
  min-height: 1px;
  box-sizing:border-box;
}

.col100{width: 100%;}
.col95{width: 95%;}
.col90{width: 90%;}
.col85{width: 85%;}
.col80{width: 80%;}
.col75{width: 75%;}
.col70{width: 70%;}
.col66{width: 66%;}
.col65{width: 65%;}
.col60{width: 60%;}
.col55{width: 55%;}
.col50{width: 50%;}
.col45{width: 45%;}
.col40{width: 40%;}
.col35{width: 35%;}
.col33{width: 33%;}
.col30{width: 30%;}
.col25{width: 25%;}
.col20{width: 20%;}
.col15{width: 15%;}
.col10{width: 10%;}
.colDiv12{width: 8.333333%;}
.col5{width: 5%;}

.mainContainer
{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.rowTopContainer
{
  min-height: 50px;
}

.rowTopContainer h1{margin: auto;}

.topContainer
{
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  width: 100%;
  height: auto;
  min-height: 50px;
  background-color: rgba(150,20,20,0.8);
  border-radius: 10px;
}

.contentContainer
{
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
  height: 100%;
  background-color: rgba(20,20,20,0.5);
  border-radius: 10px;
  padding: 10px;
  overflow-y: scroll;
}

.leftContainer
{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: rgba(20,20,20,0.5);
  border-radius: 5px;
}

.leftContainer button
{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px auto;
  margin-bottom: 5px;
  width: 85%;
  min-height: 30px;
  border-radius: 3px;
  border-color: transparent;
  background-color: rgba(230,230,230,1);
  color: black;
  font-family: Patua One;
  font-size: 16px;
  box-shadow: 0 0 5px 2px rgba(30, 30, 30, 0.15) inset;
  cursor: pointer;
  transition: 0.5s;
}

.leftContainer button:hover, .leftContainer button.buttonActive, .buttonActive
{
  background-color: rgba(30, 30, 30, 0.6);
  color: white;
  box-shadow: 0 0 10px 4px rgba(200, 30, 30, 0.9);
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

input,select,textarea,.buttonAsSubmit,.buttonCool
{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px auto;
  border-radius: 3px;
  border-color: transparent;
  background-color: rgba(230, 230, 230, 0.8);
  color: black;
  font-family: Patua One;
  font-size: 16px;
  box-shadow: 0 0 3px 3px rgba(130, 30, 30, 0.5);
  cursor: pointer;
  transition: 0.5s;
  padding: 5px;
  margin: 20px;
}

input:hover,input:focus,textarea:focus, textarea:hover,.buttonAsSubmit:hover,.buttonCool:hover
{
  background-color: rgba(200, 80, 80, 0.8);
  transition: 0.5s;
  color: white;
  outline: none !important;
}

select:hover,select:focus
{
  background-color: rgba(150, 20, 20, 0.8);
  transition: 0.5s;
  color: white;
  outline: none !important;
}

input:read-only{background-color: rgba(130, 130, 130, 0.8) !important;}

.toggleButton{outline: none !important;}
.deleteToggle{outline: none !important;}

.toggleShow button
{
  width: 80%;
  background-color: rgba(150, 20, 20, 0.8);
  color: white;
  outline: none !important;
  transition: 0.5s;
}

.toggleShow button:hover
{
  box-shadow: 0 0 10px 4px rgba(200, 30, 30, 0.9);
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

.greenSubmit{box-shadow: 0 0 3px 3px green;}
.greenSubmit:hover
{
  background-color: rgba(50, 230, 50, 0.5); 
  box-shadow: 0 0 5px 5px green;
}

.yellowSubmit{box-shadow: 0 0 3px 3px yellow;}
.yellowSubmit:hover
{
  background-color: rgba(230, 230, 50, 0.5); 
  box-shadow: 0 0 5px 5px yellow;
}

.redSubmit{box-shadow: 0 0 3px 3px red;}
.redSubmit:hover
{
  background-color: rgba(230, 50, 50, 0.5); 
  box-shadow: 0 0 5px 5px red;
}

.buttonCoolGreen
{
  background-color: rgba(30, 130, 30, 0.8); 
  box-shadow: 0 0 3px 3px rgba(30, 130, 30, 0.5);
  color: white;
}

.buttonCoolGreen:hover
{
  background-color: rgba(80, 200, 80, 0.8);
  box-shadow: 0 0 6px 6px rgba(30, 230, 30, 0.5);
  transition: 0.5s;
  outline: none !important;
}

.buttonCoolYellow
{
  background-color: rgba(130, 130, 30, 0.8); 
  box-shadow: 0 0 3px 3px rgba(130, 130, 30, 0.5);
  color: white;
}

.buttonCoolYellow:hover
{
  background-color: rgba(200, 200, 80, 0.8);
  box-shadow: 0 0 6px 6px rgba(230, 230, 30, 0.5);
  transition: 0.5s;
  outline: none !important;
}

.buttonCoolRed
{
  background-color: rgba(130, 30, 30, 0.8); 
  box-shadow: 0 0 3px 3px rgba(130, 30, 30, 0.5);
  color: white;
}

.buttonCoolRed:hover
{
  background-color: rgba(200, 80, 80, 0.8);
  box-shadow: 0 0 6px 6px rgba(130, 30, 30, 0.5);
  transition: 0.5s;
  outline: none !important;
}

.notifyGreen
{
  position: relative;
  text-align: center;
  font-family: Patua One;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
  background-color: rgba(50, 230, 50, 0.5); 
  box-shadow: 0 0 5px 5px green;
  animation-name: AnimazioneNotifica;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.notifyRed
{
  position: relative;
  text-align: center;
  font-family: Patua One;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
  background-color: rgba(230, 50, 50, 0.5); 
  box-shadow: 0 0 5px 5px red;
  animation-name: AnimazioneNotifica;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes AnimazioneNotifica
{
  0%   {opacity: 1;}
  10% {opacity: 0.8; transform:scale(1.5,1.5);}
  50% {opacity: 1;}
  95% {opacity: 0;}
  100% {opacity: 0; display: none;}
}

::placeholder{ color: black; }

.immagine30x30
{
  width: 100%;
  height: auto;
  max-width: 30px;
  max-height: 30px;
  border-radius: 5px;
  margin: 10px auto;
}

.immagine50x50
{
  width: 100%;
  height: auto;
  max-width: 50px;
  max-height: 50px;
  border-radius: 5px;
  margin: 10px auto;
}

.immagine100x100
{
  width: 100%;
  height: auto;
  max-width: 100px;
  max-height: 100px;
  border-radius: 5px;
  margin: 10px auto;
}

.immagine150x150
{
  width: 100%;
  height: auto;
  max-width: 150px;
  max-height: 150px;
  border-radius: 5px;
  margin: 10px auto;
}

.immagine200x200
{
  width: 100%;
  height: auto;
  max-width: 200px;
  max-height: 200px;
  border-radius: 5px;
  margin: 10px auto;
}

.size30x30{ width: 30px !important; height: 30px !important; }
.size35x35{ width: 35px !important; height: 35px !important; }
.size40x40{ width: 40px !important; height: 40px !important; }
.size50x50{ width: 50px !important; height: 50px !important; }

.buttonStampaOrdine{ align-self: flex-end; }

.breakWordAll{word-break: break-all;}

.labelTitle
{
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  padding: 10px;
  margin: 0 auto;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  text-shadow: 2px 2px 5px #404040;
  background-color: rgba(130, 30, 30, 0.6); 
  border-radius: 10px;
}

.labelInput
{
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  padding: 5px;
  padding-left: 50px;
  padding-right: 50px;
  margin: 0 auto;
  margin-top: 20px !important;
  margin-bottom: 5px !important;
  text-shadow: 2px 2px 5px #404040;
  background-color: rgba(130, 30, 30, 0.6); 
  border-radius: 10px;
}

.labelTavoli
{
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  padding-left: 50px;
  padding-right: 50px;
  margin: 0 auto;
  margin-top: 10px !important;
  margin-bottom: 5px !important;
  text-shadow: 2px 2px 5px #404040;
  background-color: rgba(130, 30, 30, 0.6); 
  border-radius: 10px;
  word-break: break-all;
}

.displayNone{display: none !important;}

.alignLeft{text-align: left;}
.alignCenter{text-align: center;}
.alignRight{text-align: right;}

.alignSelf-FlexStart{ align-self: flex-start; }
.alignSelf-FlexEnd{ align-self: flex-end; }
.alignSelf-Center{ align-self: center; }

.alignItems-FlexStart{ align-items: flex-start; }
.alignItems-FlexEnd{ align-items: flex-end; }
.alignItems-Center{ align-items: center; }

.flexDirectionRow{ flex-direction: row; }
.flexDirectionColumn{ flex-direction: column; }

.blockLeft
{
  display: block;
  text-align: left;
}

.blockRight
{
  display: block;
  text-align: right;
}

.blockCenter
{
  display: block;
  text-align: center;
  margin: auto;
}

.blockJustify
{
  display: block;
  text-align: justify;
}

.centerText{text-align: center;}

.sfondoTabella
{
  display: flex;
  background-color: rgba(230, 230, 230, 0.8);
  box-shadow: 0 0 3px 3px rgba(130, 30, 30, 0.5);
  color: black;
  font-family: Patua One;
  padding: 10px;
  margin: 20px;
  border-top-style: solid;
  border-top-color: rgb(180,50,50);
  border-radius: 5px;
}

.tabella
{
  width: 100%;
  height: auto;
  text-align: center;
  margin: 0px auto;
  padding:10px;
  table-layout: fixed;
}

.tabella > * {font-family: Roboto Slab;}

.tabella th
{
  font-size: 16px;
  padding: 10px;
  border-radius: 3px;
  margin: auto;
  color: rgb(240, 240, 240);
  background-color: rgba(130,30,30,0.9);
  word-break: break-all;
}

.widthTH{width: 80px;}

.tabella tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD)
{
  background-color: rgba(30, 30, 30,0.8);
  color: white;
}

.tabellaFixedPriceMenus tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD),
.tabellaPiatti tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD),
.tabellaDesserts tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD),
.tabellaDrinks tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD),
.tabellaIngredienti tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD),
.tabellaSuppliers tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD),
.tabellaPurchaseOrders tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD),
.tabellaCustomers tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD),
.tabellaPayments tbody tr:not(.whiteTR) td:not(.greenTD):not(.redTD)
{
  background-color: rgba(0, 0, 0, 0.75);
}

.whiteTR
{
  background-color: rgba(230, 230, 230,0.8) !important;
  color: black;
}

.tabella td
{
  border-radius: 3px;
  padding: 10px;
  word-break: break-all;
}

.cancellaRigaTabella
{
  background-color: rgba(130, 30, 30, 0.7) !important;
  animation-name: AnimazioneEliminaRigaTabella;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.cancellaRigaTabella > td
{
  background-color: rgba(130, 30, 30, 0.7) !important;
  box-shadow: 0 0 10px 10px rgba(130, 30, 30, 0.5);
}

.cancellaRigaTabellaVerde
{
  background-color: rgba(30, 130, 30, 0.7) !important;
  animation-name: AnimazioneEliminaRigaTabella;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.cancellaRigaTabellaVerde > td
{
  background-color: rgba(130, 130, 30, 0.7) !important;
  box-shadow: 0 0 10px 10px rgba(30, 130, 30, 0.5);
}

@keyframes AnimazioneEliminaRigaTabella
{
  0%  {opacity: 1; transform: scale(1,1);}
  10% {opacity: 0.8; transform: scale(1.5,1.5);}
  50% {opacity: 1; transform: scale(1,1);}
  95% {opacity: 0; transform: scale(1,1);}
  100% {opacity: 0; display: none;}
}

.redTD
{
  background: none;
  background-color: rgba(130, 30, 30, 0.85);
  transition: 0.5s;
}

.redTD:hover
{
  background-color: rgba(110, 20, 20, 0.85);
  box-shadow: 0 0 4px 4px rgba(130, 30, 30, 0.7);
  transition: 0.5s;
}

.redTD button, .redTD a
{
  display: block;
  width: 100%;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  color: rgb(220,220,220);
  transition: 0.5s;
}

.redTD button:hover, .redTD a:hover
{
  color: rgb(200,200,50);
  transition: 0.5s;
}

.greenTD
{
  background-color: rgba(30, 130, 30, 0.85);
  transition: 0.5s;
}

.greenTD:hover
{
  background-color: rgba(20, 110, 20, 0.85);
  box-shadow: 0 0 4px 4px rgba(30, 130, 30, 0.7);
  transition: 0.5s;
}

.greenTD button, .greenTD a
{
  display: block;
  width: 100%;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  color: rgb(220,220,220);
  transition: 0.5s;
}

.greenTD button:hover, .greenTD a:hover
{
  color: rgb(200,200,50);
  transition: 0.5s;
}

.height100{height: 100%;}

.padding0{padding: 0px !important;}
.padding5{padding: 5px !important;}
.padding10{padding: 10px !important;}
.padding20{padding: 20px !important;}
.padding30{padding: 30px !important;}
.padding40{padding: 40px !important;}
.padding50{padding: 50px !important;}

.paddingTop0{padding-top: 0px !important;}
.paddingTop5{padding-top: 5px !important;}
.paddingTop10{padding-top: 10px !important;}
.paddingTop20{padding-top: 20px !important;}
.paddingTop30{padding-top: 30px !important;}
.paddingTop40{padding-top: 40px !important;}
.paddingTop50{padding-top: 50px !important;}

.paddingBottom0{padding-bottom: 0px !important;}
.paddingBottom5{padding-bottom: 5px !important;}
.paddingBottom10{padding-bottom: 10px !important;}
.paddingBottom20{padding-bottom: 20px !important;}
.paddingBottom30{padding-bottom: 30px !important;}
.paddingBottom40{padding-bottom: 40px !important;}
.paddingBottom50{padding-bottom: 50px !important;}

.paddingLeft0{padding-left: 0px !important;}
.paddingLeft5{padding-left: 5px !important;}
.paddingLeft10{padding-left: 10px !important;}
.paddingLeft20{padding-left: 20px !important;}
.paddingLeft30{padding-left: 30px !important;}
.paddingLeft40{padding-left: 40px !important;}
.paddingLeft50{padding-left: 50px !important;}

.paddingRight0{padding-right: 0px !important;}
.paddingRight5{padding-right: 5px !important;}
.paddingRight10{padding-right: 10px !important;}
.paddingRight20{padding-right: 20px !important;}
.paddingRight30{padding-right: 30px !important;}
.paddingRight40{padding-right: 40px !important;}
.paddingRight50{padding-right: 50px !important;}

.paddingV0{padding-top: 0px !important; padding-bottom: 0px !important;}
.paddingV5{padding-top: 5px !important; padding-bottom: 5px !important;}
.paddingV10{padding-top: 10px !important; padding-bottom: 10px !important;}
.paddingV20{padding-top: 20px !important; padding-bottom: 20px !important;}
.paddingV30{padding-top: 30px !important; padding-bottom: 30px !important;}
.paddingV40{padding-top: 40px !important; padding-bottom: 40px !important;}
.paddingV50{padding-top: 50px !important; padding-bottom: 50px !important;}

.paddingH0{padding-left: 0px !important; padding-right: 0px !important;}
.paddingH5{padding-left: 5px !important; padding-right: 5px !important;}
.paddingH10{padding-left: 10px !important; padding-right: 10px !important;}
.paddingH20{padding-left: 20px !important; padding-right: 20px !important;}
.paddingH30{padding-left: 30px !important; padding-right: 30px !important;}
.paddingH40{padding-left: 40px !important; padding-right: 40px !important;}
.paddingH50{padding-left: 50px !important; padding-right: 50px !important;}

.margin0{margin: 0px !important;}
.margin0Auto{margin: 0 auto !important;}
.margin5Auto{margin: 5px auto !important;}
.margin10Auto{margin: 10px auto !important;}
.margin20Auto{margin: 20px auto !important;}
.margin30Auto{margin: 30px auto !important;}
.margin40Auto{margin: 40px auto !important;}
.margin50Auto{margin: 50px auto !important;}

.margin0{margin: 0px !important;}
.margin5{margin: 5px !important;}
.margin10{margin: 10px !important;}
.margin20{margin: 20px !important;}
.margin30{margin: 30px !important;}
.margin40{margin: 40px !important;}
.margin50{margin: 50px !important;}

.marginTop0{margin-top: 0px !important;}
.marginTop5{margin-top: 5px !important;}
.marginTop10{margin-top: 10px !important;}
.marginTop20{margin-top: 20px !important;}
.marginTop30{margin-top: 30px !important;}
.marginTop40{margin-top: 40px !important;}
.marginTop50{margin-top: 50px !important;}

.marginBottom0{margin-bottom: 0px !important;}
.marginBottom5{margin-bottom: 5px !important;}
.marginBottom10{margin-bottom: 10px !important;}
.marginBottom20{margin-bottom: 20px !important;}
.marginBottom30{margin-bottom: 30px !important;}
.marginBottom40{margin-bottom: 40px !important;}
.marginBottom50{margin-bottom: 50px !important;}

.marginRight0{margin-right: 0px !important;}
.marginRight5{margin-right: 5px !important;}
.marginRight10{margin-right: 10px !important;}
.marginRight20{margin-right: 20px !important;}
.marginRight30{margin-right: 30px !important;}
.marginRight40{margin-right: 40px !important;}
.marginRight50{margin-right: 50px !important;}

.marginLeft0{margin-left: 0px !important;}
.marginLeft5{margin-left: 5px !important;}
.marginLeft10{margin-left: 10px !important;}
.marginLeft20{margin-left: 20px !important;}
.marginLeft30{margin-left: 30px !important;}
.marginLeft40{margin-left: 40px !important;}
.marginLeft50{margin-left: 50px !important;}

.marginV0{margin-bottom: 0px !important; margin-top: 0px !important;}
.marginV5{margin-bottom: 5px !important; margin-top: 5px !important;}
.marginV10{margin-bottom: 10px !important; margin-top: 10px !important;}
.marginV20{margin-bottom: 20px !important; margin-top: 20px !important;}
.marginV30{margin-bottom: 30px !important; margin-top: 30px !important;}
.marginV40{margin-bottom: 40px !important; margin-top: 40px !important;}
.marginV50{margin-bottom: 50px !important; margin-top: 50px !important;}

.marginH{margin-left: 0px !important; margin-right: 0px !important;}
.marginH5{margin-left: 5px !important; margin-right: 5px !important;}
.marginH10{margin-left: 10px !important; margin-right: 10px !important;}
.marginH20{margin-left: 20px !important; margin-right: 20px !important;}
.marginH30{margin-left: 30px !important; margin-right: 30px !important;}
.marginH40{margin-left: 40px !important; margin-right: 40px !important;}
.marginH50{margin-left: 50px !important; margin-right: 50px !important;}

.borderRadius3{border-radius: 3px !important;}
.borderRadius5{border-radius: 5px !important;}
.borderRadius10{border-radius: 10px !important;}
.borderRadius15{border-radius: 15px !important;}
.borderRadius20{border-radius: 20px !important;}
.borderRadius25{border-radius: 25px !important;}
.borderRadius30{border-radius: 30px !important;}

.minWidth50{ min-width: 50px !important; }
.minWidth80{ min-width: 80px !important; }
.minWidth100{ min-width: 100px !important; }
.minWidth150{ min-width: 150px !important; }
.minWidth200{ min-width: 200px !important; }
.minWidth250{ min-width: 250px !important; }
.minWidth300{ min-width: 300px !important; }

.linkA{color: #C83232;}
.linkA:hover{color: #32C832;}

.blackText{color: black !important;}
.whiteText{color: rgb(230,230,230) !important;}
.redText{color: #C83232 !important;}
.greenText{color: #32C832 !important;}
.blueText{color: #639fe2 !important;}
.yellowText{color: #f4ec4e !important;}

.boxShadowGrigio{ box-shadow: 0 0 50px 5px rgb(30,30,30) inset; }

.fontSize10{font-size: 10px !important;}
.fontSize12{font-size: 12px !important;}
.fontSize14{font-size: 14px !important;}
.fontSize16{font-size: 16px !important;}
.fontSize18{font-size: 18px !important;}
.fontSize20{font-size: 20px !important;}
.fontSize22{font-size: 22px !important;}
.fontSize24{font-size: 24px !important;}
.fontSize26{font-size: 26px !important;}
.fontSize28{font-size: 28px !important;}
.fontSize30{font-size: 30px !important;}
.fontSize32{font-size: 32px !important;}
.fontSize34{font-size: 34px !important;}
.fontSize36{font-size: 36px !important;}
.fontSize38{font-size: 38px !important;}
.fontSize40{font-size: 40px !important;}
.fontSize42{font-size: 42px !important;}

.fontBold{font-weight: bold;}
.fontNormal{font-weight: normal;}

.textShadowDark{text-shadow: 2px 2px 5px #404040;}
.textShadowLight{text-shadow: 1px 1px 5px #e6e6e6;}

.iconSidebarProfile
{
  padding-top: 20px;
  padding-bottom: 10px;
  display: block;
  text-align: center;
}

.nomeTavoloTabella
{
  display: inline-table;
  vertical-align: top;
  padding: 20px;
}

.pagNum
{
  width: 30px;
  height: 30px;
  padding: 10px;
  margin: 5px;
  color: rgb(220,220,220);
  background-color: rgba(30,30,30,0.8);
  border-radius: 3px;
  border: none;
  box-shadow: 0 0 2px 2px rgba(30, 30, 30, 0.8);
  cursor:pointer;
  font-weight: bold;
  transition: 0.5s;
}

.pagNum:hover:not(.pagBtnActive)
{
  color:white;
  background-color: rgba(160,40,40,0.9);
  box-shadow: 0 0 4px 4px rgba(220, 220, 220, 0.8);
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

.pagBtnActive
{
  color:white;
  background-color: rgba(160,40,40,0.9);
  box-shadow: 0 0 4px 4px rgba(220, 220, 220, 0.8);
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

.pagBigger
{
  color:white;
  background-color: rgba(180,180,30,0.9);
  box-shadow: 0 0 4px 4px rgba(130, 130, 30, 0.8);
}

.spaceUsedBar
{
  background-color: rgba(30,130,30,0.6);
  box-shadow: 0 0 2px 2px rgba(40, 150, 40, 0.8);
  height: 20px;
  margin: 0 auto;
  margin-left: 0px !important;
  padding: 0;
  border-radius: 0 3px 3px 0;
}

.spaceUsedBarRed
{
  background-color: rgba(130,30,30,0.6);
  box-shadow: 0 0 2px 2px rgba(150, 40, 40, 0.8);
  height: 20px;
  margin: 0px auto;
  margin-right: 0px !important;
  padding: 0;
  border-radius: 3px 0 0 3px;
}

.spaceUsedBarText
{
  position: relative;
  top: -20px;
  font-size: 13px;
}

.subscriptionBar
{
  height: 20px;
  margin: 0 auto;
  margin-left: 0px !important;
  padding: 0;
  border-radius: 3px;
  font-size: 12px;
}

.statisticsBar
{
  background-color: rgba(30,130,30,0.6);
  box-shadow: 0 0 2px 2px rgba(40, 150, 40, 0.8);
  height: 30px;
  margin: 0 auto;
  margin-left: 0px !important;
  padding: 0;
  border-radius: 5px;
}

.canvasRow
{
  display: flex;
  height: 300px;
  background-color: rgba(230, 230, 230, 0.8);
  box-shadow: 0 0 3px 3px rgba(130, 130, 30, 0.5);
  padding: 10px;
  border-top-style: solid;
  border-top-color: rgb(180,180,50);
  border-radius: 5px;
}

.blackBackground
{
  display: flex;
  background-color: rgba(30, 30, 30, 0.6);
  box-shadow: 0 0 3px 3px rgba(130, 30, 30, 0.5);
  font-family: Patua One;
  padding: 10px;
  margin: 20px;
  border-top-style: solid;
  border-top-color: rgb(180,50,50);
  border-radius: 5px;
}

.greenBar { background-color: rgba(30,130,30,0.6); box-shadow: 0 0 2px 2px rgba(40, 150, 40, 0.8);}
.yellowBar { background-color: rgba(130,130,30,0.6); box-shadow: 0 0 2px 2px rgba(150, 150, 40, 0.8);}
.redBar { background-color: rgba(130,30,30,0.6); box-shadow: 0 0 2px 2px rgba(150, 40, 40, 0.8);}

.titoloTabellaYellow
{
  background-color: rgba(130,130,30,0.6) !important;
  box-shadow: 0 0 2px 2px rgba(150, 150, 40, 0.8) !important;
  font-size: 20px !important;
}

.titoloTabellaGreen
{
  background-color: rgba(30,130,30,0.6) !important;
  box-shadow: 0 0 2px 2px rgba(40, 150, 40, 0.8) !important;
  font-size: 20px !important;
}

.titoloTabellaRed
{
  background-color: rgba(130,30,30,0.6) !important;
  box-shadow: 0 0 2px 2px rgba(150, 40, 40, 0.8) !important;
  font-size: 20px !important;
}

.titoloTabellaSilver
{
  background-color: rgba(40,40,40,0.6) !important;
  box-shadow: 0 0 2px 2px rgba(250, 250, 250, 0.8) !important;
  font-size: 20px !important;
}

.glowRed
{
  box-shadow: 0px 0px 5px 5px #bb4444;
  margin-left: 10px;
  margin-right: 10px;
}

.glowGreen
{
  box-shadow: 0px 0px 5px 5px #44bb44;
  margin-left: 10px;
  margin-right: 10px;
}

.glowYellow
{
  box-shadow: 0px 0px 5px 5px #bbbb44;
  margin-left: 10px;
  margin-right: 10px;
}

.screenshotHome
{
  height: auto;
  border-radius: 3px;
  border-color: rgba(180,30,30,0.6);
  box-shadow: 0 0 2px 2px rgba(210, 50, 50, 0.8) !important;
}

.RigaHome
{
  background-color: rgba(20,20,20,0.8);
  border-radius: 3px;
  border-color: rgba(180,180,180,0.6);
  box-shadow: 0 0 5px 5px rgba(210, 210, 210, 0.3) !important;
}

.titoloRed
{
  min-width: 250px;
  background-color: rgba(130,30,30,0.6) !important;
  box-shadow: 0 0 2px 2px rgba(150, 40, 40, 0.8) !important;
  font-size: 20px !important;
  border-radius: 3px;
}

.titoloYellow
{
  min-width: 250px;
  background-color: rgba(130,130,30,0.6) !important;
  box-shadow: 0 0 2px 2px rgba(150, 150, 40, 0.8) !important;
  font-size: 20px !important;
  border-radius: 3px;
}

.titoloGreen
{
  min-width: 250px;
  background-color: rgba(30,130,30,0.6) !important;
  box-shadow: 0 0 2px 2px rgba(40, 150, 40, 0.8) !important;
  font-size: 20px !important;
  border-radius: 3px;
}

.titoloSilver
{
  min-width: 250px;
  background-color: rgba(40,40,40,0.6) !important;
  box-shadow: 0 0 2px 2px rgba(250, 250, 250, 0.8) !important;
  font-size: 20px !important;
  border-radius: 3px;
}

.imgStar
{
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 10px;
}

.financesOnlineAwardImage
{
  width: 273px !important;
  height: auto !important;
  margin: 20px auto !important;
  border-radius: 3px;
}

.financesOnlineQualityImage
{
  width: 200px !important;
  height: auto !important;
  margin: 20px auto !important;
}

.buttonGlowingYellow
{
  background-color: rgba(230, 230, 50, 0.5); 
  box-shadow: 0 0 5px 5px yellow;
  color: rgb(250,250,250);
}

.buttonGlowingYellow:hover
{
  background-color: rgba(250, 250, 50, 0.6); 
  box-shadow: 0 0 10px 10px yellow;
  color: rgb(255,255,255);
}

.buttonGlowingRed
{
  background-color: rgba(230, 50, 50, 0.5); 
  box-shadow: 0 0 5px 5px red;
  color: rgb(250,250,250);
}

.buttonGlowingRed:hover
{
  background-color: rgba(250, 50, 50, 0.6); 
  box-shadow: 0 0 10px 10px red;
  color: rgb(255,255,255);
}

.buttonGlowingGreen
{
  background-color: rgba(50, 230, 50, 0.5); 
  box-shadow: 0 0 5px 5px green;
  color: rgb(250,250,250);
}

.buttonGlowingGreen:hover
{
  background-color: rgba(50, 250, 50, 0.6); 
  box-shadow: 0 0 10px 10px green;
  color: rgb(255,255,255);
}


.hoverTextYellow
{
  transition: all 0.4s ease-in-out;
}

.hoverTextYellow:hover
{
  color: rgb(230,230,30);
}

.ConfirmNotifyCenterScreen
{
  position: fixed;
  top: 50%;
  left: 15%;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

.ButtonGlowingHome
{
  font-size: 24px;
  width: 300px;
  min-height: 50px;
  max-width: 80%;
}

.width400 { width: 400px; }

.toggleShow{display: none;}
.deleteToggleButton{display: none;}

.menuSideBarToggle{display: none;}

.IconOminoProfilo:after{content:url("../img/profileIcon.png");}

.comparsaRigaDaSinistraStart{transform: scale(1.0);}

.comparsaRigaDaSinistra
{
  position: relative;
  animation-name: AnimazioneScala;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes ComparsaRigaDaSinistra
{
  100% {transform: translateX(0%);}
}

.comparsaRigaDaDestraStart{transform: scale(1.0);}

.comparsaRigaDaDestra
{
  position: relative;
  animation-name: AnimazioneScala;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes ComparsaRigaDaDestra
{
  100% {transform: translateX(0%);}
}

.bloccoCentraleStart{transform: scale(1.0);}

.animazioneScala
{
  position: relative;
  animation-name: AnimazioneScala;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.size1P2OnHover
{
  transform: scale(1.0,1.0);
  transition: 0.5s;
}

.size1P2OnHover:hover
{
  transform: scale(1.2,1.2);
  transition: 0.5s;
}

@keyframes AnimazioneScala
{
  100% {transform: scale(1.0);}
}

@media only screen and (max-width: 992px)
{
  .leftContainerCol{width: 25%;}
  .contentContainerCol{width: 75%;}
  .tabellaScrollLaterale
  {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media only screen and (max-width: 768px)
{
  .widthTH{width: 50px;}

  .col100, .col95, .col90, .col85, .col80, .col75, .col70, .col66, .col65, .col60, .col55, .col50,
  .col45, .col40, .col35, .col33, .col30, .col25, .col20, .col15, .col10, .colDiv12, .col5,
  .leftContainerCol,.contentContainerCol {width: 100%;}

  .sezioneSfondo{height: 100vh; overflow: auto;}
  .sezioneSfondoHome{background-repeat: repeat-y; background-position: center; background-size: auto;}
  .topContainer{height: auto;}
  .contentContainer{height: 100vh; overflow: auto;}
  .rowTopContainer
  {
    height: auto;
    padding: 30px;
    background-color: rgba(20,20,20,0.5);
    border-radius: 10px;
  }
  .pagContainer{width: 50%;}
  .menuSideBarToggle{display: flex;}
  .menuSideBar{display: none;}

  .buttonStampaOrdine{ align-self: center; }
  .buttonAsSubmit:not(.buttonStampaOrdine),.buttonCool:not(.buttonStampaOrdine), .greenSubmit:not(.buttonStampaOrdine){ width: 50%; margin: 20px auto; }

  .canvasRow { height: 200px; }
  .hideMobile {display: none;}

  .ConfirmNotifyCenterScreen{ left: 0%; width: 100%; }
}