/**
 * Style général
 * 
 *
 *
 */

body{
	font-family: Oswald, Arial;
	display:flex;
	min-height:100vh;	
	flex-wrap: wrap;
	align-content: flex-start;
}

/**
 *	Scroolbar
 *	
 *	
 */
 
/* width */
::-webkit-scrollbar {
  width: 14px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
  /* margin-top:35px; */
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/**
 *	Header
 *	
 *	
 */
body > header{
	width:100%;
	display:flex;
	justify-content: space-between;
	align-items: center;
	background:#1D212A;
	color:#fff;
	border-bottom:1px solid #A5A6AA;
	height:80px;
}

body > header > *{
	padding:0 40px;
}
body > header > img{
	max-height:90px;
}
/* svg > path{ */
	/* fill:#fff; */
/* } */
body > header > p{
	display: flex;
	align-items: center;
}
body > header > p > select{
	margin: 0 10px 0 0;
}
body > header > p > a{
	font-size: 0;
	text-decoration: none;
}
body > header > p > a:before{
	font-family: 'icomoon';
	content: "\e908";
	color: #ffffff;
	font-size: 25px;
	margin: 0 0 0 10px;
	text-decoration: none;
}
body > header > p > a:hover:before{
	color: #0489B1;
	/* font-size: 25px; */
}

/**
 *	Contenu
 *	
 *	
 */
body > section{
	width:calc(100% - 70px);
}
body > section > header{
	width:100%;
	background:#E5E5E5;
	display:flex;
	min-height: 40px;
	align-items: center;
}
body > section > header .logo{
	max-height:63px;
}
body > section > div{
	display:flex;
    flex-wrap: wrap;
	position:relative;
}
body.index > section > div{
    align-items: center;
    justify-content: space-between;
}

h1,h2{
	text-transform:uppercase;
	font-weight:normal;
	margin: 0;
}
h2{
	margin-bottom:10px;
}
h2::after{
	content:"";
	background:#0489B1;
	width:50px;
	display:block;
	height:5px;
}
h2 > a{
	text-decoration:none;
	color:#0489B1;
	transition: all .2s ease-in-out;
}
h2 > a:hover{
	color:#036B89;
	font-size:1.7rem;
	/* font-weight:bold; */
}
h3,h4{
	font-weight:normal;
}

input[type="submit"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"]{
	padding:10px 20px;
	border-radius:5px;
	border:0 none;
	box-sizing: border-box;
}

input[type="submit"]{
	background:#9A9A9A;
	padding:10px 30px;
}
input[type="file"].up{
	cursor:pointer;
	font-size:0;
	display:flex;
	width:45px;
	position:relative;	
	border: 2px dashed #0389B1;
    background: #0389b145;
    color: #0389B1;
    border-radius: 5px;
	height:30px;
}
input[type="file"].up:hover{
	background:#00b1e545;
}
/* input[type="file"].up::before{ */
	/* content:"e"; */
	/* content: attr("data-type_doc") " "; */
	/* font-size:14px; */
	/* position:absolute; */
	/* left:6px; */
	/* top:4px; */
	/* text-transform:uppercase; */
/* } */
/* [data-type_doc]::before{ */
	/* content: attr(data-type_doc); */
/* } */

input[type="file"].up::after{
	font-family: 'icomoon';
    content: "\e961";
	font-size:16px;
	position:absolute;
	right:14px;
	top:7px;
}
input[type="file"].up::file-selector-button{
	display:none;
}


/* Mise en forme */
.col-5{width:5%}
.col-10{width:10%}
.col-15{width:15%}
.col-20{width:20%}
.col-25{width:25%}
.col-28{width:28%}
.col-30{width:30%}
.col-33{width:33%}
.col-40{width:40%}
.col-45{width:45%}
.col-50{width:50%}
.col-60{width:60%}
.col-70{width:70%}
.col-77{width:77%}
.col-80{width:80%}
.col-90{width:90%}
.col-95{width:95%}
.col-100{width:100%}

.padding-10-30{padding: 10px 30px;}
.padding-0-10{padding: 0 10px}
.padding-0-30{padding: 0 30px}
.padding-30-10{padding: 30px 10px;}
.padding-50{padding: 50px;}
.padding-0-50{padding:0 50px;}
.padding-20-50{padding:20px 50px;}
.padding-left-50{padding-left:50px;}
.padding-right-50{padding-right:50px;}

.align-right{text-align:right}
.align-left{text-align:left}

.bg-black{
	background:#1D212A!important;
}

.border-green{
	border:1px solid green!important;
}

.flex{
	display:flex;
}
.wrap{
    flex-wrap: wrap;
}
.nowrap{
    flex-wrap: nowrap;
}
.gap{
    gap: 20px;
}
.gap10{
    gap: 10px;
}
.gap5{
    gap: 5px;
}
.alignflexstart{
	align-items: flex-start;
}
.alignitemscenter{
	align-items: center
}
.justifyspacebetween{
	justify-content: space-between
}
.gap.wrap > .col-50{width:49%}

.border-shadow{
	box-shadow: 0px 0px 5px 1px #b1b1b1;
    border-radius: 5px;
    padding: 15px;
}

.colorOrange{
	color:orange;
}
.colorRed{
	color:red;
}
.colorGreen{
	color:green;
}
pre.__debug{
	position:fixed;
	max-width:500px;
	box-shadow:0 0 10px 10px #3b3b3b70;
	background:#e9e9e9;
	z-index:999;
	right:50px;
	top:50px;
	padding:40px;
	border-radius:10px;
	font-family:system-ui;
	    max-height: 770px;
}
body pre.__debug:nth-of-type(1){
	top:0;
}
body pre.__debug:nth-of-type(2){
	top:100px;
}
body pre.__debug:nth-of-type(3){
	top:200px;
}
body pre.__debug:nth-of-type(4){
	top:300px;
}
body pre.__debug:nth-of-type(5){
	top:400px;
}
body pre.__debug:nth-of-type(6){
	top:500px;
}
body pre.__debug:nth-of-type(7){
	top:600px;
}
	
/*
 *	Navigation
 *	
 *	
 */
body > nav{
	width:70px;
	background:#1D212A;
	min-height: calc(100vh - 81px);
}
body > nav ul{
	list-style-type:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}
body > nav li{
	list-style-type:none;
	padding:0;
	margin:0;
	width:100%;
}
body > nav a{
	color:#fff;
	/* font-size:0; */
	height:65px;
	text-decoration:0 none;
	border-left:4px solid #1D212A;
	display:flex;
	align-items: center;
	justify-content: center;
}

body > nav ul.main > li > a{
	font-size:0;
}
body > nav li ul.sub{
	display:none;
}
body > nav li a::after{
	width: 50px;
	fill: #fff;
	font-size: 35px;
	text-align: center;
	font-family: 'icomoon';
}
body > nav li:hover a::after{
	fill: #d1ae78;
}
body > nav li.tableau-de-bord a::after{
	content:"\e92c";
}
body > nav li.carte a::after{
	content: "\e92e";
}
body > nav li.cotation a::after{
	content: "\e926";
}
body > nav li.client a::after{
	content: "\e925";
}
body > nav li.transport a::after{
	content: "\e928";
}
body > nav li.fournisseur a::after{
	content: "\e927";
}
body > nav li.user a::after{
	content: "\e924";
}
body > nav li.parametres a::after{
	content: "\e917";
}
body > nav li.qualiteclient a::after,
body > nav li.qualite a::after{
	content: "\e9d3";
}
body > nav li.vehicules-dispos a::after{
	content: "\e923";
}
body > nav li.action_comm a::after{
	content: "\e96d";
}
body > nav li.statistiques a::after{
	content: "\e99c";
}
body > nav li.iso a::after{
	content: "\e932";
}
body > nav li.consultation a::after{
	content: "\e9bc";
}
/**
 *	Exception
 */	
body.TYPE_USER_FIT > nav li.qualiteclient {
	display:none;
}

body > nav li:nth-child(0n+5) a::after{
	/* content: "\e902"; */
	/* color:#F23935; */
}
body > nav a.actif,
body > nav a:hover,
body > nav a:active{
	border-left:4px solid #0388B1;
	background:#2C323E
}
body > nav a.late:before{    
	content: "";
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background: black;
    position: absolute;
    right: 5px;
    top: 5px;
	background:#FF0000;
}

/**
 * Details
 * Spécificité
 *
 */
 .detail .lien-user{
	display:none;
 }
 .index a[data-open=popup-fiche-contact]{
	display:none;
 }
 

 
/*
 *	Footer
 *	
 *	
 */
body > footer{
	width:100%;
}


/*
 *	Alerte
 *	
 *	
 */
.box-alert{
	position:fixed;
	top:-60px;
	right:30px;
	border-radius:5px;
	color:#fff;
	padding:0 30px;
	box-shadow: #242424 0px 0px 20px;
	display:none;
	z-index:1003
}
.box-alert.bad{
	background:red;
}
.box-alert.succes{
	background:green;
	color:#fff;
}
.box-alert.warning{
	background:orange;
}

/*
 *	Cabotage
 *	
 *	
 */
.bt.cabotage{
	background:#FF0000;
   animation-duration: 2.5s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
.bt.cabotage:hover{
	background:#CE0000;
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

#cabotage {
	width:100%;
}
#cabotage .html > a {
	display:block;
	color:#000;
	text-decoration:none;
}
#cabotage .html > a:hover {
	text-decoration:underline;
}
#cabotage .action{
	width:150px;
}
#cabotage .action > div{
	flex-wrap:wrap;
}
#cabotage .action .form_cabotage{
	display:none;
}
#cabotage .action .form_cabotage > input[type=submit]{
	padding: 3px 10px;
    margin-left: 5px;
}

