/* 

	ESPACE CLIENT V2 
	Style Espace Client v2 & Media Queries

*/

:root {
  --color-blue: #183051;
  --color-red: #F21010;
  --color-orange: #FFB200;
  --color-green: #007A4E;  
  --color-green-light: #00CB82;
  --color-gray-f8: #f8f8f8;
}

/*GENERAL*/
	.section-espace-client {
		font-family: Calibri;
	}
	.section-espace-client .aside .nav.navbar-nav{}
	.section-espace-client .aside .nav.navbar-nav .nav-item ul {
		position: static;
		visibility: visible;
		margin: 0;
		padding: 0;
	}
	.section-espace-client .filters .inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 2px 4px 0px #00000026;
		padding: 0 1rem;
		margin-bottom: 2rem;
		font-weight: 600;
		border-top: 1px solid #EDEDED;
		flex-wrap: wrap;
	}
	#fcp.form-item{
		width: 180px;
	}
	.section-espace-client .select-wrapper {
		position: relative;
		border-radius: 5px;
		width: 100%;
	}
	.section-espace-client .select-wrapper::after {
		content: '';
		position: absolute;
		top: 8px;
		right: 15px;
		width: 22px;
		height: 22px;
		display: block;
		background-image: url('../icon/bxs_down-arrow.svg');
		background-repeat: no-repeat;
		background-size: 10px;
		z-index: 1;
		background-color: #00000030;
		box-sizing: border-box;
		background-position: center;
		border-radius: 50px;
		pointer-events: none;
	}
	.section-espace-client .form-select {
		appearance: none;
		height: 40px;
		width: 100%;
		font-size: 12px;
		font-weight: 600;
		border: none;
		border-radius: 5px;
		padding: 0 10px;
		background-color: #007a4e;
		color: #fff;
		cursor: pointer;
		position: relative;
		z-index: 1;
	}
	.section-espace-client .creation-ordre-form .form-select {
		background-color: #e5e7e9;
		color: #333;
	}
	.section-espace-client .filters .datepicker {
		background-color: var(--color-gray-f8);
		border: none;
		border-radius: 50px;
		padding: 6px 0;
		text-align: center;
	}
	.section-espace-client .filters #date-input label {
		margin: 0;
	}
	.section-espace-client .filters #date-input .input-wrapper {
		margin: 0 1rem;
		position: relative;
	}

	.section-espace-client .filters #date-input .input-wrapper::before {
		content: '';
		position: absolute;
		top: 2px;
		left: 12px;
		width: 25px;
		height: 25px;
		display: block;
		background-image: url('../icon/solar_calendar-outline.svg');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.section-espace-client #search-input button {
		background-color: var(--color-blue);
		width: 140px;
		border-radius: 50px;
		color: #fff;
		font-weight: 500;
	}
	.section-espace-client .filters .form-item{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.section-espace-client table thead{
		height: 58px;
		background-color: var(--color-blue);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
	}
	.section-espace-client table th, .section-espace-client table td{
		border: none;
	}
	.section-espace-client table tbody tr{
		height: 58px;
		color: #6F6F6F;
		font-size: 14px;
	}
	.section-espace-client table tbody tr:not(.hide):nth-of-type(2n+1){
		background-color: #F1F1F1;
	}
	.section-espace-client table td{
		white-space: nowrap;
	}
	.section-espace-client .btn-telecharger{
		text-align: right;
		margin: 2rem auto;
	}
	.section-espace-client .btn-telecharger button{
		color: #fff;
		background-color: var(--color-green);
		padding: 0 2rem 0 0px;
		border: none;
		height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 50px;
	}
	.section-espace-client .btn-telecharger i{
		margin: 0 0.5rem 0 1rem;
		background: #166C4D;
		height: 28px;
		width: 28px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 11px;
		border-radius: 50px;
	}



/*ESTIMATION PORTEFEUILLE*/

	
	.section-espace-client .portefeuille table thead{
		font-size: 18px;
	}
	.portefeuille table thead tr {height: 56px;}
	.portefeuille table thead tr:not(.sub) th:nth-child(1){width: 200px;}
	.portefeuille table thead tr:not(.sub) th:nth-child(2){width: 100px;text-align: center;}
	
	.portefeuille table thead tr.sub {background: #DFDFDF;color: #717171;}
	.portefeuille table tfoot {background-color: #dfdfdf;}

	.portefeuille .filters{
		max-width: 500px;
		margin: auto;
	}


/*CREATION ORDRE*/
	.creation-ordre{position: relative;}
	.creation-ordre .loader{
		position: absolute;
		top: 45%;
		left: 0;
		right: 0;
		width: 100%;
		text-align: center;
		font-size: 2rem;
		display: none;
		z-index: 1;
	}
	.creation-ordre.loading .panels{
		visibility: hidden;
	}
	.creation-ordre.loading .loader{
		display: block;
	}

	.creation-ordre .filter-actifs {
		margin: 10px 0;
		padding: 0;
		list-style: none;
		display: flex;
		gap: 15px;
	}
	.creation-ordre .filter-actifs li span{
		cursor: pointer;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		height: 40px;
		background-color: #F1F1F1;
		color: #6F6F6F;
		font-size: 15px;
		border-radius: 5px;
		transition: linear .3s all;
	}
	.creation-ordre .filter-actifs li span.actived{
		background-color: var(--color-green);
		color: #fff;
	}
	.creation-ordre .title {
		font-weight: 600;
	}
	.creation-ordre .request-new-order-form{
		text-align: center;
	}
	.creation-ordre .request-new-order-form > span {
		width: 24px;
		height: 24px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 50px;
		margin: 0 5px;
		cursor: pointer;
	}
	.creation-ordre .request-new-order-form .btn-souscription{
		background: var(--color-green-light);
	}
	.creation-ordre .request-new-order-form .btn-rachat{
		background: var(--color-red);
	}
	.creation-ordre .request-new-order-form .no-btn-rachat{
		background: #c7c6c6;
		cursor: default;
	}
	.creation-ordre .fiche{
		text-align: center;
	}
	.creation-ordre .fiche a{
		width: 24px;
		height: 24px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 50px;
		margin: 0 5px;
		background-color: #4C4C4C;
	}
	
	#create-order-form{}
	#create-order-form .select-wrapper{position: relative;}
	#create-order-form .select-wrapper i{
		position: absolute;
		top: 8px;
		right: 50px;
		font-size: 22px;
		display: none;
		z-index: 1;
	}
	#create-order-form .form-item.loading .select-wrapper i{
		display: block;
	}

	.creation-ordre-form {
		padding: 1rem;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border: 1px solid #F0EEEE;
	}

	.creation-ordre-form .row {
		align-items: center;
	}
	.creation-ordre-form label {
		display: block;
		font-weight: 600;
		color: #6E6E6E;
	}
	.creation-ordre-form input[type='text']{
		height: 40px;
		width: 100%;
		border-radius: 5px;
		border: 1px solid #C4C4C4;
		padding: 0 15px;
	}
	.creation-ordre-form input.bordered{
		border-color: red;
	}
	.creation-ordre-form input[readonly]{
		background-color: #E5E7E9;
	}
	.creation-ordre-form input[type="radio"] + label {
		display: inline-block;
		margin-left: 18px;
		margin-bottom: 0;
		color: var(--color-green);
	}
	.creation-ordre-form textarea {
		height: 70px;
		border-radius: 5px;
		background: transparent;
		border: 1px solid #C4C4C4;
		width: 100%;
		padding: 5px 10px;
	}
	
	.creation-ordre-form .form-select {
		width: 100%;
		color: #6E6E6E;
	}
	
	.section-espace-client .creation-ordre .select-wrapper {
		background-color: transparent;
		border: 1px solid #C4C4C4;
	}

	.creation-ordre-form footer {
		justify-content: end;
		align-items: center;
		margin: 1rem 0;
		display: flex;
		gap: 1rem;
	}
	.creation-ordre-form .footer-feedback {
		color: red;

	}
	.creation-ordre-form footer .btn{
		display: inline-flex;
		width: 150px;
		height: 42px;
		font-weight: 12px;
		font-weight: 700;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 50px;
	}
	.creation-ordre-form footer .btn-cancel{background-color: var(--color-blue);}
	.creation-ordre-form footer .btn-delete{background-color: var(--color-red);}
	.creation-ordre-form footer .btn-confirm{background-color: var(--color-green);}

	.confirm-modal .modal-header{
		background-color: var(--color-blue);
	}
	.confirm-modal .modal-title{
		color: #fff;
	}
	.confirm-modal .btn-close{
		border: none;
		background: transparent;
		color: #fff;
		font-size: 2rem;
		line-height: 1.2;
	}
	.confirm-modal .modal-body span{
		margin-bottom: 8px;
		display: inline-block;
	}
	.confirm-modal .btn-send.ready i{
		display: none;
	}
	.confirm-modal .btn-send i{}
	.confirm-modal .modal-footer{
		flex-wrap: nowrap;
		justify-content: end;
		align-items: center;
	}
	.confirm-modal .btn{
		color: #fff;
		border-radius: 50px;
		font-size: 12px;
		border: none;
		font-weight: 600;
		box-shadow: 0 0;
	}
	.confirm-modal .btn:hover,
	.confirm-modal .btn:focus{
		color: #fff;
		box-shadow: 0 0;
	}
	.confirm-modal .btn-cancel{
		background-color: var(--color-blue);
	}
	.confirm-modal .btn-send{
		background-color: grey;
	}
	.confirm-modal .btn-send.ready{
		background-color: var(--color-green);
	}
	.confirm-modal .modal-feedback .inner{
		font-size: 13px;
		border: 1px solid;
		padding: 5px 15px;
		border-radius: 8px;
		color: #0c9a00;
		display: inline-block;
	}
	.confirm-modal .modal-feedback .inner.error{
		color: #fe0000;
	}
	#deleteModal.confirm-modal .modal-header{
		background-color: var(--color-red);
	}


