/* -----------------------------------------------------------------------
		Root variables
   ----------------------------------------------------------------------- */
 :root {
	 --c_head:black;
	 --c_text:black;
	 --c_lbl:black;
	 --c_nbjcp:#F86381; /* darker red */
	 --c_nbjrt:#F89063; /* darker orange */
	 /* colors for gray backgrounds */
	 --bc_prim:white;
	 --bc_sec:#EFEFEF;
	 /* colors for gray variants */
	 --gry_d3:#222;
	 --gry_d2:#444;
	 --gry_d1:#666;
	 --gry_m0:#888;
	 --gry_l1:#999;
	 --gry_l2:#BBB;
	 --gry_l3:#DDD; 
	 --gry_l4:#F0F0F0;
	 /* colors for daily codes */
	 --bc_icp:#FFE6E8;
	 --bc_jcp:#FFB8BF;
	 --bc_kcp:#FF8A96;
	 --bc_lcp:#FF001A;
	 --bc_irt:#FFF0E6;
	 --bc_jrt:#FFD4B8;
	 --bc_krt:#FFB98A;
	 --bc_lrt:#FF6600;
	 --bc_jtr:#FFFFFF;
	 --bc_ktr:#FFFFFF;
	 --bc_jco:#D4B8FF;
	 --bc_kco:#B98AFF;
	 --bc_jma:#BFFFB8;
	 --bc_kma:#96FF8A;
	 --bc_jfe:#B8BFFF;
	 --bc_kfe:#949EFF;
	 --bc_jhi:#FFF8B8;
	 --bc_khi:#FFE500;
	 /* colors for buttons 
		prefix: btc:text color/btb:background color/bth:hover background color/btl: light background 
		suffix: button color (red,grn,blu,pur)
	*/
	--btc_blu:#FFFFFF;
	--btb_blu:#007BFF;
	--bth_blu:#0056b3;
	--btl_blu:#E6F2FF;
	--btc_ora:#FFFFFF;
	--btb_ora:#FF8400;
	--bth_ora:#B35C00;
	--btl_ora:#FFF3E6;
	--btc_grn:#FFFFFF;
	--btb_grn:#15D100;
	--bth_grn:#10A300;
	--btl_grn:#E8FFE6;
	--btc_red:#FFFFFF;
	--btb_red:#D10015;
	--bth_red:#A30010;
	--btl_red:#FFE6E8;
	--btc_pur:#FFFFFF;
	--btb_pur:#6600FF;
	--bth_pur:#4100A3;
	--btl_pur:#F0E6FF;
	/* colors for statuses
		prefix: stc:text color/stb:background color
		suffix: status (att,vue,app,rej,arc,ann) */
	--stc_att:#555;
	--stb_att:#DDD;
	--stc_vue:#2C4269;
	--stb_vue:#DFECED;
	--sth_vue:#B4D3D5;
	--sts_vue:#3B6568;
	--stc_app:#0C7500;
	--stb_app:#E8FFE5;
	--sth_app:#C0FFB8;
	--sts_app:#0E7500;
	--stc_rej:#75000C;
	--stb_rej:#FFE3E6;
	--sth_rej:#FFB8BF;
	--sts_rej:#A30010;
	--stc_arc:#F0E6FF;
	--stb_arc:#D4B8FF;
	--stc_ann:#822E36;
	--stb_ann:#FFE6E8;
	 
 }
 
/* -----------------------------------------------------------------------
		Body and main classes
   ----------------------------------------------------------------------- */
body {
	display: flex;
	font-family:"Noto Sans", sans-serif;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: var(--bc_prim);
    background-image: url('./nature.jpg');
    background-size: cover;
}
.bodycont {
	width: 1280px;
	height:100%;
	position: fixed;
	top: 0px;
	padding: 10px;
	justify-content: center;
	overflow-y:auto;
	background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */

}

h1 {
	font-size:18pt;
	font-style: bold;
}
h2 {
	font-size:16pt;
	font-style: bold;
}
.info {
	font-style:italic;
	font-size: 9pt;
	color:#999999;
}
/* -----------------------------------------------------------------------
			Top Line / text block, top menu
   ----------------------------------------------------------------------- */

.topline {
	display: flex;
	padding: 10px;
	border-radius: 10px;
	margin-top:10px;
	justify-content: center;
	background-color: var(--bc_prim);
}
.tl_text {
	flex:3 1 auto;
	text-align: left;
}
.tl_user {
	flex:1 1 auto;
	text-align:right;
	padding-right:10px;
	font-size:10pt;
	color:var(--bth_blu);
}

/* -----------------------------------------------------------------------
			Top Calendar 
   ----------------------------------------------------------------------- */

