/* Layout */

:root
{
	--violet: #555F79;
	--vertclair:  #9FC757;
	--rouge:  #E84820;
	--gris:  #BABABA;
	--grisPale:  #f1f5f9;
	--blanc:  #fff;
	--rougeClair : #EC5453;
	--vert: #28C66F;
	--jaune: #FEC45F;
	--bleu : #0099E0;
	--rose:  #FE5379;
	--orange:  #FE9249;
	--bleuCiel:  #128886;
	--font : 'Poppins', sans-serif;
	--border: #dfdfdf;
}

.text-capitalize
{
	text-transform: capitalize;
}

.bg-gris
{
	background-color: var(--gris);
}

.bg-jaune
{
	background-color: var(--jaune);
}

.bg-grisPale
{
	background-color: var(--grisPale);
	border-radius: 10px;
}

body
{
	font-family: var(--font) !important;
	color:  var(--violet) !important;
	font-size: 14px;
	font-weight:  400;
}

h1
{
	
	font-weight: 400 !important;
}
b, strong, .bold
{
	font-weight:  500;
}
.front-header
{
	text-align: center;
	padding:  1em;

	color:  #fff;
} 
.mt--5 {
	margin-top: -5px !important;
}
.admin-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--blanc);
	color:  #fff;
	border-radius: 10px;
} 

.front-footer
{
	text-align: center;
	padding:  1em;
	margin-top: 50px;
	bottom: 0px;
	background-color: #0954deba;
	color:  #fff;
	width:  100%;
}


.admin-footer
{
	text-align: center;
	padding:  1em;

	background-color: #0954deba;
	color:  #fff;
	width:  100%;
}

.content-body 
{
    display: flex;
}

.left_menu {
    background: #fff;
    min-height: 100%;
    position:  relative;
    min-height: 95vh;
    width: 12vw;
}

.content-admin
{
	flex:  10;
	background-color: var(--grisPale);
	position:  relative;
}

#admin .container
{
	margin-left:  0!important;
}

.badge 
{
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
}

#menu
{
	padding-left: 0px !important;
}

#menu .item 
{
	list-style-type: none;
	line-height: 42px;
	padding:  2px 15px;
}

#menu .item a, a
{
    color: var(--violet);
    text-decoration: none;
}

a:hover{
	color:  var(--violet) !important;
}

#menu .item.active 	a 
{
	color: #fff;
}

#menu .item.active 	a i
{
	color: #fff;
}

#menu .item:hover a i, #menu .item:hover a {
	color:  var(--blanc) !important;
}



#menu .item.active, #menu .item:hover 
{
    background-color: var(--bleu);
    border-radius:  5px;

}

/** Fin layout */


/* Formualire de connexion */

.form-connexion .card-title
{
	text-align: center;
}
/* Fin formulaire de connexion */



.bloc {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;

}

.card-accueil
{
	animation: transform .300s ease-in;
}

.card-accueil:hover
{

	cursor:  pointer;
}


p.data-card 
{
    font-size: 35px;
    font-weight: 500;
}

.bg-icon i {
    font-size: 4em;
    font-weight:  400;
}

.bg-icon.center 
{
    margin: 0 auto;
}

.bg-icon 
{
    background: var(--grisPale);
    border-radius: 20px;
    height: 94px;
    width: 94px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-right:  10px;
}

.bg-icon-small
{
	height: 52px;
	width: 52px;
	border-radius:  10px;
}

.btn-off
{
	border-radius: 10px;
	background: #e848201a;
	height: 42px;
	width:  42px;
	align-items: center;
    display: flex;
    justify-content: center;

}

.btn-off i 
{
	color:  var(--rouge);
	font-size:  22px;
	padding-top:  3px;
}

.text-vert
{
	color:  var(--vert);
}

.text-vertclair
{
	color:  var(--vertclair);
}

.bg-vertclair
{
	background-color: var(--vertclair);
}

.bg-vert
{
	background-color: var(--vert);
}


.text-rouge {
	color:  var(--rouge);
}

.bg-rouge {
	background: var(--rouge);
}

.text-bleu {
	color:  var(--bleu);
}

.text-bleuCiel {
	color:  var(--bleuCiel);
}

.text-rose {
	color:  var(--rose);
}

.user-profil 
{
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: var(--grisPale);
    overflow: hidden;
}

#commandHome_info, #commandHome_length, #commandHome_filter, #commandHome .buttons-colvis, #commandHome_wrapper .dt-buttons, .dataTables_info
{
	display: none;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: var(--violet) !important;
}
.dataTable td, .dataTable tr 
{
	background: none !important;
}
table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid var(--grisPale) !important;
    border-top: 1px solid var(--grisPale) !important;
}
table.dataTable thead th, table.dataTable tfoot th
{
	font-weight: 500 !important;
}

table.dataTable.display tbody tr td
{
	box-shadow: none !important;
}

table.dataTable.no-footer, table.dataTable thead th
{
	border-bottom:  solid 1px var(--grisPale) !important;
	border-color:  var(--grisPale) !important;
	padding-top: 15px;
}

