/* generated 2026-04-08T21:24:23+09:00 */


/**********
 * file: 1-fonts.css
 *
 */

/* fonts.googleapis.com/css?family=Lato:300,400,700,900 */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);



/**********
 * file: 2-reset.css
 *
 */

body, div, span,
h1, h2, h3, h4, h5, h6, p,
a,
em, img,
small, strike, strong, sub, sup,
b, u, i,
ol, ul, li,
form, label, legend,
table, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    font-family: Lato, sans-serif;
    vertical-align: baseline;
    background-color: transparent;
    background-repeat: no-repeat;
}

body, div, p, h1, h2, h3, h4, h5 {
    font-weight: 300;
    font-size: 1rem;
}

input, textarea, keygen, select, button {
  font-family: Lato, sans-serif;
  font-weight: 300;
  }

a,b,u,i { font-size: inherit; }

body { line-height: 1; }
u { text-decoration: none; }
ol, ul { list-style: none; }
img { vertical-align: bottom; background-color: transparent; }
a img { border: none; }
/* remember to define focus styles! */
:focus { outline: 0; }




/**********
 * file: 3-vars.css
 *
 */

:root {
  --header-height: 40px;
  --sidebar-width: 64px;

	--page-background: #0a0a0a;
	--white          : #fff;
	--text-white     : var(--white);
	--text-gray : #9ca3af;

	--border-color: #2c2c2c;

	--gray-1: #1a1a1a;
	--gray-2: #252525;
	--gray-border: #6a7280;

	--white-1: #9b9b9b;
	--white-2: #9b9b9b;
	--white-3: #6a7280;

	--button: #4262ea;
}



/**********
 * file: alignment.css
 *
 */

.two-across {
  align-items    : baseline;
  display        : flex;
  gap            : 20px;
  margin-bottom  : 1em;
  justify-content: space-between;
  }

.two-across.short-inputs { /* almost always dates */
	justify-content: flex-end;
	gap: 10px;
	}

.two-across > p {
  flex: 0 1 50%;
  margin-bottom: 0;
  }

.two-across > p:nth-child(1) { flex: 1 1 40%; }
.two-across > p:nth-child(2) { flex: 1 1 60%; }

.two-across.balanced > p:nth-child(1) { flex: 1 1 auto; }
.two-across.balanced > p:nth-child(2) { flex: 1 1 auto; }
.balanced .two-across > p:nth-child(1) { flex: 1 1 auto; }
.balanced .two-across > p:nth-child(2) { flex: 1 1 auto; }




/**********
 * file: boxes.css
 *
 */

div.boxed {
  background-color: var(--gray-1);
  border          : 1px solid var(--border-color);
  border-radius   : 20px;
  margin-bottom   : 30px;
  padding         : 30px;
  }

.boxed h1 {
  background-color: var(--button);
  border-radius   : 10px;
  font-size       : 24pt;
  font-weight     : bold;
  height          : 60px;
  line-height     : 60px;
  margin          : 0 auto 20px;
  text-align      : center;
  vertical-align  : middle;
  width           : 60px;
  }

.boxed h2 {
  font-size    : 18pt;
  font-weight  : bold;
  margin-bottom: 0.6em;
  text-align   : center;
  }
.boxed p {
  color      : var(--white-1);
  line-height: 1.5;
  text-align : center;
  }



/**********
 * file: buttons.css
 *
 */

.button-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
button {
  appearance      : none;
  border: 1px solid var(--border-color);
  background-color: var(--gray-2);
  padding         : 4px 8px;
  border-radius   : 18px;
  font-size       : 16pt;
  min-width       : 5em;
  color: var(--white-2);
  font-size: 10pt;
  cursor: pointer;
  }

button:active {
  background-color: var(--white-2);
  color: var(--gray-2);
	}

button.cancel {
  background-color: #dddddd;
	}



/**********
 * file: chatbox.css
 *
 */

section.chatbox {

}

section.chatbox #responses {
	margin-bottom: 20px;
	position: relative;
	min-height: 4em;
	padding-bottom: 20px;
	}

section.chatbox #responses.waiting {
	padding-bottom: 80px;
	}

section.chatbox #responses::after {
	content: "";
	background-image: url(/assets/spinner-128x128.gif);
	background-size: 60px;
	display: block;
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 60px;
	height: 60px;
	visibility: hidden;
	}

section.chatbox #responses.waiting::after {
	visibility: visible;
	}

