/* 
 * Landing Page
 */
.landing
{background-color:#3397da; background:url('../img/landing-bg.jpg') center top no-repeat; background-size:cover; width:100%; min-height:100%; position:relative;}
.welcome
{text-align:center; color:white; font-size:32px; background:url('../img/landing-box-bg.png'); margin:0 auto; padding:20px; text-transform:uppercase; letter-spacing:0.1em;}
.login-form
{margin:60px auto 120px auto; background:url('../img/landing-box-bg.png'); padding:20px 40px 40px 40px; color:#ffffff; border:#ffffff 3px solid;}
.login-form label
{color:#ffffff; letter-spacing:0.05em; font-weight:bold;}
.login-form .button
{margin:0 auto; width:70%; background:#2d3e50;}
.login-form .button:hover
{background:#3397da;}
.landing-page-footer
{text-align:center; padding:10px 0; background:url('../img/landing-box-bg.png'); font-size:12px; letter-spacing:0.05em; color:#ffffff; width:100%; position:absolute; bottom:0;}
.login-form-content
{width:220px;}

/*
 * Set up non-responsive
 */
html,body
{min-width:960px !important; background:#ecf0f1;}
.center
{float:none; margin-left:auto; margin-right:auto;}

/*
 * Console Header
 */
.header
{background:#3397da; padding:0px 0;}
.header h5
{margin-bottom:0px; color:white; letter-spacing:0.05em;}
.top-nav a
{margin-left:10px;}
.header small
{color:#ecf0f1;}

/*
 * Dashboard
 */
.dashboard-title
{height:35px; margin-top:-1px; margin-bottom:20px;}
.dashboard-title-icon
{height:35px; width:35px; float:left;}
.dashboard-title-text
{background:#2980b9; color:white; float:left; line-height:35px; padding:0 20px; text-transform:uppercase; letter-spacing:0.1em;}
.dashboard-title-corner
{float:left; width:0px; height:0px; border-style:solid; border-width:35px 35px 0 0; border-color:#2980b9 transparent transparent transparent;}
.user-management
{height:200px;}
.user-management img:hover
{background:white; opacity:0.7; filter:alpha(opacity=70); /* For IE8 and earlier */}
.controller-management img:hover
{background:#2980b9; opacity:0.7; filter:alpha(opacity=70); /* For IE8 and earlier */}
.controller-management
{height:200px; background:#3397da; }
.notification
{height:420px;}
.notification .row
{padding-bottom:20px;}
.top-3-alarm
{height:100%; background:white ;padding-bottom:40px;}

/*
 * box with blue background (notifications)
 */
.box
{width:100%; background:#3397da; min-height:130px; text-align:center; margin-top:20px;}
.box-title
{width: 100%; background:#3397da; min-height:30px; text-align:center; font-size:16px; line-height:30px; color:#ffffff;  letter-spacing:0.05em;}
.box-title-red
{width: 100%; background:#ff0000; min-height:30px; text-align:center; font-size:16px; line-height:30px; color:#ffffff;  letter-spacing:0.05em;}
.box-text-large
{width:100%; color:#ecf0f1; font-size:72px; line-height:72px;}
.box-text-small
{width:100%; color:#ecf0f1; font-size:14px; padding:5px 0;}
.blue
{text-align:center; color:#3397da !important;}

/* 
 * Dashboard Active alarm details 
 * please add extra colours for different alarm types
 */
.box-white
{width: 100%; background:#ffffff; min-height: 80px; margin-top: 20px}
.alarm-data
{clear:both; line-height: 35px; border-bottom: dashed 1px #bdc3c7; height:35px;}
.alarm-data .span6
{margin-left:0; padding-left:0;}
.alarm-data-last
{border:none;}
.alarm-active
{padding:0 5px; margin-right:1px; text-transform: uppercase; height:35; min-width:45px; color:#FFF; float:left; text-align:center;}
.alarm-data:hover
{background:#3397da; color:#34485e;}
.alarm-data:hover .alarm-active
{opacity:0.5 !important;}
.ph
{background:#27ae60;}
.lsi
{background:#3397da;}
.temp
{background:#e67e22;}
.phb
{background:#1abc9c;}
.con
{background:#f2c50f;}
.orp
{background:#2c3e50;}
.flow
{background:#2a80b9;}
.floc
{background:#29bb9c;} 
.oxi
{background:#239f85;}

/* 
 * Icons for dashboard title
 */
#icon-um
{background:url('../img/icon-user-management.png');}
#icon-cm
{background:url('../img/icon-controller-management.png');}
#icon-notifications
{background:url('../img/icon-notifications.png');}
#icon-top-3-alarm
{background:url('../img/icon-top-3-alarm.png');}

/*
 * Top 3 alarm section
 */
.top-3-alarm small
{line-height:72px; margin:0; padding-bottom:40px; font-size:24px;}

/* 
 * Footer
 */
.footer
{margin-top:60px; font-size:10px; text-align:center; color:#3397da; border-top:dashed thin #3397da; padding:20px 0;}

/*
 * Sub pages elements
 */
.sub-header
{height:50px; line-height:50px; background:#2a80b9; letter-spacing:0.1em; text-transform:uppercase; color:#FFFFFF;}
.sub-header img
{margin-right:10px;}
.table-head
{background:#3397da; height:60px;}
.table-head .span1
{margin-left:0;}
.table-head .span1, .table-head .span2, .table-head .span3, .table-head .span4, .table-head .span5, .table-head .span6, .table-head .span7, .table-head .span8, .table-head .span9
{font-size:20px; color:#ecf0f1; text-align:left; padding-top:15px; text-transform:uppercase; letter-spacing:0.1em;}
.data-display-row, .data-entry-row 
{height:45px; border-bottom:dotted 1px #bdc3c7; display:block}
.data-entry-row-display-none
{height:45px; border-bottom:dotted 1px #bdc3c7; display:none}
.data-display-row .span1, .data-display-row .span2, .data-display-row .span3, .data-display-row .span4, .data-display-row .span5, .data-display-row .span6, .data-display-row .span7, .data-display-row .span8, .data-display-row .span9
{font-size:14px; color:#3397da; text-align: left;line-height: 40px;letter-spacing: 0.1em;}
.data-display-row:hover{background:#34485e;}
.data-display-row:hover span {color:#e08e0b;}


.button
{letter-spacing:0.1em;}
a:hover
{text-decoration:none;}

/*
 * select user
 */
.box-white.select-user, .box-white.padding-bot
{padding-bottom:10px;}
.select-user .span1
{margin-left:0;}

/* 
 * Assign Controller to user
 */
.sidebar
{padding:10px; font-size:14px; line-height:18px;}
.sidebar ul
{margin-top:20px;}
.sidebar ul li
{color:#f2c50f;}
.sidebar .button
{width:100%; padding-left:0; padding-right:0;}
.select-controller .span1
{margin-left:0;}

/*
 * Add User
 */
.add-user .data-entry-row  input
{margin-top:8px;}
.data-entry-row-display-none input
{margin-top:8px;}
.add-user .form-label
{color:#3497da; width:200px; float:left; line-height:45px; padding-left:15px;}
.box-white.add-user
{height:306px;}
.input-field
{background:url('../img/input-bg.jpg');width:195px;}

.coporate-details
{padding:20px; color:#3497da;}
.coporate-details p
{margin-bottom:20px;}

/*
 * Swap User
 */
 .message {font-size: 32px;}
.message .userAB {margin-top: 100px;}

/* 
 * controller single page elements
 */
.controller-page-title
{margin-left:0; letter-spacing:0.01em; text-transform:uppercase; font-size:32px; color:#bcc4c7; text-align:center; border-bottom:1px dashed; line-height:46px; padding-top:10px; padding-bottom:10px;}
.controller .box-white
{margin-top:0; padding-bottom:10px;}
.controller
{margin-top:0px;}
.controller-tabs-group
{margin-left:0;}
.controller-tabs
{cursor:pointer; letter-spacing:0.05em; background:#3497da; color:#ffffff; text-align:center; line-height:40px; margin:0 1px 0 0;}
.controller-tabs:hover
{background:#2a80b9;}
.controller-tabs-active
{background:#38475e;}
.controller-tabs img
{margin-right:8px; margin-bottom:2px;}
.controller-tabs-group
{margin-right:2px;}
.controller hr
{border-top:dashed 1px #d1d5d8; margin:5px 0;}

/*
 * Controller Graph Main page
 */
.large-graph
{margin-right:0px; width: 450px !important;}
.small-graph
{width: 215px !important;}
.large-graph-left, .small-graph-left
{margin-left:30px;}
.graph-display
{margin:5px; background:white url('../img/spiffygif_38x38.gif') center center no-repeat;}
.large-graph .graph-display
{width:440px; height:293px;}
.small-graph .graph-display
{width:205px; height:140px;}
.graph-main-page .large-graph, .graph-main-page .small-graph
{margin-top:20px;}
.large-graph .box, .small-graph .box, .small-graph .row
{margin:0;}
.graph-main-page .button
{width:100%; padding-left:0; padding-right:0;}
.small-graph .button
{margin:0 0 10px 0;}

/* 
 * Controller console graph single page
 */
.single-graph
{width:600px; margin: 10px; border:#ebf1f1 3px solid; min-height: 300px; }
.graph-details
{color:#bdc3c7; line-height: 40px;}  
.graph-details strong
{margin-left:30px; color:#2d3e50;}
.graph-details input[type="text"]
{width:120px; margin-top:5px;}
.graph-details input[type=checkbox].css-checkbox + label.css-label-checkbox
{margin-left:5px;}

.graph-details input[type=checkbox].css-checkbox1 + label.css-label-checkbox1
{margin-left:5px;}

.end-date
{float:left;}
.calendar-icon-div
{margin:5px; background:#bdc3c7; width:30px; height:30px; line-height:30px; float:left;}
.calendar-icon-div:hover
{background:#2980b9;}
.graph-details .axis-label
{width:120px;float:left;}
.graph-details select
{float:left; margin-bottom:0; margin-top:5px;}

/*
 * Controller Status
 */
.box-status
{background:#ecf0f1;height:192px;border:solid 1px #3497da;}
.status-display
{position:relative; padding:5px; min-height:85px; text-align:center; color:#3497da; border-bottom:dashed 1px #3497da;}
.status-display h1
{color:#3497da; font-size:52px; margin:20px auto 10px auto;}
.alarm-status
{padding-bottom:5px; float:left; width:106px; background:#ecf0f1; height:60px; text-align:center; font-size:10px; color:#3497da;

}
.current-value
{padding-bottom:5px; float:left; width:106px; background:#ecf0f1; height:60px; text-align:center; font-size:10px; color:#3497da;

}

.alarm-status
{border-right:dashed 1px #3497da;}
.current-value h3
{margin-top:0;}


.lockout-status
{position:absolute; top:5px; left:5px; width:30px; height: 30px;  text-align:center; font-size:10px; color:#3497da; }
.comp-value
{position:absolute; top:0px; left:0px; width:100%; height:100%; padding:0px; min-height:85px; text-align:center; color:#3497da;}
.comp-value
{color:#3497da; font-size:10px; padding:-10px; }
/*
 * Controller Details
 */
.company-logo
{padding:5px; height:150px;}
.details-title
{color:#bdc3c7; font-size: 12px;}
.details-area
{padding:5px;}
.details-data
{color:#2d3e50; font-weight:bold; font-size:14px;}
.details-area .clearfix
{margin:20px 0;}
.details-section-title
{color:#bdc3c7; border-bottom:dashed 1px #d1d5d8; margin-bottom:20px; }
.reports-checkbox
{text-align:center;}

/*
 * Setup Controller
 */
.details-data input[type="text"]
{width:100%; }
.setup-controller-details
{background:#2980b9; border-top:dashed 1px #d1d5d8;}
.setup-controller-details .details-area, .setup-controller-details .details-data
{color:#ecf0f1;}
#submit-setup-controller
{margin:10px auto 10px; float:none;}    
.setup-controller-details  hr
{border-bottom:0;}

/* 
 * IE 9 Clean up
 */
body
{line-height:inherit; }

/*
 * Font Reset
 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video
{font-family:'Roboto', sans-serif;}

/*
 * button
 */
button, .button 
{min-height:20px; cursor:pointer; font-family:'Roboto', sans-serif; font-weight:normal; line-height:normal; margin:0 0 1.25rem; position:relative; text-decoration:none; text-align:center; display:block; padding-top:5px; padding-right:2rem; padding-bottom:5px; padding-left:2rem; font-size:1rem; background-color:#3397da; border-color:#258ace; color:white; -webkit-transition:background-color 300ms ease-out; -moz-transition:background-color 300ms ease-out; transition:background-color 300ms ease-out; padding-top:1.0625rem; padding-bottom:1rem; -webkit-appearance:none; border:none; font-weight:normal !important; }
button:hover, button:focus, .button:hover, .button:focus
{background-color:#258ace; color:white;}
button.secondary, .button.secondary
{background-color:#e9e9e9; border-color:gainsboro; color:#333333; }
button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus
{background-color:gainsboro; color:#333333;}
button.success, .button.success
{background-color:#f39c12; border-color:#e08e0b; color:white; }
button.success:hover, button.success:focus, .button.success:hover, .button.success:focus
{background-color:#e08e0b; color:white; }
button.alert, .button.alert{background-color:#f2c50f; border-color:#dcb20c; color:white; }
button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus
{background-color:#dcb20c; color:white; }
button.large, .button.large
{padding-top:1.125rem; padding-right:2.25rem; padding-bottom:1.1875rem; padding-left:2.25rem; font-size:1.25rem;}
button.small, .button.small
{padding-top:0.875rem; padding-right:1.75rem; padding-bottom:0.9375rem; padding-left:1.75rem; font-size:0.8125rem;}
button.tiny, .button.tiny
{padding-top:0.625rem; padding-right:1.25rem; padding-bottom:0.6875rem; padding-left:1.25rem; font-size:0.6875rem;}
button.expand, .button.expand
{padding-right:0; padding-left:0; width:100%; }
button.left-align, .button.left-align
{text-align:left; text-indent:0.75rem; }
button.right-align, .button.right-align
{text-align:right; padding-right:0.75rem; }
button.radius, .button.radius
{-webkit-border-radius:3px; border-radius:3px; }
button.round, .button.round
{-webkit-border-radius:1000px; border-radius:1000px; }
button.disabled, button[disabled], .button.disabled, .button[disabled]
{background-color:#3397da; border-color:#258ace; color:white; cursor:default; opacity:0.7; -webkit-box-shadow:none; box-shadow:none; }
button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus
{background-color:#3397da; color: white; }
button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary
{background-color:#e9e9e9; border-color:gainsboro; color:#333333; cursor:default; opacity:0.7; -webkit-box-shadow:none; box-shadow:none; }
button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus
{background-color:gainsboro; }
button.disabled.success, button[disabled].success, .button.disabled.success, .button[disabled].success
{background-color:#f39c12; border-color:#e08e0b; color:white; cursor:default; opacity:0.7; -webkit-box-shadow:none; box-shadow:none; }
button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus
{background-color:#e08e0b; }
button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[disabled].alert
{background-color:#f2c50f; border-color:#dcb20c; color:white; cursor:default; opacity:0.7; -webkit-box-shadow:none; box-shadow:none; }
button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus
{background-color:#dcb20c; color:white;}
.select-user .button, .select-controller .button, .message .button
{margin:20px auto; width:33%; display:block;}

button.short, .button.short
{margin:0; padding-top:0.4rem; padding-right:1.25rem; padding-bottom:0.3rem; padding-left:1.25rem; font-size:1rem;}

.field-name-label-normal {
    font-size: 16px;
    color:#3497da;
}