:root {
  --color-dark: #151822;
  --color-primary: #ff025c;
  --color-secondary: #fff;
  --color-txt-intro: #8e8e8e;
  --color-txt-dark-blue: #011427;
  --orange: #fba919;
  --bleu-cyan: #0cbaba;
  --bleu-karamba: #0B81BA;
  --red-error: #d4007a;
  --fushia: #D4007A;
}

html {
  line-height: 1;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  padding: 0;
  margin: 0;
  font-family: "Lato", serif;
  color: var(--color-txt-dark-blue);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
}

h2,
h3,
h4 {
  margin: 0.5rem 0;
}

p {
  margin: 0.5rem 0;
}

.body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  flex-direction: row;
  background-color: #011427;
  height: 68px;
  color: #fff;
}
header .logo {
  display: block;
  width:120px;
  height:55px;
  -o-object-fit: contain;
  object-fit:contain;
  margin: 6px 5px;
}
.header-bloc-menu {
  display: flex;
  flex-direction: row;
  flex: 1;
  border: solid 0px red;
}
.header-bloc-menu p {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  height: 100%;
  border: solid 0px blue;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}
.header-bloc-menu p:hover {
  background-color: var(--bleu-cyan);
}
.header-bloc-menu p.selected {
  background-color: var(--bleu-cyan);
}
.header-bloc-menu p.karamba:hover {
  background-color: var(--fushia);
}
.header-bloc-menu p.karamba.selected {
  background-color: var(--fushia);
}
.header-bloc-profil {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 35px;
  top: 8px;
  cursor: pointer;
  border: solid 1px rgba(255, 255, 255, 0.5);
  border-width: 0 0 0 2px;
}

.header-bloc-profil-bg {
  position: absolute;
  width: 123px;
  height: 68px;
  right: 0;
  top: 0;
}

.header-bloc-profil-bg:hover {
  background-color: var(--bleu-cyan);
}

.header-bloc-profil-bg.selected {
  background-color: var(--bleu-cyan);
}

.header-bloc-profil-bg.karamba:hover {
  background-color: var(--fushia);
}

.header-bloc-profil-bg.karamba.selected{
  background-color: var(--fushia);
}

.header-img-profil {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0 0 0 15px;
}



.header-bloc-params {
  position: absolute;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 68px;
  height: 68px;
  right: 132px;
  top: 0;
  cursor: pointer;
}
.header-bloc-params:hover {
  background-color: var(--bleu-cyan);
}

.header-bloc-params.selected {
  background-color: var(--bleu-cyan);
}
.header-bloc-params.karamba:hover {
  background-color: var(--fushia);
}

.header-bloc-params.karamba.selected {
  background-color: var(--fushia);
}

.header-arrow-down {
  margin: 0 0 0 15px;
}
.header-popin {
  z-index: 100 !important;
  display: flex;
  flex-direction: column;
  width: 435px;
  max-width: 435px;
  background: #fff;
  position: absolute;
  right: 10px;
  top: 75px;
  -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
  color: var(--color-txt-dark-blue);
  padding: 1rem 0;
}
.header-popin > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  margin: 5px 1rem;
  min-height: 70px;
  cursor: pointer;
}
.header-popin > div div {
  padding: 0 0 0 15px;
}
.header-popin > div .img-profil {
  margin: 0;
}
.header-popin p {
  font-size: 0.9rem;
  line-height: 0.8rem;
}

.header-popin p:first-child {
  font-size: 1.1rem;
}

.header-popin p:first-child:hover {
  color: var(--bleu-cyan);
}

.img-logout {
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin: 0 0 0 15px;
  -o-object-fit: cover;
  object-fit: cover;
}

main {
  display: flex;
  flex: 1 1 auto;
  justify-content: start;
  overflow-x: auto;
}

.wrapper {
  display: flex;
  flex: 1 1 auto;
  justify-content: start;
  padding: 1rem;
}

/*
les colonnes Home
*/
.content {
  flex: 1;
  background-color: #fff;
  padding: 0;
  margin: 2rem 0 2rem 2rem;
  min-width: 270px;
  max-width: 390px;
  -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
}

.content h2 {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 3.2rem;
  background-color: #f2f3f4;
  height: 51px;
  padding: 0 0 0 2rem;
}
.content-column {
  display: flex;
  flex-direction: column;
}

