:root
{
    --blue-color: #3a86ff;
    --marine-color: #253858;
    /* --purple-color: #8338ec; */
    /* --purple-color: #7839FF; */
    --purple-color: #4e3dea;
    --pink-color: #ff006e;
    --orange-color: #fb5607;
    --yellow-color: #ffbe0b;

    --red-color: #e20613;
    --green-color: #00bd56;

    --light-transparent-color: rgba(255,255,255,0.2);
    --blue-transparent-color: rgba(58,134,255,0.2);
    /* --marine-transparent: rgba(37,56,88,0.2); */
    --purple-transparent-color:rgba(78,61,234,0.07);
    --purple-print-color:rgba(78,61,234,0.15);
    --pink-transparent-color:rgba(255,0,110,0.2);
    --orange-transparent-color: rgba(251,86,7,0.2);
    --yellow-transparent-color: rgba(255,190,11,0.1);
    --green-transparent-color: rgba(41,191,18,0.2);

    --red-transparent-color: rgba(226,6,19,0.2);

    --blue-background-color: rgba(58, 134, 255, 0.04);
    --marine-background-color: #f5f6fa!important;
    --purple-background-color: #F6F5FB;
    --green-background-color: rgba(41,191,18,0.1);
    --orange-background-color: rgba(251,86,7,0.1);
    --red-background-color: rgba(226,6,19,0.1);
    --blue-shadow-color: rgba(58, 134, 255, 0.01);

    --grey-90-color: #3e3d40;
    --grey-80-color: #58585a;
    --grey-70-color: #575756;
    --grey-50-color: #868686;
    --grey-40-color: #9c9b9b;
    --grey-30-color: #c6c6c5;
    --grey-20-color: #d9d9d9;
    --grey-15-color: #e3e3e3;
    --grey-10-color: #f5f5f5;

    --marine-10-color: rgba(37, 56, 88, 0.1);

}

.bleu{ color: var(--blue-color)!important; }
.violet, .success{ color: var(--purple-color)!important; }
.rose{ color: var(--pink-color)!important; }
.orange, .warning{ color: var(--orange-color)!important; }
.jaune{ color: var(--yellow-color)!important; }
.white{ color: white!important; }
.black{ color: black!important; }
.secondary{ color: var(--grey-50-color)!important; }
.danger{ color: var(--red-color)!important; }
.marine{ color: var(--marine-color)!important; }
.vert{ color: var(--green-color)!important; }
.rouge{ color: var(--red-color)!important; }
.grey{ color: var(--grey-40-color)!important; }

.bg-transparent{ background-color: transparent!important; }
.bg-bleu{ background-color: var(--blue-color)!important; }
.bg-violet{ background-color: var(--purple-color)!important; }
.bg-rose{ background-color: var(--pink-color)!important; }
.bg-orange{ background-color: var(--orange-color)!important; }
.bg-jaune{ background-color: var(--yellow-color)!important; }
.bg-white{ background-color: white!important; }
.bg-black{ background-color: black!important; }
.bg-rouge{ background-color: var(--red-color)!important; }
.bg-marine-100{ background-color: var(--marine-color)!important; }
.bg-marine-10{ background-color: var(--marine-10-color)!important; }
.bg-marine{ background-color: var(--marine-background-color)!important; }
.bg-marine-transparent{ background-color: var(--marine-background-color)!important; }
.bg-vert{ background-color: var(--green-color); }
.bg-grey{ background-color: var(--grey-15-color); }
.bg-purple{ background-color: var(--purple-transparent-color)!important; }
/* .bg-marine-transparent{ background-color: var(--marine-color)!important; } */

.bg-my-light{ background-color:var(--purple-background-color)!important; }

.bg-transparent-violet{ background-color: rgba(120, 57, 255, 0.1)!important; }

.bg-rouge-transparent{ background-color: var(--red-transparent-color)!important; }
.bg-orange-transparent{ background-color: var(--orange-transparent-color)!important; }
.bg-blue-transparent{ background-color: var(--blue-background-color)!important; }
.bg-purple-transparent{ background-color: var(--purple-background-color)!important; }

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

.o-visible{

    overflow: visible!important;

}

.mt-5{
    margin-top: 3rem !important;
}

.mt-6{
    margin-top: 4rem !important;
}

.mb-6{
    margin-bottom: 4rem !important;
}


.no-pb{
    padding-bottom : 0!important;
}

.no-pt{

    padding-top : 0!important;

}

.no-p{

    padding : 0!important;

}

.no-br{

    border-radius: 0!important;

}

.my-br{

    border-radius: 25px!important;

}

.op-70{

    opacity: 70%!important;

}

.op-40{

    opacity: 40%!important;

}

.w-33{

    width: 33.3333%!important;

}

.w-20{

    width: 20%!important;

}

.w-200p{

    width: 200px!important;

}

.w-150p{

    width: 150px!important;

}

.w-100p{

    width: 100px!important;

}

.w-50p{

    width: 50px!important;

}

.w-25p{

    width: 25px!important;

}

.w-20p{

    width: 25px!important;

}

.b-marine{

    border-top: 1px solid var(--marine-color);

}

.p-absolute{

    position: absolute;

}

.p-relative{

    position: relative;

}

.my-italic{

    font-style: italic!important;
    font-weight: 400;

}

.hover-purple:hover{

    color: var(--purple-color)!important;

}

.parameters-link{

    position: relative;
}

.parameters-link.map{

    top: 6px;
}
.parameters-link.logo{

    top: 10px;
}

.navbar-nav li.hover-li:hover>.dropdown-menu {
    display: block;
}

.navbar-nav li.hover-li .nav-link::after{

    position: relative;
    top: 1px;
    left: 2px;

}


ul.no-decoration{

    list-style-type: none;

}







