/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.color-pixelforce{
	color: #6f64e2 !important;
}

a, a:hover{
	color : unset;
	text-decoration: none;
}
/**
* Blocks :
*/
.block{
	background-color: #fff;
	padding : 20px;
	margin-bottom: 10px;
	position : relative;
}
.block--rounded{
	border-radius: 10px;
}
.block--bordered{
	box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
}

.block__title{
	font-size: 1.25rem;
	text-transform: uppercase;
}
.block__text{
	text-transform: uppercase;
	font-size: 1rem;
}
.block__text--center{
	text-align: center;
}
.block .table{
	margin-bottom: 5px;
}
.block .fab-btn-wrap .btn{
	display : flex;
	align-items: center;
	justify-content: center;
}
.block .fab-btn-wrap .btn--rounded{
	border-radius: 50px;
	padding : 7px 15px;
}
.block .btn{
	display : flex;
	align-items: center;
	justify-content: center;
}
.block .block__header{
	
	margin-top :10px;
	display : flex;
	justify-content: space-between;
}
.btn{
	display: flex;
	justify-content: center;
	align-items: center;
	gap : 5px;
}
.btn .btn--rounded{
	border-radius: 50px;
	padding : 7px 15px;
}
.block .block__header .fab-btn{

}

/**
* Tables :
*/
.table .col-action{
	text-align: center;
	padding : 0px;
	opacity : 0.7;

}
.table .col-action:hover{
	cursor : pointer;
	opacity : 1;
}
.table .col-action--edit{
	color : rgb(39, 114, 39);
}
.table .col-action--remove, .table .col-action--remove button{
	color : rgb(172, 45, 45);
}
.table .col-action button, .table .col-action a{
	outline: none;
    border: none;
    background-color: unset;
	width : 100%;
	height : 100%;
	padding : 10px;
}

.filter-form{
	display : flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap : 10px;
	padding-bottom: 20px;
	
}
.filter-form--vertical{
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.filter-form .btn-wrap{
	display : flex;
	justify-content: center;
	align-items: flex-end;
}
.filter-form .form-select, .filter-form .my-form-widget{
	min-width: 250px;
}

.my-form{
	gap : 10px;
	padding-bottom: 20px;
	max-width: 600px;
	margin : 0 auto;
}
.my-form .my-form-widget{
	margin-bottom: 10px;
}
.my-form textarea.form-control{
	min-height : 200px;
}
.my-form .btn-wrap{
	display : flex;
	justify-content: flex-end;
}
.my-form .my-form-img-preview{
	max-height : 100px;
	border : 1px solid #DDD;
	border-radius: 10px;
}




.ecommerce-card .ecommerce-card-img{
	width : 100%;
	height: 300px;
	object-fit: cover;
}
.ecommerce-card .item-img{
	background-color: #fafafa;
}
.ecommerce-card .item-img a{
	width : 100%;
}
.app-ecommerce-details .product-img{
	width : 100%;
	max-width : 300px;
	margin : 0 auto;
}
/** CUSTOM SCROLLBAR **/

.custom-scrollbar::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: rgba(209, 209, 209, 0.1);
	border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background: #919296;
	border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #797a80;
	width : 7px;
}