/*OPERATIONS*/
	#operations.loading{
		height: 400px;
	}
	#operations .loader{
		position: absolute;
		top: 45%;
		left: 0;
		right: 0;
		width: 100%;
		text-align: center;
		font-size: 2rem;
		display: none;
		z-index: 1;
	}
	#operations.loading .panels{
		visibility: hidden;
	}
	#operations.loading .loader{
		display: block;
	}
	#operations .loader-2{
		display: block;
	}
	#operations .content tbody tr{ display:none; }
	#operations .content.Souscription tbody tr[data-sens="Souscription"]{ display: table-row; }
	#operations .content.Rachat tbody tr[data-sens="Rachat"]{ display: table-row; }

	.operations{}
	.section-espace-client .operations .filters .inner {
		flex-direction: column;
		justify-content: start;
		align-items: start;
		margin: 0;
		padding: 0;
		box-shadow: 0 0;
		border-top: none;
	}
	.filters-top {
		display: flex;
		gap: 10px;
	}
	.filters-top input{
		display: none;
	}
	.filters-top label{
		height: 40px;
		width: 160px;
		background-color: #F1F1F1;
		border: 1px solid #DEDEDE;
		color: #6F6F6F;
		font-size: 15px;
		cursor: pointer;
		transition: linear .3s all;
		border-radius: 5px;
		text-align: center;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.filters-top label::after{
		content: '';
		height: 3px;
		width: 35px;
		background-color: #fff;
		display: none;
		margin: 8px auto;
	}
	.filters-top input:checked + label{
		color: #fff;
		background-color: var(--color-green);
		border-color: var(--color-green);
		font-weight: 700;
	}
	.filters-top input:checked + label::after{
		display: block;
	}
	.filters-bot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 2px 4px 0px #00000026;
		padding: 0 1rem;
		margin-bottom: 2rem;
		width: 100%;
		font-weight: 600;
		border-top: 1px solid #EDEDED;
		flex-wrap: wrap;
	}

	.operations .sens {
		display: flex;
		margin: auto;
		height: 28px;
		width: 28px;
		justify-content: center;
		align-items: center;
		background: var(--color-green-light);
		color: #fff;
		border-radius: 50px;
	}
	.operations .sens.Rachat {
		background: var(--color-red);
	}
	.operations .sens.Souscription {
		background: var(--color-green-light);
	}
	.operations .statut {
		font-weight: bold;
		padding: 5px 15px;
		border-radius: 50px;
	}
	.operations .statut.annule {
		color: var(--color-red);
		background-color: #FFE4E4;
	}
	.operations .statut.enattente {
		background-color: #FFEBD3;
		color: var(--color-orange);
	}
	.operations .statut.valide {
		color: var(--color-green);
		background-color: #BFFFE8;
	}
	.operations table .btn-download {
		cursor: pointer;
		background: #BFFFE8;
		display: flex;
		margin: auto;
		height: 28px;
		width: 28px;
		justify-content: center;
		align-items: center;
		color: var(--color-green);
		font-size: 10px;
		border-radius: 50px;
	}
	.operations table .btn-edit {
		cursor: pointer;
		background: #FFE6BF;
		display: flex;
		margin: auto;
		height: 28px;
		width: 28px;
		justify-content: center;
		align-items: center;
		color: var(--color-green);
		font-size: 10px;
		border-radius: 50px;
	}




