/****************************** BASE ******************************/
body {font-size: 0.9em; color: #225B86;}
h1{font-size:1.4em;display:none;}
h2{font-size:1.3em;}
h3{font-size:1.2em;font-weight:normal;}
h4{font-size:1.2em;font-weight:normal;margin:0;/*text-transform: capitalize;*/}
p{font-size:1em;text-decoration:normal;}
.title {font-size:1em;text-decoration:normal;margin:0;}
.title b{font-size:1.2em;text-transform: capitalize;}
#boxWaiting { display:none; position:absolute; top:0;left:0;right:0;bottom:0; z-index:10000;}
#boxWaiting #boxBackgroundWaiting { display:block; position:absolute; top:0;left:0;right:0;bottom:0; background-color: rgba(0, 0, 0, 0.2);}
#boxWaiting #boxImgWaiting { position:relative; margin:auto; margin-top:10em; width:34em; height:16em; background:#ffffff; padding: 1em 2em 1em 1em ;opacity: 1; border:1px solid #225B86; border-radius: 15px 50px; }
#boxWaiting img { display:block; margin:auto; width:8em; }
#boxWaiting #boxMsgWaiting { position:relative; display:block; margin:auto; margin-top: 2em; width:30em; height:4em; padding:0.2em 0.4em; border:0; }
#boxWaiting #boxMsgWaiting #msgWaiting { background:transparent; }
#boxWaiting #btnCancelWaiting { position:absolute; top:1.6em; right:1.6em; }
#boxWaiting #btnCancelWaiting img { width:32px;}
.errors .box h3 { color:#800000; }
.errors .box p.error { color:#800000; }
.errors .box p.action { color:#008080; }
.modal-content { border-radius: 0.8em; top:-5em; }


/****************************** SCROLLBAR ******************************/
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #B9D8EE; }
::-webkit-scrollbar-thumb:hover { background: #61A6D8; }

/****************************** PAGE STRUCT ******************************/
header, footer { background-color:#61A6D8; color:#ffffff; }
header .modal-content { color:#225B86;}
#boxHistory {position:relative; clear:both;}
#boxLogin .login, #users .boxNews .news, .boxDetails{ min-height:30em;}
#boxLogin .login, #users .boxNews .news {padding:0.8em;}
#boxDetails .boxNews { width:auto; padding:0.8em; }
#boxLock{ border-bottom:0px/*12px solid #225B86*/;}/*boxUsers*/
.bodyBox { padding:0.2em 0.4em; }
.bodyBox label { width:40%; border-bottom:1px solid #ccc; }
.box label { margin:0; }
#locks, #users, .accessories, #lock, #accessory, #user, #history { padding:0; }
.flex-fill { flex:1 1 auto; }

/****************************** HEADER ******************************/
header a, header .toolbar a, #account #myAccount {color: #ffffff; text-decoration:none; font-weight:normal; }
header a:hover, header .toolbar a:hover, #account #myAccount:hover {color: #DDECF7;}
header .toolbar a.btn {margin-right: 0.2em; text-transform: uppercase;} 
#logoBTec {	height:2.2em;position:absolute;top:-4px;left:0em;  }
#account { height:2em; width:8em; position:absolute; top:0.2em; right:0.2em; }
#account img { height:1.8em; position:absolute; top:0; right:0.75rem; }
#account #myAccount { position:absolute; top:0.1em; left:0; }
#userLogged { position:absolute; top:0em; right:9em; }
#userLogged span { font-size:1.4em; }
header h2 { position:absolute; left:9em; top:0.3em;}
header .titlebar { height:2em; width:100%}
header .toolbar a{ background-color: #75B0DD; padding: 0.175rem 0.75rem; margin:0px; font-size:0.8em; }
header .toolbar a.selected {background-color: #B9D8EE; color:#225B86}
.navbar .toolbar {width:40%;padding-left:0.4em;padding-bottom: 0.1em;}
.navbar .form-control{ width:78%; padding: 0.375rem 0.75rem; }
.navbar .navbar-nav{ position:absolute; top: -0.3em; right: 0.25em;}
.navbar .navbar-toggler { margin:0; padding:0; top: 0.25em; right: 0.25em;}
.navbar .navbar-toggler-icon { margin:0; padding:0; width:1.2em; height:1.2em; }
.dropdown-menu { background-color:#75B0DD;}
.dropdown-menu a { line-height:2em;}
.dropdown-menu a:hover { background-color: #B9D8EE; color:#225B86; }
.navbar .navbar-nav a,
.navbar .navbar-nav select,
.navbar .navbar-nav select option { background-color:transparent; border:none; text-transform:uppercase;}
.navbar .navbar-nav select option { background-color:#B9D8EE;}


/****************************** MAIN ******************************/
.row .lock p, .row .user p, .row .box p { line-height:1.2em; padding:0;margin:0; }
.row .lock, .row .user, .row .accessory { position:relative; cursor: pointer; padding-bottom:0; }
.row .lock {height:4em;}
.row #listBebUsers .accessory {height:auto;}
.row #listAcc .accessory {height:auto;}
.row #listFingers .accessory {height:auto;}
.row #listCodes .accessory {height:auto;}
.row #listUsers .accessory {height:auto;}
.row #listTags .accessory {height:auto;}
.row #listBKey .accessory {height:auto;}
.row img { width:24px; position:absolute; right:0.6em; top:4px; display:none;}
.row .lock img { display:block; }
.row .lock div.hasBridge { display: block; position:absolute; width:0.5em; right:0; top:0; bottom:0; background-color:#61A6D8;}
.row .lock div.noBridge { display: none; width:1em; height:1em; }
.box {overflow: auto;}
.even { background-color:transparent; padding:2px 4px;}
.pair { background-color:#DFDFDF; padding:2px 4px;}
.row .lock.selected { background-color:#96c4e6; }
.row .user.selected { background-color:#96c4e6; }
.row .accessory.q_0, .row .user.q_2 { color:#BBBBBB; }
.row .accessory.q_1 .title { color:#28A62C; }
.row .accessory.q_0 .highlightedState, 
.row .accessory.q_2 .highlightedDate,
.row .accessory.q_3 .highlightedDate { color:red; }
.row .accessory.selected { background-color:#CDF3CE; }
.row .lock:hover {background-color:#61A6D8; color:#fff;}
.row .accessory:hover {background-color:#61D864; color:#fff;}
.row .batteryLevel {height: 4px; background-color: none; position:absolute;bottom:0;left:0;right:0;}
.row .batteryLevel .level {height: 4px; background-color: #33ce66; position:absolute; top:0; left:0;}

#boxLocks h3, #boxLock h3 { background-color:#B9D8EE; padding:0.2em 0.4em; margin-bottom:0.1em; border-bottom:0.1em solid #61A6D8;border-top:0.1em solid #61A6D8; }
.boxAccessories h3.selected { border-bottom: 1px solid #61A6D8;background-color:#CDF3CE; padding:0.2em 0.4em; margin-bottom:0.1em; }
.boxAccessories h3 { 
  border-bottom: 1px solid #61A6D8;background-color:#FFFED2; padding:0.2em 0.4em; margin-bottom:0.1em; border-top:0.1em solid #61A6D8; }

#boxLock p, #boxAccessory p, #boxUser p{line-height:1.6em;}
#boxHistory p{line-height:1.2em;}
.box .toolbar, .box .main_toolbar { margin:0.4em 0.4em; padding:0; line-height:1.6em; }
.box .main_toolbar { display:fixed; margin:0.4em 0.4em 0 0.4em; }
.box .main_toolbar a{ width:10em; margin:0.2em 0.8em 0.2em 0em; padding:0 0.6em; }
.box .toolbar a{ margin:0.2em 0.2em 0.2em 0; padding:0 0.6em; border:1px solid #ccc; }
.box .main_toolbar a.openRelay, .box .main_toolbar a.closeLock, .box .main_toolbar a.openLock{ min-height:3em; }
.box .main_toolbar a.openRelay, .box .main_toolbar a.closeLock{ color: #155724; background-color:#CDF3CE; }
.box .main_toolbar a.openRelay:hover, .box .main_toolbar a.closeLock:hover {background-color:#e6f7e6;}
/*.box a {color: #2F81BD; text-decoration:none; font-weight:normal; }
.box a:hover {color: #61A6D8;}
.box .toolbar a{ background-color: #B9D8EE; display:inline; padding:0.2em 0.8em; margin:0px; font-size:1em; }
.box .toolbar a.selected {background-color: #B9D8EE; color:#222222}*/
.box .toolbar a.disabled, .disabled { display:none; }
.box .lbl { color: #2F81BD; text-decoration:none; font-weight:normal;  }
.box .inputText, .box .value { color: #225B86; text-decoration:none; font-weight:bold; }
.box .inputText {width:auto;display:inline; padding: 0.1em 0.4em;}
.nav-link { display:inline; }
.box .list { margin-top:2em; /*min-height:20em;*/}
/*.box h4 { margin-left:0.2em; }*/
#leftCol, #centerCol, #rightCol {border-right:2px solid #225B86;}
#boxHistory .list p.row { min-height: 1.4em; display: inline-block;}
.details { width:100%; }
#boxLogin button {width:100%;}

/****************************** HISTORY ******************************/
.history{}
.history p{	border-bottom:1px solid #cccccc; width:100%;}
.history p.title{background-color:#eeeeee;font-weight: bold;}
.history p span{margin: 0;border-right:1px solid #cccccc;text-align:left;display:inline-block;font-size:1em;vertical-align: top;	width:100%; padding:0 4px; }
.history p span.evDate{width:30%;}
.history p span.evName{width:30%;}
.history p span.evAction{width:40%;}
/*.history p span.evState{width:20%;}*/
/*.history p span.evAddress{width:44%;}*/
.history .new, .locks .new{background-color:red;color:white;}
.history .found{background-color:transparent;color:black;}

/****************************** POPUP ******************************/
.static, .no-static {clear:both;}
.static {margin:0 0 0.2em 0; border-bottom:0; float:left; width:100%;}
.static label { float:left; margin:0;font-weight:normal; }
.static span { float:right; margin:0;font-weight:bold; }
.static span.ok { color:#1ACC00; }
.static span.err { color:#D90000; }
.static span .datetime-picker input {border:0;text-align:right;}
.checkbox input {margin:0.1em 0.4em;}
.upRight {position:absolute;top:1em;right:1em;}


.inline {clear:both;margin:0 0 0.8em 0; border-bottom:1px solid #ccc; float:left; width:100%;}
.inline label { float:left; margin:0;}
.inline input { float:right; margin:0; width:auto;}

label.date { width:6em; }
input.date { width:10em; border:1px solid #225B86; color:#225B86; }
label.time { width:6em; margin-left:1em; }
input.time { width:6em; border:1px solid #225B86; color:#225B86; }

.boxAccessControl { margin:0; padding:0; border:0; margin:0 auto;}
.boxAccessControl tr { border-bottom:1px solid #225B86;border-right:1px solid #225B86; }
.boxAccessControl th { margin:0; padding:0.2em 0.4em; border:0; border-bottom:1px solid #fff; background-color:#225B86; color:#fff; }
.boxAccessControl td {margin:0; padding:0.2em 0.4em; border:0; color:#225B86; text-align:left; }
.boxAccessControl td select { width:auto; display:inline; }
.boxAccessControl td.closed { background-color:#E4E4E4; }
.boxAccessControl td.opened { background-color:#D8EDDA; }
.boxAccessControl td.timeSlot { background-color:#D5E3EC; }
.boxAccessControl .toolbar { margin:0.2em 0; padding:0.2em 0.4em; line-height:1.6em; min-width:20em;}
.boxAccessControl .toolbar a{ margin:0; padding:0 0.6em;}
.boxAccessControl label { margin:0;}

/****************************** FILTERS ******************************/
.titleBox { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; }
.titleBox .labelFilterCount {position:absolute; top:0.1em;right:2.2em;}
.titleBox .navbar {}
.titleBox .dropdown a { margin:0; padding:0; text-decoration: none; }
.titleBox .dropdown a:hover { text-decoration: none; }
/*.titleBox .dropdown a.dropdown-toggle {background: url(../images/funnel.svg); background-size: 1.2em 1.2em; margin:0.3em 0 0; padding:0; width:1.2em; height:1.2em; text-decoration:none;}*/
.titleBox .navbar-toggler-icon { margin:0; padding:0; width:1.2em; height:1.2em;}
.titleBox .dropdown {position:absolute; top:0;right:0.8em; margin:0;padding:0;}
.titleBox .dropdown-menu { width:16em;padding:0.4em;left:auto;right:0; color:#225B86;}
.titleBox .dropdown-menu a {display:block; width:100%; height:auto; line-height:1em; padding:0.2em 0.4em;margin:0.2em 0; text-align:center; }
.titleBox .dropdown-menu div {margin:0.8em 0.2em; padding:0.2em 0.4em; background-color:rgba(255, 255, 255, 0.2); }
#boxHistory .dropdown-menu label { border:0; margin:0 0 0 0.4em; }
.titleBox .dropdown-menu input.find { width:100%; }
.titleBox h3 {position:relative;}
.titleBox h3 span.count{position:absolute; right:4px;}
#boxLocks .dropdown-menu { background-color:#61A6D8;}
.navbar .navbar-nav select.lang { /*border: 1px solid #61A6D8;*/ margin-top: 4px; padding: 2px 8px;}
#box1 .dropdown-menu { background-color:#61D864;}
.boxAccessories .dropdown-menu { background-color:#D3DA5F;}
#boxHistory .dropdown-menu { background-color:#ffffff;}
.accessories .box h3 { cursor:pointer; }
.diagnosticOpenClose { width:100%; display:block;}
.diagnosticOpenClose .label{ width:60%; float:left;text-align:left;}
.diagnosticOpenClose .op,.diagnosticOpenClose .cl{ width:20%; float:left;text-align:right;}
.footerQrcode { padding:1.4rem;}
.qrcode {
    background-color: #fff;
    width: 5em;
    height: 5em;
    position: absolute;
    left: 0.3em;
    bottom: 0.3em;
    border:0px;
    /*border:1px solid #aaa;*/
}
.qrcode img, .qrcode canvas {
  position: absolute;
  bottom: 0.3em;
  left: 0.3em;
  top: auto;
  right: auto;
  width: 5em;
  height: auto;
}
.titleBox .addButton,.titleBox .refreshButton {
  top: 0;
  right: 5.2em;
  position: absolute;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  background-color: #007bfb;
  width: 1.4em;
  height: 1.8em;
  line-height: 1em;
}
#box2 .titleBox .addButton, #box2 .titleBox .refreshButton,
#box3 .titleBox .addButton, #box3 .titleBox .refreshButton,
#box4 .titleBox .addButton, #box4 .titleBox .refreshButton,
#box5 .titleBox .addButton, #box5 .titleBox .refreshButton,
#box6 .titleBox .addButton, #box6 .titleBox .refreshButton {
  right: 2.2em;
}
.titleBox .refreshButton {
  right: 3.6em;
  background-color: transparent;
}
.titleBox .addButton a:focus, .titleBox .addButton a, .titleBox .refreshButton a:focus, .titleBox .refreshButton a {  
  position: absolute;
  background-color: transparent;
  color: white;
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  font-weight: bold;
}
.titleBox .addButton a:hover, .titleBox .refreshButton a:hover {  
  background-color: transparent;
  border:1px solid #fff;
  color:#2F81BD;
  background-color: #fff;
}
.titleBox .refreshButton a img{
  width:1.4em;
  height: 1.4em;
  display: block;
  position: static;
  margin-top: 4px;
}
.modal-input-size{
  width: 100%;
  float: right;
  margin: 0;
  padding: 0 4px;
  text-align: right;
}

.timeslots {
  margin-top:0.4em;
}

.timeSlotBar{
  float:right;
  position:relative;
}
.timeSlotBar .timeSlot{
  float:left;
  position:relative;
  width:4.2em;
  height:4.2em;
}
.timeSlotBar .timeSlot img{
  width: 2em;
  height: 2em;
  left:1.1em;
  display: block;
}
.timeSlotBar .timeSlot .name{
  position:absolute;
  font-size:1em;
  top:0.2em;
  left:0em;
  right:0em;
  margin:auto;
  text-align:center;
  color:#000;
}
.timeSlotBar .timeSlot.noSel .name{
  color:#888;
}
.timeSlotBar .timeSlot.noSel .name:hover,
.timeSlotBar .timeSlot span:hover{
  color:#000;
}
.timeSlotBar .timeSlot .hours{
  position:absolute;
  left:0em;
  right:0em;
  top:1.8em;
  margin:auto;
}

.timeSlotBar .timeSlot .hours span {
  text-align:center;
  color:#555;
  text-align:center;
  width:100%;
}

.timeslotFromTo {
  margin-top:0.4em;
  text-align:right;
  display:none;
}
.timeslotFromTo .fromH, .timeslotFromTo .fromM, .timeslotFromTo .toH, .timeslotFromTo .toM{
  width:2em;
}

.wait-box { 
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height: 100%; 
}
.wait-box .layer { 
  background-color: #eee; 
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.wait-box .spinner-border{
  margin-top: 3em; 
}

/****************************** WINDOW SIZE ******************************/
/* For mobile phones: */
/*@media only screen and (max-width: 1280px) {
  .main {
  }
  .right {
  }
}

/* For mobile phones: */
/*@media only screen and (max-width: 1024px) {
  .main {
  }
  .right {
  }
}

/* For mobile phones: */
/*@media only screen and (max-width: 620px) {
  .main, .right {
  }
}
@media only screen and (max-width: 767.98px) {
*/
@media only screen and (max-width: 1100px) {
  body { font-size: 0.9em; }
  .titleBox .dropdown-menu { min-width:12em; width:12em; }
}
@media only screen and (max-width: 900px) {
  body { font-size: 0.9em; }
  .sidebar { top: 5rem; }
  .navbar .toolbar{ width:50% }
  .navbar .form-control{ width:64%; }
  h2{ display:none; }
  .titleBox .dropdown-menu { min-width:9em; width:9em; }
  /*.qrcodeLockBebUser img { width: 3.8em; }*/
}
@media only screen and (max-width: 700px) {
  body { font-size: 0.8em; }
  .sidebar { top: 5rem; }
  .navbar .toolbar{width:55% }
  .navbar .form-control{ width:54%; }
  h2{ display:none; }
  .titleBox .dropdown-menu { min-width:7em; width:7em; }
  /*.qrcodeLockBebUser img { width: 3.2em; }*/
}
@media only screen and (max-width: 576px) {
	body { min-width:360px; font-size: 0.7em; }
  .sidebar { top: 5rem; }
  .navbar .toolbar{ width:60% }
  .navbar .form-control{ width:54%; }
  h2{ display:none; }
  .titleBox .dropdown-menu { min-width:16em; width:16em; }
  #boxLogin .login, #users .boxNews .news, .boxDetails{ min-height:auto; }
  .box .list { min-height: auto; }
  #boxAccessories .list,
  #boxHistory .list,
  #boxLocks .list { max-height: 200px; overflow-y: auto; }
  /*.qrcodeLockBebUser img { width: 2.8em; }*/
}