body {
    font-family: Verdana,sans-serif;
    margin: auto;
    color: #7C6F57;
    font-size: 14px;
    line-height: 16px;
}

hr {
    clear: both;
    width: 100%;
    border-bottom: 1px solid #008e4f;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    padding: 5px;
    margin-bottom: 10px;
}


/* ========== BUTTONS ========== */
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 7px 30px;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
}
    .button:hover {
        background-color: #3e8e41;
    }
    .button:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

.button-red {
    background-color: orangered; /* orangered */
    border: none;
    color: white;
    padding: 7px 30px;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
}
    .button-red:hover {
        background-color: #a56047;
    }

    .button-red:active {
        background-color: #a56047;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }


.button-brown {
    background-color: #a56047;
    border: none;
    color: white;
    padding: 7px 30px;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
    .button-brown:hover {
        background-color: #a56047;
    }

    .button-brown:active {
        background-color: #a56047;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }




.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button-circle:hover {
    background-color: #3e8e41;
    border-radius: 20px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button-filter {
    padding: 4px 12px;
    margin-top: -4px;
    font-size: 14px;
    color: white;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 3px;
    /*background-image: linear-gradient(to bottom, #595b69, #4F515E);*/
    background: #595b69;
    border: solid 1px #2b2d36;
    box-shadow: 0px 1px 1px rgba(0,0,0,.1), inset 0 1px 1px #888;
}

.button-clear {
    background-color: #8F9086; 
    border: none;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 3px;
    margin-top: 3px;
}


.button-gview-green {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 2px 2px 2px 2px;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 3px;
}
    .button-gview-green:hover {
        background-color: #39693B;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

.button-gview-red {
    background-color: #E23A3A; /* Red */
    border: none;
    color: white;
    padding: 2px 2px 2px 2px;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 3px;
}
    .button-gview-red:hover {
        background-color: #803232;
        border-radius: 6px;
    }


/* --------- CONTAINER --------- */

.container-form {
    background: #fff;
}

.container-footer {
    border-top: 1px solid green;
    background: #cdefc9;
    padding: 15px;
    text-align: right;
    clear: both;
}

.container-footer-left {
    border-top: 1px solid green;
    background: #cdefc9;
    padding: 15px;
    text-align: left;
    clear: both;
}

.container-right {
    text-align: right;
    clear: both;
    padding: 5px;
}

.container-left {
    text-align: left;
    clear: both;
    padding: 5px;
}

.container-selection {
    text-align: left;
    clear: both;
    padding: 5px;
    border: 1px solid #d1d2c8;
}
.container-selection .float-rx {
    text-align: center;
    float: right;
    padding: 5px;
}


.container-uploadfile {
    background: #eeefda;
    padding: 15px;
    text-align: left;
    clear: both;
}




/* --------- Hide gView Columns ---------*/
.hiddenfield {
    display: none;
}

.gridPager a, .gridPager span {
    display: block;
    height: 20px;
    width: 20px;
    text-align: center;
    text-decoration: none;
}

.gridPager a:hover {
    background-color: #cdefc9;
    color: #000;
    border: 1px solid #4caf50;
    border-radius: 3px;
}

.gridPager span {
    background-color: #ffffff;
    color: #000;
    border: 1px solid #7d7d7d;
    border-radius: 3px;
    font-weight: bold;
}

/* --------- Login --------- */
.conteiner-login {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 26px 24px 46px;
    background: #fff;
    box-shadow: 0 3px 15px rgba(0,0,0,.13);

    text-align: right;
    color: #008E4F;

    display: table;
}
.login-asplabel {
    padding: 3px 10px 3px;
}

/* --------- Header --------- */
.logo {
    color: #008E4F;
    text-align: center;
    padding: 5px;
    display: block;
}
.infosocio {
    padding: 5px;
    background-color: #EEEFDA;
    color: darkslategrey;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}
.infosocio-livello {
    color: brown;
    line-height: 1.8;
    font-size: 0.9em;
}

/* --------- Menu --------- */
.menu {
    width: 80%;
    float: left;
    margin-left:10px;
    padding: 15px;
    border-top: 1px solid #008E4F;
    border-bottom: 1px solid #008e4f;

    color: #7C6F57;
    font-size: 0.9em;
    line-height: 1.1em;
}

.Title1 {
    font-family: Verdana,sans-serif;
    font-size: 1.0em;
    line-height: 0.9em;
    color: #7C6F57;
}

/* --------- VARIE --------- */

.radiobutton {
    text-align: left;
}

/* --- ImageButton + Label --- */
.middle > * {
    clear: both;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    float:right;
}


.vertical-center {
    display: table-cell;
    vertical-align: middle;
    padding-top: 10px;
}

.vertical-center-image {
    vertical-align: middle;
}

.float-right {
    float: right;
    margin-top: 10px;
}


.gridview {
    font-size: 0.9em;
    width: 100%;
}


.label-input {
    float: left;
    clear: both;
    padding: 3px 10px 3px 0px;
    color: #7C6F57;
}

.label-input-left {
    text-align: left;
    float: left;
    clear: both;
    padding: 3px 10px 3px 0px;
}

.label-elenco {
    text-align: left;
    background: #e8eac3;
    color: blue;
    padding: 5px;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


.clear {
    clear: both;
}

.add-data-servizio {
    padding: 15px 20px 15px 20px;
    border: 1px solid #7C6F57;
    border-radius: 10px;
    color: #7C6F57;
    font-size: 1.0em;
    line-height: 2.5em;
    text-align: center;
}
.add-data-servizio-label {
    font-size: 0.8em;
    text-align: right;
}


/* --- Filter Block --- */

.tabella-filter, .riga-filter, .colonna-filter {
    padding: 3px 10px 3px 0px;
    border: 0;
    display: table;
}

.tabella-filter {
    margin: 0;
    width: 100%;
    text-align: left;
    line-height: 1.5em;
    background: #474957;
    padding: 15px 10px 15px 10px;
    border-radius: 5px;
    color: #d0d0d0;
}

.riga-filter {
    clear: both;
    display: table-row;
    width: 100%;
}

.colonna-filter {
    float: left;
    display: table-cell;
}
.colonna-filter-button {
    float: left;
    display: table-cell;
    width: 270px;
    text-align: right;
}

.label-filter {
    text-align:left;
}


/* --- TABELLE ---- */
.tabella, .riga, .colonna {
    padding: 6px 6px 6px 6px;
    border: 0;
    display: table;
    border-spacing: 5px;
}

.tabella {
    margin: 0;
    width: 100%;
    text-align: right;
}

.riga {
    clear: both;
    display: table-row;
    width: 100%;
}

.colonna {
    float: left;
    display: table-cell;
    text-align: right;
}

.colonna-float-right {
    float: right;
    display: table-cell;
    text-align: right;
}

.colonna-text-left {
    float: left;
    display: table-cell;
    text-align: left;
}

.colonna-listbox {
    float: left;
    display: table-cell;
    text-align: left;
    background: #feffec;
    padding: 5px 5px 5px 0px;
}

.colonna-button {
    float: left;
    display: table-cell;
    text-align: right;
}


/* --- PANEL ---- */
.panel-socio {
    background-color: #ececcb;
    padding: 5px 10px 5px 10px;
    color: #7C6F57;
    clear: both;
}

/* -------------------------------- */
/*                                  */
/*          Navigation bar          */
/*                                  */
/* -------------------------------- */

    .navbar {
        width: 100%;
        background-color: #ececec;
        overflow: auto;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }

    /* Navbar links */
    .navbar a {
        float: left;
        text-align: center;
        padding: 12px;
        color: #7C6F57;
        text-decoration: none;
    }


    .active {
        background-color: #4CAF50;
        color: white;
    }

    .navbar .icon {
        display: none;
    }

    /* Navbar links on mouse-over */
    .navbar a:hover, .dropdown:hover .dropbtn {
        color: #FFF;
        background-color: #4CAF50;
    }


    /* Current/active navbar link */
    .active {
        background-color: #4CAF50;
    }

    .dropdown {
        float: left;
        overflow: hidden;
    }

        .dropdown .dropbtn {
            border: none;
            outline: none;
            color: #7C6F57;
            /*padding: 12px 16px;*/
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

    .dropdown-content {
    display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        margin-top: 40px;
        z-index: 1;
    }

    .dropdown-content a {
        float: none;
        color: black;
        padding: 8px 14px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {
        background-color: #d0d0d0;
        color: #4CAF50;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

.show {
    display: block;
}

    /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
    @media screen and (max-width: 600px) {


        .colonna {
            text-align: left;
        }
    }

    @media screen and (max-width: 600px) {
        .navbar a:not(:first-child), .dropdown .dropbtn {
            display: none;
        }

        .navbar a.icon {
            float: right;
            display: block;
        }
    }

    @media screen and (max-width: 600px) {
        .navbar.responsive {
            position: relative;
        }

        .navbar.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .navbar.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

        .navbar.responsive .dropdown {
            float: none;
        }

        .navbar.responsive .dropdown-content {
            /*position: relative;*/
            position: inherit;
            margin: 0px;
            display: block;
        }

        .navbar.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
    }


/*======================================================*/
/*                                                      */
/* ====             RESPONSIVE CSS                  ====*/
/*                                                      */
/*======================================================*/

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {
        width: 8.33%;
    }

    .col-s-2 {
        width: 16.66%;
    }

    .col-s-3 {
        width: 25%;
    }

    .col-s-4 {
        width: 33.33%;
    }

    .col-s-5 {
        width: 41.66%;
    }

    .col-s-6 {
        width: 50%;
    }

    .col-s-7 {
        width: 58.33%;
    }

    .col-s-8 {
        width: 66.66%;
    }

    .col-s-9 {
        width: 75%;
    }

    .col-s-10 {
        width: 83.33%;
    }

    .col-s-11 {
        width: 91.66%;
    }

    .col-s-12 {
        width: 100%;
    }

    body {
        width: 100%;
    }

    .label-input {
        text-align: left;
    }
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }

    body {
        width: 900px;
    }

    .label-input {
        text-align: right;
    }

}


/* ========== CALENDAR ========== */
.calendar_panel {
    background: #ffffff;
    text-align: right;
}

.calendar_DatePicker {
    color: Black;
    font-family: Verdana;
    height: 20px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    line-height: 1.3em;
}

.calendar_TitleStyle {
    height: 30px;
}

.calendar_DayStyle {
    border-color: #bfbfbf;
    border-width: 1px;
    border-style: Solid;
    background: #ecebeb;
    text-align: right;
    padding-left: 10px;
}

.calendar_DayStyle a:link {
    text-decoration: none;
}

.calendar_DayStyle:hover {
    background: orange;
}

.calendar_OtherMounthDayStyle a:link {
    text-decoration: none;
}

.calendar_NextPrevStyle a:link {
    text-decoration: none;
}

.calendar_NextPrevStyle a:hover {
   font-weight:700;
}