/*
===========================
Auto generated table of content
#001  style                         ___root.style.php
#002  style                         __reset.style.css
#003  style                         _body.style.css
#004  style                         box.style.css
#005  style                         buttons.style.css
#006  style                         cardHolder.style.css
#007  style                         cnc_code_editor.style.css
#008  style                         dialog.style.css
#009  style                         focus.style.css
#010  style                         form.style.css
#011  style                         formel.style.css
#012  style                         h.style.css
#013  style                         header.style.css
#014  style                         main.style.css
#015  style                         matematik.style.css
#016  style                         pageSize.style.css
#017  style                         primaryNavigation.style.css
#018  style                         section.style.css
#019  view                          users.view.php
===========================
*/





/*
===========================
#001  style
      ___root.style.php
===========================
*/


:root {

  /*
  ===========================
    Colors
    [ h = hue 0 - 360 | s = saturation 0 - 100% | l = lightness 0 - 100% | a = alpha 0.0 - 1.0 ]
  ===========================
  */

  /* black to white */

  --b2w-0: hsla(0, 0%, 0%, 1);
  --b2w-4: hsla(0, 0%, 4%, 1);
  --b2w-8: hsla(0, 0%, 8%, 1);
  --b2w-12: hsla(0, 0%, 12%, 1);
  --b2w-16: hsla(0, 0%, 16%, 1);
  --b2w-20: hsla(0, 0%, 20%, 1);	 /* primary text color */
  --b2w-24: hsla(0, 0%, 24%, 1);
  --b2w-28: hsla(0, 0%, 28%, 1);
  --b2w-32: hsla(0, 0%, 32%, 1);
  --b2w-36: hsla(0, 0%, 36%, 1);
  --b2w-40: hsla(0, 0%, 40%, 1);
  --b2w-44: hsla(0, 0%, 44%, 1);
  --b2w-48: hsla(0, 0%, 48%, 1);
  --b2w-52: hsla(0, 0%, 52%, 1);
  --b2w-56: hsla(0, 0%, 56%, 1);
  --b2w-60: hsla(0, 0%, 60%, 1);
  --b2w-64: hsla(0, 0%, 64%, 1);
  --b2w-68: hsla(0, 0%, 68%, 1);
  --b2w-72: hsla(0, 0%, 72%, 1);
  --b2w-76: hsla(0, 0%, 76%, 1);
  --b2w-80: hsla(0, 0%, 80%, 1);
  --b2w-84: hsla(0, 0%, 84%, 1);
  --b2w-88: hsla(0, 0%, 88%, 1);
  --b2w-92: hsla(0, 0%, 92%, 1);
  --b2w-96: hsla(0, 0%, 96%, 1);	 /* primary body background color */
  --b2w-100: hsla(0, 0%, 100%, 1);	 /* primary box and card background color */


  /* black with transparency */

  --blackT-1: hsla(0, 0%, 0%, 0.1);
  --blackT-2: hsla(0, 0%, 0%, 0.2);
  --blackT-3: hsla(0, 0%, 0%, 0.3);
  --blackT-4: hsla(0, 0%, 0%, 0.4);
  --blackT-5: hsla(0, 0%, 0%, 0.5);
  --blackT-6: hsla(0, 0%, 0%, 0.6);
  --blackT-7: hsla(0, 0%, 0%, 0.7);
  --blackT-8: hsla(0, 0%, 0%, 0.8);
  --blackT-9: hsla(0, 0%, 0%, 0.9);

  /* blue */
  
  --blue-4: hsla(210, 100%, 4%, 1);
  --blue-8: hsla(210, 100%, 8%, 1);
  --blue-12: hsla(210, 100%, 12%, 1);
  --blue-16: hsla(210, 100%, 16%, 1);
  --blue-20: hsla(210, 100%, 20%, 1);
  --blue-24: hsla(210, 100%, 24%, 1);
  --blue-28: hsla(210, 100%, 28%, 1);
  --blue-32: hsla(210, 100%, 32%, 1);
  --blue-36: hsla(210, 100%, 36%, 1);
  --blue-40: hsla(210, 100%, 40%, 1);
  --blue-44: hsla(210, 100%, 44%, 1);
  --blue-48: hsla(210, 100%, 48%, 1);
  --blue-52: hsla(210, 100%, 52%, 1);
  --blue-56: hsla(210, 100%, 56%, 1);	 /* primary blue color */
  --blue-60: hsla(210, 100%, 60%, 1);
  --blue-64: hsla(210, 100%, 64%, 1);
  --blue-68: hsla(210, 100%, 68%, 1);
  --blue-72: hsla(210, 100%, 72%, 1);
  --blue-76: hsla(210, 100%, 76%, 1);
  --blue-80: hsla(210, 100%, 80%, 1);
  --blue-84: hsla(210, 100%, 84%, 1);
  --blue-88: hsla(210, 100%, 88%, 1);
  --blue-92: hsla(210, 100%, 92%, 1);
  --blue-96: hsla(210, 100%, 96%, 1);
  /* red */

  --red-0: hsla(0, 100%, 0%, 1);
  --red-4: hsla(0, 100%, 4%, 1);
  --red-8: hsla(0, 100%, 8%, 1);
  --red-12: hsla(0, 100%, 12%, 1);
  --red-16: hsla(0, 100%, 16%, 1);
  --red-20: hsla(0, 100%, 20%, 1);
  --red-24: hsla(0, 100%, 24%, 1);
  --red-28: hsla(0, 100%, 28%, 1);
  --red-32: hsla(0, 100%, 32%, 1);
  --red-36: hsla(0, 100%, 36%, 1);
  --red-40: hsla(0, 100%, 40%, 1);
  --red-44: hsla(0, 100%, 44%, 1);
  --red-48: hsla(0, 100%, 48%, 1);
  --red-52: hsla(0, 100%, 52%, 1);
  --red-56: hsla(0, 100%, 56%, 1);	 /* primary red color */
  --red-60: hsla(0, 100%, 60%, 1);
  --red-64: hsla(0, 100%, 64%, 1);
  --red-68: hsla(0, 100%, 68%, 1);
  --red-72: hsla(0, 100%, 72%, 1);
  --red-76: hsla(0, 100%, 76%, 1);
  --red-80: hsla(0, 100%, 80%, 1);
  --red-84: hsla(0, 100%, 84%, 1);
  --red-88: hsla(0, 100%, 88%, 1);
  --red-92: hsla(0, 100%, 92%, 1);
  --red-96: hsla(0, 100%, 96%, 1);
  --red-100: hsla(0, 100%, 100%, 1);

  /*
  ===========================
    sizes and radiuses
  ===========================
  */

  --size-0: auto;
  --size-1: .25rem;
  --size-2: .5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;

  /*
  =====================
    page widths
  =====================
  */
  --page-0: auto;
  --page-1: 350px;
  --page-7: 1024px;
  --page-8: 1280px;
  --page-10: 1920px;
  --page-99: 100vw; 

}