/**
 *
 * Colonne gauche
 *
 */

p.breves{
	color: #e62b60;
	font-weight: bold;
	text-decoration: underline;
	padding-left: 30px;
	display: inline-block;
	margin:0;
}
p.breves+p{
	padding-left: 10px;
	display: inline-block;
	margin:0;
}
p.breves:before{color: #ffffff;
	content: "!";
	background: #e62b60;
	border-radius: 50%;
	padding: 0 10px 0 10px;
	margin: 0 5px 0 0;
}
/*tableau*/
table {
	width: 100%;
	border-collapse: collapse;
	border-radius: 0.5em;
	/* overflow: hidden; */
}
/*thead*/
table thead, tbody { 
	font-size: 14px;
}
table thead {
	background: #1D212A;
}
table thead tr th{
	height: 35px;
	color: #ffffff;
	font-weight: 400;
	text-align: center;
	padding: 0 10px;
	border: 1px solid #000;
}
/*tbody*/
table tbody {
	max-height: 90%;       
	overflow-y: auto;    
	overflow-x: hidden;  
}
table tbody tr{
	border:1px solid  #dcdcdc;
}

table tbody tr[data-actif="0"]{
	background:#e7e7e7;
}
table tbody tr.Blacklist{
	border:2px solid red;
}
table tbody tr[data-scroll_id]{
	background:#eee;
}
table tbody tr td{
	border: solid 1px #dcdcdc;
	text-align: center;
	padding:3px;
}
table tbody tr td.rich_id,
table tbody tr td.id{
	width:104px;
	
}
table tbody tr td.commentaire {
	max-width:250px;
	overflow:hidden;
}
table tbody tr td > span{
	display:block;
}
table tbody tr:last-child{
	border-radius: 0 0 0.5em 0.5em;
}
table tbody tr:last-child td:first-child{
	border-radius: 0 0 0em 0.5em;
	overflow: hidden;
}
table tbody tr:last-child td:last-child{
	border-radius: 0 0 0.5em 0em;
}
table tbody tr td.align-left{
	text-align: left;
}
table tbody tr td.action{
	width: 100px;
}
table tbody tr td.action .lds-ripple {
	margin: 0;
    position: absolute;
    z-index: 4;
}
table tbody tr td.action > div{
	display:flex;
	justify-content: center;
}
table tbody tr td.action > div > a{
	margin:0 5px;
	z-index:2;
}
table tbody tr td.upload_file {
	/* padding:5px 10px; */
	padding:5px 0;
	width:135px;
}
table tbody tr td.upload_file > * {
	width:100%;
	text-decoration:none;
}
table tbody tr td.moyenne,
table tbody tr td.total{
	background:#c3c3c3;
}
a.bad,
table tbody tr td.upload_file > a.date.bad {
	color:red;
}
a.succes,
div.succes,
table tbody tr td.upload_file > a.date.succes {
	color:green;
}
a.warning,
table tbody tr td.upload_file > a.date.warning {
	color:orange;
}
a.puce,
table tbody tr td.upload_file > span ,
table tbody tr td.upload_file > a.puce{
	content: "";
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: black;
	margin:3px auto;
	display:block;
}
a.puce.bad,
table tbody tr td.upload_file > a.puce.bad  {
    background: red;
}
a.puce.default,
table tbody tr td.upload_file > span ,
table tbody tr td.upload_file > a.puce.default {
    background: #555;
}
a.puce.succes,
table tbody tr td.upload_file > a.puce.succes {
    background: green;
}
table tbody tr td.upload_file > input[type="file"]{
	    margin: 12px auto
}
/*table tbody tr td.upload_file > input[type="file"]{
	border: 2px dashed #c1c1c1;
	width: calc(100% - 20px);
	height: 18px;
    cursor: pointer;
    font-size: 0;
	margin-bottom:2px;
}*/
table tbody tr td.upload_file > input[type="file"] + div{
	display:none;
}
table tbody tr td.action > div > input[type="file"]{
	position: absolute;
    border: 2px dashed #c1c1c1;
    width: 102px;
    left: 115px;
    height: calc(100% - 10px);
    top: 3px;
    margin: 0;
    padding: 0;
    z-index: 1;
    cursor: pointer;
    font-size: 0;
    display: flex;
    align-content: center;
    justify-content: flex-end;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
/* table tbody tr td.upload_file > input[type="file"]:after, */
table tbody tr td.action > div > input[type="file"]:after{
	/* content:"Déposer un fichier"; */
	font-size:12px;
	display: flex;
    align-content: center;
    justify-content: flex-end;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
/* table tbody tr td.upload_file > input[type="file"]:after{ */
	/* font-family: 'icomoon'; */
	/* content:"\e95e"; */
	/* font-size:14px; */
	/* color:#777777; */
	/* height:100%; */
	/* justify-content: center; */
/* } */
table tbody tr td.action > div > input[type="file"]::file-selector-button,
table tbody tr td.upload_file > input[type="file"]::file-selector-button{
	display:none;
}
table tbody tr td.action > div > input[type="file"].dragover,
table tbody tr td.action > div > input[type="file"]:hover,
table tbody tr td.upload_file > input[type="file"].dragover,
table tbody tr td.upload_file > input[type="file"]:hover{
	background:#0489b12e;
}

table tbody tr td.upload_file input[type="date"]{
	width:66%;
}
table tbody tr td.upload_file input[type="submit"]{
	padding: 2px 8px;
    border-radius: 2px;
    margin-left: 2px;
    font-size: 13px;
}

/**
 * Affichage calendrier
 *
 *
 *
 *
 */
 .calendar{
	/* display:flex; */
	/* flex-wrap: wrap; */
	min-height:calc(100vh - 212px); 
	overflow: auto;
 }
 .calendar td{
	padding:0; 
	text-align:left;
	height:20%;
	vertical-align:top;
	width:14%;
 }
 .calendar td.today{
	background:#01b3c091; 
 } 
 .calendar td.no-current{
	background:#f5f5f5; 
 } 
 .calendar td.no-current h3{
	color:#9b9b9b; 
 } 
 
 .calendar td > *{
	padding:5px;
 }
 .calendar td h3{
	text-align:right;
	margin:0;
	padding:0;
 }
 .calendar td > div{
     /* height: 100%; */
	 /* display:flex; */
	 /* flex-wrap: wrap; */
 }
 .calendar td a{
	color:#000;
	text-decoration:none;
	position:relative;
	margin-left:20px;
	font-size:.8rem;
	display: block;
 }
 .calendar td a:hover{
	color:#0489B1;
 }
 
 #calendar_search a.select-date{
	display: inline-flex;
	/* width: 30px; */
	/* height: 30px; */
	border-radius: 5px;
	background: #ffffff;
	border: 1px solid #D3D3D3;
	margin: 0 15px;
	text-decoration: none;
	color: #000000;
	align-items: center;
	justify-content: center;
	padding:7px;
}
 #calendar_search  a.select-date:hover{
	background:#F7F7F7;
}
#calendar_search a.select-date::after{
	font-family: 'icomoon';
	content:"\e90a";
}
#calendar_search a.select-date:first-child::after{
	transform: rotate(180deg);
}
 
 
/**
 * Véhicules Dispos
 *
 *
 */
