:root {
  --color-primary: #11111b;
  --color-accent: #89b4fa;
  --color-background: #1e1e2e;
  --color-font: #cdd6f4;
  --color-red: #f38ba8;
  --color-green: #a6e3a1;
  --color-peach: #fab387;
  --color-mauve: #cba6f7;
  --color-sky: #89dceb;
  --color-surface-2: #585b70;
  --color-surface-2-7: rgba(88,91,112,0.7);
  --color-mantle: #181825;
}

body{
	background-color: var(--color-background);
	color: var(--color-font);
}

header{
  background-color: var(--color-background);
}

footer{
	color: var(--color-font)
}

footer a{
	color: var(--color-accent)
}

a{
  color: var(--color-font);
  text-decoration-style: none;
  margin-bottom: 5px;
}

a:hover{
  color: var(--color-accent);
}

a:focus {
  color: var(--color-background);
  background-color: var(--color-accent);
  outline: 0;
  border-radius: 2px;
}

/* FIELDSET */

legend {
  text-transform: uppercase;
	font-weight: bold;
}

/* OLIVETIN BUTTONS */

action-button button {
	background-color: var(--color-primary);
	border: none;
	color: var(--color-font);
	font-weight: bold;
	text-transform: uppercase;
	box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, .2);
}

action-button button:focus {
	border: none;
}

action-button button:focus {
	box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

div.display {
	background-color: var(--color-mantle);
	border: none;
	color: var(--color-font);
	font-weight: bold;
	text-transform: uppercase;
	box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, .2);
}

div.display > strong {
  color: var(--color-accent)
}

span.icon{
	color: var(--color-accent);
}

/* NAVBAR */

nav.sidebar{
	box-shadow: 0px 4px 5px 3px rgba(0, 0, 0, .2);
	background-color: var(--color-primary);
	color: var(--color-font);
	font-weight: bold;
	text-transform: uppercase;
}

nav.sidebar a{
	color: var(--color-font);
}

nav.sidebar ul li {
  border-bottom: none;
}

nav ul li a:hover{
	background-color: var(--color-accent);
	color: var(--color-background);
}

nav ul li a:focus{
	background-color: var(--color-accent);
	color: var(--color-background);
  outline: 0;
}

#sidebar-toggler-button{
	color: var(--color-background);
  background-color: var(--color-accent);
  border: none;
  box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, .2);
	border-radius: 10%;
}

#sidebar-toggler-button:hover, #sidebar-toggler-button:focus {
	color: var(--color-primary);
  outline: 3px solid var(--color-font);
}

h1 a, h1 a:visited{
	color: var(--color-font);
	font-weight: bold;
	text-decoration: none;
}

/* POPUPS */

form div.wrapper{
  background-color: transparent;
}

#argument-popup{
  background-color: var(--color-primary);
  color: var(--color-surface-2);
  border-radius: 25px;
}

#execution-results-popup{
	background-color: var(--color-primary);
  color: var(--color-surface-2);
  border-radius: 25px;
}

pre#execution-dialog-stdout{
	border: 1px solid var(--color-font);
}

select {
	background-color: var(--color-accent);
	border: none;
	color: var(--color-background);
}

/* UI BUTTONS */

button, input[type="submit"]{
  color: var(--color-font);
  background-color: var(--color-primary);
  font-weight: bold;
  text-transform: uppercase;
  border: 3px solid var(--color-font);
  border-radius: 5px;
	box-shadow: 0 0 6px rgba(0, 0, 0, .7);
}

button:hover, button:focus, input[type="submit"]:hover{
  outline: 3px solid var(--color-accent);
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

button:disabled, input[type="submit"]:disabled{
  color: var(--color-surface-2);
  background-color: var(--color-dark);
}

/* START BUTTON */

input[name="start"]:hover{
  color: var(--color-background);
  background-color: var(--color-accent);
}

input[name="start"]:disabled{
  color: var(--color-surface-2);
  background-color: var(--color-dark);
}

/* CANCEL BUTTON */

button[name="cancel"]:hover{
  color: var(--color-background);
  background-color: var(--color-red);
}

/* KILL BUTTON */

button#execution-dialog-kill-action:hover{
  color: var(--color-background);
  background-color: var(--color-red);
}