table.dataTable.display tbody td
{
	border-color:  var(--grisPale) !important;
}

table.dataTable thead
{
	margin-top: 30px !important;
}
.select2-container--default .select2-selection--single {
    border: 1px solid var(--border) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--vertclair) !important;
}
#admin .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background-color: var(--bleu) !important;
	color:  var(--blanc) !important;
}

#admin .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	color:  var(--blanc) !important;
}
#admin .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, #admin .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	color:  var(--gris) !important;
}

#admin .dataTables_wrapper .dataTables_paginate .paginate_button:hover
{
	color:  var(--vertclair) !important;
}
.form-control {
    font-size: 14px !important;
    color: var(--violet) !important;
    border: 1px solid var(--border);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px !important;
    color: var(--violet) !important;
}
.select2-dropdown, .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border) !important;
}
:focus-visible {
    outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 33px !important;
}
table.dataTable i
{
	font-size: 22px !important;
}

.dt-buttons {
    float: left !important;
}

div#usersList_filter {
    float: right !important;
}


.dataTables_paginate
{
	margin-top: 15px;
	margin-bottom: 5px;
}

.paginate_button, .buttons-colvis
{
	font-size:  14px !important;
	border: 1px solid var(--border) !important;
    background: var(--blanc) !important;
    margin-left:  0px !important;
}

.buttons-colvis {
    padding: 6px 10px 0px 10px !important;
    border-radius: 10px;
}

.dataTables_length label
{
	margin-right:  10px !important;
	border-radius:  10px !important;
}

.buttons-colvis .dt-down-arrow
{
	display: none;
}

.paginate_button.previous, 
{
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;

	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}

.paginate_button.next
{
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;

	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}

.btn-check:active+.btn-success, .btn-check:checked+.btn-success, .btn-success.active, .btn-success:active, .show>.btn-success.dropdown-toggle {
    background-color: var(--vertclair) !important;
    border-color: var(--vertclair) !important;
}
.btn-check:active+.btn-success:focus, .btn-check:checked+.btn-success:focus, .btn-success.active:focus, .btn-success:active:focus, .show>.btn-success.dropdown-toggle:focus {
    box-shadow: none !important;
}
.btn-danger:hover 
{
	background: var(--rouge);
	color:  var(--blanc) !important;
	border-color:  transparent; !important;
}
.btn-danger {
    color: #fff;
    background-color: var(--rouge);
    border-color: var(--rouge);
}

.btn-success, .btn-success:hover, .btn-success:focus
{
	background-color: var(--bleu) !important;
    border-color: var(--bleu);
    color:  #fff !important;
}

.btn-bleu, .btn-bleu:hover
{
	background-color: var(--bleu);
    border-color: var(--bleu);
    color:  #fff !important;
}
.btn-gris, .btn-gris:hover
{
	background-color: var(--gris);
    border-color: var(--gris);
    color:  #fff !important;
}
.btn
{
	border-radius:  5px;
	padding:  7px 25px !important;
	font-size: 14px;
}

.btn i
{
	vertical-align: sub;
	font-size:  22px !important;
}

.front a 
{
	color:  #BA5B9E;
}

h2 
{
    color: var(--bleu);
    font-size: 18px;
}

div[role="menu"] {
    border: 0;
    box-shadow: 0px 0px 20px #00000014;
    padding: 10px 15px;
    width: 10vw;
    position: absolute;
    background: #fff;
    z-index: 9;
    border-radius:  10px;
}

.dt-button-collection 
{
    margin-top: 5px !important;
}

button.dt-button.buttons-columnVisibility.active 
{
	color:  var(--violet) !important;
}

button.dt-button.buttons-columnVisibility 
{
    display: block;
    background: none;
    border: none;
    color:  var(--rougeClair);
}

tr.bannis 
{
    color: var(--rougeClair) !important;
}

.form-group 
{
    margin-top: 15px;
}

.pointer:hover {
	cursor:  pointer;
}

.card-header {
    background: var(--grisPale);
    padding: 20px;
    text-align: center;
}

.left_menu i {
    font-size: 22px;
    color: var(--gris);
}

.bx-small 
{
	font-size:  20px;
}

a.dropdown-item {
	font-size:  14px;
	color:  var(--violet);
	padding: 7px 15px;
}

.dropdown-menu
{
	box-shadow: 0px 0px 20px #0000001c;
	border: none;
	border-radius:  10px;

}
.dropdown-item {
    padding: 7px 5px;
}
.dropdown-item i
{
	vertical-align: middle;
}
table.trajet-single-table thead th
{
	border:  solid 1px #dfdfdf;
	border-bottom:  none;
}
table.trajet-single-table tbody td {
	border:  solid 1px #dfdfdf;
}
table.trajet-single-table thead th,table.trajet-single-table tbody td {
	    padding: 5px;
}
table.trajet-single-table thead {
    background-color: var(--grisPale);
}

ul {
	list-style-type: none;
}
table.trajet-single-table {
    text-align: center;
}
.trajet-single-table th {
    font-weight: 500;
}
.single-img
{
	border-radius:  120px;
	height: 120px;
	width:  120px;
	overflow: hidden;

}

