:root {
    --backgroundColor: #0d1011;
    --containerColor: #1F2326;
    --fontColor: #7291a1;
    --searchAssistColor: #1a1d1f;
    --searchAssistFontColor: #a7b3b9;
    --dateFontColor:#FFF;
    --imgAnimDuration: 0.8s;
}

body {
 background:var(--backgroundColor);
 font-family:"Roboto",sans-serif;
 font-size:9pt;
 color:#fff;
 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(--containerColor);
 text-decoration:none;
}
a:hover,a:active {
 color:#fff;
}
textarea {
 font-family:"Roboto",sans-serif;
}
.background {
 background:var(--backgroundColor);
 background-size:cover;
 position:fixed;
 left:0;
 top:0;
 height:100vh;
 width:100vw;
 z-index:-1;
}
.button-container {
 display:inline-block;
 height:50px;
 width:50px;
}
.button {
 width:50px;
 min-height:50px;
 max-height:50px;
 border-radius:50px;
 background:var(--containerColor);
 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);
}
.button label {
 color:#ffffff;
 border-color:#ffffff;
}
.button svg {
 fill:#ffffff;
}
.button.accent-black label {
 color:#181d22;
 border-color:#181d22;
}
.button.accent-black svg {
 fill:#181d22;
}
.button.accent-blue label {
 color:#009fff;
 border-color:#009fff;
}
.button.accent-blue svg {
 fill:#009fff;
}
.button.accent-green label {
 color:#10ffa3;
 border-color:#10ffa3;
}
.button.accent-green svg {
 fill:#10ffa3;
}
.button.accent-cyan label {
 color:#0ad6ff;
 border-color:#0ad6ff;
}
.button.accent-cyan svg {
 fill:#0ad6ff;
}
.button.accent-pink label {
 color:#FF69B4;
 border-color:#FF69B4;
}
.button.accent-pink svg {
 fill:#FF69B4;
}
.button.accent-purple label {
 color:#CC55FF;
 border-color:#CC55FF;
}
.button.accent-purple svg {
 fill:#CC55FF;
}
.button.accent-red label {
 color:#cd4046;
 border-color:#cd4046;
}
.button.accent-red svg {
 fill:#cd4046;
}
.button.accent-orange label {
 color:#cf5300;
 border-color:#cf5300;
}
.button.accent-orange svg {
 fill:#cf5300;
}
.button.accent-yellow label {
 color:#ffd200;
 border-color:#ffd200;
}
.button.accent-yellow svg {
 fill:#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:.05s cubic-bezier(0.4,0.0,0.2,1);
}
.button-container.expanding-down:not(.disable):hover .button {
 width:120px;
 max-height:650px;
 border-radius:2px;
 margin:60px 0px 0px 0px;
 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:.05s cubic-bezier(0.4,0.0,0.2,1) .05s;
}
.button-container.expanding-down:not(.disable):hover .button>.button-content {
 opacity:0;
 visibility:hidden;
 transition:.05s cubic-bezier(0.4,0.0,0.2,1);
}
.button-container.expanding-down .button>.button-expanded-content {
 opacity:0;
 visibility:hidden;
}
.button-container.expanding-down:not(.disable):hover .button>.button-expanded-content {
 opacity:1;
 visibility:visible;
 transition:.05s cubic-bezier(0.4,0.0,0.2,1) .05s;
}
.container {
 width:520px;
 position:relative;
 border-radius:2px;
}
.credits {
	color: var(--fontColor) !important;
	position:absolute;
    bottom:0;
    left:0;
    border-radius:2px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom:10px;
    font-family:"Roboto",sans-serif;
}
#mainContainer {
 transition:opacity .8s ease calc(var(--imgAnimDuration) + .1s);
 opacity:0;
}
#searchContainer {
 background-color:var(--containerColor);

 transition:1.1s 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 {
 box-shadow:0 0 8px 0 rgba(0,0,0,.18),0 8px 16px 0 rgba(0,0,0,.36);
 transition:0.2s cubic-bezier(0.4,0.0,0.2,1) 0.2s;
}
.menu-category {
 display:flex;
 flex-direction:row;
 width:520px;
 flex-wrap:nowrap;
 transition:0.2s cubic-bezier(0.4,0.0,0.2,1) 0.2s;
} 
.input-active .menu-category {
 opacity:0;
 transition:0.2s cubic-bezier(0.4,0.0,0.2,1);
}
#notesContainer, #mainMenuContainer {
 background:var(--containerColor);
 animation-name: menuslide;
 animation-duration: calc(var(--imgAnimDuration) + 1.2s);
}