/*
===========================
#002  style
      __reset.style.css
===========================
*/


* {
  font-family: sans-serif;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  line-height: 1;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
} 

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

textarea {
  resize: vertical;
}

:is(select, button) {
  cursor: pointer;
}


/*
===========================
#003  style
      _body.style.css
===========================
*/


body {
  --body-background-color: var(--b2w-96);
  --body-text-color: var(--b2w-20);

  --header-1-color: var();
  --header-2-color: var();  
  --header-3-color: var();  

  --shadow: 0px 5px 15px 0px var(--blackT-3);
  --shadowI: inset 0px 5px 15px 0px var(--blackT-3);

  --border-color: var(--b2w-92);

  --dialog-background-color: var(--b2w-100);
  --dialog-backdrop-color: var(--blackT-3);

  --gap: var(--size-4);
  --radius: var(--size-1);
  --border-radius: var(--size-2);

  --button-background-color: var(--blue-56);
  --button-color: var(--b2w-20);
  --button-background-color-hover: var(--blue-20);
  --button-color-hover: var(--b2w-100);

  --button-background-color-muted: var(--b2w-56);
  --button-color-muted: var(--b2w-20);
  --button-background-color-muted-hover: var(--b2w-20);
  --button-color-muted-hover: var(--b2w-100);


  --box-background-color: var(--b2w-100);

  --card-background-color: var(--white);

  --table-thead: var(--blue);
  --table-tfoot: var(--white-4);
  --table-row-odd: var(--white);
  --table-row-even: var(--white);
  --table-row-border: 1px solid var(--white-1);
  --table-col-border: 0px solid var(--white-3);
  --table-row-hover-background-color: var(--white-1);
  --table-sort-icons-color: var(--white-2);
  --table-sort-icons-color-active: var(--p-color);
  --table-card-background-color: var(--card-background-color);

  accent-color: var(--blue-56);
  background-color: var(--body-background-color);
  color: var(--body-text-color);

  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: calc(var(--gap) * 2);
  min-height: 100vh;

  counter-reset: item-counter;
}


/*
===========================
#004  style
      box.style.css
===========================
*/


.box {
  background-color: var(--box-background-color);
  border-radius: var(--radius);  
  box-shadow: var(--shadow);
  padding: var(--size-7);
}


/*
===========================
#005  style
      buttons.style.css
===========================
*/


button {
  font-weight: bold;
  letter-spacing: 1px;
}

