:root {
  --bgreen:rgb(89, 211, 84);
  --orange:rgb(235, 167, 43);
  --red:rgb(235, 67, 67);
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	display:block;
	max-width:100%;
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

.wrap {
  position:relative;
  width:1220px;
  padding:0 10px;
  max-width:100%;
  margin:0 auto;
}

#burger,
#mobnav {
  display:none;
}

body {
    font-size:62.5%;
    font-family: Arial, Helvetica, sans-serif;
    background-color:#444;
    color:#fff;
}

header {
	position:fixed;
  left:0;
  top:0;
	width:100px;
  height:100%;
  background-color:#222;
  padding:2em;
  color:#fff;
  Z-index:100;
}

#logo {
  float:left;
  width:100%;
  margin-bottom:2em;
  border-radius:100em;
}

  #logo img {
    width:100%;
    max-height:100%;
  }

  nav,
  nav ul,
  nav li,
  nav a {
    float:left;
    clear:left;
    width:100%;
    text-align: right;
    list-style: none;
  }

  nav a {
    font-size:1.2em;
    text-decoration: none;
    margin-bottom:1em;
  }

h1,h2,h3,h4,h5,h6 {
	margin-bottom:1em;
	font-weight:normal;
}

.main {
  float:right;
  width:calc(100% - 100px);
  padding:3em;
}

  h1 {
    font-weight:Bold;
  }

.main p,
.main li{
	font-size:1.4em;
	line-height:1.6;
	margin-bottom:1em;
}

.main ul,
.main ol {
	margin:2em;
}

  .main li {
    padding-left:1em;
  }

.priority,
.pend-inv {
  width:30px;
  height:30px;
  border-radius:100%;
  position: relative;
}

  .priorityLow {
    background-color:rgb(89, 211, 84);
  }
  .priorityMedium {
    background-color:rgb(235, 167, 43);
  }
  .priorityHigh {
    background-color:rgb(235, 67, 67);
  }
  .priorityArchived {
    background-color:rgb(0, 0, 0);
  }
  .priorityPersonal {
    background-color:rgb(114, 114, 114);
  }

  .tick {
    border:2px solid var(--bgreen);
    color: var(--bgreen);
    text-align: center;
    font-size:1.8em;
  }

  

  .priority-hover {
    position:absolute;
    bottom:0;
    width:90px;
    text-align: center;
    left:50%;
    transform:translateX(-50%);
    display:none;
}

    .priority:hover .priority-hover {
      display:block;
      padding-bottom:30px;
    }

    .container {
        display:inline-block;
        position:relative;
        width:1.5em;
        height:1.5em;
    }

    .container input {
        cursor: pointer;
        height: 1.5em;
        width: 1.5em;
        opacity:0;
        margin:0;
    }

    .container .dot{
        display: block;
        width:1.5em;
        height:1.5em;
        border-radius:1em;
    }

        .container:nth-of-type(1) .dot{
          background-color:rgb(0, 0, 0);
        }
        .container:nth-of-type(2) .dot{
          background-color:rgb(114,114,114);
        }
        .container:nth-of-type(3) .dot{
          background-color:rgb(89, 211, 84);
        }
        .container:nth-of-type(4) .dot{
          background-color:rgb(235, 167, 43);
        }
        .container:nth-of-type(5) .dot{
          background-color:rgb(235, 67, 67);
        }

        .container:hover .dot {
          margin:-2px 0 2px 0;
        }

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5em 1em 1em 0;
}

img.align_right {
  margin:0.5em 0 1em 1em;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

input,
label,
textarea,
select,
option {
    float:left;
    clear:left;
    width:100%;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom:1em;
    font-size:1.4em;
}

input,
textarea,
option,
select {
    padding:1em;
    background-color:#222;
}

  input[type="submit"]{
    cursor: pointer;
    padding:1em;
  }

select,
option {
    cursor: pointer;
}

.popup {
  display:none;
  position:fixed;
  inset: 0;
  background-color:#00000099;
  padding:5%;
}

  .popup .inner {
    background-color:#fff;
    width:500px;
    max-width:calc(100vw - 2rem);
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    border-radius:1em;
  }

    .popup .inner .form-head {
      background-color:darkslateblue;
      color:#fff;
      width:100%;
      padding:2em;
      border-radius:1em 1em 0 0;
    }

    .popup h3 {
      font-size:1.2em;
      text-transform: uppercase;
      margin:0;
    }

    .popup .form-head input,
    .popup .form-head a {
      float:right;
      background-color:#fff;
      color:#000;
      padding:0.5em;
      text-decoration: none;
      border:none;
      border-radius:0.25em;
      outline: none;
      font-size:1.6em;
      line-height: 1;
      margin:0 0 0 0.5em;
      cursor: pointer;
    }

    .popup .form-head p {
      float:left;
      font-size:2em;
      margin:0;
    }

    .popup .body {
      padding:2em;
    }

    .popup select {
      width:100%;
      padding:1em;
    }

footer {
  clear:both;
}

	.main .copyright {
		font-size:1em;
    opacity:0.25;
	}

.daily-tip {
  position:fixed;
  width:100%;
  height:100%;
  padding:5%;
  background-color:#000a;
  z-index:100;
}

  .daily-tip .inner {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:500px;
    max-width:calc(100vw - 2rem);
    padding:2em;
    background-color:#333;
  }

  .daily-tip h3 {
    color:var(--orange);
    font-weight: bold;
    font-size:2em;
    margin-bottom:0.25em;
  }

  .daily-tip p {
    font-size:1.4em;
    line-height: 1.6;
    margin-bottom:1em;
  }

    .daily-tip p:last-of-type{
      margin-bottom:0;
    }

  .daily-tip .close {
    position:absolute;
    background-color:#fff;
    color:#333;
    text-decoration: none;
    border-radius: 100em;
    padding:0.5em;
    right:-1em;
    top:-1em;
    font-size:2em;
  }

  .daily-tip ul {
    padding:1.5em;
  }

    .daily-tip li {
      font-size:1.4em;
      margin-bottom:0.25em;
    }

form input {
  outline:none;
  border:none;
}

  .submit-btn:hover {
    background-color:var(--orange);
    color:#333;
  }
  
@media screen and (max-width:999px) {

  header {
    width:100%;
    height:unset;
    padding:1.25em;
  }

    #logo {
      width:4em;
      margin-bottom:0;
    }
  
    #burger {
      float:right;
      width:40px;
      display:block;
    }

    nav {
      display:none;
      max-height:100dvh;
      overflow-y:auto;
    }

    nav a {
      margin:0;
      padding:1em 0;
      text-align: center;
      background-color:#333;
      border-bottom:1px solid #fff1;
    }

  .main {
    width:100%;
    padding:8em 1.5em 1.5em;
  }
}