.header-modal-single 
{
	font-size: 14px;
    font-weight: 400;
}
.header-modal-single h1
{
	font-size:  25px;
}


.d-flex.equal div
{
	flex:  1;
}

.crop-box{max-height: 50vh;}

ul.list-stat-provenance li span 
{
    color: var(--bleuCiel);
    font-weight: 600;
    float: right;
}

ul.list-stat-provenance {
    margin-top: 15px;
    padding-left: 0;
    padding-right: 30px;
}

label.active {
    background: var(--vertclair);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}

label
{
	padding:  5px;
}


.modal-header
{
	border-bottom:  none;
}
.modal-footer {
    justify-content: space-between;
}
.bx-xl
{
	font-size:  65px;
}

.ban-modal-gris, .modal-content
{
	border-radius:  10px;
}


.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #dfdfdf !important;
    margin-left: 10px !important;
    padding: 7px !important;
    color: var(--violet);
}
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border) !important;
    color: var(--violet);
    border-radius: 10px !important;
}
table.dataTable thead th, table.dataTable thead td {
    padding: 15px 10px !important;
}
table.dataTable tbody th, table.dataTable tbody td {
    padding: 12px 10px !important;
    border-bottom: 1px solid var(--grisPale) !important;
}

button.dt-button.buttons-columnVisibility {
    padding: 5px !important;
}

/* Page de connexion */
#SeConnecter .front-header, #SeConnecter .front-footer, #Sinscrire .front-header, #Sinscrire .front-footer, #Motdepasseoublie .front-header, #Motdepasseoublie .front-footer
{
	display:  none;
}
.form-connexion {
    background: url(/assets/images/img-connexion.jpeg);
    min-height: 100vh;
}

.form-connexion .bloc {
	height: 100vh;
	margin: 0;
	border-radius:  0;
	padding-left: 40px !important;
    padding-right: 40px !important;
}

/* Général */
hr {
    color: var(--border) !important;
}
.br0 {
	border-radius: 0 !important;
}
.mr--15 {
	margin-right: -15px !important;
}
.ml--15 {
	margin-left: -15px !important;
}
.bg-white {
    border-radius: 10px;
}
.fs-35 {
	font-size: 35px !important;
}
.w-10 {
	width: 10% !important;
}
.w-40 {
	width: 40% !important;
}
.w-90 {
	width: 19% !important;
}
.br-1 {
	border-right: 1px solid var(--border);
}
/* BTN  */
.btn-primary, .btn-primary:hover {
    color: #fff;
    background-color: var(--vertclair) !important;
    border-color: var(--vertclair) !important;
}
.btn-secondary, .btn-secondary {
    color: #fff;
    background-color: var(--rougeClair) !important;
    border-color: var(--rougeClair) !important;
}
.btn-check:focus+.btn, .btn:focus {
    box-shadow: none;
}
/* Icone vison datatable */
i.bx.bx-low-vision {
    font-size: 18px !important;
    color: var(--violet);
}
/* Bouton fermer modal (on peut pas modifier la couleur car c'est une image en svg comme background) */
.modal-content .btn-close {
    position: absolute;
    right: 20px;
    top: 15px;
}
/* Modal - Utilisateur - Voir */
.header-modal-single .bx-phone-call {
    font-size: 27px !important;
    line-height: 31px;
    vertical-align: sub;
    margin-top: 6px;
}
.bg-grisPale .bx-map-pin, .bg-grisPale .bx-gift, .bg-grisPale .bx-mail-send, .trajets .bx-map-pin, .trajets .bx-gift, .trajets .bx-mail-send {
    font-size: 22px;
    vertical-align: sub;
    color: var(--gris);
    margin-right: 13px !important;
}

/* Alert */
.alert-success {
    color: var(--violet);
    background-color: var(--grisPale);
    border-color: var(--vertclair);
}
/* CropBox  */
.crop-size {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: center;
}
.crop-size button .bx-minus {
    background: var(--rougeClair);
    color: #fff;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    line-height: 40px;
    font-size: 29px !important;
    padding-left: 0px;
}
.crop-size button .bx-plus {
    background: var(--vertclair);
    color: #fff;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    line-height: 40px;
    font-size: 29px !important;
    padding-left: 2px;
}
#carre, #paysage, #portrait {
    border: 0;
    background: #fff;
    display: inline-grid;
}
#carre i, #paysage i, #portrait i {
    font-size: 45px;
    color: var(--violet);
}
#image-zoomin-button {
    padding: 0 !important;
    margin-right: 10px;
    margin-top: 14px;
}
#image-zoomout-button {
    padding: 0 !important;
    margin-right: 50px;
    margin-top: 14px;
}
/* Statistiques */
.titre-bg-stat {
    width: 100%;
    background: #f2f4f6;
    padding: 6px 19px;
}


.itineraire-single-trajet {
    flex-direction: column;
    display: flex;
    justify-content: space-between;
}


@media (min-width: 1400px)
{
	#admin .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl 
	{
    	max-width: 1900px;
	}
}