@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'DS-Digital';
	src: url('/fonts/DS-DIGI.TTF') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DS-Digital';
	src: url('/fonts/DS-DIGIB.TTF') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'DS-Digital';
	src: url('/fonts/DS-DIGII.TTF') format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'DS-Digital';
	src: url('/fonts/DS-DIGIT.TTF') format('truetype');
	font-weight: bold;
	font-style: italic;
}

body, p, a {
	font-family: "Roboto Mono", monospace;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Rubik Mono One', sans-serif;
}

button {
	font-family: "Roboto Mono", monospace;
	background: #00000080;
	color: #fff;
	padding: 5px 20px;
	border: 0px;
	box-shadow: 4px 3px #dee3e7, -3px -4px #f9f1ed;
	margin: 12px 0;
	font-weight: 400;
	letter-spacing: 1px;
}

body.dark button {
	background: #859fac;
  	color: #fff;
  	box-shadow: 4px 3px #3f5260, -3px -4px #55595e;
  	font-weight: 500;
}

input:active, 
input:focus {
	outline: 0px !important;
}

#wrap {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	max-width:100vw;
	max-height:100vh;
	transition:all .4s ease;
	overflow: hidden;
	background-image: url("img/bg1.jpg");
	background-size: cover;
	background-position: center;
}

body {
	transition: all .2s ease;
}

body.mountain #wrap {
	background:none;
	background-image: url("img/bg1.jpg");
}

body.turner #wrap {
	background:none;
	background-image: url("img/turner.jpg");
}

body.oil #wrap {
	background:none;
	background-image: url("img/oil.jpg");
}

body.clichy #wrap {
	background:none;
	background-image: url("img/clichy.jpg");
}

body.loccitane #wrap {
	background:none;
	background-image: url("img/loccitan.jpg");
}

body.studio #wrap {
	background:none;
	background-image: url("img/studio.jpg");
}

body.athos #wrap {
	background:none;
	background-image: url("img/athos.jpg");
}

body.jazz #wrap {
	background:none;
	background-image: url("img/jazz.jpg");
}

body.light #wrap {
	background:none;
	background:#e2e2e2;
	background-size: cover;
}

body.dark #wrap {
	background:none;
	background-color: #596567;
	opacity: 1;
	background-image: radial-gradient(#8c9fa2 0.8px, #596567 0.8px);
	background-size: 16px 16px;
}

body.cubes #wrap {
	--s: 30px; /* control the size*/
	--c1: #cfdde0;
	--c2: #ffffff;
	--c3: #ecf2f0;

	--_g: var(--c3) 0 120deg,#0000 0;
	background-image:none;
	background:
	conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
	conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
	conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
	conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
	linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
						  var(--c1) 0 calc(500%/6),var(--c2) 0);
	background-size: calc(1.732*var(--s)) var(--s);
}

body.zigzag #wrap {
	--s: 60px; /* control the size*/
	--c1: #78c0a8;
	--c2: #a1d8de;

	--g:from 45deg at 50% 35%,#0000 75%,;
	--_s:var(--s) calc(2*var(--s));
	background-image:none;
	background:
	conic-gradient(var(--g)var(--c2) 0) 
	 calc(var(--s)/2) var(--s)/var(--_s),
	conic-gradient(var(--g)var(--c1) 0) 
	 calc(var(--s)/2)        0/var(--_s),
	conic-gradient(#0004 135deg,#0000 0 225deg,#0009 0)
	 0 0/var(--s) var(--s),
	linear-gradient(var(--c1) 50%,var(--c2) 0) 
	 0 var(--s)/var(--_s);
}

body.folds #wrap {
	--s: 73px; /* control the size*/
	--c1: #ffffff;
	--c2: #bfe4d2;
	--c3: #6cacd5;

	--a:from -30deg at;
	background-image:none;
	background:
	linear-gradient(#0000 50%,#0004 0),
	conic-gradient(var(--a) 90%,var(--c1) 240deg,#0000     0),
	conic-gradient(var(--a) 75%,var(--c2) 240deg,#0000     0),
	conic-gradient(var(--a) 25%,#0000     240deg,var(--c1) 0),
	conic-gradient(var(--a) 40%,var(--c1) 240deg,var(--c3) 0);
	background-size: calc(1.5*var(--s)) var(--s);
}

body.towers #wrap {
	--s: 99px; /* control the size*/
	--c1: #5d777d;
	--c2: #acc2c4;
	--c3: #7fa0ab;

	--_g: var(--c1) 10%,var(--c2) 10.5% 19%,#0000 19.5% 80.5%,var(--c2) 81% 89.5%,var(--c3) 90%;
	--_c: from -90deg at 37.5% 50%,#0000 75%;
	--_l1: linear-gradient(145deg,var(--_g));
	--_l2: linear-gradient( 35deg,var(--_g));
	background-image:none;
	background: 
	var(--_l1), var(--_l1) calc(var(--s)/2) var(--s),
	var(--_l2), var(--_l2) calc(var(--s)/2) var(--s),
	conic-gradient(var(--_c),var(--c1) 0) calc(var(--s)/8) 0,
	conic-gradient(var(--_c),var(--c3) 0) calc(var(--s)/2) 0,
	linear-gradient(90deg,var(--c3) 38%,var(--c1) 0 50%,var(--c3) 0 62%,var(--c1) 0);
	background-size: var(--s) calc(2*var(--s)/3);
}
	
#wrap div {
	position: relative;
	z-index: 12;
}

.overlay {
	position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	transition:all .4s ease;
    background: #fff;
    z-index: 0 !important;
    opacity: .82;
}

body.jazz .overlay {
	opacity: .66;
	background: #282525;
}

body.studio .overlay {
	opacity: .4;
}

body.oil .overlay,
body.athos .overlay,
body.dark .overlay,
body.light .overlay,
body.cubes .overlay,
body.zigzag .overlay, 
body.towers .overlay,
body.folds .overlay {
	opacity: 0.04;
}

body.loccitane .overlay,
body.turner .overlay {
	opacity:0.24;
}

body.clichy .overlay {
	opacity:0.14;
}

#logo {
	position: absolute !important;
	display: flex;
	max-height: 35px;
    overflow: hidden;
	margin: 6px 0 0 5px;
}

#logo img {
	max-width: 126px;
    display: inline-block;
    height: 43px;
}

body.dark #logo img {
	filter: brightness(1.5);
}

#logo p {
	font-family: 'Rubik Mono One', sans-serif;
	font-weight:800;
    align-self: center;
    margin-top: 17px;
    font-size: 15px;
    letter-spacing: 6px;
    margin-left: 3px;
    color: #a39a8e;
    text-shadow: -1px -.5px #fff;
}

body.jazz #logo p,
body.turner #logo p {
	color: #f1e8d2;
	text-shadow: 0px 0px;
}

body.turner #logo p {
	color: #ead0a7;
}

body.loccitane #logo p {
  	color: #ddd2b9;
  	text-shadow: -2px -1.5px #242321;
}

body.dark #logo p {
	color: #fff;
  	text-shadow: -1px -.5px #222020;
}

.date {
	position: absolute !important;
    right: 9px;
    top: 4px;
    font-family: 'Rubik', sans-serif;
    text-align: center;
	width:130px;
}

.date p {
	margin: 0;
}

.date div {
	padding: 9px 10px;
    background: #ffffffc7;
    margin-bottom: 5px;
    box-shadow: 3px 3px 12px -10px;
}

#day p {
	font-size: 12px;
    margin-top: 1px;
    letter-spacing: 5px;
}

.month {
	padding: 6px 7px 6px 16px !important
	
}

#month p {
	display: inline;
    font-size: 20px;
    line-height: 23px;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: #66686a;
    margin-right: 2px;
}

.digit {
	margin-left: 1px !important;
    font-family: 'Rubik Mono One', sans-serif !important;
    color: #c2b4a9 !important;
    letter-spacing: 0px !important;
}

.denom {
	text-transform: uppercase;
    font-size: 11px;
    transform: translate(-4px, 0px);
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: -5px;
    font-family: 'Rubik', sans-serif;
    font-weight: 800;
    color: #585b5e;
}

.dig {
	display: inline-block;
	max-width: 30px;
	overflow: visible;
}

.year {
	padding: 5px 10px !important;
}

#year p {
	font-family: 'Rubik', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 6px;
    color: #90a4a4;
}

#messageBox {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
	width: 1000px;
	margin-top: calc(8% + 118px);
	font-family: 'Rubik Mono One', sans-serif;
	font-size: 33px;
	letter-spacing: 1px;
	color: #6a717b;
	text-shadow: -6px -4px #ffffff78, 6px 4px #e6e2ddba;
	pointer-events:none;
	opacity:0;	
	transition: opacity 0.8s ease, font-size 0s ease, max-width 0s ease;
}

body.jazz #messageBox {
	color: #fff;
  	text-shadow: -6px -4px #24202078, 6px 4px #5b5144ba;
}

#messageBox.shrinkMessage {
	font-size: 25px;
	max-width: 600px;
}

#messageBox.menued {
	text-align: right;
 	width: calc(100vw - 520px);
	max-width: calc(100vw - 520px);
 	margin: calc(8% + 118px) 0px 0px 0px;
	padding:0 40px;
	font-size: 28px;
}

#messageBox.revealRise {
	width: calc(100% - 440px);
	padding-left: 100px;
	box-sizing: border-box;
	max-width: 750px;
	margin-top: 50px;
	font-size: 25px;
}

#messageBox.reveal {
	opacity:1;
	pointer-events:all;
}

body.turner #messageBox {
	color:#e6e2dd;
	text-shadow: -6px -4px #0606065e;
}

body.loccitane #messageBox,
body.oil #messageBox {
	color: #fff;
  	text-shadow: -6px -4px #4a4a4a78, 6px 4px #4f4a45d6;
}

body.dark #messageBox {
	color: #dcdedf;
  	text-shadow: -6px -4px #443f3f78, 6px 4px #576264;
}

#startTime,
#stopTime {
	position: absolute !important;
	display:none;
    width: 160px;
    height: 160px;
    background: #213133a8;
    border-radius: 50%;
    bottom: 40px;
    right: calc(50% - 80px);
	color: #fff;
	transition: all .3s ease;
    font-family: "Roboto Mono", monospace;
    text-align: center;
	cursor: pointer;
}

#startTime.halfButton,
#stopTime.halfButton {
	border-top-left-radius: 80px;
  	border-top-right-radius: 80px;
  	border-bottom-left-radius: 0;
  	border-bottom-right-radius: 0;
	height: 80px;
  	bottom: 3px;
}

body.jazz #startTime {
	background: #dd8053d4;
}

.settingRecord {
	display: none;
}

.noSettingRecord {
	display: inline-block;
}

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

.noSettingRecord.onSet {
	display: none;
}

#startTime.showTimerButton,
#stopTime.showTimerButton {
	display:block;
}

#stopTime {
	transform:scale(0.94);
	background: #b77b71a8;
	border: 2px solid #b9a9a9;
	box-shadow: 7px 2px #d7dadd;
}

#addButton {
	width: 93px;
 	height: 93px;
 	position: absolute !important;
 	background: #ffffffcf;
 	border-radius: 50%;
 	color: #939f9fd1;
 	bottom: 33px;
	transition: all .3s ease;
 	left: calc(50% - 230px);
 	text-align: center;
 	line-height: 100px;
 	font-size: 58px;
 	box-shadow: 5px 3px #adc2d2, -3px -2px #e0e4e4;
 	cursor: pointer;
}

#addButton.halfAddButton {
	border-top-left-radius: 46px;
  	border-top-right-radius: 46px;
  	border-bottom-left-radius: 0;
  	border-bottom-right-radius: 0;
	height:46px;
	bottom: 6px;
	line-height: 60px;
  	font-size: 46px;
}

body.turner #addButton {
	box-shadow: -9px 6px 1px #2b2d2f;
}

body.loccitane #addButton,
body.oil #addButton {
	background: #e6e6e636;
	color: #939f9fd1;
	box-shadow: 5px 3px #2f3437, -3px -2px #799796;
}

body.jazz #addButton {
	background: #a0aebb;
 	color: #a86528;
	box-shadow: 5px 3px #323b42, -3px -2px #1d4040;
}

body.dark #addButton {
	background: #364446;
  	color: #e0e4e4;
  	box-shadow: 3px 3px #adc2d2, -3px -2px #464a4a;
}

#addButton p {
	margin:0;
	font-family: 'Rubik Mono One', sans-serif;
}

#addButtonList {
	width: 110px;
	height: 133px;
	opacity:0;
	max-height:0px;
	overflow:hidden;
	position: absolute !important;
	background: #ffffffcf;
	border-radius: 1px;
	color: #939f9fd1;
	bottom: 103px;
	left: calc(50% - 183px);
	box-shadow: -2px 1px #e3dad2, 2px -2px #f9f7f3;
	cursor: pointer;
	font-size: 12px;
	transition: opacity .2s ease, max-height .4s ease;
	line-height: 1;
	text-align: left;
	box-sizing: border-box;
	z-index: 99;
}

#addButtonList.slideDown {
	bottom: 39px;
	z-index: 9999;
	height: 97px;
	margin-left: 13px;
	background: #fffffff5;
}

body.loccitane #addButtonList,
body.oil #addButtonList {
	background: #ffffff8a;
  	color: #000000d1;
  	box-shadow: -2px 1px #534f4c, 2px -2px #e5917e;
	
}

#addButtonList.reveal {
	opacity: 1;
	max-height: 140px;
}

.topP {
	border-top-left-radius:6px; 
	border-top-right-radius:6px; 
}

.addList p {
	border-bottom:1px solid;
	padding: 9px 6px;
  	margin: 0;
	transition: all .1s ease;
}

.addList p:hover {
	background: #bec5cc;
	color: #fff;
	font-weight: 500;	
}

body.loccitane .addList p:hover,
body.oil .addList p:hover {
  	background: #bec5cc;
}

.startClock {
	font-family: 'Rubik Mono One', sans-serif;
    position: absolute;
	top: calc(50% - 29px);
    width: 100%;
    font-size: 14px;
    margin-top: 18px;
}

.startClock:after {
	content: ' ';
    width: 70%;
    display: block;
    height: 2px;
    background: #ffffff73;
    margin: 4px 0 0 15%;
}

.halfButton .startClock {
	margin-top: 36px;
}

.halfButton .startClock:after {
    display: none;
}

.setClockStart {
	bottom: 7px;
    position: absolute;
    width: 50%;
    font-size: 13px;
    margin-left: 25%;
    font-weight: 400;
    line-height: 1.2;
    opacity: .7;
}

.halfButton .setClockStart {
	width:100%;
	margin-left: 0;
  	bottom: 28px;
}

.timerTime {
	position: absolute;
    width: 100%;
    top: 13px;
    font-size: 13px;
    color: #ffffffd1;
}

.halfButton .timerTime {
	display:none;
}

.stopClock {
    font-family: 'Rubik Mono One', sans-serif;
	font-size: 15px;
	position: absolute;
	width: 100%;
	top: 7px;
	color: #fff;
	line-height: 110px;
}

.setClockStop {
	color: #fff;
	position: absolute;
	bottom: 38px;
	width: 100%;
	font-size: 12px;
}

.recordInfo {
	position: absolute !important;
    top: 54px;
    left: 11px;
	width:310px;
	height: 120px;
	opacity: .6;
    transform: scale(0.9);
	transition:all .24s ease;
    transform-origin: top left;
}

.recordInfo:hover {
	transform: scale(1.2);
}

body.jazz .recordInfo {
	opacity:.85;
}

body.turner .recordInfo {
	opacity:.89;
}

.clientBox,
.noteBox,
.projectBox,
.rateBox {
	width:305px;
	border: 1px solid #adb7b5;
    padding: 0;
    box-sizing: border-box;
    box-shadow: 3px 2px 0px #d1d4de;
    background: #f2f4f580;
	max-height: 30px;
	margin-bottom:6px;
	position: absolute !important;
	z-index: 1 !important;
	font-size: 12px;
	line-height: 17px;
}

body.jazz .clientBox, body.jazz .noteBox, body.jazz .projectBox, body.jazz .rateBox {
	background: #fff;
}

body.turner .clientBox, body.turner .noteBox, body.turner .projectBox, body.turner .rateBox {
	background: #f2f4f5db;
}

body.dark .clientBox, 
body.dark .noteBox,
body.dark .projectBox, 
body.dark .rateBox {
	background: #f2f4f5;
}

body.loccitane .clientBox, 
body.loccitane .noteBox,
body.loccitane .projectBox, 
body.loccitane .rateBox {
  box-shadow: 3px 2px 0px #d1d4de;
  background: #f2f4f5eb;
}

.spacerH2 {
	margin: 9px 0 25px 0 !important;
}

.clientBox {
	top:0;
}

.noteBox {
	top: 80px;
}

.clientBox,
.projectBox,
.rateBox {
	padding: 2px 6px;
}

.projectBox,
.rateBox {
	top: 40px;
	display: inline-block;
	width: 150px;
    margin-right: 4px;
}

.rateBox {
	width: 147px;
	margin-right: 0;
	left: calc(50% + 3px);
}

.clientImg,
.clientName {
	display: inline-block;
}

.projectNote,
.noUse {
	border: 0;
	height: 28px !important;
	padding: 6px !important;
	margin: 0;
	box-sizing: border-box;
	resize: none;
}

body.turner .projectNote {
	background: #fff0;
}

.noUse {
	width: 100%;
}

.recordInfo .row {
	height: 30px;
	display: flex;
	gap: 5px;
	padding: 0;
	border: 0;
}

.noteBox textarea:focus,
.noteBox textarea:focus-visible,
.noUse:focus,
.noUse:focus-visible {
	outline:0;
	border:0;
	background:#EFEFEF;
}

.recordInfo .row p {
	margin:3px 0;
	color: #696e74;
}

.recordInfo .projectBox .row p {
  padding-right: 9px;
}

.clientImg img {
	max-height: 24px;
}

.clockWrap {
	position: absolute !important;
	right: 163px;
	top: 35px;
	width: 71px;
	height: 91px;
}

.clock {
    width: 61px;
    height: 60px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    padding: 5px;
    background-color: #ffffffb0;
	transform: scale(.94);
	transition: all .3s ease;
}

.clockUser {
	cursor: pointer;
}

.clockUser:hover {
	animation: clockShake .8s forwards ease;
}

.trayClock .clock:hover {
	animation: none;
}

