/* #region PADDING */
.p-xs {
    padding: 5px;
}

.p-sm {
    padding: 15px;
}

.p-md {
    padding: 25px;
}

.p-lg {
    padding: 35px;
}

.pt-xs {
    padding-top: 5px;
}

.pt-sm {
    padding-top: 15px;
}

.pt-md {
    padding-top: 25px;
}

.pt-lg {
    padding-top: 35px;
}

.pr-xs {
    padding-right: 5px;
}

.pr-sm {
    padding-right: 15px;
}

.pr-md {
    padding-right: 25px;
}

.pr-lg {
    padding-right: 35px;
}

.pb-xs {
    padding-bottom: 5px;
}

.pb-sm {
    padding-bottom: 15px;
}

.pb-md {
    padding-bottom: 25px;
}

.pb-lg {
    padding-bottom: 35px;
}

.pl-xs {
    padding-left: 5px;
}

.pl-sm {
    padding-left: 15px;
}

.pl-md {
    padding-left: 25px;
}

.pl-lg {
    padding-left: 35px;
}

.p-0 {
    padding: 0;
}

.pt-0{
    padding-top: 0;
}
.pr-0{
    padding-right: 0;
}
.pb-0{
    padding-bottom: 0;
}
.pl-0{
    padding-left: 0;
}
/* #endregion PADDING */
/* #region MARGIN */
.m-xs {
    margin: 5px;
}

.m-sm {
    margin: 15px;
}

.m-md {
    margin: 25px;
}

.m-lg {
    margin: 40px;
}

.mt-xs {
    margin-top: 5px;
}

.mt-sm {
    margin-top: 15px;
}

.mt-md {
    margin-top: 25px;
}

.mt-lg {
    margin-top: 40px;
}

.mr-xs {
    margin-right: 5px;
}

.mr-sm {
    margin-right: 15px;
}

.mr-md {
    margin-right: 25px;
}

.mr-lg {
    margin-right: 40px;
}

.mb-xs {
    margin-bottom: 5px;
}

.mb-sm {
    margin-bottom: 15px;
}

.mb-md {
    margin-bottom: 25px;
}

.mb-lg {
    margin-bottom: 40px;
}

.ml-xs {
    margin-left: 5px;
}

.ml-sm {
    margin-left: 15px;
}

.ml-md {
    margin-left: 25px;
}

.ml-lg {
    margin-left: 40px;
}

.m-0 {
    margin: 0;
}
.mt-0{
    margin-top: 0;
}
.mr-0{
    margin-right: 0;
}
.mb-0{
    margin-bottom: 0;
}
.ml-0{
    margin-left: 0;
}
/* #endregion MARGIN */

.display-table{
    display: table;
}

body,
html {
    height: 100%;
}

#wrapper {
    overflow: hidden;
}

#mypage {
    -moz-transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    width: 100%;
}

.mOpen #mypage {
    margin-left: -250px;
}

#menu-mypage{
    position: fixed;
    right: 0;
    width: 0px;
    -moz-transition: width 200ms ease-in;
    -webkit-transition: width 200ms ease-in;
    -o-transition: width 200ms ease-in;
    transition: width 200ms ease-in;
    height: 100%;
    background-color: #6fb9de;
    top: 52px;
}

#menu-mypage ul {
    width: 250px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
}

@media (min-width: 992px) {
    #menu-mypage ul {
        width: auto;
    }
}

#menu-mypage ul li {
    margin: 0;
}

@media (min-width: 992px) {
    #menu-mypage ul li {
        display: block;
        float: left;
    }
}

#menu-mypage ul li a {
    color: #ffffff;
    font-size: 18px;
    line-height: 50px;
    font-family: 'Karla', sans-serif;
    text-decoration: none;
    display: block;
    padding: 0 10px;
    margin: 0;
    font-weight: 700;
    border-bottom: 1px solid #c0c5cb;
    max-width: 1000px;
}

/*#menu-mypage nav ul li a.twoRows {
        text-align: left;
    }*/

@media (min-width: 992px) {
    #menu-mypage ul li a {
        border-left: 1px solid #c0c5cb;
        border-bottom: 0 none;
        margin: 10px 0;
        /*max-width: 136px;*/
    }

    /*#menu-mypage nav ul li a.twoRows {
            line-height: 20px;
            padding-top: 4px;
            padding-bottom: 6px;
            text-align: center;
        }*/
}

#menu-mypage ul li.active a {
    background: #c0c5cb;
    border-left: 0 none;
    color: #fff;
    margin: 0;
    border-bottom: 1px solid #fff;
}

@media (min-width: 992px) {
    #menu-mypage ul li.active a {
        line-height: 70px;
    }
}

#menu-mypage ul li ul {
    display: none;
}

#menu-mypage ul li:first-child a,
#menu-mypage ul li.active + li a {
    border-left: 0 none;
}

#menu-mypage ul li.active ul {
    /* sotto menu */
    display: block;
}

#menu-mypage ul li.active ul a {
    line-height: 40px;
    padding: 0;
    padding-left: 25px;
    background: #dcdfe3;
    color: #737477;
}

#menu-mypage ul li.active ul a.red {
    background-color: #f11515;
    color: #fff;
}

#menu-mypage ul li.active ul li.active a {
    background-color: #36aee8;
    color: #fff;
}

@media (min-width: 992px) {
    #menu-mypage ul li.active ul {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #c0c5cb;
        padding: 0 7.5px;
    }

    #menu-mypage ul li.active ul li a {
        border: 0;
        margin: 15px 7.5px;
        border-radius: 10px;
        background-color: #cccfd4;
        padding: 0 8px;
        font-size: 18px;
        font-weight: 400;
    }
}

.mOpen #headerAdmin {
    right: 250px;
    /*&:after{
        content:" ";
        right:100%;
        width: 9000px;
        top:0;
        bottom:0;
        background: rgba(255, 255, 255, 0.19);
        position: absolute;
    }*/
}

.menuToggle {
    float: right;
    display: block;
    height: 42px;
    width: 43px;
    line-height: 42px;
    text-align: center;
    background: #1388bf;
    border-radius: 10px;
    color: #fff;
}

@media (min-width: 992px) {
    .menuToggle {
        display: none;
    }

    .mOpen #mypage {
        margin-left: 0px;
    }

    .mOpen #header,
    .mOpen #headerAdmin {
        right: 0px;
    }
}

.menuAccount {
    float: right;
    display: block;
    height: 42px;
    width: 43px;
    line-height: 42px;
    text-align: center;
    border: 3px solid #fff;
    border-radius: 10px;
    color: #fff;
    overflow: hidden;
    margin-right: 10px;
    text-indent: -999px;
    background: url(img/user.png) no-repeat center center;
}


.menuAccountHamburger {
    float: right;
    display: block;
    height: 42px;
    width: 43px;
    line-height: 42px;
    text-align: center;
    border: 3px solid #fff;
    border-radius: 10px;
    color: #fff;
    overflow: hidden;
    margin-right: 10px;
    text-indent: -999px;
    background: url(img/user.png) no-repeat center center;
}

li.li-logout-md{
    display: block;
}
li.li-altro-md{
    display: block;
}
@media (min-width: 992px) {
    .menuAccount {
        display: none;
    }
    .menuAccountHamburger {
        display: none;
    }
    
    li.li-logout-md{
        display: none!important;
    }

    li.li-altro-md{
        display: none!important;
    }
}

@media (max-width: 390px) {
    .menuAccount {
        display: none;
    }
}

#header {
    padding: 3px 0;
    height: 52px;
    background: #6FB9DE;
    background: rgb(111, 185, 222);
    position: fixed;
    top: 0;
    width: 100%;
    right: 0;
    z-index: 999999;
    -moz-transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

#mypage.index #header:not(.wBg), #mypage.caratteristiche #header:not(.wBg), #mypage.tabella-prezzi #header:not(.wBg) {
    /*background: linear-gradient(to bottom, #6FB9DE 62%, rgba(204, 0, 0, 0.001) 100%);*/
    box-shadow: 0px 0px 12px 8px #6fb9de;
}

    #header.wBg {
        padding: 3px 0;
        height: 52px;
        background: #6FB9DE;
        background: rgba(111, 185, 222, 0.95);
    }

    #header #logoTop {
        float: left;
        width: 160px;
        height: 42px;
        background-image: url(img/logoMob.png);
        background-position: center center;
        background-repeat: no-repeat;
        text-indent: -9999px;
        overflow: hidden;
    }

    #header nav {
        position: absolute;
        top: 0;
        right: -250px;
        width: 250px;
        z-index: 900;
        height: 1500px;
        background: #1388bf;
    }

@media (max-width: 650px) {
    .caratteristiche-numero-header.public-header .phone{
        display: none;
    }
}


@media (min-width: 601px) {
    #header #logoTop {
        width: 200px;
        background-size: 190px;
        background-position-x: 0px;
    }
}
@media (min-width: 992px) {
    #header {
        padding: 15px 0;
        height: 72px;
    }

        #header nav {
            background: none;
            position: static;
            width: auto;
            float: right;
            height: auto;
        }

        .caratteristiche-numero-header.public-header .phone{
            display: none;
        }
}
@media (min-width: 1200px) {

    .caratteristiche-numero-header.public-header .phone{
        display: block;
    }
}

#header nav ul {
    width: 250px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
}

@media (min-width: 992px) {
    #header nav ul {
        width: auto;
    }
}

#header nav ul li {
    margin: 0;
}

    #header nav ul li.logout {
        margin-top: 14px;
    }

@media (min-width: 992px) {
    #header nav ul li {
        display: inline-block;
    }

        #header nav ul li.logout {
            margin-top: 0px;
        }
}

#header nav ul li a {
    color: #fff;
    font-size: 22px;
    line-height: 42px;
    font-family: 'Karla', sans-serif;
    text-decoration: none;
    display: block;
    padding: 0;
    margin: 0 15px;
    font-weight: 700;
}

#header nav ul li.active a {
    color: #08679e;
    border-bottom: 4px solid #08679e;
}

#headerAdmin {
    position: fixed;
    width: 100%;
    top: 68px !important;
    right: 0;
    z-index: 99999;
    height: 70px;
    padding: 0;
    -moz-transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

@media (min-width: 992px) {
    #headerAdmin {
        position: static;
        top: 0;
    }
}


#headerAdmin #headerAdminInner {
    background: #eff1f4;
    width: 1140px;
    margin: auto;
}

#headerAdminInner .menu-sticky {
    top: 52px;
    position: fixed;
    width: 100% !important;
    max-width: 1140px;
    display: table;
    background-color: #eff1f4;
    color: #08679e;
}

/*#headerAdminInner .menu-sticky.map-mobile {
    display: none!important;
}*/


    #headerAdminInner .menu-sticky .submenu-sticky {
        top: 68px;
        width: 33.3333%;
        height: 70px;
        display: table-cell;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        padding-bottom: 6px;
    }

        /*#headerAdminInner .menu-sticky .submenu-sticky a{
        border-left: 1px solid #c0c5cb;
    border-bottom: 0 none;
    margin: 10px 0;
    }*/

        #headerAdminInner .menu-sticky .submenu-sticky:nth-child(2),
        #headerAdminInner .menu-sticky .submenu-sticky:nth-child(4) {
            border-right: 1px solid #c0c5cb;
        }

        #headerAdminInner .menu-sticky .submenu-sticky:hover {
            background-color: #d8d8d8;
        }

        #headerAdminInner .menu-sticky .submenu-sticky.selected {
            background-color: #d8d8d8;
        }

        #headerAdminInner .menu-sticky .submenu-sticky.selected a {
            color: #ffffff;
        }

#wrapper{
    background-color: #6fb9de;
}
#mypage{
    background: white;
}

#mypage .fascia.scheda-porto .scheda-head .icons{
    padding-bottom:3px;
}

#header .admin-is-using{
    position: absolute;
    height: 20px;
    bottom: -20px;
    left: 0;
    width: 100%;
    padding-bottom: 22px;
    font-size: 18px;
    background-color: #6fb9de;
    color: white;
    font-weight: bold;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}
#header .admin-is-using .icon-success{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#header .admin-is-using .icon-success:before{
    content: "\f06a";
    color: #ff0000;
}
#header .admin-is-using a{
    color: #2900ff;
 }

.admin-using-user #headerAdmin{
    top: 22px!important;
    position: relative;
}
.admin-using-user #headerAdminInner .menu-sticky{
    top: 72px;
}
.admin-using-user:first-child .fascia{
    padding: 88px 0;
}
@media (max-width: 991px) {
    .admin-using-user:first-child .fascia {
        padding: 0px 0;
    }
}

.admin-using-user #headerAdmin nav {
    top: -38px;
    right: -500px;
}
.admin-using-user #headerAdmin nav {
    top: -38px;
    right: -500px;
}
.admin-using-user .menu-sticky{
    left: 0px!important;
}

.container.containerAdmin {
    width: 100%;
    margin: 0;
    padding: 0;
}

#headerAdminInner nav li a.btn-premium{
    position:relative;
}