#all-vehicules-dispo div{
	margin:0;
}
#all-vehicules-dispo > div{
	display:flex;
	align-items: baseline;
	margin:0;
}





/**
 * Filters
 *
 *
 */
.filters > form{
	display:flex;
	align-items: center;
	flex-wrap: wrap;
}
.filters > form div:not(.search-area){
	margin:0;
}
.filters > form > div{
	display:flex;
	align-items: center;
	flex-wrap: wrap;
}
.filters > form select,.filters > form input[type=tel], .filters > form textarea, form input[type=number], .filters > form input[type=color], .filters > form input[type=email], .filters > form input[type=date], .filters > form input[type=text],
.filters > form input,
.filters > form > *{
	width:auto;
}
.filters > form input[type=checkbox] + label, form input[type=radio] + label{
	padding: 4px 10px;
	background:#ffffff;
	border: 1px solid lightgrey;
	color:#6b6b6b
}

.filters > form input[type=checkbox] + label:after, 
.filters > form input[type=radio] + label:after{
	content:"";
	border-radius:50%;
	width:10px;
	height:10px;
	display:inline-block;
	background:#00000029;
	border:2px solid grey;
	margin-left:5px;
}
.filters > form input[type=checkbox] + label:hover:after, 
.filters > form input[type=radio] + label:hover:after,
.filters > form input[type=checkbox]:checked + label:after, 
.filters > form input[type=radio]:checked + label:after{
	background: #007381;
    border: 2px solid #007381;
}

