/*  --------------------------
 *	Helpers CSS
 *  -------------------------- */

.relative { position: relative; }

.uc { text-transform: uppercase; }

.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }


.color-green { color: #00A248 !important; }
.color-black { color: #252021 !important; }
.color-white { color: #ffffff !important; }
.color-red   { color: #c80b0e !important; }

.color-green a { color: #00A248; }

.bg-green { background-color: #00A248; }
.bg-red { background-color: #c90c0f; }
.bg-grey { background-color: #eee; }
.bg-lightgreen { background-color: #0bfa77; }

.bt { border-top: 2px dashed rgba(0,0,0,.125); border-top: 1px solid #ddd; }
.bb { border-bottom: 2px dashed rgba(0,0,0,.125); border-bottom: 1px solid #ddd; }
.bl { border-left: 1px solid #ddd; }
.br { border-right: 1px solid #ddd; }

.img-gow {
	display: inline-block;
	width: 100%;
	padding-bottom: 75%;
	background-size: cover;
	background-position: center;
	background-color: #ccc;
}


/*  --------------------------
 *	Composant
 *  -------------------------- */

/* Boutons */

.btn-border { border-width: 2px; }


.btn-green { background-color: #009847; border-color: #009847; color: #fff; }
.btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active { background-color: #007f3b; border-color: #00652f; color: #fff; }
.btn-green.disabled:hover, .btn-green.disabled:focus, .btn-green.disabled:active, .btn-green.disabled.active, .btn-green[disabled]:hover, .btn-green[disabled]:focus, .btn-green[disabled]:active, .btn-green[disabled].active, fieldset[disabled] .btn-green:hover, fieldset[disabled] .btn-green:focus, fieldset[disabled] .btn-green:active, fieldset[disabled] .btn-green.active { background-color: #009847; border-color: #009847; color: #fff; }

.btn-outline-green { color: #009847; background-color: transparent; background-image: none; border-color: #009847; }
.btn-outline-green:hover { color: #fff; background-color: #009847; border-color: #009847; }
.btn-outline-green:focus, .btn-outline-green.focus { box-shadow: 0 0 0 0.2rem rgba(0,152,71, 0.5); }
.btn-outline-green.disabled, .btn-outline-green:disabled { color: #009847; background-color: transparent; }
.btn-outline-green:not([disabled]):not(.disabled):active, .btn-outline-green:not([disabled]):not(.disabled).active, .show > .btn-outline-green.dropdown-toggle { color: #212529; background-color: #009847; border-color: #009847; box-shadow: 0 0 0 0.2rem rgba(0,152,71, 0.5); }


.btn-red { background-color: #c90c0f; border-color: #c90c0f; color: #fff; }
.btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red.active { background-color: #b10b0d; border-color: #99090b; color: #fff }
.btn-red.disabled:hover, .btn-red.disabled:focus, .btn-red.disabled:active, .btn-red.disabled.active, .btn-red[disabled]:hover, .btn-red[disabled]:focus, .btn-red[disabled]:active, .btn-red[disabled].active, fieldset[disabled] .btn-red:hover, fieldset[disabled] .btn-red:focus, fieldset[disabled] .btn-red:active, fieldset[disabled] .btn-red.active { background-color: #c90c0f; border-color: #c90c0f; color: #fff }

.btn-outline-red { color: #c90c0f; background-color: transparent; background-image: none; border-color: #c90c0f; }
.btn-outline-red:hover { color: #fff; background-color: #c90c0f; border-color: #c90c0f; }
.btn-outline-red:focus, .btn-outline-red.focus { box-shadow: 0 0 0 0.2rem rgba(201,12,15, 0.5); }
.btn-outline-red.disabled, .btn-outline-red:disabled { color: #c90c0f; background-color: transparent; }
.btn-outline-red:not([disabled]):not(.disabled):active, .btn-outline-red:not([disabled]):not(.disabled).active, .show > .btn-outline-red.dropdown-toggle { color: #212529; background-color: #c90c0f; border-color: #c90c0f; box-shadow: 0 0 0 0.2rem rgba(201,12,15, 0.5); }



/* Bootstrap addOns */

.badge-green { background-color: #00A248; color: #fff; }

.custom-control-input:checked~.custom-control-label::before { border-color: #00A248; background-color: #00A248; }


/*  --------------------------
 *	Layout
 *  -------------------------- */

#app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background-color: #111; box-shadow: 0 0 5px #555; }
#app-header .nav-logo img { height: 50px; }

#app-wrapper { margin-top: 66px; }



/*  --------------------------
 *	Screens
 *  -------------------------- */

/* Dashboard */

#dashboard-stats { }
#dashboard-stats .number { font-size: 30px; display: block; }
#dashboard-stats .label { font-size: 11px; }

.list-group-nav .list-group-item { margin-bottom: 0; border: none; border-bottom: 1px dashed rgba(0,0,0,.125); }
.list-group-nav .list-group-item:first-child { border-radius: 0; }
.list-group-nav .list-group-item:last-child { border-radius: 0; border-bottom: none !important; }
.list-group-nav .list-group-item i { color: #00A248; }
.list-group-nav .list-group-item span.pl-2 { font-size: 1.2em; position: relative; top: -5px; }

.list-group-nav .list-group-item.disabled { background-color: #f8f9fa; }
.list-group-nav .list-group-item.disabled i { color: #6c757d; }



/* Account */

#account-stats .number { font-size: 30px; display: block; }
#account-stats .label { font-size: 11px; }

#account-details .list-group-item { margin-bottom: 0; border: none; border-bottom: 1px dashed rgba(0,0,0,.125); }
#account-details .list-group-item:first-child { border-radius: 0; }
#account-details .list-group-item:last-child { border-radius: 0; border-bottom: none; }




/* Locate */
/*
 * .locate-marker-title { display:inline-block; width: 19px; height: 19px; position: relative; top: 4px; border-radius: 10px; border: 2px solid rgba(0,162,72,0.8); background-color: rgba(0,162,72,0.3); color: #00A248; }
 * .locate-marker-title i { font-size: 11px; position: relative; top: -6px; }
 */
.locate-marker-title { display: inline-block; text-align: center; width: 40px; height: 40px; border-radius: 20px; border: 2px solid rgba(0,162,72,0.8); background-color: rgba(0,162,72,0.3); color: #00A248; }
.locate-marker-title i { font-size: 20px; position: relative; top: 7px; }
.locate-map { background-color: #ccc; }

.acuracy-warning { border-radius: 0; border: none; color: #fff; background-color: #f15050; }

#locate-position:active { background-color: #eee; }
#search-position:active { background-color: #eee; }


/* .locate-icon div { position: relative; left: -7px; top: -29px; } */

.locate-icon div { width: 30px; height: 30px; text-align: center; position: relative; border-radius: 15px; background-color: rgba(255,255,255,0.3);  }
.locate-icon-valid div svg { position: relative; top: 3px; }
.locate-icon-error div svg { position: relative; top: 5px; }
.locate-icon-valid div { /*left: -4px; top: -5px;*/ border: 3px solid #212529; color: #212529; }
.locate-icon-error div { /*left: -2px; top: -3px;*/ border: 1px solid #6c757d; color: #6c757d; }

.pulse {
	animation: pulsate 1s ease-out;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite;
	opacity: 0.0
}
@keyframes pulsate {
	0% {transform: opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {transform: opacity: 0.0;}
}
.fade-out {
	animation: fadeOut 3s ease-out;
	-webkit-animation: fadeOut 3s ease-out;
	-webkit-animation-iteration-count: 1;
	opacity: 0.0
}
@keyframes fadeOut {
	0% {opacity: 1.0;}
	100% {opacity: 0.0;}
}



.fa-blink {
	-webkit-animation: fa-blink .75s linear infinite;
	-moz-animation: fa-blink .75s linear infinite;
	-ms-animation: fa-blink .75s linear infinite;
	-o-animation: fa-blink .75s linear infinite;
	animation: fa-blink .75s linear infinite;
}
@keyframes fa-blink {
	0% { opacity: 1; }
	25% { opacity: 0.25; }
	50% { opacity: 0.5; }
	75% { opacity: 0.75; }
	100% { opacity: 0; }
}


.map-overlay { top: 0; right: 0; bottom: 0; left: 0; }

.marker-icon div { width: 25px; height: 25px; position: relative; left: -4px; top: -5px; border-radius: 15px; border: 1.5px solid #fff; }
.marker-icon.status-visited div { background-color: rgba(23, 162, 184, 0.8); }
.marker-icon.status-new div { background-color: rgba(255, 193, 7, 0.8); }
.marker-icon.status-lost div { background-color: rgba(220, 53, 69, 0.8); }

/* .marker-sm div { width: 20px; height: 20px; left: -4px; top: -7px; border-radius: 10px; border: 1.5px solid #fff; } */

.marker-lg div { width: 50px; height: 50px; left: -18px; top: -23px; border-radius: 25px; border: 1.5px solid #fff; }






/* Visites */
.visit-list .list-group { border-top: 1px dashed rgba(0,0,0,.125); }
.visit-list .list-group-item { margin-bottom: 0; border: none; border-bottom: 1px dashed rgba(0,0,0,.125); }
.visit-list .list-group-item:first-child { border-radius: 0; }
.visit-list .list-group-item:last-child { border-radius: 0; }

#visit-details .list-group-item { margin-bottom: 0; border: none; border-bottom: 1px dashed rgba(0,0,0,.125); }
#visit-details .list-group-item:first-child { border-radius: 0; }
#visit-details .list-group-item:last-child { border-radius: 0; }



/* Pond */

.pond-list .list-group-item { margin-bottom: 0; border: none; border-bottom: 1px dashed rgba(0,0,0,.125); }
.pond-list .list-group-item:first-child { border-radius: 0; }
.pond-list .list-group-item:last-child { border-radius: 0; border-bottom: none; }

.badge-warning { color: #fff; }
.badge-lg { font-size: 18px; padding: 8px 10px; }
.badge-md { font-size: 14px; padding: 5px 8px; }






/* Formulaire visites */
.list-nav-accordion .list-group-item { margin-bottom: 0; border: none; border-bottom: 1px solid #ddd; border-radius: 0; }

.form-section>div { border-top: 1px dashed rgba(0,0,0,.125); }
.form-section>div:first-child { border-top: none; }

.is-required .control-label:after { content: ' *'; color: #00A248; font-weight: 700; }
label.is-required:after { content: ' *'; color: #00A248; font-weight: 600 }