body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
html { height: 100%; width: 100%; margin: 0; padding: 0; }
body { height: 100%; width: 100%; margin: 0; padding-bottom: 50px;}
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; right: -55px; top: 10px; width: 116px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
.footer {
    position: absolute;
    color: #ffffff;
    font-size: 15px;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 40px;
    background-color: #3399cc;
}

#MainWidget {
    height: 100%;
    width: 100%;
    left: 0;
    position: relative;
    top: 0;
}

#googleMap {
    height: 100%;
    width: 100%;
    left: 0;
    position: relative;
    top: 0;
}
#openBtn {
    display:none;
}
#openBtnGraph {
    display:none;
}
#openBtnParams {
    display: none;
}
#ParamsList {
    margin-top: 5px
}
.modal-backdrop {
    background-color: #DDDDDD;
    opacity: .95 !important;
}
.list-group-item {
    color: #444444;
    background-color:#DDDDDD;
    border: 0 solid #DDDDDD;
    border-radius: 0;
    padding: 5px 5px;
}

{% if user_device_type == "mobile" %}

{% elif user_device_type == "desktop" %}
    .dygraph-label.dygraph-ylabel {
        margin:  0 0 0 0;
    }
    .dygraph-legend {
        background-color: rgba(200, 200, 255, 0.75) !important;
        padding: 4px;
        border: 1px solid #000;
        border-radius: 10px;
        box-shadow: 4px 4px 4px #888;
        pointer-events: none;
    }
    .gm-style-iw {
        width: 650px !important;
        top: 0 !important;
        left: 0 !important;
        background-color: #fff;
        box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
        border: 1px solid rgba(72, 181, 233, 0.6);
        border-radius: 2px 2px 0 0;
        line-height:1.35;
        overflow:hidden !important;
        white-space:nowrap;
        max-width: 100%;
    }

    .gm-style-iw div
    {
        overflow:hidden !important;
    }

    #graph {
        position: relative;
        left: 10px;
        right: 10px;
        top: 0;
        bottom: 60px;
    }
    .panel > .panel-heading {
        background-image: none;
        background-color: #3399cc;
        color: white;

    }
{% endif %}


#myModalGraph { overflow-y:scroll }