button#execution-dialog-kill-action:disabled{
  color: var(--color-surface-2);
  background-color: var(--color-dark);
}

/* CLOSE BUTTON */

button[title=Close]:hover{
  color: var(--color-background);
  background-color: var(--color-peach);
}

/* RESIZE BUTTON */

button#execution-dialog-toggle-size:hover{
  color: var(--color-background);
  background-color: var(--color-accent);
}

/* LOGS */

div.toolbar{
	background-color: var(--color-background);
	border: none;
}

table{
	background-color: var(--color-background);
	color: var(--color-primary);
	border: none;
	box-shadow: none;
}

tr.log-row:nth-child(odd) {
	background-color: var(--color-background);
	color: var(--color-primary);
	border: none;
}
tr.log-row:nth-child(even), tr {
	background-color: var(--color-primary);
	color: var(--color-font);
	border: none;
}

tr:hover td{
	background-color: var(--color-surface-2);
	color: var(--color-font);
}

tr:hover td a{
	color: var(--color-background);
  text-decoration-style: solid;
  text-decoration-color: var(--color-background);
}

tr:hover td a:hover{
  color: var(--color-font);
  text-decoration-style: solid;
  text-decoration-color: var(--color-font);
}

tr:hover td span.icon{
	color: var(--color-background);
}

td, th{
	background-color: transparent;
	border: none;
	color: var(--color-font);
	box-shadow: none;
}	

td a{
	color: var(--color-accent);
}	

input {
	background-color: var(--color-accent);
	color: var(--color-background);
  font-weight: bold;
  border-radius: 3px;
}

input:focus { 
  outline: 2px solid var(--color-surface-2);
}

/* LOGS SEARCH */

input#logSearchBox{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 64 64'%3E%3Cg fill='%236c7086'%3E%3Cpath d='M8.25 10.875a2.625 2.625 0 1 1 5.25 0a2.625 2.625 0 0 1-5.25 0'/%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75s9.75-4.365 9.75-9.75S17.385 2.25 12 2.25m-1.125 4.5a4.125 4.125 0 1 0 2.338 7.524l2.007 2.006a.75.75 0 1 0 1.06-1.06l-2.006-2.007a4.125 4.125 0 0 0-3.399-6.463' clip-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
	background-position: 2px 4px;
	background-repeat: no-repeat;
	padding-left: 40px;
	background-color: var(--color-primary);
	color: var(--color-font);
	border: none;
	border-color: var(--color-surface-2-7);
	border-radius: 50px;
}

button#searchLogsClear{
  color: var(--color-background);
	background-color: var(--color-accent);
	font-weight: 900;
	border-radius: 15px;
  border-color: var(--color-surface-2);
}

button#searchLogsClear:hover, button#searchLogsClear:focus{
  color: var(--color-primary);
	background-color: var(--color-red);
	font-weight: 900;
	border-radius: 15px;
  border:3px solid var(--color-surface-2);
  outline: none;
}

button#searchLogsClear:disabled{
  color: var(--color-surface-2);
	background-color: var(--color-background);
	font-weight: 900;
	border-radius: 15px;
  border-color: var(--color-surface-2);
}

::placeholder{
	color: transparent;
}

/* STATUS INFO */

.action-failed {
  color: var(--color-background);
  background-color: var(--color-red);
}

.action-success {
  color: var(--color-background);
  background-color: var(--color-green);
}

.action-nonzero-exit {
  color: var(--color-background);
  background-color: var(--color-peach);
}

.action-timeout {
  color: var(--color-background);
  background-color: var(--color-sky);
}

.action-blocked {
  color: var(--color-background);
  background-color: var(--color-mauve);
}

span.tag {
  color: var(--color-background);
  background-color: var(--color-font);
}

span#username {
  display: none;
}