/** tldr;
 *
 *  This file contains only css class to simplified the stylisation
 *  of HTML page.
 *  Also all css class from other libraries that has nothing to do with our application
 */

/*#region display*/
.display {
  display: flex;
}

.inline-block {
  display: inline-block;
}

.displayInit {
  display: initial;
}

.displayMobile {
  display: none;
}

@media all and (max-width: 700px) {
  .displayMobile {
    display: revert-layer;
    position: fixed;
    z-index: 99999;
  }

  .notDisplayMobile {
    display: none;
  }
}

.hidden {
  display: none !important;
}

.hiddenSecondary {
  display: none !important;
}

.visible {
  display: block !important;
}

/*#endregion*/

/*#region visibility*/
.not-visible {
  visibility: hidden !important;
}

.collapsing {
  visibility: collapse !important;
}

/*#endregion */

/*#region overflow*/
.overflow-y-hidden,
.overflow-hidden {
  overflow-y: hidden !important;
}

.overflow-x-hidden,
.overflow-hidden {
  overflow-x: hidden !important;
}

.overflow-y-initial,
.overflow-initial {
  overflow-y: initial !important;
}

.overflow-x-initial,
.overflow-initial {
  overflow-x: initial !important;
}

/*#endregion */

/*#region cursor */
.clickable {
  cursor: pointer;
}

/*#endregion*/

/*#region flex*/
.flexRow,
.flexColumn,
.flexRowReverse,
.flexAlignEnd,
.flexAlignCenter,
.flexStretch,
.flexAlignStart,
.flexAlignBaseline,
.flexAround,
.flexAroundS,
.flexBetween,
.flexCenter,
.flexEvenly,
.flexStart,
.flexStartS,
.flexEnd,
.flexEndS,
.flexWrap,
.flexWrapReverse,
.flexNoWrap {
  display: flex;
}

/*#region flex-direction*/
.flexColumn {
  flex-direction: column !important;
}

.flexRow {
  flex-direction: row !important;
}

.flexRowReverse {
  flex-direction: row-reverse !important;
}

/*#endregion*/

/*#region flex-align*/
.flexEndS,
.flexAlignEnd {
  align-items: flex-end !important;
}

.flexAlignCenter {
  align-items: center !important;
}

.flexAroundS,
.flexStartS,
.flexAlignStart {
  align-items: flex-start !important;
}

.flexAlignBaseline {
  align-items: baseline !important;
}

.flexStretch {
  align-items: stretch !important;
}

/*#endregion*/

/*#region justify-content*/
.flexAround,
.flexAroundS {
  justify-content: space-around !important;
  align-items: center;
}

.flexBetween {
  justify-content: space-between !important;
  align-items: center;
}

.flexCenter {
  justify-content: center !important;
  align-items: center;
}

.flexEvenly {
  justify-content: space-evenly !important;
  align-items: center;
}

.flexEndS,
.flexEnd {
  justify-content: flex-end !important;
  align-items: center;
}

.flexStartS,
.flexStart {
  justify-content: flex-start !important;
  align-items: center;
}

/*#endregion*/

/*#region wrap*/
.flexWrap {
  flex-wrap: wrap !important;
}

.flexWrapReverse {
  flex-wrap: wrap-reverse !important;
}

.flexNoWrap {
  flex-wrap: nowrap !important;
}

/*#endregion*/

.flexChild>* {
  flex: 1 1;
}

.flexChild4>* {
  flex: 4 1 20%;
}

/*#endregion*/

/*#region space child*/
.spaceChild,
.spaceChild5,
.spaceChild10,
.spaceChildNotFlex,
.spaceChild5NotFlex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.spaceChild>*:last-child,
.spaceChild5>*:last-child,
.spaceChild10>*:last-child,
.spaceChildNotFlex>*:last-child,
.spaceChild5NotFlex>*:last-child {
  margin-right: 0;
}

.spaceChild:not(.row-in-it)>*:first-child,
.spaceChild5:not(.row-in-it)>*:first-child,
.spaceChild10:not(.row-in-it)>*:first-child,
.spaceChildNotFlex:not(.row-in-it)>*:first-child,
.spaceChild5NotFlex:not(.row-in-it)>*:first-child {
  margin-left: 0;
}

.spaceChild>*,
.spaceChildNotFlex>* {
  margin: 0 15px;
}

.spaceChild10>* {
  margin: 0 10px;
}