.detail .filters{
	display:flex;
}
.detail .filters > *{
	margin:0 10px;
	
    display: flex;
    align-items: center;
}
.detail .filters > h3 > a{
	text-decoration:none;
	color:#000;
}
.detail .filters > h3 > a:hover{
	color:#898989;
}

.detail .filters > span{
	color:#0489B1;
	/* font-weight:bold; */
	font-size:1.1rem;
	text-transform:uppercase;
}
.retour{
	display:flex;
	align-items: center;    justify-content: flex-end;
}

/**
 * Style spécifique à les pages detail fournisseur et client
 * 
 *
 *
 */
 

body.client.detail .static_fields > p,
body.fournisseur.detail .static_fields > p{
	/* display:flex; */
}
body.client.detail .static_fields > p > input,
body.fournisseur.detail .static_fields > p > input{
	width:70%;
    max-width: initial;
}


/**
 * taille td
 */
.heure{
	
}
.statut{
	
}
.client{
	position:relative;
}
.client > a.icon-alert{
	position:absolute;
	right:2px;
	top:2px;
}
.client > a.icon-alert:before{
	font-size:9px;
	padding:4px;
}
.infos-table{
	min-width: 85px;	
}

h2 > span.red{
	color:red;
}


/**
 * pictos
 *
 *
 */
/* .infos-table .info-table:before{ */
	/* content: "\e902"; */
/* } */
/* .infos-table .note-table:before{ */
	/* content: "\e915"; */
/* } */
/* .infos-table .valid-table:before{ */
	/* content: "\e912"; */
/* } */
/* .infos-table .bloquer-table:before{ */
	/* content: "\e903"; */
/* } */
/* .infos-table .delete-bloquer-table:before{ */
	/* content: "\e907"; */
/* } */
/* .infos-table .ajouter-table:before{ */
	/* content: "\e913"; */
/* } */


/**
 * Générique
 *
 */
.etat-reserve{
	background:#F0C600!important;
}
.etat-reserve:hover{
	background:#FFE051!important;
}
.etat-dispo{
	background:#A6D330!important;
}
.etat-dispo:hover{
	background:#bbdf5e!important;
}
.etat-confirme{
	background:#FF7000!important;
}
.etat-confirme:hover{
	background:#cd5a00!important;
}
.etat-enattente{
	background:#F23935!important;
}
.etat-enattente:hover{
	background:#F4605B!important;
}
.etat-bloque{
	/* background:#5F6573!important; */
	
	cursor:context-menu!important;
}
.hide{
	visibility:hidden;
}

.display_none{
	display:none;
}

/**
 * Tooltip 
 */
.tooltip{
	position:relative;
	line-height:normal;
}
.tip{
	position:absolute;
	background:#0489B1;
	font-style:normal;
	padding:5px 10px;
	text-transform:uppercase;
	white-space: nowrap;
	z-index:1001;
	font-family: Oswald, Arial;	
	color: #fff;
	text-align:justify;
	box-shadow: 0px 0 7px #6e6e6e;
	border-radius:3px;
	font-size:1rem;
}
.tip::before{
	position:absolute;
	top:9px;
	content:"";
	width: 0;
    height: 0;    
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
	/* box-shadow: 0px 0 7px #6e6e6e; */
}

.tip.right{	
	/* left:135%; */
	left:110%;
}
.tip.right::before{
	left:-6px;    
    border-right: 8px solid #0489B1;
}

.tip.left{	
	right:135%;
}
.tip.left::before{
	right:-6px;    
    border-left: 8px solid #0489B1;
}



/**
 * Form
 *
 *
 */
 
select,
form select,
form input[type=tel],
form textarea,
form input[type=number],
form input[type=color],
form input[type=email],
form input[type=date],
form input[type=time],
form input[type=text]{
	border-radius: 5px;
	border: 1px solid lightgrey;	
	padding: 3px 7px;
	/* width:auto; */
	margin-right:4px;
	box-sizing: border-box; 
}

form input[type=color]{
	padding:2px;
	cursor:pointer;
}
form input[type=number]{
	width: 50px;
}
form textarea{
	width: 300px;
	height: 90px;
}

.bt,
form input[type=submit],
input[type=button]{
	background: #0489B1;
	color: #ffffff;
	text-align: center;
	/* width: 90px; */
	padding: 5px 15px;
	border-radius: 5px;
	border:0 none;
	text-decoration:none;
	transition: all .2s ease-in-out;
}

.bt.green,
.bt.send,
form input[type=submit].send{
	background: green;
}
.bt.red{
	background: #DC3912;
}

.bt:hover,
input[type=button]:hover,
input[type=submit]:hover{
	background:#059AC5;
}

.bt.green:hover,
.bt.send:hover,
input[type="submit"].send:hover{
	background:#009F00;
}
.bt.red:hover{
	background: #EF5F3A;
}


.bt.black{
	background:#000000;
}
.bt.black:hover{
	background:#383838!important;
}
.bt.exporter{
	 padding:0 10px;
}
.bt.exporter:hover{
	font-size:1.3rem;
}
.bt.exporter:after{
	 font-family: 'icomoon';
	 content:"\e960";
}
.bt.dl:before{
	 font-family: 'icomoon';
	 content:"\e960";
}
.bt.up:before{
	 font-family: 'icomoon';
	 content:"\e961";
}
form input[type=checkbox],
form input[type=radio]{
    opacity: 0;
    position: fixed;
    width: 0;
}
form input[type=date]{
    cursor: pointer;
}
form label{
	margin: 0 10px 0 0;
}
form input[type=checkbox] + label,
form input[type=radio] + label{
    display: flex;
	background-color: #dcdcdc;
	height: 25px;
	color: black;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
	align-items: center;
	justify-content: center;
	padding:5px 10px;
}
form input[type=checkbox] + label:hover,
form input[type=checkbox]:checked + label,
form input[type=radio] + label:hover,
form input[type=radio]:checked + label{
    background-color:#019dac;
    color: #ffffff;
}
form div{
	margin: 10px 0;
	/* display: flex; */
	/* flex-wrap: wrap; */
	/* align-items: center; */
}
/* select{ */
	/* color:#000; */
	/* border-radius: 5px; */