.clock.digital-mode {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'DS-Digital', monospace;
	font-weight: normal;
	font-style: normal;
	font-size: 29px;
	color: #444;
	background-color: #e6e6e6;
	border: 2px solid #953737;
	box-shadow: 0 0 2px #978080;
	border-radius: 3px;
	height: 17px;
	padding: 8.5px 38px 11px;
	margin-left: -63px;
}

.clock.digital-mode .clockNo,
.clock.digital-mode .clock-face {
	display: none;
}

#digitalTimeDisplay {
	display: none;
	white-space: nowrap;
}

#digitalTimeDisplay .clockDigit {
	display: inline-block;
	width: 1ch;
	text-align: right;
	transform:translateX(-1px);
}

#digitalTimeDisplay .ampm {
	font-size: 12px;
	margin-left: 1px;
	vertical-align: super;
	color: #444;
}

.clock.digital-mode #digitalTimeDisplay {
	display: block;
}

.setTime {
	opacity: 0;
	pointer-events: none;
	position: absolute !important;
	font-size: 12px;
	text-align: center;
	width: 0%;
	padding: 0px;
	background: #ffffff80;
	border: 0px solid #0006;
	margin-top: 3px;
	overflow:hidden;
	margin-left: calc(-10% + 4px);
	cursor: pointer;
	transition: opacity .24s ease .2s, width 0s;
}

.clckStClick {
	top: -23px;
	font-size: 11px;
	margin-left: -31%;
}

.setTime p {
	margin:0;
}

.clockWrapUser:hover .setTime {
	pointer-events: all;
	width: 100%;
	padding: 2px;
	border: .5px solid #0006;
	opacity:0.5;
}

.clockWrapUser:hover .clckStClick {
	width: 150%;
}

.setTime:hover {
	background:#667375;
	color:#E2E0E0;
	opacity: 0.8
}

@keyframes clockShake {
	0% {
		transform: scale(.94) translate(0,0);
		box-shadow: none;
	}
	
	17%, 83% {
		transform: scale(.94) translate(-3px, .24px);
		box-shadow: -.25px .25px 2.5px -2px #000;
		box-shadow: .25px -.25px 2.5px -2px #000;
	}
	
	50% {
		transform: scale(.95) translate(3px, 0px);
		box-shadow: .24px .25px 2.5px -2px #000;
	}
	
	100% {
		transform: scale(.94) translate(0,0);
		box-shadow: none;
	}
}

.clock-face {
  	position: relative;
    width: 100%;
    height: 100%;
}

.clockNo {
	position: absolute !important;
    top: 2px;
    width: calc(100% - 11px);
    text-align: center;
    font-size: 12px;
    color: #b8bbbe;
}

.clockNo p {
	margin:0;
}

.hand {
	width: 50%;
	height: 6px;
	background-color: black;
	position: absolute;
	top: calc(50% - 4px);
	transform-origin: 100%;
	transform: rotate(90deg);
	transition: all 0.05s;
	transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hour-hand {
  	height: 2px;
  	background-color: #6f757c;
	width: calc(50% 
- 8px);
	top: calc(50% - 2px);
	box-sizing: border-box;
	margin-left:9px;
}

.minute-hand {
  height: 1.5px;
  background-color: #8eaec7;
}

.second-hand {
  height: .5px;
  background-color: #eb863e;
}

.pinnedClocks {
	display: flex;
	gap: 10px;
	top: 13px;
	height: 130px;
	overflow-x: auto;
	width: calc(100% - 547px);
	max-width: 590px;
	right: 0;
	position: absolute !important;
	margin-right: 260px;
	color: #8c7b7b;
	flex-direction: row-reverse;
	padding: 8px 4px;
	opacity:0;
	transition: all .3s ease;
	z-index:1;
	pointer-events:all;
}

#pinnedClocks.menuOpen {
	pointer-events:none;
}

.pinnedClocks.showPinCs {
	opacity:1;
	z-index: 11 !important;
}

.pinnedClock {
	font-size: 13px;
	padding: 0px 10px;
	text-align: center;
	white-space: nowrap;
	margin-top: -2px;
}

.pinnedClock strong {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	color: #8c7b7b;
}

.unpinBtn {
    position: absolute;
	background: #f4f4f4e5;
	color: white;
	border-radius: 4px;
	font-size: 11px;
	padding: 3px 4px;
	cursor: pointer;
	border: 1px solid #86818154;
	box-shadow: none;
	margin: 0;
	transform: translate(7px,-11px);
  	opacity: 0.5;
	transition: all .2s ease;
}

.worldClockTray {
	color: #eee;
	padding: 9px 5px;
	width: calc(100% - 547px);
	max-width: 560px;
	right: 0;
	position: absolute !important;
	margin-right: 253px;
	overflow: hidden;
	height: 100px;
	margin-top: 4px;
	z-index: 10;
	pointer-events: none;
}

#worldClockTray.showClocks {
	pointer-events: all;
}

.worldClockTray h4 {
	margin: 0 0 12px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #ccc;
}

#clockOptionsGrid {
	display: flex;
	flex-direction:row-reverse;
	gap: 3px;
	right: -100%;
	position: absolute !important;
	width: 100%;
	opacity:0;
	height:100px;
	transition: all .44s ease;
}

#clockOptionsGrid.showWldClocks {
	right:0;
	opacity:1;
}

.trayClock {
	padding: 6px;
	text-align: center;
}

.trayClock strong {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	color: #8c7b7b;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}

.trayClock p {
	font-size: 12px;
	color: #979696;
	margin: 0;
}

.trayClock button {
	margin-top: 0;
	padding: 3px 5px;
	font-size: 11px;
	background: #f4f4f4e5;
	color: #2aff00;
	border: 1px solid #86818154;
	border-radius: 3px;
	cursor: pointer;
	transform: translate(17px,-14px);
	z-index: 99;
	position: relative;
	box-shadow: none;
	transition: all .2s ease;
}

.trayClock button:hover {
	font-size: 13px;
	padding: 1.5px 4.5px;
	background: #e1e1e1e5;
}

.clock.smallClock {
	width: 46px;
	height: 45px;
	padding: 4px;
	border: 1px solid #888;
	background-color: #ffffffb0;
	border-radius: 50%;
	position: relative;
}

.clock.smallClock .hand {
	height: 4px;
}

.clock.smallClock .hour-hand {
	height: 2px;
	width: 40%;
	margin-left: 6px;
}

.clock.smallClock .minute-hand {
	height: 1.5px;
	width: 50%;
}

.clock.smallClock .second-hand {
	height: 0.5px;
	width: 50%;
	background: #eb863e;
}

.clock.smallClock .clockNo {
	font-size: 9px;
}

.footer {
	position: absolute !important;
    height: 60px;
	bottom: 0;
	right: 0;
 	width: 220px;
}

.mainMenu {
	position: absolute !important;
    right: 40px;
    font-size: 55px;
    bottom: 4px;
	cursor:pointer;
    color: #89a5a8cf;
	text-shadow: -5px -1px #fffbf8;
	z-index:999999;
}

.mainMenu.animate {
	animation: bounce .4s ease forwards .1s;
}


@keyframes bounce {
	0% {
		transform:scale(1);
	}
	
	30% {
		transform:scale(1.2);
	}
	
	60% {
		transform:scale(.8);
	}
	
	100% {
		transform:scale(1);
	}
}

#menuDiv {
	position: absolute !important;
    width: calc(100% - 18px);
	max-width:440px;
    background: #fff;
    right: -100%;
    bottom: -100%;
    height: calc(100% - 50px);
    box-sizing: border-box;
	box-shadow: -4px 8px #d5e1f0;
	transition: all .28s ease;
	overflow:hidden;
}

#menuDiv.open {
	right: 0%;
    bottom: 0%;
}

.menuWrap {
	padding: 20px 30px;
	height: 100%;
	border-left: 2px solid #afb4b9;
    border-top: 1px solid #cdd6d4;
}

.menuWrap h2 {
	margin: 9px 0;
	cursor: pointer;
	transition: all .6s ease, position 0s 0s, top .4s ease .4s;
	opacity: .7;
	color: #445E73;
	letter-spacing: 1px;
	font-size: 23px;
}

body.dark .menuWrap h2 {
	font-family: 'Rubik', sans-serif;
  	font-weight: 700;
	color:#fff;
}

.showLink {
	z-index: 99999999;
    position: absolute;
    top: 20px;
	opacity: 0.94 !important;
	color:#445E73 !important;
}

body.dark .showLink {
	filter: invert(1) brightness(4);
}

.showLink:before,
.showBack:before {
	content: '';
	width: 24px;
	height: 17px;
	background-image: url('img/arrow.png');
	background-size: contain;
	display: inline-block;
	margin-right: 5px;
	opacity: 0.6;
	background-repeat: no-repeat;
	background-position: center;
	transition: all .3s ease;
}

.showBack::before {
  width: 15px;
  margin-right: 3px;
}

.menuMat {
	position: absolute !important;
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    left: 0;
   	bottom: calc(-100% + 50px);
	transition: all .4s ease;
	padding: 80px 20px 50px;
    box-sizing: border-box;
}

body.dark #menuDiv,
body.dark .menuMat {
	background: #4c6171;
}

.showMat {
	bottom:0 !important;
}

#auth-container {
	height:100%;
}

.showLoggedIn {
	display:block;
}

.loggedInBox,
.loggedOutBox {
	display:none;
	opacity:0;
	pointer: none;
	height: 100%;
  	width: 100%;
  	overflow: hidden;
}

.loggedInBox.showBox,
.loggedOutBox.showBox {
	display:block;
	opacity:1;
	pointer: all;
}

.loggedIn {
	display:none;
	opacity:0;
	pointer-events: none;
}
.loggedIn.inside {
	display:block;
	opacity:1;
	pointer-events: all;
}

.loginClick.loggedIn.inside {
	display: inline-block !important;
}
.loginClick.showLink {
	display: flex;
  	align-items: baseline;
}

.loggedOut {
	display:block;
	opacity:1;
	pointer-events: all;
}
.loggedOut.inside {
	display:none;
	opacity:0;
	pointer-events: none;
}

.loginWrap .loggedInBox h3 {
	font-size: 14px;
	letter-spacing: 1px;
	font-family: 'Rubik', sans-serif;
	text-transform: uppercase;
	text-align: right;
	margin: 50px 20px 60px;
	line-height: 1.5;
	color: #485559;
}

.loginMat,
.signUpMat {
	width: 100%;
  	height: calc(100% - 60px);
  	position: absolute !important;
	left:0;
	transition: all .4s ease;
}

.loginFormP {
	position: absolute !important;
	bottom: 90px;
	text-align: right;
	width: 100%;
}

.moveToSignUp,
.moveToLogIn {
	position: absolute;
	bottom: 50px;
	right: 0;
	opacity: 0.9;
	background: #8197ac;
}

.signUpMat {
	left: calc(-100% - 10px);
}

.loginMat.slideOver {
	left: calc(100% + 10px);
}

.signUpMat.slideOver {
	left: 0;
}

#login-form {
	margin-top:40px;
}

#login-form input,
#signup-form input {
	width: 280px;
	max-width:calc(100% - 20px);
	display: block;
	margin: 30px auto;
	padding: 9px 13px;
	text-align: center;
	font-family: "Roboto Mono", monospace;
	border: 0px;
	box-shadow: 1px 2px 4px -4px;
}

#login-form button,
#signup-form button {
	display: block;
	margin:12px auto;
}

#logout-btn {
	width: 120px;
	margin-left: calc(50% - 65px);
	position: absolute !important;
	bottom: 160px;
}

.loggedOutBox h3 {
	font-size: 16.5px;
	max-width: 330px;
	margin: 30px 20px;
	text-align: left;
	color: #6186a2;
	letter-spacing: 1.5px;
	transform: scaleY(1.1);
	font-family: 'Rubik', sans-serif;
	font-weight: 600;
}

.loginButton {
	position: absolute !important;
	bottom: 230px;
	margin: 0 auto;
	width: 110px;
	left: calc(50% - 55px);
}

.custom-dropdown {
    position: relative;
    width: 200px;
    cursor: pointer;
}

.dropdown-selected {
    padding: 10px;
    background-color: #fff;
}

.rateScroll .dropdown-selected {
	padding: 3px !important;
 	height: 22px !important;
	font-size: 15px !important;
}

.dropdown-options {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #fff;
    margin-top: 2px;
    z-index: 10;
}

.dropdown-options .dropdown-item {
    padding: 10px;
    cursor: pointer;
}

.newProjectForm .dropdown-options .dropdown-item {
	font-size: 12px;
}

.dropdown-options .dropdown-item:hover {
    background-color: #f0f0f0;
}

.dropdown-item.selected {
    background-color: lightblue; /* Mark selected items */
}

.project-selected {
    display: inline-block;
    margin-right: -7px;
}

.project-selected button {
    background: none;
    border: none;
    color: red;
    cursor: pointer;
    font-size: 12px;
}



@media all and (max-width:530px) {
	.clock {
		right: 36px;
    	top: 134px;
		transform: scale(.91);
	}
}

.newRateForm,
.newProjectForm {
	position: absolute !important;
	margin: 10px 0px 0px 10px;
  	width: calc(100% - 10px);
	z-index: 999 !important;
}

.newRateForm .entryRow,
.rateScroll .entryRow,
.newProjectForm .entryRow {
	display: flex;
	width: calc(100% - 65px);
	max-width: 600px;
}

.newProjectForm .entryRow {
	gap:2px;	
}

.rateScroll .entryRow { 
	width:100%;
	align-items: start;
}

.rateAmount {
	min-width: 60px;
    width: 370px;
    font-size: 13px;
    letter-spacing: 1px;
    padding-left: 8px;
    border: 1px solid #eceaea;
    height: 31px;
	font-family: 'Roboto Mono',inherit monospace !important;
}

.rateScroll .rateAmount {
	height:25px;
}

.newRateForm .dropdown-selected,
.rateScroll .dropdown-selected,
.newProjectForm .dropdown-selected {
	padding: 7px;
    height: 20px;
	font-family: "Roboto Mono", monospace;
    font-weight: 600;
    font-size: 17px;
    text-align: center;
	color: #fff;
    background: #607274;
	border: 0;
}

.newProjectForm .dropdown-selected {
	font-size: 11.6px;
	width: 100px;
	height:18px;
	font-weight: 400;
	line-height: 18px;
}

.save-rate-btn,
.save-client-btn,
.save-project-btn {
	width: 45px;
	height: 45px;
	background: #fff;
	border: none;
	border-radius: 50%;
	max-height: 45px;
	min-width: 45px;
	position: absolute !important;
	right: 5px;
	top: -18px;
	font-size: 26px;
	color: #375c77;
	padding: 0;
	text-align: center;	
}

.save-client-btn {
	right: 15px;
	top: -15px;
}

.save-rate-btn p,
.save-project-btn p {
	margin: 0;
	font-family: 'Rubik Mono One', sans-serif;
	width: 100%;
	line-height: 48px;
}

.save-client-btn p {
	line-height: 0;
	transform: translateY(-6px);
	font-size: 30px;
	font-family: 'Rubik Mono One', sans-serif;
	font-weight: 800;
}

#existing-clients .save-client-btn {
	display: inline-block;
	margin-left: 35px;
}

#existing-clients .delete-client-btn {
	display: inline-block;
	margin-left: 76px;
}

.emptyRatesDoc,
.emptyClientsDoc,
.emptyProjectsDoc {
	position:absolute !important;
	top:60px;
	margin: 60px 13px;
	font-size: 15px;
	z-index:-1;
}

.rateScroll button {
	position: unset !important;
	background: #00000080;
	padding: 0px 6px !important;
	height: 26px;
 	font-size: 12px;
	color: #fff;
	border-radius: 1px;
	max-width: unset;
	min-width: 50px;
	display: block;
	margin-top: 1px;
}

.rateScroll button:first-of-type {
	margin:1px 4px;
}

.rateScroll h2,
.addRateH2 {
	font-size: 15px;
	margin: 30px 0px 10px;
}

.addRateH2 {
	text-align: right;
}

.rateScroll p {
	font-size: 13px;
	margin-bottom: 38px;
}

.deleteModal {
    display: none;
    position: absolute !important;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  	align-items: center;
  	flex-direction: column-reverse;
}

.deleteModal .modal-content {
	position: absolute !important;
    background-color: white;
    margin: 15% auto;
    border: 1px solid #888;
    width: 300px;
    text-align: center;
	bottom: 10px;
	font-size: 14px;
	padding: 4px;
}

.addClientWrap {
	overflow: hidden;
	max-height: 40px;
	transition:all .3s ease;
}

.addClientWrap.active {
	max-height: 400px;
}

.newClientForm .entryRow {
	font-size: 0px;
	margin-bottom:10px;
}

.newClientForm .entryRow input,
.clientsWrap .rateScroll input {
	width: calc(30% - 3px);
	margin: 0px 2px;
	font-size: 13px;
	letter-spacing: .5px;
	padding-left: 8px;
	border: 1px solid #eceaea;
	height: 31px;
	font-family: 'Roboto Mono', monospace;
}

.addClientWrap .client-address,
.addClientWrap .client-phone {
	margin-left: 30px !important;
  	width: calc(30% - 31px) !important;
}

.clientsWrap .rateScroll input {
	font-size: 12px;
	margin-bottom: 4px;
}

#existing-clients {
	font-size:0px;
}

.contractItem {
	font-size: 12px;
}

#calculatorOpen {
	position: absolute !important;
	font-size: 37px;
	bottom: 7px;
	color: #89a5a8cf;
	text-shadow: -3px -2px #fffbf8;
	cursor: pointer;
	right: 120px;
}

#calcWrap {
	position:absolute !important;
	width:300px;
	height:430px;
	opacity:0;
	pointer-events: none;
	max-width:0px;
	bottom:2px;
	transition: all .6s ease;
}

.showCalc {
	max-width:410px;
	opacity: 1 !important;
  	pointer-events: all !important;
}

#calculator {
	background-color: #eef2f3;
    padding: 20px 15px;
    width: 250px;
    border-radius: 6px;
    border-top: 1px solid #dbdbdb;
    border-right: 1px solid #dadce0;
	box-shadow: 1.5px 3px 10px -8px #5b7081;
}

.calc-display {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}

.calc-display input {
	width: 100%;
	text-align: right;
	font-size: 1.5rem;
	padding: 10px;
	border: none;
	border-radius: 5px;
	margin-bottom: 11px;
	background:#f9f9f9;
}

.calc-buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.calc-btn {
	padding: 10px 15px;
	font-size: 18px;
	background-color: #728f9dc4;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	text-align: center;
	font-family: 'Rubik Mono One';
	transform: scaleY(1.3);
	margin-bottom: 3px;
	color: #424848;
}

