:root {
    --BlueLight: #073763;
    --BlueLight: #073763;
    --BlueDark: #D6E2E9;
}

.Test {color:red;}
.Production {color:green;}
/* Elements */
a {color:var(--BlueLight);font-size:18px;padding:3px;margin:6px;text-decoration:underline}
button {border:1px solid;border-radius:6px; color:#073763;background-color:#D6E2E9;font-size:20px;margin:3px;padding:3px 9px;}
button:active {position:relative;top:1px;left:1px;}
button:hover {cursor:pointer;}
hr {width:100%;height:2px;border-width:0;background-color:#D6E2E9}
img {width:100%;height:auto;margin:0;}
input {text-align:inherit;border:1px solid;border-radius:6px;border-color:inherit;color:inherit;background-color:inherit;outline:none;font-size:24px;margin:0px 0px 3px 0px;padding:0px 3px;width:100%;box-sizing:border-box;}
input[type=checkbox] {margin:0px;margin-right:6px;padding:0;width:18px;height:18px;position:relative;top:1px;}
input[type=radio] {margin:0px;padding:0;width:18px;height:18px;position:relative;top:1px;}
input[readonly] {color:#073763;background-color:var(--BlueDark);opacity:0.7;}
input[type=image] {user-select:none;}
label {box-sizing:border-box;color:inherit;font-size:20px;margin:0;padding:0px 6px;width:100%;}
label:has(> span) {font-size:24px;display:block;margin-top:12px;text-align:left;box-shadow:3px 3px 10px 0px rgba(0,0,0,0.2);cursor:pointer; border:0px solid;border-radius:6px;}
label:has(> input[type=file]) {font-size:24px;display:block;cursor:pointer; border:0px solid;border-radius:6px;}
label:has(> input[type=checkbox]) {font-size:24px;display:block;cursor:pointer; border:0px solid;border-radius:6px;}
label:has(> span):hover {box-shadow:3px 3px 10px 0px rgba(0,0,0,0.4);}
label:has(> span) > input[type=checkbox]  {float:left;top:3px;border-radius:1px;font-size:16px;text-align:center;width:20px;height:20px;}
label:has(> span) > input[type=text]  {border:1px solid #666;float:left;position:relative;margin-right:3px;top:1px;border-radius:1px;font-size:20px;text-align:center;width:24px;height:24px;}
label:has(> span) > space {width:22px;display:inline-block;}
label:has(> span) > small {float:right;border:none;font-size:24px;text-align:right;}
.CheckList > label {margin:0px 0px 6px 0px;}
nav {text-align:center;background-color:white;text-align:center;}
option {font-size:20px;}
p {font-size:24px;margin:3px;text-align:inherit}
section {text-align:left;padding:0px 0px;}
select {width:auto;max-width:100%;text-align:center;color:var(--BlueLight);border:1px solid;border-radius:6px;outline:none;cursor:pointer;width:100%;font-size:24px;padding:0px 20px 0px 0px;background-size:22px;background-image:url('data:image/svg+xml,<svg version="1.1" width="28" height="24" xmlns="http://www.w3.org/2000/svg"><polygon points="3,6 21,6 12,21" style="fill:%23073763;" /></svg>');background-repeat:no-repeat;background-position:right;}
select {-webkit-appearance: none;-moz-appearance: none;}
small {font-size:16px;color:var(--BlueLight);}
.Table {max-height:500px;overflow-y:auto;padding:0;}
table {border: 0px;border-collapse: collapse;width: 100%;background-color: white;overflow-y:scroll;}
thead th {border:1px solid #ccc;text-align:center;position: sticky;left: 0;top: 0;cursor:pointer;}
thead th:first-child input[type=checkbox] {margin-left:0px;padding:0px;}
table th {padding:0px 3px;border-right: 1px solid #ccc;font-weight:normal;font-size: 24px;color: var(--BlueLight);background-color:var(--BlueDark);text-align: left;}
table td {padding:0px 3px;white-space: nowrap;text-align: center;border:1px solid #ccc;font-size: 24px;color: var(--BlueLight);}
table tr:nth-child(even) {background-color: rgba(32,112,144,0.1);}
table td:has(input) > input[type=checkbox] {width:18px!important;height:18px!important;margin:0px!important;box-shadow:none!important;}
table th:has(input) > input[type=checkbox] {width:18px!important;height:18px!important;margin:0px!important;box-shadow:none!important;}
table td:has(input) {box-shadow:none!important;padding:0px 3px;margin:0;}
table td:has(input) > input[type=checkbox]:hover {box-shadow:none!important;}
table td:has(input) > input[type=checkbox]:focus {box-shadow:none!important;}
table tr:nth-child(odd) {background-color: white;}

table td:has(input) {background-color:#E8F0F4}
xxtable td:has(input) > input[type=checkbox] {accent-color:#E8F0F4}
table tr:hover {background-color: rgba(32,112,144,0.3);}
textarea {color:inherit;border:none;text-align:left;font-size:24px;margin:0px;margin-bottom:6px;padding:3px;width:100%;resize:none;box-sizing:border-box;}
a,a,button,h1,h2,h3,h4,h5,h6,img,label,li,option,p,select,small,th,td,textarea {user-select:none;outline:none;font-family:'Times New Roman', Times, serif; }
.Form,a:hover,body,button:hover,input:hover,input:focus,li:hover,select:hover,select.focus,select:focus-visible,textarea:hover,textarea:focus {box-shadow:3px 3px 10px 0px rgba(0,0,0,0.4);}
/* Font Family, Active, Border-Box, Box-Shadow, 
   Color Inherit, Border, Text-align, Display */
/*
a,button,input,label,li,nav,select,td,th,textarea {color:inherit;background-color:inherit;}
*//* Containers */
xxxhtml{overflow-y:clip;}
body{max-width:900px;padding:6px;margin:auto;left:0;right:0;}
header {position:relative;padding:0;margin:0;}
header > div {width:100%;position:absolute;text-align:right;}
main {font-size:0;background-color:white;}
footer {text-align:center;}
footer > a {font-size:16px;}
/* Container Sizes */
colauto {width: auto;} col5 {width: 5%;} col10 {width: 10%;} col15 {width: 15%;} col20 {width: 20%;} col25 {width: 25%;} col30 {width: 30%;} col33 {width: 33.3333%;} col35 {width: 35%;}
col40 {width: 40%;} col45 {width: 45%;} col50 {width: 50%;} col55 {width: 55%;} col60 {width: 60%;} col65 {width: 65%;}
col66 {width: 66.6666%;} col70 {width: 70%;} col75 {width: 75%;} col80 {width: 80%;} col85 {width: 85%;} col90 {width: 90%;}
col95 {width: 95%;} col100 {width: 100%;} 
col150 {width:150px;} col200 {width:200px;} col250 {width:250px;}  col300 {width:300px;}  col400 {width:400px;} col500 {width:500px;} col600 {width:600px;} col700 {width:700px;} col800 {width:800px;} col900 {width:900px;}
col5,col10,col15,col20,col25,col30,col33,col35,col40,col45,col50,col55,col60,col65,col66,col70,col75,col80,col85,col90,col95,col100,col400,col500,col600,col700,col800,col900 
	{text-align:center;vertical-align:top;position:relative;display:inline-block;font-size:0;padding:3px;box-sizing:border-box;}
col100 {display:block;}
/* Text */
h1,h2,h3,h4,h5,h6 {margin:0;text-align:center;background-color:var(--BlueDark);color:var(--BlueLight);font-weight:normal;}
h1 {font-size:42px;} h2 {font-size:36px;} h3 {font-size:28px;} h4 {font-size:24px;} h5 {font-size:20px;} h6 {font-size: 16px}
/* Color */
.BlueWhite {color:#073763;background-color:white}
.RedWhite {color:#900;background-color:white;}
.WhiteRed {color:white;background-color:#900;}
.WhiteBlack {color:white;background-color:black;}
.WhiteBlue {color:white;background-color:#073763;}
.BlueBlueLight {color:#073763;background-color:#D6E2E9;}
.GoldBlue {color:rgb(241,194,50);background-color:#073763;}
.BlueDark {background-color:rgb(7,55,99);}
.WhiteRed * {color:white;background-color:#900;}
/* Menu */
.MenuFixed {position:fixed;top:0;}
#Menu {z-index:3;max-width:900px;width:100%;margin-bottom:0px;}
ul.Active {display:block;z-index:3;}
nav > ul > li:not(.Selected) {opacity:0.7;}
ul {user-select:none;margin:0;padding:9px 9px;background-color:white;text-align:center;list-style:none;}
li {color:#073763;background-color:#D6E2E9;cursor:pointer;border:1px solid;border-radius:6px;font-size:20px;margin:3px 3px;padding:3px;display:inline-block;white-space:nowrap;}
li:hover, table:hover, li.Selected {opacity:1.0!important;box-shadow:3px 3px 10px 0px rgba(0,0,0,0.4)}
ul > li.Selected {color:green;}
li:has(> ul):after {content:"\0025BC";margin-left:3px;font-size:14px;}
li ul {position:absolute;display:none;box-shadow:3px 3px 10px 0px rgba(0,0,0,0.4)}
li > ul > li {display:block;}
.Functions {position:absolute;margin:0;padding:0px 9px;border:none;box-shadow:none;background-color:transparent;}
ul.Functions > li {background-color:inherit;border:none;margin:0; padding:0px 32px 0px 0px;box-shadow:none;top:16px;left:16px;}
ul.Functions > li > ul {margin:16px 0px 0px 3px;}
ul.Functions > li:after {font-size:16px;content:"\002630";}
ul.Functions div:has(> img) {display:flex;flex-wrap:wrap;width:600px;max-height:200px;max-width:600px;overflow-y:auto;}
ul.Functions img {margin:3px;height:150px;width:auto;}
ul.Functions img:hover {box-shadow:3px 3px 10px 0px rgba(0,0,0,0.4);}
li:has(> div) {background-image:url("https://www.cubsworld.org/PageIcons/SelectImage.png")}
/* Form */
#Forms {}
.Form {margin:auto;top:100px;max-width:900px;background-color:white;display:none;text-align:center;padding:6px;position:absolute;}
.Form nav:first-of-type {padding:0;margin:0;position:absolute;left:0;width:100%;text-align:right;background-color:transparent;}
.Form nav:first-of-type input:first-of-type {margin:0px; width:28px;height:22px;border:none;content:url(images/Printer.png);}
.Form nav:first-of-type button:first-of-type {color:inherit;background-color:transparent;font-size:28px;margin:0;padding:0;margin-left:6px;margin-right:12px;border:none;}
.xxxxForm nav:first-of-type button:first-of-type:after {content:'\002715';}
.Form h3:first-of-type:hover {cursor:pointer;}
.Form.Active {display:block;}
.Form:not(.Active) {display:none!important;}
.FormSave {float:right;margin-top:-35px;display:inline-block;background-color:transparent;}
.FormSave > button {color:#900;}
.FormTopRight {float:right;background-color:transparent;}
.FormTopLeft {float:left;background-color:transparent;}
/* Buttons */
.ButtonPrinter {margin:9px;width:28px;height:22px;border:none;}
.xxButtonClose {color:inherit;background-color:transparent;font-size:28px;margin:0;padding:3px 3px;margin-left:3px;margin-right:12px;border:none;}
/* Effects*/
.Busy {pointer-events: none;}
.Disabled {pointer-events: none;opacity: 0.5;}
.Hidden {display:none;}
.Visible {visibility:hidden}
.ArrowDown:after {content:'\0025BC';margin-left:3px;}
.ArrowRight:after {content:'\0025BA';margin-left:3px;}
.ArrowLeft:before {content:'\0025C4';margin-right:3px;}
.Block {display:block;width:100%;}
.Border {border:1px solid #D6E2E9;margin-bottom:6px;}
.Shadow {box-shadow:3px 3px 10px 0px rgba(0,0,0,0.4)}
.Center {text-align:center;}
.Left {text-align:left;}
.Middle {vertical-align:middle;}
.Bottom {vertical-align:bottom;}
.xxxFlyer {display:inline-block;min-height:400px;max-height:400px;overflow-y:auto;}
.xxxFlyer {display:inline-block;}
.Flyer p {min-height:24px;text-align:left;}
#xxxEventFlyer {min-height:400px;max-height:400px;overflow-y:auto;}
#xxxNewsFlyer {min-height:400px;max-height:400px;overflow-y:auto;}
#ApplicationForm textarea {height:129px}
#ProfileForm textarea {height:255px}
#NewsLetter a {color:white;}
xxxx#RegistrationSection input[type=checkbox] {width:20px;height:20px;}
xxxx#RegistrationSection label {display:block;}
.NewsArticle {overflow:hidden;background-color:rgb(7, 55, 99);padding:12px;}
.NewsArticle p {margin:1px;text-align:left;font-size:24px;color:white;}
.NewsArticle p:first-child {text-align:center;font-size:32px;color:rgb(241,194,50);}
.NewsArticle a {color:white;}
.xxxEditable {}
.xxxEditable img:focus {outline:3px solid #900;}
.xxxEditable img {-webkit-user-select:none;user-select:none;-webkit-user-drag:none;}
.NewsArticle img {float:left;border-radius:9px;margin:9px;width:33%;height:auto;vertical-align:top;}
::placeholder {color:#D6E2E9;text-align:center;}
.NewsComment {padding:9px;background-color:rgb(7, 55, 99);text-align:left;}
.NewsComment small {margin-left:12px;font-size:12px;color:white;}
.NewsComment p {min-height:30px;padding:6px;font-size:18px;border:1px solid #bbb;border-radius:6px; color:white;border:1px solid white;}
.NewsComment span {color:white;position:relative;top:18px;margin-right:6px;cursor:pointer;font-size:24px;font-weight:bold;padding-right:6px;float:right;}
.NewsComment div {min-width:98%;padding:9px;font-size:20px;min-height:60px;display:inline-block;color:#333;background-color:white;border-radius:6px;}
.NewsCommentForm {padding:9px;background-color:rgb(7, 55, 99);text-align:left;}
.PageEdit {max-height:600px;overflow-y:auto;}
.PageEdit p {outline: none;cursor: pointer;min-height:24px;}
.PageEdit p.Selected {outline:1px solid red;}
.PageEdit span.Selected {outline:1px solid red;}
.PageEdit img.Selected {outline:1px solid red;}
.xxxPageTools {background-color:white;display:flex;flex-direction:row;align-items:center;justify-content:center;}
.PageTools {background-color:white;text-align:center;}
.PageTools input[type=image].Selected {border-color:#279;}
.PageTools input[type=image] {margin:3px;border:3px solid white;padding:0;display:inline-block;width:42px;}
.PageTools input[type=image]:active {position:relative;top:1px;left:1px;}
.PageTools ul {margin:0;padding:0;display:inline-block;}
.PageTools div {min-width:400px;min-height:200px;display:none;position:absolute;background-color:white;border:1px solid #ccc;padding:9px;max-width:500px;max-height:200px;overflow-y:auto;}
.PageTools div > img {margin:3px;display:inline-block;height:100px;width:auto;}
.PageTools div > img:hover {box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.4);}
.PageTools div.Active {display:inline-block;z-index:3;}
.Icon {position:relative;top:32px;z-index:3;margin:3px;display:inline-block;height:28px;width:auto;}
.Icon:hover {box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.4);}
/* Survey */
.Survey {background-color:white;}
.Survey label {display:block;user-select:none;}
@media only screen and (max-width: 600px) {
body {padding:0;box-shadow:none;}
footer {display:none;}  
.Page {width:100%!important}
.Form {width:95%;}
}
@media print {
header {display:none;}
#Menu {display:none;}
footer {display:none;}
body:has(.Form.Active) > main {display:none;}
nav {display:none;}
button {display:none;}
.Form {width:100%;margin:auto;position:unset;top:0px;}
.xxForm section {display:unset;}
.Table {max-height:unset;}
body {box-shadow:none!important;}
html {margin:0;}
main {max-height:unset!important;}
  /* Improve readability */
    th, td {
        font-size: 16px !important; /* Smaller font for print */
    }
    xxth:nth-child(1), xxtd:nth-child(1) { display:none; }
  /* Prevent row content from breaking across pages */
  xxtr {page-break-inside: avoid;}
  /* Prevent table header from breaking alone */
  xxthead {display: table-header-group;}
}