@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro|Chewy|Tangerine');
/*----------------------------------------------
CSS Settings For HTML On PTAU.dk
font-family: 'Chewy', cursive;
font-family: 'Anonymous Pro', monospace;
font-family: 'Tangerine', serif;
Copyright © 2025 BIT_on_Tech™ 
Simplified Tech of Tomorrow 
All rights reserved • bitveil.dk
------------------------------------------------*/
* {margin: 0;padding: 0;/* box-sizing: border-box; */}

:root {
  --ct-bg-default:		#101418;  /* baggrund */

  --ct-text-default:	#e0e0e0;  /* brødtekst */
  --ct-text-shadow:		#484848;  /* You know it */

  --dz-bg:				rgba(0, 204, 153, 0.1);
  --dz-border:			var(--ct-theme-light);
  --dz-hover-bg:		rgba(0, 163, 122, 0.15);
}

html, body {
	height: 100%; /* overflow: hidden; */
	width: 100vw;
}

body {	/* Base baggrund og tekst */
	font-size: 16px; /* 1rem = 16px */
	text-align: center;
	color:            var(--ct-text-default) !important;
	background-color: var(--ct-bg-default) !important;
}
content {
	position : relative;
}
#page-wrap  {
	margin: 0 auto;
	width: 400px;
}

/* Fælles for h1-4 overskrift typerne*/ 
h1, h2, h3, h4 {
  font-family:  'Chewy', cursive;
  text-shadow: 0.08em 0.08em 0.08em var(--ct-text-shadow);
  text-align:   center;
  color:        var(--ct-theme-light);
  box-sizing:   border-box;
  margin:    0.08rem;
}

/* Der variererende properties per overskrift type */
h1 { font-size: 1.88em; }
h2 { font-size: 1.44em; }
h3 { font-size: 1.20em; }
h4 { font-size: 1.00em; }

table {
	width: 100%;
	margin: auto;
}
/* Unvisited link and Visited link */
a:link, a:visited {
	color: var(--ct-theme-light);
  	transition-duration: 0.2s;
}
/* Mouse over and selected link */
a:hover, a:active {
	color: var(--ct-theme-dark);
}
a {
    font-size: 1.2em;
	margin-bottom: 4px; /* Change this value to add more or less space */
	display: inline-block; /* This is necessary for the margin to apply */
}
}
.ct-bg-img {
	min-width: 300px;
	max-width: 384px;
	width: 96vw;
	background-position: center;
	background-size: cover;
	/* align-content: center; */
	}
.ct-border-box {
	min-width:280px;
	max-width: 400px;
	margin: auto;
	padding: 0.4em 0.2em;
	box-sizing: border-box;
	border-radius: 2em;
	border: 0.15em solid var(--ct-theme-light);
	text-align:center;
}
.message{
	font-family: 'Chewy', cursive;
	font-size:1.2em;
	text-align:center;
	color: var(--ct-theme-light);
}
.error{
	font-family: 'Chewy', cursive;
	font-size:1.2em;
	text-align:center;
	color:red
}
.passed{
	font-family: 'Chewy', cursive;
	font-size:1.5em;
	text-align:center;
	color:#00b33c
}
.failed{
	font-family: 'Chewy', cursive;
	font-size:1.5em;
	text-align:center;
	color:red
}
.dataout {
    min-width: 100px;
    max-width: 100%;      /* Tillader at tage op til fuld bredde af forældrecontaineren */
    font-family: 'Anonymous Pro', monospace;
    font-size: 80%;
    margin: 0.5em 0.1em 0.2em;
    text-align: center;
    font-weight: bold;
    color: #000000;
    word-wrap: break-word;     /* Tillader brydning af lange ord */
    overflow-wrap: break-word; /* Samme som word-wrap */
    word-break: break-all;     /* Bryder ord ved enhver karakter for at undgå overflow */
    white-space: pre-wrap;     /* Beholder mellemrum og linjeskift, tillader indpakning */
    overflow: hidden;          /* Skjuler indhold, der løber udenfor containeren */
    box-sizing: border-box;    /* Inkluderer padding og border i elementets samlede bredde og højde */
}
.footer {
	font-family:	'Chewy', cursive;
	max-width:		400px;
	margin:			0 auto;
	padding:		0em 0em;
	box-sizing:		border-box;
	font-size:		0.88em;
	text-shadow:	0.08em 0.08em 0.04em var(--ct-text-shadow);
	text-align:		center;
	color:			var(--ct-theme-light);
	white-space:	nowrap;
	overflow-x:		auto;
}
.pretty {
	font-family: 'Tangerine', serif;
	font-size:2.4em;
	text-align:center;
	color:#000000
}
.mybutton {
	width: max-content;
	padding: 0.1em 0.2em;
	margin: 0.1em 0.1em 0.5em;
	color:#ffffff;
	background-color: var(--ct-theme-light);
	border:2px solid var(--ct-theme-light);
	font-family: 'Chewy', cursive;
	font-size:20px;
	cursor:pointer;
	border-radius: 0.4em;
	transition-duration: 0.2s;
}
.mybutton:hover, .mybutton:active {
	background-color: var(--ct-theme-dark);
}

