/*****************************************************************************************************************************/
[contenteditable]{outline: 0px solid transparent;}
/*****************************************************************************************************************************/
.uncomplete {color: rgb(160, 160, 160);}
/*****************************************************************************************************************************/
#avant{
float: left;
left: 0%;
background-color: rgba(128, 128, 128, 0.363);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#apres{
float: right;
right: 0%;
background-color: rgba(128, 128, 128, 0.363);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#avant,
#apres{
position: absolute;
width: 30px;
opacity: 0.2;
cursor: pointer;
padding: 40px 10px 40px 4px;
bottom: 45%;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#avant{
padding: 40px 10px 40px 4px;
border-radius: 0px 8px 8px 0px;}
#apres{
padding: 40px 4px 40px 10px;
border-radius: 8px 0px 0px 8px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-show{
position: fixed; 
top: 0; 
left: 0; 
display: flex; 
align-items: center; 
justify-content: center;
width: 100%;
height: 100%; 
background: rgba(22, 22, 22, 0.95);
z-index: 9998;
animation: blur 0.3s forwards;
user-select: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-hidden{
display: none;}
/*****************************************************************************************************************************/
#profil-content{
height: auto; 
overflow: auto;}
/*****************************************************************************************************************************/
#englobe{
width: 760px;
height: auto;}
/*****************************************************************************************************************************/
label{
display: inline-block;} 
/*****************************************************************************************************************************/
.profil-wrapper{
position: relative;
margin-left: auto;
margin-right: auto;
width: 740px; 
height: 820px;
background-color: #323232;
border-radius: 16px;
z-index: 9;
box-shadow:rgba(0, 0, 0, 0.26) 0px 3px 6px, rgba(0, 0, 0, 0.33) 0px 2px 2px;}
/*****************************************************************************************************************************/
#status{
position: absolute; 
top: -12;
margin-left: auto;
margin-right: auto;
z-index: 4;
width: 100%;
height: 16px;
line-height: 16px;
color: #cccccc;
font-style: italic;
font-size: 14px;
text-align: center; 
cursor: pointer;
opacity: 0;
border-radius: 30px 30px 0px 0px;
animation: bordereau 0.4s forwards;
animation-delay: 0.2s;
transform-origin: 0 100%;}
/*****************************************************************************************************************************/
.profil-entete{
overflow: hidden;
width: 100%; 
height: auto; 
min-height: 183px;
background: linear-gradient(to bottom, #3084d350, #053d5e49);
opacity: 1.0;}
/*****************************************************************************************************************************/
#ic-settings,
#ic-add,
#ic-back{
float: right;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 9px;
cursor: pointer;
filter: brightness(0) saturate(100%) invert(0%) sepia(27%) saturate(6267%) hue-rotate(351deg) 
brightness(96%) contrast(88%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#ic-settings{
padding-top: 10px;
width: 21px;
opacity: 0.72;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#ic-add{
padding-top: 11px;
width: 17.8px;
opacity: 0.65;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#ic-back{
padding-top: 11px;
width: 18px;
opacity: 0.65;}
/*****************************************************************************************************************************/
#profil-cross{
font-family: Arial, Helvetica, sans-serif; 
font-weight: bolder;
font-size: 23px;
opacity: 0.70;
color: #0c0c0c; 
cursor: pointer;
float: right; 
padding-top: 8px; 
padding-right: 10px;
padding-left: 8px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-cross:hover{
color: white;
opacity: 1.0;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert0{
position: absolute;
float: right;
margin-top: 8px;
right: 36px;
height: 25px;
width: 2px;
border-right: 1px solid rgba(0, 0, 0, 0.514);
opacity: 0.6;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert1{
position: absolute;
float: right;
margin-top: 8px;
right: 36px;
height: 25px;
width: 2px;
border-left: 1px solid #80808023;
opacity: 0.6;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert3{
position: absolute;
float: right;
margin-top: 8px;
right: 0;
height: 25px;
width: 2px;
border-right: 1px solid rgba(0, 0, 0, 0.514);
opacity: 0.6;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert2{
position: absolute;
float: right;
margin-top: 8px;
right: 0px;
height: 25px;
width: 2px;
border-left: 1px solid #80808023;
opacity: 0.6;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#close-settings{
width: 21px;
float: right;/*
top: 1;*/
margin-top: 1px;
cursor: pointer;
opacity: 0.9;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#ic-settings:hover, 
#close-settings:hover,
#ic-add:hover,
#ic-back:hover{
opacity: 1.0;
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(141deg) 
brightness(103%) contrast(101%);}
/*****************************************************************************************************************************/
#settings{
float: right;
position: sticky;
height: 0;
z-index: 10;}
/*****************************************************************************************************************************/
#content-settings{
float: right; 
width: 200px;
margin-top: 9px;
margin-right: 5px;
background-color: #292929;
border-radius: 6px;
font-size: 14px;
box-shadow:rgba(0, 0, 0, 0.5) 0px 3px 6px, rgba(0, 0, 0, 0.39) 0px 2px 2px;}
/*****************************************************************************************************************************/
#click-line2, 
#click-line3{
width: 188px; 
height: auto;}
/*****************************************************************************************************************************/
#line0{
width: 192px;
padding-right: 5px;
border-radius: 6px 0px 0px 0px;}
/*****************************************************************************************************************************/
#settings-line1{
width: 192px;
height: 24px;
line-height: 24px;
cursor: pointer;
color: #cfcfcf;
padding-right: 4px;
padding-left: 5px;
border-radius: 6px 6px 0px 0px;}
/*****************************************************************************************************************************/
#settings-line2{
width: 191px;
height: 24px;
line-height: 24px;
cursor: pointer;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;}
/*****************************************************************************************************************************/
#settings-line2-expanded{
width: 191px;
height: 76px;
cursor: pointer;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;
padding-top: 4px;}
/*****************************************************************************************************************************/
#line2-arrow-back,
#line3-arrow-back{
float: right;
position: relative;
padding-left: 13px;/*
padding-bottom: 4px;*/}
/*****************************************************************************************************************************/
#line2-arrow-up,
#line3-arrow-up{
float: right;
position: relative;
top: -3;
padding-left: 13px;/*
padding-bottom: 4px;*/}
/*****************************************************************************************************************************/
#date-supp, 
#date-block{
width: 187px; 
border: none; 
resize: none; 
outline: none; 
background-color: #13131371; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #cfcfcf;
border-radius: 6px;
margin-left: 2px;
margin-bottom: 4px;
line-height: 20px;
font-style: italic;
padding: 3px;}
/*****************************************************************************************************************************/
#settings-line3{
width: 191px;
height: 24px;
line-height: 24px;
cursor: pointer;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;}
/*****************************************************************************************************************************/
#settings-line3-expanded{
width: 191px;
height: 56px;
cursor: pointer;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;
padding-top: 4px;}
/*****************************************************************************************************************************/
#settings-line4{
width: 191px;
cursor: pointer;
height: 24px;
line-height: 24px;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;}
/*****************************************************************************************************************************/
.status-selected{
background-color: #427e9cfd;}
/*****************************************************************************************************************************/
.line-ended{
border-radius: 0px 0px 6px 6px;}
/*****************************************************************************************************************************/

#waiter-img1-on,
#waiter-img1-off,*
#waiter-img2-on,
#waiter-img2-off{
position: absolute;
width: 140px; 
height: 140px;}

