/* ===================== */
/* FONT LOGIN            */
/* ===================== */
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap");

.login,
.login .content,
.login .content .login-form,
.login .content .form-control,
.login .content label,
.login .content h3,
.login .content h4,
.login .content p,
.login .content a,
.login .content span,
.login .content button,
.login-form .btn-success {
  font-family: "Titillium Web", sans-serif !important;
}

/* Scritta "Accesso" in alto: bianca */
.login .content h3,
.login .content .form-title {
  color: #ffffff !important;
}

/* ===================== */
/* COLORI PERSONALIZZATI */
/* ===================== */
:root {
  --menu-blu-scuro: #1a2a3a;
  --bianco: #ffffff;
  --grigio-chiaro: #f5f5f5;
}

/* ===================== */
/* SCHERMATA DI LOGIN    */
/* ===================== */
.login {
  background: #161b33 !important;
}

.login .content {
  background: #161b33 !important;
}

.login-form .btn-success {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

.login .content .form-control {
  border-color: #161b33 !important;
  background-color: var(--grigio-chiaro) !important;
  color: black !important;
}

.login .content .email-activation-form > p {
  color: var(--bianco);
}

/* Sfondo completo pagina login */
body.login,
html body.login,
.login,
.login .content,
.login .content .login-form,
.login .logo,
.login .copyright {
  background: #161b33 !important;
}

/* ===================== */
/* BARRA MENU (NAVBAR)   */
/* ===================== */
.page-header.navbar {
  background-color: var(--menu-blu-scuro);
  border: solid 1px var(--menu-blu-scuro);
}

@media (max-width: 767px) {
  .page-header.navbar .page-top {
    background-color: var(--menu-blu-scuro);
  }
}

/* Testo e ICONE BIANCHE nella navbar blu scuro */
.page-header.navbar,
.page-header.navbar a,
.page-header.navbar span,
.page-header.navbar i,
.page-header.navbar .fa,
.page-header.navbar .glyphicon,
.page-header.navbar .icon,
.page-header.navbar [class*="fa-"],
.page-header.navbar [class*="glyphicon-"],
.page-header.navbar [class*="icon-"],
.page-header.navbar .navbar-nav > li > a,
.page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle,
.page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle > *,
.page-header.navbar
  .top-menu
  .navbar-nav
  > li.dropdown-user
  > .dropdown-toggle
  > .username,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i,
.page-header.navbar .hor-menu .navbar-nav > li > a,
.page-header.navbar .hor-menu .navbar-nav > li > a > i {
  color: var(--bianco) !important;
}

/* Hover sui menu della navbar */
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle {
  background-color: #ffffff20;
}

/* ===================== */
/* DROPDOWN NELLA NAVBAR */
/* ===================== */
.page-header.navbar .dropdown-menu,
.page-header.navbar .dropdown-menu a,
.page-header.navbar .dropdown-menu span,
.page-header.navbar .dropdown-menu i,
.page-header.navbar .dropdown-menu .fa,
.page-header.navbar .dropdown-menu .glyphicon,
.page-header.navbar .dropdown-menu .icon,
.page-header.navbar .dropdown-menu [class*="fa-"],
.page-header.navbar .dropdown-menu [class*="glyphicon-"],
.page-header.navbar .dropdown-menu [class*="icon-"],
.page-header.navbar .dropdown-menu li > a,
.page-header.navbar .dropdown-menu li > a > i,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu > li > a,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-submenu > a {
  color: black !important;
}

/* Hover sulle voci del dropdown */
.page-header.navbar .dropdown-menu > li > a:hover,
.page-header.navbar .dropdown-menu > li > a:focus,
.page-header.navbar .dropdown-menu > li > a:hover > i,
.page-header.navbar .dropdown-menu > li > a:hover > .fa,
.page-header.navbar
  .top-menu
  .navbar-nav
  > li.dropdown
  .dropdown-menu
  > li
  > a:hover {
  background-color: var(--grigio-chiaro);
  color: black !important;
}

/* ============================================ */
/* SFONDO DROPDOWN NOTIFICHE E PROFILO UTENTE  */
/* ============================================ */
.page-header.navbar .dropdown-notification .dropdown-menu,
.page-header.navbar .dropdown-user .dropdown-menu {
  background-color: #f5f5f5 !important;
}

/* ============================================ */
/* TESTO BIANCO HEADER/FOOTER TENDINA NOTIFICHE */
/* ============================================ */
.page-header.navbar .dropdown-notification .dropdown-menu .text-left,
.page-header.navbar .dropdown-notification .dropdown-menu .text-left a,
.page-header.navbar .dropdown-notification .dropdown-menu .text-center,
.page-header.navbar .dropdown-notification .dropdown-menu .text-center a {
  color: #ffffff !important;
}

/* ============================================ */
/* ICONE E SIMBOLI NEL RESTO DEL SITO (SCURI)  */
/* ============================================ */
.page-content .fa,
.page-content .glyphicon,
.page-content .icon,
.page-content [class*="fa-"],
.page-content [class*="glyphicon-"],
.page-content [class*="icon-"],
.page-content i,
.portlet .fa,
.portlet .glyphicon,
.portlet i {
  color: var(--menu-blu-scuro);
}

/* Icona bianca nei pulsanti CREA */
.btn-primary i,
.btn-primary .fa,
.btn-primary [class*="fa-"],
.btn-primary [class*="icon-"] {
  color: #ffffff !important;
}

/* ===================== */
/* FOOTER                */
/* ===================== */
.page-footer {
  height: auto;
  background-color: var(--menu-blu-scuro);
}

.page-footer .text-muted,
.page-footer a,
.page-footer i,
.page-footer .fa,
.page-footer [class*="fa-"],
.page-footer [class*="icon-"],
a .text-muted {
  color: var(--bianco) !important;
}