#headerAdminInner nav ul:first-child li.wSub a.btn-premium:before{
    content: "PREMIUM";
    border-radius: 4px;
    font-size: 10px;
    right: 11px;
    top: -2px;
    background-color: #f00;
    color: white;
    height: 16px;
    padding: 2px 3px;
    width: 53px;
    position: absolute;
    line-height: 13px;
    margin-left: -12px;
}
#headerAdminInner nav ul:first-child li.wSub.active a.btn-premium:before{
    right: 10px;
    top: 8px;
}

#headerAdminInner nav li ul li a.btn-premium:before{
    right:-8px!important;
    top: -8px!important;
}

@media (max-width: 992px) {
    #headerAdminInner nav ul:first-child li a.btn-premium:before {
        right: 10px!important;
        top: 8px!important;
    }
}
@media (min-width: 992px) {
    #headerAdmin #headerAdminInner {
        height: 140px;
        position: relative;
    }

    #headerAdminInner .menu-sticky {
        display: none;
    }
}

@media (min-width: 500px) {

    #headerAdminInner .menu-sticky .submenu-sticky {
        font-size: 18px;
    }
}

@media (min-width: 400px) {

    #headerAdminInner .menu-sticky .submenu-sticky {
        font-size: 15px;
        padding-bottom: 5px;
    }
}

#headerAdmin #goHome {
    pointer-events: none;
    margin-right: -8px;
    margin-left: -20px;
    float: left;
    width: 70px;
    /*height: 70px;*/
    background-image: url(img/icocasa.png);
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}
#headerAdmin #goHome.ico-my-meteomed {
    background-image: url(img/ico-my-meteomed.png)!important;
}
#headerAdmin #goHome.ico-cartografie {
    background-image: url(img/ico-cartografie.png)!important;
}
#headerAdmin #goHome.ico-miei-dati {
    background-image: url(img/ico-miei-dati.png)!important;
}

#headerAdmin li.active #goHome {
    margin-right: -8px;
    float: left;
    width: 70px;
    /*height: 70px;*/
    background-image: url(img/icocasa0.png);
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}

#headerAdmin li.active #goHome.ico-my-meteomed {
    background-image: url(img/ico-my-meteomed0.png)!important;
}
#headerAdmin li.active #goHome.ico-cartografie {
    background-image: url(img/ico-cartografie0.png)!important;
}
#headerAdmin li.active #goHome.ico-miei-dati {
    background-image: url(img/ico-miei-dati0.png)!important;
}

#goHome.goHomeIcon {
    position: absolute;
    top: 4px;
    width: 33.333333%!important;
    height: 40px;
    margin: 0!important;
}

.goHomeIcon.goHomeIcon1{
    background-image: url(img/icocasa.png)!important;
}

.goHomeIcon.goHomeIcon1.ico-my-meteomed {
    background-image: url(img/ico-my-meteomed.png)!important;
}
.goHomeIcon.goHomeIcon1.ico-cartografie {
    background-image: url(img/ico-cartografie.png)!important;
}
.goHomeIcon.goHomeIcon1.ico-miei-dati {
    background-image: url(img/ico-miei-dati.png)!important;
}

.active.goHomeIcon.goHomeIcon1{
    background-image: url(img/icocasa0.png)!important;
}
.active.goHomeIcon.goHomeIcon1.ico-my-meteomed {
     background-image: url(img/ico-my-meteomed0.png)!important;
 }
.active.goHomeIcon.goHomeIcon1.ico-cartografie {
    background-image: url(img/ico-cartografie0.png)!important;
}
.active.goHomeIcon.goHomeIcon1.ico-miei-dati {
    background-image: url(img/ico-miei-dati0.png)!important;
}

#headerAdmin nav {
    position: absolute;
    top: -16px;
    right: -250px;
    width: 250px;
    z-index: 900;
    height: 1500px;
    background: #eff1f4;
    border-left: 1px solid;
    border-color: #c0c5cb;
}

    #headerAdmin nav:before {
        content: "";
        width: 30px;
        height: 30px;
        position: absolute;
    }

    #headerAdmin nav #goHome {
        display: none;
    }

@media (min-width: 992px) {
    #headerAdmin nav {
        background: none;
        position: static;
        width: auto;
        float: left;
        height: auto!important;
    }

        #headerAdmin nav #goHome {
            display: block;
        }
}

#headerAdmin nav ul {
    width: 250px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
}

@media (min-width: 992px) {
    #headerAdmin nav ul {
        width: auto;
    }
}

#headerAdmin nav ul li {
    margin: 0;
}

@media (min-width: 992px) {
    #headerAdmin nav ul li {
        display: block;
        float: left;
    }
}

#headerAdmin nav ul li a {
    color: #08679e;
    font-size: 18px;
    line-height: 50px;
    font-family: 'Karla', sans-serif;
    text-decoration: none;
    display: block;
    padding: 0 10px;
    margin: 0;
    font-weight: 700;
    border-bottom: 1px solid #c0c5cb;
    max-width: 1000px;
}

/*#headerAdmin nav ul li a.twoRows {
        text-align: left;
    }*/

@media (min-width: 992px) {
    #headerAdmin nav ul li a {
        border-left: 1px solid #c0c5cb;
        border-bottom: 0 none;
        margin: 10px 0;
        /*max-width: 136px;*/
    }

    /*#headerAdmin nav ul li a.twoRows {
            line-height: 20px;
            padding-top: 4px;
            padding-bottom: 6px;
            text-align: center;
        }*/
}

#headerAdmin nav ul li.active a {
    background: #c0c5cb;
    border-left: 0 none;
    color: #fff;
    margin: 0;
    border-bottom: 1px solid #fff;
}

@media (min-width: 992px) {
    #headerAdmin nav ul li.active a {
        line-height: 70px;
    }
}

#headerAdmin nav ul li ul {
    display: none;
}

#headerAdmin nav ul li:first-child a,
#headerAdmin nav ul li.active + li a {
    border-left: 0 none;
}

#headerAdmin nav ul li.active ul {
    /* sotto menu */
    display: block;
}

    #headerAdmin nav ul li.active ul a {
        line-height: 40px;
        padding: 0;
        padding-left: 25px;
        background: #dcdfe3;
        color: #737477;
    }

        #headerAdmin nav ul li.active ul a.red {
            background-color: #f11515;
            color: #fff;
        }

    #headerAdmin nav ul li.active ul li.active a {
        background-color: #36aee8;
        color: #fff;
    }

@media (min-width: 992px) {
    #headerAdmin nav ul li.active ul {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #c0c5cb;
        padding: 0 7.5px;
    }

        #headerAdmin nav ul li.active ul li a {
            border: 0;
            margin: 15px 7.5px;
            border-radius: 10px;
            background-color: #cccfd4;
            padding: 0 8px;
            font-size: 18px;
            font-weight: 400;
        }

        #headerAdmin nav ul li.active ul li a.green {
            background-color: #48c02b;
        }
}

#headerAdmin .btn {
    margin: 18px 15px;
    float: right;
}

#headerAdmin .menuToggle {
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    background: #c0c5cb;
    margin: 0;
    border-radius: 0;
}
.fascia {
    padding: 50px 0;
}

    .fascia.abbonamenti {
        padding: 100px 0 0;
    }

    .fascia.tabella-abbonamenti{
        padding: 0px 0 30px 0;
    }

    .fascia.scheda-porto .scheda-head {
        background-color: #087bb2;
        color: white;
    }

        .fascia.scheda-porto .scheda-head * {
            color: white;
        }

        .fascia.scheda-porto .scheda-head h5 {
            margin: 0;
            padding: 15px 0 0 10px;
        }

        .fascia.scheda-porto .scheda-head h3 {
            padding: 14px;
            margin: 0;
        }

@media (min-width: 1200px) {
    .fascia {
        padding: 60px 0;
    }
    .fascia.fascia-intro.fascia-intro-s .fascia-intro-imm .container {
        margin-top: 35px!important;
        margin-bottom: 15px!important;
    }
    .fascia.tabella-abbonamenti{
        padding: 15px 0!important;
    }
}

.fascia.register-page{
    padding-top: 0;
}
.fascia.register-page .container {
    margin-top: 0px;
}

.fascia .container {
    margin-top: 15px;
}

.fascia.fascia-intro {
    padding: 0;
}

    .fascia.fascia-intro .fascia-intro-imm {
        background: #7cc5e6;
        background-size: cover;
        background-position: center top;
        padding: 80px 0;
        margin-bottom: 40px;
        position: relative;
        overflow: hidden;
        min-height: 550px;
    }
    .fascia.fascia-intro .fascia-intro-imm.home {
        height: 0px;
    }

    @media (max-width: 750px){
        .fascia.fascia-intro .fascia-intro-imm.home {
            min-height: 410px;
        }

        .fascia.fascia-intro .fascia-intro-imm.servizi {
            min-height: 410px;
        }
    }

        .fascia.fascia-intro .fascia-intro-imm:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(54, 175, 232, 0.61);
            z-index: 1;
            content: " ";
        }

        .fascia.fascia-intro .fascia-intro-imm .container {
            position: relative;
            z-index: 2;
        }

    .fascia.fascia-intro .lead {
        font-style: italic;
        font-weight: 700;
    }

    .fascia.fascia-intro .fascia-intro-imm .container {
        margin-top: 35px;
        margin-bottom: 40px;
    }

@media (min-width: 768px) {
    .fascia.fascia-intro .fascia-intro-imm .container {
        margin-top: 80px;
        margin-bottom: 120px;
    }
}

@media (min-width: 1200px) {
    .fascia.fascia-intro .fascia-intro-imm .container {
        margin-top: 180px;
        margin-bottom: 200px;
    }
}

@media (min-width: 1200px) {
    .fascia.fascia-intro h1 {
        font-size: 56px;
        line-height: 36px;
    }

    .fascia.fascia-intro .lead {
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 20px;
    }
}

@media (min-width: 1200px) {
    .fascia.fascia-intro.fascia-intro-s .fascia-intro-imm .container {
        margin-top: 140px;
        margin-bottom: 120px;
    }
}

.fascia.fascia-onde .fascia-intro-imm:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6eb9dd+0,58c8ff+100&1+0,0.55+20,0.55+20 */
    background: -moz-linear-gradient(top, #6eb9dd 0%, rgba(106, 188, 228, 0.55) 22%, rgba(88, 200, 255, 0.35) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6eb9dd 0%, rgba(106, 188, 228, 0.55) 22%, rgba(88, 200, 255, 0.35) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6eb9dd 0%, rgba(106, 188, 228, 0.55) 22%, rgba(88, 200, 255, 0.35) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* IE6-9 */
}