.tooltip-inner{

    position: relative;
    top: -140px;

}


.tooltip-inner {
    max-width: 200px;
    padding: 3px 12px;
    color: #fff;
    text-align: center;
    background-color: var(--purple-color);
    border-radius: .25rem;
    font-size: 13px!important;
}




.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: var(--purple-color) !important;
    /* A MODIFIER */
    position: relative;
    top: -145px;
    font-size: 0px!important;

    
    
}

.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: var(--purple-color) !important;
    /* A MODIFIER */
    position: relative;
    top: -145px;
    font-size: 0px!important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: white!important;
}

.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: white!important;
}

.tooltip.bs-tooltip-bottom>.tooltip-arrow{

    border-bottom-color: white!important;

}

.tooltip.bs-tooltip-bottom.show{opacity:1!important;}

.tooltip.bs-tooltip-bottom .tooltip-inner{ 

    max-width: 500px;
    padding: 3px 12px;
    color: black;
    text-align: center;
    background-color: white!important;
    border-radius: .25rem;
    font-size: 13px!important;

    opacity: 1!important;

    position: relative;
    left: 90px;
    top: -70px;
    

    /* border: 1px solid var(--grey-20-color); */
}

.tooltip.bs-tooltip-bottom h5{ 

    font-size: 20px;
    font-family: "Poppins", sans-serif;

}

.tooltip.bs-tooltip-bottom div{ 

    font-size: 15px;

}
.tooltip.bs-tooltip-bottom div.my-secondary{ 

    font-size: 14px;

}

.my-width{

    width: 35%;

}

.my-line-h{

    line-height: 25px!important;

}

.regular{

    font-style: normal!important;
    font-weight: 500!important;

}

a:hover{

    cursor: pointer!important;
    /* color: var(--purple-color)!important; */

}

html{ height:100%; }

body{

    /* background-color: white; */
    background-color: var(--marine-background-color);


    /* min-height:110vh; */
    padding:0; margin:0; position:relative;

    margin-top: 70px;

}

.required::after {
	content: " *";
	color: var(--red-color);

	position: relative;
	bottom: 4px;
}

p{

    font-family: "Roboto", sans-serif;

}

.bold{

    font-weight: 500;

}

.bolder{

    font-weight: 600;

}

.my-padding{

    padding-bottom: 100px;

}

.larger{

    font-size: 20px;

}

.account-dropdown{

    font-family: 'Poppins', sans-serif;
    width: 300px;
    padding: 10px;
}

.account-dropdown .main{

    font-size: 16px!important;
    font-weight: 600!important;


}

.my-dropdown a, .my-dropdown button{

    font-family: 'Roboto', sans-serif;
    font-size: 15px !important;
    color: black;
    line-height: 20px !important;
}

.my-dropdown .my-rounded{

    background-color: var(--marine-10-color);
    /* color: var(--marine-color); */
    color: var(--grey-70-color);

    font-size: 15px;
    padding: 7px;
    text-align: center;
    border-radius: 50%;
    margin-right: 6px;
    height: 30px;
    width: 30px;


}

.modal-open { overflow: auto !important; padding-right: 0px!important; }

/* Login */
div.container.login{

    padding-top: 120px;
    height: 100vh;
    width: 100vw;

}

div.container.login img.logo{

    height: 25px;

}

.navbar-brand .logo{

    height: 18px;

}

div.container.login div.description{


    font-family: 'Fira Sans', sans-serif;
    margin-top: 40px;

    font-size: 16px;

}

div.container.login .login-form{

    padding-left: 80px;
    padding-right: 80px;

}

div.container.login .login-form input.form-control{


    margin: 0;
    padding: 26px 20px;
    font-family: 'Fira Sans', sans-serif;

    border-radius: 4px;
}

div.container.login .login-form label{

    font-size: 14px;

    font-weight: 400;
}

div.container.login .btn-login{

    width: 100%;
    height: 55px;

    color: white;
    background-color: #4e3dea;

    border-radius: 4px;
    font-weight: 400;
    font-size: 15px;

    font-family: 'Poppins', sans-serif;
}


div.container.login .eye-icon{

    position: relative;
    margin-top: -38px;
    margin-right: 15px;

}

div.container.login .eye-icon:hover{

    cursor: pointer;

}




div.container.login a{

    font-size: 14px;
    color: #4e3dea;

    font-weight: 500;

}

div.container.login .no-account{

    margin-top: 60px;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;


}

/* footer{ 

    position:absolute; 
    bottom:0; 
    width:100%; 
} */

footer.my-foot {
    background-color: var(--purple-color);
    /* margin-top: 100px;
    z-index: 4; */

    margin: 0!important;
}

footer.my-foot .footer-col{

    padding: 25px 50px;

}

footer.my-foot .footer-title{

    color: white;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    text-align: left;

}

footer.my-foot a.footer-link{

    color: white;
    font-weight: 600;
    font-size: 13px;
    display: block;
    text-align: left;
    margin-top: 15px;

}

footer.my-foot i{

    font-size: 29px;

}

.copyrights{

    border-top: 1px solid var(--grey-30-color);
    font-family: 'Roboto', 'sans-serif';
    font-size: 15px;
    color: var(--marine-color);
    
}

.copyrights i{

    font-size: 23px;
    position: relative;
    top: -5px;
}

.my-container{

    max-width: 1340px!important; 


}

div.container.backoffice-container{

    margin-top: 50px;

    z-index: 3;

    position: relative;
    top: -200px;

    padding: 48px;

}

div.container.flux-container{

    margin-top: 50px;

    z-index: 3;

    position: relative;
    top: -200px;

    padding: 48px;

}