input {
	min-width: max-content;
	max-width: 15em;
	font-family: 'Chewy', cursive;
	font-size: 1.2em;
	padding: 0.2em 0.4em;
	margin: 0.2em;
	border:0.1em solid var(--ct-theme-light);
	border-radius:0.4em;
}
input[type=text],input[type=password],input[type=number],input[type=time],input[type=tel] {
	color: var(--ct-theme-light);
	width: -webkit-fill-available;
}
input[type=submit] {
	color:#ffffff;
	background-color: var(--ct-theme-light);
	cursor:pointer;
	width: fit-content;
	transition-duration: 0.2s;
}
input[type=submit]:hover, input[type=submit]:active {
	background-color: var(--ct-theme-dark);
}

input[type=checkbox].css-checkbox {
	position:absolute;
	z-index:-1000;
	left:-1000px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height:1px;
	width:1px;
	margin:-1px;
	padding:0;
	border:0;
}

input[type=checkbox].css-checkbox + label.css-checkbox-label {
	padding-left:35px;
	height:20px; 
	display:inline-block;
	line-height:20px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-family: 'Chewy', cursive;
	font-size:1.2em;
	color: var(--ct-theme-light);
	vertical-align: left;
	cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-checkbox-label {
	background-position: 0 -20px;
}

label.css-checkbox-label {
	background-image: var(--ct-theme-checkbox-img);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Style for dropdown select */
.select-css {
    display: block;
    color: var(--ct-theme-light);
	min-width: max-content;
	max-width: 15em;
	font-family: 'Chewy', cursive;
	font-size: 1.2em;
	padding: 0.2em 0.4em;
	margin: 0.2em;
	border:0.1em solid var(--ct-theme-light);
	border-radius:0.4em;
/*
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
 
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxNiA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xLjMsMC4yTDcuMyw2LjJDOCw2LjkgOC42LDYuOSA5LjMsNi4yTDkuMyw2LjJMMTUuMywwLjJDMTYuMS0wLjcgMTYuMS0wLjcgMTUuMywwLjJMMTUsMC44QzE0LjIsMS43IDEzLjEsMi42IDEyLDMuM0MxMC45LDIuNiA5LjgsMS43IDguNywwLjggQzcuOSwwLjEgNy4xLDAuMSA2LjMsMC44TDEuMywwLjJDMC41LTAuNyAwLjUsLTAuNyAxLjMsMC4yTDAsMC44TDAsMC44WiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPgo=");
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
*/
}




.select-css::-ms-expand {
    display: none;
}

.select-css:hover {
    border-color: var(--ct-theme-dark);
}

.select-css:focus {
    border-color: var(--ct-theme-dark);
    box-shadow: none;
    outline: none;
}

/*
textarea.css-number {
    min-width: max-content;
    max-width: 15em;
    font-family: 'Chewy', cursive;
    font-size: 1.2em;
    padding: 0.2em 0.4em;
    margin: 0.2em;
    border:0.1em solid var(--ct-theme-light);
    border-radius:0.4em;
    color: var(--ct-theme-light);
    height: 4em;
    width: -webkit-fill-available;
    resize: vertical;
}
*/

textarea {
    min-width: max-content;
    max-width: 15em;
    font-family: 'Chewy', cursive;
    font-size: 1.2em;
    padding: 0.2em 0.4em;
    margin: 0.2em;
    border:0.1em solid var(--ct-theme-light);
    border-radius:0.4em;
    color: var(--ct-theme-light);
    height: 4em; /* 1em is roughly the height of one line of text, so 4em should give you a textarea about 4 lines high */
    width: -webkit-fill-available;
    resize: vertical; /* This allows the user to resize the textarea, but only vertically */
}


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

td.keyname {
    font-family: 'Chewy', cursive;
    font-size: 1em;
    color: var(--ct-theme-light);
    text-align: left;
    padding: 0.5em;
    border-bottom: 1px solid var(--ct-theme-light);
    width: 30%;
}

td.value {
    font-family: 'Anonymous Pro', monospace;
    font-size: 1em;
    color: #000000;
    text-align: left;
    padding: 0.5em;
    border-bottom: 1px solid var(--ct-theme-light);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ct-border-box-left-json {
	min-width:280px;
	max-width: 400px;
	margin: auto;
	padding: 0.4em 0.2em;
	box-sizing: border-box;
	border-radius: 2em;
	border: 0.15em solid var(--ct-theme-light);
	text-align:left;
}

/*----------------------------------------------
  Dropzone styling
  Copyright © 2025 BIT_on_Tech™ • Simplified Tech of Tomorrow • All rights reserved • bitveil.dk
----------------------------------------------*/

#dropzone {
  background-color: var(--dz-bg);
  border:           2px dashed var(--dz-border);
  border-radius:    8px;
  padding:          1rem;
  text-align:       center;
  color:            var(--ct-theme-light);
  font-weight:      bold;
  transition:       background-color 0.2s, border-color 0.2s, color 0.2s;
  cursor:           pointer;
}
#dropzone:hover {
  background-color: var(--dz-hover-bg);
  border-color:     var(--ct-theme-dark);
  color:            var(--ct-theme-dark);
}

/* For other modes: 400px page-wrap, co-ptau-border-box one column */
#ot-ptau-page-wrap {
	margin: 0 auto;
}