.topcal {
	display: block;
	padding: 10px;
	border-radius: 10px;
	margin-top:10px;
	justify-content: center;
	background-color: white;
}
.topcal_hdr, .topcal_sc, .topcal_su {
	display: grid;
	grid-template-columns:2fr 1fr 250px;
	gap:20px;
	padding: 10px;
	background-color: var(--gry_l3);
}

.topcal_sc label, .topcal_su label {
	display:block;
	color: var(--gry_d2);
	font-style:italic;
	font-size:10pt;
}
.topcal_sc select {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size:12pt;
	background-color:var(--btl_blu);
	width:350px;
}
.topcal_su select {
	padding: 10px;
	border: 1px solid var(--gry_l2);
	border-radius: 5px;
	font-size:12pt;
	width:350px;
}

.calmod_tb {
	height:50px;
}
.togbtn_hdr {
	display:block;
	font-size:9pt;
	font-style:italic;
	margin-bottom:10px;
}
.togbtn_l {
  cursor:pointer;
  border: none;
  padding: 5px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-size:12pt;
  background-color:(var--btl_blu);
  color:var(--gry_d2);
}
.togbtn_l.pressed {
	background-color:var(--btb_blu);
	color:var(--btc_blu);
}

.togbtn_r {
  cursor:pointer;
  border: none;
  padding: 5px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;	
  font-size:12pt;
  background-color:(var--btl_blu);
  color:var(--gry_d2);
}
.togbtn_r.pressed {
	background-color:var(--btb_blu);
	color:var(--btc_blu);
}

/* -----------------------------------------------------------------------
			Monthly Calendars
   ----------------------------------------------------------------------- */

.mtcals_cont {
	display: flex;
	/*grid-template-columns: 45px 1fr 45px;*/
	align-items: center;
	justify-content: space-around;
	background-color: var(--gry_l2);
}

.mtcals {
	display:flex;
	flex-wrap:nowrap;
	width:100%;
	align-items: center;
	overflow-x:hidden;
	overflow-y:auto;
	flex-wrap:nowrap;
	justify-content: space-around;
	background-color: var(--gry_l2);
}
.mtcal_body {
	display:grid;
	grid-template-columns: repeat(7,1fr);
	grid-template-rows: 30px 30px repeat(7,1fr) 50px;
	margin:12px;
	flex-shrink:0;
	width:320px;
	height:380px;
	padding :20px;
	border-radius: 10px;
	background-color: var(--bc_prim);
	align-content:start;
}
.mtcal_header {
	grid-column: 1 / span 5;
	font-size:12pt;
	height:25px;
	line-height;25px;
}
.mtcal_info {
	grid-column: 6 / span 2;
	font-size:9pt;
	text-align:center;
	height:16px;
	width:90%;
}
.mtcal_info.i_blu {
	font-style:italic;
	padding:3px;
	border-radius: 8px;
	color:var(--bth_blu);
	background:var(--btl_blu);
	border:1px solid var(--btb_blu);
}
.mtcal_info.i_red {
	font-style:italic;
	padding:3px;
	border-radius: 8px;
	color:var(--bth_ora);
	background:var(--btl_ora);
	border:1px solid var(--btb_ora);
}

.mtcal_info.i_grn {
	font-style:italic;
	padding:3px;
	border-radius: 8px;
	color:var(--bth_grn);
	background:var(--btl_grn);
	border:1px solid var(--btb_grn);
}

.mtcal_weekdays {
	grid-column: 1 / span 7;
	display:grid;
	grid-template-columns:subgrid;
}
.mtcal_content {
	grid-column: 1 / span 7;
	display:grid;
	grid-template-columns:subgrid;
	align-content:start;
}

.mtcal_recap {
	grid-row:10;
	grid-column: 1 / span 7;
	background-color: var(--bc_prim);
	display:grid;
	grid-template-columns:1fr 2fr 2fr 2fr;
	height:50px;
	font-size:9pt;
}

.mtr_ch {
	text-align:center;
	font-size:8pt;
	background-color:var(--gry_l2);
}
.mtr_rh {
	text-align:center;
	font-size:8pt;
	background-color:var(--gry_l2);

}
.mtr_cpv{
	text-align:right;
	font-size:9pt;
	padding-right:10px;
	border-bottom: 1px solid var(--gry_l2);
	border-left: none;
	border-top: none;
	border-right: 1px solid var(--gry_l2);
	background-color: var(--bc_icp);
}
.mtr_cpv.neg{
	color: var(--bc_prim);
	background-color: var(--bc_lcp);
}
.mtr_rtv{
	text-align:right;
	font-size:9pt;
	padding-right:10px;
	border-bottom: 1px solid var(--gry_l2);
	border-left: none;
	border-top: none;
	border-right: 1px solid var(--gry_l2);	
	background-color: var(--bc_irt);
}
.mtr_rtv.neg{
	color: var(--bc_prim);
	background-color: var(--bc_lrt);
}

