body {
    font-family: 'Titillium Web', sans-serif;
}

p, p.h1, p.h2, p.h3, p.h4, p.h5, p.h6 {
    color: black;
}

.handwriting {
    font-family: 'Tangerine', cursive;
}

.bg-blue {
    background-color: #1a3d7f !important;
    color: white;
}

.bg-gray {
    background-color: #7f899b !important;;
}

.bg-dark-gray {
    background-color: #1d344a !important; /*dark-gray testo=#68707f*/
    color: white !important;
}

.bg-blue-soft {
    background-color: #476891 !important; /*#58779d*/
}

.border-blue {
    border-color: #1a3d7f !important;
}

.border-blue-soft {
    border-color: #476891 !important;
}

.text-blue {
    color: #1a3d7f;
}

.text-blue-soft {
    color: #58779d;
}

.text-gray {
    color: #7f899b;
}

.text-dark-gray {
    color: #68707f;
}

.btn-dark-gray {
    color: #ffffff;
    background-color: #1d344a;
    border-color: #1d344a; }
    .btn-dark-gray:hover {
      color: #ffffff;
      background-color: #7f899b;
      border-color: #7f899b; }
    .btn-dark-gray:focus, .btn-dark-gray.focus {
      box-shadow: 0 0 0 0.2rem rgba(85, 145, 255, 0.5); }
    .btn-dark-gray.disabled, .btn-dark-gray:disabled {
      color: #ffffff;
      background-color: #1d344a;
      border-color: #1a3d7f; }
    .btn-dark-gray:not(:disabled):not(.disabled):active, .btn-dark-gray:not(:disabled):not(.disabled).active,
    .show > .btn-dark-gray.dropdown-toggle {
      color: #ffffff;
      background-color: #7f899b;
      border-color: #7f899b; }
      .btn-dark-gray:not(:disabled):not(.disabled):active:focus, .btn-dark-gray:not(:disabled):not(.disabled).active:focus,
      .show > .btn-dark-gray.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(85, 145, 255, 0.5); }
  

        .btn-gray {
            color: #ffffff;
            background-color: #7f899b;
            border-color: #7f899b; }
            .btn-gray:hover {
              color: #ffffff;
              background-color: #1d344a;
              border-color: #1d344a; }
            .btn-gray:focus, .btn-gray.focus {
              box-shadow: 0 0 0 0.2rem rgba(85, 145, 255, 0.5); }
            .btn-gray.disabled, .btn-gray:disabled {
              color: #ffffff;
              background-color: #7f899b;
              border-color: #1a3d7f; }
            .btn-gray:not(:disabled):not(.disabled):active, .btn-gray:not(:disabled):not(.disabled).active,
            .show > .btn-gray.dropdown-toggle {
              color: #ffffff;
              background-color: #1d344a;
              border-color: #1d344a; }
              .btn-gray:not(:disabled):not(.disabled):active:focus, .btn-gray:not(:disabled):not(.disabled).active:focus,
              .show > .btn-gray.dropdown-toggle:focus {
                box-shadow: 0 0 0 0.2rem rgba(85, 145, 255, 0.5); }
          
.btn-blue-soft {
    color: #ffffff;
    background-color: #476891;
    border-color: #476891;}
    .btn-blue-soft:hover {
        color: #ffffff;
        border-color: #1d344a;
        background-color: #1d344a;}
    .btn-blue-soft:focus, .btn-blue-soft.focus {
        box-shadow: 0 0 0 0.2rem rgba(85, 145, 255, 0.5);}
    .btn-blue-soft.disabled, .btn-blue-soft:disabled {
        color: #ffffff;
        background-color: #7f899b;
        border-color: #7f899b; }
    .btn-blue-soft:not(:disabled):not(.disabled):active, .btn-blue-soft:not(:disabled):not(.disabled).active:focus,
    .show > .btn-blue-soft.btn-gray.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(85, 145, 255, 0.5);
    }

.menu-item {
    color:black;
    display: block;
    padding: 0.5rem 1rem;}

.menu-item:hover, .menu-item:focus {
    color: white !important;
    font-weight: 600 !important;
    background-color: #1a3d7f !important;}


    .menu-item-soft {
        color:black;
        display: block;
        padding: 0.5rem 1rem;}
    
    .menu-item-soft:hover, .menu-item-soft:focus {
        color: white !important;
        font-weight: 600 !important;
        background-color: #476891 !important;}


/*Per i box*/
.card-square {
     height: 0;
     width: 100%;
     display: block; 
     padding-bottom: 100%; }
          
.card-square .card-body {
    position: absolute;
    height: 100%;}

.bg-blue-200 {
    background-color: #90CAF9;
}

.bg-teal-200 {
    background-color: #80CBC4;
}