@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Product Sans'), local('ProductSans-Regular'), url(https://fonts.gstatic.com/s/productsans/v9/HYvgU2fE2nRJvZ5JFAumwYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Google Sans Regular'), local('GoogleSans-Regular'), url(https://fonts.gstatic.com/s/googlesans/v3/khwE6ebDk7v-fH13VXeNCJ0EAVxt0G0biEntp43Qt6E.ttf) format('truetype');
}

:root {
  --bg-dark-t: rgba(0, 0, 0, 0.3);
  --bg-dark: rgba(54, 56, 58, 0.9);
  --bg-light: rgba(68, 70, 72, 0.9);
  --fg-dark: #A4A5A5;
  --fg-light: #DDD;
  --bg-gradient-line1: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
  --bg-gradient-line2: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
}

body {
  background: #0d1011;
  font-family: "Google Sans", sans-serif;
  font-size: 9pt;
  color: var(--fg-dark);
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  transition: opacity .8s ease;
  overflow: hidden;
}

ul, li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a, a:link, a:visited {
  color: var(--fg-dark);
  text-decoration: none;
  outline: none;
}

a:hover, a:active {
  color: var(--fg-light);
}

textarea {
  font-family: "Google Sans", sans-serif;
}

.background {
  background: #0d1011 url("../media/pond.gif") no-repeat center fixed;
  image-rendering: pixelated;
  background-size: cover;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}

div:focus, div:active {
  outline: none;
}





/*==============*/
/*== Buttons ==*/
/*============*/

.menu-category {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.button-container {
  display: inline-block;
  height: 50px;
  width: 50px;
  padding: 0;
}

.button {
  width: 50px;
  min-height: 50px;
  max-height: 50px;
  border-radius: 50px;
  background-color: var(--bg-dark);
  background-image: var(--bg-gradient-line2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  --accent-color: var(--fg-dark);
}

.button label {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.button svg {
  fill: var(--accent-color);
}

.menu-link-item.spacer {
  padding: 0px 0;
  background: var(--accent-color);
  height: 1px;
  margin: 6px 45px;
  opacity: .4;
}

.button.accent-white {
  --accent-color: var(--fg-dark);
}

.button.accent-black {
  --accent-color: #181d22;
}

.button.accent-blue {
  --accent-color: #009fff;
}

.button.accent-green {
  --accent-color: #10ffa3;
}

.button.accent-cyan {
  --accent-color: #0ad6ff;
}

.button.accent-red {
  --accent-color: #cd4046;
}

.button.accent-magenta {
  --accent-color: #c135d9;
}

.button.accent-yellow {
  --accent-color: #ffd200;
}

.button>.button-content {
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  padding: 13px;
}

.button-container.disable .button>.button-content {
  opacity: .2 !important;
}

.button-container.expanding-down:not(.disable):hover {
  padding-bottom: 10px;
}

.button-container.expanding-down .button {
  transition: .2s cubic-bezier(0.4, 0.0, 0.2, 1) .1s;
}

.button-container.expanding-down:not(.disable):hover .button {
  width: 200px;
  max-height: 350px;
  border-radius: 5px;
  margin: 58px 0 0 -75px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .18), 0 8px 16px 0 rgba(0, 0, 0, .36);
}

.button-container.expanding-down .button>.button-content {
  transition: .2s cubic-bezier(0.4, 0.0, 0.2, 1) .3s;
}

.button-container.expanding-down:not(.disable):hover .button>.button-content {
  opacity: 0;
  transition: .2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.button-container.expanding-down .button>.button-expanded-content {
  opacity: 0;
  visibility: hidden;
  transition: .2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.button-container.expanding-down:not(.disable):hover .button>.button-expanded-content {
  opacity: 1;
  visibility: visible;
  transition: .2s cubic-bezier(0.4, 0.0, 0.2, 1) .3s;
}





/*=================*/
/*== Containers ==*/
/*===============*/

.container {
  width: 500px;
  position: relative;
  border-radius: 6px;
}

#mainContainer {
  transition: opacity .8s ease .1s;
  opacity: 0;
}

#searchContainer {
  background-color: var(--bg-light);
  background-image: var(--bg-gradient-line1);
  border-radius: 20.5px;
  transition-property: background-color, box-shadow;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.input-active #searchContainer {
  background-color: var(--bg-light);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .18), 0 8px 16px 0 rgba(0, 0, 0, .36);
  transition-delay: 0.2s, 0.2s;
  z-index: 50;
}

#menuContainer {
  margin-top: 1rem;
  transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
}

.input-active #menuContainer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/*=Centering Flex Container W/ Options=*/

.center-flex {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

.center-flex.offset-25 {
  top: 25%;
  position: fixed;
}

#searchHelp {
  z-index: 0;
  max-height: 0;
  overflow-x: visible;
  overflow-y: scroll;
  transition: max-height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.input-active #searchHelp {
  max-height: 435px;
  transition: max-height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
}





/*=================*/
/*== SEARCH BAR ==*/
/*===============*/