/* Tabs */
.backoffice-container ul.nav-tabs,
.flux-container ul.nav-tabs{

    border: none;

    margin-top: 40px;
    margin-bottom: 20px;

}

.backoffice-container ul.nav-tabs li a,
.flux-container ul.nav-tabs li a,
.dropdown-menu ul.nav-pills li a{

    font-family: "Roboto", sans-serif;

    border: none;

    background-color: transparent;
    color: black;
    font-weight: 500;
    font-size: 16px;
    padding: 12px;
    margin-right: 4px;
    border-radius: 4px;

}

.dropdown-menu ul.nav-pills li a{

    line-height: 30px;
    font-size: 14px;
    padding: 3px 15px!important;

    border-radius: 25px;

}

.backoffice-container ul.nav-tabs li a.active,
.backoffice-container ul.nav-tabs li a.active:hover,
.dropdown-menu ul.nav-pills li a.active,
.dropdown-menu ul.nav-pills li a.active:hover{

    background-color: var(--purple-color);
    color: white!important;

}

.backoffice-container ul.nav-tabs li a:hover,
.dropdown-menu ul.nav-pills li a:hover{

    background-color: var(--grey-15-color);
    color: black;

}

.backoffice-container table tr td{

    vertical-align: middle;

}

.flux-container ul.nav-tabs li a.active,
.flux-container ul.nav-tabs li a.active:hover{

    background-color: var(--purple-color);
    color: white;

}

.flux-container ul.nav-tabs li a:hover{

    background-color: var(--grey-15-color);
    color: black;

}

.flux-container table tr td{

    vertical-align: middle;

}

/* Modal Tabs */
.modal-body ul.nav-tabs{

    border: none;

    margin-top: 40px;
    margin-bottom: 20px;

}

.modal-body ul.nav-tabs li a{

    font-family: "Roboto", sans-serif;

    border: none;

    background-color: transparent;
    color: var(--grey-50-color);
    font-weight: 500;
    font-size: 14px;
    padding: 0;
    margin-right: 17px;
    border-radius: 4px;

}

.modal-body ul.nav-tabs li a.active,
.modal-body ul.nav-tabs li a.active:hover{

    background-color: transparent;
    color: var(--purple-color);

}

.modal-body ul.nav-tabs li a:hover{

    background-color: transparent;
    color: black;

}

.modal-content label {
	font-weight: 400;
	font-size: 15px !important;
	font-family: "Roboto";
	vertical-align: middle;
}

.form-check-label{

    text-transform: none;
    color: black;
    font-weight: 500;
    font-size: 14px!important;
    margin-bottom: 7px;
}

.form-check-label:hover{

    color: var(--purple-color);
    cursor: pointer;
}




h1, h2, h3, h4, h5, h6{

    font-family: 'Roboto', sans-serif;
    color: black;
    font-weight: 700;
}

h1{
    margin-bottom: 20px;
    font-size: 32px;
}

h3{
    margin-top: 60px;
    margin-bottom: 20px;
    font-size: 28px;
}

h3.my-h3{
    margin-top: 80px;
    margin-bottom: 20px;
    font-size: 28px;
}

h4{
    /* margin-top: 60px; */
    margin-bottom: 40px;
    /* font-size: 16px; */
}

h5{
    margin-bottom: 20px;
    font-family: Roboto;
    font-size: 17px;
    font-weight: 700;
}

a{
    text-decoration: none!important;
    color: var(--purple-color)

}

div.card.my-card a{

    color: black;

}

div.card.my-card.category-card a{

    color: var(--grey-70-color);

}

div.card.my-card.category-card a:hover{

    color: black;
    font-weight: 500;

}

div.card.my-card.category-card .category-title{

    font-weight: 500;
    font-size: 21px;

}

.sheet-author div.card.my-card a{

    color: var(--purple-color);
    font-weight: 500;

}

div.card.my-card a:hover .file-title{

    color: var(--purple-color)!important;

}

a.website{

    font-size: 15px;
    font-weight: 500;

}

p.text{

    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: italic;
    color: var(--grey-50-color);
    font-size: 14px;

}

p.text.normal{

    font-style: normal;

}



.home-content{

    padding-left: 80px;
    padding-right: 20px; 

}

.home-content, .profile-sidebar, .event-sidebar{

    padding-top: 30px;
    padding-bottom: 30px;

}


.contact-list-container{
    
    height: 70vh;
    overflow: auto;

}

.event-sidebar{

    padding-right: 40px;

}

.event-sidebar div.card.my-card .file-title{

    font-size: 14px;
    line-height: 14px;

    margin: 5px 0px;

}

.sticky{
    position: -webkit-sticky;
    position: sticky!important;
    top: 122px!important;

}

.sheet-form .sticky{
    position: -webkit-sticky;
    position: sticky!important;
    top: 162px!important;

}

.fixed {
    position: fixed;
}
.scrollit {
    float: left;
}


.organization-list{

    height: calc(100vh - 350px);
    overflow-y: auto;

    scrollbar-color: var(--grey-15-color) var(--grey-10-color);
    scrollbar-width: thin;

}


/* Event */
.event-title{

    font-size: 14px;
    font-weight: 500;

}

.event-hour{

    font-size: 12px;

}

.event-icon{

    padding: 5px 0px;
    border-radius: 10px;

}




i.small-icon{

    padding: 2px;
    background-color: var(--purple-background-color);
    color: black;
    border-radius: 4px;

}

*[data-href], .my-hover{

    cursor: pointer;

}

.my-hover:hover{
    background-color: var(--marine-background-color);

    /* border: none!important; */
}

div.card.my-card{

    margin-bottom: 10px;

}

div.front.white div.card.my-card{

    background-color: white!important;
    
    /* border: 1px solid var(--grey-15-color)!important; */
}



