/********************************************
* *****************  VARS  ******************
* ******************************************/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');
:root{
	--color-blue: #3303F1;
	--color-blue-dark: #170073;
	--color-yellow: #FDFF9A;
	--color-green: #74F5A6;
	--color-green-light: #C7FFEE;  
	--color-grey-light: rgba(33,37,41,0.25);
											                                                            --color-success: #2ecc71;
											                                                            --color-error: #e74c3c;
											                                                            --color-edit: #e15d20;
											  --font-family: 'Montserrat', sans-serif; 

											                                                              --trans-05: all 0.5s ease;
											                                                              --trans-03: all 0.3s ease;
											                                                              --trans-02: all 0.2s ease;

	
											                                                              --panel-color : #FFF;
											                                                              --disable-color : #CCC;



											                                                              --border-color : #fffFFF;
											                                                              --border-color2 : #000;
											                                                              --border-color3 : #1373E5;
											                                                              --border-color4 : #CCC;


											                                                              --toggler-color : #fff;
											                                                              --box-1-color : #4DA3FF;
											                                                              --box-2-color : #4DA3FF;
											                                                              --box-3-color : #4DA3FF;





}
body.dark{
											                                                  --panel-color : #242526;
											  --color-blue : #CCC;

											                                                  --toggler-color : #fff;

											                                                  --border-color : #4D4C4C;
											                                                  --border-color2 : #4D4C4C;
											                                                  --border-color3 :#4D4C4C;
											                                                  --border-color4 : #4D4C4C;

											                                                  --box-1-color : #3A3B3C;
											                                                  --box-2-color : #3A3B3C;
											                                                  --box-3-color : #3A3B3C;
											                                                  
}
/********************************************
* *****************  GENERAL  ***************
* ******************************************/
											body, main > *{
											  font-family: var(--font-family);
											  font-size: 2rem;
											}
											a{
											  text-decoration: none; 
											}
											a:not('.button'):hover{
											  text-decoration: underline; 
											  color:var(--color-white);
											}
											main{top:140px;position: relative;}

											/********************************************
											* *****************  SHADOW  ****************
											* ******************************************/
											.bshadow1{box-shadow: 0 10px 15px -3px rgba(0,0,0,.07),0 4px 6px -2px rgba(0,0,0,.05);}
											.bshadow2{box-shadow: 0px 0px 10px #333;}
/********************************************
* ***************  BACKGROUND  **************
* ******************************************/
											
.backblue{background:var(--color-blue)}
											.backwhite-10{background: var(--color-white-10pc)}
											.backyellow{background:var(--color-yellow)}
											.backgrey{background:var(--color-grey-light)}
											  
											/********************************************
											* ***************  BORDER  **************
											* ******************************************/
											.borderblack{border-color:var(--color-black)}

											/********************************************
											* ****************  DIMENSIONS  *************
											* ******************************************/


											/********************************************
											* *****************  FONT  ******************
											* ******************************************/
											.ftwhite{color:var(--color-white)}
											.ftblack{color:var(--color-black)}
											.ftblue{color:var(--color-blue)}
											 /********************************************
											 * ****************  BORDERS * ***************
											 * ******************************************/
											.borderwhite {
											  border-color: var(--color-white);
											}

											 /********************************************
											 * ****************  TINY MCE ****************
											 * ******************************************/

											 /********************************************
											 * ****************  ACCORDION ***************
											 * ******************************************/


											/********************************************
											* **************  AUTOCOMPLETE  *************
											* ******************************************/
											.ui-helper-hidden-accessible{display: none}
											.ui-menu {
											  background-color: var(--color-white1);
											  position: absolute;
											  top: 100%;
											  z-index: 1;
											  border-left: 1px solid;
											  border-right: 1px solid;
											  border-bottom: 1px solid;
											  border-color:var(--color-grey-light);
											  border-radius: 5px;
											}
											.ui-menu .ui-menu-item{
											  display: block;
											  cursor: pointer;
											  color:var(--color-black);
											  padding: 5px 0;
											}



											/********************************************
											* **************  PROGRESS BAR  *************
											* ******************************************/
											.progress.styled {
											  height: 3rem;
											  border-radius: 2.25rem;
											}
											.progress.styled .progress-bar-striped {
											  background-image:none;
											  background-size: 1rem 1rem;
											}
											.progress.styled .progress-bar {
											  background-color: #7bbe5f;
											  border-radius: 2.25rem;
											}


/********************************************
* ******************  CTA  ******************
* ******************************************/
											i.hover:hover {
											  color: var(--color-edit);
											}
.CTA{
  border-radius: 10px;
  border: 2px solid;
  text-decoration: none;
  padding: 10px 20px;
  line-height: 1;
}
											.CTA1{
											  border-radius: 10px;
											  border: 2px solid;
											  text-decoration: none;
											  padding: 3px 20px;
											}
											.CTA2{
											  border-radius: 50px;
											  border: 2px solid;
											  text-decoration: none;
											  padding: 10px 20px;
											  line-height: 1;  
											  width: 40px;
											  height: 44px;
											}
											.CTABlue{
											  background-color: var(--color-blue-dark);
											  color: var(--color-white);
											  transition: all .2s ease-out;
											  border-color: var(--color-blue-dark);
											}
											.CTABlue:hover{
											  background-color: var(--color-white);
											  color: var(--color-blue);
											}
											.CTABlue:hover i.ftwhite{
											  color: var(--color-blue);
											}
											.CTABlueB{
											  background-color: var(--color-blue);
											  color: var(--color-white);
											  transition: all .2s ease-out;
											  border-color: var(--color-blue);
											}
											.CTABlueB:hover{
											  background-color: var(--color-blue-dark);
											  color: var(--color-white);
											}

											.CTAGreen{
											  background-color: var(--color-green);
											  color: var(--color-black);
											  transition: all .2s ease-out;
											  border-color: var( --color-green);
											}
											.CTAGreen:hover{
											  background-color: var(--color-white);
											  color: var(--color-green);
											}

											.CTAWhite{
											  background-color: var(--color-blue);
											  color: var(--color-white);
											  transition: all .2s ease-out;
											  border-color: var(--color-white);
											}
											.CTAWhite:hover{
											  background-color: var(--color-white);
											  color: var(--color-blue);
											}
											.CTABTN{
											  border-bottom: 4px solid var(--color-black);
											  font-weight: bold;
											  font-size: 1.8rem;
											  color:var(--color-black);
											  line-height: 2.3rem;
											  padding-bottom: 5px;
											}

/********************************************
* *****************  ELEMENT ****************
* ******************************************/
.template_relation_content{transition:all 0.5s ease;}
.template_relation_content.active{height: initial;}

.blocTitle{cursor: pointer;}
.blocContent{overflow: hidden;}
											/********************************************
											* *****************  DROPZONE ***************
											* ******************************************/
											.dropzone{background:transparent !important;}
											.dz-default.dz-message{display: none;}
											.dropzone .dz-preview.dz-image-preview{background:transparent !important;}
											.dropzone.dz-max-files-reached{pointer-events: none;}
											.dropzone.dz-max-files-reached .defaultremoveDrop{pointer-events: initial;}
											.dropzone.dz-clickable .defaultremoveDrop *{cursor:pointer;}
											.dropzone:not(.dz-max-files-reached)::after {
											  min-height: 150px !important;
											  min-width: inherit !important;
											  text-align: center;
											  border-radius:10px;  
											  padding: 40px 5px !important;  
											  position: absolute;
											  top: 0;
											}
											/*.dropzone.max-files-reached::after {
											  background-color: transparent;
											  padding: 40px 70px;
											  content: ' '!important;
											  display: block;
											  background-image: none;
											  background-repeat: no-repeat;
											  background-position: 20px center;
											  background-size: 27px 23px;
											  font-size: 1.8rem;
											  margin: 10px 0;
											  width: 100%;
											  border: 2px dashed rgba(0, 0, 0, 0.3);
											}*/
											.dropzone.dz-max-files-reached::after {
											  margin: 10px 0;
											  border: 2px dashed rgba(0, 0, 0, 0.3);
											  border-radius: 10px;
											  content: ' '!important;
											  display: block;
											  width: 100%;
											  min-height: 150px !important;
											  min-width: inherit !important;
											  text-align: center;
											  padding: 40px 5px !important;  
											  position: absolute;
											  top: 0;
											}
											.dropzone .dz-image {
											  border-radius: 20px;
											  background: #999;
											  background: linear-gradient(to bottom, #eee, #a6a3a3);
											}
											.dz-processing.dz-success.dz-complete, .dz-preview{display: inline-block;margin: 10px !important;}

											.dz-image, #preview-template{width:100%; margin-top:15px}
											.dz-image img{text-align: center;
											  object-fit: cover;
											  max-width: 100%;
											  height: 100%;}
											.fadrop{position: absolute;
											  left:50%;
											  top:50%;
											  transform:translate(-50%, -50%);
											  font-size:9rem;
											  opacity: .1;
											}
											#preview-template{
											  border-radius: 20px;
											  overflow: hidden;
											  width: 120px;
											  height: 120px;
											  position: relative;
											  display: block;
											  z-index: 10;
											}
											/********************************************
											* ******************  FIELD *****************
											* ******************************************/
											.bloc_on_error{background: red}
											.inputBox{position: relative;}

											.inputBox input, .inputBox textarea, .inputBox select{
											  width: 100%;
											  padding: 7px;
											  border: 1px solid var(--color-grey-light);
											  background: var(--color-white1);
											  border-radius: 5px;
											  outline: none;
											  color: var(--color-black);
											  font-size: 1em;
											  transition: 0.5s;
											}
											.inputBox textarea{
											  white-space: break-spaces;
											}
											.btnlist{
											  width: 100%;
											  padding: 7px;
											  border: 1px solid var(--color-grey-light);
											  background: var(--color-white1);
											  border-radius: 5px;
											  outline: none;
											  font-size: 0.8em;
											  color: var(--color-black);
											  text-align: left;
											  transition: 0.5s;
											}

											.inputBox span {
											  position: absolute;
											  left: 0;
											  padding: 10px;
											  pointer-events: none;
											  font-size: 0.8em;
											  color: var(--color-black);
											  text-transform: uppercase;
											  transition: 0.5s;
											}

											.inputBox input:valid ~ span, .inputBox textarea:valid ~ span, .inputBox select:valid ~ span,
											.inputBox input:focus ~ span, .inputBox textarea:focus ~ span, .inputBox select:focus ~ span{
											  color: var(--color-black);
											  transform: translateX(10px) translateY(-11px);
											  font-size: 0.65em;
											  padding: 0 15px;
											  background: var(--color-white1);
											  border-left: 1px solid var(--color-black);
											  border-right: 1px solid var(--color-black);
											  letter-spacing: 0.2em;
											}

											.inputBox:nth-child(2) input:valid ~ span,
											.inputBox:nth-child(2) input:focus ~ span{
											background :var(--color-black); ;
											color: var(--color-white);
											border-radius: 2px;
											}

											.inputBox input:valid, .inputBox textarea:valid, .inputBox select:valid
											.inputBox input:focus, .inputBox textarea:focus, .inputBox select:focus{
											  border : 1px solid var(--color-grey-light);
											}

											form label {
											  font-size: smaller;
											  margin-bottom: 0.5em;
											  font-weight: 600;
											}

											form label:not(.nowdt) {
											  width: 100%;
											}

											input::placeholder{font-size: 2rem}
											/*******************************************
											* ************* BOUTON ***************
											* *****************************************/






											 .custom-btn {
											                                                background-color: var(--color-blue);
											                                                color: var(--color-white);
											                                                height: 50px;
											                                                border-radius: 10px;
											                                                font-size: 1rem;
											                                                border: 0 solid transparent;
											                                                cursor: pointer;
											                                                place-items: center; 
											                                                text-decoration: none;
											                                                }
											                                                .custom-btn-2 {
											                                                background-color: var(--color-blue);
											                                                color: var(--color-white);
											                                                height: 35px;
											                                                font-size: 1rem;
											                                                border: 0 solid transparent;
											                                                cursor: pointer;
											                                                text-decoration: none;
											                                                border-radius: 5px;
											                                                }
											                                                .custom-btn-3 {
											                                                  background-color: var(--panel-color);
											                                                  color: var(--color-blue);
											                                                  height: 45px;
											                                                  font-size: 1rem;
											                                                  border: 1px solid ;
											                                                  border-color:var(--border-color3) ;
											                                                  cursor: pointer;
											                                                  text-decoration: none;
											                                                  border-radius: 5px;
											                                                  }

											                                              

											                                                .custom-btn:hover, .custom-btn-2:hover {
											                                                background-color: var(--panel-color);
											                                                color: var(--color-blue);
											                                                border: 1px solid var(--border-color3);
											                                                }
											                                                .custom-btn-3:hover >*{
											                                                  background-color: var(--color-blue);
											                                                  color: var(--color-white);
											                                                  }
											                                                  .custom-btn-3:hover {
											                                                    background-color: var(--color-blue);
											                                                    }









											/********************************************
											* ***************  photon-input ************
											* ******************************************/
											.photon-input{
											  -webkit-box-sizing: border-box !important;
											}
											.photon-input:focus {
											  width: 100% !important;
											}
											.photon-autocomplete{padding:0;}
											.photon-autocomplete li{width:100%;}
											.photon-autocomplete li:hover{color:#FFF}

											/********************************************
											* ***************  MEDIA QUERIES ************
											* ******************************************/
											@media (max-width: 575.98px) {  }

											@media (max-width: 767.98px) {  }

											@media (max-width: 991.98px) {  }

											@media (max-width: 1199.98px) {  }

											@media (max-width: 1399.98px) {  }











											                                               

											                                                /*******************************************
											                                                * ********* LIENS **********
											                                                * *****************************************/

											                                                .style-link{
											                                                color: var(--color-black);
											                                                cursor: pointer;
											                                                }
											                                                .style-link:hover{
											                                                color: var(--color-blue);
											                                                font-size: 17px;
											                                                }

											                                                /*******************************************
											                                                * ********* HEADER **********
											                                                * *****************************************/
											                                                .bg{
											                                                background-color: var(--color-blue);
											                                                }

											                                                li a.surl {
											                                                position: relative;
											                                                display: inline;
											                                                padding: 10px 20px; 
											                                                white-space: nowrap;
											                                                overflow: hidden; 
											                                                }

											                                                li a.surl::before {
											                                                content: "";
											                                                position: absolute;
											                                                width: 0;
											                                                height: 3px;
											                                                bottom: 0;
											                                                left: 0;
											                                                background: rgba(255, 255, 255, 1); 
											                                                transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
											                                                }

											                                                li a.surl:hover::before {
											                                                width: 100%;
											                                                }
											                                                li a.surl:active {
											                                                  font-weight: bold;
											                                                }

											                                                @media (max-width: 992px) {
											                                                  #navbarSupportedContent {
											                                                    margin-top: 15px;
											                                                  }
											                                                  li.nav-item{
											                                                    padding-bottom: 12px;
											                                                  }
											                                                  li a.surl::before {
											                                                    display: none; 
											                                                  }
											                                                  li a.surl:hover {
											                                                    font-weight: bold; 
											                                                  }
											                                                }


											                                                .btn-edit {
											                                                background: var(--color-blue) ;
											                                                color: var(--color-white);
											                                                }


											                                                /*******************************************
											                                                * ********* DROP ZONE **********
											                                                * *****************************************/


											                                                .wrap-drop h4 {
											                                                color: var(--color-blue);
											                                                font-size: 27px;
											                                                font-weight: 600;
											                                                text-align: center;
											                                                }

											                                                .wrap-drop .drop-form{
											                                                display: flex;
											                                                align-items: center;
											                                                justify-content: center;
											                                                flex-direction: column;
											                                                border-radius: 5px;
											                                                height: 100px;
											                                                margin: 30px;
											                                                cursor: pointer;
											                                                }
											                                                .container-drop .wrap-drop {
											                                                  border: 1px solid #ccc;
											                                                  border-radius: 10px;
											                                                  padding: 20px;
											                                                  background-color: #f5f5f5;
											                                                  margin: 10px;
											                                                }


											                                                /* Ajoutez d'autres règles CSS pour personnaliser vos éléments spécifiques */

											                                                /* SECTION FORM */
											                                                .drop-form :where(i,p) {
											                                                color: var(--color-blue);
											                                                }

											                                                .drop-form i {
											                                                font-size: 50px;
											                                                }
											                                                .drop-form p{
											                                                font-size: 16px;
											                                                margin-top: 15px;
											                                                }


											section .row i {
											  /*font-size: 30px;*/
											  /*color: var(--color-blue);*/
											}
											                                                section .details span {
											                                                font-size: 14px;
											                                                }

											/* SECTION PROGRESS AREA */

											.progress-area .row .content {
											  width: 100%;
											  margin-left: 15px;
											}
											.progress-area .details {
											  display: flex;
											  align-items: center;
											  justify-content: space-between;
											  margin-bottom: 7px;
											}
											.progress-area .progress-bar {
											  height: 6px;
											  width: 100%;
											  background: var(--panel-color);
											  margin-bottom: 4px;
											  border-radius: 30px;
											}
											.prorgess-bar .progress {
											  height: 100%;
											  width: 0%;
											  background: var(--color-blue);
											  border-radius: inherit;
											}
											.prorgess-bar {
											  transition: var(--trans-05);
											}
											                                                /* SECTION UPLOADED AREA */
											                                                .uploaded-area{
											                                                max-height: 230px;
											                                                overflow-y: scroll;
											                                                }
											                                                .uploaded-area.onprogress {
											                                                max-height: 150px;

											                                                }
											                                                .uploaded-area::-webkit-scrollbar{
											                                                width: 0px;
											                                                }

											                                                .uploaded-area .row .content {
											                                                display: flex;    
											                                                align-items: center;
											                                                }

											                                                .uploaded-area .row .details {
											                                                display: flex;
											                                                margin-left: 15px;
											                                                flex-direction: column;
											                                                }

											                                                .uploaded-area .details .size {
											                                                font-size: 11px;
											                                                color: var(--color-blue);
											                                                }

											                                                .uploaded-area .fa-check {
											                                                color: var(--color-blue);
											                                                font-size: 16px;
											                                                }




											    /* NAVBAR-DASH */
											    nav{
											      position: fixed;
											      top: 0;
											      left: 0;
											      height: 100%;
											      width: 250px;
											      padding: 10px 14px;
											      background-color: var(--color-blue);
											      transition: var(--trans-05);
											      min-height:30px;
											    }
											    nav.close {
											      width: 73px;

											    }
											    nav .logo-name {
											      display: flex ;
											      align-items: center;
											    }

											    nav .logo-image {
											      display: flex;
											      justify-content: center;
											      min-width: 45px;
											    }
											    nav .logo-image img{
											      width: 40px;
											      object-fit: cover;
											      border-radius: 50%;
											    }
											    nav .logo-name .logo_name {
											      font-size: 22px;
											      font-weight: 600;
											      color: var(--color-white);
											      margin-left: 14px;
											      transition: var(--trans-05);
											    }

											    nav .logo-test {
											      display: none;
											    }
											    nav .logo-test a {
											      padding-left: 10px;

											    }
											    nav .logo-test img{
											      width: 40px;
											      object-fit: cover;
											      border-radius: 50%;
											    }
											    nav .logo-test .logo_name  {
											      font-size: 22px;
											      font-weight: 600;
											      color: var(--color-white);
											      margin-left: 14px;
											      transition: var(--trans-05);
											    }


											    nav.close .logo_name{
											      opacity: 0;
											      pointer-events: none;
											    }

											    nav .menu-items {
											      margin-top: 40px;
											      height: calc(100% - 90px);
											      display: flex;
											      flex-direction: column;
											      justify-content: space-between;
											    }

											                                                .menu-items li {
											                                                  list-style: none;
											                                                }
											                                                .menu-items li a {
											                                                  /* position: relative; */
											                                                  display: flex;
											                                                  align-items: center;
											                                                  height: 60px;
											                                                  text-decoration: none;
											                                                }

											                                                /* .menu-items li a::before{
											                                                  content: "";
											                                                  position: absolute;
											                                                  left: -7px;
											                                                  height: 5px;
											                                                  width: 5px;
											                                                  border-radius: 50%;
											                                                  background-color: red;
											                                                }  */

											                                                .menu-items li a i {
											                                                  font-size: 24px;
											                                                  min-width: 45px;
											                                                  height: 100%;
											                                                  display: flex;
											                                                  align-items: center;
											                                                  justify-content: center;
											                                                  color: var(--color-white) ;
											                                                }

											                                                .menu-items li a .link-name {
											                                                  font-size: 18px;
											                                                  font-weight: 400;
											                                                  color: var(--color-white) ;
											                                                  transition: var(--trans-05);


											                                                }
											                                                nav.close li a .link-name{
											                                                  opacity: 0;
											                                                  pointer-events: none;
											                                                }

											                                                .nav-links li a:hover .link-name{
											                                                 font-size: 20px;
											                                                }

											                                                .nav-links li a:hover i
											                                                {
											                                                  color: var(--color-white);
											                                                  opacity: 0.8;
											                                                }
											                                                .menu-items .logout-mode{
											                                                  padding-top: 10px;
											                                                  border-top: 1px solid var(--border-color);

											                                                }
											                                                .menu-items .mode{
											                                                  display:flex; ;
											                                                  align-items: center;
											                                                  white-space: nowrap;

											                                                }
											.menu-items .mode-toggle{
											  position: absolute;
											  right: 14px;
											  height: 50px;
											  min-width: 45px;
											  display: flex;
											  align-items: center;
											  justify-content: center;
											  cursor: pointer;
											}

											.mode-toggle .switch {
											  position: relative;
											  display: inline-block;
											  height: 22px;
											  width: 40px;
											  border-radius: 25px;
											  background-color: var(--toggler-color);
											}

											                                                .switch::before {
											                                                  content: "";
											                                                  position: absolute;
											                                                  left: 5px;
											                                                  top: 50%;
											                                                  transform: translateY(-50%);
											                                                  height: 15px;
											                                                  width: 15px;
											                                                  background-color: var(--color-blue);
											                                                  border-radius: 50%;
											                                                }

											.dashboard, .headernav {
											  position: relative;
											  display: block;
											  left: 250px;
											  width: calc(100% - 250px);
											  transition: var(--trans-05)
											}
											.dashboard{
											margin-bottom: 40px;}

											                                                nav.close ~ .dashboard{
											                                                  left: 73px;
											                                                  width: calc(100% - 73px);
											                                                }

											.dashboard .top, .headernav .top {
											  position: fixed;
											  height: 50px;
											  top: 0;
											  left: 250px;
											  display: flex;  
											  justify-content: space-between;
											  align-items: center;
											  background-color: var(--color-blue);
											  width: calc(100% - 250px);
											  padding: 10px 14px ;
											  transition: var(--trans-05);
											}
											                                                nav.close ~ .dashboard .top, nav.close ~ .headernav .top{
											                                                  left: 73px;
											                                                  width: calc(100% - 73px);
											                                                }

											.sidebar-toggle {
											  font-size: 26px;
											  color: var(--color-white);
											  cursor: pointer;
											}

											                                                .dashboard .top .search-box{
											                                                  position: relative;
											                                                  height: 45px;
											                                                  max-width: 600px;
											                                                  width: 100%;
											                                                  margin: 0 30px;
											                                                  /* background-color: red; */
											                                                }

											                                                .top .search-box input {
											                                                  position: absolute;
											                                                  border: 1px solid var(--border-color);
											                                                  background-color: var(--color-blue);
											                                                  padding: 0 25px 0 50px;
											                                                  height: 100%;
											                                                  width: 100%;
											                                                  color: var(--color-white);
											                                                  font-size: 15px;
											                                                  font-weight: 400;
											                                                  outline: none;
											                                                }
											                                                .top .search-box input .text {
											                                                  color: var(--color-white);
											                                                }

											                                                .top .search-box i{
											                                                  position: absolute;
											                                                  left: 15px;
											                                                  top: 50%;
											                                                  transform: translateY(-50%);
											                                                  font-size: 22px;
											                                                  color: var(--color-white);
											                                                }

											                                                .top a {
											                                                  text-decoration: none;
											                                                  color: var(--color-white);
											                                                }
											                                                .top a i{
											                                                  font-size: 24px;
											                                                  min-width: 45px;
											                                                  color: var(--color-white);
											                                                }



											.dashboard-content .title {
											  display: flex;
											  align-items: center;

											}
											                                                .dashboard-content .title i{
											                                                  position: relative;
											                                                  height: 35px;
											                                                  width: 35px;
											                                                  background-color: var(--color-blue);
											                                                  border-radius: 3px;
											                                                  color: var(--color-white);
											                                                  display: flex;
											                                                  align-items: center;
											                                                  justify-content: center;
											                                                  font-size: 20px;

											                                                }
											                                                .dashboard-content .title .text {
											                                                  font-size: 24px;
											                                                  font-weight: 500;
											                                                  margin-left: 10px;
											                                                  color: var(--color-black);
											                                                }

											                                                .dashboard-content .boxes {
											                                                  display: flex;
											                                                  align-items: center;
											                                                  justify-content: space-between;
											                                                  flex-wrap: wrap;
											                                                }

											                                                .dashboard-content .boxes .box {
											                                                  display: flex;
											                                                  flex-direction: column;
											                                                  align-items: center;
											                                                  border-radius: 12px;
											                                                  width: calc(100% /3 - 15px);
											                                                  padding: 15px 20px;
											                                                  background-color: var(--box-1-color);
											                                                }

											                                                .box .text {
											                                                  white-space: nowrap;
											                                                  font-size: 18px;
											                                                  font-weight: 500;
											                                                  color: var(--color-white);
											                                                }
											                                                .box i {
											                                                  padding-bottom: 10px;
											                                                  color: var(--color-white);
											                                                  font-size: 35px;
											                                                }

											                                                .dashboard-content .recap-data{
											                                                  display: flex;
											                                                  align-items: center ;
											                                                  justify-content: space-between;
											                                                  width: 100%;
											                                                }

											                                                .recap-data .data{
											                                                  display: flex;
											                                                  flex-direction: column;
											                                                  width: calc(100%/5 - 15px);
											                                                }
											                                                .data .data-title {
											                                                  font-size: 20px;
											                                                  font-weight: 500;
											                                                  color: var(--color-black);

											                                                }

											                                                .data .data-list {
											                                                  font: 18px;
											                                                  font-weight: 400;
											                                                  margin-top: 20px;
											                                                  white-space: nowrap;
											                                                  color: var(--color-black);
											                                                }


											  @media (max-width:1000px) {
											    nav{
											      width: 73px;
											    }
											    nav.close{
											      width: 250px;
											    }
											    nav .logo_name {
											      opacity: 0;
											      pointer-events: none;
											    }
											    nav.close .logo_name {
											      opacity: 1;
											      pointer-events: auto;
											    }
											    nav li a .link-name {
											      opacity: 0;
											      pointer-events: none;
											    }
											    nav.close li a .link-name {
											      opacity: 1;
											      pointer-events: auto;
											    }
											    nav ~ .dashboard, .headernav{
											      left: 73px;
											      width:calc(100% - 73px);
											    }
											    nav.close ~ .dashboard, nav.close ~ .headernav{
											      left: 250px;
											      width:calc(100% - 250px);
											    }
											    nav ~ .dashboard .top, .headernav .top {
											      left: 73px;
											      width:calc(100% - 73px);
											    }
											    nav.close ~ .dashboard .top, nav.close ~ .headernav .top {
											      left: 250px;
											      width:calc(100% - 250px);
											    }
											    .recap-data {
											      overflow-y: scroll;
											    }
											  }

											@media (max-width: 768px) {

											                                                  .dashboard-content .boxes .box {
											                                                    width: calc(100%/ 2 - 15px);
											                                                    margin-top: 15px;

											                                                  }


											}
											                                                @media (max-width: 560px) {
											                                                  .dashboard-content .boxes .box {
											                                                    width: 100%;
											                                                    margin-top: 15px;

											                                                  }
											                                                }
											@media (max-width: 500px) {

											    nav ~ .dashboard, .headernav{
											      left: 0px;
											      width:calc(100% - 0px);
											    }
											                                                 
											                                                  .menu-items {
											                                                    padding-left: 20px;
											                                                  }
											  nav {
											    width: 0px;
											    left: -30px;
											    transition: width 0.3s;
											    overflow: hidden;
											  }
											  .headernav{
											    left: 0px;
											    width:calc(100%);
											  }
											  nav.close ~ .dashboard, nav.close ~ .headernav{
											    left: 0px;
											    width:calc(100% );
											  }

											  .headernav .top {
											    left: 0;
											    width:calc(100% );
											  }
											  nav.close ~ .dashboard .top, nav.close ~ .headernav .top {
											    left: 0px;
											    width:calc(100% );
											  }
											  nav .logo-test {
											    display: block ;
											    padding-left: 3px;
											    justify-content: center;
											    min-width: 45px;
											  }
											  nav .logo-test a {
											    padding-left: 5px;
											  
											  }
											  nav .logo-test img{
											    width: 40px;
											    object-fit: cover;
											    border-radius: 50%;
											  }
											  nav .logo-test .logo_name  {
											    font-size: 22px;
											    font-weight: 600;
											    color: var(--color-white);
											    margin-left: 14px;
											    transition: var(--trans-05);
											  }
											                                                 
											}
											                                                  
											                                                /* DRAG */
											                                                .contain-drag {
											                                                 
											                                                  background-color: var(--panel-color);
											                                                  display: flex;
											                                                  align-items: center;
											                                                  flex-direction: column;
											                                                }

											                                                #left {
											                                                  display: flex;
											                                                  height: 50px;
											                                                  width: 100%;
											                                                  border: 0.5px solid var(--border-color2);
											                                                }
											                                                #right {
											                                                  display: flex;
											                                                  height: 50px;
											                                                  width: 100%;
											                                                  border: 0.5px solid var(--border-color2);
											                                                }

											                                                .list {
											                                                  border: 0.5px solid var(--border-color2);
											                                                  height: 30px;
											                                                  width: calc(100%/4 );
											                                                  margin: 10px;
											                                                  color: var(--color-black);
											                                                  display: flex;
											                                                  align-items: center;
											                                                  cursor: grab;
											                                                }

											                                                .list i {
											                                                  width: 10px;
											                                                  margin-right: 15px;
											                                                  margin-left: 15px;
											                                                } 

											                                                @media (max-width: 767px) {
											                                                  .list i {
											                                                   display: none;
											                                                  } 
											                                                  .list {
											                                                    /* background: var(--color-blue); */
											                                                    border: 0.5px solid var(--border-color2);
											                                                    height: 30px;
											                                                    width: calc(100%/4 );
											                                                    margin: 10px;
											                                                    color: var(--color-black);
											                                                    display: flex;
											                                                    align-items: center;
											                                                    justify-content: center;
											                                                    cursor: grab;
											                                                  
											                                                  }
											                                                  
											                                                }
											                                                @media (max-width: 900px) {
											                                                  form.form-step   {
											                                                    max-width: 400px;
											                                                    color: var(--color-black);
											                                                    margin: 0 auto;

											                                                  }
											                                                }
											                                                @media (max-width: 768px) {
											                                                  form > div {
											                                                    color: var(--color-black);
											                                                  }
											                                                }

											                                                /* multi-step-form */
											                                                .container-form {
											                                                  max-width: 900px;
											                                                  margin: 0 auto;
											                                                }

											                                                .form-box {
											                                                  display: flex;
											                                                  flex-direction: column;
											                                                  border-radius: 15px;
											                                                  background-color: var(--panel-color);
											                                                }

											                                                /* ==> progression */
											                                                .form-box .progression {
											                                                  position: relative;
											                                                  /* margin-top: 30px; */
											                                                }
											                                                /* ==> progress step */

											                                                .progression ul.progress-steps {
											                                                  display: flex;
											                                                  flex-direction: row;
											                                                  align-items: center;
											                                                  justify-content: center;
											                                                  gap: 2em;
											                                                }

											                                                li.step {
											                                                  width: 100%;
											                                                }
											                                                .progression ul.progress-steps li {
											                                                  position: relative;
											                                                  display: flex;
											                                                  align-items: flex-start;
											                                                  margin-bottom: 2em;

											                                                }
											                                                .progression ul.progress-steps li > span{
											                                                  position: relative;
											                                                  width: 40px;
											                                                  height: 40px;
											                                                  display: flex;
											                                                  align-items: center;
											                                                  justify-content: center;
											                                                  margin-right: 1em;
											                                                  border-radius: 50%;
											                                                  background-color: var(--border-color4);
											                                                  color: var(--color-black);
											                                                }
											                                                /* .progression ul.progress-steps li >p {
											                                                  margin-bottom: 0;
											                                                } */


											                                                .progression ul.progress-steps li.active > span{
											                                                  color: var(--color-white);
											                                                  background-color: var(--color-blue);
											                                                  border: 4px solid var(--box-1-color);
											                                                }
											                                                .progression ul li p {
											                                                  position: absolute;
											                                                  top: -2em;
											                                                  font-size: 12px;
											                                                }

											                                                /* ===> Form */
											                                                .form-box form {
											                                                  width: 100%;
											                                                  background-color: var(--panel-color);
											                                                  border-radius: 0px 15px 0 15px;
											                                                }

											                                            
											                                                form h3 {
											                                                  color: var(--color-black);
											                                                }
											                                               

											                                                form :where(input, select) {
											                                                  height: 40px;
											                                                  padding: 0 1em;
											                                                  border-radius: 7px;
											                                                  outline-color: var(--border-color4);
											                                                  border: 1px solid var(--border-color4);
											                                                  background-color: transparent ;
											                                                  color: var(--color-black);
											                                                }

											                                                
											                                                form .checkbox input {
											                                                width: 15px;
											                                                height: 15px;
											                                                background-color: var(--panel-color);
											                                                }

											                                                .btn-group {
											                                                  display: flex;
											                                                  flex-wrap: wrap;
											                                                  gap: 1em;
											                                                  margin-top: 2em;
											                                                }

											                                                .btn-group [class*="btn-"] {
											                                                  background-color: var(--color-blue);
											                                                  color: var(--color-white);
											                                                  padding: 0.5em 2em;
											                                                  border: none;
											                                                  border-radius: 5px;
											                                                  cursor: pointer;
											                                                  -webkit-transition: background-color .3s, border-color .3s ease-out;
											                                                  transition: background-color .3s, border-color .3s ease-out;
											                                                  font-size: small;
											                                                }

											                                                .btn-group [class*="btn-"]:hover {
											                                                background-color: var(--panel-color);
											                                                border: 1px solid var(--border-color3);
											                                                color: var(--color-blue);
											                                                }


											                                                @keyframes fadeIn {
											                                                  0%{
											                                                    opacity: 0;
											                                                    -webkit-transform: translateY(10%);
											                                                    transform: translateY(10%);
											                                                  }
											                                                  100%{
											                                                    opacity: 01;
											                                                    -webkit-transform: translateY(0);
											                                                    transform: translateY(0);
											                                                  }
											                                                }
											                                                

											                                                 
											                                                @media screen and (min-width: 900px) {
											                                                  .form-box{
											                                                    flex-direction: row;
											                                                  }
											                                                  .form-box .progression {
											                                                    flex: 1 0 35%;
											                                                    min-width: 300px;
											                                                    margin-top: 30px;
											                                                  }
											                                                  .progression ul.progress-steps{
											                                                    flex-direction: column;
											                                                    /* gap: 0.5; */
											                                                  }
											                                                  .progression ul.progress-steps li:not(:last-child)::before {
											                                                    content: '';
											                                                    position: absolute;
											                                                    left :20px;
											                                                    top: 30px;
											                                                    width: 2px;
											                                                    height: 80px;
											                                                    background-color: var(--border-color4);
											                                                  }
											                                                  .progression ul.progress-steps li > span{
											                                                    margin-right: 0;
											                                                  }
											                                                  .progression ul {
											                                                    padding-left: 0;
											                                                  }
											                                                  .progression ul.progress-steps {
											                                                    gap: 2em;
											                                                    padding-left: 10px;
											                                                  }

											                                                  .progression ul li p {
											                                                    position: relative;
											                                                    top: auto;
											                                                    font-size: inherit; 
											                                                    padding: 10px 0 0 10px;
											                                                  }
											                                                  .form-box form {
											                                                    border-radius: 0px 15px 15px 0;
											                                                  }
											                                                  form > div {
											                                                    margin: 0;
											                                                    color: var(--color-black);
											                                                  }
											                                                }

											                                                .card {
											                                                  color: var(--color-black);
											                                                  background-color: var(--panel-color);
											                                                }
											                                                .dark {
											                                                  color: var(--color-black);
											                                                  background-color: var(--panel-color);
											                                                }
											                                                /* EMAIL  */

											                                                table {
											                                                  border-spacing: 0;
											                                                }
											                                                td {
											                                                 padding: 0;
											                                                }
											                                                .size {
											                                                   border: 0;
											                                                   width: 300px;
											                                                   height: 200px;

											                                                }


											                                                #background{
											                                                  background-color: #d7d5d5;
											                                                }
											                                                .content-email {
											                                                   width: 600px;
											                                                   table-layout: fixed;
											                                                   background-color: #fff;
											                                                   margin: 0 auto;
											                                                }
											                                                .main-email {
											                                                   background-color: #fff;
											                                                   width: 100%;
											                                                   max-width: 600px;
											                                                }
											                                                .header-icone {
											                                                  background-color: var(--color-blue);
											                                                }
											                                                .header-logo {
											                                                  background-color: var(--color-blue);
											                                                }
											                                                .header-logo td a{
											                                                  color: var(--panel-color);

											                                                }
											                                                .footer-mail {
											                                                  background: var(--color-blue);
											                                                }
											                                                @media screen and (max-width: 600px) {
											                                                  .content-email {
											                                                    max-width: 100%;
											                                                    table-layout: fixed;
											                                                    margin: 0 auto;
											                                                 }
											                                                 .main-email {
											                                                    max-width: 100%;
											                                                 }
											                                                }