.container-search #searchBar {
  background: transparent;
  border-color: transparent !important;
  outline: none !important;
  font-size: 2em;
  text-align: center;
  color: var(--fg-dark);
  padding: 6px 0;
  display: block;
  width: 100%;
  border: none;
  font-family: 'Product Sans', Arial, sans-serif;
}

.container-search ::-webkit-input-placeholder {
  font-family: 'Product Sans', Arial, sans-serif;
  user-select: none;
  color: var(--fg-dark);
}





/*=================*/
/*== LINK MENUS ==*/
/*===============*/

.menu-link {
  width: 200px;
}

.menu-link-item a {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 6px 0;
}

.menu-link-item:first-child a {
  padding-top: 16px;
}

.menu-link-item:last-child a {
  padding-bottom: 16px;
}

.menu-link-item a label {
  width: 100%;
  vertical-align: middle;
  text-align: center;
  display: block;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: color 0.1s cubic-bezier(0.4, 0.0, 0.2, 1) border-color 0.1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.menu-link-item:hover a label {
  color: var(--fg-light);
  border-color: var(--fg-light);
}





/*==============*/
/*== Widgets ==*/
/*============*/

.widget {
  top: 1rem;
  left: 1rem;
  position: fixed;
  font-family: 'Google Sans';
  font-weight: 300;
  text-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.05s;
}

.widget.align-right {
  left: initial;
  right: 1rem;
  text-align: right;
}

.widget.align-bottom {
  top: initial;
  bottom: 1rem;
}

#dateWidget {
  color: var(--fg-light);
}





/*============*/
/*== Notes ==*/
/*==========*/

.container-notes {
  background-color: var(--bg-dark-t);
  border-radius: 5px 50px 50px 5px;
  position: relative;
  max-height: 50px;
  transition: max-height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.2s ease, box-shadow .2s ease, border-radius .2s ease .1s, left .2s cubic-bezier(0.4, 0.0, 0.2, 1) .3s;
  left: -241px;
}

.container-notes:hover {
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
  transition: max-height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.2s ease, box-shadow .2s ease, border-radius .2s ease .1s, left .2s cubic-bezier(0.4, 0.0, 0.2, 1);
  left: -231px;
}

.container-notes.active {
  background-color: var(--bg-light);
  max-height: 540px;
  left: 0px;
  border-radius: 5px;
  transition: max-height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) .2s, background-color 0.2s ease, box-shadow .2s ease .1s, border-radius .2s ease, left .2s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .18), 0 8px 16px 0 rgba(0, 0, 0, .36);
}

.container-notes textarea {
  min-height: 0px;
  min-width: 300px;
  width: 100%;
  border: none;
  outline: none;
  padding: 16px;
  background: transparent;
  color: var(--fg-dark);
  resize: none;
  transition: min-height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .2s ease;
  opacity: 0;
}

.container-notes.active textarea {
  min-height: 500px;
  opacity: 1;
  transition: min-height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) .1s, opacity .2s ease .1s;
}

@media (max-height: 532px) {
  .container-notes.active {
    max-height: calc(100vh - 32px);
  }
  .container-notes.active textarea {
    min-height: calc(100vh - 32px);
  }
}

.notes-icon {
  background: var(--bg-dark);
  border-radius: 48px;
  position: absolute;
  right: 0px;
  width: 68px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .2s ease .2s, box-shadow .2s ease;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.container-notes:hover .notes-icon {
  box-shadow: none;
}

.container-notes.active .notes-icon {
  box-shadow: none;
  opacity: 0;
  transition: opacity .2s ease;
}

.notes-icon svg {
  fill: var(--fg-dark);
}





/*==============*/
/*== Helpers ==*/
/*============*/

.font-2em {
  font-size: 2em;
}

.noselect {
  user-select: none;
}



/*=================*/
/*== HELP LIST ==*/
/*===============*/

.help-list {
  font-size: 1.4em;
  padding: 0 10px 0 16px;
}

.help-list li {
  font-family: 'Product Sans', Arial, sans-serif;
  margin-bottom: 10px;
  cursor: pointer;
  color: var(--fg-dark);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
  height: auto;
  display: flex;
  opacity: 0;
  border-radius: 6px;
  margin-top: -100px;
  transition: 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.help-list li:hover {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}

.help-list li:active {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.input-active .help-list li {
  transition: 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), margin 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) 0.1s;
  opacity: 1;
  margin-top: 10px;
}

.help-list li > span {
  transition: 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  padding: 20px 0;
}

.help-list li > span.keyword {
  display: inline-block;
  text-align: center;
  width: 50px;
  flex: 0 1 50px;
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--bg-light);
  background-image: var(--bg-gradient-line2);
}

.help-list li > span.description {
  padding-left: 10px;
  display: inline-block;
  height: 100%;
  flex-grow: 1;
  background-color: var(--bg-dark);
  background-image: var(--bg-gradient-line2);
}

.help-list li:hover > span {
  color: var(--fg-light);
}

.help-list li:hover > span.description {
  background-color: var(--bg-light);
}

.input-active .help-list li:last-child {
  margin-bottom: 5px;
}