div.card.my-card .file-title{

    font-weight: 700;
    font-size: 21px;
    line-height: 31px;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 10px;
    color: black;

    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;

    max-width: 480px;
    text-overflow: ellipsis;
}

div.card.my-card .file-title.small-title{

    max-width: 340px;

}

 div.card.my-card .category-front{

    font-size: 13px;
    font-weight: 500;

}

div.card.my-card .date {
	position: absolute;
	bottom: 20px;

	font-size: 13px;
	color: var(--grey-70-color);
}

span.badge.pole{

    font-size: 10px;
    
    background-color: var(--grey-10-color);
    color: var(--grey-50-color);

    border-radius: 20px;

    margin-bottom: 5px;

}

span.badge.pole.small{

    font-size: 10px;
    
}

div.front div.card.my-card span.my-secondary{

    font-size: 14px;
    font-weight: 400;

}

div.front div.card.my-card.my-hover:hover{

    border-color: var(--grey-20-color)!important;

}

.author-front{

    font-size: 13px;

}

.date-front{

    line-height: 15px;
    font-size: 13px!important;

}

.my-link{
    font-family: 'Poppins', sans-serif;
    color: var(--grey-50-color);
    font-weight: 600;

}

.my-link.active{
    color: var(--blue-color);
}

/* Tableaux */
table.my-table{

    font-family: 'Roboto', sans-serif;

}

table.my-table th{

    border: none;
    text-align: center;

    vertical-align: middle!important;

}

table.my-table th, div.details .title{

    /* color: var(--grey-70-color); */
    font-weight: 600;
    font-size: 14px;
    text-align: left;

}

table.my-table.admin tr:hover td{

    background-color: var(--blue-transparent-color);
    border-bottom: none!important;

}

table.my-table.admin.backoffice tr:hover td{

    background-color: var(--grey-10-color);

}

table.my-table.admin.backoffice .switch{

    width: 100px;

}

table.my-table.admin.flux tr:hover td{

    background-color: var(--grey-10-color);

}

table.my-table.admin.flux .switch{

    width: 100px;

}


table.my-table.admin td, .my-secondary{

    font-size: 14px;
    font-weight: 400;
    text-align: left;

    color: var(--grey-70-color);

    padding-top: 13px;
    padding-bottom: 13px;

    vertical-align: middle!important;

    border: none;

}

table.my-table.admin td{

    border-bottom: 1px solid var(--grey-15-color)!important;

}

table.my-table.admin tr:last-child td, table.my-table.admin tr td:first-child{

    border-bottom: none!important;


}

table.my-table.admin tr td:first-child{

    border-radius: 25px 0 0 25px;

}

table.my-table.admin tr td:last-child{

    border-radius: 0 25px 25px 0;

}

table.my-table.admin td.icon{

    width: 24px; /* same as Icon width */

}

table.my-table.admin td.icon.folder {

    padding-top: 0!important;
    padding-bottom: 0!important;

}

table.my-table.admin td.icon.folder i{

    font-size: 20px;

}

div.letter{


    font-weight: 600;

}

div.card.my-card .my-table{

    margin-bottom: 0;


}

div.card.my-card .my-table td{


    border: none;

    height: 100%;
    vertical-align: middle;


}

/* App */
.app{

    padding: 8px 10px 10px;

    border-radius: 40px;

    margin-bottom: 5px;

}


.app:hover{

    background-color: var(--grey-15-color);

}

.app-icon{

    position: relative;
    top: -1px;

    
    font-size: 22px;
    color: white;

    text-align: center;
    vertical-align: middle;

    color: var(--grey-50-color);

}

.app-type{

    font-size: 12px;
    color: black;

    font-weight: 500;

}

.app-name{
    position: relative;
    top: 3px;
    font-size: 17px;

    text-align: center;

    font-weight: 700;

    color: var(--grey-70-color);

}

.main{

    color: black!important;
    font-weight: 500!important;
    font-size: 14px;

}

.marine.main{

    color: var(--marine-color)!important;

}

table.my-table.admin td.state{

    font-weight: 600;

}

table.my-table.admin td.state i{

    font-size: 18px;

}

table.my-table.admin td.users div{

    display: inline-block;
    margin: 0 3px;
    vertical-align: middle;

    margin-right: 10px;

}

table.my-table.admin td.users div.center-cropped{

    margin-right: 1px;

}




.number {
	display: inline-block;
	line-height: 20px;
	background-color: var(--grey-10-color) !important;
	color: var(--grey-50-color);
	border-radius: 50%;
	font-size: 12px;
	margin-left: 5px;
	height: 20px;
	width: 20px;
}
  
.number span {
    display:inline-block;

    padding-top:50%;
    padding-bottom:50%;

    margin-left:8px;
    margin-right:8px;

    font-weight: 600;
}