.calc-btn:hover {
  background-color: #c1c1c1;
}

.calcLabel {
	position: absolute !important;
	width: 190px;
	bottom: 0;
	left: 85px;
	display: flex;
	gap: 4px;
	align-items: center;
	opacity:0.84;
}

.fI {
	width: 20px;
	margin-bottom: 8px;
	opacity: 0.44;
}

.calcLogo {
	display: inline-block;
	width: 62px;
	margin-bottom: 5px;
	margin-right: -3px;
	opacity: 0.5;
}

.calcLabel p {
	font-family: 'Rubik Mono One';
	font-size: 10.5px;
  	letter-spacing: -0.3px;
	color: #a0a8b0;
}

.calcLink {
	position: absolute !important;
	left: 290px;
	width: 418px;
	bottom: 0;
	height: 26px;
	top: unset !important;
	margin-bottom: -2px;
	transform: rotate(-90deg);
	transform-origin: bottom left;
	margin-left: 17px;
	font-size: 14.5px;
	background: #edf0f2;
	line-height: 23px;
	padding-left: 9px;
	border-bottom-right-radius: 6px;
	border-right: .7px solid #b6bec1;
	border-bottom: .7px solid #cdd1d2;
	color: #bfa89c;
	box-shadow: -15px 2px 14px #aaaaaa61;
	cursor:pointer;
}

#existing-rates,
#existing-projects {
	margin-top:134px;
}

#existing-projects {
	max-height: 340px;
  	overflow-y: scroll;
}

.project-name-input {
	font-size: 13px;
	font-family: 'Roboto Mono', monospace;
	padding: 6px 6px;
	border: 1px solid #eae6e6;
	color: #888;
	vertical-align: top;
}

.project-client-dropdown .dropdown-options {
	max-width: 110px;
	overflow: scroll;
}

#existing-projects .project-clients-dropdown {
	display: inline-block;
	width: 140px;
	vertical-align: top;
	font-size: 13px;
 	white-space: nowrap;
  	overflow-x: clip;
}

#existing-projects .dropdown-options {
	padding:0 3px;
}

#existing-projects .project-clients-dropdown .dropdown-selected {
	font-size: 13px !important;
	font-weight: 400;
}

#existing-projects .project-row {
	margin-bottom: 10px;
	/* text-align: right; */
  	padding: 0 15px 0 8px;
	border-bottom: 0.5px solid #698faaa3;
}

#existing-projects .project-details {
	margin-bottom: 4px;
}

#existing-projects .save-project-btn,
#existing-projects .delete-project-btn {
	display: inline-block;
}

#existing-projects .save-project-btn {
	background: #638dac;
}

#existing-projects .project-name-input {
	width:175px;
}

/* Container for the color swatches */
.color-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 10px;
}

/* Individual color swatches */
.color-options .color-swatch {
    width: 27px;
	height: 27px;
	border-radius: 0px;
	cursor: pointer;
	transition: border 0.2s ease;
	border: 2px solid transparent;
	transform: rotate(25deg);
	transform-origin: center;
}

.color-swatch:hover {
    border: 2px solid #000; /* Highlight border on hover */
}

/* Custom color section */
.custom-color {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.custom-color p {
    font-size: 13px;
	margin: 20px 0 18px 17px;
}

.entryRow .custom-color-input {
    width: 50px;
	height: 35px;
	border: 0px !important;
	border-width: 0px !important;
	cursor: pointer;
	outline: 0px !important;
	background: none;
}

.photoRow {
	display: flex;
	gap: 7px;
}

/* Selected color highlight */
.color-swatch.active-swatch {
    border: 2px solid #213133a8;
}

/* Hide the color picker until user clicks the color swatch */
.custom-color-picker {
    display: none;
	position: absolute !important;
	top: 43px;
	left: 110px;
	background: #fff;
	padding: 20px 22px 5px 22px;
}

.custom-color-picker.active {
    display: block;
}

/* Default color swatch */
.default-swatch {
    width: 40px;
	height: 30px;
	border-radius: 2px;
	cursor: pointer;
	border: 2px solid transparent;
	display: block;
    background-color: #ff0000; /* Default color */
}

.project-color {
	width: 20px;
	height: 20px;
	display: inline-block;
}

.settingsInner {
	height: calc(100% - 70px);
}

.userDetails,
.timeLocation,
.settingsLanguage,
.settingsTheme,
.settingsTutorial,
.appSettings {
	position: absolute !important;
	bottom: 0;
	left: 0px;
  	right: 3px;
	background: #faf9f7;
	box-shadow: 5px 3px #ece7e7;
	height: 100%;
	overflow:hidden;
	padding: 0;
 	box-sizing: border-box;
	max-height: 0%;
	transition:all .4s ease;
}

.userDetails.open,
.timeLocation.open,
.settingsLanguage.open,
.settingsTheme.open,
.settingsTutorial.open,
.appSettings.open {
	max-height: 100%;
	padding: 70px 15px 0px;
	overflow: scroll;
}

.settingsInner h3 {
	text-align: right;
	padding: 20px;
	font-size: 17px;
	letter-spacing: 1px;
	color: #9aa2ac;
	cursor:pointer;
	margin: 0;
	transition: all .3s ease;
}

.settingsInner h3:first-of-type {
	padding-top:50px;
}

h3.scrollOver {
	padding: 7px !important;
	background: #f6f6f6;
	margin: 10px 14px 0 0 !important;
}

body.dark h3.scrollOver {
	background: #4c6171;
}

.showSetLink {
	z-index: 99999999;
	position: absolute;
	top: 10px;
	opacity: 0.94 !important;
	color: #637584 !important;
	right: 0;
	padding-top: 20px !important;
}

.showSetLink:before {
	content: 'X';
	display: inline-block;
	margin-right: 20px;
	font-family: 'Courier', monospace;
	font-size: 19px;
	border: 2px solid;
	border-radius: 50%;
	width: 20px;
	text-align: center;
	line-height: 19px;
	color: #799fce;
}

.settingsThemeSpec.showSetLink {
	background: #faf9f7;
	padding: 10px !important;
	right: 20px;
}

#userAcctOpen {
	position: absolute !important;
	font-size: 33px;
	bottom: 9px;
	color: #89a5a8cf;
	text-shadow: -3px -2px #fffbf8;
	cursor: pointer;
	right: 175px;
}

body.turner .mainMenu,
body.turner #calculatorOpen, 
body.turner #userAcctOpen {
	color: #eae9ca !important;
	text-shadow: 10px 8px 2px #212224 !important;
}

body.dark .mainMenu,
body.dark #calculatorOpen, 
body.dark #userAcctOpen,
body.dark #CQROpen {
	color: #dcdedf;
  	text-shadow: -3px -2px #606b6d;
}

body.loccitane #calculatorOpen,
body.oil #calculatorOpen {
	color: #ffffffe8;
  	text-shadow: 4px -6px #3c4d4f;
}

body.loccitane .mainMenu,
body.loccitane #userAcctOpen,
body.oil .mainMenu,
body.oil #userAcctOpen {
	color: #ffffffe8;
  	text-shadow: 4px -6px #3c4d4f;
}

body.loccitane .footer.menuOpen .mainMenu, 
body.loccitane .footer.menuOpen #userAcctOpen,
body.oil .footer.menuOpen .mainMenu, 
body.oil .footer.menuOpen #userAcctOpen,
body.loccitane .footer.menuOpen #calculatorOpen, 
body.oil .footer.menuOpen #calculatorOpen {
  color: #7b8d9c;
  text-shadow: none;
}

body.jazz #userAcctOpen,
body.jazz #calculatorOpen,
body.jazz .mainMenu {
	color: #b1cfea;
  	text-shadow: 2px 2px #232121;
}

.userDetailsForm .rateAmount {
	width: calc(50% - 18px) !important;
  	margin-bottom: 5px;
}

.userDetailsForm .subRow .rateAmount {
	width:calc(100% - 3px) !important;	
}

.userDetailsForm .firstSubRow .rateAmount {
	width:calc(100% - 9px) !important;	
}

.settingsInner .subRow {
	display: inline-block;
	width: calc(50% - 10px);
}

.settingsInner .subRow p {
	text-align:right;
	font-size: 12px;
	margin-bottom: 3px;
}

.settingsInner .firstSubRow p {
	text-align:left;
}

.settingsInner .subRow textarea {
	height: 100px;
	font-size:10px;
	resize: none;
}

.save-userSettings-btn {
	position: absolute;
	transform: scale(0.9);
	transform-origin: left;
	z-index: 999999999;
	cursor: pointer;
	bottom: -7px;
	right: 16px;
}

.save-userSettings-btn p {
	margin: 2px;
}

.mapWrap {
    width: 100%;
    max-width: 320px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#map {
    width: 100%;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 8px;
}


.userDetails .addRateH2 {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	margin-right: 4px;
}

.userDetails .photoUpload {
	display: inline-block;
	max-width: calc(50% - 10px);
}

#appSetInner {
	padding-top: 20px;
  	height: calc(100% - 20px);
}

#appSetInner .colLeft, 
#appSetInner .colRight {
	display:inline-block;
	width:62%;
	height: 100%;
  	vertical-align: top;
}

#appSetInner .colRight {
	width:calc(38% - 4px);
}

#appSetInner h3 {
	font-family: 'Rubik', sans-serif;
	padding: 10px 3px;
	transition: all .2s ease;
	font-size: 14.5px;
	border-bottom: 1px solid #dee2e1;
}

#appSetInner h3:hover,
#appSetInner h3.active {
	background: #f0f0f0;
}

.appSetItemBlock {
	position: absolute !important;
	height: calc(100% - 15px);
	width:100%;
	background:#fff;
	transition: all .3s ease;
	left: calc(-100% - 30px);
}

.appSetItemBlock.showAppSet {
	left:0;
}

.appSet-inv {
	background:#e2e2e2;
}

.notesWrap .loggedInBox,
.alarmWrap .loggedInBox {
	position: absolute !important;
	width: calc(100% - 40px);
	height: calc(100% - 85px);
	top: 20px;
}

.notesInner,
.alarmInner {
	height: 100%;
}

.driveWrap,
.notesPadWrap,
.doodleWrap,
.gamesWrap,
.qrMakerWrap,
.fileTransWrap,
.encrypterWrap,
.imgUrlWrap,
.timeBlkWrap,
.timersWrap,
.alarmClkWrap,
.clockSetWrap {
	position: absolute !important;
	width: 100%;
	height: calc(100% - 70px);
  	top: 57px;
	left: calc(-100% - 40px);
	transition: all .3s ease;
	padding: 14px;
	box-sizing: border-box;
}

.driveWrap.slideIn,
.notesPadWrap.slideIn,
.doodleWrap.slideIn,
.gamesWrap.slideIn,
.qrMakerWrap.slideIn,
.fileTransWrap.slideIn,
.encrypterWrap.slideIn,
.timeBlkWrap.slideIn,
.timersWrap.slideIn,
.alarmClkWrap.slideIn,
.clockSetWrap.slideIn,
.imgUrlWrap.slideIn {
	left: 0px;
}

.qrMakerWrap {
    background:#fff;
}

.notesInner h3,
.alarmInner h3 {
	position:absolute !important;
	padding: 10px 20px;
	font-size: 19px;
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
	text-shadow: .5px .5px #fff;
	letter-spacing: 1px;
	color: #9aa2ac;
	cursor:pointer;
	text-align: right;
	right:0;
	margin: 0;
	width: 250px;
	transition: all .3s ease;
	text-transform: lowercase;
}

body.dark .notesInner h3,
body.dark .settingsInner h3,
body.dark .alarmInner h3 {
	color: #dae0e8;
	font-family:'Rubik', sans-serif;
	font-weight:700;
}

.driveClick,
.alarmClkClick {
	top: 50px;
}

.fileTransClick,
.timersClick {
	top: 85px;
}

.qrMakerClick,
.timeBlkClick {
	top: 120px;
}

.sciCalClick,
.clockSetClick {
	top: 155px;
}

.notesPadClick {
	top: 190px;
}

.doodleClick {
	top: 225px;
}

.encrypterClick {
	top: 260px;
}

.gamesClick {
	top: 295px;
}

.adsMgrClick {
	top: 360px;
}

.mediaMoleClick {
    top: 395px;
}

.imgUrlClick {
    top:430px;
}

.socSchedClick {
    top:465px;
}

.vidMailClick {
	top:500px;
}

.specProdLine {
	position: absolute !important;
	top: 350px;
	border-top: 1px solid #d9d9d9;
	width: 50%;
	margin-left: calc(50% - 20px);
}

.driveClick.slideUpLink,
.socSchedClick.slideUpLink,
.fileTransClick.slideUpLink,
.encrypterClick.slideUpLink,
.notesPadClick.slideUpLink,
.doodleClick.slideUpLink,
.gamesClick.slideUpLink,
.qrMakerClick.slideUpLink,
.alarmClkClick.slideUpLink,
.timersClick.slideUpLink,
.timeBlkClick.slideUpLink,
.clockSetClick.slideUpLink,
.imgUrlClick.slideUpLink {
	top: 0px;
  	right: calc(100% - 270px);
  	text-align: left;
}

.slideUpLink:before {
	content: '';
	width: 14px;
	height: 10px;
	background-image: url('img/arrow.png');
	background-size: contain;
	display: inline-block;
	margin-right: 5px;
	opacity: 0.6;
	background-repeat: no-repeat;
	background-position: top center;
	transition: all .3s ease;
	transform: translateY(-1px);
}

.driveWrap,
.alarmClkWrap {
	background: #d2e1df;
  	height: calc(100% - 120px);
}

.fileTransWrap,
.timersWrap {
	background: #f2f0eb;
  	height: calc(100% - 110px);
}

.encrypterWrap,
.timeBlkWrap,
.imgUrlWrap {
	background: #e7f1f2;
  	height: calc(100% - 110px);
}

.imgUrlWrap {
    overflow-y: scroll;
}

.qrGen,
.clockSetWrap {
	height: calc(100% - 80px);
  	background: #fff;
}

.qrGen {
    padding:10px;
}

.qrShrinkUrl {
    width: calc(100% - 5px);
    height: 34px;
    margin: 10px 0 0;
}

.clockSetWrap,
.timeBlkWrap,
.timersWrap,
.alarmClkWrap {
	height: calc(100% - 110px);
}

.clockSetWrap h3 {
	font-size: 14.5px;
	text-align: left;
	width: 126px;
	right: unset;
	display: inline-block;
	padding: 13px 0 10px 8px;
}

#qrcode {
	float:right;
}

#qrcode img {
	display: block;
  	height: 250px;
  	width: 250px;
}

.modeRow{
    display:flex;
    gap:.5rem;
    margin:10px 0;
}

.modeBtn{
    padding:.4rem .8rem;
    border:1px solid #ddd;
    background:#f7f7f7;
    color:#000;
    cursor:pointer;
    margin-bottom: 0;
}

.modeBtn.active{
    background: #669eb9;
    color: #fff;
    border-color: #688b9b;
}

.modePanel{
    padding: 30px 15px;
    margin-top: 5px;
}

#qrOptions {
    background: #cadce6;
}

#shortenerOptions {
    background: #f2b72b2b;
}

#clientNameQR {
	text-align: right;
}

.coolerOptions {
	max-height: 0px;
  	overflow: hidden;
	transition: all .24s ease;
}

.openOptions {
	max-height: 500px;
}

.cOpOpened {
	display:none;
}

.cOpClosed {
	display:block;
}

.coolerOpClick.opsOpen .cOpOpened {
	display:block;
}

.coolerOpClick.opsOpen .cOpClosed {
	display:none;
}

.doodleWrap {
	background: #eff1f3;
	height: calc(100% - 110px);
	border-right: 1px solid #dce0e4;
	box-sizing: border-box;
	border-bottom: 1px solid #dfe3e7;
}

.gamesWrap {
	background: #e6ecee;
}

body.dark .driveWrap,
body.dark .fileTransWrap,
body.dark .encrypterWrap,
body.dark .doodleWrap,
body.dark .gamesWrap,
body.dark .notesPadWrap,
body.dark .qrGen,
body.dark .alarmClkWrap,
body.dark .timersWrap,
body.dark .timeBlkWrap,
body.dark .clockSetWrap {
	background: #4c6171;
}

.slate {
	height: calc(100% - 90px);
	border-left: .5px solid #d9d5d2;
	border-top: 1px solid #e2e2e2;
	border-right: 0px;
	border-bottom: 0px;
	box-shadow: 4px -5px #e0e4e3c9;
	margin-top: 3px;
	width: calc(100% - 9px);
	background: #eceff2;
	outline: none;
	z-index: 99999999 !important;
}

.toolbar {
    text-align: left;
	position: absolute !important;
  	bottom: 0;
  	right: 4px;
}

.format-btn {
    background-color: #eaeaeaeb;
	border: none;
	cursor: pointer;
	box-shadow: none;
	padding: 0;
	color: #b56f6e;
	font-size: 18px;
}

.smallFont {
    font-size: 12px;
}

.normalFont {
    font-size: 15px;
}

.largeFont {
    font-size: 19px;
}

.hugeFont {
    font-size: 24px;
}

.format-btn:focus,
.format-btn:focus-visible {
	outline:none;
	border:none;
}

.format-btn:active {
	color: #335B65;
    background-color: #333a40;
}

#fontSizeSelector {
    padding: 3px;
    margin-right: 5px;
}

#fontColorPicker {
    margin-right: 5px;
    border: 1px solid #ddd;
	width: 28px;
  	height: 28px;
}

#socialSchedMat,
#vidMailMat,
#adsManagerMat,
#sciCalMat,
#mediaMoleMat {
	position: absolute !important;
	width: 90vw;
	margin: 0 auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 700px;
	opacity:0;
	pointer-events: none;
	transition:all .3s ease-in-out;
}

#socialSchedMat.revSocSched,
#vidMailMat.revSocSched,
#adsManagerMat.revSocSched,
#sciCalMat.revSocSched,
#mediaMoleMat.revSocSched {
	opacity:1;
	pointer-events:all;
}

#sciCalMat, 
#mediaMoleMat {
	min-height: 200px;
	background: #edf0ec;
	padding: 17px;
	max-height: calc(100vh - 100px);
	border-radius: 11px;
	border: 1px solid #dde0e4;
  	box-shadow: 2px 1px 13px -10px #000;
}

.socSchedBlock,
#videoMailboxSection {
	background: #ffffffd1;
	min-height: 200px;
	border:.5px solid #000;
	box-shadow: -1px 2px 10px -4px;
	max-height: 500px;
  	overflow-y: scroll;
}