.main-menu-field {
    background-color:var(--containerColor);
    color : var(--fontColor);
    border: none;
    /*border-bottom: 2px solid var(--fontColor);*/
}

.center-flex {
 display:inline-flex;
 width:100%;
 justify-content:center;
}
.center-flex.offset-25 {
 top:18%;
 position:fixed;
}
.container-search input {
 background:transparent;
 font-size:1.76em;
 text-align:center;
 color:var(--fontColor);
 padding:6px 0;
 display:block;
 width:100%;
 border:none;
 transition:0.2s cubic-bezier(0.4,0.0,0.2,1);
 font-family:'Product Sans',Arial,sans-serif;
}
.container-search input::-moz-placeholder {
 font-family:'Product Sans',Arial,sans-serif;
}
.container-search input:focus {
 border-color:transparent;
 padding:20px 0;
 font-size:2em;
 transition:0.2s cubic-bezier(0.4,0.0,0.2,1) 0.2s;
}
.container-menu {
 margin-top:10px;
}
.button-container {
 flex-grow:1;
}
.button-container.expanding-down .button {
 position:absolute;
}
.menu-link {
 width:120px;
}
.menu-link-item {
 padding:1px;
}
.menu-link-item:first-child {
 padding-top:10px;
}
.menu-link-item:last-child {
 padding-bottom:10px;
}
.menu-link-item a {
 display:block;
 white-space:nowrap;
 text-overflow:ellipsis;
 text-align:center;
 font-size:9pt;
}
.menu-link-item a label {
 width:100%;
 vertical-align:middle;
 text-align:center;
 display:block;
 cursor:pointer;
 text-overflow:ellipsis;
}
.menu-link-item:hover a label {
 color:#ffffff;
 border-color:#ffffff;
}
.widget {
 top:20px;
 left:20px;
 position:fixed;
 font-family:'Roboto';
 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 {
 color:var(--fontColor);
 left:initial;
 right:20px;
 text-align:right;
}
.widget.align-right2 {
 color:var(--fontColor);
 left:initial;
 right:20px;
 top:90px;
 text-align:right;
 opacity:1;
}
.widget.align-bottom {
 top:initial;
 bottom:20px;
}
.container-notes {
 background:var(--backgroundColor);
 border-radius:2px 50px 50px 2px;
 position:relative;
 max-height:48px;
 max-width: 300px;
 transition:max-height 0.2s cubic-bezier(0.4,0.0,0.2,1),box-shadow .2s ease,border-radius .2s ease .1s,left .2s cubic-bezier(0.4,0.0,0.2,1);
 box-shadow:0 3px 4px 0 rgba(0,0,0,0.14),0 3px 3px -2px rgba(0,0,0,0.2),0 1px 8px 0 rgba(0,0,0,0.12);
 left:-272px;
}
.container-notes:hover {
 left:-256px;
 box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2);
}
.container-notes.active {
 max-height:447px;
 left:0px;
 border-radius:2px;
 transition:max-height 0.2s cubic-bezier(0.4,0.0,0.2,1) .1s,box-shadow .2s ease .1s,border-radius .2s ease,left .2s cubic-bezier(0.4,0.0,0.2,1) .1s;
 box-shadow:0 0 8px 0 rgba(0,0,0,.18),0 8px 16px 0 rgba(0,0,0,.36);
}

