body {
  	min-height: 500px;
  	padding-top: 70px;
	padding-bottom: 20px;
	position:relative;
}

a {
  color: #337ab7;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}

a.disabled {
  pointer-events: none;
  color: lightgray;
}

.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}

.navbar-inverse .navbar-nav  a {
  color: #9d9d9d;
}


.navbar-inverse .navbar-nav  a.active ,
.navbar-inverse .navbar-nav  a:focus,
.navbar-inverse .navbar-nav  a:hover {
  color: #fff;
  text-decoration: none;
}

.navbar-inverse .navbar-nav a.active {
  border-bottom: 3px solid orange;
  padding-bottom: 15px;
}

.navbar-brand {
  color: #9d9d9d;
}

.navbar-brand:hover {
  color: #fff;
}

.navbar-brand img {
	margin-top: -5px;
	margin-left: 5px;
}

.jumbotron p {
    font-size: 18px;
    margin-bottom: 15px;
}

.scrollToTop {
    background: #f9f9f9 none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 60px;
    display: none;
    font-size: 25px;
    height: 55px;
    line-height: 50px;
    position: fixed;
    right: 50px;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s ease 0s;
    width: 55px;
    z-index: 999;
}
.scrollToTop:hover, .scrollToTop:focus {
    color: #fff;
    outline: medium none;
    text-decoration: none;
}

.scrollToTop {
    color: #337ab7;
}

.scrollToTop:hover, .scrollToTop:focus {
    background-color: #337ab7;
}

.spinner {
  font-size: .75em;
  color: #ccc;
}

.fast-spin {
  -webkit-animation: fa-spin .5s infinite linear;
  animation: fa-spin .5s infinite linear;
}

.img-responsive {
  max-width: 100%;
  display: block
}

.img-rounded {
  border-radius: 6px;
}

[id^="sighting_form_rings"] {
  width: 100%;
}

form[name="sighting_form"] > div,
form[name="registration_form"] > div,
[id^="sighting_form_rings"] > div,
#sighting_form_place > div,
#sighting_form_metal_ring > div {
  display: flex;
  align-items: center;
}

#sighting_form_place{
	margin-top: 1rem;
}

form[name="sighting_form"] label,
form[name="registration_form"] label
 {
  width: 33.3% !important;
  text-align: right;
  margin-right: 20px;
  font-weight: bold;
  margin-bottom: 0;
}

form[name="sighting_form"] select,
form[name="sighting_form"] input,
form[name="registration_form"] input,
form[name="sighting_form"] textarea {
  width: 33.3% ;
}

.form-control[readonly] {
  background-color: #e9ecef;
}

form[name="registration_form"]
.email_addr_field {
  display: none;
}

#photo_grid textarea,
#photo_grid fieldset {
	width: 100% !important;
}

#map {
  height: 500px;
}

.leaflet-popup-content {
  max-height: 250px;
  overflow-y: scroll;
}


.leaflet-touch .leaflet-control-layers-toggle {
  width: 30px;
  height: 30px;
  background-size: 20px;
}

.locate_device_btn {
  min-width: 30px;
  min-height: 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 1.5em;
  padding: 6px;
  cursor: pointer;
}

.leaflet-control-geocoder {
  margin-right: 10px;
}



/* Canviar el treshold del menu collapse

@media (max-width: 1200px) {
	.navbar-header {
	  float: none;
	}
	.navbar-left,.navbar-right {
	  float: none !important;
	}
	.navbar-toggle {
	  display: block;
	}
	.navbar-collapse {
	  border-top: 1px solid transparent;
	  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	}
	.navbar-fixed-top {
	  top: 0;
	  border-width: 0 0 1px;
	}
	.navbar-collapse.collapse {
	  display: none!important;
	}
	.navbar-nav {
	  float: none!important;
	  margin-top: 7.5px;
	}
	.navbar-nav>li {
	  float: none;
	}
	.navbar-nav>li>a {
	  padding-top: 10px;
	  padding-bottom: 10px;
	}
	.collapse.in{
	  display:block !important;
	}

}
*/