/* Switch */
.custom-control-input:checked ~ .custom-control-label::before {

    color: #fff;
    border-color: var(--purple-color);
    background-color: var(--purple-color);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before{
    border-color: var(--purple-transparent-color);
    background-color: var(--purple-transparent-color);
}



/* Initiales */
.nav-item span.init, .table.my-table span.init {

    font-family: 'Poppins', sans-serif;

    color: black;
    
    width: 35px;
    height: 35px;
    border-radius: 25px;
    text-align: center;


    padding: 8px; 

}



/* A modifier */
.init-circle, .nav-item .init-circle span.init {
	font-family: 'Poppins', sans-serif;
	color: black;
	font-weight: 400;
	text-align: center;
	border-radius: 50%;
	font-size: 12px !important;
	display: inline-table;
	height: 22px;
	width: 22px;
	padding: 3px;
}

.nav-item .profile-btn .init-circle {
    
    background-color: var(--grey-30-color)!important;

}

.nav-item .profile-btn.active:hover, .nav-item .profile-btn.active .init-circle {
    
    background-color: var(--purple-color)!important;

}

.nav-item .profile-btn.active:hover, .nav-item .profile-btn.active .init-circle span.init{
    
    color: white!important; 

}






.init-circle .init, .nav-item span.init{
    display:table-cell;
    vertical-align:middle;
    border-radius: 50%;

}

/* .nav-item span.init{


} */


/* Couleurs */
td.interlocutor .init-circle{
    background-color: var(--marine-10-color)!important;

}

.front .file-author .init-circle{

    background-color: var(--marine-10-color)!important;

}

div.center-cropped{

    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;  

}

.init-circle.large, div.center-cropped.large{

    height: 150px;
    width: 150px;
    

}

.init-circle.large .init{

    font-size: 18px!important;
    line-height: 50px!important;

}
.init-circle.medium, div.center-cropped.medium{

    height: 40px;
    width: 40px;

    font-size: 13px;

}

.init-circle.small, div.center-cropped.small{

    height: 24px;
    width: 24px;

    font-size: 11px;

}

.inline-block{

    display: inline-block;

}

.inline{

    display: inline;

}


.block{

    display: block;

}

/* Texte */
.my-secondary, span.my-secondary{

    font-family: 'Roboto', sans-serif;
    padding: 0!important;   

}

.my-secondary.small{

    font-size: 14px!important;

}

.my-secondary.marine{

    color: var(--marine-color);
    opacity: 0.7;

    font-weight: 500;
    font-size: 15px;

}

.my-secondary.info{

    font-weight: 600;
}

.my-secondary.info i{
    
    font-size: 1.2em;
}

/* Formulaires */
form{

    font-family: 'Poppins', sans-serif;

    font-size: 0.9em;

}

form label, form legend{

    font-weight: 600;
    font-family: "Roboto", sans-serif;
    font-size: 12px!important;
    text-transform: uppercase;
    color: var(--grey-50-color);
    letter-spacing: 0px;

}

.form-group-title{

    font-size: 20px;
    font-family: "Roboto", sans-serif;
    margin-bottom: 13px;
    margin-top: 20px;

}

form input.form-control, form select.form-control, form textarea.form-control, .input-group-prepend{

    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    padding: 25px;

}

form select.form-control{

    padding: 16px;
    height: 52px!important;

}

form .antenne-hours select.form-control{

    padding: 4px 8px;
    height: 20px;

}

table.table.my-table.hours-table th{

    text-align: center;
    background-color: var(--grey-10-color);
    color: var(--grey-40-color);
    font-weight: 500;
    font-size: 12px;


}

table.table.my-table.hours-table td{

    border: none;
    vertical-align: middle;
    padding-bottom: 0;
}

table.table.my-table.hours-table fieldset{

    margin-bottom: 0;
}

table.table.my-table.hours-table fieldset div{

    display: block;
    margin: auto;
    text-align: center;
}

table.table.my-table.hours-table fieldset select{

    margin-bottom: 0;
}

.contact-infos table.my-table td{

    padding: 7px 4px 0px 0px;
    font-weight: 400;

}

.contact-infos table.my-table tr.today td{

    font-weight: 600;

}



#comment_comment{

    /* color: red; */

}

.select-sub {
	border: 1px solid var(--grey-15-color);
	border-radius: 25px;
	margin: 8px 8px 8px 0px;
	overflow-wrap: break-word;
	display: inline-block;
	padding: 5px 13px;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
}

.select-sub.active, .select-sub.active:hover {

    background-color: var(--purple-transparent-color);
    border: 1px solid transparent;
    color: var(--purple-color);

}

.select-sub:hover {

    background-color: var(--grey-10-color);
    border: 1px solid var(--grey-10-color);
    cursor: pointer;

}

/* Search Antenne */
.search-container .antenne-title {


	font-family: "Roboto", sans-serif;
    font-size: 15px;
    color: #343a40;
    font-weight: 500;

}

.search-container .open-close {

    font-weight: 500;
    font-size: 15px;

}


/* Select user */
.select-user{
	border-radius: 25px;
	margin: 8px 8px 8px 0px;
	overflow-wrap: break-word;
	display: inline-block;
	padding: 5px 13px;
	font-family: "Roboto", sans-serif;
    font-size: 15px;
    background-color: var(--grey-15-color);
    color: #343a40;
    font-weight: 500;
}

.select-user.active, .select-user.active:hover {

    background-color: var(--purple-transparent-color);
    border: 1px solid transparent;
    color: var(--purple-color);

}

.select-user:hover {

    background-color: var(--purple-transparent-color)!important;
    color: var(--purple-color)!important;
    cursor: pointer;

}

.attachment-preview {
	border: 1px solid var(--grey-15-color);
	border-radius: 4px;
	margin: 0px 8px 0px 0px;
	overflow-wrap: break-word;
	display: inline-block;
	padding: 3px 8px 3px 0px;
	font-family: "Roboto", sans-serif;
    font-size: 13px;
    
    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 150px;
    text-overflow: ellipsis;

}

.attachment-preview.active, .attachment-preview.active:hover {

    background-color: var(--purple-transparent-color);
    border: 1px solid transparent;
    color: var(--purple-color);

}

.attachment-preview:hover {

    background-color: var(--grey-10-color);
    border: 1px solid var(--grey-10-color);
    cursor: pointer;

}

.type-preview{

    height: 10px;
    width: 40px;
    line-height: 22px;
    text-align: center;
    border-radius: 5px;
    /* background-color: var(--grey-10-color) !important; */
    padding: 9px 7px;
    font-size: 11px;
    font-weight: 600;

}

.modal-title{

    font-family: "Roboto", sans-serif!important;


}