.text-card {
  font-weight  : 300;
  margin-bottom: 20px;
  white-space  : pre-line;
  max-width    : 85%;
  padding      : 20px 10px;
  position     : relative;
  width        : fit-content;
	}

.text-card::after {
  border             : 5px solid transparent;
  bottom             : 3px;
  content            : " ";
  height             : 0;
  position           : absolute;
  width              : 0;
  }

.my-text {
  background-color: #1186f7;
  border-radius   : 12px 12px 7px 12px;
  color           : white;
  margin-left     : auto;
  margin-right    : 10px;
  }

/* svg graphic for the pointer? */
.my-text::after {
  border-bottom-color: #1186f7;
  margin-right       : -5px;
  right              : 0;
}

.their-text {
  background-color: #e5e4ea;
  border-radius   : 12px 12px 12px 7px;
  color           : #171717;
  }

.their-text::after {
  border-bottom-color: #e5e4ea;
  left               : 0;
  margin-left        : -5px;
	}


section.chatbox textarea {
  background-color: #fffef6;
  border          : 2px solid white;
  border-radius   : 20px;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  min-height      : 8em;
  padding         : 1em;
  width           : 100%;
  }

p.action {
	display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  }

p.action del {
	text-decoration: none;
	color: red;
	cursor: pointer;
	}

p.action span {
	flex-grow: 0;
	}

.spacer { flex: 1 1 auto; }



/**********
 * file: empty.css
 *
 */




/**********
 * file: form-elements.css
 *
 */

.chat-input {
  border-radius: 20px 20px 0 0 !important;
  bottom       : 0;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  left         : calc(var(--sidebar-width) + 40px);
  margin-bottom: 0 !important;
  position     : fixed;
  width        : calc(100% - var(--sidebar-width) - 80px);
	padding: 10px !important;
}

.chat-input form {
  display: flex;
  gap    : 20px;
  width  : 100%;
  }

.chat-input input {
  appearance         : none;
  background-color   : var(--gray-2);
  background-position: center;
  background-repeat  : no-repeat;
  background-size    : 50%;
  border-radius      : 5px;
  border             : 1px solid var(--border-color);
  display            : block;
  height             : 0;
  padding-top        : 40px;
  width              : 40px;
	}

.chat-input input[type="file"] {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBzdHJva2U9IndoaXRlIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE1LjE3MiA3bC02LjU4NiA2LjU4NmEyIDIgMCAxMDIuODI4IDIuODI4bDYuNDE0LTYuNTg2YTQgNCAwIDAwLTUuNjU2LTUuNjU2bC02LjQxNSA2LjU4NWE2IDYgMCAxMDguNDg2IDguNDg2TDIwLjUgMTMiPjwvcGF0aD48L3N2Zz4=");
}

.chat-input input[type="submit"] {
	background-color: var(--button);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBzdHJva2U9IndoaXRlIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEyIDE5bDkgMi05LTE4LTkgMTggOS0yem0wIDB2LTgiPjwvcGF0aD48L3N2Zz4=");
	}

.chat-input textarea {
  background-color: var(--gray-2);
  border          : var(--border-color);
  border-radius   : 10px;
  color           : var(--text-white);
  flex            : 1 1 auto;
  font-size       : 12pt;
  padding         : 8px;
  }



/**********
 * file: general-text.css
 *
 */

p {
	margin-bottom: 1em;
	}

a { color: var(--text-white); }



/**********
 * file: header.css
 *
 */




/**********
 * file: modal-.css
 *
 */

/**
 * mechanics of the modal process
 * appearances beyond base positioning are not here.
 * see modal-base for standard appearance and modal-theme
 * for details
 *
 * put .with-modal on whatever element you want the modal
 * to cover.
 *
 * things like typography are inherited from the parent page.
 *
 **/


.modal-cover {
  z-index   : 10000;
  position  : absolute;

  opacity   : 0;
  right     : -200%;
  transition: opacity 0.3s ease-in-out, right 0s 0.3s, visibility 0s 0.3s;
  visibility: hidden;
  }

.with-modal .modal-cover {
  opacity   : 1;
  right     : 0;
  transition: opacity 0.3s ease-in-out, right 0s 0s, visibility 0s 0s;
  visibility: visible;
  }

.modal-cover { /* segments */
  height  : 100%;
  top     : 0;
  width   : 100%;
  }

body.with-modal > .modal-cover { /* the whole page */
  height  : 100vh;
  position: fixed;
  top     : 0;
  width   : 100vw;
  }

/* this sometimes needs to be added in JS */
.with-modal:not(body) { position: relative; }



