/* ----- UTILITY CLASSES ----- */

.u-color-grey {
  color: rgb(51, 51, 51, 0.6);
}

.u-no-border {
	border: none !important
}
.u-border {
	border: 1px solid var(--color-accent) !important
}
.u-top-border {
	border-top: 1px solid var(--color-accent) !important
}
.u-bottom-border {
	border-bottom: 1px solid var(--color-accent) !important
}
.u-padding-bottom-1per, .u-padding-bottom-1per div {
	padding-bottom: 1%
}
.u-padding-bottom-2per {
	padding-bottom: 2%
}
.u-padding-top-2per {
	padding-top: 2%
}
.u-padding-top-bottom-1per {
	padding-bottom: 1%;
	padding-top: 1%
}
.u-padding-1per {
	padding: 1%
}
.u-padding-3per {
	padding: 3%
}
.u-padding-left-right-5per {
	padding: 0 5%
}
.u-padding-left-right-1rem {
	padding: 0 1rem
}
.u-padding-bottom-1rem {
	padding-bottom: 1rem
}
.u-margin-0 {
  margin:0;
}
.u-margin-bottom-1per {
	margin-bottom: 1%
}
.u-margin-right-1rem {
	margin-right: 1rem
}
.u-margin-right-2rem {
	margin-right: 2rem
}
.u-margin-left-3rem {
	margin-left: 3rem
}
.u-margin-top-1rem {
  margin-top: 1rem;
}
.u-margin-top-bottom-2rem {
  margin: 2rem 0;
}
.u-margin-top-bottom-0_5rem {
  margin: .5rem 0;
}
.u-margin-hor-center {
  margin: 0 auto;
}
.u-word-break-all {
	word-break: break-all
}
.u-flex { display: flex; }
.u-flex-direction-column {
	display: flex;
	flex-direction: column
}
.u-flex-center {
	align-self: center;
	display: flex
}
.u-flex-start {
	align-self: flex-start;
	display: flex
}
.u-flex-align-items-center {
	align-items: center;
	display: flex
}
.u-flex-align-items-baseline {
	align-items: baseline;
	display: flex
}
.u-flex-align-items-start {
	align-items: start;
	display: flex
}
.u-flex-align-items-end {
	align-items: flex-end;
	display: flex
}
.u-flex-align-items-stretch {
	align-items: stretch;
	display: flex
}
.u-flex-justify-content-space-between {
	display: flex;
	justify-content: space-between
}
.u-flex-justify-content-space-evenly {
	display: flex;
	justify-content: space-evenly
}
.u-flex-justify-content-center {
	display: flex;
	justify-content: center
}
.u-flex-justify-content-end {
	display: flex;
	justify-content: end
}
.u-flex-align-content-space-around {
	display: flex;
	align-content: space-around
}
.u-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.u-flex-nowrap {
  display: flex;
  flex-wrap: nowrap;
}
.u-font-size-smaller {
  font-size: 0.9em;
}
.u-row-gap-1rem {
 display: flex;
 row-gap: 1rem;
}
.u-text-align-right, .text-align-right {
	text-align: right !important
}
.u-text-align-left, .text-align-left {
	text-align: left !important
}
.u-text-align-center, .text-align-center {
	text-align: center !important
}
.u-width-2per {width: 2% !important;}
.u-width-5per {width: 5% !important;}
.u-width-8per {width: 8% !important;}
.u-width-10per {width: 10% !important;}
.u-width-20per {
	width: 20% !important
}
.u-width-30per {
	width: 30%
}
.u-width-40per {
	width: 40%
}
.u-width-50per {
	width: 50% !important
}
.u-width-70per {
	width: 70% !important
}
.u-width-80per {
	width: 80% !important
}
.u-width-90per {
	width: 90% !important
}
.u-width-94per {
	width: 94% !important
}
.u-width-97per {
	width: 97% !important
}
.u-width-100per, .u-width-100per > select, .u-width-100per > input {
  width: 100%;
}
.u-max-width-39rem{
  max-width: 39rem;
}