.spaceChild5>*,
.spaceChild5NotFlex>* {
  margin: 0 5px;
}

.spaceChild>*,
.spaceChild5>*,
.spaceChild10>* {
  flex: 1 1;
}

/*#endregion space child*/

/*#region grid */

.grid,
.grid-2,
.grid-3,
.grid-4,
.grid-5 {
  display: grid;
  grid-template-columns: repeat(var(--nb-grid-column, 1), 1fr);
  column-gap: var(--grid-column-gap, 30px);
}

.grid-2 {
  --nb-grid-column: 2;
}

.grid-3 {
  --nb-grid-column: 3;
}

.grid-4 {
  --nb-grid-column: 4;
}

.grid-5 {
  --nb-grid-column: 5;
}

/*#endregion */

/*#region width*/
.min-content {
  width: min-content;
}

.width2 {
  width: 2%;
}

.width3 {
  width: 3%;
}

.width5 {
  width: 5%;
}

.width10 {
  width: 10%;
}

.width15 {
  width: 15%;
}

.width20 {
  width: 20%;
}

.width25 {
  width: 25%;
}

.width30 {
  width: 30%;
}

.width40 {
  width: 40%;
}

.width50 {
  width: 50%;
}

.width60 {
  width: 60%;
}

.width75 {
  width: 75%;
}

.width80 {
  width: 80%;
}

.width85 {
  width: 85%;
}

.width90 {
  width: 90%;
}

.width100 {
  width: 100%;
}

.max-width30 {
  max-width: 30%;
}

.max-width50 {
  max-width: 50%;
}

.max-width90 {
  max-width: 90%;
}

.min-width5vw {
  min-width: 5.2vw;
}

/*#endregion*/

/*#region height*/
.height50 {
  height: 50%;
}

.height90 {
  height: 90%;
}

.height95 {
  height: 95%;
}

.height100 {
  height: 100%;
}

.min-height20vh {
  min-height: 20vh;
}

/*#endregion*/

/*#region margin*/

/*#region m0*/
.m0,
.my0,
.mb0 {
  margin-bottom: 0;
}

.m0,
.my0,
.mtr0,
.mtl0,
.mt0 {
  margin-top: 0;
}

.m0,
.mx0,
.mtr0,
.mr0 {
  margin-right: 0;
}

.m0,
.mx0,
.mtl0,
.ml0 {
  margin-left: 0;
}

/*#endregion*/

/*#region m10*/
.m10,
.my10,
.mb10 {
  margin-bottom: 10px;
}

.m10,
.my10,
.mtr10,
.mt10 {
  margin-top: 10px;
}

.m10,
.mx10,
.mtr10,
.mtl10,
.mr10 {
  margin-right: 10px;
}

.m10,
.mx10,
.mtl10,
.ml10 {
  margin-left: 10px;
}

/*#endregion*/

/*#region m20*/
.m20,
.my20,
.mb20 {
  margin-bottom: 20px;
}

.m20,
.my20,
.mtr20,
.mtl20,
.mt20 {
  margin-top: 20px;
}

.m20,
.mx20,
.mtr20,
.mr20 {
  margin-right: 20px;
}

.m20,
.mx20,
.mtl20,
.ml20 {
  margin-left: 20px;
}

/*#endregion*/

/*#region m30*/
.m30,
.my30,
.mb30 {
  margin-bottom: 30px;
}

.m30,
.my30,
.mtr30,
.mtl30,
.mt30 {
  margin-top: 30px;
}

.m30,
.mx30,
.mtr30,
.mr30 {
  margin-right: 30px;
}

.m30,
.mx30,
.mtl30,
.ml30 {
  margin-left: 30px;
}

/*#endregion*/

/*#region m40*/
.m40,
.my40,
.mb40 {
  margin-bottom: 40px;
}

.m40,
.my40,
.mtr40,
.mtl40,
.mt40 {
  margin-top: 40px;
}

.m40,
.mx40,
.mtr40,
.mr40 {
  margin-right: 40px;
}

.m40,
.mx40,
.mtl40,
.ml40 {
  margin-left: 40px;
}

/*#endregion*/

/*#region child*/
.m0-child>* {
  margin: 0;
}

.mx5-child>* {
  margin: 0 5px;
}

.mx15-child>* {
  margin: 0 15px;
}

.mx1vw-child>* {
  margin: 0 1vw;
}