#waiter-img1-on,
#waiter-img2-on{
z-index: 0;}

#waiter-img1-off,
#waiter-img2-off{
z-index: -2;}

.no-contour{
box-shadow: rgba(27, 27, 27, 0.329) 1px 1px 4px 4px inset, rgba(0, 0, 0, 0.068) -1px -1px 4px 4px inset;}

.contour{/*
border: 1px solid rgb(83, 117, 168);*/
box-shadow:
0 0 4px #37b6ffa4,
inset 0 0 4px #37b6ffa4,
0 0 8px #37b6ffa4,
inset 0 0 8px #37b6ffa4,
0 0 16px #37b6ffa4,
inset 0 0 16px #37b6ffa4;}

#drop-area, #drop-area2{
width: 140px; 
height: 140px; 
margin-top: 23px; 
margin-left: 18px; 
margin-bottom: 20px;
border-radius: 8px;
background-color: #292929;
/*background-position: center;*/
background-repeat: no-repeat; 
/*
background-repeat: repeat; 
background-size: 100% 100%;*/}
/*---------------------------------------------------------------------------------------------------------------------------*/
#drop-area-freezed, #drop-area2-freezed{
width: 86%;
height: 77%; 
margin-top: 17%;
margin-left: 7%;
margin-bottom: 17%;
border-radius: 8px;
background-color: #292929;/*
background-position: center;*/ 
background-repeat: no-repeat; 
/*
background-repeat: repeat; 
background-size: 100% 100%;*/}
/*****************************************************************************************************************************/
#avatar{
width: 100%;}
/*****************************************************************************************************************************/
#profil-picture{ 
cursor: zoom-in; 
min-width: 140px;
width: 100%; 
height: 50%;   
margin: 0;
padding: 0;
text-align: left;
border-radius: 0px 0px 10px 10px;
opacity: 0;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-picture-freezed{
cursor: zoom-in; 
min-width: 318px;
width: 100%; 
height: 50%;   
margin: 0;
padding: 0;
text-align: left;
border-radius: 0px 0px 10px 10px;
opacity: 0;}
/*****************************************************************************************************************************/
#real-picture{
cursor: zoom-in; 
min-width: 140px;
width: 100%; 
height: 50%;   
margin: 0;
padding: 0;
text-align: left;
border-radius: 0px 0px 10px 10px;
opacity: 0;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#real-picture-freezed{
cursor: zoom-in; 
min-width: 318px;
width: 100%; 
height: 50%;   
margin: 0;
padding: 0;
text-align: left;
border-radius: 0px 0px 10px 10px;
opacity: 0;}
/*****************************************************************************************************************************/
#profil-paste-picture, #profil-paste-picture2{
cursor: zoom-in;
min-width: 140px;
width: 100%; 
height: 50%; 
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
opacity: 0; 
border: none; 
resize: none; 
outline: none; 
border-radius: 10px 10px 0px 0px; 
display: block;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-paste-picture-freezed{
cursor: zoom-out;
min-width: 318px;
width: 100%; 
height: 50%; 
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
opacity: 0; 
border: none; 
resize: none; 
outline: none; 
border-radius: 10px 10px 0px 0px; 
display: block;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-paste-picture2-freezed{
cursor: zoom-out;
min-width: 318px;
width: 100%; 
height: 50%; 
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
opacity: 0; 
border: none; 
resize: none; 
outline: none; 
border-radius: 10px 10px 0px 0px; 
display: block;}
/*****************************************************************************************************************************/
#del-pic, #del-pic2{
position: absolute;
z-index: 2;
width: 14px;
top: -5%;   
left: -6%;
opacity: 0;
cursor: pointer; 
padding: 10px;
filter: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(186%) 
hue-rotate(316deg) brightness(93%) contrast(79%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#del-pic-freezed, #del-pic2-freezed{
position: absolute;
z-index: 2;
width: 32px;
top: 0%;   
left: -1%;
opacity: 0;
cursor: pointer; 
padding: 10px;
filter: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(186%) 
hue-rotate(316deg) brightness(93%) contrast(79%);}
/*****************************************************************************************************************************/
#arrow1{
width: 14px;
left: -20px; 
bottom: -17px; 
position: relative;
z-index: 2; 
opacity: 0.5;
cursor: pointer;
padding: 20px;
filter: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(186%) hue-rotate(316deg) 
brightness(93%) contrast(79%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#arrow1-freezed{
width: 4%;
left: 675px;
position: relative; 
z-index: 2; 
/*top: 18%;*/
bottom: 180px;
padding: 20px;
cursor: pointer;
opacity: 0.5;}
/*****************************************************************************************************************************/
#arrow1:hover, 
#arrow1-freezed:hover,
#del-pic:hover,
#del-pic-freezed:hover,
#del-pic2:hover,
#del-pic2-freezed:hover,
#avant:hover,
#apres:hover{
opacity: 0.9;
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(141deg) 
brightness(103%) contrast(101%);}
/*****************************************************************************************************************************/
#prenom-nom{
position: absolute; 
top: 9%;
width: 100%; 
text-align: center; 
font-size: 20px; 
font-family: Constantia, Times, serif;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#prenom-nom div{
display: inline-block;}
/*****************************************************************************************************************************/
#drapeau{
width: 30px;
height: auto;
position: relative;
right: 10;
top: -19;
margin-right: 4px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#flag{
position: absolute;
top: 5.2;
right: -8;
width: 20px;}
/*****************************************************************************************************************************/
#diminutif{
padding-top: 9px; 
width: 36px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#diminutif{
position: absolute;
z-index: 1; 
top: 2; 
height: auto; 
background-color: #292929; 
line-height: 4px;
border: none; 
resize: none; 
outline: none; 
text-align: center; 
padding-top: 3px; 
padding-bottom: 3px;
font-size: 14px; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #858585; 
border-radius: 6px;}
/*****************************************************************************************************************************/
#sexe{
font-size: 17px;
margin-left: 7px;
font-weight: bold;} 
/*---------------------------------------------------------------------------------------------------------------------------*/
#entrer-sexe{
position: absolute; 
z-index: 1; 
top: 2.1px;
width: 30px; 
height: auto; 
background-color: #292929; 
line-height: 4px;
border: none; 
resize: none; 
outline: none; 
text-align: center; 
padding-top: 3px; 
padding-bottom: 3px;
font-size: 14px; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #858585; 
border-radius: 6px;}
/*****************************************************************************************************************************/
.profil-menu{
width: 100%; 
height: 44px; 
background: linear-gradient(#363636, rgba(36, 36, 36, 0.507));
border-collapse: collapse; 
border-spacing: 1; 
margin: 0;}
/*****************************************************************************************************************************/
#apropos{
width: 100%;
height: 60%;}
/*****************************************************************************************************************************/
#resume, #interactions, #evaluations{
width: 33%; 
border-bottom: solid 2px rgb(27, 27, 27); 
cursor: pointer; 
padding-bottom: 3px;
border-top: solid 1px rgba(27, 27, 27, 0.507); 
text-align: center;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#resume, #interactions{
border-right: solid 2px rgb(20, 20, 20);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#resume-create{
width: 100%; 
border-bottom: solid 2px rgb(27, 27, 27); 
cursor: pointer; 
padding-bottom: 3px;
border-top: solid 1px rgba(27, 27, 27, 0.507);
text-align: center;
cursor: default;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#interactions-create, #evaluations-create{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.profil-selected,
#resume:hover,
#interactions:hover,
#evaluations:hover{
background: linear-gradient(to bottom, #3084d33f, #053d5e42);}
/*****************************************************************************************************************************/
#first{
padding-top: 6px; 
padding-bottom: 4px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#first, 
#liens{
width: 93%; 
height: auto; 
background-color: #292929; 
display: block;
margin-left: 16px;
margin-right: 0; 
margin-top: 14px;
border-radius: 12px;}
/*****************************************************************************************************************************/
.profil-textarea, 
.profil-links-textarea, 
.profil-links-textarea-name, 
#achats{
background-color: #292929; 
line-height: 24px; 
margin-top: 2px;
border: none; 
resize: none; 
outline: none; /*
padding-left: 6px; */
margin-left: 2px;
font-size: 14px; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #999999;}
/*****************************************************************************************************************************/
#achats{
padding-left: 39px;}
/*****************************************************************************************************************************/
#titles{
width: 86.1%;
border-radius: 4px;
padding-left: 4px;
cursor: text;}

