@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('chillax.css');
@font-face {
    font-family: 'Myriad Pro Light';
    font-style: normal;
    font-weight: normal;
	src: local('Myriad Pro Light'), url('https://www.uwcea.org/Fonts/MyriadPro-Light.otf'), format('otf');
    }

/*------------------------------ GENERAL, TEXT, LINKS ----------------------------------------------------*/
:root {
  --bg: #f6f7f9;
  --surface: #fff;
  --text: #1c2430;
  --muted: #5d6877;
  --line: #d5dae1;
  --accent: #002288;
  --panel-bg: #eef0f4;
  --note: #fff8dc;
  --note-line: #e3cf7a;

  --panel-w: 25%;               /* landscape windows: never more than 30% */
  --dur: .35s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }


body {
	background: #fff; 
	font-family: 'Poppins','Myriad Pro Light',Helvetica, Arial, sans-serif; 
	font-size: 14px; 
	line-height: 1.2; 
	color: #333; 
	-webkit-font-smoothing:antialiased; 
	margin: 10px; 
}
a, a:visited 					{ color: #002288; text-decoration: none; }
a.white {color:#fff;}
a:hover 						{ text-decoration: underline; }
.inherit:link, .inherit:hover, .inherit:visited {
	text-decoration: none; 
	color: inherit; 
	font: inherit; 
	font-weight: inherit; 
	font-size: inherit;
}
a.inherit.buttn {
	border:1px solid #aaa;
	border-radius:5px;
	cursor:pointer;
	padding:5px 10px 5px 10px;
}
a.orange:link, a.orange:hover, a.orange:visited {
	text-decoration: none; 
	color: #e9510e; 
	font: inherit; 
	font-weight: inherit; 
	font-size: inherit;
}
a.green:link, a.green:hover, a.green:visited {
	text-decoration: none; 
	color: #008800; 
	font: inherit; 
	font-weight: inherit; 
	font-size: inherit;
}
a.orange:hover, a.green:hover {
	font-weight:bold;
}

h1		{font-size: 28px; color: #002288; font-weight: bold;}
h2 		{font-size: 24px; color: #002288; font-weight: bold;}
h3 		{font-size: 18px; color: #000000; font-weight: bold;}
h4 		{font-size: 16px; color: #002288; font-weight: bold; text-transform: uppercase;}
.small 	{font-size: 10px; color: #999; font-style: italic; line-height: 12px;}
.small.in {display:inline-block;}
.heads 	{font-size: 18px; font-weight: bold;}
.red 	{color: #ff0000; font-weight: bold;}
.blue {font-size: 14px; color: #002288;}
.green 	{color: #008800;}
.grey {color: #888;}
.lightgrey, .lgrey {color: #cccccc;}
.space18 {display:inline-block; width:18px;}
.space24 {display:inline-block; width:24px;}
.space40 {display:inline-block; width:40px;}
.space50 {display:inline-block; width:50px;}
.space50r {display:inline-block; width:50px;text-align:right;}
.space50c {display:inline-block; width:50px;text-align:center;border:1px solid #ddd;margin:0; height:100%;float:left;vertical-align:middle;}
.space60 {display:inline-block; width:66px;}
.space80 {display:inline-block; width:80px;}
.space100 {display:inline-block; width:100px;}
.space120 {display:inline-block; width:120px;}
.space130 {display:inline-block; width:130px;}
.space145 {display:inline-block; width:145px;}
.space160 {display:inline-block; width:160px;}
.space170 {display:inline-block; width:170px;}
.space180 {display:inline-block; width:180px;}
.space200 {display:inline-block; width:200px;}
.space220 {display:inline-block; width:220px;}
.space240 {display:inline-block; width:240px;}
.space250 {display:inline-block; width:250px;}
.space260 {display:inline-block; width:260px;}
.space300 {display:inline-block; width:300px;}
.space400 {display:inline-block; width:400px; max-width:100%;}
.space_comment, .space500 {display:inline-block; width:500px; max-width:100%;}
.spanbox_comment {display:inline-block; width:480px;}
@media only screen and (max-width: 900px) {
	.space_comment {width:400px;}
	.spanbox_comment {width:380px;}
}
@media only screen and (max-width: 600px) {
	.space_comment {width:300px;}
	.spanbox_comment {width:280px;}
}

.gap8 {height:8px;}
.let {display:inline-block;background-color:#33cccc;color:#fff;text-align:center;padding:3px;font-weight:bold;text-transform:uppercase;width:28px;}
.nowrap {white-space:nowrap;}
.hidden {display:none;}
.inline {display:inline-block;}	
.tippy-box {
  white-space: pre-line;
}
/*------------------------------ DIV BOXES ----------------------------------------------------*/
.studbox {
	display:inline-block;
	width:280px;
	text-align:left;
	border-bottom:1px solid #ddd;
	margin-bottom:10px;
}
.tablebox, .table150, .neatbox, .neat150, .neat130, .quick150 {
	display:inline-block;
	width:300px;
	text-align:left;
	padding:5px;
	border:1px solid #000;
	margin:0;
	vertical-align: top;
	min-height: 32px;
}
.table150, .neat150, .quick150 {
	width:148px;
}
.neat130 {
	width: 128px;
}
.neatbox, .neat150, .neat130, .quick150 {
	border:0;
	margin-bottom: 10px;
}
.quick150 {
	font-size: 14px;
	line-height: 16px;
}
.quick150 .grey, .quick150 .blue, .quick150 .qred, .quick150 .purple {
	background-color: #888;
	width: 100%;
	color: #fff;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
	padding: 4px 0;
	cursor: pointer;
}
.quick150 .blue {
	background-color: #000088;
	cursor: none;
	border: 1px solid #000;
}
.quick150 .qred {
	background-color: #cc0000;
	cursor: none;
	border: 1px solid #000;
}
.quick150 .purple {
	background-color: #880088;
	cursor: none;
	border: 1px solid #000;
}
.fixbox, .fixboxa, .fixbox250 {
	display:inline-block;
	width:300px;
	padding:5px;
	border:1px solid #000088;
	border-radius:5px;
	margin-bottom:10px;
	height:160px;
	text-align: center;
	vertical-align:bottom;
}
.fixboxa {
	height: 400px;
	margin-right: 6px;
}
.fixbox250 {
	height: 430px;
	width: 250px;
	margin-right: 6px;
}
.autobox, .errorbox {
	width:-moz-fit-content;
	width: fit-content;
	max-width: 90%;
	display: table;
	border:2px solid #000088;
	padding:12px;
	padding-left:24px;
	background-color:#f8f8ff;
	line-height: 28px;
	margin-bottom: 12px;
	text-align: left;
	position: relative;
}
.errorbox {
	border: 2px solid #000;
	color: #ff0000;
}
.errorbox:before, .autobox:before {
	background: #ff0000;
	width:12px;
	height:100%;
	content: "";
	display: block;
	position: absolute;
	pointer-events: none;
	top:0;
	left:0;
}
.autobox:before {
	background: #000088;
}
#alertbox {
	display: none;
	border: 3px solid red;
	border-radius: 3px;
	position: fixed;
	width: 250px;
	left: 50%;
	margin-left: -100px;
	padding: 25px;
	text-align: center;
	z-index:600px;
	background-color:#fff;
}  

.filterbox {
	display:inline-block;
	background:#00909b;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#00707b), to(#00b0bb), color-stop(50%, #00909b));
	border-radius: 2px;
	color: #fff;
	padding: 5px 0 5px 5px;
	margin: 2px 2px 0 2px;
}

/*--------------------- SCREEN SIZE ON/OFF ---------------------------------------------------------- */

@media only screen and (max-width: 900px) {
	.phonehide {display: none;}
	.nophone {display: none;}
}
@media only screen and (min-width: 901px) {
	.maxhide {display: none;}
}
/*--------------------- BARS ---------------------------------------------------------- */
.bar {
	display:inline-block;
	height:30px;
	line-height:30px;
	color:#fff;
	margin:2px 0 0 0;
	text-align:right;
	padding:0 3px 0 0;
}
/*--------------------- BUTTONS ---------------------------------------------------------- 
	Example html:
		<button type="submit" class="enter blue" name="enter_button">Confabulate</button>
*/
.enter, .refresh, a.enter, a.enter:visited {
	width: auto;
	height: 36px;
	background: #002288;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
	font-size: 18px;
	font-weight: normal;
	padding: 8px 15px 12px 15px;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #002288), color-stop(100%, #1155bb));
	background-image: -webkit-linear-gradient(top, #002288, #1155bb);
	background-image: -moz-linear-gradient(top, #002288, #1155bb);
	background-image: -ms-linear-gradient(top, #002288, #1155bb);
	background-image: -o-linear-gradient(top, #002288, #1155bb);
	background-image: linear-gradient(top, #002288, #1155bb);
}
a.enter, a.enter:visited {text-decoration:none;border:1px solid #000;}
.enter.small { height:24px; font-size: 14px; padding: 4px 15px 6px 15px; font-style:normal;}
.enter.lblue {background: #008888;
 	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #008888), color-stop(100%, #00bbbb));
	background-image: -webkit-linear-gradient(top, #008888, #00bbbb);
	background-image: -moz-linear-gradient(top, #008888, #00bbbb);
	background-image: -ms-linear-gradient(top, #008888, #00bbbb);
	background-image: -o-linear-gradient(top, #008888, #00bbbb);
	background-image: linear-gradient(top, #008888, #00bbbb);
}
.enter.red {background: #ff0000;
 	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff0000), color-stop(100%, #cc0000));
	background-image: -webkit-linear-gradient(top, #ff0000, #cc0000);
	background-image: -moz-linear-gradient(top, #ff0000, #cc0000);
	background-image: -ms-linear-gradient(top, #ff0000, #cc0000);
	background-image: -o-linear-gradient(top, #ff0000, #cc0000);
	background-image: linear-gradient(top, #ff0000, #cc0000);
}
.enter.green {background: #008000;
 	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32b232), color-stop(100%, #008000));
	background-image: -webkit-linear-gradient(top, #32b232, #008000);
	background-image: -moz-linear-gradient(top, #32b232, #008000);
	background-image: -ms-linear-gradient(top, #32b232, #008000);
	background-image: -o-linear-gradient(top, #32b232, #008000);
	background-image: linear-gradient(top, #32b232, #008000);
}
.enter.orange {background: #f9510e;
 	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9510e), color-stop(100%, #d72e00));
	background-image: -webkit-linear-gradient(top, #f9510e, #d72e00);
	background-image: -moz-linear-gradient(top, #f9510e, #d72e00);
	background-image: -ms-linear-gradient(top, #f9510e, #d72e00);
	background-image: -o-linear-gradient(top, #f9510e, #d72e00);
	background-image: linear-gradient(top, #f9510e, #d72e00);
}
.enter.purple {background: #800080;
 	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b232b2), color-stop(100%, #800080));
	background-image: -webkit-linear-gradient(top, #b232b2, #800080);
	background-image: -moz-linear-gradient(top, #b232b2, #800080);
	background-image: -ms-linear-gradient(top, #b232b2, #800080);
	background-image: -o-linear-gradient(top, #b232b2, #800080);
	background-image: linear-gradient(top, #b232b2, #800080);
}
.enter.pink {background: #ffbbbb;
 	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffbaba), color-stop(100%, #ff8888));
	background-image: -webkit-linear-gradient(top, #ffbaba, #ff8888);
	background-image: -moz-linear-gradient(top, #ffbaba, #ff8888);
	background-image: -ms-linear-gradient(top, #ffbaba, #ff8888);
	background-image: -o-linear-gradient(top, #ffbaba, #ff8888);
	background-image: linear-gradient(top, #ffbaba, #ff8888);
}
.enter.grey {background: #dddddd; color:#000;}
.enter.white {background: #ffffff; color:#888;border:1px solid #888;}
.enter:disabled {background:none;border:1px solid #ccc;color:#ccc;}
.enter.clear {background: none; color:#000033;font-weight:bold;border:0;height:auto;}
.refresh {width:24px; height:24px;color:#008000; background: #ddd;font-family: FontAwesome;font: var(--fa-font-solid);font-weight:bold;padding:0;}
.refresh:after{ content: '\f01e';}

.button_grey, .button_black, .button_blue, .button_white, .button_red {
	background-color:inherit; 
	border:0; 
	font-weight: inherit; 
	cursor: pointer; 
	font-size: inherit;
}
.button_white {color:#fff;}
.button_grey {color: #bbb; font-size:18px;}
.button_box {color: #000; font-size:inherit; border:2px solid #ccc; border-radius: 5px;padding: 5px; cursor:pointer; background:none;margin-bottom:8px;}
.button_black {color:#444;}
.button_orange {color: #e9510e;}
.button_red {color:#ff0000;}
.buttono {background:none!important; color:#002288; border:none; padding:0!important; font: inherit; font-size: 14px; text-align: inherit; cursor: pointer;}
.ored {color:#ff0000;}
.ogreen {color:#44bb44;}
.button_inherit {background:none!important; color:inherit; border:none; padding:0!important; font: inherit; font-size: inherit; text-align: inherit; cursor: pointer;}
.button_inherit2 {background:none; color:inherit; border:none; padding:0; font: inherit; font-size: inherit; text-align: inherit; cursor: pointer;}
.buttony {background:none; color:#66ffff; border:none; padding:0; font: inherit; font-size: inherit; text-align: inherit; cursor: pointer;}
.button_x {
	background: none; 
	color:inherit; 
	border:none; 
	position: relative;
	top: -8px;
	padding: 5px 2px 0 10px;
	cursor: pointer;
}
.button_cancel {
	color: #ff0000;
	font-size: inherit;
	font-weight: bold;
	cursor: pointer;
	background: transparent;
	border: none;
}
.buttong {background:none; color:inherit; border:2px solid #888; border-radius: 5px; padding:3px 5px 3px 5px; font: inherit; font-size: inherit; cursor: pointer;}

.bfilterbox {
	display:inline-block;
	background:#00909b;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#00707b), to(#00b0bb), color-stop(50%, #00909b));
	border-radius: 2px;
	color: #fff;
	padding: 5px;
	margin: 2px;
	cursor: pointer;
	border: none;
}
.bfilterbox.selected {
	background:#90009b;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#70007b), to(#b000bb), color-stop(50%, #90009b));
}	
button.oranget {
	color: #e9510e;
	font: inherit;
	text-decoration: none;
}
button.oranget:hover {
	font-weight: bold;
}
/*----------------------------------- CHECKBOXES -------------------------------------------------------*/
.chk {
  display: flex;
  gap: 10px; /* Ensures a 10px space between checkbox and text */
}


/*----------------------------------- CIRCLES -------------------------------------------------------*/
.circle {
	display: inline-table;
	width: 50px;
	height: 50px;
	text-align: center;
	font-weight: bold;
	font-size: 28px;
	border-radius: 25px;
	background-color: #002288;
	color: #fff;
}
.circle.small {
	width: 26px;
	height: 26px;
	font-size: 16px;
	border-radius: 13px;
}
.circle.vsmall {
	width: 14px;
	height: 14px;
	font-size: 10px;
	border-radius: 7px;
}
.circle.orange {background-color: #f9510e;}
.circle.red {background-color: #ff0000;}
.circle.green {background-color: #008800;}
.circle.purple {background-color: #aa00aa;}
.circle.violet {background-color: #dd33dd;}
.circle.cyan {background-color: #00aaaa;}
.circle.grey {background-color: #aaa;}
.circle.black {background-color: #000;}
.circle.white {
	background-color: #fff;
	border:2px solid #eee;
	color:#eee;
}
.ctext {
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	font-style: normal;
}
.aftercircle {
	display: inline-block;
	font-weight: bold;
	font-size: 24px;
	color: #aaa;
	position: relative;
	bottom: 13px;
	padding: 0 0 10px 8px;
}
.aftersmall {
	display: inline-block;
	vertical-align:middle;
	margin-top:-13px;
	padding-left:20px;
}
.circlepic {
 	display: inline-table;
    border-radius:50% 50% 50% 50%;
    width:100px;
    height:100px;
}
.tinypic {
 	display: inline-table;
    border-radius:50% 50% 50% 50%;
    width:50px;
    height:50px;
}
.numcircle {
	display: inline-block;
	border-radius: 50% 50% 50% 50%;
	color: #fff;
	font-weight:bold;
	background-color:#000088;
	width:24px;
	height:24px;
	font-size:18px;
	text-align: center;
	padding-top:1px;
}
/*----------------------------------- CIRCLE MENUS (DROPDOWN) -------------------------------------------------------*/
.smenu {
	display:none;
	z-index:100;
	width:310px;
	background-color:#fff;
	font-size:24px;
	text-align:left;
	color:#aaa;
	border:1px solid #bbb;
	position:absolute; 
	top:50px; 
	left:0;
	padding:3px;
}
.hmenu:hover + .smenu {display:block;}
.smenu:hover {display:block;}
.menu_drawer {display:inline-block;width:150px;height:55px;padding:5px 0 5px 0;}
.menu_drawer .aftercircle {font-weight:normal;font-size:20px;}
.menu_drawer:hover {background-color:#f5f5f5;}
.menu_drawer:hover .aftercircle { color:#0044bb; font-weight:bold;}
@media screen and (max-width: 310px) {
	.smenu {width:160px;}
}

/*----------------------------------- DOTS -------------------------------------------------------
--- Example: <p class="loading">Loading<span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></p>
------------------------------------------------------------------------------------------------*/
.loading {
  font-family: system-ui, sans-serif;
}

.dot {
  opacity: 0;
  animation: dotFade 1.5s steps(4) infinite;
}

/* Stagger each dot so they appear one after another */
.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.375s; } /* 1.5s / 4 */
.dot:nth-child(3) { animation-delay: 0.75s; }  /* 2 * 0.375s */

@keyframes dotFade {
  0%, 100% { opacity: 0; }   /* no dot */
  25%      { opacity: 1; }   /* first dot on */
  50%      { opacity: 1; }   /* second dot on (now two visible) */
  75%      { opacity: 1; }   /* third dot on (now three visible) */
}

/*----------------------------------- DRAG & DROP UPLOADS -------------------------------------------------------*/
div[id^="fileup"] {
    background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, #00dddd 25%, white) 100%);
    border: #000088 3px dashed;
	width: 95%;
    max-width: 290px;
    padding: 8px;
}
div[id^="zonedrop"] {
	width:90%;
	margin:0 auto;
    font-size: 14px;
	font-family: 'Arial Narrow',Arial,Helvetica,sans-serif;
	text-transform: uppercase;
}
div[id^="zonedrop"] p {
	text-align: center;
}
div[id^="zonedrop"] input[id^="selectfile"] {
	display: none;
}
div[id^="upl_response"] {
	font-size: 14px;
	font-style: italic;
}
/*----------------------------------- FADE IN/OUT -------------------------------------------------------*/
.fade-in-out {
  opacity: 0;
  animation: fade-in 1s ease-in forwards, fade-out 1s 1s infinite ease-out forwards;
}

@keyframes fade-in {
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*----------------------------------- FLAG ICONS (fi) -------------------------------------------------------*/
.fi {margin-right: 8px;vertical-align: middle;}
.fi-sq {background-image: url("flags/sq.svg");}  /* Somaliland flag */
.fi-sh {background-image: url("flags/sh.svg") !important;}  /* St Helena flag */
/*----------------------------------- HEADERS -------------------------------------------------------*/
.logopos {text-align: left; position: absolute; z-index: 601; margin-left: 10px; margin-top: -10px;}
.titlepos {text-align: left; position: absolute; z-index: 601; margin-left: 160px; width: 290px; margin-top: -10px; font-size: 24px; font-weight: bold; top: 10px;}
.headernav {text-align: left; position: absolute; z-index: 601; margin-left: 450px; font-size: 24px; font-weight: bold; top: 15px;}
.mainpage, .mainpage2 {position:absolute; top:100px; left:0; width: 100%;}
.header-grey {
	font-weight: bold;
	font-size: 28px;
	color: #aaa;
	width: 95%;
	border-bottom: 2px solid #aaa;
	margin: 10px 0 10px 0;
}
.header-grey.smaller {font-size:22px;}

@media screen and (max-width: 900px) {
	.logopos {float:right; position: relative; z-index:598; padding-right: 30px; }
	.titlepos {text-align: left; align:center; margin:0 0 0 10px; padding:0;z-index:598; font-size: 18px; font-weight: bold;}
	.headernav {text-align: center; position: absolute; z-index: 601; margin-left: 0; font-size: 24px; font-weight: bold; top: 105px;}
	.mainpage {top:200px; margin:0 5px 0 5px;}
	.mainpage2 {top:105px; margin:0 5px 0 5px;}
}

/* --------------------  HR LINES ----------------------- */
.blueline, .hrheader { 
	width: 100%;
    height: 20px;
    background: #0064a6;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#eeeeee), to(#eeeeee), color-stop(50%, #0064a6));
	border:0;
}
.hrheader {position: absolute; left:0; top: 65px; z-index:0;}
.qleft {width:100%;display:none;}

@media screen and (max-width: 900px) {
	.hrheader {top: 75px;}
	.qleft {display:inline-block;}
}
/* --------------------  ICONS ----------------------- */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.icon-turnitin {
    display: inline-block; /* Ensures the <i> behaves as an inline element */
    width: 24px; /* Set the icon's width */
    height: 24px; /* Set the icon's height */
	background-color: #308bcb;
	-webkit-mask: url('Fonts/FontAwesome/svgs/solid/turnitin.svg') no-repeat center;
    mask: url('Fonts/FontAwesome/svgs/solid/turnitin.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.icon-ib {
    display: inline-block; /* Ensures the <i> behaves as an inline element */
    width: 24px; /* Set the icon's width */
    height: 24px; /* Set the icon's height */
	background-color: #000088;
	-webkit-mask: url('Fonts/FontAwesome/svgs/solid/ib.svg') no-repeat center;
    mask: url('Fonts/FontAwesome/svgs/solid/ib.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.icon-uwc {
    display: inline-block; /* Ensures the <i> behaves as an inline element */
    width: 80px; /* Set the icon's width */
    height: 24px; /* Set the icon's height */
	background-color: #049688;
	-webkit-mask: url('Fonts/FontAwesome/svgs/solid/uwc.svg') no-repeat center;
    mask: url('Fonts/FontAwesome/svgs/solid/uwc.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.icon-uwcspin {
    display: inline-block; /* Ensures the <i> behaves as an inline element */
    width: 80px; /* Set the icon's width */
    height: 24px; /* Set the icon's height */
	background-color: #049688;
	-webkit-mask: url('Fonts/FontAwesome/svgs/solid/uwc.svg') no-repeat center;
    mask: url('Fonts/FontAwesome/svgs/solid/uwc.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
	animation: spin 2s linear infinite;
}

/*--------------------- INPUT BOX & SPANBOX ------------------------------ 
	Example html:
		<input type="text" class="input green" name="textget" placeholder="enter text" value="currentValue">
*/
input, select, textarea {font: inherit;}

/* Placeholders */
input::-webkit-input-placeholder {color: #ddd; font-style: italic;}
input:-moz-placeholder {color: #ddd; font-style: italic;} /* Firefox 18- */
input::-moz-placeholder {color: #ddd; font-style: italic;} /* Firefox 19+ */
input:-ms-input-placeholder {color: #ddd; font-style: italic;}

.input, .invis {
	width: 95%;
	border: 3px solid #002288;
	padding: 5px;
	border-radius: 5px;
	outline: none;
	color: #002288;
	font-size:inherit;
}
.invis {
	border:0;
	padding:0;
	display:inline-block;
}
.input:read-only {
	color: #666;
	border: 3px solid #888;
}
.input:focus{
	color: #002288;
}
.invis:focus {
	border:1px solid #002288;
}

.input.red {border: 3px solid #ff0000; color: #ff0000;}
.input.green {border: 3px solid #00aa00; color: #00aa00;}
.input.blue {border: 3px solid #0064a6; color: #0064a6;}
.input.purple {border: 3px solid #800080; color: #aa00aa;}
.input.thin {border-width:1px;padding:2px;}
.input.tiny {border:1px solid #00dd00;padding:2px;background-color:#ccc;color:#000;font-size:10px;width:80%;margin-top:3px;}
.input.table {
	border-width:2px;
	padding: 3px;
	border-radius: 3px;
	font-size: 14px;
}
.input:disabled {background:none;border:1px solid #aaa;color:#aaa;pointer-events:none;}
.place_red::placeholder {color: red;}
/* Chrome, Safari, Edge, Opera */
.noarrows::-webkit-outer-spin-button,
.noarrows::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
.noarrows {
  -moz-appearance: textfield;
}
.spanbox, .spanbox_comment {
	display: inline-block;
	border: 3px solid #888;
	padding: 8px 5px 8px 5px;
	border-radius: 5px;
	outline: none;
	color: #666;
	font-size:inherit;
	background-color: inherit;
}
.spanbox {
	width:95%;
}
.groupbox {
	position:relative;
	margin:5px; 
	padding: 5px; 
	width:100%; 
	max-width: 600px;
	border-radius:5px;
}
@media screen and (max-width: 729px) {
	.groupbox {
		margin:5px 20px 5px 5px;
	}
}
/*------------------------------------ LAYOUTS --------------------------------------------------------------------*/
.maxwidth, .layout, .lay600 {
	font-size:14px; 
	padding: 8px 5px 8px 5px;
	width:95%;
	margin:0 5px 0 5px;
	color: inherit;
}
.maxwidth, .lay600 {
	text-align:center;
}
.layout {
	text-align:left;
	max-width:320px;
}
.lay600 {max-width: 600px;}

.jcelll {padding-right: 2px; width:58%;vertical-align:top;}
.jcellr {padding-left: 2px; width: 38%;}
.jcelll, .jcellr { font-size: 14px; line-height: 20px; margin-top: 5px; display:inline-block;}
.jcellr.right {text-align:right;}

/*----------------------------------- LAYOUT DIVS (3 column) -------------------------------------------------------*/
/* Create three equal columns that float next to each other      */
/* Or two columns with 1/3-2/3 split if class is uneven          */
/* Or two columns each 50% of total if class is fifty            */
.jrow {
	max-width: 1200px;
}
.jrow.high {
	margin-top: -12px;
}
.jrow.white {
	background-color:#fff;
	border-radius:12px;
	border: 1px solid #22dddd;
	box-shadow: 2px 2px #bbb;
}
.jcolumn {
	float: left;
	width: 33%;
	max-width: 320px;
	padding: 10px;
	font-size:14px; 
	font-weight:normal;
	text-align:left;
	margin:0 0 10px 5px;
	color: inherit;
}
.jcolumn.uneven:nth-child(2n), .jcolumn.unevenr:nth-child(2n+1) {
	width: 65%;
	max-width: 640px;
	line-height:1.4;
}
.jcolumn.fifty {
	width: 46%;
	max-width: 580px;
	line-height:1.8;
}

.jcolumn.center {
	text-align: center;
}

.jcolumn.jup:nth-child(3n) {margin-top:-24px;}
.jcolumn.jup:nth-child(3n+2) {margin-top:-48px;}

/* Clear floats after the columns */
.jrow:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1093px) {
	.jcolumn {
		width: 95%;
		align: center;
	}
	.jcolumn.uneven:nth-child(2n), .jcolumn.unevenr:nth-child(2n+1), .jcolumn.fifty {
		width: 95%;
		max-width: 640px;
	}
	.jcolumn.jup:nth-child(3n) {margin-top:5px;}
	.jcolumn.jup:nth-child(3n+2) {margin-top:5px;}
	.jrow {
		max-width: 98%;
	}
	.refs {width: 350px;}
}
/*----------------------------------- LAYOUT DIVS (2 column) -------------------------------------------------------*/
/* Create two equal columns that float next to each other        */
.drow {
	max-width: 729px;
}

.dcolumn {
	float: left;
	width: 50%;
	max-width: 320px;
	padding: 10px;
	font-size:14px; 
	font-weight:normal;
	text-align:left;
	margin:0 5px 10px 5px;
	color: inherit;
}
.jrow .dcolumn {
	margin:0;
	padding:0;
}
.jrow .dcolumn .spanbox, .jrow .dcolumn .input, .jrow .dcolumn .select, .jrow .dcolumn .textarea {
	width: 90%;
}
.dcolumn.center {
	text-align: center;
}
/* Clear floats after the columns */
.drow:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 729px) {
	.dcolumn {
		width: 95%;
		align: center;
	}
	.drow {
		max-width: 360px;
	}
}
/*----------------------------------- LAYOUT DIVS (2 column) -------------------------------------------------------*/
/* Create two unequal columns (240px, the rest) that float next to each other        */
/*.qrow {
	width: 98%;
	position: relative;
}

.qcolumn {
	position: absolute;
	left:0;
	width: 18%;
	max-width: 240px;
	padding: 5px;
	font-size:14px; 
	font-weight:normal;
	text-align:left;
	margin:0 5px 10px 5px;
	color: inherit;
}

.qcolumn:nth-child(2n) {
	width: 80%;
	max-width: 80%;
	margin-left: 245px;
} */
.qrow {
	display: flex;
	width: 100vw;
}

.qcolumn {
	width: 240px;
	max-width: 240px;
	padding: 5px;
	font-size:14px; 
	font-weight:normal;
	text-align:left;
	margin:0 5px 10px 5px;
	color: inherit;
	transition: width 0.3s ease;
	overflow: hidden;
}
.qcolumn.closed {
	width: 60px;
}
.qcolumn:nth-child(2n) {
	max-width: 95vw;
	flex-grow: 1;
	transition: width 0.3s ease;
	overflow: auto;
}

.qcolumn i {width: 24px;}
.hamburger {
	display: none;
	color: #fff;
	background: #222266;
	font-style: normal;
	font-size: 1.2em;
	padding: 10px;
	cursor: pointer;
	z-index:100;
}


/* Clear floats after the columns */
.qrow:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	.qcolumn {
		position: relative;
		width: 95%;
		max-width: 95%;
		margin:0 5px 10px 0;
	}
	.qcolumn:nth-child(2n) { 
		width: 95%;
		max-width: 95%;
		margin-left: 0;
		min-width: 300px;
	}
	.qrow {
		max-width: 340px;
	}
}
/*----------------------------------- LAYOUT DIVS (flex) -------------------------------------------------------*/
.flexrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;      /* vertically align items if heights differ */
}
.flex300 {
  display: inline-block;
  width: 300px;
  flex: 0 0 auto;           /* don’t grow, don’t shrink, base on width */
}
.flexcell {
  display: inline-block;
  flex: 1 1 300px;          /* grow, shrink, but prefer at least 300px */
  min-width: 300px;         /* if less than 300px available, it will wrap */
  box-sizing: border-box;   /* so padding/border don’t break layout */
}
/* Make the input fill its wrapper */
.flexcell input, .flexcell textarea {
  width: 100%;
  box-sizing: border-box;
}
/*----------------------------------- LAYOUT DIVS (single column) -------------------------------------------------------*/
.mcolour {width:100%;background-color:#fff;border-bottom:1px solid #888;padding: 5px 0 3px 0;}
.mcolour:nth-child(8n+1) {background-color:#f8f8ff;}
.mcolour:nth-child(8n+2) {background-color:#fff8f8;}
.mcolour:nth-child(8n+3) {background-color:#f8fff8;}
.mcolour:nth-child(8n+4) {background-color:#f8f8f8;}
.mcolour:nth-child(8n+5) {background-color:#f0ffff;}
.mcolour:nth-child(8n+6) {background-color:#fffff0;}
.mcolour:nth-child(8n+7) {background-color:#fff0ff;}

/*--------- qmenu Small Screen ---------------------------------*/
@media only screen and (max-width: 900px) {
	.hamburger {
		display: inline-block;
	}
	.mainpage {margin-top:30px;}
	h4 {text-align:center;}
	.groupbox {padding-top:20px;}
	.qrmenu {
		text-align:left;
	}
	.qmenu {
		font-size: 14px;
		color: #fff;
		background: #222266;
		border-radius: 5px;
		width:200px; 
		z-index:599;
		padding-right:0;
		display: none;
		position: absolute;
		top: 0;
		left: 30;
	}
	.qmenu .aftersmall {
		color: #fff;
	}
	.qnmenu {
		position: absolute;
		top: 0;
		left: 0;
	}
}
.qnmenu {
	transition: margin-right var(--dur) var(--ease);
}
.qrmenu.comments-open .qnmenu { margin-right: var(--panel-w); }
.tile {
	display: inline-block;
	border: 1px solid #888;
	border-radius: 3px;
	padding: 5px;
	width: 150px;
	height:75px;
	margin-bottom: 5px;
	margin-right:5px;
	vertical-align: top;
	text-align: center;
	cursor: pointer;
	color: #000;
}
.tile-blue {
	background: #aaaaff;
}
.tile-green {
	background: #aaffaa;
}
.tile-pink {
	background: #ffaaaa;
}
.tile-selected {
	background: #007777;
	border: 3px solid #000;
	color: #fff;
}
/* --------------------  LINE WITH TEXT ----------------------- */

.separator{
  display: flex;
  align-items: center;
  position: relative;
}

.separator label{
  padding: 0 10px;
  background: #fff;
  left: 100px;
  position: absolute;
}

.separator .line{
  flex: 1;
  height: 1px;
  background-color: #888;
}
/* --------------------  POPUPS ----------------------- */
div[id^="popup"] {
    position: absolute;
    top: -200px;
    left: 0px;
    height: 100%;
	min-height:840px;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    color: #666;
	z-index: 604;
}

.welcome-form, .welcome-wide {
    width: 500px;
	max-width: 96%;
    margin: 0px;
	background-color: #fff;
    font-family: 'Chillax Regular', Helvetica, Arial, sans-serif;
	line-height: 20px;
    position: relative;
    left: 50%;
    top: 400px;
    margin-left: -250px;
    margin-top: -255px;
	border: 2px solid #008888;
    box-shadow: 1px 1px 5px #444444;
    padding: 20px;
	z-index: 605;
}
.welcome-wide {
	width: 90%;
	margin-left: -5%;
	top: 300px;
	left: 10%;
}
@media only screen and (max-width: 960px) {
	.welcome-form { margin-left: -48%;}
}
/* --------------------  RADIO BUTTON ----------------------- */

.segmented {
  --padding: 0.25rem;
  display: flex;
  padding: var(--padding);
  border-radius: 9999px;
  anchor-name: --segmented-button-hover;
  
  &::before,
  &::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    transition: inset 250ms cubic-bezier(0.4, 0, 0.2, 1);
    inset:
      calc(anchor(start) + var(--padding))
      calc(anchor(end) + var(--padding))
      calc(anchor(end) + var(--padding))
      calc(anchor(start) + var(--padding));
  }
  
  &::before {
    background-color: light-dark(#E8E9E9, #1A1C20);
    position-anchor: --segmented-button-hover;
  }
  
  &::after {
    background-color: light-dark(white, #333537);
    position-anchor: --segmented-button-checked;
    box-shadow:
      0 0 0 1px light-dark(#C7C8C8, #484A4C),
      0 1px 3px 0 rgb(0 0 0 / 0.1),
      0 1px 2px -1px rgb(0 0 0 / 0.1);
  }
}

.segmented-button {
  background-color: transparent;
  border: none;
  border-radius: inherit;
  padding: 0.65rem 1.3rem;
  font-size: inherit;
  cursor: default;
  z-index: 1;
  anchor-name: var(--anchor-name-1, --a), var(--anchor-name-2, --b);
  
  &:hover {
    --anchor-name-1: --segmented-button-hover;
  }
  
  &:has(:checked) {
    --anchor-name-2: --segmented-button-checked;
  }
  
  &:has(:focus-visible) {
    outline: 2px solid #007acc;
  }
  
  input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}
.radio-holder {
	display: inline-block;
	padding: 0.7rem;
	border-radius: 9999px;
	background-image: linear-gradient(to right, #e8f8ff, #66eeff);
}
.radio-holder.green {background-image: linear-gradient(to right, #f0f0f0, #66ff66);color:inherit;font-weight:normal;}
.radio-holder.red {background-image: linear-gradient(to right, #f0f0f0, #ff6666);color:inherit;font-weight:normal;}
.radio-holder.purple {background-image: linear-gradient(to right, #f0f0f0, #cc88ff);}
.radio-holder.blue {background-image: linear-gradient(to right, #e8f8ff, #6666ff);color:inherit;font-size:inherit;font-weight:normal;}
.radio-holder.tall {border-radius:20px;}

/*--------------------- SEARCH BOX / SUBMIT BOX ----------------------------- 
	Example html:
		<div class="search" style="width:50%;">
		<input type="text" class="searchTerm" name="searchbox" placeholder="Search by name or ID" value="currentValue">
		<button type="submit" class="searchButton" name="search_button"></button>
	OR	<button type="submit" class="inputButton" name="submit_button"></button>
   		</div>
   	Ensure that font-awesome is loaded in the header
*/
.search {
	width: 95%;
	position: relative;
	display: flex;
}

.searchTerm {
	width: 100%;
	border: 3px solid #002288;
	border-right: none;
	padding: 5px;
	border-radius: 5px 0 0 5px;
	outline: none;
	color: #002288;
}

.searchTerm:focus{
	color: #002288;
}

.searchButton, .inputButton, .uploadButton {
	width: 40px;
	height: 36px;
	border: 1px solid #002288;
	margin-left: -4px;
	outline: none;
	background: #002288;
	text-align: center;
	color: #fff;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
	font-size: 20px;
	font-family: FontAwesome;
	font: var(--fa-font-solid);
}

.searchButton:after{ content: '\f002';}
.inputButton:after{ content: '\f054';}
.uploadButton:after{ content: '\f093';}

/*Resize the wrap to see the search bar change!*/
.wrap{
	width: 30%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* --------------------  SELECT DROP-DOWN ----------------------- 
  Normal type    */
.select {
	width: 95%;
	border: 3px solid #002288;
	padding: 5px;
	border-radius: 5px;
	outline: none;
	color: #002288;
	font-size:inherit;
}

.select.thin {border-width:1px;}
.select_table {
	width: 95%;
	border: 1px solid #ddd;
	padding: 1px;
	border-radius: 3px;
	outline: none;
	color: #002288;
	font-size:inherit;
}
.select:disabled {border-color:#aaa;color:#aaa;pointer-events:none;}
/* --------------------  SHAPES ------------------------------------------------------------------------- 
   HTML:  						<div class="shape" style="background:COLOUR;">X</div>
   For diamond or triangle: 	<div class="diamond" style="background:COLOUR;"><span>X</span></div>
---------------------------------------------------------------------------------------------------------*/
.diamond, .square {
  width: 24px;
  height: 24px;
  background: #000;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  user-select: none;
  font-family: Arial, sans-serif;
}
.diamond {width:20px; height: 20px; transform: rotate(45deg);}
.diamond > * {    /* The > * symbols ensures this applies to all children of a diamond class */
  transform: rotate(-45deg); /* to keep letter upright */
}							   
.triangle, .triangle-invert, .hexagon, .octagon, .pentagon {
  width: 24px;
  height: 24px;
  background-color: #4A90E2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  user-select: none;
}
.pentagon {width: 26px; clip-path: polygon(50% 0%, 93% 35%, 75% 100%, 25% 100%, 7% 35%);}
.hexagon {width: 27.7px; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);}
.octagon {clip-path: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);}
.triangle {clip-path: polygon(50% 0%, 100% 100%, 0% 100%);}
.triangle-invert { clip-path: polygon(0% 0%,100% 0%,50% 100%);}
.triangle > * {    /* The > * symbols ensures this applies to all children of a triangle class */
  transform: translateY(2px);; /* to move text down */
}							   
.triangle-invert > * {    /* The > * symbols ensures this applies to all children of a triangle-invert class */
  transform: translateY(-2px);; /* to move text up */
}							   
.star {
  width: 32px;
  height: 32px;
  background-color: #FFD700; /* gold color for the star */
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  user-select: none;
}
.heart {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #ff4b5c, #ffccd5);
  clip-path: path("M14 24.7l-1.68-1.53C6.32 17.75 3 14.51 3 10.5 3 6.59 6.15 3 9.75 3c1.79 0 3.5.83 4.62 2.16C14.75 3.83 16.46 3 18.25 3 21.85 3 25 6.59 25 10.5c0 4.01-3.32 7.25-9.32 12.67L14 24.7z");
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  user-select: none;
}

/* --------------------  SORTABLE TILES -----------------------  
Also needs the file sortable.js
*/
.wrapper{
  font-family: 'Poppins', sans-serif;
  background: #304B5F;
  padding: 25px;
  max-width: 1200px;
  width: 90%;
  border-radius: 3px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  font-size: 18px;
}
.wrapper .item{
  color: #666;
  /*display: flex;*/
  font-size: 14px;
  margin-bottom: 16px;
  padding: 12px 17px;
  background: #fff;
  border-radius: 3px;
  align-items: center;
  justify-content: space-between;
}
.wrapper .item:last-child{
  margin-bottom: 0px;
}
.wrapper .item i{
  background-color: white;
  font-weight: bold;
  font-size: 24px;
  float:right;
  text-align:center;
  padding-top: 2px;
  width: 28px;
  height: 28px;
  cursor:pointer;
}
.wrapper .butright {
	float:right;
}
.qopt {
	float: left;
}
/*-------------------------------- TABLES ------------------------------------------------------------------------------*/
table {border-collapse: collapse}
table td {font-size: 14px;}
table.resp {border-collapse: collapse; width: 96%;}
table.resp tr {border-top:1px solid #888; vertical-align:middle;}
table.resp tr:nth-child(2n+1) {background-color: inherit;}
table.resp tr:nth-child(2n) {background-color: #f4f4f4;}
table.resp thead tr {background-image: linear-gradient(to right, #000088, #3366cc); color: #ddd;}
table.resp td, table.resp th {padding: 4px 2px 4px 2px; font-size: 14px; text-align: left; height: 25px;}
table.resp.high td {padding: 15px 2px 15px 2px; height:auto;}
table.resp td.h60 { height:60px; }
table.resp td.hauto { height:auto; }
table.resp td.leftline {border-left:1px solid #000;padding-left:3px;}
table.resp tr:nth-child(2n) td.pink {background-color:#fff4f4;}
table.resp tr:nth-child(2n+1) td.pink {background-color:#fffbfb;}

@media only screen and (min-width: 961px) {
	table.resp td.refpad {padding:14px 0 0 10px;}
}

@media only screen and (max-width: 960px) {
	body {width: 100%;}
	table.resp, table.resp td, table.resp tr, table.resp tbody, table.resp thead, table.resp th {
		display: block; 
		width:100%; 
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		box-sizing: border-box; 
		float:left; 
		clear:left;
	}
	table.resp thead tr {position: absolute; top: -9999px; left: -9999px;} //  hides all table headers
	table.resp tr {border: none;}
	table.resp td:before { position: absolute; top: 2px; left: 2px; white-space: nowrap; content: attr(data-label);}
	table.resp td { min-height: 18px; height: auto; border: none; position: relative; padding-left: 30%; text-align: left !important;}  // behaves like  row 
}

/*----------------------------------------- TABS ----------------------------------------------------*/
/* Tab descriptions *******************************
	ntabc   Grey. Selected: Black with blue underline.  Lower case
	ntabc1  Grey. Selected: Green with aqua underline.  Lower case
	ntabc2	Grey. Selected: Blue with orange underline. Uppercase wide
	ntabc3  Grey. Selected: Blue with orange underline. Uppercase
	ntabc4  Grey. Selected: Dark red with red underline. Uppercase
*/
.tabcontent {
	display:none;
	width: 100%;
	min-height: 500px;
}
.ntabcontainer {
	width: 100%;
}
.ntab, .ntabp, .ntabc, .ntabw, .ntabc1, .ntabc2, .ntabc3, .ntabc4 {
	display: inline-block;
	background-color: #fff;
	margin: 0 -1px;
	border: none;
	padding: 8px 10px 8px 10px;
	font-weight: 400;
	cursor: pointer;
}
.ntab {color: #666666;}
.ntab:hover, .ntabp:hover, .ntabw:hover, .ntabc:hover, .ntabc1:hover, .ntabc2:hover , .ntabc3:hover, .ntabc4:hover {
	color: #0000aa;
	background-color:#eee;
}
.ntab.selected {
	background-image: linear-gradient(to bottom, #00cccc, #ffffff);
	color: #000088;
	font-weight: 600;
	border-bottom: 3px solid #ff8800;
}
.ntabp.selected {
	background-color:#0000aa;
	color: #fff;
	border-bottom: 3px solid #ff00ff;
}
.ntabw {
	padding: 2px 5px;
	text-align:left;
}
.ntabw.selected {
	background-color:#eee;
	color: #6666ff;
	border-bottom: 3px solid #00ffff;
}
.ntabc, .ntabc1, .ntabc2, .ntabc3, .ntabc4 {
	color: #888;
	padding: 8px 15px 8px 15px;
}
.ntabc1 {
	font-size:16px;
}
.ntabc2, .ntabc3, .ntabc4 {
	letter-spacing: 0.5em;
	text-transform: uppercase;
}
.ntabc3, .ntabc4 {
	letter-spacing: 0.2em;
}
.ntabc.selected {
	background-image: linear-gradient(to bottom, #ffccaa, #ffffff);
	color:#000;
	border-bottom: 3px solid #000088;
	font-weight:bold;
}
.ntabc1.selected {
	background-color:#fcfcfc;
	color:#008800;
	border-bottom: 3px solid #44dddd;
	font-weight:bold;
}
.ntabc2.selected, .ntabc3.selected {
	background-image: linear-gradient(to bottom, #d0e0ff, #ffffff);
	color:#0000ff;
	border-bottom: 3px solid #ff8800;
	font-weight:bold;
}
.ntabc4.selected {
	background-color:#fcfcfc;
	color:#880000;
	border-bottom: 3px solid #ff0000;
	font-weight:bold;
}

/*--------------------- TEXT AREA ----------------------------- 
	Example html:
		<textarea class="textarea green" name="textget" placeholder="enter text" value="currentValue">
*/

textarea::-webkit-input-placeholder {color: #ddd; font-style: italic;}
textarea:-moz-placeholder {color: #ddd; font-style: italic;} /* Firefox 18- */
textarea::-moz-placeholder {color: #ddd; font-style: italic;} /* Firefox 19+ */
textarea:-ms-input-placeholder {color: #ddd; font-style: italic;}

.textarea {
	width: 95%;
	border: 3px solid #002288;
	padding: 5px;
	height: 60px;
	border-radius: 5px;
	outline: none;
	color: #002288;
	font-size:inherit;
}
.textarea:read-only {
	color: #666;
	border: 3px solid #888;
}

.textarea.red {border: 3px solid #ff0000; color: #ff0000;}
.textarea.green {border: 3px solid #00aa00; color: #00aa00;}
.textarea.blue {border: 3px solid #0064a6; color: #0064a6;}
.textarea.purple {border: 3px solid #800080; color: #aa00aa;}
.textarea:disabled {border-color:#aaa;color:#aaa;pointer-events:none;}

/* --------------------  TOGGLE SWITCH ----------------------- 
	Example html:
		    <div class="switch">
		      <input type="radio" class="switch-input" name="view" id="toggle0" checked>
		      <label for="toggle0" class="switch-label switch-label-off">ON</label>
		      <input type="radio" class="switch-input" name="view" id="toggle1">
		      <label for="toggle1" class="switch-label switch-label-on">OFF</label>
		      <span class="switch-selection"></span>
		      </div>
*/


.switch {
  position: relative;
  float: left;
  top: 13px;
  height: 26px;
  width: 100px;
  margin: 12px 5px 5px 5px;
  background: rgba(255, 255, 239, 0.25);
  border-radius: 3px;
  border: 1px solid #0064a6;
}

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 50%;
  line-height: 26px;
  font-size: 14px;
  color: rgba(128, 128, 128, 0.35);
  text-align: center;
  cursor: pointer;
}
.switch-label:active {
  font-weight: bold;
}

.switch-input {
  display: none;
}
.switch-input:checked + .switch-label {
  color: #fff;
}
.switch-input + .switch-label-off ~ .switch-label {
  margin-left: 50%;
  margin-top: -26px;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 50px;
  /* Note: left: 50%; doesn't transition in WebKit */
}

.switch-selection {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  display: block;
  width: 50%;
  height: 26px;
  border-radius: 3px;
  background-color: #0064a6;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3296c8), color-stop(100%, #0064a6));
  background-image: -webkit-linear-gradient(top, #3296c8, #0064a6);
  background-image: -moz-linear-gradient(top, #3296c8, #0064a6);
  background-image: -ms-linear-gradient(top, #3296c8, #0064a6);
  background-image: -o-linear-gradient(top, #3296c8, #0064a6);
  background-image: linear-gradient(top, #3296c8, #0064a6);
}
.switch.wide {width:200px;}
.switch.w120 {width:120px;}
.switch-label.wide {width: 100px;}
.switch-selection.wide {width: 100px;}
.switch-input + .switch-label-off ~ .switch-label.wide {margin-left: 100px;}
.switch-input:checked + .switch-label-on ~ .switch-selection.wide { left: 100px;}
.switch-input:checked + .switch-label-on ~ .switch-selection.w120 { left: 60px;}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000022;
  background-image: url("https://life.uwcea.org/images/world-night.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* ---- stats.js ---- */

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}
/* --------------------  WORD ROTATOR ----------------------- */

.word {
  position: absolute;
  width: 200px;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cblue {color: #000088;}
.cblue2 {color:#008888;}

/******************************************************************************************************
**     Side panel for comments in unit planning
******************************************************************************************************/
.cfield {
  transition: background .15s, box-shadow .15s;
}
fieldset.cfield { border: 0; min-inline-size: 0; }

kbd {
  margin-left: .4rem;
  padding: 0 .4em;
  font: inherit;
  font-size: .75em;
  color: var(--muted);
  background: #f3f4f6;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
}

.badge {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: .4rem;
  padding: 0 .35rem;
  font-size: .6rem;
  line-height: 1.1rem;
  text-align: center;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}
.badge[hidden] { display: none; }

.flash {
  max-width: 44rem;
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  background: #e7f6ec;
  border: 1px solid #9ad3ae;
  border-radius: 6px;
}

.form-actions { max-width: 44rem; padding: .5rem .6rem; }

/* Field markers: has a comment / its comment box is hovered or focused */
.cm-has    { box-shadow: inset 3px 0 0 var(--note-line); }
.cm-active { background: #eaf0ff; box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Side panel ---------- */
.panel {
  position: absolute;           /* scrolls with the page */
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: var(--panel-w);
  background: var(--panel-bg);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  visibility: hidden;           /* keeps the closed panel out of the tab order */
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.qrmenu.comments-open .panel {
  transform: none;
  visibility: visible;
  box-shadow: -6px 0 18px rgba(0, 0, 0, .08);
  transition: transform var(--dur) var(--ease), visibility 0s;
}
.qrmenu.no-anim .qnmenu,
.qrmenu.no-anim .panel { transition: none; }

.panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 .75rem;
}
.panel h2 { margin: 0; padding: .75rem 0; font-size: 1rem; }

.comment-area { position: relative; flex: 1 1 auto; }

.comment-box {
  position: absolute;           /* top is set by unitplan_comments.js to line up with the field */
  left: 0;
  right: 0;
  top: 0;
  padding: .35rem .5rem .5rem;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.comment-box[hidden] { display: none; }
.comment-box.has-text { background: var(--note); border: 1px solid var(--note-line); }
.comment-box.is-active,
.comment-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(47, 95, 208, .2);
}

.comment-label {
  display: block;
  margin-bottom: .15rem;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.comment-box textarea {
  display: block;
  width: 100%;
  min-height: 1.6rem;
  max-height: 12rem;
  padding: .1rem 0;
  font: inherit;
  font-size: .9rem;
  line-height: 1.35;
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: auto;
}

.top-right-btn {
  position: fixed;
  top: 16px;      /* distance from top of window */
  right: 16px;    /* distance from right of window */
  z-index: 1000;  /* keep it above other content */
}

/* "Save comments only" stays at the bottom of the window while the page scrolls,
   and settles at the bottom of the panel at the end of the page.
   Delete the position/bottom lines if you'd rather it sit only at the page end. */
.panel-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .5rem;
  padding: .7rem 0;
  background: var(--panel-bg);
  border-top: 1px solid var(--line);
}
.comment-status { font-size: .8rem; color: var(--muted); }
.comment-status.dirty { color: #9a5b00; }
.comment-status.error { color: #b3261e; }
#comment-toggle { display: inline-flex; align-items: center; gap: .4rem; }
#comment-toggle .badge,
#comment-toggle kbd { margin-left: 0; }

/* ---------- Narrow / portrait windows: wider panel that overlays the form ---------- */
@media (orientation: portrait), (max-width: 760px) {
  :root { --panel-w: min(90%, 26rem); }
  .qrmenu.comments-open .qnmenu { margin-right: 0; }
  kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qnmenu, .panel { transition: none !important; }
}

@media print {
  .panel, #comment-toggle { display: none; }
  .qrmenu.comments-open .qnmenu { margin-right: 0; }
}