/* Caixa debug */
#debug {
		position:absolute;
		top: -999px;
}

@media (min-width: 1500px) {
	#debug {
		position:fixed;
		width: 150px;
		top: 70px;
		left: 2px;
		background-color:#FFFF99;
		padding: 10px;
		font-size:11px;
		opacity: 0.6;
	}
}

a.llistatrams {
	display: block;
	background-color: #ecebe1;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	padding: 5px 10px;
	margin-bottom: 5px;
	font-size: 130%;
	text-decoration:none;
}

a.llistatrams:hover {
	background-color:#FFCC33;
	border: 1px solid #ccc;
}

.center {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

#mapwrap {
	position:relative;
}

#map-canvas {
	width: 100%;
	height: 300px;
	border: 2px solid #ccc;
}

#map-canvas-big {
	width: 100%;
	height: 500px;
	margin-bottom: 15px;
	border: 2px solid #ccc;
}

div#carregant {
    background-color: #333;
    opacity: 0.55;
    padding: 2em;
    text-align: center;
    position: absolute;
	height: 100%;
    width: 100%;
    z-index: 100;
}

div#carregant b {
	color:#FFF;
	font-size: 20px;
    z-index: 200;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
	margin: auto;
    z-index: 200;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* CARREGANT TAULA */

.wrapper {
	position: relative;
}

.loading:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100;
	background: rgba(0,0,0,0.45) center 100px no-repeat url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
}

.gm-style .Finestra {
	overflow: hidden;
	font-family:Arial, Helvetica, sans-serif;
	color: #000000;
	/*height: 120px;*/
	position: relative;
	text-align:left;
}

.gm-style h1 {
    color: #337ab7;
    font-family: 'Signika',Arial,Helvetica,sans-serif;
    font-size: 16px;
	font-weight: normal
}

.btn-primary {
	/*margin-bottom: 10px;*/
}

footer {
	text-align: center;
}


/* Bootstrap-table styles */

.fixed-table-toolbar {
  display: flex;
  flex-direction: column-reverse;
}

.search.btn-group{
  max-width: 400px;
}

.bs-bars {
  margin-top: 0 !important;
  width: 100%;
}

#toolbar {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  display: none;
}

#toolbar.show {
  display: block;
}

#filters {
  display: flex;
}

#filters select {
  margin: 0 10px;
}

.marca {
	/*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);*/
	text-align:center;
	border-radius:4px;
	border: #DDD solid 1px;
	display: block;
	width: 90%;
	font-size: 88%;
}

.ombra {
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.marca:hover {
	border-color: #666;
}

.marca_span {
	/*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);*/
	text-align:center;
	border-radius:4px;
	border: #DDD solid 1px;
	width: 90%;
	font-size: 88%;
	padding: 2px 8px;
}

td.scientific_name {
  font-style: italic;
}

td.validation {
  text-align: center;
}

td.validation .badge {
  min-width: 100px;
}

.nobs {
	font-size: 80%;
	color: #999999;
}

.vis_taula,
.vis_mapa {
	float:right;
	margin-left: 10px;
	font-size:80%;
}

#sighting_table {
  .fa-file.text-secondary {
    color: rgb(142, 145, 149) !important;
  }
}

h2 {
	position: relative;
	margin-bottom: 20px;
	color: #337ab7;
}

h3 {
	color: #9d9d9d;
}

.opt_fitxa {
	position: absolute;
	right: 0;
	top: 0;
	font-size:60%;
}

.detalls-fitxa {
    background: #eee none repeat scroll 0 0;
    border-color: #ddd;
    border-style: solid;
    border-width: 1px;
	color: #888;
	font-size: 85%;
	padding: 10px;
 	margin-right: 15px;
	margin-bottom: 5px;
	/*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);*/
}

.detalls-fitxa th {
	/*text-transform: uppercase;*/
	color:#666;
}

.infoculta {
	color:#999999;
	font-size: 11px;
	font-family:"Courier New", Courier, monospace;
	position: absolute;
	top: 0;
	left: 101%;
	width: 300px;
}

.ocult {
	display: none;
}

