/**
 *   @Document   : main.css
 *   @Created on :
 *   @Author     : Virginio Laurini & Giada @ Pingitore Informatica
 *   @Description:
 */

/***********************************
* VARIABLES
***********************************/
:root {
    --primary-color: #0d47a1;
    --primary-color-hover: #1976d2;
}


/***********************************
* GENERAL STYLING
***********************************/
body {
    font-family: verdana, helvetica, sans-serif;
    background-color: #D8F0F0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

 .blur{
     filter: blur(8px);
     -webkit-filter: blur(8px);

     height: 100%;

     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

.non_blur{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    padding: 20px;
    text-align: center;
}


.btn, .input-group-text {
    border-radius: 0;
}

.titolo {
    color: var(--primary-color);
    font-family: "Comic Sans MS", sans-serif;
}


.table-header td {
    background-color: transparent;
    padding: 0;
}

.table-header:hover {
	background-color: rgba(197,216,209, 0.2);
}

.table-header h1 {
    color: darkblue;
    align-self: baseline;
}

a.logo_nuvola {
    text-decoration: none ;
}


/* Rende bianco il background di un campo di input o text_area che sia. Utile se il campo è "disabled" */
.white_field{
    background-color: #fff !important;
}


/***********************************
* Logos area
***********************************/
div.logo-arcobaleno-container {
    vertical-align: bottom;
    display: inline-block;
    text-align: center;
    background-image: url("/img/logo/nuvola.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 80px;
}

div.logo-arcobaleno-container.no-login {
    height: 120px;
}

img#logo-nuvola{
    cursor: pointer;
}

img.logo {
    height: 80px;
}

img.logo.no-login {
    height: 120px;
}

#logo-pingitore:hover {
    cursor: pointer;
}


/***********************************
* Styles for desktop menu
***********************************/

.desktop-menu {
    display: block;
}

.desktop-menu .nuvola_menu_container {
    display: table;
}

.desktop-menu .desktop-menu-item-link {
    display: table-row;
}

.desktop-menu .desktop-menu-item {
    display: table-cell;
}

/***********************************
* Styles for mobile menu
***********************************/
.mobile-menu {
    display: none;
}

.mobile-menu .nuvola_menu_container {
    display: block;
}

.mobile-menu .mobile-menu-item-link {
    display: block;
}

/***********************************
* Media query for small screens
***********************************/
@media (max-width: 767px) {
    .desktop-menu {
        align-content: center;
        display: none;
    }
    .menu_item_text{
        font-size: 5.6vw !important;
        margin-left: 25px;
    }
    .nuvola_menu_container{
        margin-left: 70px;
    }

    .spacing{
        margin-bottom: 2.5rem;
    }

    .row{
        display: flex;
        flex-direction: column;
    }

    .nuvola_menu_item_img{
        width: 150px !important;
        height: 150px !important;
    }

    .mobile-menu {
        display: block;
    }

    /* Hide empty cells on small screens */
    .nuvola_menu_container.empty-cell {
        display: none;
    }

    /* Stack menu items vertically on small screens */
    .mobile-menu .nuvola_menu_container {
        display: block;
        margin-bottom: 10px; /* Add spacing between stacked menu items */
    }

    /* Ensure each menu item takes the full width */
    .mobile-menu .desktop-menu-item {
        display: block;
        width: 100%;
    }
}






/***********************************
* Altro
***********************************/

.special_cnt{
    text-align: center;
    vertical-align: middle;
}

.left_cnt{
    text-align: left !important;
    vertical-align: middle;
}


.dodgerblue{
    color:white !important;
    background-color:dodgerblue !important;
}