.view-toggle {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.view-toggle button {
    padding: 10px 15px;
    margin: 5px;
    border: none;
    cursor: pointer;
    background-color: #ddd;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.view-toggle button.active {
    background-color: #007bff;
    color: white;
}

.view {
    display: none;
}

.view:not(.hidden) {
    display: block;
}

.hidden {
    display: none;
}

#schedCalendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    padding: 10px;
    background: white;
}

#schedCalendar div {
    padding: 20px;
    background: #e3e3e3;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

#schedCalendar div:hover {
    background: #ccc;
}

/* Table Styles */
#list-view table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#list-view table,
#list-view th,
#list-view td {
    border: 1px solid #ddd;
}

#list-view th,
#list-view td {
    padding: 10px;
    text-align: center;
}

/* Modal Styles */
.schedModal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedModal.hidden {
    display: none;
}

.schedModal-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    width: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.close-schedModal {
    float: right;
    cursor: pointer;
    font-size: 20px;
    color: #333;
}

#new-post-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 10px;
}

#new-post-btn:hover {
    background-color: #0056b3;
}

.manage-brands-modal {
	position: absolute !important;
	top: 0;
	background: #fff;
	padding: 20px;
}

.notesInner .notesArea {
    height: calc(100% - 35px);
	resize: none;
	font-family: 'Roboto Mono', monospace;
	font-weight: 200;
	font-size: 14px;
	color: #484848;
	padding: 14px;
	box-sizing: border-box;
	outline: none;
	overflow-y: scroll;
	z-index: 99999999 !important;
}

.notesInner textarea:focus,
.notesInner textarea:focus-visible {
	outline:0px;
}

.notesButton {
	width: 100px;
	display: inline-block;
	text-align: center;
	height: 33px;
	background: #525c64eb;
	color: #fff;
	line-height: 33px;
	letter-spacing: 1px;
	font-size: 14px;
	margin: 15px 0 0 8px;
	cursor:pointer;
}

.noteButWrap {
	text-align: left;
}

.newNote {
	margin-right: 10px;
}

.yourNotes {
	width: 130px;
}

.notesButton p {
	margin:0;
}

#drawingCanvas {
	display: block; 
	background: #eff1f3;
	cursor:crosshair;
}

#snakeCanvas,
#chickadeeCanvas,
#lodeRunnerCanvas {
	display: block; 
	border: 1px dashed #d98d57;
  	margin: 9px;
}

#chickadeeCanvas {
	border: 1px solid #99b095;	
}

#packMooseCanvas {
	border: 2px dotted #60423b;	
}

#tetrasCanvas {
	border: 2px dashed #3ac1a0;
 	margin: 0 auto;
  	display: block;
}

#jailBreakCanvas {
	display: block; 
	border: 1px solid #2C6EE1;
  	margin: 9px;
}

#lodeRunnerCanvas {
	border: 1px dashed #4F4A45;
}

.gamesList {
	margin-top:70px;
}

.gamesList h4 {
	font-family: 'Roboto Mono', monospace !important;
	text-align: center;
	cursor: pointer;
	font-size: 18px;
}

#arcadeWrap h5 {
	font-family: 'Roboto Mono', monospace !important;
	cursor: pointer;
	font-size: 18px;
	margin: 15px;
	text-align: right;
	margin-right: 18px;
}

.gameMiniWrap button {
	float: right;
  	margin-right: 20px;
}

.eraserModeSpan,
.brushModeSpan {
	display:none;
}

.eraserModeSpan.showSpan,
.brushModeSpan.showSpan {
	display:block;
}

#arcadeWrap {
	position:absolute !important;
	left:0;
	bottom:0;
	width:100%;
	height:0px;
	transition:all .24s ease;
	overflow:hidden;
	
}

#arcadeWrap.playGame {
	height:100%;
}

.snakeWrap,
.chickWrap,
.packMooseWrap,
.tetrasWrap,
.jailBreakWrap,
.lodeRunnerWrap {
	display: none;
	background: #e3edf0;
	height: 100%;
	top: 0;
	position: absolute !important;
	width: 100%;
}

.snakeWrap.openMini,
.chickWrap.openMini,
.packMooseWrap.openMini,
.tetrasWrap.openMini,
.jailBreakWrap.openMini,
.lodeRunnerWrap.openMini {
	display:block;
}

#arcadeBack {
	position: absolute !important;
	opacity:0;
	pointer-event:none;
	cursor:inherit;
	top: 0;
	font-size: 23px;
	background: #f6f6f6;
	width: 100px;
	transition: all .24s ease;
}

#arcadeBack p {
	margin: 7px;
	display: inline-block;
}

#arcadeBack.showBack {
	pointer-events:all;
	cursor:pointer;
	opacity:1;
	top: -53px;
}

#gameAlert {
	position: absolute;
	width: 80%;
	height: auto;
	background: #8a8189;
	text-align: center;
	color: #fff;
	padding: 10px;
	left: -140%;
	top: 50%;
	transform: translateY(-50%);
	border: 1.5px dashed #fff;
	outline: 4px solid #8a8189;
	transition: all .2s ease;
}

#gameAlert.slideAlert {
	left: calc(20% - 50px);
}

#gameAlert button {
	box-shadow: none;
	cursor:pointer;
  	font-size: 12px;
}

.winSect,
.lossSect {
	display:none;
}

.winSect.reveal,
.lossSect.reveal {
	display:block;
} 

#preGameAlert {
	position: absolute !important;
	top: 50%;
	width: 300px;
	background: #ffffff69;
	padding: 10px 20px;
	left: calc(50% - 170px);
	transform: translateY(calc(-50% - 39px));
	font-size: 13px;
	text-align: center;
}

.leftArrow:before,
.rightArrow:before,
.upArrow:before,
.downArrow:before {
	content: '←';
	font-size: 27px;
	border: .5px solid;
	height: 20px;
	display: inline-block;
	line-height: 100%;
	padding: 0px 7px 12px;
	border-radius: 2px;
	box-shadow: 1px 1px #000;
	color: #4a4a4a;
	transform: scale(0.76);
}

.rightArrow:before {
	content: '→';
}

.upArrow:before {
	content: '↑';
}

.downArrow:before {
	content: '↓';
}

.spaceKey {
	border: .5px solid;
  	padding: 1px 13px;
  	box-shadow: 1px 1px;
}

.instructor {
	width: calc(100% - 145px);
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	padding: 0 14px;
}

.instructor p {
	margin:0;
	margin-top:-5px;
}
	
.instructor span {
	transform: scale(0.7);
	display: inline-block;
	margin-left: -8px;
	margin-right: -5px;
	margin-bottom: -7px;
}

.bottomGameAlText {
	font-size: 15px;
	transition: all .3s ease;
}

.bottomPulse {
	animation: pulseText 1.6s ease infinite;
}

@keyframes pulseText {
	0% {
		transform:scale(1);
	}
	
	50% {
		transform:scale(1.02);
	}
	
	100% {
		transform:scale(1);
	}
}

/* ALARM */

.alarmClckInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	padding-right: 12px;
}

.alarmInner h2 {
	width: 100%;
	margin-top: 30px;
}

.alarmInputWrap {
    margin-bottom: 20px;
}

.alarm-time {
    padding: 5px;
    font-size: 1rem;
    margin-top: 10px;
}

.set-alarm-btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
	margin-top:20px;
}

.alarmStatus {
    margin-top: 20px;
}

.alarmStatus p {
    font-size: 1.1rem;
    color: #333;
}

.alarmInputWrap input {
	font-size: 32px;
 	font-family: 'Rubik Mono One', sans-serif;
 	display: block;
 	margin-top: 45px;
 	width: 253px;
 	text-align: center;
 	height: 62px;
 	background: #fdf8f4;
 	border-top: 1px solid #eeedec;
 	border-left: .5px solid #e3e3e3;
 	border-right: 1px solid #eeedec;
 	border-bottom: .5px solid #ddd;
 	box-shadow: 6px -4px #ebeff2;
	transition:all .2s ease;
	color: #4e6464;
}

.alarmInputWrap input:focus-visible {
	transform:scale(1.06);
}

.alarmInputWrap label {
	text-align: center;
	width: 100%;
	display: block;
	margin-top: 10px;
	font-size: 15px;
}

.cancel-alarm-btn,
.stop-alarm-btn {
    background-color: #df878f;
	color: white;
	padding: 9px 20px;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	margin-top: 13px;
}

.cancel-alarm-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.stop-alarm-btn {
	display:none;
}

.stop-alarm-btn.reveal {
	display:block;
}

.alarmDurationWrap {
	display: flex;
	align-items: center;
	transform: translateX(13px);
}

.alarmDurationWrap p {
	display: inline-block;
	font-size: 13px;
	width: 100px;
	box-sizing: border-box;
}

.clockSetWrap .alarmDurationWrap {
	width: calc(100% - 130px);
  	margin-left: 121px;
}

.clockSetWrap .alarmDurationWrap p {
	width: calc(100% - 60px);
	font-size: 12.5px;
}

.textLeft {
	text-align: right;
	padding-right: 10px;
}

.textRight {
	width: 135px !important;
	padding-left: 10px;
	font-size: 12px !important;
}

.clockSetWrap .textRight {
	width: calc(100% - 60px);
}

.toggleWrap {
	width: 74px;
	height: 36px;
}

.clockSetWrap .toggleWrap {
	width: 108px;
  	height: 27px;
}

#alarmToggle,
#helperToggle,
#clockStyleToggle,
#hrFormatToggle {
	border-radius: 3px;
	border: 1px solid #e8e4e4;
	height: 100%;
	font-size: 0;
	box-sizing: border-box;
	opacity: .9;
}

.boxOne,
.boxTwo {
	display: inline-block;
	width: 50%;
	height: calc(100% - .5px);
	background-color: #f2edea;
}

.boxTwo {
	background-color: #ffffff;
	background: repeating-linear-gradient(-45deg, rgb(79 79 79 / 9%), rgb(79 79 79 / 26%) .5px, #ffffff 1px, #ffffff 6.5px);
}

.alarmToggleBox,
.helperToggleBox,
.clockStyleToggle,
.hrFormatToggle {
	position: absolute !important;
	width: 36px;
	height: calc(100% - 1px);
	background: #a9b2ce;
	right: calc(100% - 36px);
	top: 0.5px;
	transition: all .2s ease;
	box-sizing: border-box;
	border: .6px solid #eaeaea;
}

.clockStyleToggle,
.hrFormatToggle {
	width: 26px;
	right: calc(100% - 27px);
}

.slideToggle {
	right:1px;
}

.projectBox .dropdown-item,
.rateBox .dropdown-item,
.clientBox .dropdown-item {
	cursor:pointer;
}

.recordInfo .dropdown-menu {
    display: none;
    position: absolute !important;
	background-color: #f3f6f9;
	border: 1px solid #ccc;
	padding: 5px 12px 7px;
	font-size:10px;
    z-index: 1000;
}

.recordInfo .dropdown-menu.showDrop {
    display: block;
}

.recordInfo .selected {
	white-space: nowrap;
	overflow: hidden;
}

.projectBox .dropdown-item {
	width: 275px;
	padding: 3px 7px;
}

.projectDropdown .remove-project {
	margin: 0;
	line-height: 8px;
	padding: 0 1.1px 3px 2.4px;
	border: 0.5px solid #bf7575;
	transform: scale(0.85) translateY(-1px);
	box-shadow: 1px 1px #9b9fa2, -1.5px -1.5px #dfd8d4;
	color: #d23b3b;
	margin-left: -3px;
}

.recordInfo #projectDropdownMenu {
	padding:0 !important;
	top: 29px;
  	left: -3px;
}

.projectDropdownMenu .dropdown-item:after {
	content: '+ ADD';
  	color: #046ca6;
  	opacity: 0;
  	transition: all .3s ease;
  	position: absolute;
  	right: 0px;
  	background: #fff;
  	padding: 1px 6px 2px 7px;
  	top: 3px;
}

.projectDropdownMenu .dropdown-item:hover {
	background:#fff;
}

.projectDropdownMenu .dropdown-item:hover:after {
	opacity:1;
}

.projectDropdownMenu .dropdown-item.selected:after {
	content: '- Remove';
  	float: right;
  	color: #d22727;
}

#projectDropdown p {
	max-width: calc(100% - 6px);
	overflow:clip;
}

#projectDropdown p span {
	white-space: nowrap;
}

#projectDropdown .project-selected .remove-project:first-of-type {
	position: absolute !important;
	outline: 2px solid #f7f7f6;
	top: 7px;
	right: -2px;
	background: #f7f7f6;
}

.openProItem:after {
	display: none;
}

#rateDropdown .selected {
	font-size: 11px;
}

.rateBox .dropdown-menu {
	margin-left: -110px;
}

.rateBox .dropdown-item {
	width: 225px;
	text-align: right;
}

.clientBox .dropdown-menu {
	width: calc(100% - 30px);
}

.clientBox i {
	color: #246e75;
	line-height: 24px;
	margin: 0 3px 0 0;
}
.row {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.projectNote {
    width: 100%;
    padding: 10px;
    height: 100px;
}

.tagText {
	display: inline-block;
	margin-left: 6px;
	color: #457397;
	font-weight: 800;
	cursor:pointer;
}

.client-logo-img {
    width: 24px;
    height: 24px;
    border-radius: 50%; /* Optional: make the logo circular */
    margin-right: 8px;
    vertical-align: middle;
}

#existing-clients .client-logo-img {
	margin-right: 3px;
}

#existing-clients .client-name {
	width:89.5px;
}

.logoError {
	color: #e88f8f;
	display: block;
	height: 14px;
	font-size: 10px;
	background: #fff;
	padding: 3px 10px;
	border: 2px solid #e88f8f;
	width: 200px;
	margin-left: calc(50% - 112px);
}

.uploadClientLogo,
.receiptImgUpload,
.travelImgUpload {
	margin: 0px 2px;
	letter-spacing: 1px;
	border: 1px solid #eceaea;
	height: 35px;
	width: 157px;
	display: inline-block;
	font-size: 12px;
	background: #fff;
	box-sizing: border-box;
	vertical-align: bottom;
	cursor:pointer;
}

.uploadClientLogo p,
.receiptImgUpload p,
.travelImgUpload p {
	margin: 0;
	line-height: 31px;
	padding: 0 7px;
	color: #888;
}

.hasImgUpload {
	font-size: 11px;
	background: #94a6a6;
	color: #fff !important;
}

.waitingUpload {
	display:block;
}
.waitingUpload.hasFile {
	display:none;
}

.hasImgUpload {
	display:none;
}
.hasImgUpload.hasFile {
	display:block;
}

.noticeMenu {
	position: absolute !important;
	top: calc(180px + 7%);
	left: 0;
	font-size: 26px;
	text-align: center;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.timeRecordSpace,
.alarmSpace,
.messageSpace,
.toDoSpace,
.timerSpace,
.sysMessageSpace {
	display: flex;
	pointer-events:none;
	opacity:0;
	overflow: hidden;
  	max-width: 42px;
	max-height: 0px;
	cursor:pointer;
	transform-origin:center left;
	align-items: center;
	transition: all .33s ease, pointer-events 0s linear, opacity .4s ease;
}

.timeRecordSpace.hasAlert,
.alarmSpace.hasAlert,
.messageSpace.hasAlert,
.toDoSpace.hasAlert,
.timerSpace.hasAlert,
.sysMessageSpace.hasAlert {
	animation: makeNoticeVisible .4s ease forwards .2s;
}
@keyframes makeNoticeVisible {
	0% {
		pointer-events: none;
		opacity:0;
		max-height: 0px;
	}
	1% {
		pointer-events:all;
		opacity:0;
		max-height: 100px;
	}
	100% {
		pointer-events:all;
		opacity:1;
		max-height: 100px;
	}
}

.timeRecordSpace:hover,
.alarmSpace:hover,
.messageSpace:hover,
.toDoSpace:hover,
.timerSpace:hover,
.sysMessageSpace:hover,
.timeRecordSpace:active,
.alarmSpace:active,
.messageSpace:active,
.toDoSpace:active,
.timerSpace:active,
.sysMessageSpace:active,
.timeRecordSpace:focus,
.alarmSpace:focus,
.messageSpace:focus,
.toDoSpace:focus,
.timerSpace:focus,
.sysMessageSpace:focus {
	max-width:500px;
	transform:scale(1.07);
}

.sysMessageSpace {
	margin-bottom:0 !important;
}

.timeRecordSpace i {
	font-size:26px;
	color: #7094c1;
	text-shadow: 4px -1px #fffbf8;
	line-height:0;
}

.alarmSpace i {
	font-size:29px;
	color: #89c197;
	text-shadow: 4px -1px #fffbf8;
	line-height:0;
}

.messageSpace i {
	font-size: 24px;
	color: #ea9847;
	text-shadow: 4px -1px #fffbf8;
	line-height:0;
}

.toDoSpace i {
	font-size: 29px;
  	transform: translateX(1px);
	color: #866786;
	text-shadow: 4px -1px #fffbf8;	
	line-height:0;
}

.timerSpace i {
	font-size: 31px;
	color: #91c4d9;
	text-shadow: 4px -1px #fffbf8;
	line-height:0;
}

.sysMessageSpace i {
	font-size: 25px;
	color: #cc636c;
	text-shadow: 4px -1px #fffbf8;
	line-height:0;
}

.noticeMenu .icon {
	padding: 5px 10px 6px 6px;
	background: #eceeeca1;
}

.noticeMenu .icon,
.noticeSpace {
	display:inline-block;
}

.noticeSpace {
	font-size: 12px;
	text-align: left;
	height: 31px;
	background: #eceeeca1;
	padding: 5px 12px 5px 10px;
	box-sizing: border-box;
	line-height: 20px;	
}

.noticeSpace p {
	margin:0;
	white-space: nowrap;
}

.noticeMenu .setText {
	margin-right:4px;
}

#warning {
	position: absolute !important;
    width: 500px;
    height: 180px;
    background: #fff;
    margin: 0 auto;
    display: block;
    box-shadow: 6px -3px #b7cec3, -12px -12px #f7eae0b8;
    padding: 20px;
    box-sizing: border-box;
    max-width: 50vw;
    left: 50%;
    transform: translateX(-50%) translateY(100vh) scale(0.5);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

#warning.showWarn {
    animation: popUpWarn 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}