#subModal a.add.disbaled{

    cursor: not-allowed;

}

/* Cards */
div.card.my-card{

    padding: 10px;

    font-family: 'Roboto', sans-serif;

    box-shadow: none;

    border-style: solid!important;
    border-width: 1px!important;
    border-color: var(--grey-20-color)!important;

    border-radius: 20px;

    overflow: hidden;

}

div.card.my-card.user{

    margin-top: 15px;

}

div.card.my-card.file{

    margin-top: 14px;

}

div.card.my-card.no-border, .no-border{

    border: none!important;

}

.my-box{

    /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10)!important;

}

div.card.my-card.box {
    box-shadow:
    0 2.8px 2.2px var(--blue-shadow-color),
    0 6.7px 5.3px var(--blue-shadow-color),
    0 12.5px 10px var(--blue-shadow-color),
    0 22.3px 17.9px var(--blue-shadow-color),
    0 41.8px 33.4px var(--blue-shadow-color),
    0 100px 80px var(--blue-shadow-color)
  ;

}

div.card.my-card.box:hover {
    box-shadow:
    0 2.8px 2.2px var(--blue-background-color),
    0 6.7px 5.3px var(--blue-background-color),
    0 12.5px 10px var(--blue-background-color),
    0 22.3px 17.9px var(--blue-background-color),
    0 41.8px 33.4px var(--blue-background-color),
    0 100px 80px var(--blue-background-color)
  ;

  transition: ease-in-out 0.3s;
}

/* Weather */
.weather-content{

    position: relative;
    text-align: center;
    color: white;

}


img.weather-icon {

    position: absolute;
    height: 70px;

    top: 25px;
    left: 25px;

}

.weather-data {

    position: absolute;

    bottom: 35px;
    left: 30px;

    line-height: 35px;

}


    .weather-data .temperature{


        display: inline-block;
        font-size: 45px;
        font-weight: 200;

        padding-right: 15px;
        border-right: 2px solid rgba(255, 255, 255, 0.7);

    }

    sup.celcius{
        font-size: 28px;
        margin-left: -8px;
        font-weight: 400;
    }

    .weather-data .details{

        display: inline-block;
        text-align: left;

        padding-left: 15px;

        font-size: 13px;
        line-height: 22px;
        font-weight: 500;

    }



div.card.my-card div.card-body{

    padding: 20px 12px;

}

div.card.my-card div.card-body.admin{

    padding: 20px 20px 40px;

}

div.card.my-card div.card-body div.card-title{

    color: var(--grey-50-color);

    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 15px;

    line-height: 30px;

    margin-bottom: 25px;

}

div.card.my-card.category .card-body{

    min-height: 220px;
}

div.card.my-card.category .sub-container{

    height: 120px;

}

div.card.my-card.category .card-footer{

    height: 30px;

}

div.card.my-card.category div.card-body div.card-title.category{

    color: var(--marine-color);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;


}



div.card.my-card div.card-body.admin div.card-title:first-child{

    margin-top: 5px;
    margin-bottom: 15px;
}



div.card.my-card div.card-body .card-subtitle{

    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    padding-top: 15px !important;
    padding-bottom: 7px;

}

.sub-collapse{

    padding-top: 34px !important;

}


div.card.my-card div.card-body .card-subtitle a{

    color: var(--marine-color);
    display: block;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis; 
}

/* Folder Card */
div.card.my-card.folder div.card-body div.card-title{

    color: var(--grey-50-color);

    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
}

div.card.my-card.folder div.card-body div.card-subtitle{

    color: black;

    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 17px;

    line-height: 20px;

}

div.card.my-card div.card-body.admin .card-subtitle a{

    color: black;

}



div.card.my-card div.card-body .card-subtitle a:hover{

    color: black;


}

div.card.pole-admin-card{

    margin-top: 80px;

    background-color: var(--purple-color);
}

div.card.pole-admin-card .card-body h4, div.card.pole-admin-card .card-body table td{

    color:white;
}


/* Card User */
div.card.my-card.users, div.card.my-card.users .card-body{

    border: none!important;
    padding: 0;

}
div.card.my-card.users div.card-body div.card-title{

    font-weight: 500;
    margin-top: 0;

}

div.card.my-card.user{

    /* background-color: var(--grey-10-color); */
    border: none!important;

}

.transparent div.card.my-card{

    background-color: transparent;
    padding-left: 0;
    padding-top: 0;
    margin-top: 0;

}

div.interlocutor div.card.my-card.user{

    background-color: white;

}

div.sheet-author div.card.my-card.user{
    
    background-color: transparent;
    padding-left: 0;

    margin-top: 0px!important;


}

div.sheet-author div.card.my-card.user .my-secondary.main{
    
    color: var(--marine-color)!important;

}

div.sheet-author div.card.my-card.user .my-secondary{
    
    color: var(--marine-color)!important;

}



/* Notification Cards */
div.card.my-card.notification{
/* 
    margin-top: 100px; */


}


/* Liste des sous-catégories */

span.subcategory{

    margin-top: 10px;
    margin-bottom: 10px;

}

/* Avatar */

.center-cropped {

    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-size: auto 100%;

    display: inline-block;
}

/* Notification Badge */

span#notification-circle {
	font-family: 'Poppins', sans-serif;
	position: absolute;
	top: 15px;
	display: inline-block;
	height: 20px;
	width: 20px;
	background-color: #F02849;
	color: white;
	/* box-shadow: 0 0 0 2px white; */
	border-radius: 50%;
	text-align: center;
	right: 75px;
	z-index: 3;
}

span#notification-circle #counter{

    font-size: 11px;
    padding-top: 3px;
    display: inline-block;
    vertical-align: top;


}