.fascia.fascia-onde .fascia-intro-imm:after {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: -54px;
    width: 100%;
    height: 204px;
    background-image: url(img/ondine.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-size: cover;
    background-position: left top;
    content: " ";
    z-index: 5;
}

.cookieD {
    font-size: 12px;
    color: #fff;
    padding: 15px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.perche-icon {
    position: relative;
    width: 112px;
    height: 112px;
    content: " ";
    background: #59bbec;
    border-radius: 50%;
    margin: 5px auto;
}

    .perche-icon:after {
        position: absolute;
        content: " ";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .perche-icon.icon-1:after {
        background-image: url(img/ico1.png);
    }

    .perche-icon.icon-2:after {
        background-image: url(img/ico2.png);
    }

    .perche-icon.icon-3:after {
        background-image: url(img/ico3.png);
    }

    .perche-icon.icon-4:after {
        background-image: url(img/ico4.png);
    }

.bg-blu {
    background-color: #36afe8;
}

.fascia-bollettino-iscriviti{
    box-shadow: 0px 0px 12px 8px #36afe8;
    margin: 25px auto;
}
.fascia-info-meteo-porti{
    box-shadow: 0px 0px 12px 8px #36afe8;
    margin-bottom: 40px;
}

.title {
    margin-top: 0;
}

figure {
    position: relative;
}

.padded {
    padding: 15px;
}

.padded2x {
    padding: 30px;
}

.panel-heading {
    margin: -3px;
}

input:required {
    background-image: url(img/required.png);
    background-position: right center;
    background-repeat: no-repeat;
}

    input:required:valid {
        background-image: url(img/success.png);
        background-position: right center;
        background-repeat: no-repeat;
    }

form.validator input:required:invalid,
form.validator input:required.wError {
    border-color: red;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 102, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 102, 0.6);
    background-image: url(img/error.png);
}

@media (min-width: 1200px) {
    h1.title {
        font-size: 56px;
    }
}

.title-sub {
    color: #a0a4a6;
    font-size: 26px;
    font-family: 'Karla', sans-serif;
}

.text-white {
    color: #fff;
}

.btn {
    font-family: 'Karla', sans-serif;
}

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

        .btn.btn-left:after {
            content: "\02192";
            margin-left: 25px;
            float: right;
        }

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

        .btn.btn-left-small:after {
            content: "\02192";
            margin-left: 8px;
            float: right;
        }


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

        .btn.btn-right:after {
            content: "\02190";
            margin-right: 25px;
            float: left;
        }

    .btn.btn-right-small {
        text-align: left;
    }

        .btn.btn-right-small:after {
            content: "\02190";
            margin-right: 8px;
            float: left;
        }

    .btn.btn-round {
        border-radius: 50%;
        line-height: 1;
    }

        .btn.btn-round.btn-xs {
            padding: 1px 3px;
        }

        .btn.btn-round.btn-sm {
            padding: 5px 7px;
        }

    .btn.btn-border {
        border-width: 2px;
    }

        .btn.btn-border:not(.btn-xs) {
            padding: 5px 11px;
        }

        .btn.btn-border.btn-lg {
            padding: 9px 15px;
        }

        .btn.btn-border.btn-default {
            color: #fff;
            background: none;
            border-color: #fff;
        }

            .btn.btn-border.btn-default:focus,
            .btn.btn-border.btn-default.focus {
                color: #36afe8;
                background-color: #fff;
                border-color: #fff;
            }

            .btn.btn-border.btn-default:hover {
                color: #36afe8;
                background-color: #fff;
                border-color: #fff;
            }

            .btn.btn-border.btn-default:active,
            .btn.btn-border.btn-default.active,
            .open > .dropdown-toggle.btn.btn-border.btn-default {
                color: #36afe8;
                background-color: #fff;
                border-color: #fff;
            }

                .btn.btn-border.btn-default:active:hover,
                .btn.btn-border.btn-default.active:hover,
                .open > .dropdown-toggle.btn.btn-border.btn-default:hover,
                .btn.btn-border.btn-default:active:focus,
                .btn.btn-border.btn-default.active:focus,
                .open > .dropdown-toggle.btn.btn-border.btn-default:focus,
                .btn.btn-border.btn-default:active.focus,
                .btn.btn-border.btn-default.active.focus,
                .open > .dropdown-toggle.btn.btn-border.btn-default.focus {
                    color: #36afe8;
                    background-color: #fff;
                    border-color: #fff;
                }

            .btn.btn-border.btn-default:active,
            .btn.btn-border.btn-default.active,
            .open > .dropdown-toggle.btn.btn-border.btn-default {
                background-image: none;
            }

            .btn.btn-border.btn-default.disabled:hover,
            .btn.btn-border.btn-default[disabled]:hover,
            fieldset[disabled] .btn.btn-border.btn-default:hover,
            .btn.btn-border.btn-default.disabled:focus,
            .btn.btn-border.btn-default[disabled]:focus,
            fieldset[disabled] .btn.btn-border.btn-default:focus,
            .btn.btn-border.btn-default.disabled.focus,
            .btn.btn-border.btn-default[disabled].focus,
            fieldset[disabled] .btn.btn-border.btn-default.focus {
                background-color: #fff;
                border-color: #fff;
            }

        .btn.btn-border.btn-primary {
            color: #08679e;
            background: none;
            border-color: #08679e;
        }

            .btn.btn-border.btn-primary:focus,
            .btn.btn-border.btn-primary.focus {
                color: #fff;
                background-color: #08679e;
                border-color: #08679e;
            }

            .btn.btn-border.btn-primary:hover {
                color: #fff;
                background-color: #08679e;
                border-color: #08679e;
            }

            .btn.btn-border.btn-primary:active,
            .btn.btn-border.btn-primary.active,
            .open > .dropdown-toggle.btn.btn-border.btn-primary {
                color: #fff;
                background-color: #08679e;
                border-color: #08679e;
            }

                .btn.btn-border.btn-primary:active:hover,
                .btn.btn-border.btn-primary.active:hover,
                .open > .dropdown-toggle.btn.btn-border.btn-primary:hover,
                .btn.btn-border.btn-primary:active:focus,
                .btn.btn-border.btn-primary.active:focus,
                .open > .dropdown-toggle.btn.btn-border.btn-primary:focus,
                .btn.btn-border.btn-primary:active.focus,
                .btn.btn-border.btn-primary.active.focus,
                .open > .dropdown-toggle.btn.btn-border.btn-primary.focus {
                    color: #fff;
                    background-color: #08679e;
                    border-color: #08679e;
                }

            .btn.btn-border.btn-primary:active,
            .btn.btn-border.btn-primary.active,
            .open > .dropdown-toggle.btn.btn-border.btn-primary {
                background-image: none;
            }

            .btn.btn-border.btn-primary.disabled:hover,
            .btn.btn-border.btn-primary[disabled]:hover,
            fieldset[disabled] .btn.btn-border.btn-primary:hover,
            .btn.btn-border.btn-primary.disabled:focus,
            .btn.btn-border.btn-primary[disabled]:focus,
            fieldset[disabled] .btn.btn-border.btn-primary:focus,
            .btn.btn-border.btn-primary.disabled.focus,
            .btn.btn-border.btn-primary[disabled].focus,
            fieldset[disabled] .btn.btn-border.btn-primary.focus {
                background-color: #08679e;
                border-color: #08679e;
            }

        .btn.btn-border.btn-info {
            color: #36afe8;
            background: none;
            border-color: #36afe8;
        }

            .btn.btn-border.btn-info:focus,
            .btn.btn-border.btn-info.focus {
                color: #fff;
                background-color: #36afe8;
                border-color: #36afe8;
            }

            .btn.btn-border.btn-info:hover {
                color: #fff;
                background-color: #36afe8;
                border-color: #36afe8;
            }

            .btn.btn-border.btn-info:active,
            .btn.btn-border.btn-info.active,
            .open > .dropdown-toggle.btn.btn-border.btn-info {
                color: #fff;
                background-color: #36afe8;
                border-color: #36afe8;
            }

                .btn.btn-border.btn-info:active:hover,
                .btn.btn-border.btn-info.active:hover,
                .open > .dropdown-toggle.btn.btn-border.btn-info:hover,
                .btn.btn-border.btn-info:active:focus,
                .btn.btn-border.btn-info.active:focus,
                .open > .dropdown-toggle.btn.btn-border.btn-info:focus,
                .btn.btn-border.btn-info:active.focus,
                .btn.btn-border.btn-info.active.focus,
                .open > .dropdown-toggle.btn.btn-border.btn-info.focus {
                    color: #fff;
                    background-color: #36afe8;
                    border-color: #36afe8;
                }

            .btn.btn-border.btn-info:active,
            .btn.btn-border.btn-info.active,
            .open > .dropdown-toggle.btn.btn-border.btn-info {
                background-image: none;
            }

            .btn.btn-border.btn-info.disabled:hover,
            .btn.btn-border.btn-info[disabled]:hover,
            fieldset[disabled] .btn.btn-border.btn-info:hover,
            .btn.btn-border.btn-info.disabled:focus,
            .btn.btn-border.btn-info[disabled]:focus,
            fieldset[disabled] .btn.btn-border.btn-info:focus,
            .btn.btn-border.btn-info.disabled.focus,
            .btn.btn-border.btn-info[disabled].focus,
            fieldset[disabled] .btn.btn-border.btn-info.focus {
                background-color: #36afe8;
                border-color: #36afe8;
            }

@media (min-width: 1200px) {
    .btn.btn-lg.btn-xl {
        font-size: 27px;
        padding: 21px 40px;
    }
}

.btn-group-price .btn.btn-border.active {
    background-color: #4b8ac8;
    border-color: #4b8ac8;
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-group-price .btn .badge {
    background-color: #a7a7a7;
    font-size: 13px;
    color: #fff;
}

@media (max-width: 767px) {
    .container{
        padding: 0!important;
    }

    .btn-group-price {
        display: table;
        margin: 0 auto;
    }

        .btn-group-price .btn.btn-lg {
            /*display: block;*/
            float: none;
            display: table-cell;
            margin-top: 2px;
            padding: 4px;
            font-size: 13px;
            line-height: 1.42857143;
            white-space: normal;
        }

            .btn-group-price .btn.btn-lg .badge {
                background-color: #a7a7a7;
                font-size: 10px;
                color: #fff;
            }
}

hr.sep {
    position: relative;
    margin: 0;
    border-top: 3px solid #cbcbcb;
}

    hr.sep:before {
        position: absolute;
        width: 40px;
        height: 24px;
        line-height: 40px;
        top: -14px;
        left: 50%;
        margin-left: -20px;
        background: #fff url(img/ancoraSep.png) center center no-repeat;
        text-align: center;
        display: block;
        content: " ";
    }

hr.hrSpace {
    border-top-color: transparent;
    margin: 15px 0;
}

.label {
    display: inline-block;
    border-radius: 10px;
    padding: 5px;
}

    .label.label-default {
        color: #5d5858;
    }

    .label a.label-del {
        width: 24px;
        height: 24px;
        display: inline-block;
        line-height: 24px;
        margin-left: 20px;
        background-color: #ff0000;
        text-decoration: none;
        color: #fff;
        border-radius: 50%;
    }

.sepBlu {
    content: "";
    width: 165px;
    height: 6px;
    border-radius: 3px;
    background-color: #0c639a;
    margin-top: 15px;
    margin-bottom: 15px;
}

.scheda-porto .box-blue {
    background-color: #087bb2;
    color: white;
    padding: 15px;
}

    .scheda-porto .box-blue * {
        color: white;
    }

.box-grey {
    padding: 15px;
    background: #f9f9f9;
}

    .box-grey.wIcon {
        padding: 15px 15px 15px 105px;
        margin: 15px 0;
        position: relative;
    }

        .box-grey.wIcon .icon {
            width: 60px;
            height: 60px;
            content: " ";
            position: absolute;
            top: 15px;
            left: 15px;
            border-radius: 50%;
            background-color: rgba(129, 129, 129, 0.2);
        }

.storyT h1 {
    margin-top: 0;
}

.storyT .storyT-testo {
    background-color: #f3fafe;
    font-size: 18px;
    margin: -45px 15px auto;
    padding: 15px;
}

@media (min-width: 992px) {
    .storyT .storyT-testo {
        margin: auto;
        position: absolute;
        padding: 30px;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

@media (min-width: 992px) {
    .storyT.storyT-right .storyT-testo {
        right: 0;
        left: -200px;
    }

    .storyT.storyT-left .storyT-testo {
        left: 0;
        right: -200px;
    }
}

.wStep > div + div:after {
    content: "\02193";
    display: block;
    width: 80px;
    height: 80px;
    background-color: #e3e7e8;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    font-size: 60px;
    line-height: 70px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    margin-top: -20px;
    top: -40px;
    left: 50%;
    margin-left: -40px;
}

@media (min-width: 992px) {
    .wStep > div + div:after {
        top: 50%;
        left: -40px;
        margin-top: -40px;
        margin-left: 0;
        content: "\02192";
    }
}

.wStep > div.active + div:after {
    background-color: #36aee8;
}

.wStep .panel {
    margin-bottom: 30px;
}

    .wStep .panel .panel-body {
        padding: 45px;
    }

#footer {
    background: #ceebf9;
    position: relative;
    padding-top: 30px;
}

    #footer:after {
        position: absolute;
        bottom: 100%;
        left: 0;
        margin-top: -54px;
        width: 100%;
        height: 60px;
        background-image: url(img/bgTopFooter.png);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-size: cover;
        background-position: left bottom;
        content: " ";
    }

    #footer #footer-logo {
        display: block;
        text-indent: -999px;
        overflow: hidden;
        width: 167px;
        height: 30px;
        margin-bottom: 30px;
        background: url(img/logoFooter.png) no-repeat 0 0;
    }

    #footer ul a {
        font-size: 18px;
        font-family: 'Karla', sans-serif;
        text-transform: uppercase;
    }

@media (min-width: 1200px) {
    .sliderLettureMarine {
        position: relative;
        height: 720px;
    }

        .sliderLettureMarine .sliderLettureMarine-img {
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            -ms-transform: scale(0, 0);
            /* IE 9 */
            -webkit-transform: scale(0, 0);
            /* Safari */
            transform: scale(0, 0);
            -webkit-transition: all 0.6s;
            /* Safari */
            z-index: 1;
            opacity: 0;
        }

        .sliderLettureMarine .sliderLettureMarine-cont {
            position: absolute;
            width: 252px;
            padding: 10px;
            border-radius: 10px;
            transition: all 0.3s;
            z-index: 10;
            cursor: pointer;
        }

        .sliderLettureMarine #slideLM1 .sliderLettureMarine-cont {
            top: 40px;
            left: 0;
            text-align: left;
        }

        .sliderLettureMarine #slideLM2 .sliderLettureMarine-cont {
            top: 280px;
            left: 0;
            text-align: left;
        }

        .sliderLettureMarine #slideLM3 .sliderLettureMarine-cont {
            top: 40px;
            right: 0;
            text-align: right;
        }

        .sliderLettureMarine #slideLM4 .sliderLettureMarine-cont {
            top: 280px;
            right: 0;
            text-align: right;
        }

        .sliderLettureMarine #slideLM5 .sliderLettureMarine-cont {
            top: 520px;
            left: 280px;
            text-align: left;
        }

        .sliderLettureMarine #slideLM6 .sliderLettureMarine-cont {
            top: 520px;
            right: 280px;
            text-align: right;
        }

        .sliderLettureMarine .active .sliderLettureMarine-img {
            -ms-transform: scale(1, 1);
            /* IE 9 */
            -webkit-transform: scale(1, 1);
            /* Safari */
            transform: scale(1, 1);
            opacity: 1;
        }

        .sliderLettureMarine .active .sliderLettureMarine-cont {
            background-color: rgba(170, 227, 251, 0.14);
        }

            .sliderLettureMarine .active .sliderLettureMarine-cont .text-info {
                color: #08679e;
            }
}