.mtcal_navbtn {
	margin:10px;
	width: 10px;
	height:150px;
	line-height:150px;
	padding :10px;
	border-radius: 10px;
	background-color: var(--gry_l3);
	font-size: 20pt;
	font-style: bold;
	transform: scaleY(2.0);
	transition: background-color 0.5s ease, color 0.5s ease;
	cursor:pointer;
}
.mtcal_navbtn.highlight {
	background-color:var(--bc_khi);
}
.mtcal_navbtn:hover {
	background-color: var(--gry_d2);	
	color: white;
}
.mtcal_header .mtcal_weekdays .mtcal_content {
	text-align: center;

}
.mtcal_weekdays div {
	height: 30px;
	line-height:30px;
	overflow: hidden;
	text-align: center;
	font-style: italic;
	font-size:10pt;
	background-color: var(--gry_l1);
	border-bottom: 1px solid white;
	border-left: 1px solid white;
	border-top: none;
	border-right: none;
	cursor: pointer;
}
.mtcal_content div {
	height: 40px;
	line-height:40px;
	overflow: hidden;
	text-align: center;
	transition: transform 0.3s ease;
	border-bottom: 1px solid white;
	border-left: 1px solid white;
	border-top: none;
	border-right: none;
	cursor: pointer;
}
.cc_bef {
	color: var(--bc_prim);
	background-color: var(--bc_prim);
}
.cc_aft {
	color: var(--bc_prim);
	background-color: var(--bc_prim);
}
.cc_was {
	visibility:hidden;
}
.disp_f .cc_bef, .disp_l .cc_aft {
	color: var(--gry_l3);
	font-style:italic;
}

.cc_cell {
	color: #333333;
	transition: transform 0.3s ease;
}
.cc_cell:hover {
	color: #2222F3;
	transform: scale(0.8);
}

/* -----------------------------------------------------------------------
			Legend / Tools
   ----------------------------------------------------------------------- */
.sac_legends {
	display: grid;
	grid-template-columns: 60px 3fr 1fr 160px;
	background:var(--gry_l2);
	padding:20px;
}
.scl_fctit {
	grid-column: 1 / Span 2;
	font-size:9pt;
	font-style:italic;
}
.scl_lctit {
	grid-column: 4;
	font-size:9pt;
	font-style:italic;
}
.scl_bctit {
	grid-column: 3;
	font-size:9pt;
	font-style:italic;
}
.scl_alist{
	grid-column:2;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap:3px;
}
.scl_alist div {
	width:90%;
	background: var(--gry_l3);
	font-size:9pt;
	height:30px;
	line-height:30px;
	text-align:center;
	border:1px solid var(--bc_prim);
	margin:2px;
}
.scl_info img {
	border:3px solid transparent;
}
.scl_alist div.selected, .scl_info img.selected {
	border:3px solid var(--btb_grn);
	margin:0;
}
.scl_info{
	grid-column:3;
}
.scl_info span{
	display: block;
	font-size:9pt;
	color:var(--gry_d2);
	height:auto;
	padding:0;
	margin-bottom:0;
}
.scl_btns{
	grid-column:4;
}
/* -----------------------------------------------------------------------
			Bottom content / Lists
   ----------------------------------------------------------------------- */
.botcont {
	display: block;
	padding: 10px;
	border-radius: 10px;
	margin-top:10px;
	justify-content: center;
	background-color: white;
}
.botsect {
	margin-bottom:15px;
}
.botsect2 {
	display:grid;
	grid-template-columns:1fr 2fr;
	margin-bottom:15px;
	gap:15px;
}
.botsect_l {
	grid-column:1;
	padding:5px;
}
.botsect_r {
	grid-column:2;
	padding:5px;
}
.ucm_list {
	display:grid;
	grid-template-columns:1fr 3fr;
}
.ucm_fr  {
	grid-column: span 2;
	display:grid;
	grid-template-columns:subgrid;
	color:var(--gry_d1);
	font-style:italic;
	font-size:11pt;
	padding-bottom:5px;
	border-bottom:1px solid var(--gry_d1);
}
.ucm_nr  {
	grid-column: span 2;
	display:grid;
	grid-template-columns:subgrid;
	padding-top:5px;
	border-top:1px solid var(--gry_l2);
}
.ucm_ir  {
	grid-column: span 2;
}
.ucm_dtc {
	color:var(--gry_d3);
	padding:5px;
	font-size:11pt;
	text-align:center;
}
.ucm_tcm {
	color:var(--gry_d3);
	padding:5px;
	font-size:11pt;
	text-align:left;
}
.vrq_list {
	display:grid;
	grid-template-columns:1fr 2fr 2fr;	
}
.vrq_fr {
	grid-column: span 3;
	display:grid;
	grid-template-columns:subgrid;
	color:var(--gry_d1);
	font-style:italic;
	font-size:11pt;
	padding-bottom:5px;
	border-bottom:1px solid var(--gry_d1);
}
.vrq_nr {
	grid-column: span 3;
	display:grid;
	grid-template-columns:subgrid;
}
.vrq_ir {
	grid-column: span 3;
}
.vrq_txt {
	color:var(--gry_d3);
	padding:5px;
	font-size:11pt;
	border-bottom:1px solid var(--gry_l2);
	border-right:1px solid var(--gry_l2);
}
.ucm_dtc {
	color:var(--gry_d3);
	padding:5px;
	font-size:11pt;
	text-align:center;
}
/* -----------------------------------------------------------------------
			List view (current requests) 
   ----------------------------------------------------------------------- */