.u-max-width-50rem{
  max-width: 50rem;
}

.u-min-height-9rem{
	min-height: 9rem !important
}

.u-alert-colour {
	color: var(--color-alert-color)
}
.u-green-colour {
	color: forestgreen
}

.u-large {font-size: large}
.u-small-caps {font-variant: small-caps}

.u-table-1st_40per {width: 100%;}
.u-table-1st_40per tbody tr td:first-child {width:40%;}

.u-custom-file-input:lang(fr)::before {
  content: 'Selectionnez un fichier';
}
.u-custom-file-input:lang(en)::before {
  content: 'Select a file';
}
.u-custom-file-input::after {
  content: attr(value);
}
.u-custom-file-input::before {
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: .6rem;
  padding: .5rem .8rem;
  outline: none;
  white-space: nowrap;
 /* -webkit-user-select: none; */
  cursor: pointer;
  text-shadow: .1rem .1rem #fff;
 /* font-weight: 700;
  font-size: 10pt; */
}
.u-custom-file-input:hover::before {
  border-color: black;
}
.u-custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

.u-grid-2-columns {
	align-content: start;
	align-items: center;
    justify-items:start;
	display: grid;
	grid-gap: .7rem;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
	margin-bottom: 1rem;
	width: 100%
}

.u-grid-3-columns {
	align-content: start;
	align-items: center;
    justify-items:start;
	display: grid;
	grid-gap: .7rem;
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	margin-bottom: 1rem;
	width: 100%
}

.u-grid-4-columns {
	align-content: start;
	align-items: center;
    justify-items:start;
	display: grid;
	grid-gap: .7rem;
	grid-template-columns: repeat(4, 1fr);
	justify-content: center;
	margin-bottom: 1rem;
	width: 100%
}

.u-grid-3-columns-1-2-12 {
	align-content: start;
	align-items: center;
    justify-items:start;
	display: grid;
	grid-gap: .7rem;
	grid-template-columns: 1fr 2fr 12fr;
	justify-content: center;
	margin-bottom: 1rem;
	width: 100%
}

.u-ul-li-margin-left li {margin-left: 4rem;
}

.u-overlay {position:relative; z-index:1; background-color: rgb(51, 51, 51, 0.6);}
.u-overlay:after {position:absolute;
                  height: 100%;
                  width:100%;
                  content:'';
                  z-index:5; /* Make sure this value is higher than the z-index of the  .form class  */
                  top:0;
                  left:0;}

.u-white-over-orange {background: var(--color-c-orange-dark2, red); color: white}

.u-row-odd {background-color: var(--color-table-odd)}
.u-row-even {background-color: var(--color-table-even)}

.u-display-block {display: block}
.u-font-bolder {font-weight: bolder}

.u-read-only {background-color: transparent;border: 0; color: var(--color-read-only) !important; resize: none}

.u-ul {padding-left: 1.8rem}
.u-white-space-normal { white-space: normal}

.u-fadeOut-5s { animation: fadeOut 5s forwards; -webkit-animation: fadeOut 5s forwards; -moz-animation: 
fadeOut 5s forwards; -o-animation: fadeOut 5s forwards; -ms-animation: fadeOut 5s forwards;}

.u-text-wrap {white-space: wrap}

@keyframes fadeOut {0% {opacity: 1; }  100% {opacity: 0;} }
@-moz-keyframes fadeOut {0% {opacity: 1;} 100% {opacity: 0;} }
@-webkit-keyframes fadeOut {0% {opacity: 1;} 100% {opacity: 0;} }
@-o-keyframes fadeOut {0% {opacity: 1;} 100% {opacity: 0;} }
@-ms-keyframes fadeOut {0% {opacity: 1;} 100% {opacity: 0;} }