/* blur things behind the modal */
/* guessing at the most common class/block names */
.with-modal .main-content,
.with-modal #content,
.with-modal > header,
.with-modal > aside,
.with-modal > div:not(.modal-cover),
.with-modal > section {
  filter: blur( 4px );
  }



.modal-wait span {

  /* icon */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEyMjAgMTIyMCIgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCI+ICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9IiMyYjJmM2MiIGQ9Ik0gOTgwLjc4LDE1NS45IEMgODcxLjY0LDE1NS45IDczNS45MywxOTIuMDEgNjA3LjgxLDI1NS4xMiBDIDQ4MC4xNywxOTIuMDEgMzQ0LjkzLDE1NS45IDIzNC44NCwxNTUuOSBDIDE0MC40MSwxNTUuOSA3MS42MTQsMTgyLjk5IDM2LjAyNCwyMzMuNzcgQyAtNzAuNzQ2LDM4OC40NiA4OS4xNzQsNjc3LjkxIDE0MC44OSw3NjMuMzMgQyAyNDEuMDEsOTMwLjM2IDQ0OC4zNywxMTc4LjUgNjA3LjM0LDExODAgQyA3NDkuMjIsMTE4MCA5NDMuMjksOTcyLjYgMTA2NC4zLDc3OS40NiBDIDEwNjcuMiw3NzUuMTkgMTA3MCw3NzAuOTIgMTA3Mi40LDc2Ni42NSBMIDEwNzQuMyw3NjMuMzMgQyAxMTI1LjUsNjc3LjkxIDEyODUuOSwzODcuOTkgMTE3Ny43LDIzMy43NyBDIDExNDMuNiwxODIuOTkgMTA3NS4yLDE1NS45IDk4MC43OCwxNTUuOSBaIE0gNjU0Ljc5LDI4MC4yNyBDIDc2OC4yLDIyOC4wNyA4ODUuNCwxOTkuMTMgOTgwLjMxLDE5OS4xMyBDIDEwMzUuOSwxOTkuMTMgMTEwOC45LDIwOS41NyAxMTQzLjEsMjU4LjQ0IEMgMTIwNy42LDM1MC45OCAxMTU1LDUyNC42NSAxMDc0LjgsNjc2LjQ5IEMgMTAzMS4xLDU0OS44IDgzMC4zNiwzNzcuMDcgNjU0Ljc5LDI4MC4yNyBaIE0gMTQxLjM2LDY3OC4zOSBDIDYwLjIyNCw1MjYuMDcgNi42MDQxLDM1MC45OCA3MC42NjQsMjU3Ljk3IEMgMTA0LjgzLDIwOC42MiAxNzguODUsMTk4LjY1IDIzNC4zNywxOTguNjUgQyAzMzAuMjIsMTk4LjY1IDQ0Ni45NSwyMjguMDcgNTU5Ljg4LDI3OS44IEMgMzg1LjI2LDM3Ny41NSAxODMuNiw1NTIuMTcgMTQxLjM2LDY3OC4zOSBaIE0gNjA3LjM0LDg0OC4yNyBDIDUwMi45NCw4NDcuMzIgMjI0Ljg4LDg0NS40MiAxNzkuMzMsNzQwLjU1IEMgMTQzLjI2LDY1Ny45OSAzNzMuODgsNDIzLjU3IDYwNy4zNCwzMDMuMDUgQyA4NDIuMjIsNDIzLjU4IDEwNzMuOCw2NTcuOTkgMTAzNy44LDc0MC41NSBDIDEwMzcuMyw3NDEuOTcgMTAzNi4zLDc0My44NyAxMDM1LjQsNzQ1LjMgTCAxMDI4LjcsNzU1LjczIEMgOTY0LjE3LDg0NS44OSA3MDUuMDksODQ3Ljc5IDYwNy4zNCw4NDguMjYgViA4NDguMjYgWiBNIDYwOC43NiwxMTM3LjIgQyA1MDUuNzksMTEzNi4zIDM1OS42NCwxMDAwLjYgMjQ3LjE4LDg0Ni4zNyBDIDM0MC4xOSw4ODIuNDMgNDc2LjM3LDg5MC4wMiA2MDcuODEsODkwLjk3IEMgNzM3LjM1LDg5MC4wMiA4NzMuMDcsODgyLjkgOTY3LjQ5LDg0Ny4zMiBDIDg1My4xNCwxMDAyLjUgNzA4LjQxLDExMzcuMiA2MDguNzYsMTEzNy4yIFogTSA2MDcuODEsNjU0LjE5IEMgNTgzLjE0LDY1NC4xOSA1NjMuMjEsNjMzLjc4IDU2My4yMSw2MDkuNTggQyA1NjMuMjEsNTg0LjkxIDU4My42MSw1NjQuOTggNjA3LjgxLDU2NC45OCBDIDYzMi40OSw1NjQuOTggNjUyLjg5LDU4NS4zOCA2NTIuODksNjA5LjU4IEMgNjUyLjQyLDYzNC4yNiA2MzIuMDEsNjU0LjE5IDYwNy44MSw2NTQuMTkgWiIgLz4gIDwvc3ZnPg==");

  }



/**********
 * file: modal-base.css
 *
 */

/**
 *  everything here provides positioning and a generic theme. Elements are expected to inherit
 *  properties from other parts of the site css
 *
 *  color is deliberately left out, esp. since light and dark themes are now becoming standard :-(
 *  there is copy-pasta style in the other file to fill out for your theme
**/

/* base positioning */

.modal-content {
  left         : 50%;
  max-width    : 80%;
  width        : 80%;
  min-width    : 20%;
  overflow     : hidden;
  position     : absolute;
  top          : 50%;
  transform    : translate(-50%, -50%);
  z-index      : 100;
  }

.modal-content > header {
  border-bottom-style: solid;
  border-bottom-width: 1px;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  display            : block !important;
  height             : auto;
  min-height         : 1.5em;
  padding            : 1em 1.5em;
  position           : relative;
  margin: 0;
  width: 100%;
  }

.modal-content > section {
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  max-height: 75vh;
  max-width : 100%;
  min-height: 5em;
  overflow  : auto;
  padding   : 1.5em;
  position  : static;
  width     : 100%;
  max-width: none;
  margin: 0;
  }

.modal-content > section > *:last-child {
  margin-bottom: 0;
  }

.modal-content > footer {
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  height          : auto;
  min-height      : 1.0em;
  position        : static;
  margin: 0;
  max-width: none;
  width: 100%;
  }

.modal-content > footer button {
  }

.modal-content > header h1 {
  margin: 0;
  }

.modal-content > header p {
  margin: 0;
  }

.close-modal {
  cursor     : pointer;
  height     : 0;
  margin     : 0;
  overflow   : hidden;
  padding-top: 3em; /* reasonable guess of a one-line title */
  position   : absolute;
  right      : 0;
  top        : 0em;
  width      : 3em;
  background-position: 50%;
}

.modal-content.no-padding > section,
.modal-content > section.no-padding {
  /* use with an iframe that has it's own padding */
  padding: 0;
  }

.modal-content > section > iframe {
  border    : none;
  height    : 50vh;
  min-height: 200px;
  width     : 100%;
  }

.modal-wait {
  height          : calc( 100% - 3em ); /* leave the top bar uncovered. breaks on alerts but using wait on alerts is a bit silly */
  left            : 0;
  opacity         : 0;
  pointer-events  : none;
  position        : absolute;
  top             : 3em;
  transition      : opacity 0.3s ease-in-out;
  width           : 100%;
  }

.modal-content.waiting .modal-wait {
  opacity: 1;
  }

.modal-wait p {
  display  : block;
  height   : 50px;
  left     : 50%;
  margin   : 0 !important;
  padding  : 0 !important;
  position : absolute;
  top      : 50%;
  transform: translate( -50%, -50% );
  width    : 50px;
  }

.modal-wait span {
  animation          : modal-rotation 1s infinite linear;
  background-position: 50%;
  background-size    : contain;
  display            : block;
  height             : 100%;
  width              : 100%;
  }

@keyframes modal-rotation {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(359deg); }
}





/**********
 * file: modal-theme.css
 *
 */

/**
 *  Your design here
 *
**/

.modal-cover {
   background-color: var(--black-30);
   }

.modal-content {
  border-radius: 15px;
  background-color   : var(--white);
  color: black;
  }

.modal-content header {
  border-bottom-color: var(--white);
  color              : var(--black);
  background-color   : var(--white);
  }

.modal-content > header h1 {
  color      : inherit;
  font-size  : 16pt;
  font-size  : inherit;
  font-weight: 500;
	text-align: center;
  }

.modal-content > header p {
  margin: 0;
  font-weight: bold;
  font-size  : 16pt;
	text-align: center;
  }

