/* 
Custom CSS
Colori cambiati sul main theme con le variabili definite qui
*/

:root {
    --verde-1: rgba(233, 245, 235, 1);
    --verde-2: rgba(108, 186, 122, 1);
    --verde-3: rgba(35, 152, 56, 1);
    --verde-4: rgba(25, 108, 40, 1);
    --verde-5: rgba(15, 64, 24, 1);
    --text: rgba(33, 33, 33, 1);
    --light-1: rgba(255, 255, 255, 1);
    --light-2: rgba(250, 250, 250, 1);
    --light-3: rgba(245, 245, 245, 1);
    --light-4: rgba(235, 235, 235, 1);
    --light-5: rgba(230, 230, 230, 1);
    --dark-1: rgba(60, 60, 60, 1);
    --dark-2: rgba(45, 45, 45, 1);
    --dark-3: rgba(30, 30, 30, 1);
    --dark-4: rgba(15, 15, 15, 1);
    --dark-5: rgba(0, 0, 0, 1);
}

body {background:var(--light-2)}
h1,h2,h3,h4,h5,h6 { font-family: Sen, sans-serif }
a,body,span,text { font-family: Inter, sans-serif; font-weight: 500;  }
a {color:var(--verde-3)}
a:hover {color:var(--verde-4)}

.form-control:focus {border-color:var(--verde-3)}

.app-auth-container .loghi {flex-direction: column;}
.app-auth-container .loghi img.atoma  {max-width:100px;}
.app-auth-container .loghi img.safetyweb  {max-width:170px;}

.horizontal-menu .azienda .header-safeweb {top:0px;}
.logo.atoma img {height:16px; margin-top:0px}
.logo img {height:28px}
.horizontal-menu .admin .app-content { margin-top: 115px; }
.horizontal-menu .azienda .app-content { margin-top: 70px; }

.nav-item.nav-logout {border-left:1px solid var(--verde-4)}

.offcanvas .logo {padding-left:10px;}
.offcanvas .logo img {height:20px}
.offcanvas-header {height:45px}
.offcanvas .logo.atoma img {height:16px}

.categorie-aziende .btn {border: 1px solid;}
.cat-1 {background: #e6fcf0; color: #4bad48; border-color:#4bad48}
.cat-2 {background: #fff3e3; color: #ff9500; border-color:#ff9500}
.cat-3 {background: #fce3e5; color: #FF4857; border-color:#FF4857}
.cat-4 {background: #e3e3ff; color: #6363ff; border-color:#6363ff}
.cat-5 {background: #DFF0FE; color: #0d6efd; border-color:#0d6efd}
.categorie-aziende .btn:hover {border:1px solid var(--verde-4); background-color: var(--verde-5); color:var(--light-1)}
.griglia-aziende .card {flex-grow:1}
.griglia-aziende a {cursor:pointer; text-decoration: none !important; transition: 0.3s ease all; cursor:pointer}
.griglia-aziende a:hover .card-body h3 {color:var(--verde-3);  }

.lavoratore .page-description-actions .btn-group .btn {background: var(--verde-3); color: var(--light-1)}
.lavoratore .page-description-actions .btn-group .btn.active {background: var(--verde-4); color: var(--light-1)}
.lavoratore .page-description-actions .btn-group .btn:hover {background: var(--verde-4); color: var(--light-1)}

.nav-tabs .nav-link {color:var(--verde-3); opacity:0.75}
.nav-link:hover {color:var(--verde-5)}


@media only screen and (max-width:1199px) {
    header {display: flex; flex-direction: column; position: fixed; top:0; left: 0; right: 0; width:100%; z-index:10020}
    .horizontal-menu .admin .app-content { margin-top: 90px; }
    .horizontal-menu .azienda .app-content { margin-top: 45px; }
    .horizontal-menu .header-atoma,
    .horizontal-menu .header-safeweb  {position:relative; z-index: initial; width:100%; top:initial; display:flex}
    .logo img {height:20px}
    .header-atoma .navbar-brand, .header-safeweb .navbar-brand {padding-top:0; padding-bottom:0; }

}

#loading{
  position:absolute;
  top: 50%;
  left: 0;
  background: #2a2a2a55;
  width: 100%;
  display:block;
  text-align:center;
  height: 300px;
  color: #FFF;
  transform: translateY(-50%);
  z-index: 1000;

}
.card .card-title .badge {
    font-size: 11px !important;
}
.form-group {
  margin-bottom: 1rem;
}
.form-label {
  margin-bottom: 0.5rem;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #555;
  margin-bottom: 10px;
  cursor: pointer;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-control {
  border-radius: 3px;
}

.tableFixHead          { overflow: auto; height: 500px; width:100%;}
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }