body {

	--PBC: rgb(220, 220, 220);
	--SBC: rgb(230, 230, 230);
	--PHC: rgb(14, 32, 75);
	font-size: 42px;
	width: 100%;
	height: 100%;
	margin: 0;

}

* {
	transition: opacity .5s linear;
	opacity: 1;
}


.content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    background-image: linear-gradient(45deg, rgb(100, 100, 100, .95), rgb(255, 255, 255, .95));
    transition: background-color 1s linear;
    padding: 24px;
    box-sizing: border-box;
}


.content.punchedIn {
	background-color: rgb(0, 255, 0);
}



.welcomeMessage {
	font-size: 1.25em;
	white-space: nowrap;
}




.dashboardContent {
	width: 100%;
	height: 100%;
	display: flex;
	align-content: flex-start;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row-reverse;
}

.adminDashboard {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeSheetSearchControls {
    padding: 16px;
    background-color: rgb(255, 255, 255, .5);
    box-shadow: 0px 0px 12px 2px rgb(0, 0, 0);
    border-radius: 12px;
    margin: 48px 0px 96px 0px;
    display: flex;
    width: max(min(32vw, 960px), 220px);
    justify-content: space-between;
}



.btn {
	background-color: var(--PHC);
	color: rgb(255, 255, 255);
	cursor: pointer;
	border-radius: 8px;
	border-style: solid;
	border-color: rgb(0, 0, 0, 0);
	padding: 4px;
	font-size: 1em;
	white-space: nowrap;
}

.cancel {
	background-color: rgb(0, 0, 0, .5);
}

.btn:hover {
	background-color: var(--PBC);
	color: rgb(0, 0, 0);
	border-color: rgb(0, 0, 0);
}

.smbtn {
	background-color: var(--PHC);
	color: rgb(255, 255, 255);
	cursor: pointer;
	border-radius: .3vw;
	border-style: solid;
	border-color: rgb(0, 0, 0, 0);
	font-size: 16px;
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1vw;
	aspect-ratio: 1 / 1;
	margin: 2px 100% 2px 2px
	margin-right: 100%;
}

.smbtn:hover {
	background-color: var(--PBC);
	color: rgb(0, 0, 0);
	border-color: rgb(0, 0, 0);
}






.FPI {                  /* fill parent input */
    width: 100%;
    height: 100%;
    margin: 0;
    border-style: solid;
    border-width: 2px;
    border-color: rgb(0, 0, 0, 0);
    border-radius: 0;
    background-color: rgb(0, 0, 0, 0);
    outline: none;
    transition: border-color .75s cubic-bezier(.3,-1,.9,.9);
}

.FPI:hover {
	border-color: rgb(0, 0, 0, .5);
	transition: border-color 0s;
}

.FPI:focus-within {
	border-color: rgb(0, 0, 0, 1);
	background-color: rgb(255, 255, 255, .5);
}


.disabled {
    background-color: var(--PBC);
    filter: blur(2px);
    color: rgb(255, 255, 255);
  	border-color: rgb(0, 0, 0, 0);  
    cursor: default;
}


.disabled:hover {
  color: rgb(255, 255, 255);
	border-color: rgb(0, 0, 0, 0);  
}


.customInput {
  color: var(--PHC);
  outline: none;
  border-style: solid;
  border-color: var(--PHC);
  font-size: 1em;
  width: 320px;
  text-align: center;
  border-radius: 8px;
  background-color: rgb(255, 255, 255, .75);
}


.timeSheetControl {
	font-size: max(min(1.25vw, 32px), 10px);
	width: 7em;
}

.loginContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 228px;
    justify-content: space-between;
}

.punchWrapper {
    width: 60%;
    box-sizing: border-box;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    height: 50%;
    flex-direction: column;
    align-items: center;
    font-size: min(max(6vw, 12px), 48px);
}

.punchRecords {
    width: 100%;
    box-sizing: border-box;
    max-width: 512px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24px;    
    height: 100%;
    overflow-y: auto;
    scrollbar-color: rgb(255, 255, 255, 1) rgb(0, 0, 0, 0);
    padding: 0px 8px 0px 0px;
}

.punchRow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    padding: 6px;
    box-sizing: border-box;
    align-items: center;
    background-color: rgb(255, 255, 255, .75);
    align-items: center;
    margin: 6px 0 0 0;
    border-radius: 8px;
}

.punchRow:nth-child(odd) {
		background-color: rgb(255, 255, 255, .5);
}


.punch {
	padding: 2px;
	border-radius: 8px;
	width: 128px;
	text-align: center;
}

.punch.in {
	background-color: rgb(205, 255, 185);
}

.punch.out {
	background-color: rgb(250, 250, 250);
}

.punchDate {
    font-size: 18px;
}


.sheetPunch {
    background-color: rgb(0, 0, 0, 0);
    border-style: none;
    width: 3em;
    font-size: max(min(1.25vw, 32px), 10px);
    padding: 0;
    text-align: center;
    border-radius: .25vw;
    border-style: solid;
    border-width: 1px;
    margin: 2px;
    height: 1em; 
}


.timeSheet {
	width: 100%;
  
}




.loaderContainer {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -5;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px) brightness(.5);
  opacity: 0;
  transition: opacity .5s linear, z-index .6s linear;
}



.loaderContainer.active {
	z-index: 100;
	opacity: 1;
}


.loader {
  background-color: rgb(0, 0, 0);
  width: 256px;
  height: 256px;
  background-image: linear-gradient(-45deg, rgb(0, 0, 100) 20%, rgb(0, 150, 255) 50%, rgb(0, 0, 100) 80%);
  border-radius: 50%;
  background-size: 300% 300%;
  background-position: 0% 0%;  
  animation: loader 2s cubic-bezier(.5,.98,.5,.58) infinite;
  position: relative;
    clip-path: shape(from 50% 100%,curve by -19.46% -3.93% with -6.75% 0%/-13.3% -1.32%,curve to 14.65% 85.35% with 24.58% 93.55%/19.24% 89.94%,curve by -10.72% -15.89% with -4.59% -4.59%/-8.2% -9.93%,curve to 0% 50% with 1.32% 63.3%/0% 56.75%,curve by 3.52% -3.52% with 0% -1.94%/1.57% -3.52%,smooth by 3.52% 3.52% with 3.52% 1.57%,curve by 3.38% 16.73% with 0% 5.8%/1.13% 11.43%,curve by 9.21% 13.66% with 2.17% 5.12%/5.26% 9.72%,curve by 13.66% 9.21% with 3.95% 3.95%/8.55% 7.05%,curve to 50% 92.97% with 38.58% 91.84%/44.2% 92.97%,curve by 16.73% -3.38% with 5.8% 0%/11.43% -1.13%,curve by 13.66% -9.21% with 5.12% -2.17%/9.72% -5.26%,curve by 9.21% -13.66% with 3.95% -3.95%/7.05% -8.54%,curve to 92.98% 50% with 91.84% 61.43%/92.98% 55.8%,curve by -3.38% -16.73% with 0% -5.8%/-1.13% -11.43%,arc by -9.21% -13.66% of 43.02% 43.01% small ccw,arc by -13.66% -9.21% of 42.75% 42.75% small ccw,curve to 50% 7.03% with 61.43% 8.16%/55.81% 7.03%,curve by -3.52% -3.52% with -1.94% 0%/-3.52% -1.57%,smooth by 3.52% -3.52% with 1.57% -3.52%,curve by 19.46% 3.93% with 6.75% 0%/13.3% 1.32%,curve to 85.36% 14.65% with 75.43% 6.45%/80.77% 10.06%,curve by 10.71% 15.89% with 4.59% 4.59%/8.19% 9.94%,curve by 3.93% 19.46% with 2.61% 6.16%/3.93% 12.71%,smooth by -3.93% 19.46% with -1.32% 13.3%,curve to 85.36% 85.35% with 93.56% 75.42%/89.95% 80.76%,curve by -15.89% 10.71% with -4.59% 4.59%/-9.94% 8.19%,curve by -19.46% 3.94% with -6.16% 2.62%/-12.72% 3.94%,close);
}


@keyframes loader {
  0% {
    background-position: 0% 0%;
    rotate: 0deg;
  }
	50% {
		background-position: 100% 100%;
	}
  100% {
    background-position: 0% 0%;
    rotate: 1080deg;
  }
}

@keyframes slide {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}



.table{
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: max(min(1.25vw, 32px), 10px);
    background-color: rgb(255, 255, 255, .4);
    box-shadow: 0px 0px 16px 4px rgb(0, 0, 0);
}


.tHead, .tBody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tBody {
	overflow-y: auto;
  max-height: 70vh;
  scrollbar-width: none;
}


.tRow {
  display: flex;
  width: 100%;
  border-style: solid;
}
.tHead .tRow {
  border-width: 1px 0px 1px 0px;
  box-sizing: border-box;
}
.tBody .tRow {
  border-width: 0px 0px 1px 0px;
}

.tHead {
    background-color: rgb(0, 150, 255, .5);
}

.tRow:nth-of-type(even) {
    background-color: rgb(255, 255, 255, .5);
}

.tRow.active {
		box-sizing: border-box;
    background-color: rgb(0, 150, 255, .5);
    background-image: linear-gradient(90deg, rgb(255, 255, 255, 0) 30%, rgb(255, 255, 255, 1) 50%, rgb(255, 255, 255, 0) 70%);
    background-size: 300% 100%;
    background-position: 0% 0%;
    animation: slide 3s linear reverse infinite;
}


