/**** PADDING MARGIN */


.spacer {
  margin-bottom: 2.5vh;
  padding: 2vh;
}

.spacer-top {
  margin-top: 2.5vh;
}

.spacer-bottom {
  margin-bottom: 2.5vh;
}

.spacer-right {
  margin-right: 2.5vh;
}


.spacebetween {
  justify-content: space-between;
}


.padding2vh {
  padding: 2vh;
}

.text-padding-lr {
  padding-left: 2vh;
  padding-right: 2vh;
}

.text-margin-tb {
  margin-top: 2vh;
  margin-bottom: 2vh;
}

.text-margin-lr {
  margin-right: 2vh;
  margin-left: 2vh;
}


/**** GRID   */



#pageContainer,
#pageContainerTemp {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#pageContainer .page {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
}


.page {
  height: 100%;
  width: 100%;
  padding-top: 5vh;
  padding-bottom: 5vh;
}


.center-vertical {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.center-vertical-row {
  display: flex;
  justify-content: center;
  flex-direction: row;
}



.flex-c {
  display: flex;
  flex-flow: column wrap;
}

.flex-r {
  display: flex;
  flex-flow: row wrap;
}


.f1 { flex: 1; }

.f2 {
  flex: 2;
}

.f3 {
  flex: 3;
}

.f4 {
  flex: 4;
}

.f5 {
  flex: 5;
}

.f6 {
  flex: 6;
}

.f7 {
  flex: 7;
}

.f8 {
  flex: 8;
}


.wh100 {
  width: 100vw;
  height: 100vw;
}


.w100 {
  width: 100vw;
}

.w100p {
  width: 100%;
}

.w75 {
  width: 75vw;
}

.w60 {
  width: 60vw;
}

.w50 {
  width: 50vw;
}

.w25 {
  width: 25vw;
}

.w20 {
  width: 20vw;
}

.w10 {
  width: 10vw;
}

.w5 {
  width: 5vw;
}



.h2 {
  height: 3vh;
}

.h5 {
  height: 5vh;
}

.h7 {
  height: 7vh;
}

.h10 {
  height: 10vh;
}

.h15 {
  height: 15vh;
}

.h20 {
  height: 20vh;
}

.h25 {
  height: 25vh;
}

.h30 {
  height: 30vh;
}

.h35 {
  height: 35vh;
}

.h40 {
  height: 40vh;
}

.h45 {
  height: 45vh;
}

.h50 {
  height: 50vh;
}

.h55 {
  height: 55vh;
}

.h60 {
  height: 60vh;
}

.h70 {
  height: 70vh;
}

.h80 {
  height: 80vh;
}

.h90 {
  height: 90vh;
}

.h100 {
  height: 100vh;
}

.h100p {
  height: 100%;
}






.w5-max {
  max-width: 5vw;
}


.w10-max {
  max-width: 10vw;
}



.h5-min {
  min-height: 5vh;
}

.h85-min {
  min-height: 85vh;
}