#warning.removeWarn {
    animation: popDownWarn 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes popUpWarn {
    0% {
        transform: translateX(-50%) translateY(100vh) scale(0.1); /* Start from below the screen */
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) translateY(0) scale(1.1); /* Move upwards and overshoot slightly with scaling */
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(0) scale(1); /* Final position, centered, full size */
        opacity: 1;
    }
}

@keyframes popDownWarn {
	0% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
	50% {
        transform: translateX(-50%) translateY(0) scale(1.1); 
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(100vh) scale(0.1);
        opacity: 0;
    }
}

.warnButtonWrap {
	width:100%;
	text-align: center;
	margin-top:30px;
}

.warnButton {
	display: inline-block;
	font-size: 13px;
	padding: 9px 13px;
	cursor:pointer;
}

#stopStart {
	background: #92c4bf;
	color: #fff;
	font-weight: 500;
}

#editStop {
	background: #e1d09c;
	margin: 0 8px;
}

.cancelWarn {
	background: #df9999;
}

#warnStepTwo {
	position: absolute !important;
	left: 100%;
	right: 0;
	top: 0;
	bottom: 0;
	transition: all .3s ease;
	overflow: hidden;
}
#warnStepTwo.openStep {
	left: 0%;
}

.stepTwoInner {
	background: #faf9f7;
	padding: 10px 20px;
	box-sizing: border-box;
	position: absolute !important;
	width: 500px;
	max-width: 50vw;
}

.warnP {
	text-align:center;;
}

#showWarningDot {
	font-size: 40px;
	font-family: 'Rubik Mono One', sans-serif;
	background: #fff;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	text-align: center;
	box-sizing: border-box;
	padding: 7px;
	position: absolute !important;
	top: 290px;
	left: 20px;
	box-shadow: 3px -3px #5d7595;
	color: #5d7595;
	display:none;
}

.topLine p {
	cursor: pointer;
}

#utilMat,
#utilMiniMat {
	pointer-events: none;
	opacity:0;
	width: 470px;
	height: 150px;
	position: absolute !important;
	left: 50%;
	transform: translate(-50%, 0%);
	top: calc(50% - 120px);
	transition: all .4s ease;
}

#utilMiniMat,
.utilSpace {
	background: #00000040;
	border-radius: 1px;
	box-shadow: -4px -3px #f2ece8;
}

#utilMat {
	width: calc(100% - 330px);
  	height: 310px;
	top: calc(50% - 180px);
}

#utilMiniMat {
	height: auto;
	background: #000000ab;
	opacity:1;
	box-shadow: -4px 4px #cc96969c;
	top: 0;
	transform: translate(-50%, -100%);
	transition:all .4s ease;
	border-radius:10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.utilSpace {
	height: 260px;
	resize: both;
  	overflow: scroll;
}

.openHoursUtil {
	height: 100%;
	background: none;
  	box-shadow: none;
	overflow:clip;
}

body.loccitane #utilMiniMat, 
body.loccitane .utilSpace {
  background: #ffffffd6;
}

#utilMat.shrinkUtil,
.utilSpace.shrinkUtil {
	height: auto;
	top: calc(50% - 120px);
	width:850px;
	overflow: visible;
}

#utilMat.expenseUtil,
.utilSpace.expenseUtil {
	height: auto;
	top: calc(50% - 120px);
	width:710px;
	overflow: visible;
}

#utilMat.openUtil,
#utilMiniMat.openUtil {
	pointer-events: all;
	opacity: 1;
  	transform: translate(-50%, -10px);
}

#moveMat {
	font-size: 24px;
	font-family: 'Rubik Mono One', sans-serif;
	font-weight: 800;
	color: #aec3d9;
	letter-spacing: 2px;
	margin: 0px 0px 6px;
	opacity:.43;
	cursor:pointer;
}

#moveMat:hover {
	opacity:1;
}


.hoursScreen {
	width: calc(100% - 100px) !important;
  	height: calc(100% - 130px) !important;
  	top: 46px !important;
}

.hoursScreen #moveMat {
	position: absolute !important;
  	left: 39px;
  	bottom: -33px;
  	font-size: 22px;
  	opacity: .6;
	z-index:99;
}

#closerH {
	font-family: 'Rubik Mono One', sans-serif;
	font-weight: 800;
	font-size: 33px;
	text-align: right;
	color: #d2b1b1;
	cursor: pointer;
	text-shadow: 6px -3px #fff;
	position: absolute !important;
	right: 0;
	top: -6px;
}

.hoursScreen #closerH { 
	right: 10px;
  	top: 102px;
	font-size: 28px;
	z-index:99;
}

#closerH span {
	margin-right: 20px;
}

.timeRecordUtilDiv,
.alarmUtilDiv,
.messageUtilDiv,
.toDoUtilDiv,
.timerUtilDiv,
.sysMessUtilDiv {
	display:none;
	padding: 15px 17px 10px;
}

.hoursTrackerDiv,
.addHoursDiv,
.addReceiptDiv,
.addTravelDiv {
	display:none;
}

.timeRecordUtilDiv.utilShow,
.alarmUtilDiv.utilShow,
.messageUtilDiv.utilShow,
.toDoUtilDiv.utilShow,
.timerUtilDiv.utilShow,
.sysMessUtilDiv.utilShow,
.hoursTrackerDiv.utilShow,
.addHoursDiv.utilShow,
.addReceiptDiv.utilShow,
.addTravelDiv.utilShow {
	display:block;
}

.timeRecordUtilDiv p,
.alarmUtilDiv p,
.messageUtilDiv p,
.toDoUtilDiv p,
.timerUtilDiv p,
.sysMessUtilDiv p { 
	margin:3px 0;
	color:#fff;
}

.closeMiniMat {
	position: absolute;
	cursor:pointer;
	bottom: 0;
	right: 0;
	margin: 0;
	background: #c3dfb9;
	z-index: 99999999;
	padding: 3px 9px;
	border-bottom-right-radius: 10px;
}

.miniTop,
.miniClient {
	display:inline-block;
}

.miniStarted,
.miniRate,
.miniProject {
	font-size:13px;
}

#queryFormDiv .clientDropdownMenu,
#queryFormDiv .rateDropdownMenu,
#queryFormDiv .projectDropdownMenu,
#newTimeRecordDiv .clientDropdownMenu,
#newTimeRecordDiv .rateDropdownMenu,
#newTimeRecordDiv .projectDropdownMenu,
#newTravelRecordDiv .clientDropdownMenu,
#newTravelRecordDiv .rateDropdownMenu,
#newTravelRecordDiv .projectDropdownMenu,
#newExpenseRecordDiv .clientDropdownMenu,
#newExpenseRecordDiv .rateDropdownMenu,
#newExpenseRecordDiv .projectDropdownMenu, 
#toDoForm .clientDropdownMenu,
#toDoForm .rateDropdownMenu,
#toDoForm .projectDropdownMenu,
.clientDropdownMenu,
.rateDropdownMenu,
.projectDropdownMenu {
	position: absolute !important;
	display: none;
}

#queryFormDiv .clientDropdownMenu.showDrop,
#queryFormDiv .rateDropdownMenu.showDrop,
#queryFormDiv .projectDropdownMenu.showDrop,
#newTimeRecordDiv .clientDropdownMenu.showDrop,
#newTimeRecordDiv .rateDropdownMenu.showDrop,
#newTimeRecordDiv .projectDropdownMenu.showDrop,
#newTravelRecordDiv .clientDropdownMenu.showDrop,
#newTravelRecordDiv .rateDropdownMenu.showDrop,
#newTravelRecordDiv .projectDropdownMenu.showDrop,
#newExpenseRecordDiv .clientDropdownMenu.showDrop,
#newExpenseRecordDiv .rateDropdownMenu.showDrop,
#newExpenseRecordDiv .projectDropdownMenu.showDrop,
#toDoForm .clientDropdownMenu.showDrop,
#toDoForm .rateDropdownMenu.showDrop,
#toDoForm .projectDropdownMenu.showDrop,
.clientDropdownMenu.showDrop,
.rateDropdownMenu.showDrop,
.projectDropdownMenu.showDrop {
	display: block;
}

#newTimeRecordDiv .clientDropdown,
#newTimeRecordDiv .rateDropdown,
#newTimeRecordDiv .projectDropdown,
#newTravelRecordDiv .clientDropdown,
#newTravelRecordDiv .rateDropdown,
#newTravelRecordDiv .projectDropdown,
#newExpenseRecordDiv .clientDropdown,
#newExpenseRecordDiv .rateDropdown,
#newExpenseRecordDiv .projectDropdown,
#toDoForm .clientDropdown,
#toDoForm .rateDropdown,
#toDoForm .projectDropdown {
	cursor: pointer;
	width: 193px;
	display: inline-block;
	padding: 0px 14px;
	box-sizing: border-box;
	font-size: 13px;
}

#newTimeRecordDiv .dropdownMenu,
#newTravelRecordDiv .dropdownMenu,
#newExpenseRecordDiv .dropdownMenu,
#toDoForm .dropdownMenu,
#toDoForm .dropdownMenu,
#toDoForm .dropdownMenu {
	padding: 0;
}

#newTimeRecordDiv .selected,
#newTravelRecordDiv .selected,
#newExpenseRecordDiv .selected,
#toDoForm .selected,
#toDoForm .selected,
#toDoForm .selected {
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	margin: 5px 0px;
}

#newTimeRecordDiv .dropdown-item,
#newTravelRecordDiv .dropdown-item,
#newExpenseRecordDiv .dropdown-item {
	padding: 5px 10px;
}

#newTimeRecordDiv .dropdown-item:hover,
#newTravelRecordDiv .dropdown-item:hover,
#newExpenseRecordDiv .dropdown-item:hover {
 	background-color: #fff;
}

.timesNewRecord {
	width: 220px;
	display: inline-block;
	vertical-align: top;
}

.selectStart,
.selectStop {
	font-size: 13px;
	background: #e8e28e;
	width: 95px;
	padding: 4px 5px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transform-origin: bottom left;
	transition: all .2s ease;
}

.selectStop {
	transform-origin: bottom right;
}

.selectStart.clicked,
.selectStop.clicked {
	background: #c3dfb9;
  	transform: scale(1.07);
  	
}

.selectStartOpen,
.selectStopOpen {
	background: #d6e8d0;
	position: absolute !important;
	display:none;
	font-size: 13px;
	padding-top: 7px;
	padding-bottom: 6px;
}

.selectStartOpen label,
.selectStopOpen label {
	padding: 0 5px;
}

.selectStopOpen {
	text-align: right;
}

.selectStartOpen.showDrop,
.selectStopOpen.showDrop {
	display:block;
}

#newTimeRecordDiv .note-input {
	width: calc(100% - 390px);
	height: 26px;
	margin: 0 0 17px 0;
}

#newTimeRecordDiv .note-input:focus,
#newTimeRecordDiv .note-input:focus-visible {
	outline:none;
}

.utilTitle {
	padding: 17px 12px 5px;
	margin: 0;
}

#saveNewTimeRecordBtn {
	margin: 13px 15px 20px 20px;
	vertical-align: bottom;
}

.receiptTop,
.receiptBottom {
	text-align: center;
}

.receiptBottom {
	z-index: 0 !important;
}

.expense-unit-dropdown {
	display: inline-block;
	width: 40px;
 	font-size: 14px;
}

.expense-unit-selected {
	padding:6px 0;
}

.expense-unit-dropdown .dropdown-item {
	padding: 6px 0px;
	border-bottom: .2px solid #d2d2d2;
}

.expense-unit-options {
	position: absolute !important;
	z-index:99999999 !important;
}

.expense-unit-options.showOptions {
	display:block;
}

.expense-amount {
	width: 100px;
	height: 33px;
	border: 0;
	background: #e9eef0;
	text-align: right;
	font-family: 'Roboto Mono', monospace;
	font-size: 20px;
	color: #6f6262;
	padding: 3px 8px;
	box-sizing: border-box;
	vertical-align: sub;
}

.expenseDate {
	margin-left:15px;
}

.expenseAmount {
	margin:0 30px 0 20px;	
}

.expenseNote {
	width: 280px;
	margin: 7px 30px 20px 15px;
}

.expenseNote:focus,
.expenseNote:focus-visible {
	outline:none;
}

.receiptImgUpload {
	vertical-align: top;
 	margin-top: 9px;
	width: 126px;
}

#newExpenseRecordDiv .clientDropdown,
#newExpenseRecordDiv .projectDropdown {
	width:110px;
}

/* TO DO LIST */

.toDoContent {
	width: calc(100% - 10px);
	height: 43px;
	padding: 2px 12px;
	line-height: 20px;
	box-sizing: border-box;
	overflow-y: scroll;
	margin-bottom: 10px;
	font-family: 'Roboto Mono', monospace;
  	font-size: 12px;
}

#toDoForm .hoursDropWrap {
	width: 133px;
	background: #fff;
	height: 35px;
	padding-top: 4px;
	text-align: center;
	font-size: 12px;
}

#toDoForm .travelDateWrap {
	z-index: 99999 !important
}

#toDoForm .selectStartOpen {
	right: -7px;
}

.toDoDD {
	width: calc(33% - 8px);
	display: inline-block;
	font-size: 12px;
	margin-top: 7px;
	text-align: center;
}

#toDoForm .reminderNumber,
#toDoForm .reminderOffset {
	height: 28px;
	width: 54px;
	font-size: 21px;
	color: #a49696;
	font-family: 'Roboto Mono', monospace;
	margin-top: 8px;
 	border: 1px solid #dbcccc;
}

#toDoForm  .reminderUnit {
	height: 31px;
	vertical-align: top;
	vertical-align: top;
	border-radius: 1px;
	border: 0;
	background: #688282bd;
	color: #fff;
	font-size: 14px;
	font-family: 'Roboto Mono', monospace;
	font-weight: 800;
	margin-top: 9px;
}

.daySpan {
	display: none;
}

.new-reminder-btn {
	position: absolute !important;
	right:0;
	margin-top:13px;
}

.save-toDo-btn p {
	margin:0;
}

.remindSpan {
	font-size: 13px;
	border-bottom: 1px solid;
	padding-bottom: 2px;
	transform: translateY(-3px);
	display: inline-block;
}

#existing-toDos {
	height: 220px;
	overflow-y: scroll;
}

/* MESSAGING */
.messagesInner {
    display: flex;
    flex-direction: row;
}

.messagesInner {
	height: calc(100% - 70px);
}

.chatButtonWrap {
	position: absolute !important;
	bottom: 0;
	width: 100%;
}

.contactButton {
	display: inline-block;
	width: 140px;
	background: #564c60e5;
	color: #fff;
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	height: 32px;
	line-height: 31px;
	margin-left: 110px;
	transform: translateY(-4px);
	cursor:pointer;
}

.contactButton p {
	margin: 0;
}

.newConvo {
	display: inline-block;
	width: 56px;
	height: 50px;
	background: #fff;
	border-radius: 50%;
	text-align: center;
	font-size: 30px;
	line-height: 53px;
	margin: 0;
	color: #665d6f;
	cursor:pointer;
}

.newConvo p {
	font-family: 'Rubik Mono One', sans-serif;
	font-weight:800;
	text-align: center;
	font-size: 30px;
	line-height: 53px;
	color: #665d6f;
	margin: 0;
}

.newConvo p:after {
	content: 'New message';
	font-size: 13px;
	position: absolute;
	line-height: 1;
	text-align: left;
	margin-left: 14px;
	background: #fff;
	padding: 7px 9px;
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
	border-radius: 6px;
	margin-top: 7px;
}

.conversations, 
.contactList {
    flex: 1;
    padding: 20px;
}

.contactList {
	background: #e7eaee;
	height: 100%;
	position: absolute !important;
	width: 100%;
	padding:0;
	bottom:0;
	max-height:0%;
	box-sizing: border-box;
	over-flow:hidden;
	transition: all .3s ease;
}

.contactList.reveal {
	max-height: 1000px;
	padding: 10px;
}

.contactsWrap,
.invitesWrap {
	position: absolute !important;
	background: #e7eaee;
	width: 100%;
	height: calc(100% - 70px);
	z-index: 9999 !important;
	bottom: 70px;
	left:0;
	transition:all .5s ease;
	overflow: hidden;
}

.invitesWrap {
	left:-500px;
	z-index:9999999 !important;
}

.invitesWrap.openInvites {
	left:0;
}

.inviteUserContainer {
	padding: 20px;
 	background-color: #e7eaee;
 	margin: 0 auto;
 	height: calc(100% - 70px);
}

.conversation-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s;
}

.conversation-item:hover {
    background-color: #f0f0f0;
}

.convo-title {
    font-weight: bold;
}

.convo-last-message {
    font-size: 0.9em;
    color: #888;
}

.message-item {
    margin-bottom: 15px;
}

.message-timestamp {
    font-size: 0.8em;
    color: #999;
}

.chatButtonWrap {
    display: flex;
	justify-content: space-around;
	padding: 10px;
	align-items: baseline;
	box-sizing: border-box;
	gap: 101px;
}

.inviteUserContainer {
    padding: 20px;
	background-color: #e7eaee;
	margin: 0 auto;
	height: calc(100% - 70px);
}

.inviteForm {
    margin: 30px 0px;
	box-sizing: border-box;
	width: calc(100% - 20px);
	display: block;
	position: relative !important;
}

.inviteForm label {
	font-size:13px;
	display: block;
	margin-left:5px;
}

.inviteForm input {
	padding: 8px;
	margin: 21px 7px 20px 0px;
	border-radius: 1px;
	border: 0;
	height: 50px;
	font-family: 'Roboto Mono', monospace;
	font-size: 13px;
	color: #532929;
}

.inviteForm button {
	padding: 10px 15px;
	background: #ae8ba3d4;
	color: white;
	border: none;
	border-radius: 0;
	cursor: pointer;
	height: 31px;
	transform: translateY(1px);
	line-height: 9px;
	float: right;
}

#inviteEmail {
    width: 100%;
	padding: 8px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.confirmationBox, .messageBox {
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 4px;
    margin-top: 10px;
}

#sendInviteButton, #cancelInviteButton {
    padding: 8px 12px;
    margin-right: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#sendInviteButton {
    background-color: #007bff;
    color: white;
}

#cancelInviteButton {
    background-color: #dc3545;
    color: white;
}

.chatInviteP {
	margin: 60px 5px;
}

