/* - - - - - - - - - - Ajout CSS - - - - - - - - - - */
h1, h2 {
	color: #428BCA;
	text-align: center;
}

textarea {
  	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: .25rem;
  	margin: .5rem 0;
	color: #495057;
}

input[type="text"]:not(.form-control), input[type="email"]:not(.form-control), input[type="url"]:not(.form-control), input[type="date"]:not(.form-control), input[type="password"]:not(.form-control), input[type="search"]:not(.form-control), input[type="tel"]:not(.form-control), input[type="number"]:not(.form-control), select:not(.form-control) {
	font-size: .875rem;
}

body.ltr .close-offcanvas {right: 1.75rem;}
.offcanvas-menu {
	width:250px;
	line-height: 2.5;
}
.offcanvas-menu .offcanvas-inner {padding:2rem;}
.offcanvas-menu, #offcanvas-toggler {font-size: 2rem;}

.form-button {
  	background: #428BCA;
  	color: #FFF;
  	border-radius: .25rem;
  	padding: .25rem 1rem;
  	min-height: 2.5rem;
  	cursor: pointer;
  	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.form-button > i {font-size: 1.25rem;}
.form-button:hover {
  	background: #CCE0F1;
  	color: #428BCA;
  	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}
.button-red:hover {
  background: #F2D7E1;
  color: #C44173;
}
.button-green:hover {
  background: #DAF8F3;
  color: #18806E;
}
.button-violet:hover {
  background: #F1CCE0;
  color: #CA428B;
}
.button-red:hover {
  background: #F2D7E1;
  color: #C44173;
}
.button-dark-red:hover {
  background: #FFD4D4;
  color: #990000;
}

#sp-main-body {padding: 1rem 0;}
.masquer {display: none;}
.button-white {background: #FFF;}
.button-red {background: #C44173;}
.button-dark-red {background: #990000;}
.button-green {background: #18806E;}
.button-blue {background: #428BCA;}
.button-violet {background: #CA428B;}

.text-white {color: #FFF !important;}
.text-red {color: #C44173 !important;}
.text-dark-red {color: #990000 !important;}
.text-green {color: #18806E !important;}
.text-blue {color: #428BCA !important;}

.color-red {color: #FF0000;}
.color-green {color: #009900;}

/******************** Padding ********************/
.pad50-before::before {padding-right: .5rem!important;}
.pad50 {padding: .5rem;}

/******************** Margin ********************/
.mauto {margin: 0 auto;}
.mtop1 {margin-top: 1rem;}

/******************** Affichages ********************/
.nodisplay {display: none;}
.border-on {border: 1px solid rgba(57,60,87,0.15);}

/******************** FLEX ********************/
.displayflex {display: flex;}
.flexwrap {flex-wrap: wrap;}
.flexcolumn {flex-direction: column;}
.flexcenter {justify-content: center;}
.flexaround {justify-content: space-around;}
.itemscenter {align-items: center;}

.formflex {
	background: #F6F6F6;
	padding: .5rem;
	border-radius: .25rem;
}
.formflex div {padding: .5rem;}
.formflex label {
	font-style: italic; 
	color: #428BCA; 
	padding-left: .75rem; 
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.formdepense {width: 60%;}
	#choix-mois {min-width: 180px;}
}

@media (max-width: 767.98px) {
	.mobileoff {display: none;}
	.formdepense {width: 100%;}
	#mois-prec, #mois-suiv {padding: .25rem;}
	#choix-annee {max-width: 4rem; padding: .5rem;}
	#daily-planning, #daily-planning select {padding: 0;}
	#daily-planning div, #daily-hours div {padding: 0;}
	#hours-choix h2 {font-size: 1.25rem;}
}

/******************** Nombres ********************/
.nbr-right {
  	text-align : right;
  	padding-right: .5%;
}

/******************** Largeurs ********************/
.wauto {width: auto;}
.width-2 {width: 2% !important;}
.width-2-3 {width: 2.3% !important;}
.width-4 {width: 4% !important;}
.width-5 {width: 5% !important;}
.width-10 {width: 10% !important;}
.width-15 {width: 15% !important;}
.width-20 {width: 20% !important;}
.width-25 {width: 25% !important;}
.width-30 {width: 30% !important;}
.width-40 {width: 40% !important;}
.width-50 {width: 50% !important;}
.width-60 {width: 60% !important;}
.width-70 {width: 70% !important;}
.width-75 {width: 75% !important;}
.width-80 {width: 80% !important;}
.width-90 {width: 90% !important;}
.width-100 {width: 100% !important;}

.minw120 {min-width: 120px;}
.minw160 {min-width: 160px;}
.minw180 {min-width: 180px;}
.minw320 {min-width: 320px;}
.minw360 {min-width: 360px;}
.minw700 {min-width: 700px;}
.minw960 {min-width: 960px;}
.minw1200 {min-width: 1200px;}

/******************** Graisse ********************/
.weight-400 {font-weight: 400;}
.weight-500 {font-weight: 400;}
.weight-600 {font-weight: 400;}
.weight-700 {font-weight: 400;}
.weight-800 {font-weight: 400;}
.weight-900 {font-weight: 400;}

/******************** FontAwesome ********************/
.faw::before {
  	font-family: "Font Awesome 5 Pro";
  	font-size: 18px;
}

.f00c::before {content: "\f00c";} /** fa-check **/
.f013::before {content: "\f013";} /** fa-cog **/
.f015::before {content: "\f015";} /** fa-home **/
.f02f::before {content: "\f02f";} /** fa-print **/
.f03a::before {content: "\f03a";} /** fa-list **/
.f055::before {content: "\f055";} /** fa-plus-circle **/
.f07b::before {content: "\f07b";} /** fa-folder **/
.f086::before {content: "\f086";} /** fa-comments **/
.f093::before {content: "\f093";} /** fa-upload **/
.f0c0::before {content: "\f0c0";} /** fa-users **/
.f0c7::before {content: "\f0c7";} /** fa-save **/
.f13e::before {content: "\f13e";} /** fa-unlock-alt **/
.f153::before {content: "\f153";} /** fa-euro-sign **/
.f235::before {content: "\f235";} /** fa-user-times **/
.f274::before {content: "\f274";} /** fa-calendar-check **/
.f2b9::before {content: "\f2b9";} /** fa-address-book **/
.f2f6::before {content: "\f2f6";} /** fa-sign-in-alt **/
.f303::before {content: "\f303";} /** fa-pencil-alt **/
.f30d::before {content: "\f30d";} /** fa-lock-alt **/
.f316::before {content: "\f316";} /** fa-file-check **/
.f406::before {content: "\f406";} /** fa-user-alt **/
.f410::before {content: "\f410";} /** fa-window-close **/
.f4fd::before {content: "\f4fd";} /** fa-user-clock **/
.f56e::before {content: "\f56e";} /** fa-file-export **/
.f660::before {content: "\f660";} /** fa-folders **/
.f737::before {content: "\f737";} /** fa-clipboard-list-check **/
.f781::before {content: "\f781";} /** fa-blog **/
.f7d9::before {content: "\f7d9";} /** fa-tools **/
.f802::before {content: "\f802";} /** fa-folder-tree **/
.f865::before {content: "\f865";} /** fa-file-search **/

#coming-soon-countdown {display: none;}

.mess-alert-ok {
    width: 50%;
  	font-size: 1.5rem;
    text-align: center;
  	margin: 1rem auto;
    background: #dfd;
    border: 1px solid #0b0;
    border-radius: .5rem;
}

.mess-alert-error {
    width: 100%;
  	font-size: 1.5rem;
    text-align: center;
    padding: 2rem;
  	margin: 1rem;
    background: #fdd;
    border: 1px solid #0b0;
    border-radius: .5rem;
}

#sp-title img {width: 100%;}

#sp-top2 {color: #fff;}

.centrer {text-align: center;}
.gauche {text-align: left !important;}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {padding: .25rem .5rem .5rem 1rem;}
.sp-megamenu-parent > li > a {font-size: 1rem;}

/* - - - - - - - - - - Module Connexion - - - - - - - - - - */
.selectBtn .loginBtn:first-child {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* - - - - - - - - - - Position sous-menus - - - - - - - - - - */
.sp-megamenu-parent .sp-dropdown.sp-dropdown-main {top: 80%;}

/* - - - - - - - - - - Saisie des absences et des heures - - - - - - - - - - */

#div-choix {
  	width: 100%;
  	text-align: center;
}
#div-choix h2 {text-align: center;}
#div-choix div {
	width: 40%;
  	height: 3rem;
  	float: left;
}
#div-choix input, #div-choix select, .fond-saisie input, .fond-saisie select {
  	margin: 0 auto;
  	padding: .5rem !important;
  	color:#428BCA !important;
  	background: #EBF5FF !important;
}

#daily_planning div, #daily_hours div {
    float: left;
    width: 14%;
    padding: 0 1rem .5rem;
    text-align: center;
}

#daily-planning div, #daily-hours div {
    width: 14%;
	text-align: center;
}
#daily-planning select, #daily-hours select {text-align: center;}

#daily_planning_table tr, #daily_hours_table tr, #monthly_planning div, #month_sum div {line-height: 2.5rem;}

#monthly_planning input, #monthly_hours input, #month_sum input {
    width: 100%;
  	text-align: center;
}

#daily_hours input {
  	width: 40%;
  	text-align: center;
}
#daily_hours_table p, #daily_planning p { margin-bottom: 0; }

#monthly_planning div, #monthly_hours div, #month_sum div {
  	float: left;
  	width: 2.5%;
  	text-align: center;
  	font-size: .625rem;
  	line-height: 1.5rem;
  	margin-bottom: .5rem;
}
#monthly_hours h4 {font-size: 1rem;}
#monthly_planning h3, #monthly_hours h3, #monthly_hours h4 {
  	text-align: left;
  	padding-top: .5rem;
}

#daily_planning select, #daily_hours div {text-align: center;}
#daily_planning select {width: 100%;}

#absence-codes-div div {
    float: left;
    padding: 1rem;
    text-align: center;
}

#div-choix-unlock {text-align: center;}
#div-choix-unlock table {margin: 0 auto;}

#mois-prec, #mois-suiv { 
  	background: #EBF5FF; 
  	color: #428BCA;
  	border: 1px solid rgba(0, 0, 0, .15);
}

/* - - - - - - - - - - Tableaux - - - - - - - - - - */

#form-login [type="submit"] {
	color: #fff;
	background-color: #28a745;
	border-color: #28a745;
	padding: .375rem .75rem;
	margin: 0;
}

th, tr {height: 3rem;}

tr:nth-child(2n+1) td {background: #f6f6f6;}

th {
  	text-align: center;
  	padding: 1rem 0;
}

td, th {
    border: 1px solid rgba(57,60,87,0.15);
    padding: 0 .5rem;
}

input {line-height: 1.5rem;}
.input-7 {min-width: 7rem;}
.input-10 {min-width: 10rem;}

/*[type="submit"] {
    cursor: pointer;
    border-radius: .5rem;
    background: #5481CA;
  	color: #fff;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    padding: .25rem 1rem;
    margin: .5rem;
} */

#error-mess {
    background: #fbb;
    padding: 2rem;
    border-radius: .5rem;
}

#error-mess p {font-size: 1.5rem;}

input[type="radio"] {margin-right: .25rem;}

/* - - - - - - - - - - Timesheet PDF - - - - - - - - - - */
#pdf_report td {
  	font-size: .625rem;
  	text-align: center;
  	padding: 0;
}
#pdf_report tr, #pdf_absences tr, #pdf_absences th, #pdf_resume_month tr, #pdf_resume_month th {height: 1rem;}
#pdf_report h3 {
  	font-size: 1rem;
  	margin-bottom: 0;
  	color: #cc0000;
}
#pdf_report h4 {
  	font-size: .8rem;
}
#pdf_report table {margin: .5rem 0;}
.ligne-total td {
  	color: #0000ee;
  	font-weight: 600;
  	padding: .25rem 0 !important;
}
.couleur-we {background: #ffffde !important;}

#pdf_resume, #signatures {width: 100%;}
#pdf_resume div {float: left;}
#pdf_absences {
  	width: 30%;
  	font-size: .625rem;
}
#signatures {font-size: .8rem;}
#pdf_resume_month {
  	width: 40%;
  	font-size: .625rem;
}
#pdf_absences {margin-right: 30%;}
#signatures div {
  	width: 45%;
  	border: 1px solid #eee;
  	height: 5rem;
}
#instructions h4 {font-size: 1rem;}
#instructions li {font-size: .625rem;}

