ul.side-widgets {
    position: fixed;
    z-index: 1001;
    right: 0;
    top: 25%;
    list-style: none;
    padding: 0;
    margin: 0
}

    ul.side-widgets > li {
        position: relative;
        width: 50px;
        height: 50px;
        cursor: pointer
    }

        ul.side-widgets > li:hover > div.sw-widget {
            right: 0;
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }

        ul.side-widgets > li > div.sw-widget {
            position: absolute;
            right: 50px;
            display: -webkit-box;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-flow: column nowrap;
            text-decoration: none;
            outline: none;
            -webkit-transition: -webkit-transform 50ms linear;
            transition: -webkit-transform 50ms linear;
            transition: transform 50ms linear;
            transition: transform 50ms linear,-webkit-transform 50ms linear;
            will-change: transform;
            -webkit-transform: translateX(100%);
            transform: translateX(100%)
        }

            ul.side-widgets > li > div.sw-widget.is-open, ul.side-widgets > li > div.sw-widget:active, ul.side-widgets > li > div.sw-widget:focus, ul.side-widgets > li > div.sw-widget:hover {
                right: 0;
                -webkit-transform: translateX(0);
                transform: translateX(0)
            }

                ul.side-widgets > li > div.sw-widget.is-open .sw--content {
                    display: block
                }

            ul.side-widgets > li > div.sw-widget.sw-contactos div.sw--title {
                background-color: #002855;
                background-image: url(../img/icon_widget_phone.svg);
                border-color: #002855
            }

            ul.side-widgets > li > div.sw-widget.sw-fatura div.sw--title {
                background-color: #004891;
                background-image: url(../img/icon_widget_faturas.svg);
                background-position: 18px;
                border-color: #004891
            }

                ul.side-widgets > li > div.sw-widget.sw-fatura div.sw--title > span {
                    width: 140px
                }

            ul.side-widgets > li > div.sw-widget.sw-fatura button[type=submit], ul.side-widgets > li > div.sw-widget.sw-fatura input {
                width: 350px
            }

            ul.side-widgets > li > div.sw-widget.sw-fatura p {
                font-size: 1.125rem;
                font-weight: 700;
                line-height: 1.75rem
            }

            ul.side-widgets > li > div.sw-widget.sw-piquete div.sw--title {
                background-color: #0075c9;
                background-image: url(../img/icon_widget_wrench.svg);
                background-position: 16px;
                border-color: #0075c9
            }

            ul.side-widgets > li > div.sw-widget.sw-leituras div.sw--title {
                background-color: #1595e9;
                background-image: url(../img/icon_widget_chart.svg);
                background-position: 16px;
                border-color: #1595e9
            }

            ul.side-widgets > li > div.sw-widget.sw-leituras button[type=submit], ul.side-widgets > li > div.sw-widget.sw-leituras input {
                width: 350px
            }

            ul.side-widgets > li > div.sw-widget div.sw--title {
                display: -webkit-box;
                display: flex;
                height: 50px;
                -webkit-box-align: center;
                align-items: center;
                -webkit-box-pack: justify;
                justify-content: space-between;
                color: #fff;
                font-weight: 700;
                font-size: 1.125rem;
                line-height: 1.75rem;
                border-top-left-radius: 25px;
                border-bottom-left-radius: 25px;
                padding: 0 16px 0 50px;
                background-repeat: no-repeat;
                background-position: 10px;
                border: 2px solid #002855
            }

            ul.side-widgets > li > div.sw-widget .sw--content {
                position: absolute;
                display: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                box-shadow: 0 0 16px -8px rgba(0,0,0,.72),0 4px 16px -8px rgba(0,0,0,.32);
                top: 0;
                right: 0;
                background-color: #fff;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px
            }

                ul.side-widgets > li > div.sw-widget .sw--content .sw--title {
                    border-top-left-radius: 10px;
                    border-bottom-left-radius: 0
                }

                ul.side-widgets > li > div.sw-widget .sw--content .sw-close {
                    width: 32px;
                    height: 32px;
                    display: inline-block;
                    background-image: url(../img/icon_widget_close.svg);
                    background-position: 50%;
                    border: 2px solid #fff;
                    border-radius: 50%
                }

                ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body {
                    width: 400px;
                    padding: 1.875rem
                }

                    ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .contactos-header, ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .piquete-header, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body .contactos-header, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body .piquete-header {
                        display: -webkit-box;
                        display: flex;
                        -webkit-box-orient: horizontal;
                        -webkit-box-direction: normal;
                        flex-flow: row nowrap;
                        -webkit-box-align: start;
                        align-items: flex-start
                    }

                        ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .contactos-header span.icon, ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .piquete-header span.icon, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body .contactos-header span.icon, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body .piquete-header span.icon {
                            display: inline-block;
                            width: 50px;
                            height: 50px;
                            min-width: 50px;
                            min-height: 50px;
                            max-width: 50px;
                            max-height: 50px;
                            margin-right: 1rem;
                            background-image: url(../img/icon_wrench.svg);
                            background-size: contain
                        }

                        ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .contactos-header span.text, ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .piquete-header span.text, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body .contactos-header span.text, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body .piquete-header span.text {
                            font-size: 1.2rem;
                            font-weight: 700
                        }
                            ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .contactos-header span.text .contact-number {
                                font-size: 1.375rem;
                            }

                            ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .contactos-header span.text .contact-working-days {
                                font-size: 1.125rem;
                                font-weight: 400;
                            }

                            ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .contactos-header > span.icon, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body .contactos-header > span.icon {
                                background-image: url(../img/icon_phone.svg)
                            }

                    ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .contactos-text, ul.side-widgets > li > div.sw-widget .sw--content .sw-contactos-body .piquete-text, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body .contactos-text, ul.side-widgets > li > div.sw-widget .sw--content .sw-piquete-body .piquete-text {
                        font-size: 1.2rem;
                        font-weight: 700;
                        text-align: center
                    }

                ul.side-widgets > li > div.sw-widget .sw--content .sw-fatura-body, ul.side-widgets > li > div.sw-widget .sw--content .sw-leituras-body {
                    padding: 1.875rem
                }