@keyframes has-focus{
	0%{
		transform : scale(1.01);
	}
	50%{
		transform : scale(0.99);
	}
	100%{
		transform : scale(1);
	}
}
.searchbar-wrap{

	font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	transition : all 250ms ;
	position : absolute;
	top : 10px;
	z-index: 1000;
    width: 100%;
	margin : 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.searchbar-wrap .searchbar-input-wrap{
	width: 90%;
	background-color : #fff;
	display : grid;
	grid-template-columns :  auto 45px;
	grid-template-rows : 40px;
	box-shadow : 0px 0px 5px #BBB;
	border-radius : 7px;
}
.searchbar-wrap .searchbar-input-wrap .icon{
  width : 20px;
  height : 20px;
}
.searchbar-wrap .searchbar-input-wrap .icon:hover{
	cursor: pointer;
}
.searchbar-wrap .searchbar-input-wrap .icon-wrap{
	display : flex;
	justify-content : center;
	align-items : center;
	opacity : 0.5;
}
.searchbar-wrap .searchbar-input-wrap input{
	border : none;
	border-radius : 7px;
	font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size : 13px;
	padding : 0px 20px;
	
}
.searchbar-wrap .searchbar-input-wrap input:focus{
	outline : none;
}
.searchbar-wrap .searchbar-input-wrap:focus-within{
	animation : 300ms has-focus ease-in;
}
.searchbar-wrap .suggestion-wrap{
	border-top : 1px #eee solid;
	padding : 10px;
	box-shadow : 0px 0px 5px #BBB;
	border-radius : 7px;
	margin-top : 5px;
	width : 90%;
	z-index : 5;
	background-color: #fff;
	max-height: 200px;
    overflow: auto;
	min-height : 150px;
	display : none;
}


.searchbar-wrap .suggestion-wrap .suggestion-wrap-title{
	margin : 0px;
	font-size : 15px;
	font-weight : normal;
	color : #888;
	padding : 0px 10px;
	font-style : italic;
}
.searchbar-wrap .suggestion-wrap .suggestion{
	padding : 5px 10px;

	color : #555;
	font-size : 13px;
	transition : all 150ms ;
}
.searchbar-wrap .suggestion-wrap .suggestion:hover{
	font-weight: bolder;
	background-color :#f7f7f7;
	border-radius : 10px;
	cursor : pointer;
}
.searchbar-wrap .suggestion-wrap .suggestion .match{
	background-color : #ffe5a2;
}

.searchbar-wrap .suggestion-wrap .suggestion .suggestion-content{

	font-size : 12px;
}
.searchbar-wrap .suggestion-wrap .suggestion .suggestion-description{
	margin : 0px;
	color : #AAA;
	font-size : 11px;
}
.searchbar-wrap .suggestion-wrap .suggestion .suggestion-description .key{
	font-weight : bolder;
}
.searchbar-wrap .suggestion-wrap:focus{
	outline : none;
	background-color :#f7f7f7;
	font-weight: bolder;
	border-radius : 10px;
}
.suggestion-wrap.collapsed{
  height : 0px;
  padding : 0px !important;
  overflow : hidden;
}

.btn-popup{
	background-color: #efefef;
	border: 1px solid #d8d6de
}

.popup-content{
	padding-top: 10px !important;
	margin-left: 0 !important;
}

.my-custom-card{
	z-index: 6000 !important;
}

.header-navbar.client{
	left: 0 !important;
}

.content.client{
	margin-left: 0 !important;
}

.hidden{
	display: none !important;
}

#signature .jSignature{
	background-color: rgb(221, 215, 215) !important;
	border-radius: 10px !important;
}