#titre-sql,
#email,
#civil-pro,
#type-e,
#capital,
#rcs,
#siret,
#tva,
#email,
#tel1,
#tel2{
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 1px;
margin-left: 1px;
font-size: 14px;
height: 26px;
border: hidden;
outline: none;
color: #999999;}

.ic{
float: left; 
margin-top: 5px; 
margin-left: 12px; 
margin-right: 8px;}

#dots{
background-color: #202020;
width: 25px;
cursor: pointer;
text-align: center;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 8px; 
float: right;
margin-right: 5px;
padding-top: 1px;
padding-bottom: 3px;
line-height: 20px;}

#dots-contact{
background-color: #202020;
width: 18px;
height: 15px;
cursor: pointer;
border-radius: 8px;
margin-right: 5px;
background-image: url(../../Img/Png/contact-us.png);
background-repeat: repeat; 
background-position: center;
background-size: 100% 100%;
float: right;
right: 52px;
padding: 5px 3px 4px 3px;}

#dots-off{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#dots-contact:hover,
#plus:hover,
#dots:hover{
background-color: #4b4b4b;}

.pro{
background-color: #292929;}

.adresse{
width: 18px;
float: left; 
margin-top: 4px; 
margin-left: 11px; 
margin-right: 8px;}

.contact{
width: 12px;}

#type-e,
#capital,
#rcs,
#siret,
#tva,
#email,
#tel1,
#tel2{
width: 99%;
border-radius: 4px;
padding-left: 4px;
cursor: text;}