/* } */
form .bloc-auto-complete{
	position:relative;
}
form a.cancel{
	background: #ffffff;
	color: #0489B1;
	text-align: center;
	width: 90px;
	padding: 5px 15px;    
	border-radius: 5px;
}

input.confirmation{
	display:none;
}
form div.row-form input.confirmation + label{
	width:auto;
	font-family: Oswald, Arial!important;
    display: flex;
    align-items: center;
	cursor:pointer;
	
}
input.confirmation + label:before{
	font-family: 'icomoon';
	border-radius:5px;
	color:#2F2F2F;
    background-color: #dcdcdc;
	font-size: 24px;
    display: flex;
    position: relative;
    background-color: #dcdcdc;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    padding: 5px;
    justify-content: center;
	margin-right: 5px;
}
input.confirmation + label.email:before{
	content: "\e918";
}
input.confirmation + label.sms:before{
	content: "\e915";
}
input.confirmation:checked + label:before,
input.confirmation:hover + label:before{
	 background-color: #0489B1;
	 color:#fff;
}

/** 
 * Forms détails génériques
 *
 */

form.form_standard{
	box-shadow:0px 0px 5px 1px #b1b1b1;
	border-radius:5px;
	padding:15px;
	/* width:100%; */
    display: flex;
    flex-wrap: wrap;
	align-items: center;
}
form.form_standard > div.auto-content,
form.form_standard > *{
	width:60%;
	margin: 5px 0;
}
form.form_standard > h3{
	width:100%;
}
form.form_standard > span.label,
form.form_standard > label{
	width:35%;
	margin:0;
}
form.form_standard > label > span{
	font-size: .9rem;
}
form.form_standard > a{
	width: 32%;
}
form.form_standard > label.multiple,
form.form_standard > input[type=file]{
	width: 60%;
}
form.form_standard > a.icon-loupe{
	width: 5%;
}
form.form_standard > div{
	width:100%;
	margin:0;
}
form.form_standard > input[type=submit]{
	width: 32%;
	margin-right:10px;
}
form.form_standard .tox .tox-statusbar__right-container{
	display:none;
}
form.form_standard > label.multiple{
	border:2px dashed #0389B1;
	display:flex;
	background:#0389b145;
    justify-content: center;
	cursor:pointer;
	color:#0389B1;
	border-radius: 5px;
}
form.form_standard > label.multiple > input[type=file][multiple]{
    width: 100%;
	padding: 3px 7px;
}
form.form_standard  .contacts {
    display: flex;
    align-items: center;
    margin: 0;
    flex-wrap: wrap;
    justify-content: space-between;
}
form.form_standard  .contacts > div{
    display: flex;
    align-items: center;
    margin: 1px;
	width:49%
	
}
form.form_standard  .contacts > div > div{
 	margin:0;
}

.add-action{
	border-radius: 50%;
	padding: 6px;
	font-size: 15px;
}
form.form_standard .add-contact{
	border-radius: 50%;
	padding: 4px;
	font-size: 12px;
	width:auto;
}
form.form_standard > label[for=contact]+div.auto-content{
	width:55%;	
}


/**
 * Switch toggle
 * Checkbox spécifique en switch toggle
 *
 */


.switch {
  position: relative;
  display: inline-block;
  width: 60px!important;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #008000;
}
input.red:checked + .slider {
  background-color: #db0707;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}



/** 
 * Statics fields
 *
 */
.static_fields{
	box-shadow:0px 0px 5px 1px #b1b1b1;
	border-radius:5px;
	padding:15px;
    display: flex;
    flex-wrap: wrap;
	align-items: center;
}
.static_fields > div{
    /* display: flex; */
    flex-wrap: wrap;
	align-items: center;
	width:100%;
}
.static_fields h3{
	width:100%;
    margin:5px 0;
}

.static_fields p+div,
.static_fields p{
    margin:5px 0;
	width:33%;
	display: inline-block;
}
.static_fields p > span{
	/* font-size:1rem; */
}
.static_fields p > label{
	/* font-size:.9rem; */
	color:#727272;
}

.static_fields input{
	width:auto;
	padding: 3px 7px;
	font-size: 1rem;
	color: #000000;
    border: 1px solid transparent;
	max-width:100px;
 }
.static_fields input::placeholder,
.static_fields textarea::placeholder{
	color:#C3C3C3;
	/* font-weight:1; */
}
.static_fields textarea{
	width:100%;
	max-width:500px;
    border: 1px solid transparent;
	color: #000000;
	box-sizing: border-box;
	resize: none;
}
.static_fields a{
	/* text-decoration:none; */
	color:#000;
}
 
/*
.static_fields textarea::placeholder { // Chrome, Firefox, Opera, Safari 10.1+
  color: red;
  opacity: 1; // Firefox 
}

.static_fields textarea:-ms-input-placeholder { // Internet Explorer 10-11 
  color: red;
}

.static_fields textarea::-ms-input-placeholder { // Microsoft Edge 
  color: red;
}*/

 .static_fields textarea[disabled],
 .static_fields input[disabled]{
	 background:transparent;
	 color: #000;
 }
 /**
  * editable
  *
  * 
  */
 .editable textarea:hover,
 .editable textarea:focus-visible,
 .editable input:not([disabled]):hover,
 .editable input:focus-visible{
	border-radius: 5px;
    border: 1px solid lightgrey;
    /* padding: 3px 7px; */
	outline:0 none!important;
 }
 .editable .lds-ripple{
	position:absolute;
	width: 40px;
	height: 40px;
	margin:0;
 }
 .editable .lds-ripple div {
	border: 3px solid #000;
	animation: lds-ripple-small .8s cubic-bezier(0, 0.2, 0.4, 1) infinite;
 }


/**
 * Popup
 *
 *
 *
 *
 */
 #shadow{
	 display:none;
	 position:fixed;
	 width:100vw;
	 height:100vh;
	 background:rgba(0, 0, 0, 0.8);
	 z-index:1001;
	 align-items: center;
 }
 a.close-popup{
	position: absolute;
    top: 5px;
    right: 5px;
    color: #686868;
    border-radius: 50%;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border: 2px solid #686868;
    font-size: 21px;
    font-family: cursive;
    background: #fff;
    box-shadow: 0px 0 12px #a6a6a6;
 }
 
 a.close-popup:hover{
	color: #000;
	border: 2px solid #000;
	box-shadow: 0 none;
 }
 .popup{
	 display:none;
	 position:fixed;
	 width:560px;
	 left:calc(50% - 250px);
	 /* top:calc(50% - 170px); */
	 top:-500px;
	 background:#f1f1f1;
	 padding:40px;
	 border-radius:10px;
	 z-index:1002;
 }
 .popup > div{
	display:flex;
    flex-wrap: nowrap;
    flex-direction: row;
 }
 .popup > form{
	display:flex;
	align-items: center;
	    flex-wrap: wrap;
 }
 .popup > form > *{
	/* width:20%; */
 }
 .popup.fiche_client .tab-resa{
	height:auto;
 }
 .popup.fiche_client .col-50{
	padding:0 5px;
 }
 
 
