/* Copyright (C) 2016 XTel ApS This software is the property of XTel ApS. Use or distribution without XTel ApS authorization is prohibited and will be prosecuted to the extent of the law. */
/*scss_processor notation to import an other file*/
/*Html header and body colors*/
/* Scrollbar */
/*Form colors*/
/*Buttons colors*/
/* $button-special-color: #A4A4A4; */
/*Toggler color*/
/*tab colors*/
/*Sidebar colors*/
/*Dropdown menu colors*/
/* Project mode colors*/
/*Button colors*/
/*Button dropdown Menu*/
/*Sensor status colors*/
/*Table colors*/
/*Dialog box colors*/
/*Default colors*/
/*Other element colors*/
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300; src: local("Nunito-Light"), url(../fonts/Nunito-Light.ttf); }

@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; src: local("Nunito-Regular"), url(../fonts/Nunito-Regular.ttf); }

@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; src: local("Nunito-Bold"), url(../fonts/Nunito-Bold.ttf); }

html { height: 100%; font-family: 'Nunito', sans-serif; font-weight: lighter; font-size: 12pt; }

body { background-color: #1E2124; height: 100%; margin: 0; }

div.big_logo img { display: block; margin: auto; padding: 35px; }

pre { white-space: pre-wrap; word-wrap: break-word; }

h2, h3, h4, h5, h6 { margin: 0 0 15px 0; }

h1 { vertical-align: middle; }

p { margin: 3px 0; }

a { color: #009CBD; text-decoration: none; }

div > span { color: #009CBD; }

/** TODO: Colors only valid for sidebar scroller */
::-webkit-scrollbar { width: 17px; /* for vertical scrollbars */ height: 17px; /* for horizontal scrollbars */ background: inherit; }

::-webkit-scrollbar-corner { background-color: transparent; }

/* On white backgrounds */
::-webkit-scrollbar-track { border: 4px solid transparent; border-radius: 10px; background-color: rgba(200, 200, 200, 0.6); background-clip: padding-box; }

::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 10px; background-color: rgba(135, 135, 135, 0.6); background-clip: padding-box; }

/* ::-webkit-scrollbar-thumb:window-inactive { background: $scroll-background-inactive; }*/
/* On black background */
#sidebar::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.3); }

#sidebar::-webkit-scrollbar-thumb { background-color: rgba(235, 235, 235, 0.6); }

/* #sidebar ::-webkit-scrollbar-thumb:window-inactive { background: $scroll-background-sidebar-inactive; }*/
/* ::-webkit-scrollbar-track:vertical { border-left: 5px solid rgba(0,0,0,.2); } */
/******* HEADER ********/
#header { height: 65px; position: relative; border-bottom: 2px solid #777; }

#header_logo { width: 125px; cursor: pointer; margin: 20px 50px 0px 20px; }

/******* Header Tab bar ********/
ul.tabs { position: absolute; bottom: 0; left: 200px; list-style-type: none; margin: 0; padding: 0; overflow: hidden; }

ul.tabs li { float: left; }

ul.tabs li a { display: inline-block; color: white; text-align: center; padding: 10px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; }

/* Change background color of links */
ul.tabs li a:focus, .active { background-color: #8B898A; }

ul.tabs li a:hover { background-color: #6E6C6D; }

ul.tabs li a:active { background-color: #35383A; }

ul.tabs li a:disabled { background-color: #1E2124; }

/* Right align dropdown for header */
#header .dropdown-menu { right: 10px; }

#header .dropdown, #header > button { float: right; }

#header button { color: white; background-color: transparent; margin: 20px 10px 0px 10px; border: 0px; }

#user-mode { width: 175px; padding: 8px 15px; background-repeat: no-repeat; background-position: 10px 50%; transition: background-color 250ms; }

/* UserMode dropdown? #header .dropdown-user-mode a { min-width: 150px; background-repeat: no-repeat; background-position: 10px 50%; padding: 5px; padding-left: 50px; color: white; }*/
#user-mode.operation, a.operation { background-color: #009CBD; background-image: url(../icons/operation_white.png); }

#user-mode.operation:hover, a.operation { background-color: #00738B; }

#user-mode.operation:active, a.operation { background-color: #004D5D; }

#user-mode.setup, a.setup { background-color: #C6A80A; background-image: url(../icons/setup_white.png); }

#user-mode.setup:hover, a.setup { background-color: #957E08; }

#user-mode.setup:active, a.setup { background-color: #635405; }

#user-mode.project_design, a.project_design { background-color: #C51070; background-image: url(../icons/project_white.png); }

#user-mode.project_design:hover, a.project_design { background-color: #940C54; }

#user-mode.project_design:active, a.project_design { background-color: #630838; }

#user-mode span { margin-left: 30px; text-transform: capitalize; }

/******* Sidebar ********/
#sidebar { z-index: 1; width: 0px; opacity: 0; overflow-y: auto; overflow-x: hidden; margin-top: 20px; margin-left: 10px; margin-bottom: 15px; /* Slide in/out */ transition: width 500ms ease-in-out, opacity 500ms ease-in-out; }

#search-bar { margin: 0; width: 90%; color: white; background-color: #1E2124; border-radius: 15px; border: solid 1px #35383A; padding-left: 10px; /* background-image: url( TODO search icon ); */ }

#search-bar:focus { border: solid 1px #777; }

#sidebar ul { padding: 0; color: white; /* padding-left: 5px; */ list-style-type: none; overflow: hidden; }

#sidebar ul * { overflow: hidden; }

#sidebar ul ul { height: 0px; padding-left: 15px; /* Hover, Active, open, close */ transition: 250ms ease-in-out; }

#sidebar ul li { width: 100%; position: relative; overflow: hidden; }

#sidebar ul li a { overflow: hidden; display: inline-block; color: white; width: 100%; padding: 5px; text-decoration: none; transition: 0.3s; font-size: 17px; position: relative; }

#sidebar ul li a::after { content: ""; background: transparent url(../icons/navigation_arrow.png) no-repeat 8px 5px; display: inline-block; width: 20px; height: 20px; right: 15px; position: absolute; border-radius: 30px; top: 50%; transform: translateY(-50%); transform-origin: top; }

/* Change background color of links */
#sidebar ul li a:hover { background-color: #777; }

#sidebar ul.empty { /* font-size: 10pt; */ font-style: italic; }

/* When selecting... */
#sidebar ul.selected { height: auto; }

#sidebar li a.selected.active { background-color: #6E6C6D; }

#sidebar li.topitem.selected > a { background-color: #6E6C6D; }

#sidebar li.topitem.selected > a:not(.active) { background-color: #35383A; }

#sidebar li.topitem.selected > a::after { opacity: 1; transform: rotate(90deg) translateY(-50%); background-color: white; }

#sidebar ul li a:hover:after { opacity: 1; }

#sidebar ul li.selected > a::after { opacity: 1; transform: rotate(90deg) translateY(-50%); background-color: white; }

/* Empty end items, should not rotate */
#sidebar li a:only-child.selected.active::after { transform: rotate(0deg) translateY(-50%); background-color: white; }

/********************** Dropdown menu **********************/
.dropdown { position: relative; display: inline-block; z-index: 50; }

.dropdown button { float: none; }

.dropdown-menu-button { display: none; position: absolute; border-radius: 5px; background-color: #FFFFFF; min-width: 150px; /*box-shadow: 0px 8px 16px 0px $stroke-color;*/ z-index: 50; }

/* TODO: Replace above class with this */
.dropdown .menu-button { min-width: 170px; /* z-index: 50; */ margin-left: 20px; padding-right: 50px; }

.dropdown .menu-button::after { position: absolute; right: 5px; /* display: inline-block; content: "\2BC6"; right: 50px; font-size: 22px; color: $gray-color; transform: scale(1,0.8); */ content: ""; top: 0; height: 100%; width: 14px; background: transparent url(../icons/list_dropdown_arrow.png) no-repeat 50%; }

.dropdown-menu-button.show { display: block; }

.dropdown .dropdown-menu { width: 100%; }

.dropdown-menu { width: auto; display: none; position: absolute; border-radius: 5px; background-color: #FFFFFF; overflow: auto; box-shadow: 0px 8px 16px 0px #A4A4A4; z-index: 50; }

.dropdown-menu.show { display: block; }

.dropdown-menu a, .dropdown-menu button { display: block; padding: 10px; margin: 0; white-space: nowrap; color: #515151; }

.dropdown-menu a:hover, .dropdown-menu button:hover { background-color: #F0F0F0; }

.dropdown-menu h5 { margin: 0; padding: 10px 25px 5px; white-space: nowrap; /* background-color: $table-thead-normal; */ background-color: #F0F0F0; }

/* Making a button look the same as a <a> */
.dropdown-menu button { width: 100%; border: 0; border-radius: 0; transition: none; background-color: #FFFFFF; font-family: 'Nunito', sans-serif; font-weight: lighter; font-size: 12pt; }

.dropdown-menu button:disabled { border: 0; color: #9B9C9B; background-color: #FFFFFF; }

/********************** Toast (Top centered) **********************/
#toast-centered { position: absolute; float: left; left: 50%; top: 75px; }

#toast { position: relative; display: inline-block; left: -50%; min-width: 150px; background-color: #333; color: white; text-align: center; border-radius: 5px; padding: 5px 15px; z-index: 100; font-size: 12pt; font-style: italic; top: 0px; opacity: 0; visibility: hidden; transition: opacity 500ms, top 500ms, visibility 0s 1s; }

#toast.show { top: 25px; opacity: 1; visibility: visible; transition: opacity 500ms, top 500ms, visibility 0s; }

#toast.error { color: #C72521; }

#toast.enhance { color: #009CBD; }

#toast a { color: white; }

/********************** Popup Dialog **********************/
#modal-background { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; /* Animation - Fading in & out */ transition: opacity 0.5s ease-in-out; }

#modal-centered { position: relative; float: left; left: 50%; top: 35%; }

#modal-box { position: relative; margin: auto; display: inline-block; margin-left: -50%; /* Note: The #modal-centered & #modal-box centers the box on the screen. CSS3 Transforming will result in "half-pixel" issue: transform: translate(-50%, 50%);*/ color: #414141; background-color: white; border-radius: 5px; /* Animation - Page Resizing */ transition: width 500ms ease-in-out, height 500ms ease-in-out; }

#modal-page div.error h1 { color: #C72521; }

.page-item.pairing { min-width: 300px; }

.page-item table { padding-right: 10px; }

.page-item table tr { background-color: white; }

.page-item p.enhance { margin: 5px; font-size: 12pt; font-weight: bolder; color: #414141; }

.page-item p.message { color: #414141; }

.page-item.error p.message { font-weight: bolder; }

.page-item.pairing p.message, .page-item.pairing div.enhance { margin: 5px; font-weight: bolder; }

.page-item .header { height: 40px; }

.page-item .header h1 { font-size: 12pt; margin-top: 5px; margin-bottom: 10px; }

.page-item p { font-size: 10pt; margin: 0px; color: #979797; /*  width: 90%; */ }

.page-item p.error { color: #C72521; }

.page-item p.success { color: #57BE06; }

.page-item .buttons { text-align: right; margin-top: 15px; }

.page-item img { margin-top: 25px; }

/********************** Page Slider **********************/
.page-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }

.page-mask { width: 500%; height: 100px; /* Animation - Sliding Pages */ transition: margin 0.5s ease-in-out; }

.page-item { /* height:100%; */ float: left; padding: 20px; overflow: hidden; /* transition: all 0.5s ease-in-out; */ }

.notransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; }

/********************** Tables **********************/
table { width: 100%; margin-top: 10px; /* padding: 0; */ border-spacing: 0; font-family: 'Nunito', sans-serif; font-weight: lighter; font-size: 12pt; border-collapse: separate; border-spacing: 0 1px; }

thead { background-color: #C9C9C9; }

tbody { background-color: #F0F0F0; }

thead tr:first-child td:first-child { width: 33%; }

/* Animating table rows on hover */
tr.clickable td:last-child { position: relative; }

tr.clickable:hover { background-color: #DEDEDE; }

/* Making clickable rows act like links */
table { position: relative; }

tr.clickable td.enhance a { color: #009CBD; }

/* tr.clickable { height: 2em; line-height: 1.5em; }*/
tr.clickable td a::before { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 1.5em; margin-top: -5px; padding-bottom: 10px; /*/ To make it easier to see what is going on // background-color: red; // opacity: .5;*/ }

.highly-critical-bg { background-color: #FFE9E9; }

tr.clickable.highly-critical-bg:hover { background-color: #FFD1D1; }

.highly-critical { color: #E20714; }

.link-text { color: #009CBD; }

.critical-bg { background-color: #FEF2DE; }

tr.clickable.critical-bg:hover { background-color: #FCE4BD; }

.critical { color: #F5A623; }

tr.clickable td:last-child:after { content: ">"; color: #009CBD; font-weight: bolder; opacity: 0.5; transition: ease-out 500ms; /* Centering with right alignment */ position: absolute; /*top: 0; bottom: 0; left: auto;*/ right: 15px; /* width: 50%; height: 50%; overflow: hidden; text-align: right; margin: auto;*/ top: 50%; transform: translateY(-50%); }

tr.clickable:hover td:last-child:after { opacity: 1; right: 5px; }

tr.selected { background-color: #EAEAEA; }

th { font-weight: normal; }

th.clickable:hover { cursor: pointer; background-color: #A4A4A4; }

th, td { text-align: left; padding: 3px 10px; }

td { text-align: left; padding: 5px 10px 5px 10px; transition: 500ms; }

th.status { width: 100px; }

td.status { /*padding-left: 20px;*/ }

td hr { border: 0; border-bottom: 1px solid #DDD; }

td img { /*margin: 0 5px; vertical-align: middle;*/ vertical-align: middle; }

td span { margin: 0 5px; vertical-align: middle; }

td label.enhance { color: #979797; font-weight: bolder; }

td label.enhance a { color: #979797; font-weight: lighter; font-style: italic; }

td label.centered { text-align: center; }

tr.clickable.active { transition: background-color 1s; animation: row-fading 1s ease infinite; }

@keyframes row-fading { 0% { background-color: #F0F0F0; }
  50% { background-color: #DEDEDE; }
  100% { background-color: #F0F0F0; } }

.clickable { cursor: pointer; }

.enhance { color: #009CBD; }

.note { margin: 0px; color: #009CBD; font-size: 10pt; vertical-align: top; }

/* Animating table rows on hover */
.transparent thead { background-color: transparent; }

.transparent thead th { padding: 0; }

.transparent tbody { background-color: transparent; }

/*Transparent table body td should have following properties to center elements inside table*/
.transparent tr td { text-align: left; padding: 0px 0px; }

/********************** Form elements **********************/
label { font-size: 10pt; margin-right: 10px; }

.pairing-label-content { color: black; text-align: center; vertical-align: middle; font-size: 12pt; font-weight: 400; }

.illustration-image { display: inline-block; }

/*select { width: 164px; }*/
/* Non-IE8 comlicant "input:not([type="checkbox"])" */
input[type="text"], textarea { width: 95%; min-width: 147px; background-color: #F0F0F0; box-shadow: 0 0 3px #A4A4A4; }

input[type="checkbox"] { width: auto; margin-left: 0; }

input, textarea { width: 95%; min-width: 147px; outline: none; padding: 5px 10px 5px 5px; background-color: #F1F1F1; border: solid 1px #979797; transition: border 0.25s ease-in-out; }

/* input[type=text].error, input[type=password].error, */
input.error, textarea.error, select.error { box-shadow: 0 0 5px #C72521; }

button { font-family: 'Nunito', sans-serif; display: inline-block; line-height: 18px; outline: none; cursor: pointer; min-height: 20pt; min-width: 75px; padding: 5px 10px; margin-left: 10px; /* TODO: "margin: 20px 10px;" */ border: 1px solid #a1a1a1; border-radius: 5px; background-color: #f2f2f2; color: #464847; overflow: hidden; position: relative; transition: opacity 500ms ease-in-out, box-shadow 250ms ease-in-out, background-color 250ms ease-in-out; }

button:disabled { cursor: default; border: 1px ridge; background-color: #9B9C9B; }

button:disabled:hover { box-shadow: none; }

button.action { background-color: #4CB704; color: white; }

button.action:hover, button.action:disabled { background-color: #378503; }

button.action:active { background-color: #276000; }

button.confirm { background-color: #009CBD; color: white; }

button.confirm:hover { background-color: #00738B; }

button.confirm:active { background-color: #004D5D; }

button.white { background-color: #FFFFFF; }

button.white:hover { background-color: #F0F0F0; }

button.white:active { background-color: #DEDEDE; }

button.white:disabled { color: #9B9C9B; background-color: #DEDEDE; }

button.delete { padding-left: 24px; background: white url(../icons/delete_red.png) no-repeat 4px 5px; border-color: #E20714; color: #E20714; }

button.delete:hover { background: #A2050E url(../icons/delete_white.png) no-repeat 4px 5px; color: white; }

button.delete:active { background-color: #6E0309; color: white; }

button.update { padding-left: 24px; background: white url(../icons/update.png) no-repeat 4px 5px; }

button.update:hover { background-color: #F0F0F0; }

button.update:active { background-color: #DEDEDE; }

input:focus, select:focus, textarea:focus { box-shadow: 0 0 5px #979797; }

select { width: 100%; padding: 5px 10px 5px 5px; border-radius: 5px; border: solid 1px #979797; transition: border 0.25s ease-in-out; text-align: left; margin-left: 0px; color: #515151; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../icons/list_dropdown_arrow.png) 96%/8% no-repeat #eee; }

/* Support for IE10 & IE11 */
select::-ms-expand { display: none; }

/* Support for IE10< */
@media screen and (min-width: 0 / 0) { select { background-image: none; padding: 5px; } }

select option { color: #515151; background-color: #FFFFFF; }

select option:hover { background-color: #F0F0F0; }

select:active { outline: none; }

select:hover { background-color: #F0F0F0; outline: none; }

select:focus { color: #9B9C9B; outline: none; }

button img { vertical-align: top; }

button span { vertical-align: middle; }

button > img:first-child, button > span:first-child { margin-right: 5px; }

span.dots { margin: 0; }

.centered button { margin: 0; }

/** Backbone UI - http://perka.github.io/backbone-ui/ */
label.checkbox .checkbox_wrapper { display: inline-block; position: relative; cursor: pointer; }

label.checkbox input { display: none; }

label.checkbox span { color: #333; line-height: 20px; font-size: 16px; font-weight: 400; vertical-align: middle; margin-left: 10px; }

label.checkbox div::before { content: ""; display: inline-block; position: relative; vertical-align: middle; height: 16px; width: 16px; border: 1px solid #999; border-radius: 4px; background-color: #fff; background-image: linear-gradient(to bottom, #fff, #f0f0f0); }

label.checkbox div:active:before { background-image: linear-gradient(to bottom, #ccc, #999); }

label.checkbox input:checked + div::after { /*content: "\2713"; color: $success-color; line-height: 20px; text-align: center; font-size: 32px;*/ content: ""; background: url(../icons/checkbox_icon.png) no-repeat; position: absolute; width: 12px; height: 12px; top: 4px; left: 3px; }

/********** Icon buttons ***********/
button { /* Common button icon rules that don't break a normal button */ background-color: #F0F0F0; }

button:hover { background-color: #DEDEDE; }

button:active { background-color: #A4A4A4; }

button.dropdown { width: 150px; text-align: left; background-image: url(../icons/list_dropdown_arrow.png); background-repeat: no-repeat; background-position: right 5px center; margin-left: 0px; color: #515151; background-color: #F0F1F1; }

button.dropdown:hover { background-color: #F0F0F0; }

button.dropdown:focus { color: #9B9C9B; }

button.dropdownitem { width: 100%; height: 35px; display: inline-block; text-align: left; margin-left: 0px; border-radius: 0px; background-color: #FFFFFF; color: #515151; margin-top: -3px; }

button.dropdownitem:hover { background-color: #F0F0F0; }

button.add { background-image: url(../icons/plus_16x16.png); background-repeat: no-repeat; background-position: 10px center; margin: 0px 15px; padding-left: 35px; }

button.edit { background-image: url(../icons/edit_16x16.png); background-repeat: no-repeat; background-position: 10px center; margin: 0px 15px; padding-left: 35px; }

button.settings { background-image: url(../icons/settings.png); background-repeat: no-repeat; background-position: right center; margin: 0px 15px; padding: 8px 35px 8px 8px; }

/** button:active::after, button:target::after { animation: blink 0.3s forwards; } @keyframes blink { 100% { transform: translate(1em, -9em); } 50% { transform: translate(-5em, 7.5em); } } */
/********************** Animated Back button/a  **********************/
/* [ < a.back ] */
a.back { position: relative; top: 5px; margin-left: 20px; color: black; font-weight: bolder; text-decoration: none; opacity: 0.75; transition: ease-in-out 250ms; }

a.back:hover { opacity: 1; /* margin-left: 15px; */ }

a.back:after { content: "<"; position: absolute; font-weight: bold; color: #009CBD; left: -15px; /* transition: ease-in-out 250ms;*/ }

a.back:hover:after { /* left: -20px; */ animation: side2side 1s infinite; }

@keyframes side2side { 0%, 100% { left: -15px; }
  50% { left: -20px; } }

/* [ p.go    > ] */
p.go { position: relative; padding: 5px; border-radius: 5px; transition: ease-in-out 250ms; }

p.go:hover { background-color: #EAEAEA; }

p.go:after { content: ">"; position: absolute; font-weight: bold; color: #009CBD; right: 10px; opacity: 0.5; transition: ease-in-out 250ms; }

p.go:hover:after { right: 5px; opacity: 1; }

/********************** Common things  **********************/
.header { font-weight: bold; }

.error { color: #C72521 !important; }

.success { color: #57BE06 !important; }

div.black, span.black { color: black; }

div.white, span.white { color: white; }

.dashed { border: 2px dashed #979797; }

/* Alignment */
.centered-flex-box { display: flex; min-height: 0; flex-direction: column; flex: 1 1 100%; height: 100%; overflow: auto; align-items: center; justify-content: center; }

.flex-column { display: flex; min-height: 0; flex-direction: column; height: 100%; flex: 1 1 100%; }

.align-box { position: relative; }

.align-box > div { position: absolute; }

.align-box > .left { left: 0; }

.align-box > .right { right: 0; }

.align-box > .top { top: 0; }

.align-box > .bottom { bottom: 0; }

.align-box > .middle { top: 50%; vertical-align: middle; }

.align-box > .fill-width { width: 100%; }

.left { float: left; }

.right { float: right; }

.centered { text-align: center; }

.top { vertical-align: top; }

.align { vertical-align: middle; }

.bottom { vertical-align: bottom; }

.icon { vertical-align: middle; }

.hidden { display: none; }

.invisible { visibility: hidden; }

.flexible { display: inline-flex; }

/********************** Flexboxing the Views  **********************/
body { display: flex; min-height: 0; min-height: 100vh; flex-direction: column; }

#header { /* flex: 0; */ }

#body { flex: 1; display: flex; min-height: 0; flex-direction: row; }

#sidebar { /* flex: 0; */ }

#content { display: flex; flex-direction: column; flex: 1 1 100%; z-index: 2; overflow: auto; border-radius: 10px; background-color: white; padding: 10px 15px; margin: 15px 10px; /* Animation - Sliding & Fading Pages */ transition: margin 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }

#address-box, div.address-box { margin-bottom: 15px; /* Animation - Sliding & Fading Pages */ overflow: hidden; transition: 250ms ease-in-out; }

#alarm-reaction-time-box, div.alarm-reaction-time-box { margin-bottom: 30px; /* Animation - Sliding & Fading Pages */ overflow: hidden; transition: 250ms ease-in-out; }

#user-list, #details-list { /* Animation - Sliding & Fading Pages */ overflow: hidden; transition: 250ms ease-in-out; }

#user-list a { color: black; }

#user-list select { width: 75px; }

.list-info { margin-top: 75px; color: #009CBD; /* Animation - Fading buttons */ transition: opacity 500ms ease-in-out; }

.list-info button { margin: 25px; }

#user-details-page { max-width: 500px; }

/* #user-details-name { display: flex; padding: 5px 0; border-bottom: 1px solid #DDD; }*/
#user-details-page .header { margin: 0px; margin-top: 45px; padding: 5px 0; border-bottom: 1px solid #DDD; }

#user-details-page table { margin: 0; border-collapse: collapse; }

/* Switchboard Import View */
#import-view { flex: 1 1 100%; display: flex; min-height: 0; flex-direction: row; margin-top: 20px; margin-bottom: 10px; position: relative; }

#import-view .layer-select { position: absolute; top: -50px; right: 0px; overflow: visible; }

#import-view .layer-select button { margin-left: 0; text-align: left; }

#import-image-view { flex: 1 1 100%; position: relative; }

/* Auto-scroll-Y changes content size, unless everything inside is smaller */
#import-sidebar-view { min-width: 250px; margin-right: 10px; }

#import-sidebar-view > div { height: 100%; overflow-y: auto; overflow-x: hidden; }

#import-sidebar-view > div > * { max-width: 225px; }

#import-sensor-message { display: flex; align-items: center; flex-direction: column; min-height: 75px; border-radius: 5px; padding: 20px 0; }

#import-sensor-message.pairing { min-height: 275px; }

#import-sensor-message img { /* width: 90%; */ padding-top: 25px; }

/* Sliding sensor list from bottom */
.bottom-scroll-wrapper { position: relative; flex-grow: inherit; }

#switchboard-sensor-list thead { cursor: pointer; }

#switchboard-sensor-list { position: absolute; left: 0; right: 0; bottom: 0; transition: height 0.5s ease-in-out; overflow: visible; height: 100%; }

.sensor-info { margin-top: 16px; }

#switchboard-sensor-list.closed { height: 38px; overflow: hidden; }

#sensors-table td { font-size: 2em; /* font-weight: bolder; */ }

#sensors-table td:first-child { width: 50%; color: #009CBD; }

#sensors-table td:last-child { color: #979797; }

#normal-sensor-view table { font-size: 0.9em; border-spacing: 0 15px; }

#normal-sensor-view table img { margin-right: 10px; width: 20px; height: 20px; }

#normal-sensor-view .max_value { position: relative; font-size: 2em; }

#normal-sensor-view .max_value_info { position: relative; color: #979797; font-size: 0.9em; }

/* Switchboard view, sidebar/capability list*/
#capability-list { max-height: 75%; overflow-y: auto; }

#sensor-legends-table { /* max-height: 25%; */ overflow-y: auto; }

/* SVG Section */
#svg-container { height: 100%; }

#svg-container svg { min-width: 100%; float: left; /* Removing the height scrollbar */ }

svg text.headline { font-size: 32pt; font-weight: bolder; }

svg image { opacity: 0.5; }

svg rect.background { fill: #979797; stroke: #979797; stroke-width: 2; }

svg g.sensor { cursor: pointer; stroke-width: 5; /* TODO: Maybe a transition? */ }

svg g text { stroke-width: 1; font-size: 40px; }

svg g title { text-anchor: middle; text-align: center; }

svg g.not_paired text { display: none; }

svg g.paired text { display: block; fill: white; stroke: white; }

svg g.ready text { display: block; fill: #0093BE; stroke: #0093BE; }

svg g.critical text, svg g.highly_critical text { font-weight: bolder; margin-left: -2px; }

svg g.okay .fg { fill: #57BE06; stroke: #57BE06; }

svg g.critical .fg { fill: #F6AE2C; stroke: #F6AE2C; }

svg g.highly_critical .fg { fill: #E50A1B; stroke: #E50A1B; }

svg g.sensor .status { display: none; }

svg g.okay .status.okay, svg g.ready .status.ready, svg g.critical .status.critical, svg g.highly_critical .status.critical, svg g.highly_critical .status.highly_critical { display: block; }

svg g.sensor .status.ready { fill: #009CBD; stroke-width: 1; }

svg g.sensor .status.okay, svg g.sensor .status.critical { stroke: none; fill: white; }

svg g.sensor .status.highly_critical { fill: transparent; stroke: none; animation: fade-in-out 2s ease infinite; transition: opacity 500ms; }

@keyframes fade-in-out { from { opacity: 0.35; }
  25% { opacity: 1; }
  75% { opacity: 0.35; }
  to { opacity: 0.35; } }

/* Sensor mouseover/selected effects done via BG & Opacity */
svg g.sensor.not_paired .fg { opacity: 0.75; }

svg g.sensor.paired .fg { opacity: 0.9; }

svg g.selected .fg { opacity: 1; /* filter: url(#blur-filter); */ }

svg g.sensor .bg { fill: black; stroke: black; }

svg g.sensor:hover .bg { fill: grey; stroke: grey; }

svg g.sensor:active .bg { fill: white; stroke: white; }

svg g.selected .bg, svg g.selected:hover .bg { fill: white; stroke: white; }

svg path.attention { fill: none; opacity: 0.75; stroke: #E20714; stroke-width: 8; /* stroke-linejoin: round; */ }

/* Sensor states - color changes */
svg g.paired { fill: #0093BE; stroke: #0093BE; }

svg g.not_paired { fill: white; stroke: #666; }

svg g.not_paired.ready { fill: white; stroke: #0093BE; }

/* Gateways list */
#gateway-flexer { display: flex; flex-direction: row; }

#gateway-list { flex: 1; margin: 10px; }

#gateway-detector { /* flex: 0; */ width: 350px; margin: 10px; }

#gateway-detector * { transition: 500ms ease-in-out; }

#gateway-detector button { display: block; margin: 0 auto; }

#gateway-available { display: none; padding: 1px 10px 15px 10px; background-color: #DEDEDE; }

#gateway-available h4 { margin-top: 4px; }

#gateway-available table { margin-bottom: 15px; }

/* Toggle Switch  */
.toggler { display: inline-flex; text-align: center; min-width: 250px; }

.toggler input[type=radio] { display: none; }

.toggler label:first-of-type { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

.toggler label:last-of-type { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

.toggler label { width: 50%; margin: 0; padding: 5px 10px; font-size: 13pt; cursor: pointer; color: #414040; border: 1px solid #414040; background-color: white; }

.toggler input[type=radio]:checked + label { color: white; background-color: #414040; }

/*MultiDatesPicker additional effects and colors for select date and deselect date*/
button.ui-datepicker-trigger { visibility: hidden; height: 0; min-height: 0; padding: 0; margin: 0; }

table.ui-datepicker-calendar { border-collapse: separate; }

.ui-datepicker-calendar td { border: 1px solid transparent; }

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a { background: #743620 none; /* a color that fits the widget theme */ color: white; /* a color that is readeable with the color above */ }

/* TODO: Enable mobile screens @media (min-width: 768px) { #body { flex-direction: column; } } */

/*# sourceMappingURL=../../../../../../../static/xiot_webapp/css/base.css.map */