.container-mainmenu {
 background:var(--backgroundColor);
 border-radius:2px 50px 50px 2px;
 position:relative;
 max-height:48px;
 max-width: 300px;
 transition:max-height 0.2s cubic-bezier(0.4,0.0,0.2,1),box-shadow .2s ease,border-radius .2s ease .1s,left .2s cubic-bezier(0.4,0.0,0.2,1);
 box-shadow:0 3px 4px 0 rgba(0,0,0,0.14),0 3px 3px -2px rgba(0,0,0,0.2),0 1px 8px 0 rgba(0,0,0,0.12);
 left:-272px;
}
.container-mainmenu:hover {
 left:-256px;
 box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2);
}
.container-mainmenu.active {
 max-height:532px;
 left:0px;
 border-radius:2px;
 transition:max-height 0.2s cubic-bezier(0.4,0.0,0.2,1) .1s,box-shadow .2s ease .1s,border-radius .2s ease,left .2s cubic-bezier(0.4,0.0,0.2,1) .1s;
 box-shadow:0 0 8px 0 rgba(0,0,0,.18),0 8px 16px 0 rgba(0,0,0,.36);
}

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

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

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

.container-notes.active #notesInput {
 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: 540px) {
 .container-notes.active {
  max-height:calc(100vh - 40px);
 }

 .container-mainmenu.active {
  max-height:calc(100vh - 85px);
 }

 .container-mainmenu.active #mainMenuInput {
  min-height:calc(100vh - 85px);
 }

 .container-notes.active #notesInput {
  min-height:calc(100vh - 40px);
 }
}

.notes-icon {
 position:absolute;
 right:0px;
 width:48px;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;
 transition:opacity .2s ease;
}

.main-menu-icon {
 position:absolute;
 right:0px;
 width:45px;
 height:338%;
 display:flex;
 justify-content:center;
 align-items:center;
 transition:opacity .2s ease;
}

.container-notes.active .notes-icon {
 opacity:0;
}
.container-mainmenu.active .main-menu-icon {
 opacity:0;
}

.notes-icon svg {
 /*fill:#ffd200;*/
 fill: var(--backgroundColor);
}

.main-menu-icon svg {
 fill: var(--backgroundColor);
}


.font-3em {
 font-size:3em;
}
#searchHelp {
 position: absolute;
 -moz-transform-origin: 50% 0;
 max-height:0;
 margin-top:8px;
 overflow:hidden;
 transition:0.2s cubic-bezier(0.4,0.0,0.2,1) 0.2s;
 -webkit-transition-delay:0s;
 transition-delay:0s;
}
.input-active #searchHelp {
 position: absolute;
 -moz-transform-origin: 50% 0;
 max-height:999px;
 transition:0.2s cubic-bezier(0.4,0.0,0.2,1) 0.2s;
 -webkit-transition-delay:0.2s;
 transition-delay:0.2s;
}
.help-list {
 font-size:1.4em;
}
.help-list li {
 background-color:var(--containerColor);
 padding:20px 0;
 margin-bottom:10px;
 color:var(--fontColor);
 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;
 opacity:0;
 margin-left:100px;
 transition:0.2s cubic-bezier(0.4,0.0,0.2,1) 0.2s;
 transition-delay:0.0s;
}
.input-active li {
 transition:0.2s cubic-bezier(0.4,0.0,0.2,1) 0.2s;
 opacity:1;
 margin-left:0;
}
.help-list span {
 margin-right:10px;
 padding:20px;
 width:90px;
 background-color:var(--searchAssistColor);
}
.help-list li:nth-child(0) {
 transition-delay:0.2s;
}
.help-list li:nth-child(1) {
 transition-delay:0.3s;
}
.help-list li:nth-child(2) {
 transition-delay:0.4s;
}
.help-list li:nth-child(3) {
 transition-delay:0.5s;
}
.help-list li:nth-child(4) {
 transition-delay:0.6s;
}
.help-list li:nth-child(5) {
 transition-delay:0.7s;
}
.help-list li:nth-child(6) {
 transition-delay:0.8s;
}
.help-list li:nth-child(7) {
 transition-delay:0.9s;
}
.help-list li:nth-child(8) {
 transition-delay:1s;
}
.help-list li:nth-child(9) {
 transition-delay:1.1s;
}