/**
 * POPUP UP MAILS
 *
 */
 
 #popup-uploaded-email {
	 width:800px;
	 left:calc(50% - 400px);
	 /* max-height:calc(100vh - 180px); */
 }
 #popup-uploaded-email > div{
	width:100%;
    flex-wrap: wrap;
    align-items: center;
	max-height: calc(100vh - 280px);
	 overflow:auto;
 }
 #popup-uploaded-email > div > label{
	width: 18%;
    font-size: 1.1rem;
 }
 #popup-uploaded-email > div > p{
	 width:82%;
	 text-align: justify;
	 margin:0;
 }
/**
 * POPUP vehicules
 *
 */
 
 #popup-vehicule-dispo {
	 width:1120px;
	 left:calc(50% - 560px);
 }
 #popup-vehicule-dispo > div {
	 width:100%;
	 display:flex;
	 justify-content: space-between;
 }
 #popup-vehicule-dispo > div > div{
	 width:49%;
	 /* display:flex */
	 /* position:relative; */
 }
 #popup-vehicule-dispo > div > div.list-vehicules,
 #popup-vehicule-dispo #all-vehicules-dispo{
	 max-height: calc(100vh - 280px);
	 overflow:auto;
	     flex-direction: column;
 }
 #popup-vehicule-dispo input[type=submit]{
	/* position: sticky; */
    /* top: 10px; */
    /* right: 10px; */
 }
 #popup-vehicule-dispo #all-vehicules-dispo .auto-complete + .search-area{
	    top: calc(100% - 3px);
 }
 #popup-vehicule-dispo .selection {
	 display:flex;
	 align-items: center;
 }
 
 
 /**
  * Popup KPI
  *
  *
  */
  
.popup#popup-kpi > form {
	box-shadow: none;
}
.popup#popup-kpi > form > div {
	text-align:center;
	padding:10px;
}
.popup#popup-kpi #form-kpi div.module{
	display: flex;
    flex-wrap: wrap;
    gap: 20px;
	margin:10px;
	justify-content: center;
}
.popup#popup-kpi #form-kpi div.module > *{
	padding:10px 20px;
	box-shadow: 0px 0px 5px 1px #acacac;
}
.popup#popup-kpi #form-kpi .content_charts{
	/* display:none; */
	visibility:hidden;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100vh;
	z-index:-10;
}



/**
 * directions tools
 * partie itineraire / trajet a la fin. reutilisé egalement sur la partie cotation
 *
 *
 */
 
 .TYPE_USER_CLIENT .directions-tools{
	 display:none;
 }
 .directions-tools{
	 position:absolute;
	 background:#ffffffbd;
	 top:100px;
	 left: 0;
	 z-index: 401;
	 padding:10px 25px;
	 /* min-width:350px; */
	 /* border:1px solid; */
	 box-shadow: #00000047 0px 0px 10px 2px;
	 border-radius: 0 15px 15px 0;
 }
 .directions-tools > a{
	 display:none;
 }
 .directions-tools > a:before{
	 font-size: 2.5rem;
 }
 .directions-tools h2,
 .directions-tools h4{
	margin:0;
	padding:0;
 }
 
 .directions-tools h2::after{
	content:"";
	background:none;
	width:0;
	display:none;
	height:0;
 }
 
 .directions-tools > div {
	 width:350px;
	     flex-direction: column;
 }
 .directions-tools form{
	display:flex;    
	flex-wrap: wrap;
 }
 .directions-tools form > * {
	margin:3px 0;
	width:100%;
 }
 
 .directions-tools form input{
	 padding: 5px 10px;
	 /* display:block; */
 }
 .directions-tools form input[type=number]{
	 padding-right:2px;
	 /* display:block; */
 }
 .directions-tools form > div.option{
	display: flex;
    align-items: center;
 }
 .directions-tools form > div > input[type=checkbox]{
	display:none;
 }
 .directions-tools form > div > input[type=checkbox]+label{
	cursor:pointer;
	position:relative;
	display: inline-block;
	height:auto;
	padding:0;
	background-color:transparent;
	margin: 0 10px 0 0;
 }
 .directions-tools form > div > input[type=checkbox]+label:before{
	cursor:pointer;
	background:transparent;
	padding:5px;
	font-size:1.8rem;
	color:#000;
    border: 5px solid green;
 }
 .directions-tools form > div > input[type=checkbox]:checked+label:before{
    border: 5px solid #c90000;
 }
 .directions-tools form > div > input[type=checkbox]:checked+label:after{
 /* .directions-tools form > div > input[type=checkbox]+label:hover{ */
	/* border:1px solid green; */
	/* color:#fff; */
	/* background:green; */
	content:"";
	background-color:#c90000;
    transform: rotate(130deg);
    width: 115%;
    height: 5px;
	display:block;
	position:absolute;
    top: 39%;
    left: -4px;
	
	
 }
 
 .directions-tools div.result > * {
	margin:5px 0;
 }
 .directions-tools div.result p {
	margin:0;
	padding:0;
	width:25%;
 }
 .directions-tools div.result p:nth-child(3n+1) {
	width:50%;
	font-size:1.2rem;
 }
 .directions-tools div.result > div {
	display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
 }
 .directions-tools div.result > a{
	color: #fff;
    text-decoration: none;
    background: #000000;
    padding: 3px 10px;
    border-radius: 5px;
 }
 .directions-tools div.result > a:hover{
    background: #363636;
 }
 .directions-tools div.result > a:after{
	content: ">";
    font-family: cursive;
    margin-left: 10px;
 }
 
 
 .itineraire{
	display:flex;    
	flex-wrap: nowrap;
	margin: 5px 0;
 }
 .itineraire > .tools{
	margin:0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 }
 .itineraire > div.auto-content {
	width:99%;
	margin:0;
	display:flex;
	align-items: center;
 }
 
 .itineraire > div.auto-content  > input[type=text]{
	width:100%;
 }
 
 
 .tools > a{
	font-size:.8rem;
	color:black;
 }
 
 
