/* CSS for bsndsipe */


/* roboto-condensed-300 - latin */
@font-face {font-display: swap;font-family: 'Roboto Condensed';font-style: normal;font-weight: 300;src: url('/fts/roboto-condensed-v27-latin-300.woff2') format('woff2');}
/* roboto-condensed-regular - latin */
@font-face { font-display: swap; font-family: 'Roboto Condensed'; font-style: normal; font-weight: 600; src: url('/fts/roboto-condensed-v27-latin-600.woff2') format('woff2');}
/*
 * https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j
 * https://css-tip.com/screen-dimension/
*/
@property --100vw { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --100vh { syntax: "<length>"; initial-value: 0px; inherits: false; }

:root { --100vw: 100vw; --100vh: 100vh; --px-width: calc(tan(atan2(var(--100vw), 1px))); --px-height: calc(tan(atan2(var(--100vh), 1px)));
  /* calc() wrapper required for Safari, bug: // https://bugs.webkit.org/show_bug.cgi?id=263000 */
  /* GENERAL Basic definitions -> var() */
	--shadow:2px -2px 6px 1px #cbcbcb;
	--darkborder: 1px solid #222;
	--midborder: 1px solid #777;
	--lightborder: 1px solid #eee;
	--blueborder: 1px solid hsl(200, 96%, 40%);
	--darkbg: hsl(200, 96%, 40%);
	--disable: 1px dotted #666;
	--grey: #777;
	--light-grey: #eee;
	--med-grey: #666;
	--dark-grey: #444;
	--highlight-color: #2980b9;
	/*Animation styles*/
	--timing: .4s;
	--ease: cubic-bezier(0.865, 0.140, 0.095, 0.870);
}

body{font-family: 'Roboto Condensed';font-weight:300;sans-serif;background-color:rgba(87,167,241,0.20); height: calc(var(--px-height) * 1px);
width: calc(var(--px-width) * 1px);}
button, input[type="submit"], input[type="reset"] {	background: none;color: inherit;border: none;padding: 0;font: inherit;cursor: pointer;outline: inherit;}
#page {margin:auto;min-height:700px;padding:8px;min-width:800px; width:calc(var(--px-width) * 0.8 * 1px);max-width:1280px;background-color:#fff;}
#container {min-height:700px;max-width:1275px;margin:0 10px;} 
#head {height:65px;background-color:none;padding:0;}
#foot {margin:auto;margin-left:-4px;height:60px;padding:1em 1em 1em 0.5em;min-width:820px;max-width:1280px;background-color:#fff;}
a {text-decoration: none;}
h2 {font-size:1.8rem;font-weight:300 !important;color:hsl(200, 96%, 40%) !important;margin-bottom:0.5rem;} 
h3 {font-size:1.3rem;font-weight:300 !important;color:hsl(200, 96%, 40%) !important;} 
h4 {font-size:1.1rem;font-weight:300 !important;color:hsl(200, 96%, 40%) !important;}
.mr05{margin-right:0.5em;}
.ndsp {display:none;}
.navbox {font-size:1.2em; padding:1px 0.4em;margin-top:1.3rem;font-weight:600;color:rgba(100, 100, 100, 0.8);cursor:pointer;}
.navbox.active {color:hsl(200, 96%, 40%);cursor:default;}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box;}
.btn, input[type=submit] {padding:7px 8px;background-color:hsl(200 96% 40%);color:white;border-radius:5px;cursor:pointer;}
/*datepicker*/
.ui-datepicker-title,.ui-datepicker-calendar {font-family:'Roboto Condensed';}
#ui-datepicker-div {width:200px;}