.ot-ptau-border-box {
    display: block;
	position: relative;  
	min-width:280px;
	max-width: 400px;
	border-radius: 2em;
	padding: 0.8em 0.2em 0.2em 0.2em;
	border: 0.15em solid var(--ct-theme-light);
	text-align:center;
	margin: auto;
    margin-bottom: 1.0em;
}

/* For landscape mode and screen width larger than 800px: 800px page-wrap, ot-ptau-border-box in two columns */
@media screen and (min-width: 800px) and (min-aspect-ratio: 1/1) {
    #ot-ptau-page-wrap {
        width: 800px;
    }
    .ot-ptau-border-box {
        display: inline-block;
        width: calc(50% - 1em); /* Half the width of the container minus some margin */
        vertical-align: top;
        margin-bottom: 1.0em;
    }
}

/* Box-titel med accentbaggrund og læsbar tekst */
.ot-ptau-boxtitle {
  position:       absolute;
  top:            -1.0em;
  left:           50%;
  transform:      translateX(-50%);
  background-color: var(--ct-bg-default) !important; /* din orange pastel */
  color:            var(--ct-bg-default)  !important; /* typisk mørk tekst i darkmode */
  padding:          0 5px;
  white-space:      nowrap;
}

/*----------------------------------------------
  SITE-WIDE DARKMODE OVERRIDES
  Copyright © 2025 BIT_on_Tech™ 
----------------------------------------------*/


/* Kodeblokke */
pre, code {
  background-color: #1e1e2e !important;
  color:            var(--ct-text-default) !important;
}

/* Tabeller og dataud: */
table, td, th, .dataout, td.value {
  color: var(--ct-text-default) !important;
}

/* Formularfelter (input, select, textarea) */
input, select, textarea {
  background-color: #1e1e2e !important;
  color:            var(--ct-text-default) !important;
  border:           0.1em solid var(--ct-theme-light) !important;
}

/* Knapper / submit */
input[type=submit], .ct-btn {
  background-color: var(--ct-theme-light) !important;
  color:            var(--ct-bg-default) !important;
}
input[type=submit]:hover, .ct-btn:hover {
  background-color: var(--ct-theme-dark) !important;
  color:            var(--ct-bg-default) !important;
}

/* Dropzone bruger allerede var(--dz-*) så den hopper med */

#progressWrapper {
  width: 88%;
  max-width: 400px;
  height: 20px;
  background: #eee;
  border-radius: 4px;
  margin: 10px auto;
  overflow: hidden;
}

#progressFill {
  height: 100%;
  width: 0%;
  background: var(--ct-theme-light);
  transition: width 0.2s ease;
  border-radius: 4px 0 0 4px;
}