/**
 *   @Document   : layout.css
 *   @Created on :
 *   @Author     : Virginio Laurini @ Pingitore Informatica
 *   @Description:
 *
 */
    /* Default settings */
    
    body {
        font: 13px verdana, helvetica, sans-serif;
        padding: 0px;
        margin: auto;
        background-color: whitesmoke;
    }
    /* Titolo del sito */
    
    .titolo {
        margin-top: 5px;
        text-align: left;
        vertical-align: bottom;
        font-size: 4em;
        color: #38477d;
        font-family: 'Kulim Park', sans-serif;
    }
    
    .logo {
        margin-top: 5px;
        text-align: left;
        vertical-align: bottom;
        font-size: 4em;
        color: #38477d;
        font-family: 'Kulim Park', sans-serif;
    }

    .logo-center {
        margin-top: 5px;
        text-align: center;
        vertical-align: bottom;
        font-size: 4em;
        color: #38477d;
        font-family: 'Kulim Park', sans-serif;
    }

    .logo-right {
        margin-top: 5px;
        text-align: right;
        vertical-align: bottom;
        font-size: 4em;
        color: #38477d;
        font-family: 'Kulim Park', sans-serif;
    }
    
    .welcome-text {
        margin-top: 5px;
        text-align: right;
        vertical-align: bottom;
        color: #38477d;
        font-family: 'Kulim Park', sans-serif;
    }
    
    .marquee {
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .marquee p {
        display: inline-block;
        /* padding-top: 100%; */
        animation: marquee 1s linear;
    }
    
    @keyframes marquee {
        0% {
            transform: translate(0, -100%);
        }
        30% {
            transform: translate(0, 0%);
        }
        50% {
            transform: translate(0, -50%);
        }
        60% {
            transform: translate(0, 0%);
        }
        70% {
            transform: translate(0, -40%);
        }
        80% {
            transform: translate(0, 0%);
        }
        90% {
            transform: translate(0, -20%);
        }
        100% {
            transform: translate(0, 0%);
        }
    }
    
    .page_header {
        margin-top: 0px;
        margin-left: 0;
        background-color: whitesmoke;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 80% 100%;
    }
    
    .logo_societa {
        background-image: url('/img/logo/logo-trasparente.png');
        margin-top: 5px;
        margin-right: 20px;
        background-repeat: no-repeat;
        background-size: contain;
        text-align: right;
    }

    .logo_pingi {
        background-image: url('/img/logo/logo-trasparente.png');
        margin-top: 5px;
        margin-right: 20px;
        background-repeat: no-repeat;
        background-size: contain;
        text-align: right;
    }
    
    .header_timer {
        text-align: right;
        color: brown;
    }
    /* responsive text queries */
    
    @media screen and (max-width: 992px) {
        p,
        .btn,
        input,
        div,
        span,
        h4 {
            font-size: 96%;
        }
        h1 {
            font-size: 24px;
        }
        h2 {
            font-size: 22px;
        }
        h3 {
            font-size: 18px;
        }
    }
    
    @media screen and (max-width: 768px) {
        p,
        .btn,
        input,
        div,
        span,
        h4 {
            font-size: 93%;
        }
        h1 {
            font-size: 20px;
        }
        h2 {
            font-size: 18px;
        }
        h3 {
            font-size: 16px;
        }
    }
    /* Area dei messaggi utente */
    
    .msgArea {
        vertical-align: middle;
        cursor: pointer;
    }
    
    .nav_bar_background {
        background-image: linear-gradient(bottom, rgb(0, 110, 255) 0%, #ffffff 100%);
        background-image: -o-linear-gradient(bottom, rgb(0, 110, 255) 0%, #ffffff 100%);
        background-image: -moz-linear-gradient(bottom, rgb(0, 110, 255) 0%, #ffffff 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(0, 110, 255) 0%, #ffffff 100%);
        background-image: -ms-linear-gradient(bottom, rgb(0, 110, 255) 0%, #ffffff 100%);
    }
    
    .fld_label_xxsmall {
        width: 20px;
        text-align: right;
        background-color: #e9ecef;
        padding-top: 7px;
        padding-right: 5px;
        color: darkblue;
    }
    
    .fld_label_xsmall {
        width: 40px;
        text-align: right;
        background-color: #e9ecef;
        padding-top: 7px;
        padding-right: 5px;
        color: darkblue;
    }
    
    .fld_label_small {
        width: 60px;
        text-align: right;
        background-color: #e9ecef;
        padding-top: 5px;
        padding-right: 5px;
        color: darkblue;
    }
    
    .fld_label_medium {
        width: 80px;
        text-align: right;
        background-color: #e9ecef;
        padding-top: 7px;
        padding-right: 5px;
        color: darkblue;
    }
    
    .fld_label_large {
        width: 100px;
        text-align: right;
        background-color: #e9ecef;
        padding-top: 5px;
        padding-right: 5px;
        color: darkblue;
    }
    
    .fld_label_xlarge {
        width: 120px;
        text-align: right;
        background-color: #e9ecef;
        padding-top: 5px;
        padding-right: 5px;
        color: darkblue;
    }
    
    .fld_label_xxlarge {
        width: 140px;
        text-align: right;
        background-color: #e9ecef;
        padding-top: 7px;
        padding-right: 5px;
        color: darkblue;
    }
    
    .fld_label_post {
        width: 60px;
        text-align: center;
        background-color: #e9ecef;
    }
    /** tollbar areas */
    
    .toolbar_area_xxsmall {
        -ms-flex: 0 0 10px;
        flex: 0 0 10px;
        width: 10px;
        color: blue;
        cursor: pointer;
    }
    
    .toolbar_area_xsmall {
        -ms-flex: 0 0 30px;
        flex: 0 0 30px;
        width: 30px;
        color: blue;
        cursor: pointer;
    }
    
    .toolbar_area_small {
        -ms-flex: 0 0 60px;
        flex: 0 0 60px;
        width: 80px;
        color: blue;
        cursor: pointer;
    }
    
    .toolbar_area_medium {
        -ms-flex: 0 0 90px;
        flex: 0 0 90px;
        width: 90px;
        color: blue;
        cursor: pointer;
    }
    
    .toolbar_area_large {
        -ms-flex: 0 0 110px;
        flex: 0 0 110px;
        width: 110px;
        color: blue;
        cursor: pointer;
    }
    
    .toolbar_area_xlarge {
        -ms-flex: 0 0 130px;
        flex: 0 0 130px;
        width: 130px;
        color: blue;
        cursor: pointer;
    }
    
    .toolbar_area_xxlarge {
        -ms-flex: 0 0 150px;
        flex: 0 0 150px;
        width: 150px;
        color: blue;
        cursor: pointer;
    }
    
    .selectable {
        cursor: pointer;
    }
    
    .selectable:hover {
        border: 1px groove darkgreen;
    }
    
    .prj_aperto {
        background-color: whitesmoke;
        color: darkblue;
    }
    
    .prj_chiuso {
        background-color: whitesmoke;
        font-style: italic;
        color: darkcyan;
    }
    
    .nav {
        color: #FFFFFF;
        background-color: rgb(24, 25, 119);
    }
    
    .navbar {
        color: #FFFFFF;
        background-color: #0069d9;
    }
    /* OR*/
    
    .nav-link {
        color: #FFFFFF;
    }

    .dropzone {
        min-height: 0px !important;
    }

    .modal-header {
        color: #FFFFFF; 
        background-color: #0069d9;
    }

    .modal-col-blue {
        background: #0069d9;
        color: white;
    }