.rotate{
	display: inline-block;
	animation: rotation 1s infinite linear;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.file-block{
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	color: #5e5873;
	padding: 5px;
	position: relative;
	padding-right: 27px;
}

.file-block .file-close{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: inherit;
	cursor: pointer;
}
/* css general */
.regular-button{
    background-color: #7d78e1;
    color: white;
    border-width: 1px; /* Width of the border */
    border-style: solid; /* Style of the border */
    border-color: #7d78e1; /* Color of the border */
	padding:8px 20px;
	display:inline-block;
	border-radius: 7px !important;
}
.regular-button:hover {
	background-color:white ;
    color:#7d78e1;
}
.regular-white-button{
    background-color: white;
    color: #7d78e1;
    border-width: 1px; /* Width of the border */
    border-style: solid; /* Style of the border */
    border-color: white; /* Color of the border */
	padding:8px 20px;
	display:inline-block;
	border-radius: 7px !important;
}
.regular-white-button:hover {
	background-color:white ;
    color:#7d78e1;
}
.general-primary-text{
	color:#192030;
	font-weight: bold;
}
.text-dark-template{
	color:#192030;
}
.text-tableau{
	color:#7d78e1;
}
.table-header-custom th{
	color:#192030;
	font-weight:600;
}
.user-nav{
	margin-left:10px;
}
/* css utile dans la partie choix de secteur */
.choix-secteur-primary{
	color:#192030;
	font-weight:bold;
}
.choix-secteur-video{
	border: 1px solid rgba(0, 0, 0, 0.125);
	background-color: #192030;
	padding: 10px 0;
}
.choix-secteur-video iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.choix-secteur-card {
	background-color: #192030;
	color:white;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-clip: border-box;
	border-radius: 0.25rem;
	padding: 0px 0px;
	margin:10px 1;
}

.choix-secteur-card p{
	color: white;
	line-height: 14px;
	font-size: 12px;
	margin: 0px auto;
}
.choix-secteur-card-img{
	width: 100%;
    height: 398px; /* Hauteur fixée pour toutes les images */
    overflow: hidden; /* Cache les débordements d'image */
    display: flex;
    align-items: center;
    justify-content: center;
}
.choix-secteur-card-body {
	background-color: #7d78e1;
	color:white;
	min-height: 70px;
}
.card{
	border-radius: 7px !important;
}
/* Header */
.header-user{
	font-size: small;
	color:#192030;
}
/* Navbar */
.left-sidebar{
	background-color: #192030;
}
.left-sidebar .navigation li a{
	color: #ECEEF5;
	padding: 10px 15px 10px 15px;
	line-height: 1.45;	
}
.main-menu{
	background-color: #192030;
}
/* Agent-home */
.statistics-section{
	margin-top: 10px;
}
.statistics-section div {
	padding:6px 0;
	color:#192030
}
.statistics-section h6{
	font-size: small;
}
.avatar{
	width:50px;
	height:50px;
}
.avatar-statistique{
	width:50px;
	height:50px;
}
.avatar-statistique-nav-bar{
	width:36px;
	height:36px;
}
.avatar a{
	margin-left:18px;
	margin-top:7px;
}
.avatar i{
	font-size:40px;
}
/* Partie vision */
.vision-section{
	background-color: #0030f6;
}
.vision-section-1 p{
	color: white;
	font-size: 12px;
}
.vision-button{
    background-color: #ebedf5;
    color: #192030;
	padding:7px 20px;
	display:inline-block
}
.vision-button:hover {
    color:#192030 !important;
	background-color:#ebedf5;
}
/* Gestion projet */
.gestion-projet{
	width:70px;
	height:70px;
	display:inline-block;
}
/* Progression */
.progression-positon-chiffre{	
	background-color: #7d78e1;
	width: 75px;
	height: 75px;
}
.progression-positon-part1{
	margin: 0 10px;
}
.progression-positon-part2{
	font-size: 150px;
	color: #f8f8f8;
	font-weight: 900;
	line-height:45%;
	float: right;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.progression-positon-pourcentage{
	margin-top:px;
}
/* Detail agent */
.detail-agent-equipe{
	width:50px;
	height:50px;
	display:inline-block;
}
/* modal */
.modal-coach-titre{
	margin-left:30px;
	margin-top: 30px;
}
.modal-coach-exit{
	margin-right:20px;
}
/* Retrait */
.retrait-form label{
	color: #192030;
	font-size:small;

}
/* fitres */
.search-filter{
	margin-left: 10px;
	display:inline-block;
}
body{
	background-color:#eceef5 !important;
}

.rounded-custom{
	border-radius: 0.6rem !important;
}

.object-fit-cover{
	object-fit: cover;
}

.img-fluid{
	object-fit: cover;
}

@media (min-width: 987px) and (max-width: 1197px) {
   .container-page{
		margin-top: 60px !important;
   }
}
@media (max-width: 828px) {
	.container-page{
		margin-top: 50px !important;
   }
}



@media screen and (max-width: 768px) {
    h4.only-on-large-screens {
		display: none;
	}
}

.custom-truncate-text {
	max-height: 202px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
}

.nav-item.disabled {
	opacity: 0.5;
}


.lock-icon {
	color: gray !important;  /* Make it different from other icons */
	opacity: 0.7;            /* Make it faded */
}


.regular-button.action-button{
    background-color: #0030f6;
    border-color: #0030f6;
}
.arrow-swiper, .custom-icon-color{
	color:#0030f6;
}


.swal2-confirm.swal2-styled {
	background-color: #0030f6 !important;
}


.new-pixelforce-color {
	color: #0030f6;
}