/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Notebook
--------------------------------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1280px) {}

@media only screen and (max-width: 1280px) {}

@media screen and (max-width: 1199px) {}

/*--------------------------------------------------------------
## Netbook
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {}

@media only screen and (min-width: 980px) and (max-width: 1199px)  {}
@media only screen and (max-width: 991px) {
	.menu--espace-client{
		width: 100%;
	}
	.section-espace-client .aside .nav.navbar-nav{
		flex-direction: row;
		gap: 5px 1rem;
	}
	.menu--espace-client .navbar-nav .nav-item{
		width: auto;
		flex: 1 auto;
	}
}

/*--------------------------------------------------------------
## SMARTPHONE
--------------------------------------------------------------*/

@media only screen and (max-width: 768px) {
	.menu--espace-client{
		width: 100%;
		max-height: 82px;
		overflow: hidden;
		transition: linear .4s all;
	}
	.menu--espace-client.open{
		max-height: 400px;
	}
	.menu--espace-client h2::after{
		content: "\f0c9";
		font-family: 'FontAwesome';
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
	}

	.filters #fcp {
		width: 100%;
	}
	.section-espace-client .filters .form-item{
		width: 100%;
	}
	.section-espace-client .filters #date-input{
		flex-direction: column;
	}
	.section-espace-client #search-input button{
		width: 100%;
	}
	
	.creation-ordre .filter-actifs{
		flex-wrap: wrap;
	}
}

@media only screen and (max-width: 767px) {}

@media only screen and (max-width: 480px) {}