/* liste Appel  */

 

.section_title {
	
	padding: 5px 30px;
	font-size: 1.3em;
}

.section_title > label {
	font-weight: bold;
    display: contents;
    margin-bottom: 0rem;
}


.raccro_Operateur>::after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f348";
    color: #ef8f00;
    font-weight: 600;
    margin-left: 10px;
}

.raccro_Client>::after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f347";
    color: #3abf31;
    font-weight: 600;
    margin-left: 10px;
}


.appel_Sortant>::after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f311";
    color: #ef8f00;
    font-weight: 600;
    margin-left: 12px;
	font-style: normal;
	font-size: x-large;
}

.appel_Entrant>::after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f310";
    color: #21aa2b;
    font-weight: 600;
    margin-left: 12px;
	font-style: normal;
	font-size: x-large;
}

.appel_Interne>::after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f968";
    color: #0075ff;
    font-weight: 600;
    margin-left: 12px;
	font-style: normal;
	font-size: x-large;
}


.ecoute-button {
    border-radius: .25rem;
    transition: 0.2s;
    border: none;
    padding-left: 0px;
	margin-left: 12px;
}

.line {
	display: flex;
    justify-content: space-between;
	align-items: center;
}

.repondu {
    border-left: 6px solid #008000;
}

.dissuation {
    border-left: 6px solid #901515;
}

.rappel {
    border-left: 6px solid #337bc7;
}
.rappel.rappel_0{
	border-left: 6px solid #bd0000a3;
}
.rappel.rappel_1,.rappel.rappel_2{
    border-left: 6px solid #008000;
}
.rappel-traite {
    border-left: 6px solid #008000;
}

.transfert {
    border-left: 6px solid #865600;
}

.abandon {
    border-left: 6px solid #40cb58;
}

.appel-element.vide {
	border-left: 6px solid #008000;
	font-size: 1rem;
		padding: 8px 8px;
}
.appel-element {
    font-size: 0.8rem;
    padding-left: 12px;
    text-decoration: none;
	padding: 3px 8px;
    border-top: 1px solid rgb(0 0 0 / 5%);
    border-bottom: 1px solid rgb(0 0 0 / 35%);
    border-right: 1px solid rgb(0 0 0 / 28%);
    transition: all 0.2s;
    box-shadow: 5px 1px 5px rgba(0,0,0,.2);
    margin: 6px 0px;
    border-radius: 10px;
	min-width: 450px;
    flex-direction : column;
}




.appel-list {
 margin-left: 30px;
    margin-right: 30px;
 
    background-color: #f4f4f4;
   
 }

.date-bloc {
	display: inline-flex;
}
.agent-bloc {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.duree-bloc {
	display: inline-flex;
	justify-content: center;
}
.motif-bloc {
	display: inline-flex;
	justify-content: center;
}
.date-month:before {
    content: "\00a0";
	text-indent: 1em; 
}

.info {
	font-weight : 500;
	color: rgb(44 43 43);
	text-shadow: 0px 0px rgb(95,99,104);
}

.libelle {
	color: rgba(0,0,0,0.68);
}
.agent-num {
	font-size: 0.8rem;
}

 
.etat-bloc {
    display: flex;
    justify-content: space-evenly;
    /* flex-direction: column; */
    align-items: center;
    align-content: flex-end;

}

.datetime-bloc {
margin-left: 10px;
}

.appel-element-center-block {
    display: flex;
    flex-direction: column;
	
}


    #global-appel-wrapper{
        display : flex;
        flex-direction : column;
    }

    .fill-available{
        width : fill-available;
    }
    #client-wrapper{
        width : 100%;
    }
	
	/* style des containers */
	
#appel-info-container {
border: 1px solid rgba(0,0,0,.12);
    border-radius: 8px;
    display: flex;
    flex: 1;
	}
	
	
.inline-flex {
	display: inline-flex;
}



.colone_titre {
	    padding: 8px 0px 8px 30px;
		font-weight: bold;
}

.colone_info_titre {
	
	font-size:1.2rem;
	font-weight: 400;
}

.colone_info.row {
	display:flex;
	flex-wrap: nowrap;
	margin: 0;
	margin-top: 8px;
	align-items: center;
	align-items: flex-start;
} 


.box_info {
	box-shadow: 0px 0px 3px 0px rgb(119 119 119 / 63%);
    -moz-box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.63);
    -webkit-box-shadow: 0px 0px 3px 0px rgb(119 119 119 / 63%);
	margin-right: auto;
	margin-left : auto;
	flex-direction: column;
	flex-wrap: nowrap;
	border-radius:8px 8px 8px  8px;
	padding: 5px 5px 13px 5px;
}

.other_info_top {
	white-space: nowrap;
	overflow: hidden;
}

.adresse-ville {
	margin-left : 5px;
}


/* new */
.user-icon-container>.fa-user-headset {
	font-size: xxx-large;
}

.user-icon-container {
    text-align: center;
    align-self: center;
}

.repondant-username {
	font-size: 1.8em;
	font-family: "Open Sans", sans-serif;
}

.user-card {
  padding: 30px;
  box-shadow: 0px 5px 15px rgba(0,0,0,.2);
  border-radius: 10px;
  min-width: 260px; 
}


.box-info-appel {
	padding: 30px;
	box-shadow: 0px 5px 15px rgba(0,0,0,.2);
	border-radius: 10px;
	min-width: 260px; 
}

.icon-info-appel{
	font-size : 2em;
}

.fa-inbox-in.icon-info-appel {
color: #21aa2b;
}
 .fa-inbox-out.icon-info-appel {
color: #21aa2b;
}
 
 .flex {
 display : flex;
 }
 
.service_container {
	margin-top: 8px;
    display: flex;
    align-items: center;
 }
 
 .info-appel {
	align-self: center;
 }
 
 .client-column-libelle {
	min-width : 155px;
 }
 
 .space-before {
	margin-left : 5px;
 }
 
 .row-user-icon {
    align-items: center;
 }
 .appel-element-left-block {
	min-width: 150px;
    display: flex;
     align-items: center;
 }
 
.appel-element-right-block {
    min-width: 150px;
    display: flex;
    align-content: space-around;
    align-items: flex-end;
    flex-direction: column;
}
.info-appel-icon {
	align-content: center;
	padding-right: 15px;
	padding-left: 15px;
}
.appel-element .showCommentaire{
    color: #0061d3;
    background: #21aa2b14;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #21aa2b2b;
    height: fit-content;
    cursor : pointer;
    align-self: center;
}
.commentaireAppel{
    position: relative;
    display: flex;
    display : none;
    background: #fff;
    border-left: 3px solid #0061d3;
    padding: 5px;
    margin: 10px 0px 10px 0px;
    padding-left: 10px;
    background: #0061d33d;
}
.appel-main-element{
    display : flex;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: space-between;
    width: 100%;
}
.commentaireAppel-closeButton{
    position: absolute;
    left: -7px;
    top: -10px;
    color: #0061d3;
    cursor: pointer;
}
.commentaireAppel-content{

}