/**
 * 
 * filter tools
 *
 *
 *
 */
 .filter-tools{
	 position:absolute;
	 background:transparent;
	 top:calc(100vh - 50%);
	 right: 0;
	 z-index: 401;
	 overflow:hidden;
 }
 .filter-tools > ul{
	 margin:0;
	 padding:0; 
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-end;
    justify-content: flex-end;
    align-items: flex-end;
 }
 .filter-tools > ul > li{
	 list-style-type:none;
	 color:#fff;
	 margin:5px 0;
	 /* padding:0 40px 0 0; */
	 display:flex;
	 border-radius:5px 0 0 5px;
	 /* align-items: center; */
	 align-items: stretch;
	 white-space: nowrap;
	 background:transparent;
     font-size: 0;
     padding: 0;
     width: 45px;
	 font-weight:normal;
	 cursor:pointer;
	 position:relative
 }
 .filter-tools > ul > li > div{
	 height:auto;
	 display:flex;
	 align-items: center;
	 flex-wrap: wrap;
 }
 .filter-tools > ul > li form{
	 display:flex;
 }
 .filter-tools > ul > li form input[type=checkbox] + label{
	padding:0 8px;
	margin-bottom: 5px;
	font-size: 13px;
 }
 .filter-tools > ul > li input{
	 color:#000;
	 margin-bottom:5px;
 }
 .filter-tools > ul > li.actif{
	 width: 190px;
	 font-size: 1rem;
	 padding:0 40px 0 0;
	 background:#1D212A;
 }
 .filter-tools > ul > li.actif:after{
	 font-family: 'icomoon';
	 content:"\e90b";
	 position:absolute;
	 right:5px;
	 transform: rotate(270deg);
     font-size: 10px;
	 height:auto;
	 display:flex;
	 align-items: center;
	 top: 42%;
 }
 
 .filter-tools > ul > li:before{
	 font-family: 'icomoon';
	 border-radius:5px 0 0 5px;
	 display:flex;
	 padding:10px;
     font-size: 25px;
	 margin-right:10px;
	 height:auto;
	 align-items: center;
 }
 
 .filter-tools > ul > li.vehicule-dispo:before{
	 content:"\e923";
	 background:#219D239e;
 }
 .filter-tools > ul > li.vehicule-transit:before{
	 content:"\e922";
	 background:#ff96009e;
 }
 .filter-tools > ul > li.fournisseurs:before{
	 content:"\e921";
	 background:#EE005A9e;
 }
 .filter-tools > ul > li.clients:before{
	 content:"C/P";
	 background:#0052ee9e;
	 /* background: linear-gradient(120deg,rgba(27, 65, 134, 1) 50%, rgba(142, 179, 245, 1) 50%); */
	 background: linear-gradient(120deg,rgba(27, 65, 134, 0.80) 50%, rgba(142, 179, 245, 0.80) 50%);
	 font-family:arial;
	 font-weight:bold;
	 font-size: 15px;
 }
 
 .filter-tools > ul > li.vehicule-dispo:hover::before,
 .filter-tools > ul > li.actif.vehicule-dispo::before{
	 background:#219D23;
 }
 .filter-tools > ul > li.vehicule-transit:hover::before,
 .filter-tools > ul > li.actif.vehicule-transit::before{
	 background:#FF9600;
 }
 .filter-tools > ul > li.fournisseurs:hover::before,
 .filter-tools > ul > li.actif.fournisseurs::before{
	 background:#EE005A;
 }
 .filter-tools > ul > li.clients:hover::before,
 .filter-tools > ul > li.actif.clients::before{
	background:#0052ee;
	 /* background: #00266DCF; */
	 background: linear-gradient(120deg,rgba(27, 65, 134, 1) 50%, rgba(142, 179, 245, 1) 50%);
 }
 
 /**
  * Auto completion
  *
  *
  *
  */
  
  
 .auto-content {
	position:relative;
 } 
 .auto-complete:focus-visible,
 .auto-complete + .search-area > ul > li > a:focus-visible{
	 /* outline:#adadad 1px solid!important; */
	 outline:none!important;
 }
 .auto-complete:focus-visible,
 .auto-complete:focus,
 .auto-complete:active{
	 border:lightgrey 1px solid!important;
	/* border:2px solid #101010; */
	/* border-radius:0 5px 5px 5px; */
	
 }
 .auto-complete + .search-area{    
	z-index: 3;
    background: #fff;
    max-height: 300px;
    position: absolute;
    display: none;    
    width: max-content;
    /* width: max-content!important; */
    top: calc(100% - 16px);
    padding:5px;
    border: 1px solid lightgrey;
    border-radius: 0 0 5px 5px;
    overflow: auto;
    border-top-color: transparent;
	box-shadow: 14px 14px 20px 0px #00000021;
 } 
 .auto-complete + .search-area::-webkit-scrollbar {
	width: 3px;
 }
 .auto-complete + .search-area::-webkit-scrollbar-track {
	border-radius: 2px;
	margin-top:2px;
 }
 .auto-complete + .search-area > ul {
	list-style-type:none;
	margin:0;
	padding:0;
 }
 .auto-complete + .search-area > ul > li{
	list-style-type:none;
	cursor:pointer;
 }
 .auto-complete + .search-area > ul > li:hover{
	background:#ccc;
 }
 
 .auto-complete + .search-area > ul > li > a{
	text-decoration:none;
	color:#2F2F2F;
	display:block;
	padding:4px;
 }
 
 .auto-complete + .search-area > ul > li > a:focus-visible,
 .auto-complete + .search-area > ul > li:hover{
	background:#ccc;
 }
 /*.btn-ajout-client{
	 background:#0489B1;
	 color:#fff;
	 text-transform:uppercase;
	 text-align:center;
	 border-radius:3px;
	 margin:5px;
 }*/
 .auto-complete + .search-area > ul > li.btn-ajout-client:hover{
	 background:#01B4C2;
 }
 
 /**
  * loader css
  *
  */
 