.tableResp {
    position: relative;
}

    .tableResp .tableRespCont table {
        border-collapse: separate;
        max-width: none;
        border: 0 none;
        margin: 0;
    }

    .tableResp .tableRespCont th,
    .tableResp .tableRespCont td {
        border: 0 none;
        border-bottom: 4px solid trasparent;
        border-right: 4px solid trasparent;
    }

        .tableResp .tableRespCont th[colspan],
        .tableResp .tableRespCont td[colspan] {
            color: #fff;
            background: #08679e;
        }

.bollettini-sms .tableResp .tableRespCont th[colspan],
.bollettini-sms .tableResp .tableRespCont td[colspan] {
    color: #000;
    background: #fff;
}

    .tableResp .tableRespCont tr th:first-child {
        text-align: left;
    }

    .tableResp .tableRespCont tr td:last-child,
    .tableResp .tableRespCont tr th:last-child {
        border-right: 0 none;
    }

    .tableResp .tableRespCont thead th {
        font-family: 'Karla', sans-serif;
        color: #a0a4a6;
        font-weight: 700;
    }

        .tableResp .tableRespCont thead th.c-evi {
            background: #48c02b;
            color: #fff;
        }

    .tableResp .tableRespCont tbody > tr:last-child td,
    .tableResp .tableRespCont tbody > tr:last-child th {
        border-bottom: 0 none;
    }

    .tableResp .tableRespCont .c-evi {
        background-color: #f0f0f0;
    }

    .tableResp tr .dateField {
        text-align: center;
    }

    .tableResp tr .textField {
        text-align: left;
        padding-left: 15px;
    }

    .tableResp tr .numberField {
        text-align: right;
        padding-right: 15px;
    }

    .tableResp .tableRespCont .table-striped > tbody > tr:nth-of-type(odd) .c-evi {
        background-color: #e6e6e6;
    }

    .tableResp .tableRespCont table.tableSinottiche tbody tr td,
    .tableResp .tableRespCont table.tableSinottiche tbody tr th {
        border-bottom: 1px solid #666!important;
    }
    .tableResp .tableRespCont table.tableSinottiche tbody tr th.odd {
        border-bottom: 1px solid #4DA1CA!important;
        background-color: #4DA1CA;
        border-bottom: 2px solid #DEEAF4;
        color: #FFFFFF;
    }
    .tableResp .tableRespCont table.tableSinottiche tbody tr td,
    .tableResp .tableRespCont table.tableSinottiche thead tr td,
    .tableResp .tableRespCont table.tableSinottiche tbody tr th,
    .tableResp .tableRespCont table.tableSinottiche thead tr th {
        padding: 5px 3px;
        font-size: 13px;
    }

        .tableResp .tableRespCont table.tableSinottiche tbody tr td.tdDato,
        .tableResp .tableRespCont table.tableSinottiche thead tr td.tdDato,
        .tableResp .tableRespCont table.tableSinottiche tbody tr th.tdDato,
        .tableResp .tableRespCont table.tableSinottiche thead tr th.tdDato {
            position: relative;
        }

            .tableResp .tableRespCont table.tableSinottiche tbody tr td.tdDato span,
            .tableResp .tableRespCont table.tableSinottiche thead tr td.tdDato span,
            .tableResp .tableRespCont table.tableSinottiche tbody tr th.tdDato span,
            .tableResp .tableRespCont table.tableSinottiche thead tr th.tdDato span {
                position: relative;
                z-index: 2;
                text-shadow: -1px -1px 0 #fff;
            }

            .tableResp .tableRespCont table.tableSinottiche tbody tr td.tdDato div,
            .tableResp .tableRespCont table.tableSinottiche thead tr td.tdDato div,
            .tableResp .tableRespCont table.tableSinottiche tbody tr th.tdDato div,
            .tableResp .tableRespCont table.tableSinottiche thead tr th.tdDato div {
                content: " ";
                position: absolute;
                top: 0;
                left: 0;
                width: 0%;
                width: attr(data-width);
                height: 100%;
                background-color: #1e65f6;
            }

            .tableResp .tableRespCont table.tableSinottiche tbody tr td.tdDato.tdDatoGreen div,
            .tableResp .tableRespCont table.tableSinottiche thead tr td.tdDato.tdDatoGreen div,
            .tableResp .tableRespCont table.tableSinottiche tbody tr th.tdDato.tdDatoGreen div,
            .tableResp .tableRespCont table.tableSinottiche thead tr th.tdDato.tdDatoGreen div {
                background-color: #23f528;
            }

    .tableResp .tableRespCont table.tableSinottiche tbody tr th,
    .tableResp .tableRespCont table.tableSinottiche thead tr th {
        vertical-align: top;
    }

        .tableResp .tableRespCont table.tableSinottiche tbody tr th small,
        .tableResp .tableRespCont table.tableSinottiche thead tr th small {
            color: #36aee8;
            font-style: italic;
            display: block;
        }

    .tableResp .tableRespCont table.tableSinottiche small {
        font-size: 11px;
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        line-height: 12px;
    }

@media (max-width: 1139px) {
    .tableResp .tableRespCont {
        /*overflow: hidden;*/
        overflow: auto;
        overflow-y: hidden;
        margin-left: 28%;
        width: 72%;
    }

    .tableResp tr th:first-child {
        position: absolute;
        left: 0;
        width: 28%;
        display: block;
    }

    .tableResp tr.rowEvi th:first-child {
        position: absolute;
        left: 0;
        width: 100%;
        color: #fff;
        background: #89d0ee;
        text-align: center;
        display: block;
    }
}

@media (min-width: 768px) {
    .tableResp th {
        font-weight: 700;
        color: #212121;
        font-size: 16px;
    }

    .tableResp table:not(.table-condensed) tbody tr td,
    .tableResp table:not(.table-condensed) thead tr td,
    .tableResp table:not(.table-condensed) tbody tr th,
    .tableResp table:not(.table-condensed) thead tr th {
        padding: 17px 8px;
    }

    .tableResp thead th {
        font-size: 20px;
    }
}

.profiloR {
    display: inline-block;
}

    .profiloR .profiloR-dati {
        display: inline-block;
        vertical-align: middle;
        margin: 15px;
    }

        .profiloR .profiloR-dati h4 {
            margin-top: 0;
        }

    .profiloR .img-circle {
        border: 3px solid #fff;
        box-shadow: 0 0 0 8px #08679e;
        background-color: #d9dbde;
    }

.datoR {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 15px;
}

    .datoR .datoC {
        width: 65px;
        height: 65px;
        font-size: 47px;
        font-weight: 400;
        line-height: 96px;
        width: 108px;
        height: 108px;
        border: 6px solid #d9dbde;
        border-radius: 50%;
        color: #9a9a9a;
        margin-bottom: 10px;
    }

    .datoR.datoR-evi .datoC {
        border-color: #36aee8;
    }

.social-icon {
    width: 41px;
    height: 41px;
    text-indent: -999px;
    text-align: left;
    overflow: hidden;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 5px 5px;
}

    .social-icon.ico-fb {
        background-image: url(img/facebook-logo.png);
    }

    .social-icon.ico-tw {
        background-image: url(img/twitter-logo.png);
    }

    .social-icon.ico-gp {
        background-image: url(img/google-plus-logo.png);
    }

    @media (min-width: 1200px){
        #header nav ul li a{
            margin: 0 9px;
        }
    }

.box-pacchetto {
    margin: 40px 15% 15px;
    border-radius: 6px;
    background-color: #ffffff;
    padding: 15px;
    position: relative;
    height: 431px;
}

@media (min-width: 768px) {
    .box-pacchetto {
        margin: 15px;
        padding: 30px 15px;
        -moz-transition: all 200ms ease-in;
        -webkit-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }
}

@media (min-width: 992px) {
    .box-pacchetto .btn {
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.3333333;
        border-radius: 10px;
    }
}