.arq_list {
	display:grid;
	grid-template-columns:90px 200px 1fr 1fr 80px;
}
.arq_header {
	grid-column:span 7;
	display:grid;
	grid-template-columns:subgrid;
	font-style:italic;
	font-size:11pt;
	color:var(--gry_d1);
	padding-bottom:10px;
	border-bottom:1px;
	border-style:none none solid none;
}
.arq_line {
	grid-column:span 7;
	display:grid;
	grid-template-columns:subgrid;
	font-style:normal;
	font-size:12pt;
	color:var(--gry_d3);
	border-bottom:1px;
	border-style:none none solid none;
}
.arq_info {
	grid-column:span 7;
	display:block;
	font-size:12pt;
}
.rql_dates{
	display:grid;
	grid-template-columns:1fr 1fr;
	cursor:pointer;
}
.rql_dts{
	grid-column: span 2;
	text-align:center;
	font-size:11pt;	
	padding:4px;
	border-right: 1px solid var(--gry_l2);	
}
.rql_dt {
	text-align:center;
	font-size:11pt;	
	padding:4px;
	border-right: 1px solid var(--gry_l2);	
}
.rql_stat{
	width:100%;
	padding:5px;
	text-align:center;
	font-size:10pt;
	box-sizing: border-box;
	border-right: 1px solid var(--gry_l2);	
}
.rqs_att {
	font-style:italic;
	color:var(--stc_att);
	background-color:var(--stb_att);
}
.rqs_seen {
	color:var(--stc_vue);
	background-color:var(--stb_vue);
}
.rqs_acc {
	font-variant:small-caps;
	color:var(--stc_app);
	background-color:var(--stb_app);
}
.rqs_ref {
	font-variant:small-caps;
	color:var(--stc_rej);
	background-color:var(--stb_rej);
}
.rqs_arch {
	color:var(--stc_arc);
	background-color:var(--stb_arc);
}
.rqs_canc {
	color:var(--stc_ann);
	background-color:var(--stb_ann);
}
.rqd_hidden {
	visibility:hidden;
}
.rqd_txt {
	width:100%;
	padding:5px;
	text-align:left;
	font-size:11pt;	
	box-sizing: border-box;
	border-right: 1px solid var(--gry_l2);	
}

.dsp_njcp {
	font-size:10pt;
	text-align:right;
	padding-right:4px;
	color:var(--gry_d2);
	border-top: 1px solid var(--gry_l2);	
	border-right: 1px solid var(--gry_l2);	
	background-color: var(--bc_icp);
}
.dsp_njrt {
	font-size:10pt;
	text-align:right;
	padding-right:4px;
	color:var(--gry_d2);
	border-top: 1px solid var(--gry_l2);	
	border-right: 1px solid var(--gry_l2);	
	background-color: var(--bc_irt);
}
.dsp_left {
	display:block;
	float:left;
}
.dsp_right {
	display:block;
	float:right;
}
   
/* -----------------------------------------------------------------------
			List view (pending requests) 
   ----------------------------------------------------------------------- */
.crq_grp {
	padding-top:3px;
	grid-column:span 7;
	display:grid;
	grid-template-columns:subgrid;
    background-image: url('./sgn_mi_s.png');
	background-repeat: no-repeat;
	background-position: top-left;
}
.crq_grp.folded {
    background-image: url('./sgn_pl_s.png');
	background-repeat: no-repeat;
	background-position: top-left;
}
.crq_grp_hd {
	padding-left:40px;
	height:35px;
	grid-column:span 7;
	font-style:normal;
	font-size:12pt;
	color:var(--gry_d3);
	border-bottom:1px;
	border-style:none none solid none;
}
.crq_grp.folded .crq_agt{
	display:none;
}

.crq_agt {
	padding-top:3px;
	grid-column:span 7;
	display:grid;
	grid-template-columns:subgrid;
    background-image: url('./sgn_mi_s.png');
	background-repeat: no-repeat;
	background-position: top-left;
}
.crq_agt.folded {
    background-image: url('./sgn_pl_s.png');
	background-repeat: no-repeat;
	background-position: top-left;
}
.crq_agt.folded .arq_line {
	display:none;
}

