*{position:relative;}

/*
Tablets 768x1024 (80% tablets)
Asus 14-inch Celeron $3890 : 1366 x 768 (6% users have smaller)
ASUS ZenBook UX430UN : 1920 x 1080 Full HD << sales people ??
*/


body {
    margin:0;
    padding:0;
    background-color: #eeeeee;
}

div#container {
    margin: 0px auto;
    width: 1274px;
    padding:0px;
    /*background-image: url(DesignGrid.gif);*/
    /*overflow-y: scroll !important;*/
}

.faded { opacity: 0.3; }

nav#breadcrum {
    color: silver;
}
nav#breadcrum ul {
    margin:0;
    padding: 0;
}
nav#breadcrum li {
    display: inline-block;
    margin:0 0 0 5px;
}

div.popover-body{}
div.popover-body a {
    border:1px solid #000;
    border-radius:5px;
    padding:4px 8px;
    color:White;
    background-color:#000;
    text-decoration:none;
}
div.popover-body a:hover {
    color:Gold;
    background-color:#000;
}




select#pickmap {
    width: 600px;
}

section#blueprint {
    z-index:1000;
    width: 835px;
    height: 590px;
    border: 1px solid #002349;
    background-color: #002349;
    position: relative;
    margin-left: 10px;
    float: left;
    border-radius: 4px;
    overflow:hidden;
    clear:none;
}

section#blueprint img.back {
    height: 100%;
    /*max-height: 100%;*/
    /*border-radius: 3px;*/
}





div.sensor_point{
    position: absolute;
    /* border:1px solid fuchsia; */
}
div.child_link{
    position: absolute;
}

div.child_link img{
    width:80px;
    float: left;
    border:2px solid #002349;
    border:3px dotted Gold;
    cursor: pointer;
}
img#sensorIcon{
    display:none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
div.sensor_point img {
    width: 40px;
    height: 40px;
    float: left;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border: 4px solid rgba(0,59,111,0.3);
    cursor: pointer;

    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    /*background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/jonathanlarradet_copy.png);*/
    /*background-size:cover;*/
    /*background-repeat: no-repeat;*/

    -webkit-animation: pulse 3300ms infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 3300ms infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 3300ms infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 4300ms infinite cubic-bezier(0.66, 0, 0, 1);

}

div.sensor_point:hover img {
    border: 4px solid #0056A1;
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
}

@-webkit-keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@-ms-keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}


div.sensor_point.red img {
    border-color: rgba(240, 0, 0, 0.6);
    box-shadow: 0 0 0 0 rgba(240, 0, 0, 1);
    -webkit-animation: pulse 0.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 0.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 0.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 0.5s infinite cubic-bezier(0.66, 0, 0, 1);
}



div.sensor_point.red:hover img {
    border-color: rgba(240, 0, 0, 1);
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
}


div.sensor_point.amber img {
    border-color: rgba(240, 200, 0, 0.7);
    box-shadow: 0 0 0 0 rgba(240, 200, 0, 0.8);

    -webkit-animation: pulse 2200ms infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 2200ms infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 2200ms infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 2200ms infinite cubic-bezier(0.66, 0, 0, 1);
}

div.sensor_point.amber:hover img {
    border-color: rgba(240, 200, 0, 1);
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
}

div.sensor_point.green img {
    border-color: rgba(0, 240, 0, 0.6);
    box-shadow: 0 0 0 0 rgba(0, 240, 0, 0.8);
}

div.sensor_point.green:hover img {
    border-color: rgba(0, 240, 0, 1);
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
}

div.sensor_point div, div.child_link div  {
    display: inline-block;
    position: relative;
    top: 0;
    margin: 0;
    padding: 10px;
    width: 160px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
}



div.sensor_point div span, div.child_link div span {
    margin: 10px;
    color: #222;
}

div#sidebarIcon{color:White;background-color:rgba(0, 59, 111, 0.7);
border-radius:16px;height:32px;padding-left:1px;z-index:1047;}

div#sidebarIcon.red{
    background-color: rgb(214, 0, 0);
}
div#sidebarIcon.amber{
    background-color: rgb(233, 193, 0);
}
div#sidebarIcon.green{
    background-color: rgb(0, 186, 0);
}

div#sidebarIcon{cursor:pointer;}

div#sensorEdit{
    display:inline;
    width:30px;height:30px;
    position:absolute;right:1px;top:1px;
    border:1px solid rgba(0, 59, 111, 0.1);border-radius:50%;
}

section#sidebar {
    z-index:500;
    margin: 0 0 0 910px;
    padding: 10px;
    border: 1px solid #CCC;
    background-color: #E6E6E6;
    width: 340px;
    /* float:left; */
    min-height: 700px;
}









div#blueprint_controls {
    width: 45px;
    height: 590px;
    border:1px solid #002349;
    border-radius: 4px;
    float:left;
    background-color: rgba(230, 230, 230, 1.0);
}

