html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  top: 0;
  position: absolute;
}

* {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div.container {
  height: calc(100% - 50px);
  width: 100%;
  top: 50px;
  position: fixed;
  padding: 0;
}


/*IN*********LOGIN PAGE****************/

div#centrat {
  width: 525px;
  height: 450px;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

img#logo_login {
  width: 50%;
  margin: 0 auto;
  display: table;
}

input#user,
input#pwd {
  display: table;
  margin: 0 auto;
  height: 40px;
  width: 270px;
  font-size: 25px;
  padding-left: 20px;
}

input#user {
  margin-bottom: 15px;
}

input#pwd {
  margin-bottom: 45px;
}

button#login {
  display: table;
  margin: 0 auto;
  height: 40px;
  width: 150px;
  background-color: #f6dc01;
  border: 0;
  border-radius: 7px;
  color: #57555c;
  font-size: 20px;
  font-weight: bold;
}

#errortext {
  display: none;
  color: red;
  text-align: center;
}


/*FI**********LOGIN PAGE****************/


/*Nav bar*/

.navbar-toggle {
  display: inline-block;
  float: left;
  margin-top: 5px;
}

.navbar-offset {
  margin-top: 50px;
}

.navbar-header {
  width: 100%;
}

.center-logo,
.cercaContainer {
  width: 80px;
  display: inline-block;
  padding-left: 20px;
}

#cercaButton {
  width: 30px;
}

#ute-logo_nav {
  width: inherit;
}

#right_menu_content {
  float: right;
}

#right_menu {
  display: inline-block;
  height: 50px;
}


/*error*/

#alert,
#loading_message {
  position: absolute;
  bottom: 0;
  z-index: 999999;
  width: 100%;
  left: 0;
  font-size: 25px;
  margin-bottom: 0;
}

.close {
  font-size: 40px;
}


/*Menu Ajuda*/


/*buto del menu*/

.btn {
  padding: 0;
}

button.btn.btn-primary.dropdown-toggle {
  height: 50px;
  width: 20px;
  background-color: transparent;
  border-color: transparent;
}

#tancar_finestra {
  height: 25px;
  width: 25px;
  background-image: url(../img/close.svg);
  background-size: cover;
  position: relative;
  top: 11px;
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover {
  background-color: transparent;
  border-color: transparent;
}

.dropdown-menu {
  right: 0;
  left: auto;
  width: 250px;
  padding: 0;
}


/*lis*/

.dropdown-menu>li>a {
  border-bottom: 1px solid #a2a0a8;
  font-size: 18px;
  line-height: 40px;
}

.dropdown-menu>li>a>span {
  top: 5px;
}

.userActive {
  float: left;
  display: inline-block;
}

.perfilActive {
  display: inline-block;
  float: left;
}

.menu_item {
  display: inline-block;
}

h4,
p {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/*Mapa*/

#map {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 35;
  border-top: 2px solid white;
}

#map .ol-zoom {
  font-size: 1.2em;
}

.ol-attribution,
.ol-rotate,
.ol-zoom {
  display: none;
}

.ol-scale-line {
  display: none;
  right: 15px;
  left: auto;
  background-color: transparent;
}

.ol-scale-line-inner {
  color: black;
  border-color: black;
}

.zoom-top-opened-sidebar {
  margin-top: 5px;
}

.zoom-top-collapsed {
  margin-top: 45px;
}

#mapoverlays {
  position: absolute;
  right: 10px;
  pointer-events: auto;
  bottom: 30px;
  z-index: 35;
}

button#print_options {
  width: 50px;
  height: 50px;
  border-radius: 68px;
  background-color: white;
}

button#print_options:disabled {
  opacity: 0.6;
}

.printer {
  background-image: url("../img/print.svg");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 10px 10px;
}

button#localize {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 68px;
}

.localize:focus,
.printer:focus {
  outline: 0;
}

.localize {
  color: #000;
  background-image: url("../img/location.svg");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 3px 4px;
}


/*Menu esquerra*/

.panel.panel-default {
  height: calc(100vh - 50px);
}

.panel-group {
  margin-bottom: 0;
}

.panel-default>.panel-heading {
  color: whitesmoke;
  background-color: #57555c;
  height: 44px;
  padding: 0;
  -webkit-box-shadow: 0 13px 16px 0 rgba(0, 0, 0, 0.34);
  -moz-box-shadow: 0 13px 16px 0 rgba(0, 0, 0, 0.34);
  box-shadow: 0 13px 16px 0 rgba(0, 0, 0, 0.34);
  text-align: center;
}

.panel-group .panel+.panel {
  margin: 0;
}

.nav-tabs {
  border-bottom: 0;
  background-color: #57555c;
}

#mytabs {
  width: 100%;
}

.navbar-default {
  background-color: #ddd;
  height: 50px;
  margin-bottom: 0;
}

.navbar-default .navbar-brand {
  color: #1c1c1c;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #1c1c1c;
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
}

.nav-tabs>li {
  width: 50%;
}