.titol_taula {
	text-transform:uppercase;
	letter-spacing: 2px;
	color:#999999;
}

.table.detallobs th,
.table.detallobs td {
	padding: 7px;
}

.photo_list {
  flex-wrap: wrap;
  gap: 10px;
}

.photo_list img {
  max-width: 150px;
  border-radius: 5px;
}

.photo_list img:hover {
  opacity: .75;
}

a.logo:hover img {
    opacity: 0.6;
}

#mapwrap {
	width: 100%;
	position: relative;
	/*height: 450px;*/
	/*background: #EEE url(../img/ajax-loader.gif) no-repeat center center;*/
}

#map-canvas {
  width: 100%;
  height: 450px;
  margin-bottom: 15px;
  border: 2px solid #ccc;
  position: relative;
  visibility: visible;
}

#info_coord {
	text-align: center;
	background-color: #CFE7DA;
	padding: 5px 5px 20px 5px;
	border: 1px solid #0066CC;
	color: #0033FF;
	font-size:14px;
}

#info_coord p {
	font-size:18px;
}

#info_coord a {
	font-size:16px;
}

#geo_fail,
#geo_no,
#search_device,
#busca_etrs89,
#busca_ed1950,
#geolocation_info {
	display: none;
}

.caixa_amplia {
	width: 150px;
	height: 50px;
	display: block;
}

#inscription, #inscription_old {
	text-align: center;
	font-weight: bold;
	font-size: 110%;
}

li.pdf {
	list-style: url(../img/icon_pdf.gif);
	/*
	  background: url(../img/icon_pdf.gif) no-repeat left top;
	  padding: 3px 0px 3px 20px;
	  list-style: none;
	  margin: 0;
	*/
}

li.pdf a:hover { text-decoration:none; }

.label-anellament {
    background-color: #0F0;
    opacity: 0.7;
}