.close-modal {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHdpZHRoPSIyMnB4IiBoZWlnaHQ9IjIycHgiPiAgICAgIDxjaXJjbGUgc3Ryb2tlLXdpZHRoPSI4IiBzdHJva2U9IiM5OTkiIGZpbGw9Im5vbmUiIHI9IjQ1IiBjeT0iNTAiIGN4PSI1MCI+PC9jaXJjbGU+ICAgICAgPGcgc3Ryb2tlLXdpZHRoPSI4IiBzdHJva2U9Il93aGl0ZSIgZmlsbD0iX2JsYWNrIj4gICAgICA8Y2lyY2xlIHI9IjQ1IiBjeT0iNTAiIGN4PSI1MCI+PC9jaXJjbGU+ICAgICAgPHBhdGggZD0iTTMwLDMwIEw3MCw3MCBNMzAsNzAgTCA3MCwzMCI+PC9wYXRoPiAgICA8L2c+ICAgPC9zdmc+");
}

.close-modal:hover {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHdpZHRoPSIyMnB4IiBoZWlnaHQ9IjIycHgiPiAgICA8Y2lyY2xlIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlPSIjOTk5IiBmaWxsPSJub25lIiByPSI0NSIgY3k9IjUwIiBjeD0iNTAiPjwvY2lyY2xlPiAgICA8ZyBzdHJva2Utd2lkdGg9IjgiIHN0cm9rZT0id2hpdGUiIGZpbGw9IiM2QTZBNkEiPiAgICA8Y2lyY2xlIHI9IjQ1IiBjeT0iNTAiIGN4PSI1MCI+PC9jaXJjbGU+ICAgIDxwYXRoIGQ9Ik0zMCwzMCBMNzAsNzAgTTMwLDcwIEwgNzAsMzAiPjwvcGF0aD4gIDwvZz4gPC9zdmc+");
}

.modal-wait {
  background-color: var(--white-80);
  }

.with-modal .with-modal .modal-cover {
  /* avoids double-dimming in *most* cases */
  /* background-color: transparent; */
  /* completely disappears the section modals when a page modal is up */
  opacity: 0;
}


.modal-content section {
  background-color: var(--white);
  color           : var(--black);
  }

.modal-content footer {
  padding         : 1em 1.5em;
  background-color: var(--white);
  border-top-color: var(--white);
  border-top-style: none;
  border-top-width: 1px;
  display         : flex;
  gap             : 1em;
  justify-content: space-between;
  text-align      : right;
  }

.modal-content footer button {
  /* inherited, except for: */
  margin-bottom: 0;
  width: fit-content;
  flex: 1 1 auto;
  }