@media (max-height:800px) {
    ul.side-widgets {
        top: 20%;
    }
    .contactos-header, .send-mail {
        margin-bottom: 1.5rem !important;
    }
}

@media (max-height:750px) {
    ul.side-widgets {
        top: 15%;
    }
}

@media (max-width:425px) {
    ul.side-widgets > li div.sw-widget > div.sw--content .sw--content-body {
        height: calc(100% - 50px)
    }
}

@media (max-width:768px) and (min-width:426px) {
    ul.side-widgets > li div.sw-widget > div.sw--content .sw--content-body {
        height: calc(100% - 80px)
    }
}

@media (max-width:768px) {
    ul.side-widgets {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: space-evenly;
        justify-content: space-evenly;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        z-index: 1031;
        height: 84px;
        background-color: #faa70b
    }

        ul.side-widgets > li {
            margin-top: 1rem;
            width: 2.2rem;
            height: 2.2rem;
            overflow: hidden
        }

            ul.side-widgets > li div.sw-widget {
                position: inherit;
                -webkit-transform: none !important;
                transform: none !important;
                will-change: unset;
                right: 0
            }

                ul.side-widgets > li div.sw-widget > div.sw--title {
                    border: none;
                    width: 2.2rem;
                    height: 2.2rem;
                    border-radius: 0;
                    padding: 0;
                    background-color: initial !important;
                    background-position: 50% !important;
                    background-size: initial !important
                }

                    ul.side-widgets > li div.sw-widget > div.sw--title > span {
                        display: none
                    }

                ul.side-widgets > li div.sw-widget > div.sw--content {
                    position: fixed;
                    top: 0;
                    left: 0;
                    bottom: 84px;
                    z-index: 1031;
                    width: 100%;
                    border-radius: 0;
                    box-shadow: none
                }

                    ul.side-widgets > li div.sw-widget > div.sw--content > div.sw--title {
                        border-radius: 0;
                        background: #faa70b;
                        color: #0075c9;
                        border: none;
                        padding-left: 1rem
                    }

                    ul.side-widgets > li div.sw-widget > div.sw--content .sw--content-body {
                        display: -webkit-box;
                        display: flex;
                        -webkit-box-align: center;
                        align-items: center;
                        -webkit-box-pack: center;
                        justify-content: center
                    }

                        ul.side-widgets > li div.sw-widget > div.sw--content .sw--content-body .sw-contactos-body, ul.side-widgets > li div.sw-widget > div.sw--content .sw--content-body .sw-leituras-body, ul.side-widgets > li div.sw-widget > div.sw--content .sw--content-body .sw-piquete-body {
                            margin: auto
                        }
}