:root {
  --pico-form-element-spacing-vertical: 0.25rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
}

body {
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}



    pre.code:before {
        counter-reset: listing;
    }
    pre.code code {
        counter-increment: listing;
    }
  pre.code code::before {
      content: counter(listing) ". ";
      display: inline-block;
  }

  code {
    height:0px;
    padding:0px;
  }

  pre > code {
    padding:10px;
  }

    td {
        padding:0px;
        margin:0px;
    }


  .shrink {
    flex: unset;
    margin-right:10px;
  }



  .opadd {
    background-color: var(--pico-color-jade-500);color:var(--pico-color-light);
  }

  .opdelete {
    background-color:var(--pico-color-pink-500);color:var(--pico-color-light);
  }

.diff {
  width:100%;
  margin:auto;
  text-overflow: scroll;
  font-size: 0.75em;
}

mark.warning {
  background-color:var(--pico-color-pink-600);color:var(--pico-color-light);
}

mark.info {
  background-color:var(--pico-color-jade-600);color:var(--pico-color-light);
}

.error {
  background-color:var(--pico-color-pink-600);color:var(--pico-color-light);
  font-weight: bold;
  text-align: center;
}

.clone {
  font-size:0.8em;
}

pre {
  border-radius: 0px;
  padding:10px;
}

pre > code{
  display: initial;
  line-height: normal;
  padding:0px;
}

code {
  color:var(--pico-color-light);
}

td {
  line-height: normal;
}


.listing {
  width:100%;
  overflow:scroll;
}

.profileimage {
	width: 56px;
	height: 56px;
	padding: 5px 5px 5px 5px;
}

.profile-grid {
	display: grid;
	grid-template-columns:100px auto;
}

.postheader-grid {
	display: grid;
	grid-template-columns: max-content auto;
}


.heroimage {
	width: 92px;
	height: 92px;
	margin: auto;
}

.profileheader {
	text-align: left;
	margin-left: 10px;
    overflow:auto;
    display:block;
}

.inlineform {
	display: inline-flex
}

aside nav, aside ul {
	display:flex
}

.account-grid {
	display: grid;
	grid-template-columns:33% 33% 33%;
}

.accountprofile-grid {
	display: grid;
	grid-template-columns:33% 66%;
}

@media only screen and (max-width: 1024px) {
	.account-grid  {
	  display: grid;
	  grid-template-columns: 1fr;
	  padding: 1em;
	  grid-row-gap: 10px;
	}
}


.account-grid article {
	margin: 10px;
}

.btn {
	height: 22px;
	border: 1px solid #ffffff;
	font-size: 13px;
	color: #ffffff;
	text-align: center;
	padding-top: 0px !important;
	font-weight: bold;
}

.separator {
	content: '';
	display: inline-block;
	background: #ffffff;
	margin: 0px 4px;
	height: 21px;
	width: 1px;
	vertical-align: top;
}

.middle {
	text-align: center;
}


h3 {
	display:inline;
}

/* The alert message box */
.alert {
	padding: 20px;
	background-color: var(--pico-color-pumpkin-450); /* Red */
	color: white;
	margin-bottom: 15px;
  }

  .editor
{
    border:solid 1px #ccc;
    padding: 20px;
    min-height:400px;
}

.sample-toolbar
{
    border:solid 1px #ddd;
    padding: 5px;
    border-radius:3px;
}

.sample-toolbar > span
{
    cursor:pointer;
}

.sample-toolbar > span:hover
{
    text-decoration:underline;
}