.crq_agt_hd {
	grid-column:span 7;
	padding-left:40px;
	height:35px;
	font-style:normal;
	font-size:11pt;
	color:var(--gry_d3);
	border-bottom:1px;
	border-style:none none solid none;
}
   
/* -----------------------------------------------------------------------
			List view (pending users) 
   ----------------------------------------------------------------------- */
.nus_list {
	width:100%;
	display:grid;
	grid-template-columns:1fr 1fr 150px 150px; 
}
.nus_header {
	display:grid;
	padding:10px;
	grid-column: 1 / span 4;
	grid-template-columns:subgrid;
	font-size:11pt;
	font-style:italic;
	color:var(--gry_d1);
	border-bottom: 1px solid var(--gry_d3);
}
.nus_agt{
	display:grid;
	padding:10px;
	grid-column: 1 / span 4;
	grid-template-columns:subgrid;
	color:var(--gry_d3);
	border-bottom: 1px solid var(--gry_d3);
}
.nus_email{
	overflow:hidden;
	text-overflow:ellipsis;
	padding:5px;
}
.nus_name{
	padding:5px;
}
.nus_none {
	color:var(--bth_grn);
	font-size:12pt;
	font-style:italic;
}
.nus_actref{} 
.nus_actacc{}

/* -----------------------------------------------------------------------
			Confirm Request Form
   ----------------------------------------------------------------------- */
.crf_form {
	display:grid;
	grid-template-columns:1fr 2fr 180px 3fr 1fr;
	gap:5px;
}
.crf_form span {
	font-style:italic;
	font-size:12pt;
	color: var(--gry_d1);
	margin-bottom: 5px;
}

.crf_form input {
	padding: 10px;
	border: 1px solid var(--gry_l3);
	border-radius: 5px;
	font-size:12pt;
}
.prev_dti {
	padding: 9px;
	border: 1px solid var(--gry_l3);
	border-radius: 5px;
	font-size:12pt;
	text-align:center;
	color: var(--gry_d2);
	background:var(--gry_l4);
	margin-bottom:5px;
}
.prev_txa {
	width: 100%;
	height:90%;
	padding: 10px;
	border: 1px solid var(--gry_l3);
	border-radius: 5px;
	font-size:11pt;
	color: var(--gry_d2);
	background:var(--gry_l4);
	resize: none;
	overflow: hidden;
	box-sizing: border-box; /* Ensures padding doesn't affect width */
}
.crf_reply textarea{
	width: 100%;
	height:90%;
	text-align:left;
	box-sizing: border-box; /* Ensures padding doesn't affect width */
	padding: 10px;
	border: 1px solid var(--gry_l3);
	border-radius: 5px;
	font-size:12pt;
	color: var(--gry_d2);
	resize: none;
}

.crf_jconso {
	display:grid;
	grid-template-columns:1fr 1fr 2fr 1fr;
	align-content:start;
	justify-content:start;
	font-style:italic;
	font-size:12pt;
	gap:5px 0;
	color: var(--gry_d1);
}
.crf_jconso input {
	text-align:right;
	width:50px;
}
.crf_newstat {
	float:right;
	display:inline-flex;
	gap:0;
}
.crf_newstat input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.crf_newstat label {
	padding: 3px 10px;
	width:80%;
	font-size:11pt;
	border: 1px solid var(--gry_l3);
	cursor: pointer;
	transition: all 0.2s;
	user-select: none;
}
.crf_newstat label.ns_exa {
	color:var(--stc_vue);
	background:var(--stb_vue);
}
.crf_newstat label.ns_ref {
	color:var(--stc_rej);
	background:var(--stb_rej);
}
.crf_newstat label.ns_acc {
	color:var(--stc_app);
	background:var(--stb_app);
}
.crf_newstat label.ns_exa:hover {
	background: var(--sth_vue);
}
.crf_newstat label.ns_ref:hover {
	background: var(--sth_rej);
}
.crf_newstat label.ns_acc:hover {
	background: var(--sth_app);
}
.crf_newstat input[type="radio"]:checked + label.ns_exa {
  background: var(--sts_vue);
  border-color: var(--stb_vue);
  color: white;
  z-index: 1; /* Bring selected button to front if overlapping borders */
}
.crf_newstat input[type="radio"]:checked + label.ns_ref {
  background: var(--sts_rej);
  border-color: var(--stb_rej);
  color: white;
  z-index: 1; /* Bring selected button to front if overlapping borders */
}
.crf_newstat input[type="radio"]:checked + label.ns_acc {
  background: var(--sts_app);
  border-color: var(--stb_app);
  color: white;
  z-index: 1; /* Bring selected button to front if overlapping borders */
}
.crf_newstat label:first-of-type { border-radius: 4px 0 0 4px; }
.crf_newstat label:last-of-type { border-radius: 0 4px 4px 0; }
   
/* -----------------------------------------------------------------------
			New Request Form
   ----------------------------------------------------------------------- */

