/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); */

:root {
  --font-family: 'Roboto', 'Open Sans', sans-serif;
  --font-family-header: 'Open Sans', sans-serif;

  --color-accent: #d7b871;
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #cacaca;
  --color-green: #3EB489;
  --color-magenta: #d767ad;
  --color-background: rgb(1, 8, 54);
  --padding: 10px;
  --border-radius: 10px;
  --padding-items: 10px 20px;
}


/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
textarea:focus, input:focus{
    outline: none;
}

h3 {
	margin: 10px 0;
}
h2 {
	margin: 10px 0;
}
h1 {
	margin: 20px 0;
}

body {
  font-family: var(--font-family);
  color: var(--color-white);
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.app {
	/*  */
	display: flex;
	flex-direction: row;
	margin: 20px 20px;
	width: calc(100vw - 40px);
	height: calc(100vh - 40px);
}

.sidebar {
	/*  */
	flex-grow: 1;
	height: 100%;
	max-width: 200px;
}
.triage {
	/*  */
	flex-grow: 5;
	height: 100%;
}
.detail {
	/*  */
	flex-grow: 2;
}
.center {
	margin: 0 auto;
	text-align: center;
	margin-bottom: 11px;
}

#pm-app {
	margin: 20px auto;
}

#pm-app .title {
	text-align: center;
}
#pm-app .taskbar {
	/*  */
	/* padding: 20px; */
	/* background-color: var(--color-accent); */
	margin-bottom: 20px;
}

#pm-app .taskform {
	display: flex;
	flex-direction: row;
}
#pm-app .taskform input[type=text] {
	flex-grow: 2;
	padding: 10px 20px;
	font-size: 20px;
	border: none;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}
#pm-app .taskform button {
	flex-grow: 1;
	max-width: 100px;
	background-color: var(--color-white);
	color: var(--color-black);
	padding: 10px;
	border: none;
	cursor: pointer;
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

#pm-app .collectionform {
	width: 150px;
	max-width: 250px;
	display: flex;
	flex-direction: row;
	margin: 0 auto 5px auto;
}
#pm-app .collectionform input[type=text] {
	max-width: 100px;
	/* flex-grow: 2; */
	padding: 10px 20px;
	font-size: 20px;
	border: 1px solid var(--color-white);
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
	background-color: var(--color-background);
	color: var(--color-white);
}
#pm-app .collectionform button {
	/* flex-grow: 1; */
	max-width: 50px;
	background-color: var(--color-white);
	color: var(--color-black);
	padding: 10px;
	border: 1px solid var(--color-white);
	border-left: none;
	cursor: pointer;
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	background-color: var(--color-background);
	color: var(--color-white);
}
#pm-app .collectionform button svg {
	fill: var(--color-white);
}
#pm-app .tasklist {
	display: flex;
	flex-direction: column;
	/* padding: 20px; */
}
#pm-app .collection {
	width: 150px;
	max-width: 150px;
	display: block;
	font-size: 20px;
	border-radius: var(--border-radius);
	background-color: var(--color-background);
	color: var(--color-white);
	border: 1px solid var(--color-white);
	margin: 0 auto 5px auto;
	text-align: center;
	padding: 10px 20px;
	cursor: pointer;
}
#pm-app .collection.active {
	color: var(--color-background);
	background-color: var(--color-white);
}
#pm-app .task {
	/*  */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	/* padding: 10px 20px; */
	border-radius: var(--border-radius);
	background-color: var(--color-white);
	color: var(--color-black);
	margin-bottom: 5px;
}
#pm-app .now {
	background-color: var(--color-green);
	color: var(--color-black);
}
#pm-app .later {
	background-color: var(--color-accent);
	/* background-color: var(--color-magenta); */
	color: var(--color-white);
	color: var(--color-black);
}
#pm-app .made {
	text-align: center;
	flex: 1;
}
#pm-app .done {
	background-color: var(--color-grey);
	color: var(--color-white);
}
#pm-app .task .description {
	width:80%;
	padding: 10px 20px;
}
#pm-app .task .actions {
	display: flex;
	flex-direction: row;
	width:20%;
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	padding: 10px 20px;
}
#pm-app .task .actions .action {
	width: 100%;
	height: 100%;
	color: var(--color-background);
	/* background-color: var(--color-white); */
	
	/* padding: 10px; */
	border: none;
	cursor: pointer;
}