.box-pacchetto .box-pacchetto-title {
    border-radius: 6px 6px 0 0;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Karla', sans-serif;
    color: #08679e;
    line-height: 1;
    margin: -15px -15px 0;
    padding: 15px;
    -moz-transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

    .box-pacchetto .box-pacchetto-title span:first-child {
        font-size: 17px;
        color: #a0a4a6;
        display: block;
    }

@media (min-width: 768px) {
    .box-pacchetto .box-pacchetto-title {
        margin: -30px -15px 0;
        padding: 30px 15px;
        background-color: #f2fafe;
        background-image: url(img/bgPacchetto.png);
        background-repeat: no-repeat;
        background-position: center bottom;
    }
}

@media (min-width: 992px) {
    .box-pacchetto .box-pacchetto-title {
        font-size: 80px;
    }

        .box-pacchetto .box-pacchetto-title span:first-child {
            font-size: 34px;
        }
}

@media (min-width: 768px) {
    .box-pacchetto:hover,
    .box-pacchetto.premium {
        box-shadow: 0 0 0 6px rgba(8, 103, 158, 0.13);
        margin: 0;
        padding: 30px 15px 45px;
    }

        .box-pacchetto:hover .box-pacchetto-title,
        .box-pacchetto.premium .box-pacchetto-title {
            margin: -30px -15px 0;
            padding: 45px 15px 30px;
            background-color: #b6e2f7;
        }
}

.box-pacchetto .pacchetto-label {
    position: absolute;
    line-height: 24px;
    background-color: #488dc6;
    padding: 0 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Karla', sans-serif;
    top: -12px;
    right: 5px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .box-pacchetto .pacchetto-label {
        font-size: 14px;
        line-height: 33px;
        top: -16px;
        right: 15px;
    }
}

.box-pacchetto ul {
    list-style-type: none;
    padding: 0;
    margin: 15px 0 30px;
}

    .box-pacchetto ul li {
        display: block;
        padding: 10px 0;
        position: relative;
    }

        .box-pacchetto ul li + li:after {
            content: " ";
            position: absolute;
            top: -1px;
            left: 50%;
            margin-left: -35px;
            height: 2px;
            width: 70px;
            background: #e6e6e6;
        }

@media (max-width: 767px) {
    .box-pacchetto ul {
        display: none;
    }

        .box-pacchetto ul.showDett {
            display: block;
        }
}

@media (min-width: 768px) {
    .text-center-sm {
        text-align: center;
    }

    .text-right-sm {
        text-align: right;
    }
}
/* Dots slider*/
.slick-dotted .slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 15px;
    background-color: #f7f7f7;
    margin: 0;
    left: 75px;
    right: 75px;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

        .slick-dots li button {
            border: 0;
            background: transparent;
            display: block;
            height: 20px;
            width: 20px;
            outline: none;
            line-height: 0px;
            font-size: 0px;
            color: transparent;
            padding: 5px;
            cursor: pointer;
        }

            .slick-dots li button:hover,
            .slick-dots li button:focus {
                outline: none;
            }

                .slick-dots li button:hover:before,
                .slick-dots li button:focus:before {
                    opacity: 0.7;
                }

            .slick-dots li button:before {
                position: absolute;
                top: 0;
                left: 0;
                content: "•";
                width: 20px;
                height: 20px;
                font-size: 40px;
                line-height: 20px;
                text-align: center;
                color: #c3cacd;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

        .slick-dots li.slick-active button:before {
            color: #359dd1;
        }

.button-map-l {
    display: block;
    width: 61px;
    height: 61px;
    background: url(img/sprite-button-sx.png) no-repeat center center;
    text-indent: -9999px;
    overflow: hidden;
}

.button-l-icon0 {
    background-position: -1px -1px;
}

    .button-l-icon0:hover,
    .button-l-icon0:active,
    .button-l-icon0:focus {
        background-position: -71px -1px;
    }

    .button-l-icon0.selected {
        background-position: -71px -1px;
    }

.button-l-icon1 {
    background-position: -1px -66px;
}

    .button-l-icon1:hover,
    .button-l-icon1:active,
    .button-l-icon1:focus {
        background-position: -71px -66px;
    }

    .button-l-icon1.selected {
        background-position: -71px -66px;
    }

.button-l-icon2 {
    background-position: -1px -131px;
}

    .button-l-icon2:hover,
    .button-l-icon2:active,
    .button-l-icon2:focus {
        background-position: -71px -131px;
    }

    .button-l-icon2.selected {
        background-position: -71px -131px;
    }

.button-l-icon3 {
    background-position: -1px -196px;
}

    .button-l-icon3:hover,
    .button-l-icon3:active,
    .button-l-icon3:focus {
        background-position: -71px -196px;
    }

    .button-l-icon3.selected {
        background-position: -71px -196px;
    }

.button-l-icon4 {
    background-position: -1px -261px;
}

    .button-l-icon4:hover,
    .button-l-icon4:active,
    .button-l-icon4:focus {
        background-position: -71px -261px;
    }

    .button-l-icon4.selected {
        background-position: -71px -261px;
    }

.button-l-icon5 {
    background-position: -1px -326px;
}

    .button-l-icon5:hover,
    .button-l-icon5:active,
    .button-l-icon5:focus {
        background-position: -71px -326px;
    }

    .button-l-icon5.selected {
        background-position: -71px -326px;
    }

.button-l-icon6 {
    background-position: -1px -391px;
}

    .button-l-icon6:hover,
    .button-l-icon6:active,
    .button-l-icon6:focus {
        background-position: -71px -391px;
    }

    .button-l-icon6.selected {
        background-position: -71px -391px;
    }

.button-l-icon7 {
    background-position: -1px -456px;
}

    .button-l-icon7:hover,
    .button-l-icon7:active,
    .button-l-icon7:focus {
        background-position: -71px -456px;
    }

    .button-l-icon7.selected {
        background-position: -71px -456px;
    }

.button-l-icon8 {
    background-position: -1px -521px;
}

    .button-l-icon8:hover,
    .button-l-icon8:active,
    .button-l-icon8:focus {
        background-position: -71px -521px;
    }

    .button-l-icon8.selected {
        background-position: -71px -521px;
    }


.button-l-icon9 {
    background-position: -1px -586px;
}

    .button-l-icon9:hover,
    .button-l-icon9:active,
    .button-l-icon9:focus {
        background-position: -71px -586px;
    }

    .button-l-icon9.selected {
        background-position: -71px -586px;
    }

.button-map-r {
    display: block;
    width: 61px;
    height: 61px;
    background: url(img/sprite-button-dx.png) no-repeat center center;
    text-indent: -9999px;
    overflow: hidden;
}

.button-r-icon0 {
    background-position: -81px -1px;
}

    .button-r-icon0:hover,
    .button-r-icon0:active,
    .button-r-icon0:focus {
        background-position: -1px -1px;
    }

    .button-r-icon0.selected {
        background-position: -1px -1px;
    }

.button-r-icon1 {
    background-position: -81px -67px;
    height: 57px;
}

    .button-r-icon1:hover,
    .button-r-icon1:active,
    .button-r-icon1:focus {
        background-position: -1px -67px;
    }

    .button-r-icon1.selected {
        background-position: -1px -67px;
    }

.button-r-icon2 {
    background-position: -81px -125px;
    height: 57px;
}

    .button-r-icon2:hover,
    .button-r-icon2:active,
    .button-r-icon2:focus {
        background-position: -1px -125px;
    }

    .button-r-icon2.selected {
        background-position: -1px -125px;
    }

.button-r-icon3 {
    background-position: -81px -189px;
}

    .button-r-icon3:hover,
    .button-r-icon3:active,
    .button-r-icon3:focus {
        background-position: -1px -189px;
    }

    .button-r-icon3.selected {
        background-position: -1px -189px;
    }

.button-r-icon4 {
    background-position: -81px -257px;
}

.button-r-icon4:hover,
.button-r-icon4:active,
.button-r-icon4:focus {
    background-position: -1px -257px;
}

.button-r-icon4.selected {
    background-position: -1px -257px;
}

.button-r-icon5 {
    background-position: -81px -330px;
}

.button-r-icon5:hover,
.button-r-icon5:active,
.button-r-icon5:focus {
    background-position: -1px -330px;
}

.button-r-icon5.selected {
    background-position: -1px -330px;
}

.button-r-icon6 {
    background-position: -81px -399px;
}
.button-r-icon6.selected {
    background-position: -1px -399px;
}

.button-r-icon7 {
    background-position: -81px -466px;
}

.button-r-icon8 {
    background-position: -81px -533px;
}
.button-r-icon8.selected {
    background-position: -1px -533px;
}

.maps {
    position: relative;
}

    .maps .mapscontrols-left {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 61px;
        z-index: 9999;
    }

@media (max-width: 991px) {
    .maps .mapscontrols-left {
/*        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;*/
    }
}

.maps .mapscontrols-right {
    z-index: 401;
    position: absolute;
    top: 15px;
    right: 15px;
    width: 61px;
}

@media (max-width: 991px) {
    .maps .mapscontrols-right {
/*        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        -webkit-transform-origin: right top;
        transform-origin: right top;*/
    }
}

.maps .mapscontrols-bottomright {
    z-index: 1400;
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 61px;
}

@media (max-width: 991px) {
    .maps .mapscontrols-bottomright {
        /*        -webkit-transform: scale(0.5, 0.5);
                transform: scale(0.5, 0.5);
                -webkit-transform-origin: right bottom;
                transform-origin: right bottom;*/
    }
}

.mw-md {
    max-width: 900px;
}

.form-register input[type=radio] {
    margin-left: 10px;
}

.menu-login-button {
    top: 0;
    border: 2px solid;
    padding: 0px 34px 0px 8px !important;
    text-align: left;
    border-radius: 12px;
    line-height: 36px !important;
}

    .menu-login-button:before {
        position: absolute;
        content: "";
        width: 22px;
        height: 22px;
        top: 8px;
        font-size: 18px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        right: 8px;
        background: url(img/user.png) no-repeat center center;
    }

.table-filter-container {
    padding: 20px 10px;
}


.overflow-auto {
    overflow: auto;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.vertical-align-bottom {
    vertical-align: bottom !important;
}

.submenu-statistiche {
    height: 32px;
    background-color: #087bb2;
}

.my-range {
}

input[type=range].my-range {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
}

    input[type=range].my-range::-webkit-slider-thumb {
        -webkit-appearance: none;
    }

    input[type=range].my-range:focus {
        outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
    }

    input[type=range].my-range::-ms-track {
        width: 100%;
        cursor: pointer;
        /* Hides the slider so custom styles can be added */
        background: transparent;
        border-color: transparent;
        color: transparent;
    }
    /* Special styling for WebKit/Blink */
    input[type=range].my-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 1px solid #000000;
        height: 20px;
        width: 10px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
        margin-top: -8px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
    }

    /* All the same stuff for Firefox */
    input[type=range].my-range::-moz-range-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 20px;
        width: 10px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
    }

    /* All the same stuff for IE */
    input[type=range].my-range::-ms-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 20px;
        width: 10px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
    }

    input[type=range].my-range::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: #3071a9;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range].my-range:focus::-webkit-slider-runnable-track {
        background: #367ebd;
    }

    input[type=range].my-range::-moz-range-track {
        width: 100%;
        height: 6px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: #3071a9;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range].my-range::-ms-track {
        width: 100%;
        height: 6px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }

    input[type=range].my-range::-ms-fill-lower {
        background: #2a6495;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type=range].my-range:focus::-ms-fill-lower {
        background: #3071a9;
    }

    input[type=range].my-range::-ms-fill-upper {
        background: #3071a9;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type=range].my-range:focus::-ms-fill-upper {
        background: #367ebd;
    }

.fascia .container h2.h1 {
    padding: 0 15px;
}

@media (max-width: 992px) {
    .container {
        margin-left: 1%;
        margin-right: 1%;
        width: 98%;
        padding: 2px;
    }
}

/*.bg-color-light-blue a{
    background-color:#75c2e5!important;
}*/


.container.prezzi-upgrade{
        padding: 0 0 50px 0px;
    /*margin-bottom: -46px;*/
    background-color: #74c1e6;
    margin-top: 4px;
    max-width: 1140px;
    width: 100%;
}

#headerAdminInner nav ul{
    overflow: visible;
}
@media (max-width: 992px) { 
    .container.prezzi-upgrade{
            padding-bottom: 45px!important;
    }
}

#zone-content{
    padding-top:0px!important;
}

#featurePopup_contentDiv span b {
    color:white;
    padding:4px;
}

@media (max-width: 568px) { 
    #map{
        height: 375px;
    }
/*    #map.map0 .leaflet-top.leaflet-left{
        transform: scale(0.8, 0.8);
        margin-top: -78px;
    }
    #map.map0 .leaflet-top.leaflet-right{
        transform: scale(0.8, 0.8);
        margin-top: -48px;
    }
    #map.map1 .leaflet-top.leaflet-right{
        transform: scale(0.8, 0.8);
        margin-top: -14px;
    }*/
}


.bold {
    font-weight: bold;
}

.hidden {
    display: none;
}


.maps .mapscontrols-find-coordinates {
    z-index: 1400;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    padding: 6px 10px;
    background-color: rgba(0,62,114,0.6);
    color: white;
}

    .maps .mapscontrols-find-coordinates.port {
        top: 50%;
        left: 50%;
        bottom: unset;
        right: unset;
        transform: translateX(-50%) translateY(-50%);
    }


.maps .mapscontrols-find-coordinates.port {
    display: none;
}

.maps .mapscontrols-find-coordinates.port.active{
    display:block;
}

.button-trova-porto{
    background-color: rgb(200, 26, 26);
    border: none; color: white;
    font-weight: bold;
    padding: 6px 10px;
    cursor: pointer;
    z-index: 999;
    position: absolute;
    bottom: 26px;
    right: 10px;
}

.maps .mapscontrols-find-coordinates .input-coordinates {
    width: 34px;
    padding: 1px 6px;
    font-size: 18px;
    border: none;
    color: black;
}
.maps .mapscontrols-find-coordinates .input-coordinates.input-large {
    width: 78px;
}
.maps .mapscontrols-find-coordinates.port .input-coordinates.input-large {
    width: 200px;
}
.maps .mapscontrols-find-coordinates .input-coordinates.input-small::-webkit-outer-spin-button,
.maps .mapscontrols-find-coordinates .input-coordinates.input-small::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.maps .mapscontrols-find-coordinates button {
    background-color: #c81a1a;
    border: none;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    cursor: pointer;
}


.rotte-salvate .data-creazione{
    display: none;
}

#previsioni-table .data.ws{
    vertical-align: top!important;
}
#previsioni-table .data.me:not(.newriga){
    vertical-align: top!important;
}

@media (max-width: 441px) {
    .maps.meteorotte .mapscontrols-right {
        top: 70px;
    }

    .maps .mapscontrols-find-coordinates {
        width: 100%;
        /*font-size: 10px;*/
    }


    .maps .mapscontrols-find-coordinates .input-coordinates {
        width: 22px;
        height: 13px;
        padding: 0px 2px;
        font-size: 10px;
    }
    .maps .mapscontrols-find-coordinates .input-coordinates.input-large {
        width: 68px;
    }

    .maps .mapscontrols-find-coordinates button {
        font-size: 8px;
        padding: 3px 6px;
    }

    .maps .mapscontrols-find-coordinates span.ml-md{
        margin-left: 0;
    }
}

.maps .mapscontrols-meteorotte-container {
    z-index: 1400;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    left:0;
}

.maps .mapscontrols-show-coordinates {
    width: 250px;
    background-color: #da3428;
    color: white;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 12px;
    padding: 5px;
    position: relative;
    margin: auto;
    top: 6px;
    z-index: 500;
}

.maps .mapscontrols-meteorotte {
    z-index: 1400;
    position: relative;
    margin: auto;
    width: 812px;
    background-color: rgba(0,62,114,0.6);
}

.maps .mapscontrols-meteorotte .mapscontrols-meteorotte {
    visibility: visible;
}

.maps .mapscontrols-meteorotte > div {
    width: 134px;
    background-color: rgb(218,52,40);
    /*background-color: rgb(40, 119, 218);*/
    color: white;
    font-weight: bold;
    border: none;
    padding: 7px;
    margin: 10px;
    cursor: pointer;
    display: inline-table;
}

.maps .mapscontrols-meteorotte > div.green {
    background-color: rgb(0, 164, 0);
}

@media (max-width: 991px) {
    .maps .mapscontrols-meteorotte {
        width: 100%;
		bottom: 60px;
    }
}

@media (max-width: 800px) {
    .maps .mapscontrols-meteorotte > div {
        width: 19%;
        font-size: 9px;
        color: white;
        font-weight: bold;
        border: none;
        padding: 4px;
        margin: 4px 0px;
        cursor: pointer;
    }

    .maps .mapscontrols-show-coordinates {
        width: 161px;
        font-size: 8px;
        top: 1px;
    }
}

@media (max-width: 500px) {
    .maps .mapscontrols-meteorotte > div {
        width: 32%;
        font-size: 9px;
        color: white;
        font-weight: bold;
        border: none;
        padding: 4px 0px;
        margin: 4px 0px;
        cursor: pointer;
    }

    .maps .mapscontrols-show-coordinates {
        visibility: hidden;
    }
}



.maps {
    position: relative;
    overflow: hidden;
}


.caratteristiche .img-servizi{
    width: 650px;
}



@media (max-width: 568px) {
    #map {
        height: 375px;
    }

/*    #map.map0 .leaflet-top.leaflet-left {
        transform: scale(0.8, 0.8);
        margin-top: -78px;
    }

    #map.map0 .leaflet-top.leaflet-right {
        transform: scale(0.8, 0.8);
        margin-top: -48px;
    }

    #map.map1 .leaflet-top.leaflet-right {
        transform: scale(0.8, 0.8);
        margin-top: -14px;
    }*/
}


.circleMarker {
    width: 15px;
    height: 15px;
    left: -3px;
    top: -5px;
    background-color: #ffffff;
    border-radius: 20pc;
    border: 1px solid;
    border-color: #ff530a;
    position: absolute;
}

.circleMarker.selected {
    width: 19px;
    height: 19px;
    left: -5px;
    top: -7px;
    background-color: #087bb2;
    border-color: #087bb2!important;
    border: 2px solid;
}