.inviteBox {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.inviteBox p {
    margin: 0 0 10px 0;
}

.inviteBox button {
    margin-right: 10px;
    padding: 5px 10px;
    background-color: #008cba;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.inviteBox button.acceptInvite {
    background-color: #28a745;
}

.inviteBox button.blockInvite {
    background-color: #dc3545;
}

.inviteBox button:hover {
    opacity: 0.8;
}

.inviteBox button.ignoreInvite {
    background-color: #6c757d;
}

.conMessageBox {
	position: absolute !important;
 	bottom: 40px;
 	width: calc(100% - 80px);
 	left: 32px;
 	background: #cfd6d9;
 	border: 1px solid #faf8f5;
 	text-align: center;
 	font-size: 13px;
 	z-index: 9999999;
}

#conMessageText {
	margin:18px 0;
}

.contactsWrap h2 {
	font-size:19px;
}

.conInvButton {
	position: absolute !important;
	bottom: 10px;
	width: 140px;
	font-size: 15px;
	background: #bb8181;
	padding: 9px;
	cursor:pointer;
	text-align: center;
	color: #fff;
	right: 15px;
}

.NCtitle {
	font-size: 17px !important;
	position: absolute !important;
	top: 40px;
	left: 5px;
}

.NCp {
	position: absolute;
	right: 22px;
	font-size: 14px;
	bottom: 121px;
}

#consClosed {
	display:block;
}
#consOpen {
	display:none;
}

#consClosed.swichCons {
	display:none;
}
#consOpen.swichCons {
	display:block;
}

.moveInvite {
	opacity:1;
	transition:all .24s ease;
}

.moveInvite.inFocus {
	opacity:0;
}

.moveContacts {
	opacity:0;
	transition: all .3s ease;
}

.moveContacts.inFocus {
	opacity:1;
}

/* *************** SETTINGS */

.themeOption {
	display:inline-block;
	width: calc(50% - 6px);
}

.themePrev {
	width:100%;
	padding-top:43%;
	background:#ccc;
	background-image: url('img/bg1.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.themeOption p {
	font-size:14px;
}

.themeRow #mountains .themePrev {
	background-image: url('img/bg1.jpg');
}

.themeRow #turner .themePrev {
	background-image: url('img/turner.jpg');
}

.themeRow #oil .themePrev {
	background-image: url('img/oil.jpg');
}

.themeRow #clichy .themePrev {
	background-image: url('img/clichy.jpg');
}

.themeRow #loccitane .themePrev {
	background-image: url('img/loccitan.jpg');
}

.themeRow #studio .themePrev {
	background-image: url('img/studio.jpg');
}

.themeRow #athos .themePrev {
	background-image: url('img/athos.jpg');
}

.themeRow #jazz .themePrev {
	background-image: url('img/jazz.jpg');
}

.themeRow #light .themePrev {
	background-image: none;
	background:#e2e2e2;
}

.themeRow #dark .themePrev {
	background-image: none;
	background:#596567;
}

.themeRow #cubes .themePrev {
	background-image: url('img/cubes.jpg');
}

.themeRow #zigzag .themePrev {
	background-image: url('img/zigzag.jpg');
}

.themeRow #folds .themePrev {
	background-image: url('img/folds.jpg');
}

.themeRow #towers .themePrev {
	background-image: url('img/towers.jpg');
}

/* ************** HOURS TRACKER */

#timeRecordsTable {
	position: absolute !important;
	display: block;
	padding: 30px 10px 10px;
	background: #ffffffed;
	box-shadow: -2px -2px #e1914b4f;
	width: 100%;
	margin: 133px 0 0 3px;
	max-height: calc(100vh - 262px);
	overflow-y: scroll;
	border-bottom: 2px solid #c8c8c8;
}

.searchWrap {
	position: absolute !important;
  	top: 139px;
  	left: 15px;
}

#timeRecordsTable table {
    border-collapse: collapse;
    width: 100%; 
}

#timeRecordsTable td {
    padding: 0;
    margin: 0;
    height: 30px; 
	max-width: 170px;
	font-size: 13px;
}

#timeRecordsTable input,
#timeRecordsTable textarea {
	width:100px;
}

#timeRecordsTable input[type="text"], 
#timeRecordsTable input[type="datetime-local"],
#timeRecordsTable textarea {
    padding: 2px; 
    height: 100%; 
    border: none; 
    width: 100%; 
    box-sizing: border-box;
}

#timeRecordsTable button {
    margin: 0;
    padding: 5px 10px;
    height: 100%;
    width: 100%; 
}


#timeRecordsTable td, 
#timeRecordsTable th {
    padding: 0;
    text-align: center;
    vertical-align: middle;
	border: .5px solid #959595;
}

#timeRecordsTable thead {
	width: 100%;
  	display: inline-table;
}

#timeRecordsTable tbody tr {
	width: 100%;
  	display: inline-table;
}

#timeRecordsTable tbody tr:focus-within {
	max-width:calc(100% - 10px);
	overflow: hidden;
	white-space: nowrap;
}

#timeRecordsTable thead th {
	padding:6px 0;
	width: 7.5%;
}

#timeRecordsTable input,
#timeRecordsTable button,
#timeRecordsTable .dropdownMenu,
#timeRecordsTable .selected,
#timeRecordsTable textarea {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}

/* Styling dropdowns inside the table cells */
#timeRecordsTable .dropdownMenu {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1;
}

#timeRecordsTable .dropdownMenu .dropdown-item {
    padding: 5px;
    cursor: pointer;
}

#timeRecordsTable .rateDropdown.highlight,
#timeRecordsTable .clientDropdown.highlight,
#timeRecordsTable .projectDropdown.highlight {
	position: absolute;
	z-index: 9999;
	width: 100%;
	top: 0;
}

#timeRecordsTable .dropdownMenu .dropdown-item:hover {
    background-color: #f0f0f0;
}

#timeRecordsTable .showDrop {
    display: block !important;
	height: auto !important;
}

/* Selected dropdown item styling */
#timeRecordsTable .selected {
    cursor: pointer;
    background-color: #f7f7f7;
	padding: 4px 13px;
}

/* Remove space between rows */
#timeRecordsTable tr {
    margin: 0;
    padding: 0;
}

/* Ensure uniform size for input fields and buttons */
#timeRecordsTable input[type="text"], 
#timeRecordsTable input[type="datetime-local"], 
#timeRecordsTable textarea,
#timeRecordsTable .note-input, 
#timeRecordsTable .duration, 
#timeRecordsTable button {
    height: 30px;
    padding: 0 7px;
    font-size: 14px;
    box-sizing: border-box;
}

#timeRecordsTable textarea {
	resize:none;
}

#timeRecordsTable button {
    padding: 5px 10px;
    cursor: pointer;
    color: white;
    border: none;
	box-shadow: 0px 0px;
}


/* Hide overflow from the table */
#timeRecordsTable td {
	white-space: nowrap;
  	position: relative;
	white-space: nowrap;
    /* overflow: hidden; */
	/* text-overflow: ellipsis; */
	width: 12%;
 	display: inline-flex;
  	overflow-x: clip;
	transition:all .2s ease;
}

#timeRecordsTable td:focus,
#timeRecordsTable td:focus-within {
	width: auto;
	overflow-x: scroll;
	display: inline-table;
}

#timeRecordsTable .note-input {
	min-width: 100px;
	max-height: 26px;
	padding: 4px 5px;
	transition: all .3s ease;
}

#timeRecordsTable .note-input:focus,
#timeRecordsTable .note-input:focus-visible {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	z-index: 9999999;
	border: 1px solid;
	min-height: 85px;
	outline: 0px;	
}

#timeRecordsTable .endTime-input,
#timeRecordsTable .startTime-input {
	font-family: 'Roboto Mono', monospace;
	font-size: 13px !important;
	max-height: 26px;
}

#timeRecordsTable .project-selected button {
	margin: 0;
	line-height: 8px;
	padding: 0 1.1px 3px 2.4px;
	border: 0.5px solid #bf7575;
	transform: scale(0.85) translateY(-1px);
	box-shadow: 1px 1px #9b9fa2, -1.5px -1.5px #dfd8d4;
	color: #d23b3b;
	margin-left: -3px;
	width: 15px;
  	height: 15px;
  	font-size: 13px;
}

#timeRecordsTable .hoursDropWrap p {
	overflow-x:clip;
}

#timeRecordsTable .projectDropdown p {
	overflow-x:scroll;
}

/* DATA SORTING */

#recordSortWrap {
	position: absolute !important;
	width: calc(100% - 470px);
	margin-left: 249px;
	max-height: 130px;
	overflow: hidden;
	padding: 10px 0 0;
	z-index: 0 !important;
	top: 80px;
	opacity: 1;
	transition: all .3s ease;
}

#recordSortWrap.showing {
	top: 0px;
}

#hiddenSort {
	background: #fff;
  	opacity: 0;
  	padding: 10px;
	transition: all .3s ease;
	display: flex;
	box-shadow: 2px -2px #eee1e3;
	height:130px;
	border-left: 1px solid #c1c1c1;
	border-right: 1px solid #c1c1c1;
	width: calc(100% - 2px);
	box-sizing: border-box;
}

#hiddenSort.showing {
	opacity:1;
}

#isSorting {
	display: none;
}

#notSorting {
	display:block;
}

#isSorting.showing {
	display: block;
}

#notSorting.showing {
	display:none;
}

.sortRaiseTag {
	width: 140px;
	text-align: center;
	overflow: hidden;
	background: #fff;
	padding: 0 10px;
	border-radius: 1px;
  	border: 1px solid #c6c6c6;
  	box-shadow: 2px -1px #eabbc2;
	cursor:pointer;
}

.sortRaiseTag p {
	margin: 7px 0;
}

.dataSorting {
	width: calc(100% - 250px);
	display: flex;
}

.timeSorting {
	width: 240px;
	display: inline-block;
}

#filterClientMenu,
#filterProjectMenu,
#filterRateMenu {
	display:none;
	cursor:pointer;
}

#filterClientMenu.showDrop,
#filterProjectMenu.showDrop,
#filterRateMenu.showDrop {
	display:block;
}

.filterDropdown {
	width: 140px;
	display: inline-block;
	padding: 3px 5px;
  	height: 24px;
	text-align: center;
	background: #fff;
	cursor:pointer;
}

.filterDropdown p {
	margin: 0 !important;
	line-height: 25px;
	font-size: 13px !important;
}

.filterStartBut, 
.filterStopBut {
	font-size: 13px;
	background: #e8e28e;
	width: 95px;
	padding: 4px 5px;
	text-align: center;
	display: inline-block;
	cursor:pointer;
}

.filterStopBut {
	background: #e8e28e;
	margin-left:15px;	
}

.startFilterOpen,
.stopFilterOpen {
	display:none !important;
}

.startFilterOpen.showDrop,
.stopFilterOpen.showDrop {
	display:block !important;
}

.dropdownMenu {
	background: #eef1f0;
	padding: 9px;
	margin-left: -5px;
	overflow-y: scroll;
	font-size: 13px !important;
	text-align: left;
	cursor:pointer;
	
	white-space: nowrap;
  	overflow-x: clip;
 	width: calc(100% - 15px);
}

.dropdownMenu .dropdown-item {
	white-space: nowrap;
  	overflow-x: clip;
}

#hiddenSort .dropdownMenu {
	max-height:26px;
}

#applyFilters {
	position: absolute;
	top: 40px;
	right: 70px;
	opacity:0;
	transition: all .2s ease;
}

#applyFilters.showButton {
	top:0;
	opacity:1;
}

/* CALENDAR */

#eventDetails {
	position: absolute !important;
	background-color: #fff;
	z-index: 999999999 !important;
	display: block !important;
	max-height:0px;
	overflow: hidden;
	transition: max-height .3s ease;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#eventDetails.showEventDet {
	max-height:480px;
	padding: 10px;
	bottom: 10px;
	overflow: scroll;
}

#eventDetails input, #eventDetails textarea {
  width: 100%;
  margin-bottom: 10px;
}

#saveEventBtn, #deleteEventBtn {
  margin-right: 10px;
}

.cornerClose {
	position: absolute !important;
	top:4px;
	right:9px;
	font-size:24px;
	cursor: pointer;
	font-family:'Rubik Mono One', sans-serif;
	font-weight: 800;
	z-index: 99999999;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
}

.calendar-table th, .calendar-table td {
    border: 1px solid #ccc;
    padding: 3px 3px 20px;
    text-align: center;
}

.calendar-day {
    cursor: pointer;
	position: relative;
}

.calendar-day button {
	font-family: 'Rubik Mono One', sans-serif;
	font-weight: 800;
	position: absolute;
	bottom: 0;
	left: 0px;
	padding: 2px 3px;
	box-shadow: none;
	background: #82b9c6;
	line-height: 16px;
	font-size: 15px;
	border-radius: 1px;
	cursor: copy;
}

.calendar-day:hover {
    background-color: #f0f0f0;
}

.calendar-day.selected {
    background-color: #cce5ff;
    border-color: #007bff;
}

.calendar-table tbody td {
	height:60px;
}

.has-event {
    background-color: #f0f8ff; /* Light background to show an event */
    border: 1px solid #00f; /* Optional border */
}

.event-indicator {
    color: red;
    font-weight: bold;
    position: absolute;
    bottom: 2px;
    right: 5px;
}

.day-number {
	position: absolute;
	top: 0;
	right: 0;
	padding-top: 2px;
	font-family: 'Roboto Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	color: #939393;
	width: 100%;
	height: 100%;
	text-align: right;
	padding-right: 4px;
}

.add-event-btn {
	margin: 24px 0 0 0;
	padding: 5px 10px;
}

/* TRAVEL RECORDS */

#newTravelRecordDiv label {
	display: inline-block;
}

#newTravelRecordDiv .custom-dropdown {
	width:50px;
}

.travelTop,
.travelBottom {
	text-align: center;
}

.travelTop {
	z-index: 999 !important;
}

.travelBottom {
	padding-bottom: 23px;
}

.milesShow,
.minShow,
.kmsShow,
.hrsShow {
	display:none;
}

.milesShow.showDrop,
.minShow.showDrop,
.kmsShow.showDrop,
.hrsShow.showDrop {
	display:inline-block;
}

.distDropWrap,
.timeDropWrap {
	display: none;
}

.travel-unit-dropdown,
.travel-cost-unit-dropdown,
.distDropWrap.showDrop,
.timeDropWrap.showDrop {
	display:inline-block;
}

.travel-unit-options,
.travel-dist-unit-options,
.travel-time-unit-options,
.travel-cost-unit-options {
	position: absolute !important;
	display:none;
}

.travel-unit-options.showDrop,
.travel-dist-unit-options.showDrop,
.travel-time-unit-options.showDrop,
.travel-cost-unit-options.showDrop,
.travel-time-unit-dropdown.showDrop,
.travel-dist-unit-dropdown.showDrop {
	display:block;
}

.travelDate {
	margin-right:18px
}

.travel-unit-selected,
.travel-dist-unit-selected,
.travel-cost-unit-selected,
.travel-time-unit-selected {
	padding: 6px 0;
	font-size: 13px;
	text-align: center;
}

.travel-amount {
	width: 70px;
	height: 29px;
	border: 0;
	font-size: 15px;
	font-family: 'Roboto Mono',monospace;
	padding: 0 3px 0 10px;
	box-sizing: border-box;
}

#newTravelRecordDiv .dropdown-item {
	font-size: 13px;
	padding: 9px 0;
	text-align: center;
	border-bottom: 0.3px solid #ccc9c9;
}

.travelNote {
	width: 180px;
	font-size: 12px;
	height: 30px;
	border: 0;
	vertical-align: bottom;
	padding: 7px 10px;
	box-sizing: border-box;
}

.travelNote:focus,
.travelNote:focus-visible {
	outline:none;
}

.travelImgUpload {
	width: 128px;
	height: 31px;
}

.travelImgUpload p {
	line-height: 30px;
}

.travelRate {
	margin-right: 20px;
}

.travelDateWrap {
	display: inline-block;
}

/* INVOICES */

.invoiceDateWrap {
	display:inline-block;
}

#queryFormDiv .selectStart,
#queryFormDiv .selectStop {
	width:92px;
}

#queryFormDiv .custom-dropdown {
	font-size:13px;
	width: 100%;
	white-space: nowrap;
  	overflow-x: clip;
}

#queryFormDiv .dropdown-selected {
	margin:0;
}

#queryFormDiv  .form-group {
	width: calc(50% - 26px);	
	display: inline-block;
}

#queryFormDiv .invRow2 .form-group {
	width: calc(50% - 7px);
}

.invFormH2 {
	font-size: 15px;
  	text-align: right;
}

.h2AddTopping {
	margin-top: 30px;
}

.startInvTime-date,
.startInvTime-date,
.endInvTime-date,
.endInvTime-date {
	margin-bottom:4px;
}

.invRow1 {
	z-index:9999 !important;
}

.invRow2 {
	margin: 9px 0px;
	z-index:999 !important;
}

.invRow3 {
	z-index:99 !important;
}

.invRow2 .rightPads {
	margin-right:1px;
}

.invRow4 {
	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	padding: 1px 7px 0px 2px;
}

.invRow4 label {
	font-size: 12px;
	max-width: 80px;
	display: flex;
	gap: 2px;
	line-height: 1.15;
}

#queryFormDiv .selectStopOpen,
#queryFormDiv .selectStartOpen {
	background: #d6e8d0;
	padding: 9px 4px 10px;
	box-sizing: border-box;
	border: 1px solid #dfe2e5;
	box-shadow: 1px 2px 15px -8px #a89e9e;
}

#queryFormDiv .openProItem {
	display:none;
}

#queryEndDate,
#queryStartDate {
	font-size:12px;
}

#invoice-note {
	width: calc(100% - 4px);
	border: .5px solid #e3dfdf;
	height: 50px;
	box-sizing: border-box;
	padding: 6px 7px;
}

#invoice-note:focus,
#invoice-note:focus-visible {
	outline:none;
}

#invoicesList {
	max-height: 210px;
	overflow-y: scroll;
	background: #7fa2a614;
	box-sizing: border-box;
	padding: 10px 20px;
}

.invoicePre {
	box-sizing: border-box;
	padding:4px 15px;
	background:#e2e2e2;
	color:#3D6480;
	font-size:12px;
	margin: 0 0 8px;
	cursor:pointer;
	transition:all .24s ease;
}

.invoicePre:hover, 
.invoicePre.highlighted {
	background:#A3B5C15E;
}

/* SET HOURS SPACE */

#utilMat.specAdd {
	top: unset;
  	bottom: 140px;
	width: 260px;
	overflow: hidden;
	height: auto;
	padding-top: 32px;
	right: calc(50% - 400px);
	left: unset;
}

#utilMat.specAdd .utilSpace {
	width: 260px;
	top: unset;
}

#utilMat.specAdd #closerH {
  	font-size: 21px;
  	letter-spacing: -1px;
	top: 4px;
}