/* FORM ELEMENTS*/
/* Selects */
select {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 5px;font-size: 1rem;width:auto;border: var(--blueborder);padding:0 1.8em 1px 0.4em;background-color:white;font-family:'Roboto condensed'!important;font-weight:200;height:32px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAIAAAAY12rUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJFJREFUeNpi/P//PwM1ABMDlcAgNOjy089kaPv4/c+jd99RDMpafhmISDXFZ+qp6Yceooh++Pbbpvto5rJL/4kDuNQz4JEj3hSoQUSahV8NA5HqCNrEQIxqYtzLQFAPkSHIgN8XxMcDI9ZMC0kputK8wOQKJKdF6hJOXeTFEbEugruLn5OFyOTOOFoeEQQAAQYAae5A514WfKgAAAAASUVORK5CYII=);
background-position: right;background-repeat: no-repeat;}
select:focus + .focus {font-family:'Roboto Condensed';font-weight:100;position: absolute;top: -1px;left: -1px;right: -1px;bottom: -1px;border: 2px solid var(--select-focus);border-radius: inherit;}
/*select:has(option[value="0"]:checked){border:1px solid red;}*/
select:not(:has(option[value="0"]:checked)){border: var(--blueborder)}
select:disabled:not(:has(option[value="0"]:checked)),select:disabled:has(option[value="0"]:checked){border:var(--disable)}

/*checkboxes*/
input[type="checkbox"] {
	/* Remove most all native input styles */-webkit-appearance: none;appearance: none;
	/* For iOS < 15 */background-color: var(--lightbg);
	margin: 0;font: inherit;color: currentColor;width: 1.15em;height: 1.15em;border: var(--blueborder);border-radius: 0.15em;transform: translateY(-0.075em);  display: grid;place-content: center;}
input[type="checkbox"]::before {content: "";width: 0.65em;height: 0.65em;clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);transform: scale(0);transform-origin: bottom left;transition: 120ms transform ease-in-out;box-shadow: inset 1em 1em var(--darkbg);
/* Windows High Contrast Mode */background-color: CanvasText;}
input[type="checkbox"]:checked::before {transform: scale(1);}
input[type="checkbox"]:disabled {border:1px dotted #666;}

/*text inputs*/
input[type="text"],input[type="password"] {-webkit-appearance: none;appearance: none;
	/* For iOS < 15 */background-color: var(--lightbg);
	padding-left:6px;font: inherit;color: currentColor;height: 2em;border: var(--blueborder);border-radius: 0.2em;}
input[type="text"]:disabled {border: var(--disable);color:var(--grey);}

/*Overlay*/
.overlay { position: fixed;top: calc((var(--px-height) * 1px)-900px); bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.75); transition: opacity 500ms; visibility: hidden; opacity: 0;}
.overlay:target {visibility: visible;opacity: 1;}
.popup { margin: 30px auto; padding: 20px; background: #fff; border-radius: 6px; max-width:920px; min-width:320px; position: relative; transition: all 5s ease-in-out; }
.popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; }
.popup .close:hover { color: #06D85F; }
.popup .content { max-height: 30%; overflow: auto; }


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

/*** Accordion ***/
/* Basic Accordion Styles */
.accordion { position: relative;  
  /* Radio Inputs */
  input[name='panel'] { display: none; }
  /* Labels */
  label {
	transition: all var(--timing) var(--ease); display: block; padding: 0.6em 1em 1.5em; width: 100%; height:2.5rem; border-bottom: 0.1em solid hsl(200, 96%, 80%); color: hsl(0, 100%, 100%); font-size: 1.1rem; line-height: 1rem; cursor: pointer; }
  input:checked + label { color: $highlight-color;     
}
/* Panel Content */
  .accordion__content {overflow: hidden;max-height: 0em;position: relative;padding: 0 1.5em;display: block;padding: 0 1em;width: 100%;background: hsl(0, 1%, 90%);transition: all 0.5s ease;    
    	.accordion__header {padding: 1em 0;}
    .accordion__body {		
    }
  } 
}
input[name='panel']:checked ~ .accordion__content { /* Get this as close to what height you expect */ max-height: 50em;transition: all 1s ease!important;  }

li {
	position: relative;
	list-style-type: none;
	list-style-position: outside;
}

li::before {
	content: "▷"; /* Default bullet */
	color: orange;
	margin-right: 6px;
	margin-left:-18px;
}


@media (screen (801px <= width <= 1000px)) { 
  #page {padding:8px;width:800px;}
  #container {max-width:780px;margin:0 10px;}
}