.lds-ripple {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
	margin:40% auto
}
.lds-ripple div {
	position: absolute;
	border: 4px solid #000;
	opacity: 1;
	border-radius: 50%;
	animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
#shadow .lds-ripple div{
	border-color: #fff;
}
.lds-ripple div:nth-child(2) {
	animation-delay: -0.5s;
}

.upload_file + .lds-ripple,
.index h2 > .lds-ripple{
	position:absolute;
	width: 20px;
	height: 20px;
	margin:0 0 0 10px;
}

.upload_file .lds-ripple{
	width: 20px;
	height: 20px;
	margin:0 0 0 10px;
}


.upload_file + .lds-ripple{
	    left: -40px;
}
.upload_file .lds-ripple div,
.upload_file + .lds-ripple div,
.index h2 > .lds-ripple div {
	border: 2px solid #000;
	animation: lds-ripple-small .8s cubic-bezier(0, 0.2, 0.4, 1) infinite;
}

@keyframes lds-ripple {
	0% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		top: 0px;
		left: 0px;
		width: 72px;
		height: 72px;
		opacity: 0;
	}
}
@keyframes lds-ripple-small{
	0% {
		top: 16px;
		left: 16px;
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		top: 0px;
		left: 0px;
		width: 32px;
		height: 32px;
		opacity: 0;
	}
}
 
/**
 * Carte générique
 *
 */
 
.detail .carte { 
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.detail .carte > div { 
	position:relative;
	height:100%;
}

.detail #map { 
	/* height:100%;  */
	width:100%;
	box-shadow:0px 0px 5px 1px #b1b1b1;
	border-radius:5px;
	    height: 1270px;
}
 
.OSM-Icon{
	/* width:45px; */
	/* height:45px; */
	/* background:black; */
	color:#fff;
}
.OSM-Icon::before {
    /* font-family: 'icomoon'; */
    /* padding: 3px; */
    /* font-size: 21px; */
	width:12px;
	height:12px;
	border-radius:50%;
	opacity:1;
	content:"";
	display:block
}

.OSM-Icon.transit::before {
    background: #FF9600;
    /* content: "\e922"; */
}
.OSM-Icon.vehicule-dispo::before {
    background: #219D23;
    /* content: "\e923"; */
}
.OSM-Icon.vehicule-dispo-tr::before {
    background: #166D18;
    /* content: "\e923"; */
}
.OSM-Icon.fournisseur::before {
    background: #EE005A9e;
    /* content: "\e921"; */
	
	 /* content:"\e921"; */
	 /* background:#EE005A9e; */
}
.OSM-Icon.client::before {
    background: #00266dcf;
}
.OSM-Icon.prospect::before {
    background: #518dff9e;
}
 
/**
 * Form commentaire
 *
 *
 *
 *
 */
 
 #form-note > *{
	display:flex;
	justify-content: center;
 }
 #form-note textarea{
	width:300px;
	height:150px;
 }
 
 /** 
  * Page liste des client
  *
  *
  */
  .client-form{
	  display:none;
	      max-width: 500px;
  }
  .client-form div p {
    width: 100%;
	display:flex;
	margin:5px
  }
  .client-form div p > label {
    min-width: 100px;
  }
  
  /**
   * Stats
   *
   */
  
	div.legend ul{   
		margin: 0;
		padding: 0;

	}
	div.legend li{
		margin:0;
		padding:0;
		list-style-type:none
	}
	div.legend li:before{
		width:10px;
		height:10px;
		border-radius:50%;
		content:"";
		display: inline-flex;
		margin-right: 5px;
		
	}
	div.legend li.late:before{
		background:red;
	}
	div.legend li.on_time:before{
		background:blue;
	}
	p.big_number,
	p.taux_satisfaction{
		font-size:6rem;
		margin:.5rem
	}
  
  
  /**
   * Responsive
   *
   *
   */
  @media screen and (max-width: 1200px) {
		
		.col-5{width:100%}
		.col-10{width:100%}
		.col-20{width:100%}
		.col-30{width:100%}
		.col-33{width:100%}
		.col-40{width:100%}
		.col-50{width:100%}
		.col-60{width:100%}
		.col-70{width:100%}
		.col-80{width:100%}
		.col-90{width:100%}
		.col-95{width:100%}
		
		
		.detail .carte {
			min-height: 500px;
		}
  }
  @media screen and (max-width: 1050px) {
		body > section > div.nowrap{
			flex-wrap: wrap;
		}
		
		.popup{
			width:calc(100% - 120px);
			margin:20px;
			left:0;
		}
		
		.detail .filters {
			flex-wrap: wrap;
			gap: 10px;
		}
		.padding-20-50{
			padding:10px;
		}
		.padding-0-50{
			padding:0 10px;
		}
		.detail_prefact{
			display:none;
		}
  }