.nav-tabs>li>a {
  font-size: 16px;
  margin-right: 0;
  border: 0;
  text-align: center;
  vertical-align: middle;
  color: whitesmoke;
  background-color: #57555c;
  border-radius: 0;
}

.nav>li>a:focus,
.nav>li>a:hover {
  background-color: transparent;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  color: whitesmoke;
  cursor: default;
  background-color: #57555c;
  border: 0;
  border-bottom: 5px whitesmoke solid;
}

.sidebar {
  z-index: 45;
}

.panel-body {
  padding: 0;
}


/*INFO LLum*/

.goBack {
  display: inline-block;
  width: 32px;
  height: 32px;
  padding: 13px;
  background: whitesmoke;
  -webkit-mask: url("../img/left.svg");
  background-size: cover;
  position: relative;
  top: 8px;
  left: 11px;
  float: left;
}

.title-panel {
  display: inline-block;
  height: auto;
  margin: 0 auto;
  padding: 13px;
  position: relative;
  cursor: pointer;
}

label {
  margin-bottom: 2px;
  display: inherit;
}

.info_group {
  margin-top: 15px;
  padding: 0 15px 0 25px;
}

.info_group input {
  line-height: 32px;
  font-size: 17px;
  width: 100%;
  padding-left: 10px;
}

input#id_qc,
input#id_pl {
  width: calc(100% - 80px);
}

#div_linies {
  margin-top: 50px;
  overflow-y: auto;
  height: 450px;
  padding-left: 15px;
}

#ul_linies{
 height: 100%;
}

#foto_punt_llum,
#foto_qc {
  background-image: url("../img/camera.svg");
  background-size: cover;
  height: 32px;
  width: 32px;
  display: inline-block;
  position: relative;
  top: 8px;
  cursor: pointer;
}

.disabledFoto {
  opacity: 0.4;
  pointer-events: none;
}

.list_item {
  border-top: 1px solid #57555c;
  height: 60px;
  cursor: pointer;
}

.list_item:last-child {
  border-bottom: 1px solid #57555c;
}

.list_title {
  display: inline-block;
  position: relative;
  margin-left: 40px;
  font-size: 18px;
  line-height: 3;
}

.right_arrow {
  background: #1c1c1c;
  -webkit-mask: url("../img/right.svg");
  height: 32px;
  width: 32px;
  display: inline-block;
  top: 13px;
  position: relative;
  right: 4px;
  float: right;
}

.bootstrap-switch {
  top: 1px;
  left: 5px;
  position: relative;
  border-radius: 20px;
}


/*Inputs Formularis*/

.input-line {
  width: 100%;
  height: 40px;
  padding: 0 15px 0 25px;
  margin-bottom: 15px;
}

#input_districte {
  display: none;
}

.input-line select,
.input-line input {
  width: 100%;
}

.valueInput {
  width: 70%;
  float: left;
  display: inline-block;
}

.valueInput_40 {
  width: 40%;
  float: left;
  display: inline-block;
  padding-top: 11px;
}

.labelInput_60 {
  width: 60%;
  float: left;
  display: inline-block;
  line-height: 40px;
}

div[class*="cerca_"] {
  float: right;
  border-radius: 40px;
}

.ui-selectmenu-text,
.ui-menu-item-wrapper {
  font-size: 20px;
}

.labelInput {
  width: 30%;
  float: left;
  position: relative;
  display: inline-block;
  top: 9px;
}


/*Enllumenat*/

.ui-selectmenu-button.ui-button {
  width: 100%;
}

#tipus_llum,
#id_input,
#vehicle_select,
#torns_select {
  width: 100%;
  font-size: 20px;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

#btns_div,
#btns_recorreguts {
  float: right;
  padding-right: 15px;
  display: flex;
}

#btns_div button,
#btns_recorreguts button {
  border: 0;
}

#btn_mostra_recorreguts button {
  margin-left: 30px;
}

#btn_actualitza,
#btn_mostra,
#btn_mostra_reports,
#btn_mostra_recorreguts {
  height: 50px;
  width: 170px;
  background-color: #f6dc01;
  font-weight: bold;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 18px;
}

#btn_esborra,
#btn_esborra_recorreguts {
  height: 50px;
  width: 45px;
  border-radius: 5px;
  color: white;
  background-color: #57555c;
}

.trash {
  display: block;
  height: 50px;
  width: 50px;
  background-image: url("../img/trash.svg");
  background-repeat: no-repeat;
  background-position: center center;
  left: 2px;
  position: relative;
  fill: whitesmoke;
}


/*Recorreguts*/

.main-row {
  position: relative;
  top: 0;
  height: calc(100% - 51px);
}

.mini-submenu:hover {
  cursor: pointer;
}

.slide-submenu {
  background: rgba(0, 0, 0, 0.45);
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  cursor: pointer;
}

#datepicker_recorreguts {
  width: calc(100% - 34px);
  font-size: 20px;
}