.label-observacio { opacity: 0.7; background-color: #00F; }

.navbar-inverse .navbar-nav li a i.usertype0 { color:#CCC; }
.navbar-inverse .navbar-nav li a i.usertype1 { color:#06F; }
.navbar-inverse .navbar-nav li a i.usertype2 { color:#C00; }
.navbar-inverse .navbar-nav li a i.usertype3 { color:#FF00FF; }
.navbar-inverse .navbar-nav li a i.usertype_r { color: #FC3; }

table.tablesorter tbody td a.usertype0 { color: #CCC; }
table.tablesorter tbody td a.usertype1 { color: #06F; }
table.tablesorter tbody td a.usertype2 { color: #C00; }
table.tablesorter tbody td a.usertype3 { color: #FF00FF; }
table.tablesorter tbody td a.usertype_r { color: #FC3; }

.galeria {
    height: 75px;
    width: 75px;
    display: block;
    overflow: hidden;
    float: left;
    background-color: #FFFFFF;
    border: 1px solid #A9A9A9;
    padding: 4px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.galeria {
    height: 75px;
    width: 75px;
    display: block;
    overflow: hidden;
    float: left;
    background-color: #FFFFFF;
    border: 1px solid #A9A9A9;
    padding: 4px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.galeria:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.marc_foto {
    height: 65px;
    width: 65px;
    display: block;
    overflow: hidden;
    text-align: center;
}

.marc_foto img {
    height: 75px;
}

.table { margin-bottom: 0; }

.marc_foto_fitxa {
	margin-bottom: 15px;
}

.inactiu {
	color: #CCCCCC;
}

#photo_grid_wrapper{
  width: 33.3%;
}
#photo_grid {
  /* display: flex; */
  align-items: center;
  /* width: 33.3%; */
}
#photo_grid .thumb_wrapper {
  position: relative;
  height: 80px;
  margin-right: 20px;
}
#photo_grid .thumb_wrapper:hover .delete_photo {
  display: block;
}
#photo_grid .thumb_wrapper img {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  margin-left: 5px;
}
#photo_grid .delete_photo {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px 10px;
  font-size: 1.2em;
  cursor: pointer;
}
#photo_grid .delete_photo:hover {
  color: #c61111 !important;
}

#photo_grid label {
  width: auto !important;
  margin: 0 auto !important;
}

#add_photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 0.5em; }

#add_photo:hover {
  opacity: .7;
  cursor: pointer;
}

#add_photo::after {
  content: '(Max. 20Mb)';
  position: absolute;
  bottom: -20px;
  font-size: 0.8rem;
  font-weight: normal;
}

#upload_image {
  display: none;
}

.photo_placeholder {
  display: none;
  background: #eee;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 0.5em;
  margin-top: 0.5rem;
  margin-left: 5px; }
  .photo_placeholder.loading {
    display: block; }
  .photo_placeholder #spinner {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 20px auto; }
    .photo_placeholder #spinner:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 5px solid #fff;
      border-color: #abcb58 transparent #abcb58 transparent;
      margin: 0px;
      animation: spin 0.5s linear infinite; }


a.resizeimg {
	display: block;
	width: 100%;
	position: relative;
	height: 0;
	padding: 56.25% 0 0 0;
	overflow: hidden;
	background-color: #333;
}

a.resizeimg img	{
	position: absolute;
	display: block;
	max-width: 100%;
	max-height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}


.paginationjs.paginationjs-theme-custom .paginationjs-pages li {
    border-color: #b5b5b5
}

.paginationjs.paginationjs-theme-custom .paginationjs-pages li>a {
    color: #0d6efd
}

.paginationjs.paginationjs-theme-custom .paginationjs-pages li>a:hover {
    background: #e9f4fc
}

.paginationjs.paginationjs-theme-custom .paginationjs-pages li.active>a {
    background: #0d6efd;
    color: #fff
}

.paginationjs.paginationjs-theme-custom .paginationjs-pages li.disabled>a:hover {
    background: 0 0
}

.paginationjs.paginationjs-theme-custom .paginationjs-go-input>input[type=text],
.paginationjs.paginationjs-theme-custom .paginationjs-size-changer>select {
    border-color: #0d6efd
}

.paginationjs.paginationjs-theme-custom .paginationjs-go-button>input[type=button] {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff
}

.paginationjs.paginationjs-theme-custom .paginationjs-go-button>input[type=button]:hover {
    background-color: #3ca5ea
}


.form-signin {
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
	margin-bottom: 10px;
}
.form-signin .checkbox {
	font-weight: normal;
}
.form-signin .form-control {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
}
.form-signin .form-control:focus {
	z-index: 2;
}
.form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

@keyframes spin {
  100% {
    transform: rotate(360deg); } }


/* .project-detail > .row {
  border: 1px solid #ddd;
  padding: 5px;
} */

/* .project-detail > .row:first-child {
  color: #aaa;
} */

.project_label {
  display: block;
  font-weight: bold;
  margin-top: 2rem;
}

.ringing{
  color: #44D52A
}

.no-ringing{
  color: #3368FF;
}

.table-hover-row{
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

#history-container{
  max-height: 500px; /* same as map */
  overflow-y: scroll;
}

.history-marker {
  cursor: pointer;
}

.select2-selection__rendered {
  line-height: 38px !important;
  padding-left: 15px !important;
}

.select2-container .select2-selection--single {
  height: 40px !important;
}

.select2-selection__arrow {
  height: 37px !important;
}

.select2-container--default .select2-selection--single {
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.select2-results__options {
  max-height: 350px !important;
}

.select2-results__options span small {
  color: #666;
}

.select2-results__option {
  padding: 10px 15px;
}

.bootstrap-table .clearfix .pagination-detail {
  display: none;
}

.editposition {
  width: 48px;
  height: 48px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 2px solid rgba(0,0,0,0.2);
  background-clip: padding-box;
  font-size: 1rem;
  cursor: pointer;
}

.editposition:hover {
  background: #f3f3f3;
}

.editposition.active {
  color: orange;
}

.long-tooltip {
  width: 500px;
}

.long-tooltip  .tooltip-inner {
  max-width: 100%;
}

@media (max-width: 767px) {
  .history-wrapper {
    flex-direction: column-reverse;
  }

}