#blueprint span.fa-stack {
    cursor: pointer;
    font-size: 1.2em;
}
#blueprint_controls .fa-stack {
    cursor: pointer;
    font-size: 1.2em;
    margin:6px 0;
}

#blueprint i.fa-circle,
#blueprint_controls i.fa-circle {
    color: rgba(0, 59, 111, 0.7);
}
#blueprint .golden i.fa-circle,
#blueprint_controls .golden i.fa-circle {
    color: #dcb400;
}

i.golden{ color: #dcb400; }

/*
span#blueprint_info {
    left: 5px;
}

span#blueprint_editmap {
    left: 50px;
}

span#blueprint_newsensor {
    left: 95px;
}

span#blueprint_linkmap {
    left: 140px;
}

span#blueprint_rebuild {
    left: 185px;
}

span#blueprint_refresh {
    left: 230px;
}
span#blueprint_refresh  i.fa-circle{
    color: rgba(0, 59, 111, 0.3);
}
*/




span#showicon img,
span#new_showicon img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 6px solid #888;
}

span#blueprint_help {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    font-size: 0.8em;
    position: absolute;
    top: -10px;
    right:0px;
    display: none;
}

.help{color:fuchsia}







/* SIDEBAR device */
section#device {
    width: 350px;
    height: 900px;
    background-color: White;
    border-radius: 4px;
    border: 1px solid #002349;
    margin-left: 900px;
    clear: none;
    position: relative;
}

/* Device CURRENT information */
div#device_meta {
    height: 170px;
    border: 1px solid White;
    margin: 6px;
}

div#device_meta img#taggledevice {
    max-height: 30px;
    max-width: 90px;
    display:none;
}

.deviced{display:none;}
div#gauges-box{border:1px solid White; border-radius:5px;
    margin:10px 0 ;padding-top:4px;height:85px;}
div#gauges-box.alive{
    border-color: Silver;
}
span.gauges{position:relative;opacity:0;}
span.gauges small{position:absolute;top:-20px;left:0;width:100%;font-size:10px;line-height:11px}

/* Device RECENT information (data and alerts) */
div#alert_messages {
    height: 250px;
    border-top: 1px solid #CCC;
    margin: 2px 2px 0 5px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size:12px;
}



/* TIMELINES */
section#graphs {
    /*width: 1250px;height: 280px;*/
    float: left;
    width: 890px;
    height: 302px;
    background-color: White;
    border-radius: 4px;
    border: 1px solid #002349;
    margin-top: 8px;
}

.show_alert_level{padding:4px;}
.alert_{border:1px dotted red;;}
.alert_green{background-color:LightGreen;}
.alert_amber{background-color:Gold;}
.alert_red{background-color:#FF8888;}
table.edit_alerts{background-color:White;font-size:13px;}
table.edit_alerts td{text-align:center;}
tr.alerts-header{background-color:#EEE;text-align:center;}
td.endwords{padding-left:6px;padding-right:26px;}

tr.edit_existing_alert{cursor:pointer;}

i.alert_description{display:block;}

div#active_rules{}

div.dash_ack_notifications
{cursor:default;border-bottom:2px dotted silver; padding:4px;margin:5px 0;}

div#active_rules div.green,
div#active_rules div.amber,
div#active_rules div.red{
    border-radius:5px;
    padding:0 4px 4px 6px;
    margin:3px 0;
}

div#active_rules div.green{cursor:default;opacity:0.4;background-color:LightGreen;}
div#active_rules div.amber{cursor:pointer;background-color:Gold;}
div#active_rules div.red{cursor:pointer;background-color:#FF8888;}

div.mqtt_redalert{
    background-color:Red;

    width:30px !important;
    height:30px !important;
    border:1px solid White;
    position:relative;
    top:8px;
    background-size:16px;
    border-radius:50%;
    display:inline-block;
    border-color:White;
    background-image:url(/white.png);
    background-repeat: no-repeat;
    background-position: center;
}

div.mqtt_acked{
    background-color:#ebb000;

    width:30px !important;
    height:30px !important;
    border:1px solid White;
    position:relative;
    top:8px;
    background-size:16px;
    border-radius:50%;
    display:inline-block;
    border-color:White;
    background-image:url(/white.png);
    background-repeat: no-repeat;
    background-position: center;
}









@media (min-width: 1270px) {
    .modal-wide {
        max-width: 1100px;
    }
}


div#lineline{border-top:4px dotted Gold;position:absolute;height:2px;z-index:1047;}

span.red_alert_ack{position:absolute;right:3px;
    padding:0 6px;border-radius:3px;background-color:Gold;
}




a.map_tree{
    cursor:pointer;
    position:relative;
    display:block;
    width:300px;
    height:60px;
    line-height:1.6em;
    margin:0 0 2px 0;
    border:1px solid DarkBlue;
    text-decoration: none;
    background-color: #F8F8F8;
    border-radius:3px;
    padding:7px;
    color: black;
    clear:both;
    overflow:hidden;
}
a.map_tree.thismap {
    background-color: #fff2c3;
}
a.map_tree b{display:block;font-size:1.2em;}

a.map_tree:hover
{
    background-color: #EEEEEE;
}
a.map_tree div.imgwrap
{
    position:relative;
    background-size: cover;
    width:75px;
    height:45px;
    float:left;
    margin-right:20px;
    border-radius:2px;
}
a.map_tree div.imgwrap img
{
    position:relative;
    max-width:100%;
}

footer#main-footer{
    background-color: #002349;
    font-size: 14px;
    padding-top:30px;
    margin-top:20px;
}
#footer-bottom {
    background-color: rgba(0,0,0,0.2);
    padding: 15px 0 5px;
    color: #666;
}