.manPunch {
    background-color: rgb(0, 150, 255, .5);
    color: rgb(255, 255, 255);
}

.tColumn {
  flex: 1; /* Make all columns have equal width */
  overflow-wrap: anywhere;
  overflow: hidden;
  border-style: solid;
  border-width: 0px 0px 0px 1px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
}

.tColumn:last-of-type {
  border-width: 0px 1px 0px 1px;
}


.columnValue {
  width: 100%;
  height: 100%;
  border-style: none;
}

.inTime {
    background-color: rgb(75, 255, 0, .3);
}

.outTime {
    background-color: rgb(255, 255, 255, .75);
}

.missedTime {
    background-color: rgb(0, 150, 255, .5);
}

.emptyTime {
    background-color: rgb(0, 0, 0, .2);
}


.popupBox {
	position: absolute;
	z-index: 105;
	width: 0%;
	max-height: 0px;
	background-color: rgb(255, 255, 255, .85);
	left: 50%;
	top: calc(50% - 350px);
	transform: translate(-50%, 0);
	display: flex;
	flex-direction: row;
	font-size: min(max(2vw, 16px), 24px);
	flex-wrap: wrap;
	align-content: flex-start;
	padding: 0px;
	box-sizing: border-box;
	border-radius: 16px;
	overflow: hidden;
	transition: width .25s linear, height .25s linear, padding .25s linear, top .75s cubic-bezier(.5,.3,.1,1.2);
	text-align: center;
}

.popupBox.active {
	min-width: 300px;
	width: 50%;
	max-width: 900px;
	aspect-ratio: 1 / 1;
	max-height: 300px;
	padding: 8px;
	top: calc(50% - 150px);
}

.title {
    width: 100%;
    font-size: 1.5em;
    font-weight: 600;
    padding: 0 0 16px 0;
}

.msg {
    color: rgb(200, 200, 200);
    width: 100%;
}

.popupBox .btnContainer {
    justify-content: flex-end;
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.questionBtn {
    width: 32px;
    height: 32px;
    background-color: rgb(40, 40, 40);
    border-radius: 50%;
    position: absolute;
    top: 8px;
    right: 8px;
    text-align: center;
    font-size: 28px;
    cursor: pointer;
}


.shadeOverlay {
    position: absolute;
    background-color: rgb(0, 0, 0, .5);
    backdrop-filter: blur(3px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -5;
}

.shadeOverlay.customAlert {
	z-index: 90;
}

.contextMenu {
	border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 16px 0px rgb(0, 0, 0);
  position: absolute;
  z-index: 100;
  padding: 4px;
  display: none;
}

.contextMenu.active {	
  display: block;
}

.contextMenu .btn {
	font-size: .5em;
  background-color: rgb(0, 0, 0, .5);
}


.lkBtn {
    font-size: min(max(2vw, 14px), 20px);
    text-decoration: underline;
    position: absolute;
    left: 8px;
    top: 8px;
    cursor: pointer;
}

.signOutBtn {
	left: unset;
	right: 8px;
  top: 8px;
}



.lkBtn:hover {
	color: rgb(225, 235, 255);
}


.userConfig {
	width: 100%;
}


.userListControl {
	background-color: rgb(255, 255, 255, .2);
  margin: 32px 0px;
  border-radius: 8px;
  box-shadow: 0px 0px 16px 0px rgb(0, 0, 0);
  display: flex;
  width: fit-content;
}

.userListControl .btn {
	font-size: .4em;
  margin: 12px;
}


.motdContainer {
    font-family: Ducahier;
    color: rgb(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    text-align: center;
    padding: 32px 10vw;
    line-height: 1em;
    background-image: linear-gradient(115deg, rgb(0, 0, 0, 1) 45%, rgb(200, 230, 255, 1) 50%, rgb(0, 0, 0, 1) 55%);
    animation: slide 1s linear reverse;
    background-size: 300% 100%;
    animation-delay: 2s;
    font-size: min(max(4vw, 18px), 42px);
    background-clip: text;
    font-weight: 700;
}

/*.userList .tHead .tColumn {
	padding: 0px 48px 0px 0px;
}*/





@font-face {
	font-family: Ducahier;
	src: url(/fonts/DucahierXpCursiveScolaire-YqDy.ttf);		
}




.hidden {
	opacity: 0;
	cursor: default;
}


.ui-widget.ui-widget-content {
	font-size: .5em;
}

.ui-timepicker-standard {
	width: 2em !important;
}



@media (max-width: 1279px) {
	.punchRecords {
		height: 50%;
	}
}