/* Notification Dropdown */
#my-dropdown{

    width: 300px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    scrollbar-color: var(--grey-15-color) var(--grey-10-color);
    scrollbar-width: thin;

}

#my-dropdown table.my-table td{

    border-top: none!important;
    vertical-align: top;

    line-height: 23px;
    

}

h6.dropdown-header {

	font-size: 20px;
    
}

#my-dropdown .notif-title {
	font-size: 17px;
	font-weight: 700;
	height: 30px;
	line-height: 30px;
	color: black;
}

#my-dropdown td.notif-icon span.icon{

    background-color: var(--blue-transparent-color);
    color: var(--blue-color);
    display: table-cell;
    vertical-align: middle; 
    text-align: center;
    text-decoration: none;

    border-radius: 25px;

    height: 40px;
    width: 40px;
    font-size: 20px;

    

}

#my-dropdown td.notif-icon span.state-icon{

    /* position: absolute;
    top: 20px; */

    
    position: relative;
    right: -15px;
    top: -15px;

    height: 16px;
    width: 16px;
    display: inline-block;
    
    background-color: red;
    border-radius: 25px;


}


#my-dropdown td.notif-icon i{

    font-size: 17px;
    line-height: 23px;

}


#my-dropdown td.notif-content{

    font-size: 15px;
    color: var(--grey-50-color);

}

#my-dropdown td.notif-content strong{

    color: black;
    font-weight: 500;

}

#my-dropdown td.notif-content span.date{

    font-size: 14px;

}

span.mime{

    border: 1px solid var(--grey-40-color);
    font-weight: 400;
    font-size: 10px;
    padding-left: 3px;
    padding-right: 3px;


}

.dropdown-item{

    font-family: "Roboto", "sans-serif";

}

.dropdown-item:hover{

    background-color: var(--marine-10-color);

}


.dropdown-item.danger{

    color: var(--red-color);

}

.dropdown-item.danger i{

    background-color: var(--red-background-color);
    color: var(--red-color);

}

.dropdown-item.danger:hover{

    background-color: var(--red-transparent-color);

}






div.alert.alert-danger {

	color: black;
	background-color: white;
	border-left: 6px solid var(--red-color);
	font-family: "Roboto", "sans serif";
	font-weight: 500;
	border-radius: 6px;
	margin-top: 40px;

}

.alert {

	font-family: "Roboto", "sans serif";
	border-radius: 6px;
	margin-top: 40px;

}



.alert.alert-success {

	color: var(--green-color);
	background-color: var(--green-background-color);
	border: 1px solid var(--green-color);

}

.alert.alert-warning {

	color: var(--orange-color);
	background-color: var(--orange-background-color);
	border: 1px solid var(--orange-color);

}

.alert.alert-danger {

	color: var(--red-color)!important;
	background-color: var(--red-background-color)!important;
	border: 1px solid var(--red-color)!important;

}

.alert.alert-info {

	color: var(--purple-color);
	background-color: var(--purple-background-color);
	border: 1px solid var(--purple-color);

}


.my-title.weather-title{

    margin-top: 20px;

}

ul#pole-list{

    list-style: none;
    padding-left: 0;

    margin-top: 40px;
    margin-bottom: 40px;

}

ul#pole-list li{

    border: 1px solid var(--grey-20-color);
    border-radius: 8px;

    margin-bottom: 10px;

    padding: 15px;

    width: 400px;

}

ul#pole-list li:hover{

    cursor: grab;
}

#map{
    width: 100%;
    height: 400px;
    background-color: grey;

}

.contact-tabs a.active{

    background-color: var(--green-color)!important;

}

.contact-card:hover{

    cursor: pointer;
    background-color: var(--grey-10-color);

}

.contact-icon {

	height: 40px;
	width: 40px;
	background-color: var(--grey-10-color);
	color: var(--grey-40-color);
	border-radius: 25px;
	font-size: 15px;
    line-height: 40px;
    
}

.contact-card.active .contact-icon, .contact-card.active:hover {

	background-color: var(--purple-transparent-color);
	color: var(--purple-color);

    
}


.contact-title {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: black;
}


.contact-title.active{

    color: var(--purple-color);

}

.contact-secondary{

    font-size: 13px;
    color: var(--grey-70-color);

}

div.card.my-card.contact-infos{

    min-height: 300px;
    

}

.contact-infos .contact-title {
    font-size: 27px;
    font-weight: 400;
    line-height: 40px;

}

.contact-infos .contact-secondary {
	font-size: 15px;
}

.contact-info {

	line-height: 16px;
	font-weight: 500;
	font-size: 15px;
	padding-top: 8px;
    padding-bottom: 8px;
    
}

.contact-info:hover{

    background-color: var(--grey-10-color);
    cursor: pointer;


}

.contact-info:hover i.copy{

    color: var(--grey-70-color);


}

.contact-info a:hover{

    text-decoration: underline!important;


}

.contact-info i{

    font-size: 20px;

    color: var(--purple-color);

    margin-right: 8px;

}

.contact-info i.copy{

    font-size: 15px;

    color: transparent;
    margin: 3px 10px 3px;

}

.contact-map{

    min-height: 400px;
    min-width: 150px;

    border-radius: 8px!important;

}

div.card.my-card.contact-user{

    border-radius: 8px;

}

.contact-user .name{

    font-size: 15px;
    font-weight: 500;

}


div.search-container{

    padding-top: 70px;
    max-width: 1000px;

}

/* form.search-form input{

    padding: 5px 15px!important;
    margin-top: 12px;
    margin-left: 20px;
    margin-bottom: 0px; */


form.search-form input#search-bar{
	margin-top: 18px;
	margin-bottom: 0;
	padding: 0;
	height: 55px;
	color: var(--purple-color);
	background-color: transparent;
	border: none;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 42px;
    line-height: 48px;
    width: 100%;
}