.button[type=submit] {
  background-color: var(--button-background-color);
  color: var(--button-color);
}

:is(:hover, :focus).button[type=submit] {
  background-color: var(--button-background-color-hover);
  color: var(--button-color-hover);
}

.button[type=reset] {
  background-color: var(--button-background-color-muted);
  color: var(--button-color-muted);
}

:is(:hover, :focus).button[type=reset] {
  background-color: var(--button-background-color-muted-hover);
  color: var(--button-color-muted-hover);
}


/*
===========================
#006  style
      cardHolder.style.css
===========================
*/


.cardHolder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
}

.cardHolder > div {
  background-color: var(--box-background-color);
  border-radius: var(--radius);  
  box-shadow: var(--shadow);
  display: grid;
  gap: var(--gap);
  padding: var(--size-7);
}


/*
===========================
#007  style
      cnc_code_editor.style.css
===========================
*/


.info-button {
	display: none;
}


.cnc_code_editor {

}

.cnc_code_editor button {
	padding: 0.5rem 1rem;
}

#operation-list {
	display: grid;
	gap: 2rem;
	margin-block: 2rem;
}

.operation-line {
	background-color: #ddd;
	padding: 0.5rem 1rem;
	position: relative;
}

.operation-line:focus-within {
	background-color: #ebf5ff;
}

.operation-line-operators {
	display: flex;
	justify-content: space-between;
}

.operation-line-operators > div {
	display:flex;
	gap: 1rem;
}

.line-number {	
	background-color: #fff;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0, -0.8rem);
	text-align:center;
	width: 6ch;
}

.line-drag-handle {
	background-color: #ccc;
	cursor: grab;
	display: flex;
	align-self: center;
	justify-content: center;
	width: 3rem;
}

.parameters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.operationLine-input {
	background-color: #fff;
	display: flex;
	gap: 0.5rem;
	margin-block-start: 1rem;
	padding: 0.5rem;
}

.operationLine-title {
	
}

.operationLine-input input {
	background-color: transparent;
	border: none;
	width: 5ch;
}

.operationLine-suffix {
	
}

#operation-code {
	border: 1px dashed #f1f1f1;
	margin-block-start: 1rem;
	position: sticky;
	top: 0;
}

.code-operation-line {
	padding: 0.2rem 1rem;
}

.code-operation-line span {
	color: red;
}

.currentEdit {
	background-color: #ebf5ff;
}


/*
===========================
#008  style
      dialog.style.css
===========================
*/


dialog {
  background-color: var(--dialog-background-color);
  border: none;
  border-radius: var(--radius);
  box-shadow: 
    var(--shadow),
    0px 5px 15px 100vw var(--dialog-backdrop-color)
  ;
  margin-inline: auto;
  padding: var(--size-7);
  position: fixed;
  top: 50%;
  transform: translateY(-50%);  
  width: min(500px, 100%);
}

.dialog__closeButton {
  background-color: var(--button-background-color-muted);
  border-color: var(--button-border-color-muted);
  border-radius: 0 var(--radius);
  box-shadow: var(--shadowI);
  color: var(--button-color-muted);
  display: grid;
  padding-block: var(--size-1);
  padding-inline: var(--size-4);
  place-items: center;
  position: absolute;
  top: 0;
  right: 0;
}

.dialog__closeButton:hover {
  background-color: var(--button-background-hover-color-muted);
  color: var(--button-color-hover-muted);
}

dialog section {
  display: grid;
  gap: var(--gap);
}

.dialog::-webkit-scrollbar {
  width: 11px;
}

.dialog {
  scrollbar-width: thin;
  scrollbar-color: dark;
}

.dialog::-webkit-scrollbar-track {
  background: #333;
}

.dialog::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 6px;
  border: 3px solid #111;
}


/*
===========================
#009  style
      focus.style.css
===========================
*/


:focus {
  outline: none;
  box-shadow:
    0px 0px 0px 2px var(--blue-96),
    0px 0px 2px 2px var(--blue-56);
  ;  
  transition: all 0.3s ease-in-out;
}


/*
===========================
#010  style
      form.style.css
===========================
*/


.form-group-1 * {
  border: 0;
  min-height: 22px;
  font-size: inherit;
}

.form-group-1 {
  display: grid;
  gap: var(--gap);
}

.form-group-label, .form-group-field {
  display: grid;
  grid-template-columns: 1fr auto;
}

.form-group-label {
  font-weight: bold;
  text-align: left;  
}

.form-group-label span {
  color: var(--blue-56);
  font-size: 0.7em;
  font-weight: normal; 
}

.form-group-field {
  background-color: var(--blue-96);
  border: 1px solid var(--blue-96);
  border-radius: var(--radius);
}