.circleMarker-number {
    z-index: 99;
    position: absolute;
    top: -5px;
    left: 2px;
    font-weight: bold;
}

.circleMarker-number.two-digits {
    left: -1px;
}

.labelFirst {
    display: none;
}
.leaflet-control-fullscreen-button.leaflet-bar-part{
    display: none;
}
.leaflet-control-coordinates.leaflet-control {
    display: none;
}

.zIndexMap {
    z-index: 2147483647 !important;
}


.popup-cartografica {
}

.popup-cartografica .popup-latlng {
    width: 150px;
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
}

.popup-cartografica button {
    background-color: #c81a1a;
    border: none;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    cursor: pointer;
    margin-top: 6px;
    width: 100%;
}

.meteorotte #map{
    cursor: crosshair;
}

.meteorotte .leaflet-control-attribution.leaflet-control {
    display: none;
}

.leaflet-control-timePicker {
    position: absolute;
    top: 3px;
    left: -120px;
}
.leaflet-control-timePicker-toggle {
    display: block;
    text-align: right;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    border-radius: 4px;
    text-indent: -9999px
}

.leaflet-control-timePicker .leaflet-control-timePicker-date,
.leaflet-control-timePicker .leaflet-control-timePicker-player {
    /*display: none;*/
    float: left
}

.leaflet-control-timePicker-expanded .leaflet-control-timePicker-date,
.leaflet-control-timePicker-expanded .leaflet-control-timePicker-player {
    display: block;
    position: absolute;
    right: 50px;
    top: 0
}

.leaflet-control-timePicker-expanded .leaflet-control-timePicker-player {
    text-align: center
}

.leaflet-control-timePicker .leaflet-control-timePicker-player-image {
    cursor: pointer;
    height: 100%;
    padding-top: 3px;
    opacity: .4
}

.leaflet-control-timePicker-expanded .leaflet-control-timePicker-date {
    top: 55px
}

.leaflet-control-timePicker-expanded .leaflet-control-timePicker-date,
.leaflet-control-timePicker-expanded .leaflet-control-timePicker-player {
    padding: 6px 10px 6px 6px;
    color: #333;
    background: #fff;
    border-radius: 5px
}

.leaflet-control-timePicker-expanded .leaflet-control-timePicker-player {
    margin-right: 7px;
    width: 100px;
    padding: 6px 6px 6px 6px;
    min-height: 36px
}

.leaflet-control-timePicker-selector {
    margin-top: 2px;
    position: relative;
    top: 1px
}

.leaflet-control-timePicker label {
    display: block
}

.leaflet-control-timePicker-separator {
    height: 0;
    border-top: 1px solid #ddd;
    margin: 5px -10px 5px -6px
}

.leaflet-control-timePicker .leaflet-control-timePicker-date {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    background: #FFF;
    border-radius: 5px;
    padding: 6px 6px 6px 6px;
    margin-right: 7px;
    float: left;
    width: 112px;
    height: 419px
}

.leaflet-control-timePicker .leaflet-control-timePicker-date .leaflet-control-timePicker-giorni-wrap,
.leaflet-control-timePicker .leaflet-control-timePicker-date .leaflet-control-timePicker-ore-wrap {
    height: 436px;
    float: left
}

.leaflet-control-timePicker .leaflet-control-timePicker-date .leaflet-control-timePicker-giorni-wrap {
    margin-right: 4px
}

.leaflet-control-timePicker .leaflet-control-timePicker-date .leaflet-control-timePicker-giorni-cont,
.leaflet-control-timePicker .leaflet-control-timePicker-date .leaflet-control-timePicker-ore-cont {
    height: 360px;
    width: 48px;
    overflow: hidden;
    padding: 2px 0;
    position: relative;
}

.leaflet-control-timePicker .leaflet-control-timePicker-date ul {
    margin: 0;
    padding: 0;
    width: 48px;
    position: absolute;
    top: 0px;
    transition: all 0.2s ease-in-out;
}

.leaflet-control-timePicker .leaflet-control-timePicker-date li {
    display: block;
    padding: 0;
    width: 48px;
    height: 48px;
    cursor: pointer;
    background: #d1d2d3;
    color: #fff;
    margin-bottom: 4px
}

.leaflet-control-timePicker .leaflet-control-timePicker-date li:hover {
    background: #003e70;
}

.leaflet-control-timePicker .leaflet-control-timePicker-date li.selected {
    background: #003e70
}

.leaflet-control-timePicker .leaflet-control-timePicker-date li span {
    text-align: center;
    padding: 0;
    padding: 5px 0;
    display: block;
    font-size: 12px;
    text-transform: uppercase
}

.leaflet-control-timePicker .leaflet-control-timePicker-date .leaflet-control-timePicker-ore li span {
    padding-top: 14px;
    font-weight: bold
}

.leaflet-control-timePicker-prev,
.leaflet-control-timePicker-next {
    cursor: pointer;
    display: block;
    margin-top: 5px;
    height: 12px;
    width: 20px;
    margin-left: 14px;
    margin-right: 14px;
    background-image: url("img/arrow_sprite.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    text-indent: -9999px
}

.leaflet-control-timePicker-prev {
    margin-bottom: 5px;
    background-position: -20px 0
}

.leaflet-control-timePicker-next {
    margin-top: 5px;
    background-position: 0 0
}

.leaflet-control-timePicker-prev.disabled,
.leaflet-control-timePicker-next.disabled {
    opacity: .4
}

.leaflet-control-timePicker-prev.disabled:hover,
.leaflet-control-timePicker-next.disabled:hover {
    opacity: 1;
}

.previsioni_meteorotta .incidenza {
    width: 70px;
    height: 70px;
    background-image: url(img/meteorotte_inc_quadrante_nuovo_02.png);
    background-size: 70px 70px;
    background-position: center center;
    background-repeat: no-repeat;
    position:relative;
    margin-top:10px;
    float:left;
}

.previsioni_meteorotta .incidenza .inc_vento,
.previsioni_meteorotta .incidenza .inc_mare {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 0px;
    left: 0px;
    background-size: 70px;
    text-align: center;
    padding-top: 0px;
}

.previsioni_meteorotta .incidenza .inc_vento {
    background-image: url(img/meteorotte_inc_vento_3.png);
}

.previsioni_meteorotta .incidenza .inc_mare {
    background-image: url(img/meteorotte_inc_mare_3.png);
}

.previsioni_meteorotta .incidenza_values_wind,
.previsioni_meteorotta .incidenza_values_sea {
    float:left;
    font-size:11px;
}
.previsioni_meteorotta .incidenza_values_wind {
    padding-top:19px !important;
}
.previsioni_meteorotta .incidenza_values_sea {
    padding-top:11px !important;
}

table#koala .label   {font-size:13px; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white; color: #333333}
table#koala .label-b {position:relative;font-size:11px;color:#666;padding: 0 3px 0 33px;white-space: nowrap; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;}
table#koala .label-c {float:left;border-right:1px solid #cccccc;text-align:right;margin-right:4px;padding-right:4px;width:30px; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;}
table#koala .label-d {position:relative;font-size:13px;color:#666;padding: 0 3px 0 0px;white-space: nowrap; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;}
table#koala div.label_d {text-align:center;}

table#koala {background-color: #FFFFFF;border: 0;color: #000000;text-align: left;}
.page-meteomed-meteorotte-weather table#koala { width: 924px; margin-bottom: 20px; }
table#koala a:link, table#koala a:visited, table#koala a:active {background-color: transparent;color: #0096BD;text-decoration: none;}
table#koala a:hover {background: transparent;color: #000000;text-decoration: underline;}

table#koala .label-b span {}
table#koala .label-b abbr {display:block; padding-top:10px;}

table#koala,table#koala td,table#koala th, .previsioni thead th {margin: 0;padding: 0;text-align:left;}

table#koala tbody td,table#koala tbody th {padding: 0;font-weight:normal;}
table#koala tbody th {padding: 2px 4px;}
table#koala tbody td div {padding: 0;}
table#koala tbody tr.odd th {background-color: #4DA1CA;border-bottom: 2px solid #DEEAF4;color:#FFFFFF;}
table#koala tbody tr:hover {background-color: #DEEAF4;}
table#koala tbody tr td.odd, table#koala tbody tr th.odd {background-color: #4DA1CA;border-bottom: 2px solid #DEEAF4;color:#FFFFFF;}
table#koala td,table#koala  th, .previsioni thead th, .previsioni thead td  {vertical-align: middle;}
table#koala tfoot td,table#koala  tfoot th {font-weight: bold;padding: 4px 8px 6px 9px;}
table#koala thead th,.previsioni thead th {background-color: #DEEAF4;color:#000000;font-size: 13px;font-weight: normal;line-height: 12px;padding: 7px 4px 7px 4px;white-space: nowrap;}
table#koala thead th span,.previsioni thead th span {display:block;color:#4DA1CA; text-align:center;}
body.page-statistiche table#koala thead th span,.previsioni thead th span {display:block;color:#4DA1CA; text-align:left;}
table#koala thead th.left span,.previsioni thead th.left span {display:block;color:#4DA1CA; text-align:left;}
.previsioni thead th span.localtime {text-align:left;}
table#koala tbody tr td span.distanza { display:block; padding:0 4px; }
table#koala tbody tr td.testoTratta { padding:8px 5px; font-size:15px;}
table#koala tbody tr td span.coordinate { display: block;color:#4DA1CA; font-size:90%; padding:0 4px; }
table#koala tbody tr td.tempo { padding:0 4px; }

table#koala tbody tr td.newriga.me img { width:32px;}
table#koala .subtitle {text-align:left;}

.inner_table {
    margin:0px;
    padding:0px;
}
.inner_table thead td,table#koala td  .inner_table thead td {
    font-size:9px;
    background-color:#DEEAF4 !IMPORTANT;
    border:none !IMPORTANT;
}
.inner_table tbody td,table#koala td .inner_table tbody td {
    text-align:center;
    font-weight: bold;
    vertical-align: bottom;
    border-bottom:none;
    border-top:none;
    border-left:none;
    padding:2px;
}

table#koala tr th span.headup,
.page-meteorotte table.sticky-header thead th span.headup,
.previsioni thead th span.headup {
    color: #003e70;
    font-weight: bold;
    text-align: left;
}


.bollettino-iscriviti{
}
    .bollettino-iscriviti .row{
        margin: 0;
    }
    .bollettino-iscriviti .col-lg-12{
        padding: 0;
    }
    .bollettino-iscriviti .text-container{
    }
        .bollettino-iscriviti .text-container .text{
            font-size: 20px;
            color: #FFF;
            margin-left: 35px;
            background: url(../../images/ico_newsletter.png) top left no-repeat;
            background-position-y: 32px;
            padding-left: 95px;
            margin-top: -10px;
            padding-top: 18px;
        }

        .fascia-info-meteo-porti .bollettino-iscriviti .text-container .text{
            background-position-y: 62px;
        }

        @media (max-width: 550px){
            .bollettino-iscriviti .text-container .text{
                font-size: 18px;
                color: #FFF;
                margin-left: 0px;
                background: none;
                background-position-y: 32px;
                padding-left: 0px;
                margin-top: -10px;
                padding-top: 25px;
                text-align: center;
            }
        }


    .bollettino-iscriviti .iscriviti-button{
        margin-top: 34px;
        margin-left: 0px;
        padding-bottom: 12px;
    }

    .fascia-info-meteo-porti .bollettino-iscriviti .iscriviti-button {
        margin-top: 62px;
    }
    @media (max-width: 550px){
        .fascia-info-meteo-porti .bollettino-iscriviti .iscriviti-button {
            margin-top: 34px!important;
        }
    }

        .bollettino-iscriviti .iscriviti-button a{
            margin-left: 43px;
            background: #FF9600;
            color: #FFF;
            display: inline-block;
            height: 36px;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: normal;
            font-size: 16px;
            line-height: 2.3;
            padding-left: 13px;
            padding-right: 8px;
        }
            .bollettino-iscriviti .iscriviti-button a::after{
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                border-left: 19px solid #FF9600;
                border-top: 20px solid transparent;
                border-bottom: 16px solid transparent;
                margin: 0px 0px 0px 8px;
            }


            .caratteristiche-numero{
                background: url(../../images/phone.png) left 0px top 38px no-repeat;
                padding-left: 34px;
                margin-top: 17px;
                padding-bottom: 10px;
                float: left;
                /*margin-left: 16px;*/
                color: #85c1dd;
            }

@media (max-width: 1199px){
    .bollettino-iscriviti .iscriviti-button{
        text-align: center;
    }
        .bollettino-iscriviti .iscriviti-button a {
            margin-left: -10px;
        }
}
            
.caratteristiche-numero-header{
    background: url(../../images/phone-dark.png) left 0px top 6px no-repeat;
    padding-left: 40px;
    margin-top: -5px;
    margin-left: 200px;
    float: left;
    position: absolute;
    font-size: 10px;
    padding-bottom: 0;
    color: #07669d;
    cursor: pointer;
}

.sweet-alert{
    z-index: 9999999999!important;
}