.body-content {
  display: flex;
  flex: 1 1 0;
  width: 100%;
  flex-direction: column;
  overflow-y: auto;
}
.footer-content {
  display: flex;
  flex: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 80px;
  width: 100%;
}

.footer-content button {
  width: 70%;
  height: 2.3rem;
  border: 0;
  border-radius: 2rem;
  background: var(--orange);
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
}

.footer-content button.karamba {
  background: var(--fushia)
}

.footer-content button:hover {
  background: var(--bleu-cyan);
}

.footer-content button.karambe:hover {
  background: var(--bleu-karamba);
}

/**
Edit Account
*/
.wrapper.account {
  padding: 1rem 2rem;
}
.large-content {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: row;
  background-color: #fff;
  padding: 0;
  margin: 1rem auto;
  -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
  max-width: 1480px;
}
.large-content-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  background-color: #fff;
  min-width: 290px;
  padding: 0;
}
.large-content-column:first-child {
  flex: 1;
  background-color: #f2f3f4;
  align-items: center;
}


.large-content-column .body-content {
  align-items: center;
  justify-content: start;
}

.large-content-column .body-content img {
  position: absolute;
  width: 215px;
  height: 270px;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.large-content-column .body-content img.overlay {
  opacity: 0;
}

.large-content-column .body-content img.overlay:hover {
  opacity: 0.8;
}

.large-content-column .body-content .bloc-content-profil {
  margin: 2rem 0 0 0;
}

.bloc-content-profil {
  width: 215px;
  -o-object-fit: cover;
  object-fit: cover;
  border: solid 0px red;
}
.bloc-content-profil:first-child {
  height: 270px;
}
.bloc-content-profil h2 {
  font-size: 1.1rem;
  font-weight: bold;
}
.bloc-content-profil h3 {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0.8rem 0;
}
.bloc-content-profil p,
.p {
  font-size: 13px;
  font-weight: 300;
  margin: 0 0 1.5rem 0;
}

.col-2 .bloc-content-profil {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 80%;
  min-height: 30px;
  border: solid 0px blue;
}
.col-2 h3 {
  margin: 2rem 0 0 2rem;
  text-transform: uppercase;
}
.col-2 p,
.p {
  margin: 1rem 0 1rem 2rem;
  color: var(--color-txt-dark-blue);
}


.bloc-content-profil input {
  margin: 14px 0 1rem 31px;
}
.col-2 .hoverable,
.p {
  cursor: pointer;
}
.col-2 .hoverable:hover {
  font-size: 0;
}
.col-2 .hoverable:hover:after {
  content: attr(data-hover);
  font-size: 13px;
  color: var(--bleu-cyan);
}

.col-2 .modify-password {
  cursor: pointer;
}

.col-2 .modify-password:hover {
  font-size: 1rem;
  color: var(--bleu-cyan);
}

.col-2 input {
  border-width: 0 0 1px 0;
}


.col-2 .container-radio {
  display: flex;
  flex-direction: row;
  margin: 1rem 0 0 -1rem;
}

/**
** Boutons radio edit-profil
**/
.container {
  display: block;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 300;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 10px 0 10px 3rem;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 13px;
  width: 13px;
  background-color: #fff;
  border:solid 1px #555;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #fff;
  border-color: var(--bleu-cyan);
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: var(--bleu-cyan);
  border-color: var(--bleu-cyan);
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark.karamba {
  background-color: #fff;
  border-color: var(--bleu-karamba);
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark.karamba {
  background-color: var(--bleu-karamba);
  border-color: var(--bleu-karamba);
}

/**
** Change password bloc
**/

.container-change-password {
  position: absolute;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 75%;
  height: 100%;
  right: 0;
  border: solid 0px red;
}

.bloc-change-password {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 390px;
  height: 470px;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
}

.bloc-change-password .error {
  color: #d4007a;
}

.bloc-change-password h2 {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 3.2rem;
  background-color: #f2f3f4;
  height: 51px;
  padding: 0 0 0 2rem;
  text-transform: uppercase;
}

.bloc-change-password .body-password {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: solid 0px red;
}

.body-password .bloc-form {
  margin: 0 0 1rem 0;
  width: 90%;
  border-radius: 10px;
}
.body-password .lost-password {
  position: relative;
  text-align: right;
  font-size: 0.8rem;
  margin-top: 0.6rem;
  cursor: pointer;
  font-weight: 100;
}
.body-password .input-text,
.body-password label {
  font-size: 1.3rem;
  padding: 0.2rem;
  border: 0;
}
.body-password label {
  font-size: 13px;
  padding: 0.2rem;
  border: 0;
  text-transform: uppercase;
}
.body-password .patern {
  border: solid #000;
  border-width: 0 0 1px 0;
  position: relative;
}
.body-password .patern-see {
  position: absolute;
  font-size: 0.9rem;
  bottom: 0.2rem;
  right: 0.1rem;
  cursor: pointer;
}

.body-password .line-validate {
  display: flex;
  flex-direction: row;
  width: 90%;
  margin: 0.6rem 0 0 0;
}
.body-password .line-validate img {
  width: 20px;
  height: 20px;
}
.body-password .line-validate p {
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  margin: 0 0 0 1rem;
}

.bloc-change-password .line-buttons {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-evenly;
  border: solid 0px blue;
  width: 100%;
  max-height: 80px;
}

.bloc-change-password .line-buttons button,
.circles-like .top-bar .bloc-buttons button,
.circles-like .circle-body .footer-content button{
  max-width: 70%;
  padding: 0 4rem;
  height: 2.3rem;
  border: 0;
  border-radius: 2rem;
  background: var(--orange);
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
}

.circles-like .circle-body .footer-content button.karamba {
  background-color: var(--fushia);
}

.bloc-change-password .line-buttons button:hover,
.circles-like .top-bar .bloc-buttons button:hover,
.circles-like .circle-body .footer-content button:hover {
  background: var(--bleu-cyan);
}
.circles-like .circle-body .footer-content button.karamba:hover {
  background: var(--bleu-karamba);
}

.bloc-change-password .line-buttons button.negatif,
.circles-like .top-bar .bloc-buttons button.negatif,
.circles-like .circle-body .footer-content button.negatif{
  max-width: 70%;
  padding: 0 2rem;
  height: 2.3rem;
  border: solid 2px var(--orange);
  border-radius: 2rem;
  background: #fff;
  font-size: 13px;
  color: var(--orange);
  cursor: pointer;
  text-transform: uppercase;
}


.circles-like .circle-body .footer-content button.negatif.karamba {
  color:var(--fushia);
  border-color: var(--fushia);
}

.bloc-change-password .line-buttons button.negatif:hover,
.circles-like .top-bar .bloc-buttons  button.negatif:hover,
.circles-like .circle-body .footer-content button.negatif:hover{
  background-color: #fff;
  color: var(--bleu-cyan);
  border-color: var(--bleu-cyan);
}
.circles-like .circle-body .footer-content button.negatif.karamba:hover{
  color: var(--bleu-karamba);
  border-color: var(--bleu-karamba);
}

/**
*** Circles
**/

.wrapper.circles-like {
  flex: 1;
  flex-direction: column;
  padding: 1rem 2rem;
  border: solid 0px red;
}

.circles-like .large-content {
  display: flex;
  flex: 1;
  width: 100%;
  border: solid 0px blue;
}
.circles-like .large-content.top-bar {
  max-height: 110px;
}
.circles-like .large-content.top-bar .large-content-column {
  display: flex;
  justify-content: start;
  align-items: start;
}

.circles-like .large-content-column.col-3 {
  display: flex;
  flex: 3;
  flex-direction: row;
  border: solid 0px red;
}

/**
** Circles top-bar
**/

.circles-like .top-bar .large-content-column h2 {
  display: flex;
  font-size: 15px;
  font-weight: 500;
  margin: 2rem 1.2rem;
  padding: 0;
  text-transform: uppercase;
}

.circles-like .top-bar .large-content-column.col-3 h2 {
  margin: 0 0 0.5rem 0;
  padding: 0;
  font-size: 13px;
}

.circles-like .top-bar .large-content-column.col-3 {
  align-items: center;
}

.circles-like .top-bar .bloc-search {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0 3rem;
  border: solid 0px blue;
}
.circles-like .top-bar .bloc-search .bottom-line {
  display: flex;
  flex-direction: row;
}
.circles-like .top-bar .bloc-search .bottom-line img {
  width: 24px;
  height: 24px;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0 0 0 15px;
}
.circles-like .top-bar .hoverable,
.p {
  cursor: pointer;
  font-weight: 300;
  min-width: 200px;
}
.circles-like .top-bar .hoverable:hover {
  font-size: 0;
}
.circles-like .top-bar .hoverable:hover:after {
  content: attr(data-hover);
  font-size: 1rem;
  color: var(--bleu-cyan);
}

.circles-like .vs__search::placeholder,
.circles-like .vs__dropdown-toggle,
.circles-like .vs__dropdown-menu {
  font-family: "Lato", serif;
  font-weight: 300;
  width: 250px;
  min-width: 250px;
  background: #ffffff;
  color: #394066;
  text-transform: none;
  border: none;
  border-bottom: solid 1px #aaa;
  margin-left: -10px;
}
.circles-like .vs__search::placeholder{
  border-bottom: 0px;
}
.circles-like .vs__search::placeholder {
  font-family: "Lato", serif;
  text-transform: none;
}

.circles-like .vs__dropdown-option--highlight {
  background: var(--bleu-cyan);
  color: #fff;
}

.circles-like .vs__clear,
.circles-like .vs__open-indicator {
  fill: var(--color-txt-dark-blue);
    
}
.circles-like .vs__open-indicator {
  background: url("/assets/img/arrow_down_black.png") no-repeat;
  width:10px;
  height:5px; 
}

.circles-like .top-bar .bloc-buttons {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0 3rem;
  border: solid 0px blue;
}

.circles-like .top-bar .bloc-buttons button {
  margin: 0 0 0 .5rem;
}


/**
** Circles body
**/

.circles-like .large-content-column .body-content img {
  position: absolute;
  width: 215px;
  height: 165px;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.circles-like .large-content-column .body-content img.overlay {
  opacity: 0;
}

.circles-like .large-content-column .body-content img.overlay:hover {
  opacity: 0.8;
}

.circles-like .large-content-column .body-content .bloc-content-profil {
  margin: 2rem 0 0 0;
}

.circles-like .bloc-content-profil {
  width: 215px;
  -o-object-fit: cover;
  object-fit: cover;
  border: solid 0px red;
}
.circles-like .bloc-content-profil {
  height: 165px;
}
.circles-like .bloc-content-profil:first-child {
  height: 2rem;
  width: 100%;
}
.circles-like .bloc-content-profil:first-child h2 {
  display: flex;
  font-size: 15px;
  font-weight: 500;
  margin: 0 1.2rem;
  padding: 0;
  text-transform: uppercase;
}

.circles-like .circle-body .footer-content{
  flex-direction: row;
}

.circles-like .circle-body .footer-content button,
.circles-like .circle-body .footer-content button.negatif {
  margin:0 2rem 0 0;
  max-width: none;
  width: auto;
  padding:0 1rem;
}
.circles-like .circle-body .footer-content button:first-child {
  margin:0 1rem 0 2rem;
}

.circles-like .circle-body .large-content-column.col-3  {
  display:flex;
  flex-direction: column;
}

.circles-like .circle-body .large-content-column.col-3 .wrapper{
  display: flex;
  flex-direction: column;
  padding:0;
  flex:1;
  width:100%;
}

.circles-like .circle-body .large-content-column.col-3 .top{
  display:flex;
  flex-direction: row;
  flex:1;
  margin:1rem 2rem 0 2rem;
}
.circles-like .circle-body .large-content-column.col-3 .bottom{
  display: flex;
  flex:3;
  background-color: #eee;
  margin: 0 2rem 2rem 2rem;
}

.bloc-content-circle {
  display: flex;
  flex-direction: column;
  flex: 2;
  justify-content: flex-start;
  min-height: 100px;
}
.top .bloc-content-circle:first-child {
  flex: 1;
}
.bloc-content-circle h3 {
  font-size: 13px;
  font-weight: 500;
  margin: 1.5rem 0 1rem 2rem;
  text-transform: uppercase;
}
.bloc-content-circle p,
.p {
  font-family: "Lato", serif;
  font-size:13px;
  font-weight: 300;
  margin-left:2rem;
  color: var(--color-txt-dark-blue);
}
.bloc-content-circle .hoverable,
.bloc-content-circle .p {
  cursor: pointer;
}
.bloc-content-circle .hoverable:hover {
  font-size: 0;
}
.bloc-content-circle .hoverable:hover:after {
  content: attr(data-hover);
  font-size: 13px;
  color: var(--bleu-cyan);
}

.bloc-content-circle input,textarea {
  font-family: "Lato", serif;
  font-size: 13px;
  border-width: 0 0 1px 0;
  margin:6px 0 4px 1.9rem
}
.bottom .bloc-content-circle  input {
  background-color: #eee;
  border-color: #aaa;
}

.bloc-content-circle .container-radio {
  display: flex;
  flex-direction: row;
  margin: 0 0 0 -1rem;
}

.column-content-circle {
  display: flex;
  flex-direction: column;
  flex: 2;
  justify-content: center;
}


.bottom .bloc-content-circle:first-child {
  flex: 1;
  max-height:50px;
  min-height: 50px;
}

.bottom .bloc-content-circle:first-child h3 {
  margin: 1.5rem 0 0 2rem;
}

 .bloc-content-circle.for-drop-down,
 .bloc-content-profil.for-drop-down,
 .bloc-content-circle.set-position-relative,
  .bloc-content-profil.set-position-relative {
  position: relative;
}

.set-position-relative {
  position: relative;
  border:solid 0px red;
}

.overlay-block{
  position: absolute;
  border:solid 0px green;
  top:0;
  width: 100%;
  height:100%;
}

 .bloc-content-circle .drop-down,
 .bloc-content-circle .drop-down-group,
 .bloc-content-profil .drop-down {
  position: absolute;
  top:1.2rem;
  left:10px;
  background-color: none;
}

.bloc-content-circle .drop-down-group{
  top: 3.2rem;
  left: 2rem;
}

 .bloc-content-circle .drop-down.opened,
 .bloc-content-circle .drop-down-group.opened,
 .bloc-content-profil .drop-down.opened {
  background-color: white;
  -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
  max-height: 200px;
  overflow: hidden;
  overflow-y:  auto;
  z-index: 100;
}

.bloc-content-profil .drop-down,
.bloc-content-profil .drop-down.opened {
  top:1.7rem;
}

.bloc-content-circle .drop-down h3,
.bloc-content-circle .drop-down-group h3,
.bloc-content-profil .drop-down h3 {
  position: relative;
  min-width: 85px;
  max-width:85px;
  margin:0;
  padding:.3rem;
  cursor: pointer;
  text-align: center;
}

.bloc-content-circle .drop-down-group h3{
  text-transform: capitalize;
  max-width:unset;
  padding-right:25px;
}

.bloc-content-circle .drop-down-group h3.last{
  background-color: #eee;
  border-top: solid 1px var(--orange);
  height: 26px;
  color: var(--orange);
  font-size: 15px;
  font-weight: 600;
  line-height: 26px;
  padding-left: 30px;
  margin-top:10px;
}

.bloc-content-circle .drop-down-group h3.last img{
  left:-5px;
}

.bloc-content-circle .drop-down h3 img,
.bloc-content-circle .drop-down-group h3 img,
.bloc-content-profil .drop-down h3 img{
  margin: 0 0 .2rem 1.4rem;
  position: absolute;
  top:8px;
  right:5px;
}
/*.bloc-content-circle .drop-down.opened h3 img,
.bloc-content-profil .drop-down.opened h3 img{
  position: absolute;
  top:8px;
  right:5px;
}*/
.bloc-content-circle .drop-down.opened h3:hover,
.bloc-content-profil .drop-down.opened h3:hover{
  background-color: #fff;
}

/**
** ceo column
**/

.wrapper.team-list{
  position: relative;
  padding: 0;
}

.container-alert {
  position: absolute;
  width: 100%;
  height: 100%;
}

.ceo-column>h2{
  position:relative;
  text-transform: uppercase;
}

.ceo-column>h2 span{
  display:flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px 0;
  right:15px;
  top:8px;
  width:35px;
  height:30px;
  line-height: 10px;
  font-weight: bold;
  font-size: 30px;
  background-color: var(--orange);
  border-radius: 25px;
  color:#fff;
  cursor: pointer;
}
.ceo-column>h2 span:hover{
  background-color: var(--bleu-cyan);
}

/**
** user item
**/

.user-item{
  display:flex;
  flex-direction: row;
  width: 100%;
  height: 83px;
  border-bottom: solid 1px #ccc;
}

.container-avatar-body{
  display: flex;
  flex:4;
  height: 83px;
  cursor: pointer;
}

.container-avatar-body:hover{
  background-color: #f2f3f4;
}

.container-avatar-body-clicked{
  background-color: #f2f3f4;
}

.user-item .col-avatar{
  display:flex;
  align-items: center;
  justify-content: center;
  width:73px;
  min-width: 73px;
  height: 83px;
}

.user-item .col-avatar img{ 
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
}

.user-item .col-body{
  display:flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  flex:1;
  min-height: 83px;
  background: none;
}

.user-item .col-body h2{
  display: flex;
  color:#011427;
  font-size:15px;
  font-weight: 600; 
  background-color: unset;
  padding:0;
  margin:0 0 0 5px;
  line-height: normal;
  height:unset;
}

.user-item .col-body h3{
  display: flex;
  color:#011427;
  margin:0 0 0 5px;
  padding:1;
  font-size:11px;
  line-height: normal;
  font-weight: 400;
  background-color: unset;
}

.user-item .col-body h4{
  display: flex;
  color:#011427;
  margin:5px 0 0 5px;
  padding:1;
  font-size:11px;
  line-height: normal;
  font-weight: 300;
  background-color: unset;
}

.user-item .col-buttons{
  position:relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  flex:1;
  min-height: 83px;
}

.user-item .col-buttons .cross{
  display:flex;
  width:16px;
  height:16px;
  background: url("/assets/img/croix.png") no-repeat;
  cursor: pointer;;
}

.user-item .col-buttons .cross:hover{
  background: url("/assets/img/croix_bleu.png") no-repeat;
}

.user-item .col-buttons .pen{
  display:flex;
  width:16px;
  height:16px;
  background: url("/assets/img/crayon.png") no-repeat;
  cursor: pointer;;
}

.user-item .col-buttons .pen:hover{
  background: url("/assets/img/crayon_bleu.png") no-repeat;
}

.user-item .col-buttons .empty,
.user-item .col-buttons .empty:hover{
  background: unset;
  cursor: auto;
}

/**
** specific new-user
**/

.new-user-bottom{
  display: flex;
  flex:3;
  background-color: #fff;
  margin: 0 2rem 5rem 2rem;
}

.circles-like.new-user .large-content-column .body-content img {
  height: 275px;
  border:solid 0px red;
}

.circles-like .large-content-column .body-content .bloc-content-profil.new-user-image {
  margin: 1rem 0 0 0;
}

/**
** specific edit-user
**/

.edit-user-bottom{
  display: flex;
  background-color: #fff;  
  margin: 1rem 2rem 5rem 2rem;
}

.circles-like.edit-user .large-content-column .body-content img {
  height: 275px;
  border:solid 0px red;
}

.circles-like .large-content-column .body-content .bloc-content-profil.edit-user-image {
  margin: 2rem 0 0 0;
}
.circles-like.edit-user .bloc-content-profil:first-child {
  height: 275px;
  width: 215px;
  margin: 2rem 0 0 0;
}
.circles-like.edit-user .bloc-content-profil.moyenne {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height:unset;
  margin:0;
}
.circles-like.edit-user .bloc-content-profil.moyenne h2 {
  font-size:18px;
  text-transform: uppercase;
  margin:0.5rem 0 0 0;
  font-weight: 500;
}
.circles-like.edit-user .bloc-content-profil.moyenne h3 {
  font-size:18px;
  margin:0.2rem 0 0 0;
  font-weight: 300;
}
.circles-like.edit-user .bloc-content-profil.moyenne h3 .pctage {
  color:var(--bleu-cyan);
  font-weight: 700;;
  font-size:22px;
}


.circles-like.edit-user .bloc-content-circle .profil-level,
.bloc-content-circle.profil-list .profil-level  {
  font-size:13px;
  font-weight: 300;
}
.circles-like.edit-user .bloc-content-circle .profil-level-name ,
.bloc-content-circle.profil-list .profil-level-name  {
  font-size:13px;
  margin: .1rem 0 0 2rem;
  font-weight: 200;
}

.circles-like.edit-user .bloc-content-circle {
  min-height:120px;
}

.function-selected{
  background-color: var(--bleu-cyan);
}


.transparent-lightbox-bg {
  position: absolute;
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(1, 20, 39, 0.8);
}
.pointer{
  cursor: pointer;
}