@font-face {
 font-family:'Roboto';
 font-style:normal;
 font-weight:300;
 src:url('./fonts/roboto-v16-latin-300.eot');
 src:local('Roboto Light'),local('Roboto-Light'),url('./fonts/roboto-v16-latin-300.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto-v16-latin-300.woff2') format('woff2'),url('./fonts/roboto-v16-latin-300.woff') format('woff'),url('./fonts/roboto-v16-latin-300.ttf') format('truetype'),url('./fonts/roboto-v16-latin-300.svg#Roboto') format('svg');
}
@font-face {
 font-family:'Roboto';
 font-style:normal;
 font-weight:400;
 src:url('./fonts/roboto-v16-latin-regular.eot');
 src:local('Roboto'),local('Roboto-Regular'),url('./fonts/roboto-v16-latin-regular.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto-v16-latin-regular.woff2') format('woff2'),url('./fonts/roboto-v16-latin-regular.woff') format('woff'),url('./fonts/roboto-v16-latin-regular.ttf') format('truetype'),url('./fonts/roboto-v16-latin-regular.svg#Roboto') format('svg');
}
@font-face {
 font-family:'Product Sans';
 font-style:normal;
 font-weight:400;
 src:url('./fonts/noto-sans-v6-latin-regular.eot');
 src:local('Product Sans'),local('ProductSans'),url('./fonts/product-sans.eot?#iefix') format('embedded-opentype'),url('./fonts/product-sans.woff2') format('woff2'),url('./fonts/product-sans.woff') format('woff'),url('./fonts/product-sans.ttf') format('truetype'),url('./fonts/product-sans.svg#NotoSans') format('svg');
}
.skew-menu {
 text-align:center;
 margin-top:6em;
 position:fixed;
 width:100%;
}
.skew-menu ul {
 display:inline-block;
 margin:0;
 padding:0;
 list-style:none;
 transform:skew(-25deg);
}

.skew-menu ul li {
 background:#fff;
 float:left;
 border-right:1px solid #eee;
 box-shadow:0 1px 1px rgba(0,0,0,0.1);
 text-transform:uppercase;
 color:#555;
 font-weight:bolder;
 transition:all 0.3s linear;
}
.skew-menu ul li:first-child {
 border-radius:7px 0 0 7px;
}
.skew-menu ul li:last-child {
 border-right:none;
 border-radius:0 7px 7px 0;
}
.skew-menu ul li:hover {
 background:#eee;
 color:tomato;
}
.skew-menu ul li a {
 display:block;
 padding:1em 1em;
 color:inherit;
 text-decoration:none;
 transform:skew(25deg);
}

#backgroundImage {
    width: 100%;
    height: 100%;
    animation-name: imgzoom;
    animation-duration: var(--imgAnimDuration);
    display: none;
}

#bgimgupload {
    display: none;
}

.image {
    font-family:'Product Sans',Arial,sans-serif;
    font-size: 9pt;
    font-weight: 300;
    display: inline;
}

.context-menu {
  display: none;
  position: absolute;
  background-color: var(--containerColor);
  z-index: 10;
  padding: 5px 0;
  border: solid 1px var(--background-color);
  box-shadow: 1px 1px 2px #cfcfcf;
}

.context-menu.active {
  background-color: var(--containerColor);
  display: block;
}

.context-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-menu__item {
  display: block;
  margin-bottom: 4px;
}

.context-menu__item:last-child {
  margin-bottom: 0;
}

.context-link {
  display: block;
  padding: 4px 12px;
  color: var(--fontColor);
  text-decoration: none;
}

.context-link:hover {
  color: var(--fontColor);
}

@keyframes imgzoom {
    from {
        transform: scale(1.5,1.5);
         }
    to {
        transform: scale(1,1);
    }
}

@keyframes menuslide {
    from {
        transform: translateX(-1000px);  
    }
    to {
        transform: translateX(0px);
    }
}