.nrf_form {
	display:flex;
	gap:10px;
}
.nrf_form label {
	font-style:italic;
	font-size:12pt;
	color: var(--gry_d1);
}
.nrf_form p {
	font-style:italic;
	font-size:12pt;
	color: var(--gry_d1);
	display: block;
	width:100%;
	text-align:center;
	margin:0;
	margin-bottom: 5px;
}
.nrf_form input {
	padding: 10px;
	border: 1px solid var(--gry_l3);
	border-radius: 5px;
	font-size:12pt;
}

.nrf_dateinp {
	flex:1;
}
.nrf_dateinp input {
	width: 100%;
	text-align:center;
	box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.nrf_dateinp label, .nrf_motif label{
	display: block;
	margin-bottom: 5px;
}

.nrf_motif{
	flex:3;
}

.nrf_motif textarea{
	width: 100%;
	height:80%;
	text-align:left;
	box-sizing: border-box; /* Ensures padding doesn't affect width */
	padding: 10px;
	border: 1px solid var(--gry_l3);
	border-radius: 5px;
	font-size:12pt;
	color: var(--gry_d2);
	resize: none;
}

.nrf_jconso{
	flex:1;
	display:grid;
	grid-template-columns:1fr 1fr 2fr 1fr;
	align-content:start;
	justify-content:start;
	font-style:italic;
	font-size:12pt;
	color: var(--gry_d1);

}

.nrf_jc_hd {
	grid-column : 1 /span 4;
}
.nrf_jconso input {
	width:50px;
}

.nrf_btns{
	flex:1;
}
.nrf_btns button{
	width:80%;
	display: block;
}
/* -----------------------------------------------------------------------
			Overlay (Background) 
   ----------------------------------------------------------------------- */

.pup_overlay {
	display: none; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
	z-index: 900;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.pup_overlay.show {
	display: flex; /* Enable flexbox for centering */
	opacity: 1;
}

/* -----------------------------------------------------------------------
			Popup form
   ----------------------------------------------------------------------- */
.pup_form, .pup_help {
	background-color: white;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	position: relative;
}
.pup_warning {
	background-color: white;
	padding: 30px;
	border-radius: 10px;
	width:800px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	position: relative;
}
.pup_form {
	width: 700px;
}
.pup_help {
	width: 800px;
}

.pup_help ul {
	color: black;
	font-size: 13pt;
	font-style: bold;
	margin-bottom:5px;
}
.pup_help ul span {
	text-decoration:underline;
}
.pup_help ul li {
	color: var(--gry_d2);
	font-size: 12pt;
	font-style: normal;
}
.pup_info {
	background-color: white;
	padding: 30px;
	border-radius: 10px;
	width:600px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	position: relative;
}
.picnr_list {
	display:grid;
	grid-template-columns: 1fr 3fr;
	gap:15px;
	margin-bottom:20px;
}
.picnr_wide {
	grid-column:1 / span 2;
	font-size:12pt;
}
.picnr_lbl {
	grid-column:1;
	font-style:italic;
	font-size:11;
	color:var(--gry_d2);
}
.picnr_val {
	grid-column:2;
	width: 100%;
	padding: 10px;
	border: 1px solid var(--gry_l2);
	color:var(--gry_d3);
	border-radius: 5px;
	box-sizing: border-box; /* Ensures padding doesn't affect width */	
}
.picnr_ok {
	width: 100%;
	margin-top:20px;
	margin-bottom:20px;
	padding: 10px;
	color:var(--gry_d3);
}
.picnr_warn {
	background-image:url('./yel_stripe.png');
	background-repeat:repeat;
	padding:20px;
	color:red;
	font-size:11pt;
	line-height:28px;
}
.picnr_warn img{
	display:block;
}
.pup_form.pup_hidden, .pup_help.pup_hidden ,.pup_warning.pup_hidden, .pup_info.pup_hidden {
	display:none;
}

.pup_form h2 {
	margin-top: 0;
	color: var(--gry_d3);
}
.pup_form h3 {
	width:100%;
	margin-top: 0;
	padding-bottom:10px;
	border-bottom: 1px solid var(--gry_l2);
	font-size:12pt;
	color: var(--gry_d3);
}

.puf_group {
	display: grid;
	grid-template-columns:1fr 3fr 30px;
	margin-bottom: 15px;
}

.puf_group label {
	font-size:11pt;
	font-style:italic;
	margin-bottom: 5px;
	color: var(--gry_d1);
}
.puf_group img {
	display: inline;
	float: right;
	margin-bottom: 5px;
	color: #666;
}

.puf_group select {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--gry_l2);
	border-radius: 5px;
	box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.puf_group input {
	text-align: left;
	width: 100%;
	padding: 10px;
	border: 1px solid var(--gry_l2);
	border-radius: 5px;
	box-sizing: border-box; /* Ensures padding doesn't affect width */
}
.puf_group textarea {
	width: 100%;
	padding: 10px;
	font-size: 12pt;
	border: 1px solid var(--gry_l2);
	border-radius: 5px;
	box-sizing: border-box; /* Ensures padding doesn't affect width */
}
.puf_group input.small {
	width: 20%;
	padding: 10px;
	border: 1px solid var(--gry_l2);
	border-radius: 5px;
	box-sizing: border-box; /* Ensures padding doesn't affect width */
}
.puf_group input.invalid {
	border-color:var(--btb_red);
}
/* -----------------------------------------------------------------------
			Notification popup
   ----------------------------------------------------------------------- */
.pup_notif {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	padding: 15px 25px;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	visibility:hidden;
	z-index: 1000;
}
.pup_notif.not_blue {
	color: var(--btc_blu);
	background: var(--btb_blu);
}
.pup_notif.not_green {
	color: var(--btc_grn);
	background: var(--btb_grn);
}
.pup_notif.not_red {
	color: var(--btc_red);
	background: var(--btb_red);
}
.pup_notif.not_gray {
	color: var(--gry_l3);
	background: var(--gry_d2);
}
.pup_notif.animate_in{
	visibility:visible;
	/* Animation: name | duration | easing | fill-mode */
	animation: slideDown 0.5s ease-out forwards;
}
.pup_notif.animate_out{
	visibility:visible;
	/* Animation: name | duration | easing | fill-mode */
	animation: slideUp 0.5s ease-out forwards;
}


@keyframes slideDown {
0% { transform: translateX(-50%) translateY(-100%); opacity: 0; }
100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes slideUp {
0% { transform: translateX(-50%) translateY(0); opacity: 1; }
100% { transform: translateX(-50%) translateY(-100%); opacity: 0; }
}

/* -----------------------------------------------------------------------
			Button styles
   ----------------------------------------------------------------------- */
.smlbtn {
	margin-top:3px;
	width: 90%;
	height:20px;
	padding: 3px;
	text-align:center;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 10pt;
}
.smlbtnh2 {
	margin-top:3px;
	width: 90%;
	height:35px;
	line-height:25px;
	padding: 3px;
	text-align:center;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 10pt;
}
.listbtn {
	margin-top:5px;
	width: 90%;
	padding: 5px;
	text-align:center;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 11pt;
}
.listbtn:disabled{
	background-color: var(--gry_l2);	
	color: var(--gry_d2);	
}
.rqlbtn {
	width:100%;
	padding:5px;
	border-radius:5px;
	text-align:center;
	border: none;
	font-size:10pt;		
	cursor: pointer;
}
.frmbtn {
	margin-top:10px;
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 12pt;
}
.frmbtn:disabled {
	background-color: var(--gry_l2);	
	color: var(--gry_d2);	
}
.purbtn{
	color:var(--btc_pur);
	background-color:var(--btb_pur);	
}
.purbtn:not(:disabled):hover{
	background-color:var(--bth_pur);
}
.redbtn{
	color:var(--btc_red);
	background-color:var(--btb_red);
}
.redbtn:not(:disabled):hover{
	background-color:var(--bth_red);
}
.grnbtn{
	color: var(--btc_grn);
	background-color: var(--btb_grn);	
}
.grnbtn:not(:disabled):hover{
	background-color: var(--bth_grn);
}
.blubtn{
	color: var(--btc_blu);
	background-color: var(--btb_blu);	
}
.blubtn:not(:disabled):hover{
	background-color: var(--bth_blu);
}

.pfb_close {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 24px;
	color: #aaa;
	cursor: pointer;
	background: none;
	border: none;
}

.pfb_close:hover {
	color: #000;
}
/* -----------------------------------------------------------------------
			Dummy class that mark buttons which should close overlay (and thus popup form)
   ----------------------------------------------------------------------- */
.pup_close {} 

/* -----------------------------------------------------------------------
			Menu bar/Action menu
   ----------------------------------------------------------------------- */

.nav_menu {
	flex:0 0 250px;
}

.nav_menu ul {
	background: var(--btb_blu);
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.nav_menu li {
	display: block;
	float: left;
	width: 220px;
	margin: 0 2px 0 0;
	padding: 12px;
	position: relative;
	text-align:center;
	text-decoration: none;
}
.nav_cat {
	font-style:italic;
	font-size:11pt;
	background:var(--btl_blu);
	color:var(--btb_blu);
	cursor:none;
	
}
.nav_menu .nav_tm {
	color: var(--btc_blu);
	background: var(--btb_blu);
}
.nav_menu .nav_mi {
	color: var(--bth_blu);
	background: var(--btl_blu);
}
.nav_menu .nav_mi:hover {
	@include transition(background, 0.3s);
	background: var(--bth_blu);
	color: var(--btl_blu);
	cursor: pointer;
}
.nav_menu .nav_tm:hover {
	@include transition(background, 0.3s);
	background: var(--bth_blu);
	cursor: pointer;
}

.nav_menu ul li ul {
	background: var(--bth_blu);
	visibility: hidden;
	float: left;
	min-width: 220px;
	position: absolute;
	transition: visibility 0.4s ease-in;
	margin-top:12px;
	left: 0;
	z-index: 500;
}

.nav_menu ul li:hover > ul,
.nav_menu ul li ul:hover {
   visibility: visible;
}

.nav_menu ul li ul li {
	clear: both;
	text-align:left;
	padding: 5px 0 5px 18px;
	font-variant: normal;
	width: 100%;
}

/* -----------------------------------------------------------------------
			Team Calendars
   ----------------------------------------------------------------------- */

.tmcals_selbox {
	display:inline;
	float:right;
}
.tmcals_selbox select {
	padding: 10px;
	border: 1px solid var(--gry_l2);
	border-radius: 5px;
	font-size:12pt;
	font-style:normal;
	width:350px;
}

/* -----------------------------------------------------------------------
			Work Calendars
   ----------------------------------------------------------------------- */
.wkcals_cont{
	background: var(--gry_l2);
}
.wkcals_list{
	display:grid;
	grid-template-columns: 70px 40px 40px repeat(31,1fr) 40px 40px;
}
.wkcals_fr{
	grid-column: span 36;
	display:grid;
	background:var(--gry_l3);
	grid-template-columns: subgrid;
}
.wkcals_gr{
	grid-column: span 36;
	display:grid;
	background:var(--gry_l3);
	grid-template-columns: subgrid;
}

.wkcals_fr div{
	font-size:9pt;
	font-style:italic;
	text-align:center;
	height:25px;
	line-height:25px;
	border-right: 1px solid var(--gry_d1);
	color:var(--gry_d3);
}
.wkcals_fr div.dcol{
	grid-column: span 2;
	font-size:9pt;
	font-style:italic;
	text-align:center;
	height:25px;
	line-height:25px;
	border-right: 1px solid var(--gry_d1);
	color:var(--gry_d3);
}
.wkcals_nr{
	grid-column: span 36;
	display:grid;
	height:35px;
	grid-template-columns: subgrid;
}
.wkcals_nr div{
	padding-top:5px;
	padding-left:3px;
	padding-right:3px;
	line-height:25px;
	border-right: 1px solid var(--gry_l3);
	border-bottom: 1px solid var(--gry_l3);
}
.wkcals_ir{
	grid-column: span 36;
	background:var(--bc_prim);
	font-size:12pt;
}
.wkc_cp {
	font-size:10pt;
	background:var(--bc_icp);
	text-align:right;
}
.wkc_cp.neg {
	background:var(--bc_lcp);
	color:var(--bc_prim);
}
.wkc_rt {
	font-size:10pt;
	background:var(--bc_irt);
	text-align:right;
}
.wkc_rt.neg {
	background:var(--bc_lrt);
	color:var(--bc_prim);
}
.wkc_nim {}
.wkc_cell {
	font-size:9pt;
	color:var(--gry_d1);
	text-align:center;
}
.wkc_fc {
	font-size:9pt;
	background:var(--bc_prim);
	text-align:center;
}
.wkc_cell.selreq {
	animation: underline-pulse 1s infinite;
}
@keyframes underline-pulse {
	0% {
		border-bottom: 1px solid var(--gry_l3);
	}
	50% {
		border-bottom: 4px solid var(--btb_grn);
	}
	100% {
		border-bottom: 1px solid var(--gry_l3);
	}
}
/* -----------------------------------------------------------------------
			Yearly Calendars
   ----------------------------------------------------------------------- */
.yearcal_cont{
	background: var(--gry_l2);
	display:none;
}
.yearcal{
	display:grid;
	grid-template-columns: 40px repeat(37,1fr);
}
.yearcal_fr{
	grid-column: 1 / span 38;
	display:grid;
	background:var(--gry_l3);
	grid-template-columns: subgrid;
}
.yearcal_fr div{
	font-size:9pt;
	font-style:italic;
	text-align:center;
	height:25px;
	line-height:25px;
	border-right: 1px solid var(--gry_l3);
	color:var(--gry_d3);
}
.yearcal_nr{
	grid-column: 1 / span 38;
	display:grid;
	grid-template-columns: subgrid;
}
.yearcal_mth{
	grid-column: 1 / span 38;
	display:grid;
	grid-template-columns: subgrid;
}
.yearcal_mth div{
	font-size:10pt;
	text-align:center;
	height:28px;
	line-height:28px;
	border-right: 1px solid var(--gry_l3);
	border-top: 1px solid var(--gry_l3);
	background:var(--gry_l2);
}

.ccy_bef, .ccy_aft{
	color:var(--gry_l2);
}

.ccy_cell{
}

.cch_sasu {
	background:var(--bc_kfe);
}