/*@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400italic,700);*/

body {
    /*font-family: 'Roboto', sans-serif;*/
    /*Nel padding non posso andare sotto 120px altrimenti posso essere coperto dalla barra di richiesta assistenza*/
    padding-bottom: 120px;
}

#main-header {
    /*   border-bottom: 26px #85c7de solid;*/
    background-color: #85c7de !important;
}


.bg-light {
    background-color: #85c7de !important;
}

h1 {
    margin-bottom: 40px;
}

h2 {
    color: #B0413E !important;
}

/*Per media più grandi di 390 px allargo l'immagine a 100 px tramite @media (min-width: 390px) */
.navbar-brand .img-brand {
    height: 80px;
}

/*Personalizzo pulsante menu nell'offcanvas*/
/*Sotto nella sezione @media (min-width: 768px) vado a definire le dimensioni a schermo intero*/ 
.menu_button {
    min-width: 125px;
    max-width: 125px;
    min-height: 50px;
    max-height: 50px;
    align-content: center;
    --bs-btn-padding-x: 0.0rem;
    --bs-btn-padding-y: 0.0rem;
    --bs-btn-bg: #0000001a;
}

/*Personalizzo pulsante menu in fase di login (al momento c'è solo la FAQ)*/
/*Diversamente dai pulsanti di quando si è loggati, non modifica la forma a seconda delle dimensioni dello schermo*/
/*Per questo motivo diversifico la forma*/ 
.menu_button_login {
    min-width: 75px;
    max-width: 75px;
    min-height: 65px;
    max-height: 65px;
    align-content: center;
    --bs-btn-bg: #0000001a;
}

/* Posiziono l'utente in alto a DX del menu*/
.menu_user {
    position: absolute;
    right: 1.0rem;
    top: 0.5rem;
    font-size: small;
}

/* Posiziono la versione in basso a DX del menu*/
.menu_version {
    position: absolute;
    right: 1.0rem;
    bottom: 0.5rem;
    font-weight: bold;
    font-size: x-small;
    font-style: italic;
    color: gray;
}

/*Larghezza offcanvas e colore di sfondo*/
.offcanvas {
    --bs-offcanvas-width: 250px;
    --bs-offcanvas-bg: #85c7de;
}

/*Evidenzio la voce di menu selezionata in quel momento*/
li.nav-item.active {
    font-weight: bold;
}


/*Sposto a dx e centro verticalmente il pulsante di login per gli utenti non loggati*/
a.btn.btn-primary.login {
    float: right;
    /*margin-top: 6px;*/
}

/*Seguono voci presenti pagina principale dell'utente loggato*/

#home-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.home-menu-item {
    padding: 10px;
    /*background-color: green;*/
    /*font-size: 0.9em;*/
    text-align: justify;
}

.home-menu-item a {  
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center 44px;
    background-size: 200px 200px;
    font-size: 1.5em;  
    width: 200px;
    height: 250px;
    display: block;
    text-align: center;
}


#menu-profilo {  
    background-image: url("../images/file-person-ynEEL_c.svg");  
}

#menu-idoneita {  
    background-image: url("../images/file-medical--fuk7Qm.svg");  
}

#menu-utenti {  
    background-image: url("../images/users--vWNZDA.png");  
}

#menu-log {  
    background-image: url("../images/docs-y62IpZO.png");  
}

/*Per separare dal login pulsante accedi dal testo di password dimenticata*/
.login-col .spacer {
    flex-grow: 0.04;
}

/*Testo giustificato*/
 .text-justify {  
    text-align: justify;
 }
 
/*Sfondo del tooltip bootstrap*/
.custom-tooltip {
--bs-tooltip-bg: orange;
--bs-tooltip-color: white;
--bs-tooltip-opacity: 0.95;
}
 
 /*Per toglire lo spazio tra etichetta e campo conpilabile che di default (.5rem) compare in Bootstrap*/
 .form-label {
    margin-bottom: 0.0rem;
}


/*Rimpicciolisco il font delle tabelle delle idoneità in caso di visualizzazione da cellulare, fino a 576 px*/
/*Questo perche' altrimenti non si vede tutta la tabella con schermi ridotti*/
.table.idoneita {
    font-size: 80%;
}

/*Grassetto delle domande nella FAQ*/
#accordionFaq .accordion-button {
    font-weight: bold;
}

/*Sfondo delle risposte nella FAQ*/
#accordionFaq .accordion-body {
    background-color: azure;
}

/*Qui invece definisco il colore grigio nelle righe delle idoneità per gli schermi ridotti*/
.table > tbody > tr.table-row-detail-small-gray,
.table > tbody > tr.table-row-detail-small-gray > th,
.table > tbody > tr.table-row-detail-small-gray > td {
  /*background-color: var(--bs-table-striped-bg);*/
  background-color: #f2f2f2;
}

/******************************************************/
/*Personalizzazione a seconda dimensioni dello schermo*/
/******************************************************/

/* Qui allargo il logo per schermo > 390 px */
@media (min-width: 390px) {
    .navbar-brand .img-brand {
        height: 100px;
    }
}

@media (min-width: 576px) {
    .table.idoneita {
        font-size: 100%;
    }
}

@media (min-width: 768px) {
  
    .menu_button {
      min-width: 75px;
      max-width: 75px;
      min-height: 65px;
      max-height: 65px;
  }
    
}