.ui-datepicker-trigger {
  width: 34px;
  border: 1px #57555c solid;
  background-color: #f6dc01;
  vertical-align: bottom;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-recorregutprevist,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-recorregutprevist {
  color: #fff;
  background: #505cea;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-recorregutrealitzat,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-recorregutrealitzat {
  color: #fff;
  background: #80b5e1;
}


/*Linia Punts*/

.light_icon {
  width: 30px;
  height: 30px;
  float: left;
  background-image: url("../img/punt_llum.svg");
  background-size: cover;
  top: 11px;
  position: relative;
  left: 7px;
}

.titol_punt {
  margin-left: 47px;
  display: inline-block;
  font-size: 25px;
  position: relative;
  top: 10px;
}

div#list_punts_llum {
  overflow-y: auto;
  padding: 0;
}

p.titol_punt.active {
  text-decoration: underline;
  background-color: #f6dc01;
}

#list_punts {
  padding-top: 10px;
  padding-left: 15px;
  overflow-y: auto;
  height: calc(100vh - 95px);
}


/*Panel Show Image*/

.image_panel {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0 left: 0;
  background-color: #1c1c1c;
}

#imatge_pllum {
  display: block;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  padding: 65px;
}

#close_image_panel {
  height: 30px;
  width: 30px;
  background-image: url("../img/close.svg");
  background-size: cover;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background-color: white;
}

#image_title {
  position: absolute;
  color: white;
  right: 60px;
  top: 19px;
  font-size: 25px;
}


/*Cercant*/

.cercant {
  opacity: 0.5;
}

.cercant_div {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.6);
}

#cercant_gif {
  display: block;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}


/*HELP PAGE*/

#seleccio {
  margin-top: 20px;
}

h3 {
  padding: 10px 0 10px 20px;
  margin: 0;
}

.tree_li {
  padding: 10px 0 10px 20px;
  list-style-type: none;
  font-size: 20px;
}

.ul_active {
  background-color: lightgrey;
}

.li_active {
  font-weight: bold;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  position: relative;
  min-height: 1px;
  padding: 0;
}

.div_title_help {
  background-color: #f6dc01;
  height: 100px;
}

.title_help {
  position: relative;
  top: 25px;
}

.content_help {
  padding: 25px 25px 0 25px;
  background-color: white;
}

.content_help strong {
  font-size: 18px;
}

.content_help p {
  font-size: 18px;
}

.img_sota {
  height: 450px;
}

img.img_sobrepos,
.img_sota {
  padding-top: 10px;
  padding-bottom: 10px;
  height: 450px;
}

.row {
  background-color: lightgrey;
  height: calc(100% - 50px);
  position: absolute;
  width: 100%;
}

#help_QC {
  background-color: white;
  height: calc(100% - 50px);
}

.panell {
  position: relative;
  overflow-y: auto;
  height: 100%;
}

.panel_help {
  overflow: hidden;
}

.tree_li>a,
.ul_tree>a {
  color: #333;
}

#dialeg_asobrede {
  text-align: center;
}

img.img_logos {
  width: 180px;
}

#dialeg_asobrede p {
  font-weight: 800;
}

.llegenda_columns {
  width: 50%;
  float: left;
}

.icones_llegenda {
  width: 18px;
  float: left;
  margin-right: 7px;
}

/**** Cerca ****/
#input-cerca {
  position: absolute;
  right: 12px;
  pointer-events: auto;
  top: 8px;
  width: 210px;
  z-index: 35;
  padding-left: 8px;
}

#clearButton {
  position: absolute;
  cursor: pointer;
  right: 14px;
  pointer-events: auto;
  top: 10px;
  width: 24px;
  height: 24px;
  z-index: 35;
}

#input-cerca-select-button {
  position: absolute;
  right: 12px;
  width: 210px;
  pointer-events: auto;
  top: 15px;
  z-index: 35;
  padding-left: 8px;
  display: none !important;
}

#input-cerca-select-button .ui-selectmenu-text {
  font-size: 15px;
}

.ui-autocomplete-loading { 
  background:url("../img/ajax-loader.gif") no-repeat right center; 
  background-color: white;
}

.ui-autocomplete-loading + #clearButton { 
  display: none;
}

#input-cerca[value=""] + #clearButton {
  display: none;
}

.ui-autocomplete .ui-menu-item {
  border-bottom: 1px solid #C0C0C0;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
  font-size: 16px;
}

/***** Cerca dinàmica ****/
#infoDynamicSearch {
  width: 90%;
  margin-left: 5%;
  margin-top: 100px;
}

#infoDynamicSearch label {
  float: left;
  margin-right: 16px;
  line-height: 28px;
  width: 44%;
}

#infoDynamicSearch input {
  padding-left: 8px;
  opacity: 0.85;
  width: 44%;
}

#dynamic_meta_search{
  overflow: auto;
  max-height: 336px;
}

.panel-info>.panel-heading {
  color: whitesmoke;
  background-color: #C0C0C0;
  height: 44px;
  padding: 0;
}

.panel-info>.panel-heading>.panel-title {
  font-size: 20px !important;
  font-weight: bold !important;
}

.panel-info {
  border-color: #C0C0C0;
}

.no-results-label{
  font-weight: bold;
  font-size: 1.6em;
  padding: 75px;
  text-align: center;
}