form.search-form ::placeholder{

    color: var(--marine-color);
    opacity: 0.2!important;

}

form.search-form select{

    width: 200px;

}

form.search-form .btn {
	width: 200px;
	height: 51px;
}





/* Account */
.header-profile-card{

    border: none !important;
    border-radius: 8px;
    background-color: var(--grey-10-color);
    background-position: center;
    background-size: cover;
}


.account-picture .center-cropped, .account-picture .init-circle{

    margin-top: 5px;

}

.account-picture div.center-cropped{

    vertical-align: middle;

}

.account-picture a {
	position: absolute;
	top: 155px;
	left: 97px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--grey-15-color);
	height: 30px;
	width: 30px;
	border-radius: 25px;
	line-height: 29px;
	font-size: 15px;
}


.account-title{

    height: 250px;

}

.account-name {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	color: black;
	font-size: 36px;
    margin-top: 18px;

    
}

.account-name i{

    font-size: 24px;
    
    
}

.account-poste {
	margin-top: 3px;
	font-weight: 500;
	color: var(--purple-color);
	font-size: 18px;
}

.account-antenne {
	margin-top: 7px;
	font-weight: 400;
	color: var(--grey-70-color);
	font-size: 16px;
}


.account-title .account-poste .badge {
	background-color: rgba(255,255,255,0.4);
	color: white;
	border-radius: 25px;
	padding: 5px 10px;
	vertical-align: middle;
	font-size: 11px;
	margin-left: 3px;
}


.account-title .account-antenne {
	position: absolute;
	bottom: -7px;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
    font-weight: 400;
    color: white;
}

.account-title .introduction {

	font-weight: 400;
	font-size: 14px;
	position: absolute;
    bottom: 12px;
    
}

div.card.my-card.stat-card{

    padding: 10px 20px;
    background-color: var(--purple-background-color);

}

div.card.my-card.stat-card table td{
	width: 157px !important;
    height: 32px !important;
}

.stat-card .stat {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
    font-size: 24px;
    color: black;
}

.stat-card .txt {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
    font-size: 14px;
    color: black;
    opacity: 0.5;

}



.account-nav{

    /* height: 100px; */

}

.account-nav .btn {
    padding: 15px 60px;
    font-weight: 400;

    border-bottom: 3px solid white;

    border-left: none;
    border-right: none;
    border-top: none;

}

.account-nav .dropdown{

    float: right!important;

}

.account-nav .dropdown .btn, .account-nav .dropdown .btn:hover{

    margin-top: 8px;
    padding: 10px;
    border-bottom: none;

    
    
}



.account-nav .btn:hover {
    background-color: var(--grey-10-color);
    border-bottom: 3px solid white;
}

.account-nav .btn.active, .account-nav .btn.active:hover, .account-nav .dropdown-item.active{

    color: var(--purple-color);
    border-bottom: 3px solid var(--purple-color);

    background-color: transparent;

    font-weight: 500;
    
}

.account-nav .dropdown-item.active{

    color: var(--purple-color);

    background-color: transparent;

    font-weight: 500;
    
}


.account-nav span a{

    margin-top: 10px;


}

.account-sidebar h5, .account-content h5{

    /* font-size: 20px; */

}


.account-sidebar i {
	font-size: 18px;
    margin-right: 15px;
    
    margin-top: 2px;
}

.account-sidebar a:hover {
    
    text-decoration: underline!important;
    text-decoration-color: var(--purple-color)!important;

}


.account-sidebar .infos-card{

    
    color: var(--grey-50-color);
    font-size: 15px;

    font-weight: 400;

}

.account-sidebar .infos-card td{

    padding-top: 4px;
    padding-bottom: 4px;

    vertical-align: top;

}

.account-sidebar .infos-card td.info-icon{

    width: 35px;
    text-align: center;
    vertical-align: top!important;

}

.account-sidebar .infos-card span.info{

    color: black;

}

.account-content .contact-user{

    height: 85px;

}

.account-content .contact-user table{

    height: 100%;

}


.account-content .contact-user table td{

    vertical-align: middle;

}

.account-content .contact-user table td.picture{

    width: 75px;
    text-align: center;

}


.modal-content.loading .modal-body{

    font-family: "Roboto", 'sans-serif';
    height: 300px;

    text-align: center;
    font-size: 20px;
    font-weight: 500;

}

.modal-content.loading .modal-body div.content{

    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

}

.modal-content.loading .modal-body div.message{

  font-size: 13px;

}

.sheet-form-anchor{

    position: relative;
    /* top: -800px; */
    top: -500px!important;

}

#nav-favorites-tab, #nav-popular-tab{

    color: var(--grey-40-color);

}

#nav-favorites-tab.active, #nav-popular-tab.active , #nav-favorites-tab:hover, #nav-popular-tab:hover{

    color: black;

}

.sheet-nav{

    position: fixed;
    top: 70px;
    height: 70px;
    width: 100%;

    background-color: white;

    border-bottom: 1px solid var(--grey-15-color);

    z-index: 3;
    vertical-align: middle;
}

#change-circle {
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 25px;
}

#change-circle.success{
    
    background-color: var(--green-background-color);
    color: var(--green-color)!important;

}

#change-circle.danger{
    
    background-color: var(--orange-background-color);
    color: var(--orange-color)!important;

}

.form-header .card.my-card .card-title{

    color: black!important;
    opacity: 1;

}

.error-container{
    margin-top: 27vh;
}

.error-container .error-status {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
    font-size: 170px;
    line-height: 154px;
    
    color: var(--purple-color);
}

.error-container .error-message {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 34px;
    margin-bottom: 20px;
    color: black;
}

.error-container .error-content {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;

}