.marginRimChild>*:last-child {
  margin-right: 0;
}

.marginRimChild>*:first-child {
  margin-left: 0;
}

/*#endregion*/
/*#endregion*/

/*#region padding*/

/*#region p0*/
.p0,
.py0,
.pb0 {
  padding-bottom: 0;
}

.p0,
.py0,
.ptr0,
.ptl0,
.pt0 {
  padding-top: 0;
}

.p0,
.px0,
.ptr0,
.pr0 {
  padding-right: 0;
}

.p0,
.px0,
.ptl0,
.pl0 {
  padding-left: 0;
}

/*#endregion*/

/*#region p10*/
.p10,
.py10,
.pb10 {
  padding-bottom: 10px;
}

.p10,
.py10,
.ptr10,
.pt10 {
  padding-top: 10px;
}

.p10,
.px10,
.ptr10,
.ptl10,
.pr10 {
  padding-right: 10px;
}

.p10,
.px10,
.ptl10,
.pl10 {
  padding-left: 10px;
}

/*#endregion*/

/*#region p20*/
.p20,
.py20,
.pb20 {
  padding-bottom: 20px;
}

.p20,
.py20,
.ptr20,
.ptl20,
.pt20 {
  padding-top: 20px;
}

.p20,
.px20,
.ptr20,
.pr20 {
  padding-right: 20px;
}

.p20,
.px20,
.ptl20,
.pl20 {
  padding-left: 20px;
}

/*#endregion*/

/*#region p30*/
.p30,
.py30,
.pb30 {
  padding-bottom: 30px;
}

.p30,
.py30,
.ptr30,
.ptl30,
.pt30 {
  padding-top: 30px;
}

.p30,
.px30,
.ptr30,
.pr30 {
  padding-right: 30px;
}

.p30,
.px30,
.ptl30,
.pl30 {
  padding-left: 30px;
}

/*#endregion*/

/*#region p40*/
.p40,
.py40,
.pb40 {
  padding-bottom: 40px;
}

.p40,
.py40,
.ptr40,
.ptl40,
.pt40 {
  padding-top: 40px;
}

.p40,
.px40,
.ptr40,
.pr40 {
  padding-right: 40px;
}

.p40,
.px40,
.ptl40,
.pl40 {
  padding-left: 40px;
}

/*#endregion*/

/*#region child*/
.p0-child>*,
.p0-all-child *,
.py0-all-child * {
  padding-top: 0;
  padding-bottom: 0;
}

.p0-child>*,
.p0-all-child *,
.px0-all-child * {
  padding-left: 0;
  padding-right: 0;
}

.p5-child>*,
.py5-child>* {
  padding: 5px 0;
}

.p5-child>*,
.px5-child>* {
  padding: 0 5px;
}

.px15-child>* {
  padding: 0 15px;
}

.paddingRimChild>*:first-child {
  padding-left: 0;
}

.paddingRimChild>*:last-child {
  padding-right: 0;
}

/*#endregion*/
/*#endregion*/

/*#region text-align*/
.txCenter {
  text-align: center;
}

.txRight {
  text-align: right;
}

.txLeft {
  text-align: left;
}

.txJus {
  text-align: justify;
}

/*#endregion*/

/*#region background-color */
.bg-red {
  background-color: red;
}

.bg-light-green {
  background: rgba(0, 255, 0, 0.1);
}

.bg-light-red {
  background: rgba(255, 0, 0, 0.1);
}


.fieldValid {
  background-color: #afffaf;
}

.fieldFilled {
  background-color: rgba(100, 100, 255, 0.2);
}

.highlightRow {
  background-color: rgba(0, 255, 0, 0.15);
}

.highlightRowRed {
  background-color: rgba(255, 0, 0, 0.15);
}

/* To use on element we want to look like there disabled but not technically */
.disabled {
  background-color: var(--disabled-color);
  cursor: not-allowed;
}

/*#endregion*/

/*#region Font size*/
.fontSize1vh {
  font-size: 1vh;
}

.fontSizeXL {
  font-size: 1.6em;
}

.fontSizeL {
  font-size: 1.2em;
}

.fontSizeNormal {
  font-size: 1em;
}

.fontSizeS {
  font-size: .8em !important;
}

/*#endregion*/

.no-break-word {
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.posRelative {
  position: relative;
}

.posAbsolute {
  position: absolute;
}