#utilMat.specAdd #moveMat {
	display: none;
}

#utilMat.specAdd .timesNewRecord {
	position: absolute;
 	top: 0;
  	left: 10px;
}

#utilMat.specAdd #newTimeRecordDiv .clientDropdown {
	margin-top: 40px;
  	z-index: 9999999;
	width: 100%;
}

#utilMat.specAdd #newTimeRecordDiv .rateDropdown {
  	z-index: 99;
	width: 100%;
}

#utilMat.specAdd #newTimeRecordDiv .projectDropdown {
	width: 100%;
}

#utilMat.specAdd .showDrop {
	max-height:120px;
	overflow-y:scroll;
	overflow-x:clip;
	width:calc(100% - 30px);
}

#utilMat.specAdd .note-input {
	width: calc(100% - 30px);
	position: absolute;
	left: 10px;
	resize: none;
	height: 46px;
	overflow-x: clip;
	overflow-y: scroll;
}

#utilMat.specAdd #saveNewTimeRecordBtn {
  margin: 70px 15px 20px 160px;
}

/* Invoice space */
.invoiceDisplay {
	width: 800px;
	background: #fff;
	box-sizing: border-box;
	padding: 40px;
	position: absolute !important;
	top: unset;
	pointer-events: none;
	opacity: 0;
	height: 391px;
	overflow-x: clip;
	overflow-y: scroll;
	z-index: 1;
	box-shadow: 5px -3px 1px #885957;
	transform: scale(.4);
	transform-origin: left bottom;
	transition: all .4s ease;
	bottom: 140px;
	z-index: 999999999999 !important;
	left: calc(100% - 783px);
	right: unset;
}

.invoiceDisplay.showInv {
	pointer-events:all;
	opacity:1;
}

.invoiceDisplay.big {
	width: 800px;
	background: #fff;
	box-sizing: border-box;
	padding: 40px;
	position: absolute !important;
	top: 190px;
	height: 470px;
	margin-left: calc(50%);
	z-index: 1;
	right: unset;
	bottom: unset;
	transform: translateX(-50%);
	z-index: 99999 !important;
	max-width: calc(100vw - 130px);
	left: unset;
}

.invoice-header {
	display: block;
}

.invoice-left,
.invoice-right {
	display: inline-block;
}

.invoice-left {
	width:60%;
}

.invoice-right {
	width:calc(40% - 20px);
}

.billTo {
	display: flex;
  	gap: 10px;
  	align-items: center;
}

.invoicePre .created {
	display: inline-block;
  	width: calc(50% - 65px);
}

.invoicePre .for {
	width: calc(50% + 40px);
  	display: inline-block;
  	vertical-align: top;
	text-align:right;
}

.invoicePre .ref {
	width: calc(50% - 35px);
  	display: inline-block;
  	vertical-align: top;
	margin-top: 0;
}

.invoicePre .from {
	margin-top: 0;
}

.invoicePre .from span {
	display: block;
}

.invDateRange {
	width: calc(50% + 15px);
  	display: inline-block;
	text-align:right;
}

#clientLogoInv {
	max-width:40px;
}

.billTo img {
	width:100%;
}

#invOpenBtn,
#invCloseBtn {
	position: absolute !important;
	display:none;
	left:calc(100vw - 560px);
	width: 100px;
	text-align: center;
	height: 27px;
	background: #c48986;
	color: #fff;
	padding: 2px 0;
	font-size: 14px;
	line-height: 26px;
	transform: rotate(0deg) scale(1);
	transition: all .3s ease;
	transform-origin: top left;
	cursor: pointer;
	bottom: 310px;
}

#invCloseBtn {
	left: calc(100vw - 780px);
	background: #a8a7a7;
	padding: 1px 0;
	line-height: 23px;
	width: 84px;
	height: 24px;
}

#invOpenBtn.showInv,
#invCloseBtn.showInv {
	display:block;
}

#invOpenBtn.switch,
#invCloseBtn.switch {
	left: 0;
  	transform: rotate(-90deg) translate(0, 10px);
}
#invCloseBtn.switch {
	left: 2px;
  	transform: rotate(-90deg) translate(-120px, 10px);
}

#invOpenBtn i,
#invCloseBtn i {
	margin-right:7px;
	font-size:12px;
}

#invOpenBtn .small,
#invCloseBtn .small {
	display:block;
}
#invOpenBtn .large {
	display:none; 	
}

#invOpenBtn.switch .small {
	display:none;
}

#invOpenBtn.switch .large {
	display:block;
}

#invCloseBtn.switch .small {
	display:block;
}

#userLogoInv {
	width: 30%;
  	display: inline-block;
  	vertical-align: top;
}

#userLogoInv img {
	width: 100%;
}

#userInfoInv {
	display: inline-block;
  	width: calc(70% - 20px);
	line-height: 1;
}

/* TUTORIAL */

.helperOn {
	display:block;
}

.helperOff {
	display:none;
}

body.noHelper .helperOn {
	display:none;
}

body.noHelper .helperOff {
	display:block;
}

.helper {
	position: absolute !important;
	right: -16px;
	top: -10px;
	height: 22px;
	width: 22px;
	border: 2px solid #114e66;
	border-radius: 50%;
	text-align: center;
	background: #717171;
	font-family: 'Rubik Mono One', sans-serif;
	color: #fff;
	transform: scale(0.8);
	transition: opacity .8s ease 1s;
	cursor:help;
	pointer-events: none;
	opacity: 0;
}

.helperQ {
	height: 22px;
	width: 22px;
	border: 2px solid #114e66e0;
	border-radius: 50%;
	text-align: center;
	background: #717171cc;
	font-family: 'Roboto Mono', monospace;
	color: #fff;
	display: inline-block;
	font-size: 16px;
}

.showSetLink .helperQ {
	display: none;
}

@keyframes addHelper {
	0% {
		pointer-events: none;
		opacity: 0;
	}
	
	80% {
		pointer-events: none;
		opacity: 0;
	}
	
	81% {
		pointer-events: all;
		opacity: 0;
	}
	
	100% {
		pointer-events: all;
		opacity: 1;
	}
}

.helperAnimate {
	animation: addHelper 1s forwards 0s ease;
}

.helper  p {
	margin: 0;
  	font-family: 'Roboto Mono', monospace;
  	font-weight: 800;
  	font-size: 19px;
  	line-height: 21px;
}

.helperMat {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    pointer-events: none;
}

/* Each individual helper text block inside helperMat */
.helperMat div {
    opacity: 0;
    visibility: hidden;
    position: absolute !important;
    background-color: rgba(59, 61, 64, 0.7);
	color: #fff;
	padding: 7px 11px;
	border-radius: 1px;
	max-width: 300px;
	pointer-events: auto;
	transition: opacity 0.3s ease, visibility 0s 0.3s;
	border: 1px solid #fff;
	box-shadow: 4px -2px #eed1d18a;
}

/* Optional styling for the helper text block */
.helperMat div p {
    margin: 0;
    font-size: 13px;
    line-height: 1.33;
}

/* Helper element visible state */
.helperMat div.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s; /* Transition to visible state */
}

/* Adjust the position of the helper text as needed */
.client-select-helper {
    top: 70px; /* Adjust the position as needed */
    left: 400px; /* Adjust the position as needed */
}

body.noHelper .helper,
body.noHelper .helperMat {
	display:none !important;
}


/* Creatives' Quick Reference (QQR) */
#CQROpen {
	position: absolute !important;
	width: 50px;
	height: 50px;
	left: 30px;
	bottom: 6px;
	cursor: pointer;
	font-size: 40px;
	color: #9fb6b7;
	text-shadow: 2px 2px #fcfcfc;
}

body.jazz #CQROpen {
	color: #b1cfea;
  	text-shadow: 2px 2px #232121;
}

#CQRholder {
	position: absolute !important;
	height: calc(100vh - 50px);
 	top: 100vh;
}

#CQRholder.CQRactive {
	top:50px;
}

#CQRmenu {
	position: absolute !important;
	top: 0;
	left: -500px;
	height:100%;
	width: 333px;
	background: #fffefdf2;
	transition: all .25s ease;
	z-index: 999;
}

#CQRmenu.CQRactive {
	left:0px;
}

.CQRmenuInner {
	width: 100%;
  	height: 100%;
	overflow-x:clip;
}

.CQRtitle {
	position: absolute !important;
	padding-left: 14px;
  	box-sizing: border-box;
}

.CQRtitle h2 {
	font-family: 'Roboto Mono', monospace;
	font-size: 19px;
	padding-right: 30px;
	letter-spacing: 5px;
	font-weight: 250;
	line-height: 1.6;
	margin-top: 8px;
}

#CQRCloseBtn {
	position: absolute !important;
  	right: 30px;
  	bottom: 17px;
  	font-size: 25px;
	cursor: pointer;
}

#CQRCloseBtn i {
	margin-right: 10px;
}

#CQRmenu .menu {
	position: absolute;
	width: calc(100% + 20px);
  	bottom: 70px;
  	right: -20px;
  	transform-origin: 100%;
}

.followTR {
	transform: translateX(-20px);
}

#CQRmenu .menu table {
	width:100%;
	padding: 0 20px;
	text-align: center;
}

#CQRmenu .riseRow {
	max-height:50px;
}

#CQRmenu .menu tr {
	font-weight:600;
	text-transform: lowercase;
	font-size: 15px;
}

#CQRmenu .menu td {
	border-top: 2px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	margin: 0 2px;
	width: calc(100% - 4px);
	cursor: pointer;
	transition: all .3s ease;
}

#CQRmenu .full td {
	background: #fff;
	width: 33%;
}

#CQRmenu .tdHighlight {
    position: absolute;
	z-index: 10;
	background: #fff;
	transform:translateY(500%);
	transition: all 0.3s ease;
	top: 86px;
	width: 33%;
	text-align: center;
	border-top: 1.5px solid;
	border-left: 1px solid;
	border-right: 1px solid;
	left: 16px;
	opacity:0;
	animation: cqrMenuSlide .4s forwards;
}

@keyframes cqrMenuSlide {
	0% {
		opacity:0;
		transform:translateY(500%);
	}
	
	50% {
		opacity:0;
		transform:translateY(500%);
	}
	
	51% {
		opacity:1;
		transform:translateY(500%);
	}
	
	100% {
		opacity:1;
		transform:translateY(0);
	}
}

#CQRmenu .sub {
	right: -36px;
	bottom: 60px;
	transition: all .2s ease;
	opacity:0;
	pointer-events: none;
}

#CQRmenu .SubOp {
	opacity:1;
	pointer-events:all;
}

#CQRmenu .sub table {
	background: #fff;
	padding: 0;
	margin: -1px 21px;
	width: calc(100% - 44px);
	border: 1px solid #000;
}

#CQRmenu .sub tr {
	height:0;
	opacity:0;
}

#CQRmenu .sub td {
	color: #000;
	border: 0;
	font-size: 15px;
	line-height: 1.9;
	font-weight: 400;
	letter-spacing: 1px;
}

#CQRmenu .showSub {
	opacity:0 !important;
	height:0px !important;
}

#CQRmenu .liftSub {
	right:-2px;
}

.exMenu {
	opacity: 0;
	pointer-events: none;
	height:0px;
    position: absolute !important;
	bottom: 140px;
	width: calc(100% - 20px);
	background: #f2f0f0;
	left: 10px;
	padding: 10px;
	box-sizing: border-box;
	border-left: .5px solid #e6e0e0;
	border-top: .5px solid #d9d0d0;
	border-right: .5px solid #fff;
	border-bottom: 1px solid #f9f5f5;
	box-shadow: 2px 2px 9px -7px #00000080;
	overflow:hidden;
	transition: all .3s ease;
}

.exMenuTarget {
    opacity: 1;
	pointer-events: all;
	height: calc(100% - 240px);
	transition: all 0.3s ease-in-out;
}

#CQRelmntMat {
	position: absolute !important;
	height: 290px;
	background: #ffffffde;
	max-width: 0px;
	overflow:hidden;
	padding:0;
	box-sizing: border-box;
	left: 0px;
	top: calc(50% - 85px);
	transition: max-width .3s ease;
	transform: translateY(-50%);
	border: none;
	box-shadow: none;
	overflow-y: scroll;
}

#CQRelmntMat.openCQRmat {
	max-width: calc(100vw - 560px);
	border: 1px solid #f0efef00;
	box-shadow: 2px 2px 4px -3px #0000006b;
	left: 340px;
}

#CQRelmntMat.moreSpace {
	height: 480px;
  	top: calc(50% - 20px);
}

.cqrItemBlock {
	max-width:700px;
}

.exIntroP {
	font-size: 13px;
	letter-spacing: -.5px;
	padding-left: 5px;
}

.cqrItemRow {
	transition: all .25s ease;
	border: 1px solid #e2e2e2a1;
	box-shadow: none;
	line-height: 10px;
	padding: 0 9px;
	cursor:pointer;
	margin-bottom: 6px;
	max-height: calc(0vh + 40px);
  	overflow: hidden;
}

.cqrItemRow h3 {
	margin: 0;
  	padding: 15px 4px;
	font-family: 'Rubik', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .1px;
}

.highlightRow {
	background: #f7f7f7;
	border:1px solid #e2e2e2;
	box-shadow:2px 2px 3px -4px;
	max-height: calc(100vh - 200px);
}

.cqrSubItem {
	font-size: 13px;
	border-bottom: 1px solid #e2e2e2;
	padding-top: 12px;
  	padding-bottom: 14px;
}

.cqrSubItem p {
	margin:0;
}

.insideCQRmat {
	min-width: 660px;
  	padding: 20px;
	box-sizing: border-box;
}

.insideCQRmat > div {
    display: none; 
}

.showMatDiv {
    display: block !important;
}

.colsWrap {
	width:100%;
	display: block;
}

.dictCol {
	display:inline-block;
	width:calc(50% - 5px);
	vertical-align: top;
}

.finalTable {
	width: calc(100% - 40px);
  	display: block;
	font-size: 0;
}

.finalTable .colLeft {
	vertical-align: top;
	display: inline-block;
	width: calc(33% - 6px);
	font-size: 14px;
	font-family: 'Rubik', sans-serif;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 0 1px;
}

.finalTable .colLeft h4 {
	font-family: 'Rubik', sans-serif;
	border-bottom: 1px solid #ccc9c9;
	margin-bottom: -3px;
	padding: 0px 7px 9px;
	cursor:pointer;
}

.finalTable .colLeft h4:last-child {
	border-bottom: none;
}

.finalTable .colRight {
	vertical-align: top;
	display:inline-block;
	width:calc(67% - 10px);
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-radius: 3px;
	font-size: 12px;
	padding: 10px;
  	box-sizing: border-box;
	min-height:50px;
}

.finalTable img {
	width:100%;
}

.finalTable .colRight > div {
    display: none;
}

.finalTable .colRight > div.showMatDiv {
    display: block;
}

.cqrItemBlock h3 {
	font-size:16px;
}

.cqr-fabCamera {
	max-width: none !important;
	width: calc(100vw - 610px);
}

.cqr-fabCamera h4 {
	font-family: 'Rubik', sans-serid;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 0;
	font-size: 15px;
	color: #5b9cb0;
}

#fabImageGallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 20px;
	align-items: start;
}

.fabImageCard {
	break-inside: avoid;
	background: #f2f2f2;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-self: start;
	border:.5px solid #615B74;
	transition: all 0.3s ease;
}

.fabImageCard.expanded {
	grid-column: span 3;
	z-index: 10;
	max-width: 80%;
	margin-left: 10%;
	border: 1px solid #d2a98d;
	box-shadow: 3px -2px 10px -5px #495e73a3;
}

.fabImageCard img {
	width: 100%;
	display: block;
}

.fabImageInfo {
	padding: 8px 10px;
	font-size: 0.9em;
}

.fab-error {
	color: red;
	font-size: 0.75em;
	display: block;
	margin-bottom: 6px;
}

.fab-image {
	width: 100%;
	cursor: pointer;
  	transition: transform 0.3s ease, max-height 0.3s ease;
}

.fabImageCard.expanded .fab-image {
	transform: scale(1.01);
	max-height: 450px;
	aspect-ratio: initial;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	display: block;
	object-fit: contain;
}

.image-meta {
	grid-column: span 3;
	background: #111;
	color: #fff;
	padding: 12px;
	border-radius: 0 0 6px 6px;
	margin-top: -5px;
}

.fabImageActions button {
	margin-right: 10px;
}

.imageSpecT {
	position:relative !important;
}

#loremOutput {
	white-space: pre-wrap;
}
/* Ads Manager Styles */

.adsMgrContainer {
    max-width: 600px;
    margin: 80px auto;
    background: #f4f4f4;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: calc(100vh - 130px);
    box-shadow: 1px 2px 13px -2px #a4a4a4;
}

.adsMgrContainer form {
    display: flex;
    flex-direction: column;
}

.adsMgrContainer label, 
.adsMgrContainer input, 
.adsMgrContainer select, 
.adsMgrContainer textarea, 
.adsMgrContainer button {
    margin-bottom:10px;
}

.edit-ad-container {
    position: absolute;
    top: 160px;
    background: #ececec;
    width: 510px;
    margin-left: 30px;
    height: 400px;
    overflow-y: scroll;
    padding: 2px 15px;
    box-sizing: border-box;
    box-shadow: 1px 1px 23px -9px #000000b8;
}

/* Image to URL */

#imageList {
	max-width: 100%;
  	overflow: hidden;
}

#imageList img {
	width:32%; 
	margin:.5%;
}

.tabBar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.tabBtn {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    cursor: pointer;
    border-radius: 5px;
}

.tabBtn.active { background: #333; color: #fff; }

.tabContent { display: none; }
.tabContent.active { display: block; }

textarea { width: 100%; height: 120px; font-family: monospace; }
.notesArea { min-height: 150px; border: 1px solid #ccc; padding: 10px; background: #fff; }

.outputBox { margin-top: 20px; background: #f5f5f5; padding: 10px; border-radius: 5px; }

.snipeModal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.snipeModal-content {
  background: #fff; padding: 1.5rem; border-radius: 10px;
  width: 90%; max-width: 600px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.snipeModal-content textarea {
  width: 100%; height: 100px; margin-bottom: 10px;
  font-family: monospace; font-size: 14px;
}
.snipeModal-actions {
  text-align: right; margin-top: 1rem;
}

/* VIDEO MAIL STYLES */

.courier-fix {
    letter-spacing: -0.5px !important; 
    font-size: 0.9em !important;
}

#closeVidMail {
	position: absolute !important;
	margin-left: calc(100% - 200px);
	width: 60px;
	text-align: right;
	top: 40px;
	z-index: 99 !important;
}

#vMalertDiv {
    display:none;
    width: 300px;
    height: 100px;
    position: absolute;
    background: #72ceb0;
    top: calc(50vh - 70px);
    left: 50vw;
    transform: translate(-50%, -50%);
    box-shadow: -26px 17px 5px -3px #2d2d2d4d;
    pointer-events: all;
}   

#vMalertDiv.showAlert {
    display:block;
}

#vidMailMat {
  	left: calc(50% + 70px);
	max-width: 840px;
}