.modal-wait span {
  /* your favourite spinner here */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEyMjAgMTIyMCIgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCI+ICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9IiMyYjJmM2MiIGQ9Ik0gOTgwLjc4LDE1NS45IEMgODcxLjY0LDE1NS45IDczNS45MywxOTIuMDEgNjA3LjgxLDI1NS4xMiBDIDQ4MC4xNywxOTIuMDEgMzQ0LjkzLDE1NS45IDIzNC44NCwxNTUuOSBDIDE0MC40MSwxNTUuOSA3MS42MTQsMTgyLjk5IDM2LjAyNCwyMzMuNzcgQyAtNzAuNzQ2LDM4OC40NiA4OS4xNzQsNjc3LjkxIDE0MC44OSw3NjMuMzMgQyAyNDEuMDEsOTMwLjM2IDQ0OC4zNywxMTc4LjUgNjA3LjM0LDExODAgQyA3NDkuMjIsMTE4MCA5NDMuMjksOTcyLjYgMTA2NC4zLDc3OS40NiBDIDEwNjcuMiw3NzUuMTkgMTA3MCw3NzAuOTIgMTA3Mi40LDc2Ni42NSBMIDEwNzQuMyw3NjMuMzMgQyAxMTI1LjUsNjc3LjkxIDEyODUuOSwzODcuOTkgMTE3Ny43LDIzMy43NyBDIDExNDMuNiwxODIuOTkgMTA3NS4yLDE1NS45IDk4MC43OCwxNTUuOSBaIE0gNjU0Ljc5LDI4MC4yNyBDIDc2OC4yLDIyOC4wNyA4ODUuNCwxOTkuMTMgOTgwLjMxLDE5OS4xMyBDIDEwMzUuOSwxOTkuMTMgMTEwOC45LDIwOS41NyAxMTQzLjEsMjU4LjQ0IEMgMTIwNy42LDM1MC45OCAxMTU1LDUyNC42NSAxMDc0LjgsNjc2LjQ5IEMgMTAzMS4xLDU0OS44IDgzMC4zNiwzNzcuMDcgNjU0Ljc5LDI4MC4yNyBaIE0gMTQxLjM2LDY3OC4zOSBDIDYwLjIyNCw1MjYuMDcgNi42MDQxLDM1MC45OCA3MC42NjQsMjU3Ljk3IEMgMTA0LjgzLDIwOC42MiAxNzguODUsMTk4LjY1IDIzNC4zNywxOTguNjUgQyAzMzAuMjIsMTk4LjY1IDQ0Ni45NSwyMjguMDcgNTU5Ljg4LDI3OS44IEMgMzg1LjI2LDM3Ny41NSAxODMuNiw1NTIuMTcgMTQxLjM2LDY3OC4zOSBaIE0gNjA3LjM0LDg0OC4yNyBDIDUwMi45NCw4NDcuMzIgMjI0Ljg4LDg0NS40MiAxNzkuMzMsNzQwLjU1IEMgMTQzLjI2LDY1Ny45OSAzNzMuODgsNDIzLjU3IDYwNy4zNCwzMDMuMDUgQyA4NDIuMjIsNDIzLjU4IDEwNzMuOCw2NTcuOTkgMTAzNy44LDc0MC41NSBDIDEwMzcuMyw3NDEuOTcgMTAzNi4zLDc0My44NyAxMDM1LjQsNzQ1LjMgTCAxMDI4LjcsNzU1LjczIEMgOTY0LjE3LDg0NS44OSA3MDUuMDksODQ3Ljc5IDYwNy4zNCw4NDguMjYgViA4NDguMjYgWiBNIDYwOC43NiwxMTM3LjIgQyA1MDUuNzksMTEzNi4zIDM1OS42NCwxMDAwLjYgMjQ3LjE4LDg0Ni4zNyBDIDM0MC4xOSw4ODIuNDMgNDc2LjM3LDg5MC4wMiA2MDcuODEsODkwLjk3IEMgNzM3LjM1LDg5MC4wMiA4NzMuMDcsODgyLjkgOTY3LjQ5LDg0Ny4zMiBDIDg1My4xNCwxMDAyLjUgNzA4LjQxLDExMzcuMiA2MDguNzYsMTEzNy4yIFogTSA2MDcuODEsNjU0LjE5IEMgNTgzLjE0LDY1NC4xOSA1NjMuMjEsNjMzLjc4IDU2My4yMSw2MDkuNTggQyA1NjMuMjEsNTg0LjkxIDU4My42MSw1NjQuOTggNjA3LjgxLDU2NC45OCBDIDYzMi40OSw1NjQuOTggNjUyLjg5LDU4NS4zOCA2NTIuODksNjA5LjU4IEMgNjUyLjQyLDYzNC4yNiA2MzIuMDEsNjU0LjE5IDYwNy44MSw2NTQuMTkgWiIgLz4gIDwvc3ZnPg==");

  }






/**********
 * file: page.css
 *
 */

html, body { min-height: 100%; }

html { background-color: var(--page-background); }

body {
	min-height: 100vh;
	color: var(--text-white);
  }

section.main-content {
	padding: 40px 40px 80px;
}




/**********
 * file: section.css
 *
 */

section {
	margin-left: var(--sidebar-width);
}



/**********
 * file: sidebar.css
 *
 */

aside {
  background-color: var(--gray-1);
  width           : var(--sidebar-width);
  border-right    : 1px solid var(--border-color);
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  height          : 100vh;
  left            : 0;
  overflow        : auto;
  padding         : 20px 14px;
  position        : fixed;
  top             : 0;
  }


aside ul {
}

aside li {
  margin-bottom: 0.5em;
  }


aside a, aside b {
  border-radius : 12px;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  display       : block;
  font-weight   : bold;
  height        : 40px;
  line-height   : 20px;
  overflow      : hidden;
  padding       : 10px 0 0 14px;
  text-align    : center;
  vertical-align: middle;
  width         : 40px;
  }

aside a, aside b {
	color: transparent;
	}

aside b::first-letter {
	color: var(--white);
	}

aside a::first-letter {
  color: var(--white-3);
}

aside a.current, aside a.selected {
	background-color: var(--button);
	}

aside a.current::first-letter, aside a.selected::first-letter {
  color: var(--white);
}




#service_status {
  background-color: gray;
	}

#service_status.healthy, #username.login {
  background-color: green;
  }

#service_status.problems {
  background-color: red;
  }




/* === begin @media === */



/* === begin @theme === */