:root {
  	--main-bg-color: white;
  	--panel-bg-color: #E9EDEE;
  	--dark-cyan: #1E5D81;
	--cyan: #1BAFDD;
	--coral: #F16A6A;
	--gold: #FFB453;
	--pearl-gray: #E9EDEE;
	--midnight:#1C3F54;
	--green: #3C0;
}

* {
  box-sizing: border-box;
}

.contain {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}
input:focus,
textarea:focus {
  box-shadow: 0 0 5px var(--gold);
}
.reallyImportant {
	font-weight:bold;
	padding: 1px 5px;
	animation: pulse 1s infinite;
}
@keyframes pulse {
  0% {
    background-color: #FFFFFF;
	color: #000000;
  }
  50% {
    background-color: #FFFF00;
	color: #FF0000;
  }
  100% {
    background-color: #FFFFFF;
	color: #000000;
  }
}

@media (min-width: 600px) {
  .contain {
    padding: 0;
  }
}

h3,
ul {
  margin: 0;
}

h3 {
  margin-bottom: 1rem;
}
.small {
	0.8rem;
}


input,
textarea,
button {
  width: 100%;
  border: 1px solid #000;
  border-radius: 3px;
}
.fieldError {
	border: 2px solid red;
}

div.submit {
  border: 1px solid #000;
  border-radius: 3px;
  padding: 0.5rem;
	background: var(--cyan);
	color: white;
  font-size:1.25em;
}
div.submit:hover {
	background: var(--green);
	color: white;
	font-size:1.25em;
	cursor:pointer;
}
button[type="submit"] {
	background: var(--cyan);
	color: white;
  font-size:1.25em;
}
button[type="submit"]:hover {
	background: var(--green);
	color: white;
  font-size:1.25em;
}

.wrapper {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.wrapper > * {
  padding: 1em;
}

@media (min-width: 700px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  .wrapper > * {
    padding: 2em 2em;
  }
}

ul {
  list-style: none;
  padding: 0;
}

.contacts {
  background: var(--cyan);
  color: #fff;
}

.form {
  background: #fff;
  min-height:461px;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
form.block {
	display: block;
}
.double-wide {
    grid-column: span 2;
}
form label {
  display: block;
  margin-bottom:0;
}
form p {
  margin: 0;
}

.full-width {
  grid-column: 1 / 3;
}


input,
select,
textarea {
  padding: 0.5em;
}

button {
  background: lightgrey;
  width: 100%;
  border: 0;
  border-radius: 2px;
  padding: 0.5em;
  font-size:1.25em;
}
button:hover, button:focus {
  background: var(--gold);
  outline: 0;
}

.form-container {
		display: grid;
		grid-gap: 10px;
		/*grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));*/
		grid-template-columns: repeat(auto-fit,180px);
		grid-auto-rows: 100px;
		grid-auto-flow: dense;
		width: 80vw;
		height: calc(100% - 80px);
		margin: 10px auto;
		max-width:1215px;;
}

/* Left Panel */
#leftPanel {
	box-sizing:border-box;
	position:fixed;
	z-index:30;
 	transition: 0.5s;
	width: 300px;
	padding: 3px;
	color: white;
	top: 52px;
	height: calc(100% - 79px);
    display:flex;
	flex-direction: column;
	align-items:flex-start;
}
#leftPanel.closed {
	left: -300px;
	background: rgba(0,0,0,0.25);
}

#leftPanel.open {
	left: 0px;
	background: rgba(0,0,0,0.95);
}
table, thead, tbody,tr, td, tfoot {
    background: rgba(0,0,0,0.1);
    Padding: 0;
    margin:0;
    border:1px solid white;
}
label {
    color: black;
}
input, button, select,option {
    border-radius: 3px;
    font-size: 0.8rem;
}

#newProjectDiv {
    width: 70%;
    border:solid 0 black;
}
#newProject {
    width:90%;
}

/* Project List */
#projectList {
    width:294px;
    padding:0;
    margin:0;
    margin-bottom:15px;
}
#projectGrid tr:hover {
    background-color: aquamarine;
}

.projLine {
    display:flex;
    width: 294px;
    padding: 3px 0;
    margin: 0;
    border-bottom: 1px solid #304050; 
}
.projCheckbox {
    width: 20px;
    padding:0;
    margin:0;
    text-align: center;
    display: inline-block;
}
.projName {
    width: 234px;
    padding:0;
    margin:0;
    display: inline-block;
}
.projPriority{
    width: 24px;
    padding:0;
    margin:0;
    text-align: center;
    display: inline-block;    
}

/* Project Controls */
#projectControls {
    width:294px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}



/* Bottom Panel */
#bottomPanel {	
  transition: 0.5s;
  z-index:50;
}
#bottomPanel.closed {
	position:fixed;
	bottom:0;
	height: 28px;
	width:100%;
	z-index:50;
	background: rgba(153,153,153,0.75);
}
#bottomPanel.open {
	position:fixed;
	bottom:0;
	/* Subtract the header size */
	height: calc(100% - 51px);
	overflow: auto;
	width:100%;
	z-index:50;
	background: rgba(153,153,153,0.97);
	
}
#upDown {
	padding: 0;
	width:100%;
	text-align:center;
	cursor: pointer;
	border-bottom:groove 3px #CCC;
	border-top: solid 1px white;
	color: black;
}