#videoMailboxSection {
	border:none;
	box-shadow: none;
	background:none;
	overflow: hidden !important;
}

.mailBoxBody .container,
.viewBox .container {
    height: auto;
    max-height: calc(100vh - 100px);
    overflow-y: scroll;
}

#createBox {
    position: relative;
    background: #fff;
    display:block;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

#yourBoxes {
    background: #fff6f4;
    display:none;
    padding: 20px;
    height:100%;
}

#yourBoxes ul {
    padding-left:0;
}

#sideBtnC,
#sideBtnM,
#sideBtnA {
    display:none;
    position: absolute;
    width: 136px;
    right: 155px;
    background: #fff;
    bottom: -41.5px;
    z-index: 0;
    cursor: pointer;
    font-family: 'Rubik', sans-serif;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: .5px solid #e8e8e8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

#sideBtnA {
    right: 300px;
    width: 50px;
    background: #f9f6f6;
}

#sideBtnM {
    right: 10px;
    background: #f9f6f6;
}

#sideBtnC.active,
#sideBtnM.active,
#sideBtnA.active {
    background: #fff;
}

#sideBtnC.inActive,
#sideBtnM.inActive,
#sideBtnA.inActive {
    background: #f9f6f6;
}

#sideBtnC p,
#sideBtnM p,
#sideBtnA p {
    margin: 12px;
    font-weight: 400;
    letter-spacing: .5px;
    color: #174031;
    font-size:14px;
    color:#bbb;
}

#sideBtnC p.btnHighL,
#sideBtnM p.btnHighL,
#sideBtnA p.btnHighL {
    color: #174031;
}

#sideBtnA p span {
    border-radius: 50%;
    border: 1px solid;
    padding: 0 5.5px;
    font-size: 17px;
    transform: translateY(3px);
    display: inline-block;
}

#customizeIt {
    cursor: pointer;
    font-size: 15px;
    color: #a4a4a4;
    border: 1px solid;
    width: 170px;
    margin: 23px auto;
    padding: 6px 0;
	text-align: center;
	font-family: 'Rubik', sans-serif;
	font-weight: 600;
}

.customizerOps {
    height: 0px;
    width: 100%;
    box-sizing: border-box;
    transition: all .2s ease-in-out;
    padding: 0;
    box-shadow: 0 -3px 51px #f0f0f0;
    border-top: 0px solid #d9d8d8;
    overflow: hidden;
}

.customizerOps.showCustOpt {
    border-top: 1px solid #d9d8d8;
    height: 200px;
    padding: 0 10px 10px 0px;
}

#videoMailboxSection .col1,
#videoMailboxSection .col2 {
    display:inline-block;
    width:148px;
}

#videoMailboxSection .col2 {
    width:calc(100% - 158px);
    vertical-align: top;
    padding-top: 16px;
}

#desc-Cust,
#header-Cust,
#font-Cust,
#color-Cust,
#bg-Cust {
    display:none;
}

#desc-Cust.showIt,
#header-Cust.showIt,
#font-Cust.showIt,
#color-Cust.showIt,
#bg-Cust.showIt {
    display:block;
}

#videoMailboxSection .menuBtns p {
    cursor:pointer;
    margin: 0;
    padding: 9.5px;
    border-bottom: 1px solid #e2e2e2;
    font-size: 14px;
    color: #bfbebe;
}

#videoMailboxSection .menuBtns p:hover {
    background: #f8f8f8;
    color: #9f9a9a;
}

#videoMailboxSection .menuBtns p.selected {
    color: #6c6666;
    background: #f7f7f7;
}

#mailboxDescription {
    width: calc(100% - 20px);
    margin-left: 10px;
    height: 100px;
    border: .5px solid #e1e1e1;
    background: #eeebeb;
}

#mailboxDescription:focus-visible {
    outline:none;
}

#videoMailboxSection .showDes {
    text-align: right;
    display: block;
    margin-top: 19px;
    font-weight: 100;
    font-size: 15px;
}

#videoMailboxSection .leftCol,
#videoMailboxSection .rightCol {
    display:inline-block;
    width:115px;
}

#videoMailboxSection .leftCol {
    font-size: 13px;
    font-weight: 100;
}

#videoMailboxSection .rightCol {
    width: calc(100% - 124px);
    vertical-align: top;
    padding: 0 10px;
    box-sizing: border-box;
}

.innerR {
    background: #f4f4f4;
    padding: 9px;
    transform: translateX(6px);
    border: 1px solid #eaeaea;
    box-shadow: 2px 3px 10px #00000014;
}

.innerR h2 {
    margin-top: 0;
    font-size: 16px;
}

.innerR p {
    font-weight: 100;
    font-size: 14px;
    text-align: left;
    margin-bottom: 0;
}

#headerPreview {
    max-height: 103px;
    max-width: 50%;
    margin-top: 12px;
}

#videoMailboxSection video, 
#videoMailboxSection audio {
    display: block;
    margin: 10px auto;
    width: 100%;
}

#videoMailboxSection button {
    margin: 10px;
    padding: 10px;
    border: none;
    cursor: pointer;
    background: #548799;
    border-radius: 2px;
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
}

#videoMailboxSection button:disabled {
    background: gray;
    cursor: not-allowed;
    opacity: 0.4;
}

#mailboxName,
#mailboxPassword,
#submitPassword,
#viewPassword {
    display:block;
    margin: 14px auto;
    height: 35px;
    padding: 4px 10px;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Rubik Mono One', sans-serif;
    font-size: 13px;
    background: #e3eceb;
    border-left: 1.5px solid #b3b9c8;
    border-top: 1.5px solid #b3b9c8;
    font-weight: 700;
    width: 230px;
}

#mailboxName {
    width:190px;
}

#submitPassword,
#viewPassword {
    margin: 4px 0 0 0;
    width: 142px;
    transform: translateX(6px);
    height: 26px;
    margin-bottom: 9px;
    display: block;
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    color: #5e5e5e;
}

#submitPassword:not(:placeholder-shown),
#viewPassword:not(:placeholder-shown) {
    color:#000;
}

#mailboxName,
#mailboxPassword {
    font-family: 'Rubik', sans-serif;
    display: inline-block;
}

#mailboxPassword {
    margin: 6px auto 0;
    height: 29px;
}

.clearer {
    width:30px;
    height:.5px;
    background:#000;
    margin: 20px auto;
}

#closeVMalert {
    margin-top:30px;
    cursor:pointer;
}

#closeVMalert span {
    padding: 5px 10px;
    background: #fff;
    cursor:pointer;
}

#dashboardDash {
    position: relative;
    height: auto;
	max-height: 450px;
	overflow-x: visible;
	width: calc(100% - 140px);
	background: #fff;
	box-shadow: -1px 2px 10px -4px;
	border: .5px solid #000;
	overflow-y: scroll;
}

#presetBackgrounds img {
    width: calc(31% - 10px);
    margin: 5px;
    border: 2px solid #fff;
    border-radius: 3px;
    outline: 2px solid #2e405a;
    transition:all .23s ease;
}

#presetBackgrounds img.selected {
    background: #e3b0a5;
    outline: 2px solid #e3b0a5;
    border: 2px solid #e3b0a5;
    width: calc(32% - 10px);
}

#videoPreview {
    width: 90%;
    aspect-ratio: 3/2;
    background: #e2e2e2;
    margin-bottom: 30px;
}

.prevURL {
    display: inline-block;
    margin-left: 10px;
    vertical-align: bottom;
    font-size: 15px;
    max-width: calc(100% - 310px);
}

#urlPreview {
    font-size: 15px;
    font-weight:200;
}

.createRow {
    height: 70px;
    margin-top: 12px;
}

.createRowSpec {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: center;
    gap: 13px;
    height: auto;
    margin-bottom: 18px;
    padding-top: 11px;
    border: 1px solid #e2e2e2;
    width: 92%;
    margin-left: 4%;
}

.createRow div {
    display: inline-block;
    vertical-align: bottom;
}

.createRow div label {
    font-size: 14px;
    padding-right: 20px;
    border-right: 1px solid;
}

.passRow {
    margin-right: 6px;
}

.passRow p {
    margin-top:0;
    font-size: 14px;
}

.passRow2 {
    display: flex !important;
}

.passRow2 div label {
    border-right: 0px solid;
    font-weight: 380;
}

#checkAvailability {
    margin: 10px 10px 0 22px;
    padding: 8px 14px;
}

#availabilityMessage {
    width: 100%;
    display: inline-block;
    margin-top: 0;
}

.greyColor {
    color:#e2e2e2;
}

#createMailbox {
    margin-top: 0;
}

#messageUpload {
    width:185px;
}

#userMailboxes table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1em;
  font-size: 13px;
  font-weight: 400;
}

#userMailboxes th,
#userMailboxes td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.finalTD {
    text-align: center;
}

#userMailboxes th {
  background-color: #f2f2f2;
}

#userMailboxes button {
  cursor: pointer;
  padding: 4px 8px;
  margin: 0 4px;
  font-size: 0.9em;
}

.vMtitle {
	font-family: 'Courier New', serif;
  	font-weight: 100;
}

.vMtitle {
    position: relative;
	font-family: 'Courier New', serif;
	font-weight: 100;
	font-size: 22px;
	width: 240px;
	text-align: center;
}

.vMtitle span:after {
	content: '';
    background: #fff;
    width: 100%;
    position: absolute;
    height: 25px;
    left: 0;
    top: 2px;
    z-index: -1;
    box-shadow: 2px 3px 6px -4px;
}

/* Scientific and graphing calc */

#sciCalc-container {
	max-width: 700px;
	margin: auto;
	font-family: Arial, sans-serif;
}
 
#scientific-calc, #graphing-calc {
	margin-bottom: 40px;
}

#sciCalc-display, 
#graph-input {
	padding: 10px;
	font-size: 1.2em;
	width: 100%;
	box-sizing: border-box;
	background: #dde6e3;
	border-left: 2px solid #f9f3ef;
	border-top: 1.5px solid #bdbdbd;
	border-radius: 5px;
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	color: #565d5e;
}
  
#sciCalMat .buttons {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-top: 10px;
}

#sciCalMat .buttons button {
	padding: 6px 4px;
	font-size: 14px;
	cursor: pointer;
	border: 1px solid #bdafaf;
	border-radius: 2px;
	background: #c18973;
	color: #fff;
	margin: 0;
	transition: background 0.2s ease;
  	font-weight: 600;
}

#sciCalMat .buttons button:hover {
	background: #d0a170;
}

.sciModeBtn {
	background: #517e9f;
}

#ti-screen {
	background: #000;
	color: #0f0;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 10px;
	min-height: 60px;
	font-family: monospace;
	box-shadow: inset 0 0 10px #0f03;
}

#sciCalcText-display {
	white-space: pre-wrap;
	word-wrap: break-word;
}

#sciGraph-container {
  max-height: calc(100vh - 411px);
  width: 100%;
  position: relative;
}

#graphCanvas {
  width: 100% !important;
  height: 100% !important;
}

#axis-controls {
	display: inline-block;
  	margin-top: 10px;
	transform: scale(0.85);
  	transform-origin: left;
}

#axis-controls label {
	font-size: 14px;
	color: #767775;
	font-weight: 600;
	border: 1px solid;
	padding: 6px 3px 6px 7px;
}

#axis-controls input {
	width: 45px;
	padding: 4px;
	background: #e6e6e6;
	border: .5px solid #aeadad;
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	color: #517e9f;
	margin-left: 2px;
}

#calc-mode-buttons {
	width: 174px;
  	display: inline-block;
}

.graphReset {
	display: inline-block;
  	padding: 5px 11px;
  	position: relative;
	width: 80px;
	margin-left: -46px;
}

.sciCalx {
	position:absolute !important;
	bottom: -8px;
  	right: 14px;
  	cursor: pointer;
  	font-size: 17px;
}

/* Focus calendar styling */

#focusCalendarPanel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #ffffffc7;
  backdrop-filter: blur(8px);
  padding: 15px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 888;
  transition: all 0.3s ease;
  width: 320px;
  font-family: 'Rubik', sans-serif;
}

.focus-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#focusViewSelector {
  font-size: 14px;
  padding: 4px;
  border-radius: 6px;
}

#toggleFocusCalendar {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* Pin wheel styling */
#spinnerPickerWrap {
	position: absolute !important;
	width: 90vw;
	margin: 0 auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 700px;
	transition: all .3s ease-in-out;
	height: 400px;
	background: #4f4f4f24;
	border-radius: 4px;
	padding: 20px;
	box-sizing: border-box;
	opacity:0;
	pointer-events:none;
}

#spinnerPickerWrap.showWheel {
	opacity:1;
	pointer-events:all;
}

#spinnerPickerWrap h2 {
	margin-top: 5px;
  	color: #71a29d;
  	font-size: 20px;
}

#closePinWheel {
	position: absolute !important;
  	top: 0;
	cursor:pointer;
  	right: 20px;
}

#closePinWheel h3 {
	font-family: 'Rubik', sans-serif;
	font-size: 17px;
	color: #727b86;
}

#wheelContainer {
	position: relative;
	width: 330px;
	height: 330px;
	margin-left: 200px;
	transform: rotate(-90deg);
}

#wheelLabels {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 330px;
  	height: 330px;
	pointer-events: none;
}

.wheel-label {
	position: absolute !important;
	transform-origin: center center;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	pointer-events: auto;
	cursor: pointer;
}

#fabriWheel {
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
	transition: transform 2s ease;
}

.wheel-label-input {
	font-size: 14px;
	padding: 2px 6px;
	border: none;
	text-align: center;
	background:none;
}

#wheelControls {
	position: absolute !important;
	top: 40px;
	width: 152px;
	margin-top: 20px;
}

#pointerNub {
	position: absolute !important;
	bottom: -10px;
  	right: calc(50% - 20px);
  	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 15px solid #f44336;
	z-index: 20;
}

#resultDisplay {
	position: absolute !important;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 19px;
	font-weight: bold;
	color: #444;
	z-index: 20;
	background: #ebeff4e8;
	padding: 10px 20px;
	border-radius: 3px;
	border: 1px solid #71a29d;
	box-shadow: 2px 3px 10px -5px;
}

#wheelStyleControls {
	position: absolute !important;
	bottom: 0;
	right: 0px;
	width: 150px;
	background: #f9f9f9;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 8px;
	display: none;
	flex-direction: column;
	gap: 8px;
	z-index: 1000;
}

#wheelStyleControls label {
	font-size: 13px;
	color: #444;
	display: flex;
	flex-direction: column;
}

.wheel-color-picker {
	position: absolute !important;
	z-index: 1000;
}

.wheel-font-controls {
	position: absolute !important;
	display: flex;
	flex-direction: row;
	gap: 6px;
	z-index: 1000;
	margin-top: 4px;
}

/* Sticky notes styling */

#stickyLayer {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Adjust as needed */
  pointer-events: none; /* Allow clicks through by default */
}

.sticky-note {
	position: absolute !important;
	width: 150px;
	min-height: 100px;
	background-color: #fff475;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
	cursor: move;
	resize: both;
	overflow: auto;
	pointer-events: auto;
}

#yourStickies,
#deletedStickies {
	position: absolute !important;
	width: 100%; 
	background: #e4eae8;
	height: calc(100% - 197px);
	transition: all .3s ease;
	overflow-y: scroll;
}

#addSticky {
	font-family: 'Rubik', sans-serif;
	background: #ffeb3b;
	padding: 19px 16px;
	font-size: 19px;
	width: 190px;
	box-shadow: 2px -3px 10px -5px;
}

#seeStickies, 
#seeOldStickies {
	display: inline-block;
 	width: calc(50% - 3px);
	text-align: center;
	padding: 0 15px;
  	box-sizing: border-box;
}

#seeStickies p,
#seeOldStickies p {
	cursor: pointer;
	border: 1px solid;
	padding: 8px 5px;
	font-size: 14px;
	background: #dde1e6;
}

#seeStickies p:hover,
#seeOldStickies p:hover {
	background: #dde1e6;
}

#seeStickies p.active,
#seeOldStickies p.active {
	font-weight: 500;
  	background: #b9d0e1;
}

#deletedStickies {
	left: calc(-100% - 40px);
	background: #ddeae6;
  	border-right: 1px solid #9b9b9b;
}

#deletedStickies.showDiv {
	left:0;
}

#trashCan {
	position: absolute !important;
	bottom: 10px;
	left: 100px;
	width: 60px;
	transition: all .25s ease;
	transform-origin:center;
	height: 60px;
	visibility: hidden;
	color:#adc2d2;
	font-size:40px;
	text-align:center;
	opacity:.7;
	z-index: 9999 !important;
	pointer-events: none;
}

#trashCan.active {
	visibility: visible;
	pointer-events: auto !important;
}

#trashCan.enlarge {
	transform:scale(1.2);
	opacity:.9;
}

/* Timer syling */
#timerApp {
	padding: 1rem;
	font-family: sans-serif;
}

#timerModal {
	top: 0; left: 0;
	width: 100%; 
	height: calc(50% - 3px);
	border-bottom:1px solid #000;
	display: flex; align-items: center; justify-content: center;
}

#timersList {
	height:calc(50% - 3px);
	overflow-y: scroll;
}

.timerModal-content {
	width: 100%;
  	text-align: center;
	padding: 1rem;
}

.timer {
	margin: 1rem 0;
	padding: 1rem;
	border-radius: 10px;
	background: #f0f0f0;
}

.timer-circle {
	width: 60px; height: 60px;
	border: 5px solid #007bff;
	border-radius: 50%;
	display: inline-block;
}

#timerModal .addRateH2 {
	font-family:'Rubik', sans-serif;
	font-weight:600;
	font-size:19px;
}

.timer-active {
	border: 2px solid limegreen;
	background: #f3fff3;
}

.alarm-time::before {
	content: "00:00:00";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #aaa;
	pointer-events: none;
}
.alarm-time:focus::before,
.alarm-time:valid::before {
	content: "";
}