#pro-show,
#contact-show{
width: 300px;
background-color: #222222;
border-radius: 4px;
cursor: pointer;
float: right;
position: absolute;
right: 0;
margin-top: 0px;
z-index: 4;
margin-right: 20px;
border: solid 1px rgba(255, 255, 255, 0.336);}

#titresql{
width: 630px;
background-color: #292929;
border-radius: 4px;
cursor: pointer;/*
float: right;*/
position: absolute;/*
right: 0;*/
margin-top: 0px;
z-index: 4;
margin-left: 37px;
border: solid 1px rgba(255, 255, 255, 0.336);}

#titresql-off{
display: none;}

.titre-optgrp{
display: block;
padding-left: 6px;
padding-top: 1px;
padding-bottom: 3px;
width: 100%;}

.opt{
display: block;
padding-left: 20px;
padding-top: 1px;
padding-bottom: 3px;
color: rgb(167, 167, 167);
width: 100%;}

.opt:hover{
background-color: #69696993;
width: 96.7%;}

.titres{
background-color: #32414d;
width: 96.7%;}

#pro-hidden,
#contact-hidden{
display: none;}
/*****************************************************************************************************************************/
.profil-textarea, #achats{
width: 93%;}
.profil-links-textarea{
width: 62%;}
.profil-links-textarea-name{
width: 27%;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#achats{
margin-bottom: 4px;}
/*****************************************************************************************************************************/
.unclient{
text-decoration: underline; 
text-underline-offset: 4px; 
cursor: pointer; 
text-decoration-thickness: 1px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.unclient:hover{
color: white;}
/*****************************************************************************************************************************/
#divlinks{
position: absolute; 
z-index: 1; 
left: 0; 
bottom: 9; 
background-color: #292929; 
padding-left: 8px; 
float: left; 
height: 26px; 
padding-bottom: 2px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#links-editable{
background-color: #292929; 
position: absolute; 
z-index: 1; 
left: 32px; 
bottom: 2; 
height: 38px; 
overflow: auto;
min-width: 2px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.links-editable{
cursor: pointer; 
line-height: 32px;
margin-left: 8px;}
/*****************************************************************************************************************************/
#liens{
padding-top: 8px; 
padding-bottom: 0px; 
position: relative; 
height: 36px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#liens a{
color: #999999; 
text-decoration: underline; 
text-underline-offset: 4px; 
text-decoration-thickness: 1px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#liens a:hover{
color: #00a7f5f6;}
/*****************************************************************************************************************************/
.profil-deleted{
line-height: 33px; 
margin-left: 10px; 
font-weight: bold;}
/*****************************************************************************************************************************/
#plus{
background-color: #202020; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 3px; 
padding-bottom: 4px;
padding-right: 6px; 
padding-left: 6px;
border-radius: 8px; 
float: right;
margin-right: 5px;
cursor: pointer;}
/*****************************************************************************************************************************/
#trash{
cursor: pointer;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#trash:hover{
filter: brightness(0) saturate(100%) invert(12%) sepia(93%) saturate(7089%) hue-rotate(2deg) 
brightness(96%) contrast(112%);}
/*****************************************************************************************************************************/
#notes-eraser, 
#notes-reset{
width: 17px; 
margin-top: 0px; 
margin-right: 8px;
float: right; 
opacity: 0.2;
cursor: pointer;} 
/*---------------------------------------------------------------------------------------------------------------------------*/
#notes-reset{
margin-right: 12px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#notes-eraser:hover, #notes-reset:hover{
opacity: 1.0;}
/*****************************************************************************************************************************/
#bio{
width: 93%; 
height: auto; 
background-color: #292929;
display: block;
margin-left: 16px;
margin-right: 0px; 
margin-top: 14px;
padding-top: 8px; 
padding-bottom: 10px; 
border-radius: 12px 12px 0px 0px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#bio-title{
margin-left: 12px;}     
/*****************************************************************************************************************************/
#notes{
height: 65%;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#notes-create{
height: 57%;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#notes, #notes-create{
width: 93%; 
background-color: #292929;
border: none; 
resize: none; 
outline: none;
font-size: 15px; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #858585; 
overflow: auto;
display: block;
margin-left: 16px;
margin-right: 0px; 
padding: 0px 12px 0px 12px;
border-radius: 0px 0px 12px 12px;}
/*****************************************************************************************************************************/
#create-profil{
width: 93%; 
height: 42px;
text-align: center;
background-color: #292929; 
display: block;
margin-top: 14px;
margin-left: 16px;
border-radius: 10px;
line-height: 40px;
cursor: pointer;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#create-profil-hidden{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#create-profil:hover{
background-color: #4cb1ff85}