.borderBlack {
    border: 1px solid black;
}

table {
    width: 95%;
    margin: 10px auto;
}

th.wkend, td.wkend {
    background: #506070;
}
th.wkendText, td.wkendText {
    color: rgba(0,0,0,0) !important;
}
td {
    background: white;
}
th {
    font-size: 0.9rem;
    font-family: "Segoe UI Semibold", Calibri, Arial, Helvetica, sans-serif;
    border-right: 1px solid #45484d;
    color:white;
    background:black;
}
th:last-of-type {
    border-right: none;
}
tbody.stats tr td, tfoot.stats tr td {
    font-size: 0.75rem;
    font-family: "Segoe UI Semibold", Calibri, Arial, Helvetica, sans-serif;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    text-align:right;
    padding-right:3px;
    color: black;
    white-space: nowrap;
}

td.wkend {
    background: #A0B0C0;
    color: #203040;
}

td:last-of-type {
    border-right: none;
}

tr:last-of-type td {
    border-bottom:none;
}

tr:hover {
    background-color: #A0B0C0;
}

/* Task styles */
.P1.active {
	border: solid 2px white;
	border-radius: 5px;
	background: #FF2626 url('../images/pulse.gif') 2px 2px no-repeat;
	color: white;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.P1:not(.active):hover {
	border: solid 2px white;
	border-radius: 5px;
	background: #FF2626;
	color: white;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.P1 {
	border: solid 2px  #FF2626;
	border-radius: 5px;
	background: transparent;
	color:  #FF2626;
}

.P2.active {
	border: solid 2px white;
	border-radius: 5px;
	background: #FF8000 url('../images/pulse.gif') 2px 2px no-repeat;
	color: white;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.P2:not(.active):hover {
	border: solid 2px white;
	border-radius: 5px;
	background: #FF8000;
	color: white;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.P2 {
	border: solid 2px  #FF8000;
	border-radius: 5px;
	background: transparent;
	color:  #FF8000;
}
.P3.active {
	border: solid 2px white;
	border-radius: 5px;
	background: #008C00 url('../images/pulse.gif') 2px 2px no-repeat;
	color: white;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.P3:not(.active):hover {
	border: solid 2px white;
	border-radius: 5px;
	background: #008C00;
	color: white;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.P3 {
	border: solid 2px  #008C00;
	border-radius: 5px;
	background: transparent;
	color:  #008C00;
}
.P4.active {
	border: solid 2px white;
	border-radius: 5px;
	background: #00468C url('../images/pulse.gif') 2px 2px no-repeat;
	color: white;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.P4:not(.active):hover {
	border: solid 2px white;
	border-radius: 5px;
	background: #00468C;
	color: white;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.P4 {
	border: solid 2px  #00468C;
	border-radius: 5px;
	background: transparent;
	color:  #00468C;
}
.projectTask:hover {
	cursor:pointer;
}

.hidden {
    display:none;
}

.task {
	font-family: "Segoe UI Semibold", Arial, Helvetica, Sans-Serif;
	font-size: 1rem;
	text-align:center;
	padding:5px;
}
.timer {
	font-family: "Segoe UI", Arial, Helvetica, Sans-Serif;
	font-size: 2.4rem;
	text-align:center;
	padding:5px;
}

#projTable tr:hover {
    background: #F0F8FF;
}
#projTable tr {
    border-top: solid 1px black;
}
.stepHolder {
	float:right;
	width:200px;
	height: 1.5rem;
	padding:0;
	line-height: 1.5rem;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.stepNumber {
	width:1.5rem;
	height:1.5rem;
	line-height: 1.5rem;
	text-align:center;
	font-size: 1.3rem;
	color: white;
	background: var(--coral);;
	border-radius:100%;
	float: left;
	border: 1px solid var(--coral);
	margin: 0 5px;
}
.stepNumber-past {
	width:1.5rem;
	height:1.5rem;
	line-height: 1.3rem;
	text-align:center;
	font-size: 1.3rem;
	color: white;
	background: #A0B0C0;
	border-radius:100%;
	float: left;
	border: 1px solid #A0B0C0;
	margin: 0 5px;
}
.stepNumber-future {
	width:1.5rem;
	height:1.5rem;
	line-height: 1.3rem;
	text-align:center;
	font-size: 1.3rem;
	color: #A0B0C0;
	background: transparent;
	border-radius:100%;
	float: left;
	border: 1px solid #A0B0C0;
	margin: 0 5px;
}
.editor {
	min-width: 300px;
	width: 600px;
	height:450px;
	grid-column: span 2;
	background:white;
	border: solid 3px var(--coral);
	border-radius: 3px;
}