@media (max-width: 600px) {
    .caratteristiche-numero-header{
        margin-left: 172px;
    }
    .caratteristiche-numero-header .phone{
        display: none;
    }
}
@media (min-width: 992px) {

    .caratteristiche-numero-header {
        /*margin-top: 7px;*/
    }
}

.caratteristiche-numero-header .social-icon {
    float: right;
    left: 58px;
    top: 5px;
    position: relative;
    margin-left: -50px;
    background-size: 40px;
}

.caratteristiche-numero-header .phone {
    color: white;
    padding-left: 4px;
    padding-top: 3px;
}
    .caratteristiche-numero-header .phone * {
        margin: 0;
    }

    .caratteristiche-numero-header .phone h3{
        margin-top: -2px;
        font-size: 19px;
     }

@media (max-width: 524px) {
    .caratteristiche-numero-header div.h3.mt-sm{
        visibility: hidden;
    }
}

            .fascia.servizi p{
                font-size: 18px;
                margin-top: 10px;
                margin-bottom: 10px;
                line-height: 1.2;
            }



            #tabs.tabs-custom{

            }

            #tabs.tabs-custom ul{
                background: none;
                border: none;
                border-bottom: 1px solid #c5c5c5;
            }
                #tabs.tabs-custom ul li a{
                    padding-left: 4px;
                    font-size: 20px;
                }
                #tabs.tabs-custom ul li .email{
                    background: url(img/icoset_servizidettaglio.png) no-repeat;
                }
                #tabs.tabs-custom ul li .sms{
                    background: url(img/icoset_servizidettaglio.png) no-repeat;
                }

#tabs.tabs-custom .ui-state-active, #tabs.tabs-custom .ui-widget-content .ui-state-active, #tabs.tabs-custom .ui-widget-header .ui-state-active, #tabs.tabs-custom a.ui-button:active, #tabs.tabs-custom .ui-button:active, #tabs.tabs-custom .ui-button.ui-state-active:hover{
    border: 1px solid #36aee8;
    background: #36aee8;
}
.bollettini-sms .tableResp .tableRespCont th, .bollettini-sms .tableResp .tableRespCont td{
    text-align: left;
}

.bollettini-sms .btn.white{
    color: white;
}

.bollettini-sms .numeri-telefono{
    font-weight: bold;
    margin: 10px 0px;
}
.bollettini-sms .numeri-telefono table{
    max-width: 400px;
}
.bollettini-sms .numeri-telefono table a {
    width: 100%;
}
.bollettini-sms .tableResp-xs table td:first-child{
    font-weight: bold;
}

.table-boll-warn table td{
    text-align: left;
}

.bollettini-sms .settori{
    max-width:400px;
}

.bollettini-sms .settori table i{
    cursor: pointer;
}

.legenda{
    border: 1px solid;
    margin: 21px;
}
.legenda .legenda_title{
    padding: 0 18px;
    margin-bottom: 0px;
}
.legenda .legenda_preferiti{
    padding: 6px 19px;
}
.legenda .footer_legenda_preferiti .legenda_title{
    font-size: 14px;
    font-weight: bold;
}
.legenda .legenda_preferiti li{
    display: inline;
    width: 25%;
    float: left;
    height: 30px;
    margin-bottom: 10px;
    padding-top: 8px;
}
@media (max-width: 900px) {
    .legenda .legenda_preferiti li {
        width: 33%;
    }
}
@media (max-width: 700px) {
    .legenda .legenda_preferiti li {
        width: 50%;
    }
}
@media (max-width: 500px) {
    .legenda .legenda_preferiti li {
        width: 100%;
    }
}
.legenda .legenda_preferiti li .img{
    width: 30px;
    height: 24px;
    vertical-align: middle;
    margin-right: 5px;
    background-image: url(img/icoset-navigazione.png);
    background-repeat: no-repeat;
}
.legenda .legenda_preferiti li .img.img1{
    width: 30px;
    height: 24px;
    vertical-align: middle;
    margin-right: 5px;
    background-image: url(img/icoset_servizidettaglio.png);
    background-repeat: no-repeat;
}
.legenda .previsioni_ico .img{
    background-position: 0px 0px;
}
.legenda .sinottica_ico .img{
    background-position: -30px 0px;
}
.legenda .sinottica5_ico .img{
    background-position: -58px 0px;
}
.legenda .statistiche_ico .img{
    background-position: -90px 0px;
}
.legenda .harbour_ico .img{
    background-position: -121px 0px;
}
.legenda .modifica_ico .img{
    background-position: -178px 0px;
}


.legenda .bollettino_ico .img{
    background-position: -26px 0px;
}
.legenda .bollettino_ico_email .img{
    background-position: 0px 0px;
}
.legenda .warning_ico .img{
    background-position: -78px 0px;
}
.legenda .warning_ico_email .img{
    background-position: -51px 0px;
}
.legenda .ormeggio_ico .img{
    background-position: -130px 0px;
}
.legenda .ormeggio_ico_email .img{
    background-position: -104px 0px;
}

/*.container.map.settori .leaflet-popup-content-wrapper, .container.map.settori .leaflet-popup-tip{*/
    /*background-color: #89e6ff;*/
/*}*/
/*.container.map.settori .leaflet-popup-content-wrapper, .container.map.settori .leaflet-popup-tip{*/
    /*background: #89e6ff;*/
/*}*/

.form-control-min {
    /* width: 30%; */
    height: 24px;
    padding: 0px 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

#map_popup {
    z-index: 401;
    width: 100%;
    height: 500px;
    position: absolute;
    top: 10px;
    text-align: center;
    opacity: 0.9;
}

#map_popup #closeMe {
    position: absolute;
    top: 0px;
    right: 5px;
    font-weight: bold;
    font-size: 36px;
    margin-top: -12px;
    margin-right: 2px;
}
#map_popup div.sinottica a {
    cursor: pointer;
}

#map_popup div.sinottica {
    position: relative;
    width: 60%;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    border-radius: 4px;
    padding: 10px;
    margin-top: 50px;
}

#map_popup div.sinottica {
    text-align: center;
    width: 40%;
}
@media (max-width: 767px) {
    #map_popup div.sinottica {
        width: 90%;
    }

    .button-trova-porto{
        bottom: 176px;
        left: 12px;
        right: unset;
    }
}

#map_popup div.sinottica h3 {
    margin: 0;
    padding: 2px;
}

#map_popup div.sinottica table {
    width: 100%;
    text-align: left
}

#map_popup div.sinottica td {
    padding: 2px 5px
}

.btn.btn-border.btn-info.warning {
    color: red;
    background: none;
    border-color: red;
}

.btn.btn-border.btn-info.warning:hover {
    color: white;
    background: none;
    background-color: red;
}

.previsioni_meteorotta > tbody > tr > td {
    border-bottom: 1pt solid #9b9b9b!important;
}

.loaderpanel {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.8;
    z-index: 999999999;
}
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-bottom: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

#loader {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 3px 15px 3px;
    border-color: transparent transparent #087bb2 /*#ff530a*/ transparent;
    -webkit-transform:rotate(126deg);
}

.widget_merchant{
    text-align: center;
}

@media (max-width: 767px) {
    #footer-logo{
        margin: auto;
    }

    #footer{
        /*display: none;*/
    }

    .container-footer{
        text-align: center;
    }

}


@media (max-width: 1199px){
    .caratteristiche-numero{
        position: relative;
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .scopri-versione-top{
        position: relative;
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}


/* Tabella responsive */
.tbl-content::-webkit-scrollbar {
    width: 6px;
}
.tbl-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(44, 162, 219, 0.6);
}
.tbl-content::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 81, 219, 0.6);
}

.tbl-header{
    background: linear-gradient(to left, #6cc4f0, #57c9ff);
    border-radius: 4px 4px 0 0;
}

.tbl-content{
    /*max-height:300px;*/
    min-height: 110px;
/*    overflow-x: hidden;
    overflow-y: auto;*/
    margin-top: 0px;
    border-bottom: none;
    color:black;
}

.tbl-content tr{
    /*background: linear-gradient(to left, rgba(44, 162, 219, 0.2), rgba(110, 185, 221,0.2));*/
}

.tbl-header table, .tbl-content table{
    width:100%;
    table-layout: fixed;
    /*background-color: rgba(116, 187, 222, 0.85);*/
}

.tbl-header table {
    background: linear-gradient(to left, #2ca2db, #6eb9dd);
    border-radius: 4px 4px 0 0;
}

.tbl-content table {
    background: linear-gradient(to left, rgba(44, 162, 219, 0.2), rgba(110, 185, 221,0.2));
    border: 1px solid rgb(52, 165, 219);
}

.tbl-header th, .tbl-content td{
    padding: 15px 4px;
    text-align: left;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;

    border-bottom: 1px solid rgb(52, 165, 219) !important;
}

.tbl-header td, .tbl-content td{
    text-align: left;
    vertical-align:middle;
    font-weight: 300;
    font-size: 16px;
    border-bottom: solid 1px rgba(255,255,255,0.1);
}
.tbl-header{
    color:white;
    font-weight:bold;
}

.tbl-content tr th:first-child, .tbl-content tr td:first-child {
    text-transform: capitalize;
}
@media (max-width: 662px) {
    .tbl-header tr th:first-child, .tbl-header tr td:first-child, .tbl-content tr th:first-child, .tbl-content tr td:first-child {
        width: 25%;
    }

    .tbl-header tr th.prev-met-md, .tbl-header tr td.prev-met-md, .tbl-content tr th.prev-met-md, .tbl-content tr td.prev-met-md {
        width: 38%;
        text-align: left;
    }

    .tbl-header tr th.prev-met-lg, .tbl-header tr td.prev-met-lg, .tbl-content tr th.prev-met-lg, .tbl-content tr td.prev-met-lg {
        width: 50%;
    }

    .tbl-header tr th.serv-met , .tbl-header tr td.serv-met, .tbl-content tr th.serv-met, .tbl-content tr td.serv-met {
        width: 40px;
    }
}

@media (max-width: 590px) {
}

.tbl-content td .btn{
    font-size: 16px;
}

@media (max-width: 400px) {
    .tbl-content td .btn:not(.btn-elim), .tbl-header .btn-td {
        padding: 4px 4px;
        text-align: center;
    }
}

.myPopup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.myPopup .btn{
    background: #dddddd;
    /*min-width: 90px;*/
}

@media (max-width: 450px){
    .myPopup{
        width: 100%;
    }
    .myPopup .btn{
        /*min-width: 59px;*/
        font-size: 11px;
        width: 100%;
    }
}

/* The actual popup */
.myPopup .myPopupToShow {
    visibility: hidden;
    width: 190px;
    background-color: #f4fbff;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    border: 1px #5bb2dc solid;
    -o-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

table tr:first-child .myPopup .myPopupToShow {
    top: 125%;
    bottom: inherit;
}

/* Popup arrow */
.myPopup .myPopupToShow::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #5bb2dc transparent transparent transparent;
}

tr:first-child .myPopup .myPopupToShow::after {
    top: -10px;
    border-color: transparent transparent #555 transparent;
 }

/* Toggle this class - hide and show the popup */
.myPopup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


/* Inverto i bottoni di sweetalert */
.sa-button-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.sa-button-container .cancel {
    -webkit-order: 1;
    order: 1;
}
.sa-button-container .sa-confirm-button-container {
    -webkit-order: 0;
    order: 0;
}

.table-filter-container {
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 10px;
}

.table-filter-container-search {
    height: 0;
    padding: 0;
    height: 40px;
    margin-top: 4px;
}

.gestione-utenti .table-filter-container-search{
    padding: 23px 0;
}

@media  (max-width: 768px) {
    .gestione-utenti .table-filter-container-search{
        margin-bottom: 12px;
        margin-left: 15px;
    }
}

@media  (max-width: 472px) {
    .gestione-utenti .table-filter-container-search{
        margin-bottom: 36px;
    }
    .gestione-utenti .table-filter-container-search #searchBtn1{
        margin-top: 4px;
    }
}

.fa-check-square-o, .fa-square-o {
    cursor:pointer;
}

fieldset.koala{
    border: 1px solid #027AB5;
    margin: 30px 0 30px !important;
    padding: 10px !important;
    clear: both;
}

fieldset.koala legend{
    color: #000;
    font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 1px 3px;
}

table#rife{
    font-size: 11px;
}

table#rife tr.aox td{
    border-bottom: 1px solid #FFFFFF;
    background: #DEEAF4;
}
table#rife tr.aow td{
    border-bottom: 1px solid #FFFFFF;
    background: #F0F0F0;
}
table#rife td.up{
    color: #f00;
    font-weight: bold;
}
table#rife td.down{
    color: #00f;
    font-weight: bold;
}
table#rife td.sx{
    text-align: left;
    padding: 0 4px;
}
table#rife td.dx{
    text-align: right;
    padding: 0 4px;
}


#statsImg{
    transform: rotate(90deg);
    background-repeat: no-repeat;
    background-size: 350px;
    height: 350px;
    min-width: 60px;
    transform-origin: 30% 12% 0px;
    display: block;
}