.form-group-field > *:is(input, select, textarea) {
  background-color: transparent;
}

.form-group-field > *, .buttons > * {
  border-radius: var(--radius);
  padding: var(--size-3);
}

.form-group-error {
  color: var(--red-56);
  display: grid;
  gap: var(--size-3);
  padding-block: var(--size-3);
}

.form-group-error > li {
  min-height: auto;
}

.form-group-error-active {
  box-shadow:
    0px 0px 5px 0px var(--red-56);
  ;
}

.form-group-1 .buttons {
  display: flex;
  justify-content: space-between;
}


/*
===========================
#011  style
      formel.style.css
===========================
*/


.formel table {
    border-collapse: collapse;
    min-width: 300px; 
    margin-inline: auto;
    text-align: center;
}

.formel table h2 {
    margin-block: 2em 1em;
}

.formel .tableStyle1 {
    padding: 1em;
    width: 100%;
}

.formel .tableStyle2 caption {
    font-size: 0.5em;
    padding-block: 0.2rem;
}


.formel .tableStyle1 tr td {
    padding: 0em;
}

.formel .tableStyle2 {
    font-size: 1em;
    margin-block: 1em;
}

.formel .tableStyle2 caption {
    font-size: 1.5em;
    margin-block: 1em 2em;
}

.formel .tableStyle2 tr td {
    padding: 0.5em;
    text-align: center;
}

.formel__table {
  width: 100%;
}

.formel__table caption {
    font-size: 2em;
    padding-block: 1rem 3rem;
    text-align: left;
}

.formel__table thead {
    background-color: #ccc;
    position: sticky;
    top: 0px;

}

.formel__table tbody tr {
    border-top: 1px solid #ccc;
}

.formel__table tbody tr:last-child {
    border-bottom: 1px solid #ccc;
}

.formel__table :is(th, td) {    
    padding-block: 1rem;
    text-align: center;    
}

.formel__table :is(th, td) br { 
    content: "" !important;
    display: block !important;
    margin-bottom: 0.5em !important;
}

.formel__table tbody tr:nth-child(even) {
    background-color: #eee;
}

.formel__table tbody tr:hover {
    background-color: #ddd;
}

..thead {
    background-color: #ddd;    
}

.pointer {
    cursor: pointer;
}

.pointer:hover {
    background-color: #2782a7;
    cursor: pointer;
}

.cell-highlight {
  background-color: #fc0;
}



/*
===========================
#012  style
      h.style.css
===========================
*/


h1, h2, h3, h4, h5, h6 {
  text-transform: capitalize;
}

h1 {
  color: var(--header-1-color);
  font-size: 2em;
}

h2 {
  color: var(--header-2-color);
}

h3 {
  color: var(--header-2-color);
}


/*
===========================
#013  style
      header.style.css
===========================
*/


.primaryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  margin-inline: auto;
}



/*
===========================
#014  style
      main.style.css
===========================
*/


main {
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--size-7);

}


/*
===========================
#015  style
      matematik.style.css
===========================
*/


.mat-input-form {
    display: flex;
    gap: 2em;
}

.mat-input-form input {
	max-width: 20ch;
}


/*
===========================
#016  style
      pageSize.style.css
===========================
*/


main, .primaryHeader {
  margin-inline: auto;
  width: calc(100% - var(--size-7));     
}

.primaryHeader, .pageLimit-8, main {
  max-width: var(--page-8);
}

.pageLimit-1 {
  max-width: var(--page-1);
}


/*
===========================
#017  style
      primaryNavigation.style.css
===========================
*/


.primaryNavigation ul {
  display: flex;
  gap:  var(--size-4);
  justify-content: space-between;
}

.primaryNavigation li a {
  border-radius: var(--radius);
  color: var(--text-color);
  display: block;
  padding-block: var(--size-1);
  padding-inline: var(--size-3);
  position: relative;
  text-decoration: none;
  text-transform: capitalize;
}

.primaryNavigation li a.active {
  font-weight: 900;
}


/*
===========================
#018  style
      section.style.css
===========================
*/


:is(.split, .grid) {
  gap: var(--gap);
}

.split {
  display: flex;
}

.split > * {
  flex: 1;
}

.grid {
  display: grid;
}

.grid-col-112 {
  grid-template-columns: 1fr 1fr 2fr;
}


/*
===========================
#019  view
      users.view.php
===========================
*/


<main class="">
  <h1>Users</h1>
  <section class="">

    <table>
      <thead>
        <tr>
          <th>Full name</th>
          <th>Options</th>
        </tr>
      </thead>

      <tbody>
      <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/www/newn.dk/protected/styles/users.view.php</b> on line <b>15</b><br />
      </tbody>
    </table>

  </section>
</main>