/* - - - - - - - - - - PDF uploadés - - - - - - - - - - */
/* #list-pdf button {
    border-radius: .5rem;
    background: #137ae9;
    color: #fff;
    padding: .5rem;
} */

/* - - - - - - - - - - Menus dépenses - - - - - - - - - - */
#menu-f2 h2 {font-size: 1.4rem;}
#menu-f2 a {font-size: 1rem;}

/* - - - - - - - - - - Page export Excel - - - - - - - - - - */
#export-buttons input {
	float: left;
  	margin-top: 2rem;
  	font-size: .9rem;
}

/* - - - - - - - - - - Formulaires dépenses - - - - - - - - - - */
#new-expense textarea {
	border: 1px solid rgba(0, 0, 0, .15); 
    border-radius: .25rem;
	margin: 0;
}
#new-expense h5 {
  	background: #EBF5FF; 
  	color: #184080; 
  	margin: 0 auto; 
  	text-align: center; 
  	line-height: 2.5rem; 
  	border-radius: .25rem;
}
#new-expense table {
  	width: 100%; 
  	margin: 1rem auto;
}
#new-expense input, #new-expense textarea, #new-expense select { 
  	color: #184080;
}
sup {color: red;}
select {padding: .25rem .75rem;}

/* - - - - - - - - - - Infobulles - - - - - - - - - - */
.picto-item {
  position: relative;  /*les .picto-item deviennent référents*/
}

/* on génère un élément :after lors du survol et du focus :*/

.picto-item:hover:after,
.picto-item:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.2rem;
  left: 10%;
  transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: .5rem 1rem;
  background: #184080;
  color: #FFF;
  border-radius: 4px;
  font-size: .75rem;
}

/* on génère un second élément en :before pour la flèche */

[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -.8rem;
	left: 10%;
	transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 1.25rem;
  color: #184080;
}

/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;
}

/* - - - - - - - - - - R E S P O N S I V E - - - - - - - - - - */

/* - - - - - - - - - - Connexion - - - - - - - - - - */
#form-login .input-group-text {width: 2.5rem;}
.col-auto {margin: 0 auto;}

@media (max-width: 480px) {
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {padding: 0 10px;}

.input-10 {min-width: 9rem;}
.input-7 {min-width: 5rem;}
}