#etichettaStats{
    display: block;
    width: 350px;
    margin-top: 66px;
    float: right;
    position: relative;
    height: 18px;
    text-transform: uppercase;
    text-align: right;
}

.sliderLettureMarine .sliderItem .sliderLettureMarine-img img{
    width: 600px;
}

.maps.miei-porti{

}
.step-button-container button {
    width: 150px;
    display: table-cell;
    margin: 10px!important;
}

.date-time-nav{
    background: white;
    border-radius: 14px;
    width: 58px;
    text-align: center;
    font-weight: bold;
    color: #003f70;
    font-size: 14px;
}

.date-time-nav span:nth-child(1){
    position: relative;
    top: 3px;
}
.date-time-nav span:nth-child(2){
}
.date-time-nav span:nth-child(3){
    position: relative;
    top: -3px;
}

#previsioni-table-popup{
    position: relative;
    height: 0;
    z-index: 9999;
    text-align: center;
    display:none;

    position: absolute;
    top:0;
    width:100%;
}
#previsioni-table-popup.opened{
    display: block;
}

#previsioni-table-popup #previsioni-table{
    background-color: #deeaf4;
    width: 100%;
    max-width: 600px;
    margin: auto;
    position: relative;
    top: 110px;
}


#previsioni-table-popup #previsioni-table .tableRespCont {
    padding-top: 0px;
}

#previsioni-table-popup #previsioni-table .popup-close{
    content: "\f057";
    float: right;
    font: normal normal normal 30px/1 FontAwesome;
    color: red;
    position: absolute;
    height: 26px;
    top: 4px;
    width: 26px;
    right: 4px;
    cursor: pointer;
}
#previsioni-table-popup #previsioni-table .popup-close:before {
    content: "\f057";
    position: relative;
    top: -2px;
    color: white;
    z-index: 10;
}

#previsioni-table-popup #previsioni-table table#koala > thead {
    display: none;
}

div.miei-porti .open-box{
    display: none;
}


.h3.row-title{
    z-index: 1;
    margin: 5px 0;
}
.h4.row-buttons{
    z-index: 1;
}



/*@media (min-width: 481px) {*/

#previsioni-table-popup #previsioni-table{
    background-color: rgba(0, 0, 0, 0.8);
}
#previsioni-table-popup #previsioni-table table#koala{
    color: white;
    background-color: rgba(0, 0, 0, 0);
    height: 260px;
}

#previsioni-table-popup #previsioni-table table#koala > tbody > tr:first-child{
    opacity: 0;
}
#previsioni-table-popup #previsioni-table table#koala > tbody table.inner_table td{
    background-color: white!important;
    font-size: unset;
}

#previsioni-table-popup #previsioni-table table#koala tr:hover{
    background-color: unset;

}

#previsioni-table-popup #previsioni-table table#koala th.data.tempo.odd{
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    background-color: rgba(8, 103, 158, 0.8);
    height: 65px;
    z-index: 0;
    font-size: 20px;
    padding-top: 4px;
}
#previsioni-table-popup #previsioni-table .tableRespCont {
    margin-left: 0%;
    width: 100%;
}

#previsioni-table-popup #previsioni-table table#koala .data.me.newriga{
    width: 0px;
}
#previsioni-table-popup #previsioni-table table#koala .data.me.newriga img{
    position: absolute;
    left: 10px;
    top: 68px;
}

#previsioni-table-popup #previsioni-table table#koala .data.distanza.posizione{
    width: 0%;
}
#previsioni-table-popup #previsioni-table table#koala .data.distanza.posizione div{
    position: absolute;
    top: 64px;
    text-align: center;
    width: 100%;
}
#previsioni-table-popup #previsioni-table table#koala td.data.ws{
    width: 25%;
}
#previsioni-table-popup #previsioni-table table#koala td.data.ws .incidenza{
    transform: scale(2);
    position: absolute;
    left: 50%;
    top: 120px;
    margin-left: 32%;
}

#previsioni-table-popup #previsioni-table table#koala td.data.ws .incidenza_values_wind{
    padding-top: 20px!important;
    padding-left: 10px;
}

#previsioni-table-popup #previsioni-table table#koala td.data.ws .incidenza_values_wind table{
    width: 220px;
    background: #cfcfcf;
    height: 56px;
    color: black;
    margin-top: 14px;
}

#previsioni-table-popup #previsioni-table table#koala td.data.ws .incidenza_values_wind table thead tr:first-child{
    height: 30px;
}

#previsioni-table-popup #previsioni-table table#koala td.data.me .incidenza_values_sea{
    padding-top: 20px!important;
    margin-left: -1px;
}

#previsioni-table-popup #previsioni-table table#koala td.data.me .incidenza_values_sea table{
    width: 225px;
    background-color: #cfcfcf;
    height: 50px;
    color: black;
    margin-top: 14px;
}

#previsioni-table-popup #previsioni-table table#koala td.data.me:not(.newriga){
    width: 25%;
}

#previsioni-table-popup #previsioni-table table#koala td.data.me:not(.newriga) .incidenza{
    transform: scale(2);
    position: absolute;
    left: 50%;
    top: 120px;
    margin-left: 32%;
    background: unset;
}

#previsioni-table-popup #previsioni-table table#koala td.data.pr{
    vertical-align: top;
    text-align: right;
    padding-right: 10px;
}

#previsioni-table-popup #previsioni-table table#koala td.data.pr .label{
    color: white;
    text-shadow: 0 0 black;
    top: -30px;
    position: relative;
}
#previsioni-table-popup #previsioni-table table#koala td.data.pr .label:before{
    content:"Press. atm.: ";
    color: white;
    text-shadow: 0 0 black;
}

/*}*/



@media (max-width: 1139px) {
    #previsioni-table-popup #previsioni-table table#koala td.data.tempo.odd{
        font-size: 10px;
    }
}

@media (min-width: 750px) and (max-width: 899px) {
    #previsioni-table-popup #previsioni-table {
        transform: scale(1.2);
    }
}

@media (min-width: 900px) and (min-width: 1px) {
    #previsioni-table-popup #previsioni-table {
        transform: scale(1.2);
    }
}

@media (min-width: 1200px){
    #previsioni-table-popup #previsioni-table {
        transform: scale(1.2);
        top: 146px;
    }

    #statsImg{
        transform-origin: 50% 8% 0px;
    }
}

@media only screen and (max-width: 768px) {
    #map-container.maps.miei-porti {
        position: fixed !important;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background: white;
    }
    #scrollDown, #scrollUp{
        display: none;
    }

    .maps.miei-porti .mapscontrols-right {
        position: absolute;
        bottom: 0px!important;
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        right: 40px !important;
        top: unset !important;
    }

    .prova-gratis{
        padding: 10px 4px;
        font-size: 16px;
    }


    #toggleIcons{
        display: none;
    }
}

#mypage[class^='gestione-'] table > tbody > th, #mypage[class*='gestione-'] .tableRespCont > table > tbody > tr > th{
    overflow: auto;
}

.table-filter-container-search input#search{
    min-width: 120px;
    max-width: 200px;
}

.gestione-bollettino .overlay-email{
    overflow: auto;
    height: 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}
.gestione-bollettino .overlay-email-bg{
    background-color: rgba(134, 134, 134, 0.56);
    position: fixed;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    z-index: 9999998;
}

.rcv:after{
    content: '/A';
    position:absolute;
    top:8px;
    right:-5px;
}

#statsImg{
    display: none!important;
}
#etichettaStats{
    margin-top: 0px!important;
}



#legenda{
    z-index: 9998;
    top: 20px;
    left: 144px;
    position: absolute;
    width:60px;
    border:solid 1px;
    border: none!important;
}
.premium-meteorotte-cartografiche #legenda{
    top: 62px;
    left: 10px;
}

#legenda #title_bar{
    background: #FEFEFE;
    height: 20px;
    width: 100%;
}
#legenda #button{
    border:solid 1px;
    width: 60px;
    height: 20px;
    float:right;
    cursor:pointer;
    text-align:center;
}
#legenda #box{
    height: 350px;
    background: #DFDFDF;
}

#scrollDown, #scrollUp{
    display: none!important;
}


#headerAdminInner .btn-premium{
    position:relative;
}
#headerAdminInner .btn-premium:before{
    content: "PREMIUM";
    border-radius: 4px;
    font-size: 10px;
    right: -24px;
    top: -16px;
    background-color: #f00;
    color: white;
    height: 16px;
    padding: 2px 3px;
    width: 53px;
    position: absolute;
    line-height: 13px;
    margin-left: -12px;
}


.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #F4F4F4;
}


#previsioni-table-popup #previsioni-table .incidenza-color{
    margin-left: 20px;
}
#previsioni-table-popup #previsioni-table .incidenza-color:before{
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    margin-left: -20px;
}
#previsioni-table-popup #previsioni-table .incidenza-vento:before{
    background-color: #ff9600;
}
#previsioni-table-popup #previsioni-table .incidenza-onda:before {
    background-color: #da3437;
}


#mypage.admin-using-user.miei-dati .password-corrente-no-admin, #mypage.gestione-utenti .password-corrente-no-admin,  #mypage.role-is-admin .password-corrente-no-admin{
    display: none;
}
#mypage.gestione-utenti .button-only-admin{
    display: block!important;
}

.codice-fiscale{
    text-transform: uppercase;
}

.gestione-utenti td:last-child {
    width: 420px;
}


.gestione-statistiche table{
    width: 100%;
}

.gestione-statistiche table{
    width: 100%;
}
.gestione-statistiche table tr:first-child, .gestione-statistiche table td.highligth {
    color: white;
    background-color: #ffa700;
}
.gestione-statistiche table td.not-highligth {
    color: black;
    background-color: #fff;
}
.gestione-statistiche table th, .gestione-statistiche table td{
    padding: 4px;
}
.gestione-statistiche table .width-static{
    width: 184px;
}

.leaflet-fullscreen-on{
    z-index: 2147483647;
}

leaflet-container:-webkit-full-screen {
    width: 100%!important;
    height: 100%!important;
}


.fullscreen-map #map-container{
    z-index: auto;
    position: static;
    opacity: 1;
    transform: none;
    filter: none;
    perspective: none;
    transform-style: flat;
    will-change: auto;
    -webkit-mask: none !important;
    transition: none !important;
}
.fullscreen-map #map, .fullscreen-map #legenda, .fullscreen-map #previsioni-table-popup {
    z-index: 2147483647!important;
}

li.strong *{
    font-weight: bold;
}

@media (min-width: 481px){
    .test-navigazione-cartografica .mapscontrols-left, .premium-navigazione-cartografica .mapscontrols-left{
        width: 122px;
    }
    .test-navigazione-cartografica .mapscontrols-left .button-l-icon0, .premium-navigazione-cartografica .mapscontrols-left .button-l-icon0{
        float: left;
    }
    .test-navigazione-cartografica .mapscontrols-left .button-l-icon1, .premium-navigazione-cartografica .mapscontrols-left .button-l-icon1{
        float: right;
    }
    .test-navigazione-cartografica .mapscontrols-left .button-l-icon2, .premium-navigazione-cartografica .mapscontrols-left .button-l-icon2{
        float: left;
    }
    .test-navigazione-cartografica .mapscontrols-left .button-l-icon3, .premium-navigazione-cartografica .mapscontrols-left .button-l-icon3{
        float: right;
    }
}

#map-container .crosshair{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-70%,-56%);
    z-index: 9999999;
}

@media (min-width: 992px) {
    #map-container .crosshair{
        display: none;
    }
}
@media (max-width: 467px) {
    #map-container .crosshair{
        transform: translate(-50%,-56%);
    }
}

#mypage.nowcast .tile {
    position: relative;
    float: left;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

#mypage.nowcast .photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: transform .5s ease-out;
}

#download-previsioni{
    float: right;
    margin-top: 22px;
}

table.headerFixed thead tr{
    position: relative;
    width: 100%;
    background: white;
    z-index: 9;
}

#table-clone{
    position: relative;
    width: 100%;
    background: white;
    z-index: 9;
}

#table-clone thead tr th{
    background-color: white;
}

@media (max-width: 1139px) {
    #table-clone thead tr th:first-child{
        position: fixed;
        background-color: white;
    }
}


.articles-container .article{
    margin-bottom:40px;
}
.articles-container .article .preview{
    padding-bottom:15px;
}
.articles-container .article .preview{
    position: relative;
}
.articles-container .article .preview img:not(.vertical){
    width: 100%;
    top: 50%;
    position: relative;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.articles-container .article .preview img.vertical{
    width: unset;
    height:100%;
}
.articles-container .article .text-container{
    position: relative;
    top:50%;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.articles-container *{
    text-decoration: none!important;
}
.articles-container .article .date{
    border-radius: 4px;
    font-size: 10px;
    background-color: #f00;
    color: white;
    padding: 2px 4px;
    margin-bottom:10px;
}
.articles-container .article .title{
    font-size: 20px;
    font-family: "Karla";
    color: rgb( 8, 103, 158 );
    font-weight: bold;
    text-align: left;
}
.articles-container .article .subtitle{
    font-size: 14px;
    color: rgb( 0, 0, 0 );
    text-align: justify;

}

 span.value.red{
     color:red;
 }
span.value.green{
    color:green;
}