/* Scrollbar ******************************************************************************************************************
*{ Firefox 
scrollbar-width: auto;
scrollbar-color: rgb(43, 43, 43);}

*::-webkit-scrollbar{/* Chrome, Edge, and Safari 
width: 16px; 
cursor: pointer;}

*::-webkit-scrollbar-track{
background: #464646;}

*::-webkit-scrollbar-thumb{
background-color: #464646; 
border-radius: 4px;}
*/

/* BLUR **********************************************************************************************************************/
@keyframes blur
{
    0%  {opacity: 0;}
    100%{opacity: 1.0;}
}
/* ANIMATION BORDEREAU //////////////////////////////////////////////////////////////////////////////////////////////////////*/
@keyframes bordereau
{
    0% 
    {
        transform: scaleY(0);
        opacity: 0;
    }

    100% 
    {
        transform: scaleY(1);
        opacity: 1.0;

    }
}
/*ZOOM IN PICTURE ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@keyframes show_picture_wrapper
{
    100% 
    {
        background: linear-gradient(to bottom, #304855, #242a31);
    }
}
@keyframes show_picture_entete
{
    100% 
    {
        background: rgba(51,170,51,0);
    }
}
@keyframes show_picture_patronyme
{
    100% 
    {
        top: 5%;
    }
}
@keyframes show_picture
{
    100% 
    {
        width: 86%;
        height: 77%; 
        margin-top: 17%;
        margin-left: 7%;
        margin-bottom: 17%;       
    }
}
@keyframes show_picture_paste
{
    100% 
    {   cursor: zoom-out;
    }
}
@keyframes show_picture_profil
{
    100% 
    {   
        cursor: zoom-out;
    }
}
@keyframes show_picture_menu
{
    100% 
    {
        display: none;
    }
}
@keyframes show_picture_next
{
    100% 
    {
        width: 4%;
        left: 675px;
        position: relative; 
        z-index: 2; 
        top: 18%;
        bottom: 180px;
        padding: 20px;
        cursor: pointer;
        opacity: 0.2;
    }    
}

/* ÉCRANS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 2560px) and (min-height: 1440px) /* 2560 x 1440 */
{
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1920px) and (max-height: 1080px)
{
}
@media screen and (max-width: 1923px) and (max-height: 929px)
{
}
@media screen and (max-width: 1922px) and (max-height: 932px)
{
}
@media screen and (max-width: 1682px) and (max-height: 932px) /* sncf */
{
    #titre-sql,
    .profil-textarea, 
    #achats,
    #links-editable,
    #profil-links-textarea, .profil-links-textarea,
    #profil-links-textarea-name, .profil-links-textarea-name,
    #notes,
    #first, 
    #liens, 
    #bio,
    #notes-create,
    #create-profil{
    background-color: #292929;}
}
@media screen and (max-width: 1600px) and (max-height: 900px)
{
}
@media screen and (max-width: 1536px) and (max-height: 864px)
{
}
@media screen and (max-width: 1440px) and (max-height: 900px)
{
}
@media screen and (max-width: 1366px) and (max-height: 768px)
{
}
@media screen and (max-width: 1280px) and (max-height: 720px)
{
}
@media screen and (max-width: 1024px) and (max-height: 768px)
{

}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 414px) and (max-height: 896px) /* iphone 11 FRONT */
{
    .profil-wrapper{
    width: 400px; 
    height: 680px; 
    margin-top: 8px;
    background-color: #323232;}

    #avant{
    z-index: 100;
    margin-left: 7px;
    top: 33.2%;
    width: 10px;
    height: 20px;
    opacity: 1.0;
    padding: 10px 6px 10px 3px;}

    #apres{
    z-index: 100;
    margin-right: 7px;
    top: 33.2%;
    width: 10px;
    height: 20px;
    opacity: 1.0;
    padding: 10px 3px 10px 6px;}

    #content-settings{
    margin-right: 5px;}

    #englobe{
    margin-top: 6px;}

    #status{
    width: 400px; 
    top: -14;}

    #contact,
    #profil-arobase{
    display: none;}

    #prenom-nom{
    width: 210px; 
    float: left; 
    max-height: 72px;
    overflow: hidden;
    margin-left: 160px;
    top: 11.5%;
    font-size: 18px;}

    #drop-area, #drop-area2{
    margin-left: 10px;}

    #profil-paste-picture, #profil-paste-picture2,
    #profil-paste-picture-freezed, #profil-paste-picture2-freezed,
    #profil-picture, #real-picture,
    #profil-picture-freezed, #real-picture-freezed,
    #del-pic, #del-pic-freeze,
    #del-pic2, #del-pic2-freeze,
    #plus{
    display: none;}

    #arrow1, #arrow1-freezed{
    opacity: 1.0;
    position: absolute;
    z-index: 2;
    top: 125px;
    left: 135px;}
    
    .profil-menu{
    background: linear-gradient(#3d3d3d, rgb(53, 53, 53));}

    #resume,
    #interactions,
    #evaluations{
    border-bottom: solid 2px rgb(43, 43, 43); 
    border-top: solid 1px rgba(27, 27, 27, 0.336);}

    #resume, #interactions{
    border-right: solid 2px rgb(43, 43, 43);}

    #first, #liens, #bio{
    margin-top: 10px;
    margin-left: 8px;
    width: 384px;
    background-color: #2b2b2b;}

    #role-input,
    #birth-textarea,
    #achats,
    #email{
    line-height: 21px;}
    
    #titre-sql{
    width: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #2b2b2b;
    margin-left: 3px;
    margin-top: 0px;}

    .profil-textarea, 
    #achats{
    width: 85%;
    background-color: #2b2b2b;}

    #titles,
    #adresse{
    width: 70%;
    background-color: #2b2b2b;}

    #titresql{
    width: 310px;}

    .opt{
    width: 93.5%;}

    .profil-links-textarea{
    display: none;}

    #links-editable,
    #profil-links-textarea-name, .profil-links-textarea-name{
    background-color: #2b2b2b;}

    #notes{
    width: 384px;
    height: 51%;
    margin-left: 8px;
    background-color: #2b2b2b;}

    #notes-eraser{
    display: none;}
}
/*---------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 896px) and (max-height: 414px) /* iphone 11 SIDE */
{
    #apropos{
    overflow: auto;
    height: 139px;
    width: 614px;}

    #status{
    top: -12;}

    .profil-wrapper{
    width: 610px; 
    height: 300px;
    top: 5px;
    background-color: #323232;}

    #content-settings{
    margin-right: 5px;}

    #profil-entete{
    min-height: 140px;}

    #drop-area, #drop-area2{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    width: 120px;
    height: 120px;}

    #profil-paste-picture, #profil-paste-picture2,
    #profil-paste-picture-freezed, #profil-paste-picture2-freezed,
    #profil-picture, #real-picture,
    #profil-picture-freezed, #real-picture-freezed,
    #del-pic, #del-pic-freeze,
    #del-pic2, #del-pic2-freeze,
    #plus{
    display: none;}

    #prenom-nom{
    top: 20%;
    font-size: 16px;}

    .profil-menu{
    background: linear-gradient(#3d3d3d, rgb(53, 53, 53));
    height: 40px;}

    #resume, #interactions, #evaluations{
    border-bottom: solid 2px rgb(43, 43, 43); 
    border-top: solid 1px rgba(27, 27, 27, 0.336);}

    #resume, #interactions{
    border-right: solid 2px rgb(43, 43, 43);}

    #avant{
    z-index: 100;
    margin-left: 143px;
    top: 48.8%;
    width: 10px;
    height: 18px;
    opacity: 1.0;
    padding: 10px 6px 10px 3px;}

    #apres{
    z-index: 100;
    margin-right: 143px;
    top: 48.8%;
    width: 10px;
    height: 18px;
    opacity: 1.0;
    padding: 10px 3px 10px 6px;}

    #apropos{
    height: 110px;}

    #first, #liens, #bio{
    margin-top: 12px;
    margin-left: 10px;
    width: 590px;
    background-color: #2b2b2b;}

    #titresql{
    width: 500px;
    height: 70px;
    overflow: auto;}
    
    #titles,
    #adresse{
    width: 70%;
    background-color: #2b2b2b;}

    .opt{
    width: 93.5%;}

    .profil-textarea, 
    #achats,
    #links-editable,
    #profil-links-textarea,
    #profil-links-textarea-name{
    background-color: #2b2b2b;}

    #arrow1{
    position: absolute;
    z-index: 10;
    top: 31.2%;
    left: 19.8%;}

    #notes{
    width: 590px;
    margin-bottom: 5px;
    margin-left: 10px;
    background-color: #2b2b2b;}

    #notes-eraser{
    display: none;}
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 375px) and (max-height: 667px) /* iphone 6-7-8 FRONT */
{
    .profil-wrapper{
    width: 350px; 
    height: 510px; 
    margin-bottom: 2px;
    background-color: #323232;}

    #status{
    width: 350px;}

    .profil-entete{
    min-height: 161px;
    height: 161px;}

    #ic-settings{
    margin-right: 5px;}

    #profil-cross{
    margin-right: 0px;}

    #content-settings{
    margin-right: 2px;}

    #drop-area, 
    #drop-area2{
    margin-top: 12px;
    margin-bottom: 7px;}

    #prenom-nom{
    margin-left: 140px;
    top: 14%;
    font-size: 16px;}

    #arrow1, 
    #arrow1-freezed{
    top: 115px;}
    
    #englobe{
    margin-top: 3px;}

    #first, #liens, #bio{
    margin-top: 6px;
    width: 333px;}

    #titre-sql{
    margin-left: 0;}

    #notes{
    width: 333px;
    height: 98px;}
}
/*---------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 667px) and (max-height: 375px) /* iphone 6-7-8 SIDE */
{
    .profil-wrapper{
    height: 300px;} 

    #first, #liens, #bio{
    margin-top: 14px;}

    #drop-area, #drop-area2{
    width: 120px;
    height: 120px;}

    #arrow1{
    top: 31.8%;
    left: 19%;}

    #apropos{
    height: 120px;}

    .profil-menu{
    height: 35px;}

    #notes-eraser{
    display: none;}

    #notes{
    margin-bottom: 8px;}
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
@media screen and (max-width: 375px) and (max-height: 812px) // iphone 10 FRONT
{
}
@media screen and (max-width: 812px) and (max-height: 375px) // iphone 10 SIDE
{
}
*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/