:root{
  --begiolino:#cfc5c1;
  --grigione:#373737;
  --rosso:#ff0000;
  --carica:#669966;
  --scarica:#6699CC;
  --ocra:#cca43b;
}

 * {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

a, button, button:focus, button:active, input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea, select, input[type="checkbox"] {text-decoration:none !important; outline:none !important; box-shadow: none !important;}

input[type="text"]:focus,input[type="password"]:focus, select:focus {border-color:var(--begiolino) !important}

body{padding:0; margin: 0; background: #fff; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 1em;}

#logout{position:absolute; top:10px; right:10px;}

#ajax-loader {
	display: none;
  background-color: rgba(0,0,0,0.7);
  position: fixed;
  z-index: 1800 !important;
  min-width: 100%;
  min-height:100%;
  height: 100vh;
  top:0;
}
#ajax-loader div {
	display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height:100%;
  height: 100vh;
}
#ajax-loader div img { max-width:140px }

.logincontainer{width:100%; min-height: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;}
.boxlogin{max-width: 300px; border: var(--begiolino) 2px solid; padding: 16px; border-radius: 12px}
.logologin svg, .logo svg {width:200px}
.titlelogin{font-size: 1em}
.alert{color: var(--rosso);}
.logo{margin-top: 16px; margin-bottom: 16px}
.navbar{background: none !important}
.btn-menu{margin-left: 4px; margin-right: 4px}

.btn-menu{text-transform: uppercase; border:#444 1px solid; color: #000}
.btn-menu:hover{background-color: #444; color: #fff}

.btn{background-color: var(--grigione); text-transform: uppercase; color: #fff; font-weight: 500; border:var(--grigione) 2px solid}
.btn:hover{background-color: #fff; text-transform: uppercase; color:var(--grigione); border:var(--grigione) 2px solid}

.errore{color:#ff0000}
h1{text-transform: uppercase; font-size: 1.4em}
#inline-msg{display: none; margin-top: 12px; padding: 6px; border-radius: 6px; text-align: center; font-size: 1.1em; color: #333;}
.icona{text-align: center; margin-bottom: 18px}
.icona svg{width: 80px; height: 80px}
label{font-weight: 300; font-size: 0.9em}
.field-form{max-width: 200px;} 

.carica svg {fill: var(--carica);}
.btn-carica svg {width:40px; fill:#ffffff}
.btn-carica{background-color: var(--carica); text-transform: uppercase; color: #fff; font-weight: 500; border:var(--carica) 2px solid}
.btn-carica:hover, .btn-carica-act {background-color: #fff; text-transform: uppercase; color: var(--carica); font-weight: 500; border:var(--carica) 2px solid}
.btn-carica:hover svg, .btn-carica-act svg {fill: var(--carica);}

.scarica svg {fill: var(--scarica);}
.btn-scarica svg {width:40px; fill:#ffffff}
.btn-scarica{background-color: var(--scarica); text-transform: uppercase; color: #fff; font-weight: 500; border:var(--scarica) 2px solid}
.btn-scarica:hover, .btn-scarica-act {background-color: #fff; text-transform: uppercase; color: var(--scarica); font-weight: 500; border:var(--scarica) 2px solid}
.btn-scarica:hover svg, .btn-scarica-act svg {fill: var(--scarica);}

.btn-gen svg {width:40px; fill:#ffffff}
.btn-gen{background-color: var(--grigione); text-transform: uppercase; color: #fff; font-weight: 500; border:var(--grigione) 2px solid}
.btn-gen:hover, .btn-gen-act{background-color: #fff; text-transform: uppercase; color: var(--grigione); font-weight: 500; border:var(--grigione) 2px solid}
.btn-gen:hover svg, .btn-gen-act svg {fill: var(--grigione);}

.btn-customers svg {width:40px; fill:#ffffff}
.btn-customers{background-color: var(--ocra); text-transform: uppercase; color: #fff; font-weight: 500; border:var(--ocra) 2px solid}
.btn-customers:hover, .btn-gen-act{background-color: #fff; text-transform: uppercase; color: var(--ocra); font-weight: 500; border:var(--ocra) 2px solid}
.btn-customers:hover svg, .btn-gen-act svg {fill: var(--ocra);}


.carica{color: var(--carica);}
.scarica{color: var(--scarica);}
#last-item{font-size: 0.8em; text-align: center;}

#warehouse table th{background-color: #333; color: #fff; font-size: 0.8em}
#warehouse table tr:hover td {
    background-color: #f4e8df;
  }
.small-xs{display: none}

.btn-edit, .btn-edit-categoria, .btn-edit-customer, .btn-attach {padding: 0 6px 0px 6px !important; height: auto;}
.btn-edit svg, .btn-edit-categoria svg, .btn-edit-customer svg, .btn-attach svg {width: 14px; height: 14px; fill: #ffffff}
.btn-edit:hover svg, .btn-edit-categoria:hover svg, .btn-edit-customer:hover svg, .btn-attach:hover svg {fill: #333333}


#conferma-modifica{text-align: center; font-weight: bold; color: #fff; background: var(--carica); border-radius: 12px; padding: 8px; margin-top: 10px}
#conferma-elimina{text-align: center; font-weight: bold; color: #fff; background: var(--rosso); border-radius: 12px; padding: 8px; margin-top: 10px}

.btn-int-black svg {width:20px; fill:#ffffff}
.btn-int-black{background-color: var(--grigione); text-transform: uppercase; color: #fff; font-weight: 500; border:var(--grigione) 2px solid}
.btn-int-black:hover{background-color: #fff; text-transform: uppercase; color: var(--grigione); font-weight: 500; border:var(--grigione) 2px solid}
.btn-int-black:hover svg {fill: var(--grigione);}

.btn-int-green svg {width:20px; fill:#ffffff}
.btn-int-green{background-color: var(--carica); text-transform: uppercase; color: #fff; font-weight: 500; border:var(--carica) 2px solid}
.btn-int-green:hover{background-color: #fff; text-transform: uppercase; color: var(--carica); font-weight: 500; border:var(--carica) 2px solid}
.btn-int-green:hover svg {fill: var(--carica);}

.btn-int-red svg {width:20px; fill:#ffffff}
.btn-int-red{background-color:#cc0000; text-transform: uppercase; color: #fff; font-weight: 500; border:#cc0000 2px solid}
.btn-int-red:hover{background-color: #fff; text-transform: uppercase; color: #cc0000; font-weight: 500; border:#cc0000 2px solid}
.btn-int-red:hover svg {fill: #cc0000;}

.btn-exit {padding: 2px 6px 0px 6px !important; height: auto; font-size: 0.6em}
.btn-exit svg{width: 20px; height: 20px; fill: #ffffff}
.btn-exit:hover svg{fill: #333333}

#btn-manage-categories {position:absolute; top:10px; left:10px;}
.btn-manage {padding: 2px 6px 0px 6px !important; background: var(--ocra); border: var(--ocra) 2px solid; height: auto; font-size: 0.6em}
.btn-manage svg{width: 20px; height: 20px; fill: #ffffff}
.btn-manage:hover {background:#fff; color: var(--ocra); border: var(--ocra) 2px solid;}
.btn-manage:hover svg{fill: var(--ocra);}

.rwcustomer {cursor: pointer;}
.table-categorie {font-size: 0.9em; font-weight: 500}
#form-edit-container #note {font-size: 0.9em}


@media (max-width: 768px) {
.cell-lg{display: none}
.small-xs{display: block; font-size: 0.7em}
}

@media (max-width: 575px) {
  .btn-menu{font-size: 0.7em}
  h1{font-size: 1.1em}
}