div#logoband{
    background-color: White;
    padding:8px;
    color: #3869A5;
    font-size: 24px;
}
div#wordsband {
    background-color: #002349;
    font-size: 13px;
    padding:2px;
    margin:0px 0px 10px 0px;
    color:white;
}








/* Square corners on everything */
body {
    background-color: #dddddd;
}
span#blueprint_help,
section#blueprint {
    border-radius: 2px;
}
section#blueprint,
div#blueprint_controls,
section#device,
section#graphs {
    background-color: White;
    border:1px solid White;
    border-radius: 2px;
}
a.map_tree,
a.map_tree div.imgwrap{
    border:1px solid DodgerBlue;
    background-color: #DDDDDD;
    border-radius:2px;
    color: #002349;
}
a.map_tree.thismap {
    background-color: rgba(153, 200, 255, 0.66);
}
a.map_tree:hover {
    background-color: #EEEEEE;
}

div#modal_help h4{margin-top:20px;}
div#modal_help p span{color: #bf0000;font-weight:bold;}







body.dashboard a.map_tree {
    display: block;
    width: 460px;
    height: 85px;
}
a.map_tree div.alerts {margin:0;padding:0;}
a.map_tree div.alerts img.alerticon
{
    margin:2px 2px;
    width: 25px;
    height: 25px;
    float: left;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .1);
}
a.map_tree div.alerts img.red {border-color: rgba(240, 0, 0, 1);}
a.map_tree div.alerts img.amber {border-color: rgba(240, 200, 0, 1);}
a.map_tree div.alerts img.green {border-color: rgba(0, 240, 0, 1);}
a.map_tree div.alerts img.swipe {border-color: #a6f5f2;}


div.map_tree{
    position:relative;
    display:block;
    width:660px;
    height:65px;
    line-height:1.6em;
    margin:0 0 12px 0;
    border:1px solid DarkOrange;
    text-decoration: none;
    background-color: #F8F8F8;
    border-radius:3px;
    padding:7px;
    color: black;
    clear:both;
    overflow:hidden;
}
div.map_tree b{
    display:block;
    font-size:1.2em;
}
div.map_tree:hover
{
    background-color: #EEEEEE;
}
div.map_tree div.imgwrap
{
    border:1px solid DarkBlue;
    position:relative;
    background-size: cover;
    width:75px;
    height:45px;
    float:left;
    margin-right:20px;
    border-radius:2px;
}


/*

body {
    background-image: url(wallpapers/cTNMyl.jpg);
    background-image: url(wallpapers/gNlPJ2.jpg);
}
div#blueprint_controls {
    background-color: rgba(230, 230, 230, 0.6);
}
section#blueprint {
    background-color: rgba(0, 59, 111, 0.7);
}
section#device {
    background-color: rgba(255, 255, 255, 0.9);
}
div#device_meta {
    border: none;
}
div#gauges-box{
    border-color: rgba(255, 255, 255, 0.1);
}
*/

.silver i.fa-circle {
    color: #999999 !important;
}
div#newsensor_help{display:none;}

span.recipients{ white-space: nowrap;border:1px solid White;background-color:#DDD;
padding:2px 5px 1px 5px;border-radius:5px;margin:0 3px; font-size:13px;}
span.recipients input{position:relative;top:1px;}
span.recipients.selected{background-color:#b8daff;}


/*

todo - make responsive layout work

@media (max-width: 1274px) {
    body {
        max-width: 950px;
    }

    select#pickmap {
        width: 890px;
        display: block !important;
    }

    div#blueprint_controls {
        display: block !important;
    }

    section#device {
        height: 200px;
        margin: 9px 0px;
        float: left;
        width: 890px;
    }

    div#device_meta {
        height: 190px;
        width: 340px;
    }

    div#alert_messages {
        height: 190px;
        width: 280px;
        border-left: 1px solid #CCC;
        border-top: none;
        padding-left: 5px;
        margin: 0;
        position: absolute;
        top: 5px;
        right: 2px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    section#graphs {
        width: 890px;
    }
}
*/