/* Reset CSS*/
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}

/* General */
:root {
    --blue: #00ADB5;
    --lblue: #00c5ce;
    --green: #00F900;
    --red: #FF2600;
    --gray1: #F0F0F1;
    --gray2: #D3D3D6;
    --gray3: #A6A7AE;
    --gray4: #7A7B85;
    --gray5: #4D4F5C;
    --black: #282F38;
    --darkbg: #171717;
    --darkborder: #333333;
    --darktext: #E3E3E3;
    --darktitle: #A5A5A5;


}

::selection {
    color: #fff;
    background: #00ADB5;
}

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

a:focus > svg:not(.arrow) path {
    fill: var(--lblue);
}

::-webkit-scrollbar-track
{
    -webkit-box-shadow: none;
    /*background-color: #F5F5F5;*/
    border: 0;
    cursor: pointer;
    /*border-left: 1px solid var(--gray1);*/
}

::-webkit-scrollbar
{
    width: 7px;
    height: 7px;
    background-color: rgba(166, 167, 174, .10);
    cursor: pointer;
    /*border-left: 1px solid var(--gray1);*/
}

::-webkit-scrollbar-thumb
{
    background-color: #00ADB5;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

[disabled], [disabled] * {
    filter: grayscale(1);
    cursor: not-allowed !important;
}

body, body.darkmode {
    transition: background-color .5s ease-out;
}

body, #app {
    min-height: 100vh;
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
    background: #fff ;
}

* {
    box-sizing: border-box;
}

a {
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    color: var(--blue);
}

#app {
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--gray5);
    line-height: 1.1;
    background-color: white;
}

pre, code {
    font-family: 'Ubuntu Mono', monospace;
    color: var(--black);
    font-weight: normal;
}

pre {
    background: rgba(166, 167, 174, .1);
    padding: 10px;
    max-height: 250px;
    font-size: 1rem;
    line-height: 0.9;
    overflow: auto;
}

code.error {
    color: var(--red);
}

span.lowerCase {
    font-family: 'Ubuntu Mono', monospace;
    text-transform: lowercase;
}

h2 {
    color: var(--blue);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
}

h2 span {
    text-transform: initial;
}

h3 {
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--gray4);
}

.required {
    font-weight: 900;
    color: var(--blue);
}

.btn, .form label.uploadFile, .settings .form input.create.btn {
    background: var(--blue);
    color: #fff;
    padding: 13px 25px;
    margin: 20px 10px;
    text-transform: uppercase;
    border-radius: 25px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    font-size: .9rem;
}

.btn:hover, .form label.uploadFile:hover, a.textBtn.saveConfig:hover {
    background: var(--lblue);
}

button.btn {
    border: 0;
}

a.textBtn.saveConfig:hover {
    color: #fcfcfc;
}

.btnOutline {
    background: #fff;
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 15px 30px;
    margin: 20px 10px;
    text-transform: uppercase;
    border-radius: 25px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.btnOutline:hover, .darkmode .btnOutline:hover {
    background: rgba(0, 197, 206, .1);
}

table {
    width: 100%;
}

p {
    margin: 15px 0;
}


/* Utilities */
.hideOnClick {
    display: none;
}


.noMargin {
    margin: 0;
}

.col-2 {
    width: 50%;
    float: left;
}

.borderRight {
    border-right: 1px solid var(--gray1);
}

.borderLeft {
    border-left: 1px solid var(--gray1);
}

.borderTop {
    border-top: 1px solid var(--gray1);
}

.borderBottom {
    border-bottom: 1px solid var(--gray1);
}

.textCenter {
    text-align: center;
}

.textLeft {
    text-align: left;
}

.pad40 {
    padding: 40px;
}

.close {
    cursor: pointer;
}

input[disabled] {
    cursor: not-allowed !important;
}

.floatRight {
    float: right
}

.colorBlue {
    color: var(--blue) !important;
}

.clearfix {
    display: block;
    width: 100%;
    clear: both;
}

/* split.js */

.split {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    /*border: 1px solid #C0C0C0;
    box-shadow: inset 0 1px 2px #e4e4e4;
    background-color: #fbfbfb;*/
    width: 100%;
}

.splitParent {
    display: inline-block;
}

.split {
    height: 45vh;
    display: inline-block;
}

.hidden {
    opacity: 0;
}

.hide {
    display: none;
}

#loader, .loader {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    z-index: 999;
    background: url(images/loader.gif) center center no-repeat rgba(0,0,0,.5);
    background-size: 40px;
    filter: hue-rotate(-30deg);
    display: none;
}

.open #loader {
    left: 400px;
    width: calc(100vw - 400px);
}


.open.settings #loader {
    left: 800px;
    width: calc(100vw - 800px);
}

li.liConfig, li.liConfig.router-link-exact-active, .configurations .settings, li.liConfig.router-link-exact-active .settings {
    transition: all .3s ease-out;
}

#customParams.expanded, #defaultParams.expanded, #customParams.collapsed, #defaultParams.collapsed {
    transition: height .5s ease-out;
}

/* Topbar */
#topbar {
    display: block;
    width: 100%;
    padding: 20px 40px;
    height: 60px;
}

.logo {
    float: left;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gray5);
    margin-right: 30px;
}

.navLinks a {
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gray4);
    display: inline-block;
    margin: 0 20px;
}

.snippets {
    display: inline-block;
    position: relative;
}

.snippets > a {
    padding-bottom: 23px;
}

.snippetMenu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    top: 39px;
    width: 300px;
    border: 1px solid var(--gray1);
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    background: #fff;
    z-index: 99;
}

.snippets:hover .snippetMenu {
    display: block;
}

.snippetMenu a {
    display: block;
    padding: 20px;
}

.logo:hover, .darkmode .logo:hover, .navLinks a:hover, .darkmode .navLinks a:hover, #home .footer a, .form .upload div.uploadContainer span a, #infoBox p a, .info a, .darkmode span.pgVersion, .darkmode .levelSelector button, .levelSelector button:not(.active) {
    color: var(--blue);
}

.toggleMenu {
    float: left;
    margin-right: 15px;
    cursor: pointer;
}

.toggleMenu span {
    display: block;
    height: 2px;
    background: var(--gray5);
    margin-bottom: 4px;
    width: 20px;
    position: relative;
    top: 0;
    transition: all .3s ease-out;
}

.toggleMenu:hover span, .darkmode .toggleMenu:hover span {
    background: var(--blue);
}

.toggleMenu span:nth-child(2) {
    width: 17px;
}

.toggleMenu.open span {
    transition: all .3s ease-out;
}

/*.toggleMenu.open span:first-child {
    transform: rotate(45deg);
    top: 7px;
}

.toggleMenu.open span:nth-child(2) {
    width: 0;
}

.toggleMenu.open span:last-child {
    transform: rotate(-45deg);
    top: -5px;
}*/

.mobileMenu {
    display: none;
}

.navLinks {
    float: left;
}

.navIcons {
    float: right;
}

.navIcons svg {
    margin-left: 5px;
}

.navIcons svg:hover path, .darkmode .navIcons svg:hover path, .navIcons svg:hover ellipse, .darkmode .navIcons svg:hover ellipse, .navIcons svg:hover rect, .darkmode .navIcons svg:hover rect, div.searchHome a.btn svg path {
    fill: var(--blue);
}

#accountSettings {
    padding: 40px;
    width: 400px;
    height: calc(100vh - 60px);
    background: #fff;
    position: fixed;
    right: -400px;
    top: 60px;
    max-height: calc(100vh - 60px);
    z-index: 10;
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    transition: right .2s ease-out;
}

#accountSettings.show {
    right: 0;
    transition: right .4s ease-out;
}

#accountSettings .name {
    display: block;
    font-weight: 800;
}

#accountSettings .method {
    display: block;
    margin-top: 5px;

}

#notify {
    width: 400px;
    position: fixed;
    top: 75px;
    border: 1px solid var(--gray1);
    padding: 30px 40px;
    right: 40px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(2, 14, 20, .1);
    z-index: 1000;
}

#notify .close {
    float: right;
}

#notificationsBar {
    width: 400px;
    height: calc(100vh - 60px);
    position: fixed;
    right: -400px;
    top: 60px;
    z-index: 10;
    background: #fff;
    padding: 40px;  
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    transition: right .2s ease-out;
}

#notificationsBar.show {
    right: 0;
    transition: right .4s ease-out;
}

#notificationsBar li:first-child:last-child { 
    display: block;
}

#notificationsBar li.noResults{
    display: none;
}

.darkmode #notificationsBar, .darkmode #notify, .darkmode #infoBox .box, .darkmode #shortcutsPopup .box, .darkmode #accountSettings, .darkmode .snippetMenu {
    box-shadow: 0 3px 9px rgba(2, 14, 20, .8);
}

#notificationsBar li {
    list-style: none;
    margin-bottom: 40px;
}

#notificationsBar li {
    margin-top: 30px;
}

#notificationsBar ul:before {
    content: '';
    width: 320px;
    border-top: 1px solid var(--gray1);
    position: relative;
    display: inline-block;
}

#notificationsBar li:after {
    content: '';
    display: inline-block;
    border-bottom: 1px solid var(--gray1);
    width: 320px;
    position: relative;
    top: 20px;
}

#infoBox, #shortcutsPopup {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    display: none;
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    z-index: 999999;
}

#infoBox .box {
    border: 1px solid var(--gray1);
    border-radius: 5px;
    display: none;
    margin: 0 auto;
    padding: 25px 40px;
    background-color: #fff;
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    z-index: 10;
    width: 600px;
    max-width: 80vw;
}

#infoBox.show .box {
    display: inline-block;
  }

#infoBox.show {
    display: flex !important;
    align-items: center;
    text-align: center;
}

#infoBox .header {
    color: var(--blue);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
    margin-left: 40px;
    font-weight: 600;
}

#shortcutsPopup .header {
    color: var(--blue);
    text-transform: uppercase;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 25px;
}

#infoBox .box > a, #shortcutsPopup .close {
    float: right;
    margin-top: 2px;
}

#infoBox p, .info {
    color: var(--gray5);
    line-height: 1.5rem;
}

#shortcutsPopup {
    background-color: rgba(23, 23, 23, .5);
    align-items: center;
}

#shortcutsPopup .box {
    margin: auto;
    background: #fff;
    padding: 25px 40px;
    border: 1px solid var(--gray1);
    border-radius: 5px;
    width: 600px;
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    top: calc(50% - 150px);
    position: relative;
}

.shortcutsContent tr {
    height: 40px;
}

.shortcutsContent td {
    vertical-align: middle;
}

td.shortcutsIcon svg {
    width: 25px;
    margin-right: 10px;
}

.overlay {
    background-color: rgba(23, 23, 23, .5);
    width: 100%;
    height: 100%;
    position: absolute;
}

.darkmode .overlay, .darkmode #shortcutsPopup {
    background-color: rgba(31, 34, 39, .7);
}



/* Sidebar */
#menu {
    display: block;
    width: 400px;
    margin-left: -400px;
    height: calc(100vh - 60px);
    transition: all .2s ease-out;
    position: relative;
    float: left;
    
}

#menu.open {
    margin-left: 0;
    transition: all .3s ease-out;
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    z-index: 10;
}

.darkmode #menu.open {
    box-shadow: 0 3px 9px rgba(2, 14, 20, .8);
}

#menu a.add, #filter a.close, #accountSettings a.close, #menu a.close, #notificationsBar a.close {
    float: right;
}

.configurations span.pgVersion {
    width: 20px;
    height: 20px;
    padding-top: 4px;
    color: var(--blue) !important;
    margin-left: 10px;
    font-size: 12px;
}

.configurations, #menu ul.settingsList, #filter ul, #accountSettings ul, .form ul, ul.downloadOptions {
    list-style: none;
    display: inline;
}

.configurations li, #menu ul.settingsList li, #filter li, #accountSettings li, ul.downloadOptions li.option {
    position: relative;
    margin: 0 -40px;
}

.configurations li.pgFile {
    padding-left: 60px;
    display: none;
    margin: 0;
}

.configurations li.liConfig:hover li.pgFile, .configurations li.liConfig.router-link-exact-active li.pgFile {
    display: block;
}

.configurations li.pgFile code {
    color: var(--gray5);
    font-weight: normal;
}

.configurations li.pgFile .router-link-active code, .configOptions.active code {
    font-weight: bold;
}


.configurations li {
    overflow: hidden;
}

li.pgFile > a svg {
    display: inline-block;
    margin-right: 7px;
    position: relative;
    top: 2px;
}

li.pgFile > a:not(:first-of-type) svg {
    margin-right: 10px;
}

.darkmode #menu .pgFile .router-link-active path, .menu #menu .pgFile a:focus path, .darkmode .configOptions.active .configTab svg path {
    fill: #fff;
}

#menu .pgFile path, #menu .pgFile a:focus path, .configOptions .configTab svg path {
    fill: var(--gray4);
}


#menu .pgFile .router-link-active path {
    fill: var(--black);
}

.configOptions.active .configTab svg path {
    fill: var(--blue) !important;
}

#menu .configurations li.pgFile > a.router-link-exact-active {
    background-color: rgba(166, 167, 174, 0.2);
}

.hljs-keyword {
    color: #0086B6 !important;
}

.hljs-type {
    color: #d14 !important;
}

span.hljs-comment, span.hljs-meta {
    float: none !important;
}

.yaml span.hljs-meta {
    display: block;
}

.configurations li.pgFile:before {
    content: "";
    background: var(--blue);
    height: 100%;
    top: 0px;
    position: absolute;
    border: 1px solid var(--blue);
    left: 60px;
}

.configurations li > a, #menu ul.settingsList li a, #filter li a, #accountSettings li a {
    display: inline-block;
    padding: 9px 40px;
    width: 100%;
}

.configurations li > a.addConfig {
    padding-left: 40px;
}

#menu .configurations li.pgFile > a {
    padding-left: 15px;
}

.configurations li > a {
    padding-left: 55px;
}

.liConfig:hover > a > span, .liConfig.router-link-exact-active > a > span {
    max-width: calc(100% - 90px);
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

li.liConfig.router-link-exact-active > a {
    padding-top: 15px;
}

.configurations li > a:not(.addFile), #menu ul.settingsList li a, #filter li a, #accountSettings li a, ul.downloadOptions li.option a {
    color: var(--gray5);
}

.configurations li.liConfig:not(.router-link-exact-active):hover, #menu ul.settingsList li:hover, #filter li:not(.open):hover, #accountSettings li:hover, .form .upload div.uploadContainer:hover, ul.downloadOptions li.option:not(.open):hover, li.pgFile.router-link-exact-active > a, .configurations li.liConfig li.pgFile > a:hover, .configurations li.liConfig.router-link-exact-active, .paramsList li:not(.noParams):hover, .autoCompleteParam li:hover, .autoCompleteParam li.active {
    background-color:rgba(166, 167, 174, .1);
}

#menu a.router-link-exact-active, .bold, #params tr:not(.open):hover td.name, #customParams tr.edit td.name {
    font-weight: 900;
}

.configurations li svg.arrow {
    width: 5px;
    vertical-align: middle;
    margin-right: 10px;
    position: absolute;
    left: 40px;
}

.privateConfig, .publicConfig {
    width: 12px;
    display: inline-block;
    margin-right: 5px;
    position: relative;
    top: -5px;
}

.configurations li svg.arrow {
    top: 15px;
    transition: transform .3s ease-in-out;
}

li.liConfig.router-link-exact-active svg.arrow {
    top: 22px;
}

.configurations li.router-link-exact-active svg.arrow, .configurations li:not(.router-link-exact-active):hover svg.arrow {
    transform: rotate(180deg);
    transition: transform .3s ease-in-out;    
}

.configurations li a.router-link-exact-active:focus svg.arrow path, .darkmode .privateConfig path {
    fill: var(--gray5);
}

.configurations li a.settings {
    float: right;
    display: none;
    position: absolute;
    z-index: 1;
    width: auto;
    right: 0;
    padding: 0;
    padding: 9px 40px;
}

.configurations li a.settings:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+CjxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik0yMy45LDEwLjRoLTEuNGMtMC41LDAtMC45LTAuMy0xLjEtMC44Yy0wLjEtMC41LTAuMy0xLTAuNi0xLjRjLTAuMi0wLjQtMC4yLTEsMC4yLTEuM2wxLTFjMCwwLDAsMCwwLDAKCWMwLjQtMC40LDAuNC0xLjEsMC0xLjZMMjAuNywzYzAsMCwwLDAsMCwwYy0wLjQtMC40LTEuMS0wLjQtMS42LDBsLTEsMWMtMC4yLDAuMi0wLjUsMC4zLTAuOCwwLjNjLTAuMiwwLTAuMywwLTAuNS0wLjEKCWMtMC41LTAuMi0wLjktMC40LTEuNC0wLjZjLTAuNS0wLjEtMC44LTAuNi0wLjgtMVYxLjNjMCwwLDAtMC4xLDAtMC4xYzAtMC42LTAuNS0xLjItMS4xLTEuMmgtMS45YzAsMCwwLDAsMCwwCgljLTAuNiwwLTEuMSwwLjUtMS4xLDEuMXYxLjRjMCwwLjUtMC4zLDAuOS0wLjgsMS4xQzkuMSwzLjgsOC42LDQsOC4yLDQuMkM4LjEsNC4zLDcuOSw0LjMsNy44LDQuM0M3LjUsNC4zLDcuMiw0LjIsNyw0TDYsMwoJYzAsMCwwLDAsMCwwQzUuNSwyLjUsNC44LDIuNSw0LjQsM0wzLDQuNGMwLDAsMCwwLDAsMEMyLjYsNC44LDIuNiw1LjUsMyw1LjlsMSwxYzAuNCwwLjMsMC40LDAuOSwwLjIsMS4zQzMuOSw4LjcsMy43LDkuMSwzLjYsOS42CgljLTAuMiwwLjQtMC42LDAuOC0xLDAuOEgxLjNjMCwwLTAuMSwwLTAuMSwwYy0wLjYsMC0xLjIsMC41LTEuMiwxLjF2MS45YzAsMCwwLDAsMCwwYzAsMC42LDAuNSwxLjEsMS4xLDEuMWgxLjQKCWMwLjUsMCwwLjksMC4zLDEuMSwwLjhjMC4yLDAuNSwwLjQsMSwwLjYsMS40YzAuMiwwLjQsMC4yLDEtMC4yLDEuM2wtMSwxYzAsMCwwLDAsMCwwYy0wLjQsMC40LTAuNCwxLjEsMCwxLjZMNC40LDIyYzAsMCwwLDAsMCwwCgljMC40LDAuNCwxLjEsMC40LDEuNiwwbDEtMWMwLjItMC4yLDAuNS0wLjMsMC44LTAuM2MwLjIsMCwwLjMsMCwwLjUsMC4xYzAuNSwwLjIsMC45LDAuNCwxLjQsMC42YzAuNSwwLjIsMC44LDAuNiwwLjgsMS4xdjEuNAoJYzAsMCwwLDAsMCwwYzAsMC42LDAuNSwxLjEsMS4xLDEuMWgxLjljMCwwLDAsMCwwLDBjMC42LDAsMS4xLTAuNSwxLjEtMS4xdi0xLjRjMC0wLjUsMC4zLTAuOSwwLjgtMS4xYzAuNS0wLjIsMS0wLjQsMS40LTAuNgoJYzAuMi0wLjEsMC4zLTAuMSwwLjUtMC4xYzAuMywwLDAuNiwwLjEsMC44LDAuM2wxLDFjMCwwLDAsMCwwLDBjMC40LDAuNCwxLjEsMC40LDEuNiwwbDEuNC0xLjRjMCwwLDAsMCwwLDBjMC40LTAuNCwwLjQtMS4xLDAtMS42CglsLTEtMWMtMC40LTAuMy0wLjQtMC45LTAuMi0xLjNjMC4yLTAuNSwwLjQtMC45LDAuNi0xLjRjMC4yLTAuNSwwLjYtMC44LDEtMC44aDEuMWMwLDAsMC4xLDAsMC4xLDBjMC42LDAsMS4yLTAuNSwxLjItMS4xdi0xLjkKCWMwLDAsMCwwLDAsMEMyNSwxMC45LDI0LjUsMTAuNCwyMy45LDEwLjR6IE0xMi41LDE2LjhjLTIuNCwwLTQuNC0xLjktNC40LTQuMnMyLTQuMiw0LjQtNC4yczQuNCwxLjksNC40LDQuMlMxNSwxNi44LDEyLjUsMTYuOHoiLz4KPC9zdmc+);
    display: inline-block;
    margin-right: 5px;
    height: 11px;
    width: 11px;
}

.configurations .settings {
    display: none;
    position: absolute;
    right: 40px;
    top: 7px;
}

li.liConfig.router-link-exact-active .settings, .configurations li.liConfig:hover > .settings, .configurations li.pgFile:hover .settings {
    display: inline;
}

li.liConfig.router-link-exact-active .settings {
    top: 12px;
}

.configurations .settings svg {
    width: 20px;
    margin-left: 5px;
}

#menu .footer {
    width: 399px;
    background-color: #fff;
    bottom: 0;
    left: 0;
    position: absolute;
    height: 75px;
}

#menu .footer h2 {
    margin: 12px 0 5px 0;
}

#menu .footer a {
    color: var(--blue);
    text-decoration: underline;
    cursor: pointer;
}

#menu .mainMenu {
    z-index: 5;
    padding: 40px;
    max-height: calc(100vh - 120px);
    overflow: auto;


}

/*Settings Menu*/
#menu .settingsMenu {
    display: none;
    padding: 40px;
    width: 400px;
    height: calc(100vh - 60px);
    transition: all .2s ease-out;
    position: absolute;
    left: 0px;
    top: 0px;
    background: #fff;
    z-index: 999;
}

#menu .settingsMenu.open {
    left: 400px;
    display: inline-block;
    box-shadow: 4px 3px 9px -4px rgba(2, 14, 20, .1);
}

.darkmode #menu .settingsMenu.open {
    box-shadow: 4px 3px 9px -4px rgba(2, 14, 20, .8);
}

.settingsMenu h2 {
    top: -6px;
    position: relative;
    margin-bottom: 14px;
}

.settingsMenu .configName {
    /* overflow: hidden; */
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    top: 2px;
}

a.textBtn.saveConfig {
    background: var(--blue);
    color: #fcfcfc;
    padding: 1px 15px;
    border-radius: 15px;
    margin-left: -10px;
    cursor: pointer;
    margin-right: 20px;
    position: relative;
    top: -10px;
}

.darkmode a.textBtn.saveConfig, .darkmode a.textBtn.saveConfig:hover {
    color: #1c1e21;
}

a.textBtn.saveConfig:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMiI+PHBhdGggZmlsbD0iI0ZDRkNGQyIgZD0iTTExLjcsMS45bC0xLjYtMS42QzkuOSwwLjEsOS42LDAsOS4zLDBIMS4xQzAuNSwwLDAsMC41LDAsMS4xbDAsMHY5LjdDMCwxMS41LDAuNSwxMiwxLjEsMTJsMCwwaDkuN2MwLjYsMCwxLjEtMC41LDEuMS0xLjFsMCwwVjIuN0MxMiwyLjQsMTEuOSwyLjEsMTEuNywxLjl6IE0xLjksM2MwLTAuNiwwLjUtMS4xLDEuMS0xLjFsMCwwaDMuOGMwLjYsMCwxLjEsMC41LDEuMSwxLjFTNy40LDQuMSw2LjgsNC4xSDNDMi40LDQuMSwxLjksMy42LDEuOSwzQzEuOSwzLDEuOSwzLDEuOSwzeiBNNiwxMC4xYy0xLjEsMC0yLjEtMC45LTIuMS0yLjFTNC45LDYsNiw2YzEuMSwwLDIuMSwwLjksMi4xLDIuMVM3LjEsMTAuMSw2LDEwLjFMNiwxMC4xeiIvPjwvc3ZnPg==);
    display: inline-block;
    margin-right: 5px;
    height: 11px;
    width: 11px;
    position: relative;
}

.darkmode a.textBtn.saveConfig:before {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMiI+PHBhdGggZmlsbD0iIzFjMWUyMSIgZD0iTTExLjcsMS45bC0xLjYtMS42QzkuOSwwLjEsOS42LDAsOS4zLDBIMS4xQzAuNSwwLDAsMC41LDAsMS4xbDAsMHY5LjdDMCwxMS41LDAuNSwxMiwxLjEsMTJsMCwwaDkuN2MwLjYsMCwxLjEtMC41LDEuMS0xLjFsMCwwVjIuN0MxMiwyLjQsMTEuOSwyLjEsMTEuNywxLjl6IE0xLjksM2MwLTAuNiwwLjUtMS4xLDEuMS0xLjFsMCwwaDMuOGMwLjYsMCwxLjEsMC41LDEuMSwxLjFTNy40LDQuMSw2LjgsNC4xSDNDMi40LDQuMSwxLjksMy42LDEuOSwzQzEuOSwzLDEuOSwzLDEuOSwzeiBNNiwxMC4xYy0xLjEsMC0yLjEtMC45LTIuMS0yLjFTNC45LDYsNiw2YzEuMSwwLDIuMSwwLjksMi4xLDIuMVM3LjEsMTAuMSw2LDEwLjFMNiwxMC4xeiIvPjwvc3ZnPg==);
}


/* Main */
#main {
    float: right;
    padding: 40px;
    width: 100vw;
    transition: all .2s ease-out;
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.open #main {
    width: calc(100vw - 400px);
    transition: all .3s ease-out;
}

.open.settings #main {
    width: calc(100vw - 800px);
    transition: all .3s ease-out;
}

#config {
}

/* Home */
#home {
    margin: -40px;
}

#home h2 {
    font-size: 1.3rem;
    margin-top: 40px;
}

#home h3 {
    font-size: 1.1rem;
}

#home p {
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 75px auto 55px auto;
} 

#home .footer {
    height: 60px;
    display: inline-block;
    padding: 25px 40px;
    width: 100%;
    margin-top: -3px;
}

#home .footer div.social {
    float: right;
}

#home .footer div.social svg {
    width: 20px;
    margin-left: 10px;
}

#home > .col {
    min-height: calc(100vh - 120px);
    
}

#goConf .btn, #goDoc > .btn, #dashboard .btn, .form label.uploadFile, .actionForm .btn, .actionForm .btnOutline {
    min-width: 250px;
}

#goConf .btn {
    margin-bottom: -5px;
}

.searchHome {
    /*width: 400px;*/
    width: 80%;
    margin: 20px auto;
    border: 1px solid var(--gray2);
    height: 40px;
    border-radius: 5px;
    position: relative;
    display: inline-block;
}

.searchHome a.btn {
    padding: 11px 10px;
    height: 40px;
    width: 40px;
    margin: 0;
    position: absolute;
    background: none;
    left: 0;
}

.searchHome a.btn svg {
    width: 15px;
    vertical-align: middle;
}

.paramsList {
    position: absolute;
    background: #fff;
    width: 100%;
    top: 39px;
    border: 1px solid var(--gray2);
    border-radius: 5px;
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    max-height: 450px;
    min-height: 40px;
    overflow: auto;
}

.paramsList .noParams {
    padding-top: 11px;
    padding-left: 15px;
}

.paramsList li:not(.noParams) {
    list-style: none;
    height: 30px;
    text-align: left;
}

.paramsList li:not(.noParams) a {
    color: var(--gray5);
    font-weight: normal;
    padding: 7px 15px 0 15px;
    width: 100%;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paramsList li:not(.noParams) a:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+PHBhdGggZGF0YS12LWM2YmRjMTcwPSIiIGZpbGw9IiM3QTdCODUiIGQ9Ik0yMS40LDI0LjRsLTYuMy02LjNjLTEuNiwxLTMuNCwxLjUtNS4zLDEuNWMtMi42LDAtNS4xLTEtNi45LTIuOUMxLDE0LjksMCwxMi40LDAsOS44YzAtMi42LDEtNS4xLDIuOS02LjlDNC43LDEsNy4yLDAsOS44LDBjMi42LDAsNS4xLDEsNi45LDIuOWMxLjgsMS44LDIuOSw0LjMsMi45LDYuOWMwLDEuOS0wLjUsMy43LTEuNSw1LjNsNi4zLDYuM2MwLjgsMC44LDAuOCwyLjIsMCwzYzAsMCwwLDAsMCwwQzI0LDI0LjgsMjMuNCwyNSwyMi45LDI1QzIyLjMsMjUsMjEuOCwyNC44LDIxLjQsMjQuNHogTTUuNyw1LjljLTIuMywyLjMtMi4zLDUuOSwwLDguMmMwLDAsMCwwLDAsMGMxLjEsMS4xLDIuNiwxLjcsNC4xLDEuN2MxLjUsMCwzLTAuNiw0LjEtMS43YzIuMy0yLjMsMi4zLTUuOSwwLTguMmMwLDAsMCwwLDAsMGMtMS4xLTEuMS0yLjYtMS43LTQuMS0xLjdDOC4zLDQuMiw2LjgsNC44LDUuNyw1LjlMNS43LDUuOXoiPjwvcGF0aD48L3N2Zz4=);
    display: inline-block;
    margin-right: 10px;
    height: 10px;
    width: 10px;
    position: relative;
}

input#homeKeyword {
    position: absolute;
    left: 35px;
    height: 40px;
    width: calc(100% - 40px);
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    color: var(--gray5);
    background-color: transparent;
    border: none;
}

#home img {
    width: 80%;
    margin: 55px 0 35px 0;
    border: 1px solid var(--gray1);
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .075);
}

.darkmode #home img {
    box-shadow: 0 3px 9px rgba(2, 14, 20, .8);
}


ul.blue li {
    margin-bottom: 10px;
}
ul.blue li:before {
    content: " ";
    width: 5px;
    height: 5px;
    display: inline-block;
    background: var(--blue);
    position: relative;
    left: -10px;
    top: -3px;
    border-radius: 100%;
}
ul.blue {
    list-style: none;
    padding-left: 15px;
}

/* Params */

#configHeader {
    padding: 20px 40px;
    border-bottom: 1px solid var(--gray2);
    border-top: 1px solid var(--gray2);
    background: rgba(227, 227, 227, .5);
    height: 60px;
}

.configName {
    color: var(--black);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    top: -10px;
}

.actionForm .configName {
    top: 0;
}

#config .configOptions.active code {
    border-right: 1px solid var(--gray1);
    margin-right: 10px;
    padding-right: 10px;
}

.configOptions {
    display: inline-block;
    border: 1px solid var(--gray2);
    background: #fff;
    border-radius: 5px 5px 0 0;
    position: relative;
    top: -11px;
    height: 50px;
    margin-right: 4px;
}

.configOptions .configTab {
    padding: 12px 17px 17px 12px;
    display: inline-block;
}

.configOptions.active:not(.tuning) .configTab {
    padding-right: 0;
}

.configOptions.active:not(.tuning) {
    padding-right: 6px;
}

.configOptions.tuning:not(.active) {
    top: -12px;
}

.configOptions.tuning:not(.active) .configTab {
    position: relative;
    top: 2px;
}

.configOptions.active {
    border-bottom: 3px solid var(--blue) !important;
}

/* .shared .configOptions {
    padding: 12px 20px 17px;
} */

.configOptions svg {
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.configOptions .deleteIcon svg {
    margin-right: 0;
}

.configOptions:not(.active) .icon {
    display: none;
}

#config .pgVersion {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin-left: 15px;
    font-weight: 900;
    font-size: 12px;
    vertical-align: middle;
    border: 1px solid var(--blue);
    color: var(--blue);
    letter-spacing: -1px;
    padding-top: 3px;
    margin-right: 20px;
    top: -11px;
    position: relative;
    padding-right: 1px;
}

.lastEdit {
    display: inline-block;
    font-size: 0.95rem;
    color: var(--gray4);
    margin-left: 5px;
    font-style: italic;
}

.topOptions {
    float: right;
    display: inline;
    position: relative;
}

.topOptions.shared {
    display: inline-block;
    min-width: 125px;
}

.topOptions div {
    display: inline;
    margin-left: 35px;
}

.topOptions span {
    color: var(--gray4);
    font-size: 16px;
    margin-right: 25px;
    vertical-align: top;
}

.topOptions a.filter:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+PGc+CjxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik0xLjYsMGgyMS45QzI0LjMsMCwyNSwwLjcsMjUsMS42bDAsMGMwLDAuOS0wLjcsMS42LTEuNiwxLjZIMS42QzAuNywzLjEsMCwyLjQsMCwxLjZsMCwwCglDMCwwLjcsMC43LDAsMS42LDB6Ii8+CjxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik01LjcsNy4zaDEzLjVjMC45LDAsMS42LDAuNywxLjYsMS42bDAsMGMwLDAuOS0wLjcsMS42LTEuNiwxLjZINS43Yy0wLjksMC0xLjYtMC43LTEuNi0xLjYKCWwwLDBDNC4yLDgsNC45LDcuMyw1LjcsNy4zeiIvPgo8cGF0aCBmaWxsPSIjMDBBREI1IiBkPSJNMTAuOSwxNC42aDMuMWMwLjksMCwxLjYsMC43LDEuNiwxLjZsMCwwYzAsMC45LTAuNywxLjYtMS42LDEuNmgtMy4xCgljLTAuOSwwLTEuNi0wLjctMS42LTEuNmwwLDBDOS40LDE1LjMsMTAuMSwxNC42LDEwLjksMTQuNnoiLz4KPC9nPjwvc3ZnPg==);
    display: inline-block;
    margin-right: 5px;
    height: 11px;
    width: 11px;
    position: relative;
    top: 1px;
}

.shortcuts a:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iIzAwQURCNSIgZD0iTTEyLDBIM0MxLjMsMCwwLDEuMywwLDN2OWMwLDEuNywxLjMsMywzLDNoOWMxLjcsMCwzLTEuMywzLTNWM0MxNSwxLjMsMTMuNywwLDEyLDB6IE02LjgsNi42TDYuMSw3LjRDNS45LDcuNSw1LjgsNy42LDUuNiw3LjZTNS4yLDcuNSw1LjEsNy40Yy0wLjMtMC4zLTAuMy0wLjcsMC0xTDcsNC41YzAuMS0wLjEsMC4zLTAuMiwwLjUtMC4yUzcuOSw0LjQsOCw0LjVsMS45LDEuOWMwLjEsMC4xLDAuMiwwLjMsMC4yLDAuNWMwLDAuMi0wLjEsMC40LTAuMiwwLjVDOS44LDcuNSw5LjYsNy42LDkuNSw3LjZDOS4zLDcuNiw5LjEsNy41LDksNy40TDguMiw2LjZWMTBjMCwwLjQtMC4zLDAuNy0wLjcsMC43Yy0wLjQsMC0wLjctMC4zLTAuNy0wLjdMNi44LDYuNkw2LjgsNi42TDYuOCw2LjZ6Ii8+PC9zdmc+);
    display: inline-block;
    margin-right: 5px;
    height: 12px;
    width: 12px;
    position: relative;
    top: 1px;
}

.categoriesView a:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOSAxMiI+PHBhdGggZmlsbD0iIzAwQURCNSIgZD0iTTMuMSwxMS4yVjMuMUwxLjUsNC43QzEuMiw1LDAuNiw1LDAuMyw0LjdDMCw0LjQsMCwzLjgsMC4zLDMuNWwwLDBsMy4xLTMuMWwwLDBjMC4zLTAuMywwLjktMC4zLDEuMiwwbDAsMGwzLjEsMy4xYzAuNCwwLjMsMC40LDAuOSwwLDEuMmMtMC4zLDAuNC0wLjksMC40LTEuMiwwbDAsMEw0LjksMy4xdjguMWMwLDAuNS0wLjQsMC45LTAuOSwwLjlDMy41LDEyLDMuMSwxMS42LDMuMSwxMS4yeiIvPjxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik0xMC44LDdoNS41QzE2LjcsNywxNyw3LjQsMTcsNy44bDAsMGMwLDAuNC0wLjMsMC43LTAuNywwLjdoLTUuNWMtMC41LDAtMC44LTAuMy0wLjgtMC43bDAsMEMxMCw3LjQsMTAuMyw3LDEwLjgsN3oiLz48cGF0aCBmaWxsPSIjMDBBREI1IiBkPSJNMTAuOCwzLjVoMy41YzAuNCwwLDAuNywwLjQsMC43LDAuOGwwLDBDMTUsNC43LDE0LjcsNSwxNC4zLDVoLTMuNUMxMC4zLDUsMTAsNC43LDEwLDQuM2wwLDBDMTAsMy45LDEwLjMsMy41LDEwLjgsMy41eiIvPjxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik0xMC44LDBoMS41QzEyLjcsMCwxMywwLjQsMTMsMC44bDAsMGMwLDAuNC0wLjMsMC43LTAuNywwLjdoLTEuNWMtMC41LDAtMC44LTAuMy0wLjgtMC43bDAsMEMxMCwwLjQsMTAuMywwLDEwLjgsMHoiLz48cGF0aCBmaWxsPSIjMDBBREI1IiBkPSJNMTAuOCwxMC41aDcuNWMwLjQsMCwwLjcsMC4zLDAuNywwLjhsMCwwYzAsMC40LTAuMywwLjctMC43LDAuN2gtNy41Yy0wLjUsMC0wLjgtMC4zLTAuOC0wLjdsMCwwQzEwLDEwLjksMTAuMywxMC41LDEwLjgsMTAuNXoiLz48L3N2Zz4=);
    display: inline-block;
    margin-right: 5px;
    height: 11px;
    width: 17px;
    position: relative;
}

.topOptions div:not(.searchBar) {
    top: 2px;
    position: relative;
    margin-right: 5px;
}

.topOptions div.shortcuts {
    margin-right: 125px;
}

div.searchBar {
    margin-top: -10px;
    right: 0;
    margin-right: -7px;
    position: absolute;
    transition: width .5s ease-out, border-color .5s ease-out;
}

div.searchBar svg {
    width: 11px;
    margin-right: 5px;
    padding-top: 11px;
}

div.searchBar.open svg {
    margin-right: 10px;
    padding-top: 12px;
    margin-left: 10px;
}

div.searchBar a.search {
    float: right;
    vertical-align: middle;
    padding-top: 12px;
    padding-right: 12px;
    cursor: pointer;
}

div.searchBar.open a.search {
    padding-top: 8px;
    font-size: 14px;
}

div.searchBar input {
    display: none;
}

div.searchBar.open input {
    display: inline;
    width: 200px;
    height: 34px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    border: none;
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    color: var(--gray5);
    background-color: transparent;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+PHBhdGggZmlsbD0iIzAwQURCNSIgZD0iTTIxLjQsMjQuNGwtNi4zLTYuM2MtMS42LDEtMy40LDEuNS01LjMsMS41Yy0yLjYsMC01LjEtMS02LjktMi45QzEsMTQuOSwwLDEyLjQsMCw5LjhjMC0yLjYsMS01LjEsMi45LTYuOUM0LjcsMSw3LjIsMCw5LjgsMGMyLjYsMCw1LjEsMSw2LjksMi45YzEuOCwxLjgsMi45LDQuMywyLjksNi45YzAsMS45LTAuNSwzLjctMS41LDUuM2w2LjMsNi4zYzAuOCwwLjgsMC44LDIuMiwwLDNjMCwwLDAsMCwwLDBDMjQsMjQuOCwyMy40LDI1LDIyLjksMjVDMjIuMywyNSwyMS44LDI0LjgsMjEuNCwyNC40eiBNNS43LDUuOWMtMi4zLDIuMy0yLjMsNS45LDAsOC4yYzAsMCwwLDAsMCwwYzEuMSwxLjEsMi42LDEuNyw0LjEsMS43YzEuNSwwLDMtMC42LDQuMS0xLjdjMi4zLTIuMywyLjMtNS45LDAtOC4yYzAsMCwwLDAsMCwwYy0xLjEtMS4xLTIuNi0xLjctNC4xLTEuN0M4LjMsNC4yLDYuOCw0LjgsNS43LDUuOUw1LjcsNS45eiIvPjwvc3ZnPg==);
    background-size: 11px;
    background-position: 10px center;
    background-repeat: no-repeat;
    padding: 0 0 0 30px;
    font-size: .9rem;
}

div.searchBar.open {
    width: 450px;
    height: 35px;
    border: 1px solid var(--gray2);
    border-radius: 3px;
    margin-top: -6px;
    margin-right: 6px;
    background: #fcfcfc;
    transition: width .5s ease-out, border-color .5s ease-out;
}

div.searchBar.open.focus, .darkmode div.searchBar.open.focus, .searchHome.focus, .darkmode .searchHome.focus {
    border: 1px solid var(--blue);
}

div.searchBar:not(.open) a.search:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+CjxwYXRoIGZpbGw9IiMwMGFkYjUiIGQ9Ik0yMS41LDI0LjRsLTYuMi02LjJjLTEuNywxLTMuNSwxLjUtNS40LDEuNWMtMi41LDAtNS0xLTYuOS0yLjlDMSwxNSwwLDEyLjUsMCw5LjhzMS01LjIsMi45LTYuOQoJQzQuOCwxLDcuMywwLDkuOCwwYzIuNywwLDUuMiwxLDYuOSwyLjljMS45LDEuOSwyLjksNC40LDIuOSw2LjljMCwxLjktMC42LDMuOC0xLjUsNS4ybDYuMiw2LjJjMC44LDAuOCwwLjgsMi4xLDAsMi45bDAsMAoJQzI0LDI0LjgsMjMuNSwyNSwyMi45LDI1UzIxLjksMjQuOCwyMS41LDI0LjR6IE01LjgsNS44Yy0yLjMsMi4zLTIuMyw2LDAsOC4xbDAsMGMxLDEsMi41LDEuNyw0LjIsMS43YzEuNSwwLDIuOS0wLjYsNC4yLTEuNwoJYzIuMy0yLjMsMi4zLTYsMC04LjFsMCwwYy0xLjMtMS0yLjctMS43LTQuNC0xLjdDOC4zLDQuMiw2LjksNC44LDUuOCw1LjhMNS44LDUuOHoiLz4KPC9zdmc+);
    display: inline-block;
    margin-right: 5px;
    height: 11px;
    width: 11px;
}

.open .searchBar.open {
    max-width: 400px;
}

a.search.redClass:after {
    display: inline-block;
    content: "";
    background-color: var(--red);
    width: 6px;
    height: 6px;
    border-radius: 6px;
    position: relative;
    top: -8px;
    right: -3px;
}

#params {
    height: calc(100vh - 120px);
    border: none;
}

#customParams {
    /*box-shadow: 0 5px 20px rgba(0,0,0,.025);*/
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .075);
}

.darkmode #customParams {
    box-shadow: 0 3px 9px rgba(2, 14, 20, .5);
}

#defaultParams {
    box-shadow: 0 -5px 20px rgba(0,0,0,.025);
}

#defaultParams.shared {
    border-bottom: 0;
}

#customParams, #defaultParams {
    padding: 40px 40px 0 40px;
    transition: height .5s ease-out;
}

tr.noResults, .shortcutsContent thead {
    display: none;
}, 

tr.noParams + tr.noResults {
    display: none !important;
}

tr.noResults.show {
    display: table-row;
}

#params a.saveConfig {
    margin: 0 10px;
    padding: 8px 12px;
}

#params table {
    table-layout: fixed;
   
}

#params .name {
    padding-left: 5px;
    min-width: 300px;
    width: 20%;
}

#params td.name, .paramsList li:hover a, body:not(.darkmode) code.json span.key, .autoCompleteParam li:hover {
    color: var(--black);
}

#params .value {
    width: 35%;
}

#params .comment {
    width: 45%;
}


#customParams td.value, #customParams label, #customParams input, #customParams textarea, #customParams select, #customParams td.value input {
    cursor: pointer;
}

#defaultParams td.comment, #customParams td.comment textarea, #customParams tr.newParam td.comment input {
    font-style: italic;
    font-size: .9rem;
    color: var(--gray4);
    vertical-align: middle;
}

#params td.name, #defaultParams td.value, #defaultParams td.comment .commentText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bgGradient {
    position: absolute;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    z-index: 1;
    width: 40px;
    height: 28px;
    top: 3px;
    right: 0;
}

.savedParam {
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 800;
    position: absolute;
    right: 5px;
    top: 1px;
    z-index: 2;
    display: none;
    width: 75px;
    text-align: right;
    background: #fff;
    height: 33px;
    padding-top: 10px;
}

.savedParam:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiA4LjUiPjxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik0xMS43LDAuM2MtMC40LTAuNC0xLjEtMC40LTEuNSwwTDQuNCw2TDEuOCwzLjVjLTAuNC0wLjQtMS4xLTAuNC0xLjUsMGMtMC40LDAuNC0wLjQsMSwwLDEuNGwzLjQsMy4zYzAsMCwwLDAsMCwwczAsMCwwLDBjMC40LDAuNCwxLjEsMC40LDEuNSwwbDYuNi02LjVDMTIuMSwxLjMsMTIuMSwwLjcsMTEuNywwLjN6Ii8+PC9zdmc+);
    display: inline-block;
    margin-right: 5px;
    height: 8px;
    width: 11px;
    margin-bottom: 1px;
}

tr.base:hover .savedParam {
    background-color: #f6f6f7;
}
.darkmode tr.base:hover .savedParam, .darkmode .searchBar.open, .darkmode .tuningHelp, .darkmode .tuningCards .card  {
    background: #1C1E21;
}

tr.error .savedParam {
    background-color: #FAFBFB;
}

.darkmode tr.error .savedParam {
    background: #1E1F1F;
}

.darkmode .bgGradient {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(23, 23, 23, 1));
}

tr.base:hover .bgGradient {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(246, 246, 247, 1));
}

.darkmode tr.base:hover .bgGradient {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(28, 30, 33, 1));
}

/*td.value span.error:after {
    display: block;
    content: " ";
    background: #fff;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: -3px;
    left: 15px;
    transform: rotate(45deg);
}

td.value span.error {
    position: absolute;
    background: #fff;
    z-index: 10;
    padding: 15px;
    bottom: 125%;
    border-radius: 5px;
    left: -10px;
    display: none;
    border: 1px solid var(--gray1);
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    color: var(--gray5);
    font-size: 0.9rem;
}*/

td.value svg:hover + span.error, td.value span.error:hover {
    display: block;
}

tr.error .bgGradient {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(250, 251, 251, 1));
}

.darkmode tr.error .bgGradient {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(30, 31, 31, 1));
}

#customParams tr.base:hover td.comment .bgGradient {
    right: 87px;
}

#defaultParams tr.base:hover td.comment .bgGradient {
    right: 30px;
}

tr.base.open .bgGradient, tr.base.edit .bgGradient {
    display: none;
}


#customParams td.comment input, #customParams tr.base.edit td.comment textarea  {
    width: calc(100% - 5px);
}

#customParams [disabled] {
    cursor: not-allowed;
}

/*#customParams tr.edit td.value input, #customParams tr.edit td.comment input {
    cursor: text;
}*/

#params th {
    font-size: .9rem;
    color: var(--gray4);
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--gray2);
    padding-bottom: 5px;
}

th.defaultSetButton {
    display: none;
}

#params tbody tr {
    border-bottom: 1px solid var(--gray1);
    border-top: 1px solid var(--gray1);
    height: 35px;
    cursor: pointer;
}

#params tr.base:not(.open):not(.edit):hover {
    background: rgba(166, 167, 174, .1);
    cursor: pointer;
}

#defaultParams tr.base:not(.open):hover .comment .commentText {
    width: calc(100% - 60px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#customParams tr.base:not(.open):not(.edit):hover .comment .action {
    display: inline;
}

#params .commentText {
    display: inline-block;
    width: calc(100% - 30px);
    vertical-align: middle;
}

#params tr:not(.edit):not(.newParam) .action {
    display: none;
}

#customParams tr.base:not(.open):not(.edit):hover .comment textarea {
    /*width: calc(100% - 80px);*/
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
} 

#defaultParams tr.set code, #defaultParams tr.set span {
    opacity: .85;
}

#params > table tr:last-of-type {
    border-bottom: 1px solid var(--gray2);
}

#params td {
    vertical-align: middle;
    /*
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    */
    position: relative;
    z-index: 1;
}

#params td > svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

#customParams td > svg {
    margin-top: 7px;
    position: absolute;
    top: calc(50% - 17px);
}

#params .action {
    text-align: center;
    position: absolute;
    right: 5px;
    top: calc(50% - 17px);
    margin-top: 7px;
}

.action button {
    border: none;
    background: none;
    width: 20px;
    cursor: pointer;
    position: relative;
}

.action button:not(.deleteIcon):hover svg path, .action button:not(.deleteIcon):focus svg path {
    fill: var(--lblue);
}

#params .action button svg {
    margin: 0;
}

#params .action button {
    margin-left: 5px;
    padding: 0;
}

#params tr.edit.customParam .action {
    right: 5px;
}

#params tr.base:not(.open):not(.edit):hover .action, #defaultParams tr.base:not(.open):hover .defaultSetButton svg, #defaultParams tr.base.open .defaultSetButton svg {
    opacity: 1;
}

#params .action svg, #defaultParams .defaultSetButton svg {
    width: 20px;
    vertical-align: middle;
    margin-left: 5px;
}

#params .action a svg,  .configurations li a.settings, .logOut, #params .topOptions svg, .configOptions svg {
    cursor: pointer;
}

#params .action a svg:hover path, div.configOptions svg:hover path, #params .topOptions svg:hover path, #defaultParams .defaultSetButton svg:hover path, .configurations .settings svg:hover path, .openLink:hover path {
    fill: var(--lblue);
}

#params .action .deleteIcon svg:hover path, .deleteIcon:focus svg path, .configurations .settings .deleteIcon svg:hover path, .configOptions svg.deleteIcon:hover path {
    fill: var(--red);
}

td.defaultSetButton {
    position: relative;
}

td.name code {
    max-width: 100%;
    display: block;
}

#defaultParams .defaultSetButton svg {
    position: absolute;
    right: 7px;
    top: 7px;
    opacity: 0;
}

#params tr.error, #params tr.details.set td {
    background: rgba(166, 167, 174, .05);
}

#params tr.error td, #params tr.error code {
    color: var(--red);
    font-weight: 600;
}

#params tr.custom td.value svg path, #params tr.custom td.comment svg path {
    fill: #1075FF;
}

#params tr.open, #params tr.edit {
    border: none;
    /*background: rgba(166, 167, 174, .05);*/
}

#customParams tr.open td.name input, #defaultParams tr.open td.name, td.shortcutsName {
    /*padding-left: 20px;*/
    font-weight: 900;
}

#params tr.details, #params tr.set {
    display: none;
    transition: all .3s ease-out;
}

#params tr.details.show {
    display: contents;
    transition: all .3s ease-out;
}

#params tr.details.show > td:before {
    content: " ";
    background: var(--blue);
    height: calc(100% - 12px);
    /*top: -24px;*/
    top: 0;
    left: 4px;
    position: absolute;
    border: 1px solid var(--blue);
}

#params tr.details > td {
    position: relative;
    padding: 10px 20px 20px 20px;
}

#params tr.details tr {
    border: none;
    
}

#params tr.details a.docs {
    padding-top: 15px;
    display: inline-block;
}

#params tr.details a.docs:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1IDI1Ij4KPHBhdGggZmlsbD0iIzAwQURCNSIgZD0iTTcuNCwyMC45YzEuMi0zLjcsMy40LTguMSwzLjctOS4yYzAuNi0xLjYtMC40LTIuMy0zLjYsMC40bC0wLjctMS4zYzMuNi0zLjksMTEtNC44LDguNCwxLjMKCWMtMS42LDMuOC0yLjcsNi4zLTMuMyw4LjNjLTAuOSwyLjksMS40LDEuNywzLjctMC40YzAuMywwLjUsMC40LDAuNywwLjcsMS4zQzExLjQsMjYuMSw1LjcsMjYuNSw3LjQsMjAuOXoiLz4KPHBhdGggZmlsbD0iIzAwQURCNSIgZD0iTTE3LjIsNC4xYy0xLDAuOS0yLjYsMC45LTMuNiwwYy0wLjktMS0wLjgtMi40LDAuMi0zLjNjMCwwLDAuMS0wLjEsMC4xLTAuMQoJYzEtMC45LDIuNi0wLjksMy42LDBjMC45LDEsMC44LDIuNC0wLjIsMy4zQzE3LjMsNC4xLDE3LjIsNC4xLDE3LjIsNC4xeiIvPgo8L3N2Zz4=);
    display: inline-block;
    margin-right: 5px;
    height: 11px;
    width: 11px;
}

#params div.description {
    margin-bottom: 15px;
}

#params div.description > span {
    display: block;
    margin-bottom: 10px;
}

#params div.description a {
    color: var(--blue);
    font-family: 'Ubuntu Mono', monospace;
}

#params div.description li {
    margin: 5px 0 5px 30px;
    list-style: none;
}

#params div.description li:before {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: var(--blue);
    content: " ";
    position: absolute;
    left: 30px;
    display: inline;
    margin-top: 5px;
}

#params div.info li {
    display: inline-block;
    margin-right: 40px;
    margin-bottom: 5px;
}

/*Inputs*/

#customParams td.value div.editModeOn {
    width: calc(100% - 40px);
    display: flex;
    float: right;
    margin-right: 10px;
    height: 30px;
    align-items: center;
    position: relative;
    margin-top: 4px;
}

.newParam td.name .editModeOn {
    height: 30px;
    margin-top: 4px;
    margin-right: 10px;
    display: flex;
    margin-left: -5px;
    padding-left: 5px;
}

#customParams td.comment div.editModeOn {
    margin-right: 0;
    width: calc(100% - 35px);
    position: relative;
    left: 30px;
    display: inline-block;
    margin-top: 5px;
}

.newParam td.name {
    overflow: visible !important;
}

.autoCompleteParam {
    position: fixed;
    background: #fff;
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    max-height: 136px;
    overflow: auto;
    z-index: 999;
    left: -100vw;
    width: calc((100vw - 135px) * 0.20);
    border: 1px solid var(--gray2);
    display: none;
    border-top: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: width .2s ease-out, margin .2s ease-out;
}

.autoCompleteParam.show {
    display: block;
}

.open ul.autoCompleteParam {
    margin-left: 400px;
    width: calc((100vw - 535px) * 0.20);
    transition: width .3s ease-out, margin .3s ease-out;
}

.autoCompleteParam li {
    list-style: none;
    height: 27px;
    text-align: left;
    color: var(--gray5);
    font-weight: normal;
    padding: 7px 15px 0 15px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-family: 'Ubuntu mono';
    cursor: pointer;
}

.autoCompleteParam li a {
    font-weight: normal;
    color: inherit;
}

.autoCompleteParam li:hover a, .autoCompleteParam li:active a {
    font-weight: bold;
}

#customParams tr.base:not(.edit):hover td.comment div.editModeOn {
    width: calc(100% - 117px);
}

#customParams tr.base.customParam:not(.edit):hover td.comment div.editModeOn {
    width: calc(100% - 93px);
}

#customParams tr.edit td.comment div.editModeOn {
    width: calc(100% - 146px);
}

#customParams tr.newParam td.comment div.editModeOn, #customParams tr.base.customParam.edit .comment .editModeOn {
    width: calc(100% - 122px);
}

#params tbody tr.edit, #params tbody tr.edit td, #params tbody tr.edit td textarea, #params tbody tr.edit div.editModeOn, .newParam .editModeOn {
    height: auto;
}

#customParams tr.base:not(.edit) textarea {
    height: 23px !important;
}

td.value input, td.value select, td.value textarea {
    width: 100%;
}

#customParams .value select, #customParams .value textarea {
    background: transparent;
    border: none;
    color: var(--gray5);
    font-family: 'Ubuntu Mono', monospace;
    font-size: 1rem;
}

#customParams .value input + select {
    border-left: 1px solid rgba(255,255,255,.3);
    padding-left: 5px;
}

#customParams tr.base textarea {
    overflow: hidden;
    resize: none;
    padding-right: 15px;
    white-space: pre;
    margin-bottom: 2px;
}

#customParams tr.base.edit textarea {
    resize: vertical;
    overflow: auto;
    white-space: normal;
}

#customParams textarea.fullValue {
    caret-color: transparent;
}

#customParams .value input[type="radio"], .form .privacy input[type="radio"], .darkmode .form .privacy input[type="radio"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    min-height: auto;
}

#customParams .value input[type="radio"]:checked:before, .form .privacy input[type="radio"]:checked:before {
    background-color: var(--blue);
    width: 7px;
    height: 7px;
    content: " ";
    display: block;
    border-radius: 50%;
    position: relative;
    top: 2px;
    left: 2px;
}

#customParams .value .radioLabel {
    color: var(--gray5);
    font-family: 'Ubuntu Mono', monospace;
    font-size: 1em;
    position: relative;
    top: 2px;
}

#customParams .value label.on {
    width: 40px;
}

#customParams .value label.off {
    margin-left: 10px;
    width: calc(100% - 50px);
}

#customParams:not(.shared) td.value:hover div.editModeOn, #customParams:not(.shared) td.comment:hover div.editModeOn, .newParam td.name:hover div.editModeOn {
    border-bottom: 2px solid var(--blue);
}

#customParams tr.base:not(.edit) td.value:hover div.editModeOn, #customParams tr.base:not(.edit) td.comment:hover div.editModeOn {
    padding-top: 2px;
}

#customParams tr td {
    height: 34px;
}

#customParams tr.edit td.value div.editModeOn, #customParams tr.edit td.comment div.editModeOn, .newParam .editModeOn {
    border-bottom: 2px solid var(--gray2);
    background: rgba(227, 227, 227, .2);
    border-radius: 5px 5px 0 0;
    min-height: 29px;
}

.darkmode #customParams:not(.shared) tr.edit td.value div.editModeOn, .darkmode #customParams:not(.shared) tr.edit td.comment div.editModeOn, .darkmode .newParam .editModeOn {
    background: rgba(31, 34, 39, .5);
    border-color: var(--darktitle);
}

#customParams tr.edit td.value.focus div.editModeOn, #customParams tr.edit td.comment.focus div.editModeOn, .newParam td.focus .editModeOn {
    border-color: var(--blue);
    background-color: rgba(66, 114, 116, .05)
}

.darkmode #customParams tr.edit td.value.focus div.editModeOn, .darkmode #customParams tr.edit td.comment.focus div.editModeOn {
    background-color: rgba(40, 47, 56, .5);
}

#customParams tr.edit td.value div.editModeOn, .newParam .editModeOn {
    padding: 0 10px 0 5px;
}

#defaultParams.shared td.hidden {
    opacity: 1;
}

a.textBtn {
    color: var(--blue);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.95rem;
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    cursor: pointer;
}

a.textBtn:hover, #menu .footer a:hover, #home .footer a:hover, .configurations li a.settings:hover, #params div.description a:hover, .form .upload div.uploadContainer span a:hover, #infoBox p a:hover, .info a:hover, a.addFile:hover {
    color: var(--lblue);
}

a.add {
    cursor: pointer;
}

a.add:before, a.addFile:before {
    content: "+";
    font-size: 18px;
    display: inline-block;
    margin-right: 5px;
}

a.addFile:before {
    line-height: 0.85;
}

a.addFile {
    color: var(--blue);
    position: relative;
    font-size: 0.95rem;
    font-weight: 800;
}

span.tooltipText.hideMe {
    display: block;
    /* display: none; */
    visibility: hidden;
    position: fixed;
    z-index: -1;
    width: auto;
}

#tooltip {
    max-width: 600px;
}

#tooltip.show {
    position: fixed;
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .1);
    z-index: 10;
    font-size: 1rem;
    border: 1px solid var(--gray1);
}

.darkmode #tooltip.show {
    background: var(--darkbg);
    box-shadow: 0 3px 9px rgba(2, 14, 20, .8);
    border-color: var(--black);
}

#tooltip.show.error {
    color: var(--red);
    font-weight: 800;
}

/* Param table display */
.fixedHead {
    position: sticky;
    top: -40px;
    background: #fff;
    margin: -40px -40px 0 -40px;
    padding: 40px 40px 5px 40px;
    z-index: 9;
    width: calc(100vw - 15px);
    transition: all .2s ease-out;
}

.open .fixedHead {
    width: calc(100vw - 415px);
    transition: all .3s ease-out;
}

#params thead th {
    background: #fff;
    position: sticky;
    top: 42px;
    z-index: 2;
}

#params thead th:before {
    top: 21px;
    position: relative;
    display: block;
    content: "";
    border-bottom: 1px solid var(--gray2);
    width: calc(100% + 5px);
    margin-left: -5px;
}

#customParams table {
    margin-bottom: -1px;
}

#params div.bottomOptions {
    position: sticky;
    bottom: 0;
    background: #fff;
    margin: 0px -40px -20px -8px;
    padding: 0px 40px 20px 8px;
    z-index: 2;
    height: 57px;
}

.bottomOptions:before {
    display: inline-block;
    content: '';
    width: 100%;
    border-top: 1px solid var(--gray2);
    top: -12px;
    position: relative;
}


#params tr.noParams, #params tr.noResults {
    margin-bottom: -2px;
    border-bottom: 1px solid var(--gray2);
}

/*Add param*/
#params input {
    /*border: 1px solid var(--gray2);*/
    border: none;
    color: var(--gray5);
    font-size: 1em;
    width: 100%;
    background: transparent;
}

td.name input, td.value input {
    font-family: 'Ubuntu Mono', monospace;
}

td.comment input, #customParams td.comment textarea {
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    background: transparent;
    border: none;
    width: 100%;
    line-height: 1.3;

}

.discardParam {
    position: relative;
    margin-right: 5px
}

.discardParam:after {
    content: "";
    height: 20px;
    border-right: 1px solid var(--gray1);
    position: absolute;
    right: -6px;
}

#customParams tr.base.edit .comment textarea, .newParam td.comment input {
padding-left: 5px;
padding-top: 4px;
} 

/*Split*/
.splitParent {
    width: 100%;
    display: flex;
    flex-direction: column;;
}

.splitPanel {
    width:100%;
    height: 100%;
}
      
.gutter.gutter-vertical {
    cursor: ns-resize;
    background: rgba(227, 227, 227, .1);
    width: 100%;
}

.darkmode .gutter.gutter-vertical, .darkmode #configHeader, .darkmode #params tr.base:not(.open):not(.edit):hover {
    background: rgba(40, 47, 56, .3);
}

.gutter.gutter-vertical:before {
    display: inline-block;
    content: "=";
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    width: 100%;
    text-align: center;
    position: relative;
    top: -4px;
    color: var(--gray3);
}

.collapse svg, .expand svg, .acceptedFile svg {
    width: 20px;
    vertical-align: middle;
}

a.collapse, .expanded a.expand {
    display: none;
    /*position: fixed;
    right: 54px;*/
}

.expanded a.collapse, a.expand {
    display: block;
    /*position: fixed;
    right: 54px;*/
}

.collapsed {
    overflow: hidden;
}

/*Filter*/
#filter {
    display: none;
    padding: 40px;
    width: 400px;
    height: calc(100vh - 60px);
    background: #fff;
    position: absolute;
    right: 0;
    top: 60px;
    max-height: calc(100vh - 60px);
    overflow: scroll;
}

#filter.open, #accountSettings.open {
    display: block;
}

a.close:before, .searchBar.open a.textBtn:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+CjxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik0yMC42LDI0LjNsLTguMS04LjFsLTguMSw4LjFjLTEsMS0yLjYsMS0zLjYsMHMtMS0yLjYsMC0zLjZjMCwwLDAsMCwwLDBsOC4xLTguMUwwLjcsNC40CgljLTEtMS0xLTIuNiwwLTMuNmMxLTEsMi42LTEsMy42LDBsOC4xLDguMWw4LjEtOC4xYzEtMSwyLjYtMSwzLjYsMGMxLDEsMSwyLjYsMCwzLjZsLTguMSw4LjFsOC4xLDguMWMxLDEsMSwyLjYsMCwzLjYKCWMtMC41LDAuNS0xLjEsMC43LTEuOCwwLjdDMjEuOCwyNSwyMS4xLDI0LjcsMjAuNiwyNC4zeiIvPgo8L3N2Zz4=);
    display: inline-block;
    margin-right: 5px;
    height: 9px;
    width: 9px;
}

#filter ul ul {
    display: none;
}

#filter ul li.open ul {
    display: block;
}

#filter ul li.open > a {
    font-weight: 800;
}

#filter ul ul li {
    padding-left: 80px;
}

#filter ul ul li:first-of-type, #accountSettings li {
    margin-top: 9px;
}


/*Dashboard*/
#dashboard .form {
    margin-top: 50px;
}

#dashboard div.or {
    overflow: hidden;
    display: block;
    margin: 50px auto;
}

#dashboard div.or span {
    position: relative;
    display: inline-block;
}

#dashboard div.or span:before, #dashboard div.or span:after {
    content: "";
    position: absolute;
    top: 50%;
    border-bottom: 1px solid var(--gray2);
    width: 45vw;
    margin: 0 20px;
}

#dashboard div.or span:before {
    right: 100%;
}

#dashboard div.or span:after {
    left: 100%;
}

/*Forms*/

.actionForm,  #dashboard {
    max-width: calc(100vw - 480px);
    margin: 0 auto;
}

.actionForm input[disabled] {
    background: var(--gray3) !important;
    color: var(--gray1);
}

.form input[type='text']:focus, .darkmode .form input[type='text']:focus {
    border-color: var(--blue);
}

.form li:not(:last-of-type) {
    margin-bottom: 20px;
}

.form input#deleteName {
    margin-bottom: 4px;
}

.form ul.downloadOptions li.option {
    margin-bottom: 0;
    font-size: 1rem;
    padding: 9px 40px;
}

li.option hr.top {
    display: none;
}
li.option.open hr.top {
    display: block;
}

li.option.open a {
    margin-bottom: 5px;
    display: inline-block;
}

ul.downloadOptions li.downloadOption {
    display: none;
}

ul.downloadOptions li.downloadOption.show {
    display: inline;
}

.downloadOption img {
    width: 100%;
}

.downloadOptions .btn {
    margin-bottom: 10px;
}

.form label, div.formLabel, .get > p {
    display: block;
    font-size: 15px;
    color: var(--gray4);
    font-weight: 600;
    padding-bottom: 5px;
}

.form li input[type='text'], .form textarea {
    width: 100%;
    padding: 6px;
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: var(--gray5);
    border: 1px solid var(--gray2);
    border-radius: 3px;
}

input[type="button"] {
    border-style: none;
}
 
.form textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 35px;
    max-height: 150px;
}

.warning {
    border: 1px solid var(--red);
    background: rgba(255, 38, 0,.025);
    border-radius: 3px;
    display: block;
    margin: 10px 0;
    padding: 12px 10px;
    font-size: 1rem;
    color: var(--red);
    font-weight: 500;
    position: relative;
}

.warning svg {
    height: 20px;
    position: absolute;
    top: calc(50% - 10px);
}

.warning span {
    padding-left: 30px;
    display: inline-block;
}

.form .privacy input {
    width: 12px;
    margin-right: 5px;
    min-height: 25px;
    margin-top: 0;
}

.form .privacy label{
    display: inline;
    vertical-align: middle;
}

.form .privacy input[type="radio"], .form .privacy input[type="radio"]:checked, form .privacy label:hover input[type="radio"]:checked, .form .privacy input[type="radio"]:hover, .darkmode .form .privacy input[type="radio"] {
    background: none;
}

p.formInfo {
    font-size: 1rem;
    margin-bottom: 20px;
}

hr {
    border-color: var(--gray1);
}

/*.form .pgVersion {
    font-weight: 900;
    font-size: 12px;
    color: var(--gray3);
    background: rgba(166, 167, 174, .1);
    border-radius: 50%;
    padding: 4px;
    margin-right: 10px;
}

.form .pgVersion:hover {
    background-color: var(--blue);
    color: #fff;
    cursor: pointer;
}*/


.form .upload div.uploadContainer {
    border: 2px dashed var(--gray2);
    height: 200px;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
}

.form .upload div.uploadContainer svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-top: 60px;
}

.form .upload div.uploadContainer span {
    display: block;
    margin-top: 10px;
} 

.uploadConf, .uploadFile {
    cursor: pointer;
}


.form .confirmation {
    /*display: none;*/
}

.form .confirmation.show {
    display: inline;
}

.fileContent {
    margin: 20px 0;
    position: relative;
}

.fileContent pre {
    padding: 20px;
    line-height: 1.1rem;
    position: relative;
    display: flex;
}

.fileContent pre .loader {
    position: absolute;
    top: 0;
    height: 100%;
}

pre span.copied {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    text-align: center;
    box-shadow: none !important;
    background: rgba(0,0,0,.5);
}

pre span.copied strong {
    display: block;
    margin: 0 auto;
}

.darkmode .fileContent:before {
    border-color: rgba(38, 38, 39, 1);
}

.selectBg {
    width: 100%;
    background: transparent;
    border: 1px solid var(--gray2);
    border-radius: 5px;
}

.darkmode .selectBg {
    border-color: var(--gray5);
}

select.downloadOptions {
    width: calc(100% - 20px);
    color: var(--gray5);
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    border: none;
    margin: 5px 10px;
    background: transparent;
}

.levelSelector button:not(.active):hover {
    color: #fff;
}

.levelSelector button:not(.active):hover span, .levelSelector button:not(.active):hover span:before, .levelSelector button:not(.active):hover span:after {
    background: #fff;
}

.darkmode .levelSelector button:not(.active):hover {
    color: #252529;
}

.darkmode .levelSelector button:not(.active):hover span, .darkmode .levelSelector button:not(.active):hover span:before, .darkmode .levelSelector button:not(.active):hover span:after {
    background: #252529;
}


/*Darkmode*/
.darkmode #app, .darkmode body, .darkmode #menu .settingsMenu, .darkmode #filter, .darkmode #accountSettings, .darkmode .btnOutline, .darkmode .form input:not(.create), .darkmode .form textarea, .darkmode #menu .footer, .darkmode .fixedHead, .darkmode th, .darkmode #params div.bottomOptions, .darkmode td input, .darkmode #notificationsBar, .darkmode #notify, .darkmode #infoBox .box, .darkmode .savedParam, .darkmode .configOptions, .darkmode #params thead th, .darkmode #shortcutsPopup .box, .darkmode .paramsList, .darkmode .autoCompleteParam, .darkmode .snippetMenu {
    background: var(--darkbg);
}

.darkmode .btn, .darkmode .settings .form input.create.btn, .darkmode .form span.pgVersion:hover, .darkmode .form label.uploadFile, .darkmode .form input[type="radio"]:checked + span, .darkmode .form label:hover input[type="radio"] + span, .darkmode .levelSelector button.active {
    color: var(--darkbg);
}

.darkmode .searchHome path {
    fill: var(--darkbg);
}

.darkmode .borderTop, .darkmode .borderBottom, .darkmode .borderLeft, .darkmode .borderRight, .darkmode #menu .footer, .darkmode #customParams, .darkmode #defaultParams, .darkmode #params th, .darkmode #params tr, .darkmode #dashboard div.or span:before, .darkmode #dashboard div.or span:after, .darkmode #filter, .darkmode #menu .settingsMenu, .darkmode #accountSettings, .darkmode hr, .darkmode .form .upload div.uploadContainer, .darkmode div.searchBar.open, .darkmode .bottomOptions:before, .darkmode #params thead th:before, .darkmode #configHeader, .darkmode #config .configOptions:before, .darkmode .discardParam:after, .darkmode #notify, .darkmode #notificationsBar ul:before, .darkmode #notificationsBar li:after, .darkmode #infoBox .box, .darkmode .configOptions, .darkmode #config .configOptions .configTab:after, .darkmode #shortcutsPopup .box, .darkmode .shareLink input, .darkmode span.copied, .darkmode .tuningHelp, .tuningCards .card, .darkmode .tuningHelp .help, .darkmode #params.tuningCards tr.base.edit, .darkmode .snippetMenu, .darkmode #home img {
    border-color: var(--darkborder);
}

.darkmode .actionForm input[disabled] {
    background: var(--darkborder) !important;
    color: var(--darktitle) !important;
}

.darkmode #app, .darkmode .logo, .darkmode .configurations li span, .darkmode .form input[type='text'], .darkmode .form textarea, .darkmode div.searchBar input.show, .darkmode #homeKeyword, .darkmode  div.searchBar.open input, .darkmode #defaultParams td.comment, .darkmode #customParams td.comment textarea, .darkmode #infoBox p, .darkmode .info, .darkmode select.downloadOptions, .darkmode .lastEdit, .darkmode .paramsList li:not(.noParams) a, .darkmode .autoCompleteParam li {
    color: var(--darktext);
}

.darkmode .toggleMenu span {
    background: var(--darktext);
}

.darkmode h3, .darkmode .navLinks a, .darkmode #params th, .darkmode .configurations li a:not(.addFile), .darkmode #menu ul.settingsList li a, .darkmode #filter li a, .darkmode #accountSettings li a, .darkmode .form label, .darkmode ul.downloadOptions li.option a, .darkmode .topOptions span, td input::placeholder, .darkmode .get > p {
    color: var(--darktitle);
}

.darkmode pre, .darkmode code, .darkmode #params td input, .darkmode #params td.name, .darkmode .configName, .darkmode #customParams .value select, .darkmode #customParams textarea, .darkmode #customParams .value .radioLabel {
    color: #ffffff;
}

.darkmode .navIcons svg path, .darkmode .navIcons svg ellipse, .darkmode .navIcons svg rect, .darkmode .configurations li svg.arrow path, .darkmode .configurations li a.router-link-exact-active:focus svg.arrow path {
    fill: var(--darktitle);
} 

.darkmode #params tr:not(.error) td > svg path, .darkmode #params td > svg circle {
    fill: var(--gray4);
}

.darkmode .form li input[type='text'], .darkmode .form textarea, .darkmode div.searchHome, .darkmode .paramsList, .darkmode .autoCompleteParam {
    border-color: var(--gray5);
}

.darkmode .configurations li.pgFile code {
    color: #fff;
}

/*Sizes*/
@media screen and (min-width: 1600px) {
    .actionForm {
        max-width: 800px;
    }
}




/*temp*/

.form .pgVersion label {
    display: inline-block;
    margin-right: -10px;
    cursor: pointer;
}

.form .pgVersion span:not(.required) {
    position: relative;
    left: -23px;
    top: 3px;
    color: var(--gray3);
    font-weight: 900;
    font-size: 12px;
}

#pgVersion9_2 + span, #pgVersion9_3 + span, #pgVersion9_4 + span, #pgVersion9_5 + span, #pgVersion9_6 + span {
    left: -24px;
}

.form input[type="radio"], .darkmode .form input[type="radio"] {
    /* border: 0; */
    position: relative;
    width: 25px;
    height: 25px;
    cursor: pointer;
    appearance: none;
    border-radius: 50%;
    background-color: rgba(166, 167, 174, .1);
    border: none;
}

.form .privacy label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.form input[type="radio"]:checked {
    background-color: var(--blue);
}

.form label:hover input[type="radio"] {
    background-color: var(--gray3);   
}

.form label:hover input[type="radio"] + span, .form input[type="radio"]:checked + span {
    color: #fff;
}

.form label:hover input[type="radio"]:checked {
    background-color: var(--lblue);
}

.form input#uploadConf {
    display: none;
}

.acceptedFile .formLabel {
    margin-bottom: 10px;
}

.acceptedFile svg {
    margin-right: 10px;
}

#ConfigSnippet h1 {
    margin-bottom: 15px;
}

#ConfigSnippet h1 code {
    font-weight: bold;
}

#ConfigSnippet ul li {
    margin-left: 50px;
    margin-bottom: 10px;
}

.darkmode #ConfigSnippet .hljs-tag, .darkmode #ConfigSnippet .hljs-name, .darkmode #ConfigSnippet .hljs-attribute {
    color: deepskyblue;
}

.darkmode #ConfigSnippet .hljs-number, .darkmode #ConfigSnippet .hljs-literal, .darkmode #ConfigSnippet .hljs-variable, .darkmode #ConfigSnippet .hljs-template-variable, .darkmode #ConfigSnippet .hljs-tag .hljs-attr {
    color: chartreuse;
}


/* Share config */
li.shareLink .get {
    font-size: 14px;
    position: relative;
}

.shareLink input {
    width: calc(100% - 40px);
    height: 34px;
    background: transparent !important;
    border: 1px solid var(--gray2);
    padding: 6px;
    padding-left: 10px;
    border-radius: 3px;
    margin-top: -10px;
    font-family: 'Ubuntu Mono';
    cursor: pointer !important;
    color: inherit;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

a.copyLink {
    position: absolute;
    right: 40px;
    bottom: 5px;
    width: calc(100% - 40px);
    text-align: right;
    height: 34px;
    padding: 15px;
    color: var(--blue);
}

.openLink {
    margin-left: 15px;
    position: relative;
    top: 4px;
    right: 0;
}

.openLink svg {
    width: 25px;
}

span.copied {
    color: var(--blue);
    float: right;
    margin-right: 70px;
    font-size: 12px;
    letter-spacing: 0.1px;
    display: none;
    border: 1px solid var(--gray1);
    padding: 6px;
    border-radius: 3px;
    position: absolute;
    right: -30px;
    top: -11px;
    box-shadow: 1px 1px 5px rgba(2, 14, 20, .075);
}

.darkmode span.copied {
    box-shadow: 1px 1px 5px rgba(2, 14, 20, .8);
}

/* Tuning Guide */

.configTuning {
    padding: 40px;
}

.configTuning h2 {
    display: block;
}

.tuningHeader .intro {
    width: calc(100% - 655px);
    padding: 7px 20px 7px 0;
    border-right: 1px solid rgba(156,156,156,.35);
    float: left;
    line-height: 1.3;
}

.tuningHeader {
    display: inline-block;
    margin-bottom: 40px;
}

.levelSelector button span:before, .levelSelector button span:after {
    display: block;
    content: " ";
    width: 100%;
    height: 2px;
    border-radius: 5px;
    position: relative;
    top: -6px;
    background: var(--blue);
    opacity: .25;
}

.levelSelector button span {
    display: inline-block;
    width: 10px;
    border-radius: 5px;
    height: 2px;
    background: var(--blue);
    position: relative;
}

.levelSelector button span:before {
    top: -8px;
}

.levelSelector button.intermediate span:after, .levelSelector button.advanced span:before, .levelSelector button.advanced span:after {
    opacity: 1;
}

.levelSelector button {
    background: rgba(0, 173, 181, .1);
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.levelSelector button.active {
    background: var(--blue);
    
}

.levelSelector button.active span, .levelSelector button.active span:before, .levelSelector button.active span:after {
 background: #fff;
}

.darkmode .levelSelector button.active span, .darkmode .levelSelector button.active span:before, .darkmode .levelSelector button.active span:after {
    background: var(--darkbg);
}

.tuningCards {
    width: 70%;
    float: left;
    padding-left: 50px;
    padding-right: 10px;
    max-height: 65vh;
    overflow: auto;
}

.tuningHelp {
    width: 30%;
    float: left;
    max-height: 65vh;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
}

.tuningHelp, .tuningCards .card {
    background: #f9f9f9;
    border: 1px solid var(--darktext);
    box-shadow: 0px 3px 9px rgba(2, 14, 20, .075);
    margin-bottom: 50px;
    padding: 40px !important;
    border-radius: 5px;
}

.tuningCards .card:last-child {
    margin-bottom: 0;
}

.darkmode .tuningHelp, .darkmode .tuningCards .card {
    box-shadow: 1px 1px 10px rgba(2, 14, 20, .8);
    border-color: var(--darkborder);
}

.configTuning #params thead th {
    position: initial;
    background: transparent;
}

#params.tuningCards tr.base.edit {
    border-bottom: 1px solid var(--gray1);
}

.configTuning .bgGradient{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(249, 249, 249));
}

.configTuning .base:hover .bgGradient {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(241, 241, 242));
}

.configTuning .error .bgGradient {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(244, 245, 245));
}

.darkmode .configTuning .bgGradient {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(28, 30, 33));
}

.darkmode .configTuning .base:hover .bgGradient {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(32, 35, 40));
}

.darkmode .configTuning .error .bgGradient {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(35, 37, 41));
}

.tuningHelp .help {
    margin-top: 30px;
    border-top: 1px solid var(--gray1);
    padding-top: 30px;
    padding-right: 20px;
    display: inline-block;
    overflow: auto;
}

.configTuning #params th.name, .configTuning #params th.value {
    width: 46%;
}

.configTuning th.set, .configTuning td.set {
    text-align: right;
    padding-right: 5px;
}

.tuningHelp ul {
    padding-left: 25px;
}

.configTuning #customParams {
    box-shadow: none !important;
}

.configTuning #customParams tr.base td.value div.editModeOn {
    width: 100%;
    margin-right: -30px;
}

.configTuning #customParams tr.base.edit td.value div.editModeOn {
    width: calc(100% - 25px);
    margin-right: -5px;
}

.configTuning td.value .bgGradient {
    right: -30px;
}

.configOptions.postgresqlconf {
    left: -1px;
}

#config .pgVersion.tuningGuide {
    border-radius: 3px;
    width: auto;
    height: auto;
    padding: 0;
    position: relative;
}

#config .pgVersion.tuningGuide select {
    background: transparent;
    border: 0;
    color: var(--blue);
    cursor: pointer;
    padding: 3px 20px 3px 6px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    position: relative;
    z-index: 2;
    font-family: 'Ubuntu Mono', monospace;
}

#config .pgVersion.tuningGuide:after {
    height: 4px;
    content: " ";
    display: block;
    border: 1px solid var(--blue);
    position: absolute;
    border-left: 0;
    border-top: 0;
    width: 4px;
    transform: rotate(45deg);
    right: 8px;
    top: 6px;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .mobileMenu {
        display: block;
        margin-top: 5px;
        float: left;
        margin-right: 15px;
        cursor: pointer;
    }

    .mobileMenu span {
        display: block;
        height: 2px;
        background: var(--gray5);
        margin-bottom: 4px;
        width: 20px;
        position: relative;
        top: 0;
        transition: all .3s ease-out;
    }

    .logo {
        margin-right: 10px;
        margin-top: 5px;
    }

    .navIcons svg {
        margin: 0;
    }
    
    #home > .col-2 {
        width: 100%;
        border-bottom: 1px solid var(--gray2);
        border-right: none;
    }

    #home h2 {
        margin-top: 0;
    }

    #home p {
        margin: 25px auto;
    }

    #main {
        overflow-x: hidden;
    }

    .navLinks {
       display: none; 
    }

    .navLinks.show {
        display: block;
        position: fixed;
        left: 0px;
        top: 60px;
        background: #fff;
        width: 100%;
        z-index: 10;
       
    }

    .navLinks.show a {
        display: block;
        padding: 20px 40px;
        margin: 0;
    }

    .navLinks.show .snippetMenu a {
        margin-left: 40px;
        border-left: 2px solid var(--blue);
        padding-left: 20px;
    }

    .snippetMenu {
        display: block;
        border: none;
        box-shadow: none;
        top: 54px;
        width: 100vw;
        border-bottom: 1px solid var(--gray2);
        box-shadow:0px 4px 3px 3px rgba(2, 14, 20, .025);
    }

    div.searchHome {
        width: 100%;
    }

    #goDoc > .btn {
       float: none;
    }

    .footer {
        border: none;
    }

    .darkmode .navLinks.show {
        background: var(--darkbg);
    }

    .darkmode #home > .col-2, .darkmode .snippetMenu {
        border-color: var(--darkborder);
    }

    .darkmode .navLinks.show a, .darkmode .navLinks.show a:active {
        color: #fff;
    }

    .darkmode .mobileMenu span {
        background: var(--darktext);
    }

}

/*@media (prefers-color-scheme: dark) {
    .btnOutline:hover {
        background: rgba(0, 197, 206, .1);
    }
    
    .logo:hover, .navLinks a:hover, span.pgVersion, .addFile {
        color: var(--blue);
    }
    
    .toggleMenu:hover span {
        background: var(--blue);
    }
    
    .navIcons svg:hover path, .navIcons svg:hover ellipse, .navIcons svg:hover rect {
        fill: var(--blue);
    }
    
    #notificationsBar, #notify, #infoBox .box, #shortcutsPopup .box, #accountSettings {
        box-shadow: 0 3px 9px rgba(2, 14, 20, .8);
    }
    
    .overlay, #shortcutsPopup {
        background-color: rgba(31, 34, 39, .7);
    }
    
    #menu.open {
        box-shadow: 0 3px 9px rgba(2, 14, 20, .8);
    }
    
    #menu .settingsMenu.open {
        box-shadow: 4px 3px 9px -4px rgba(2, 14, 20, .8);
    }
    
    a.textBtn.saveConfig, a.textBtn.saveConfig:hover {
        color: #1c1e21;
    }
    
    a.textBtn.saveConfig:before {
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMiI+PHBhdGggZmlsbD0iIzFjMWUyMSIgZD0iTTExLjcsMS45bC0xLjYtMS42QzkuOSwwLjEsOS42LDAsOS4zLDBIMS4xQzAuNSwwLDAsMC41LDAsMS4xbDAsMHY5LjdDMCwxMS41LDAuNSwxMiwxLjEsMTJsMCwwaDkuN2MwLjYsMCwxLjEtMC41LDEuMS0xLjFsMCwwVjIuN0MxMiwyLjQsMTEuOSwyLjEsMTEuNywxLjl6IE0xLjksM2MwLTAuNiwwLjUtMS4xLDEuMS0xLjFsMCwwaDMuOGMwLjYsMCwxLjEsMC41LDEuMSwxLjFTNy40LDQuMSw2LjgsNC4xSDNDMi40LDQuMSwxLjksMy42LDEuOSwzQzEuOSwzLDEuOSwzLDEuOSwzeiBNNiwxMC4xYy0xLjEsMC0yLjEtMC45LTIuMS0yLjFTNC45LDYsNiw2YzEuMSwwLDIuMSwwLjksMi4xLDIuMVM3LjEsMTAuMSw2LDEwLjFMNiwxMC4xeiIvPjwvc3ZnPg==);
    }
    
    #home img {
        box-shadow: 0 3px 9px rgba(2, 14, 20, .8);
    }
    
    div.searchBar.open.focus {
        border: 1px solid var(--blue);
    }
    
    #customParams {
        box-shadow: 0 3px 9px rgba(2, 14, 20, .5);
    }
    
    tr.base:hover .savedParam, .searchBar.open {
        background: #1C1E21;
    }
    
    tr.error .savedParam {
        background: #1E1F1F;
    }
    
    .bgGradient {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(23, 23, 23, 1));
    }
    
    tr.base:hover .bgGradient {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(28, 30, 33, 1));
    }
    
    tr.error .bgGradient {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(30, 31, 31, 1));
    }
    
    #customParams tr.edit td.value div.editModeOn, #customParams tr.edit td.comment div.editModeOn, .newParam .editModeOn {
        background: rgba(31, 34, 39, .5);
        border-color: var(--darktitle);
    }
    
    #customParams tr.edit td.value.focus div.editModeOn, #customParams tr.edit td.comment.focus div.editModeOn {
        background-color: rgba(40, 47, 56, .5);
    }
    
    #tooltip.show {
        background: var(--darkbg);
        box-shadow: 0 3px 9px rgba(2, 14, 20, .8);
        border-color: var(--black);
    }
    
    .gutter.gutter-vertical, #configHeader, #params tr.base:not(.open):not(.edit):hover {
        background: rgba(40, 47, 56, .3);
    }
    
    .form input[type='text']:focus {
        border-color: var(--blue);
    }
    
    .fileContent:before {
        border-color: rgba(38, 38, 39, 1);
    }
    
    .selectBg {
        border-color: var(--gray5);
    }
    
    #app, body, #menu .settingsMenu, #filter, #accountSettings, .btnOutline, .form input:not(.create), .form textarea, #menu .footer, .fixedHead, th, #params div.bottomOptions, td input, #notificationsBar, #notify, #infoBox .box, .savedParam, .configOptions, #params thead th, #shortcutsPopup .box, .paramsList, .autoCompleteParam {
        background: var(--darkbg);
    }
    
    .btn, .settings .form input.create.btn, .form span.pgVersion:hover, .form label.uploadFile, .form input[type="radio"]:checked + span, .form label:hover input[type="radio"] + span {
        color: var(--darkbg);
    }
    
    .searchHome path {
        fill: var(--darkbg);
    }
    
    .borderTop, .borderBottom, .borderLeft, .borderRight, #menu .footer, #customParams, #defaultParams, #params th, #params tr, #dashboard div.or span:before, #dashboard div.or span:after, #filter, #menu .settingsMenu, #accountSettings, hr, .form .upload div.uploadContainer, div.searchBar.open, .bottomOptions:before, #params thead th:before, #configHeader, #config .configOptions:before, .discardParam:after, #notify, #notificationsBar ul:before, #notificationsBar li:after, #infoBox .box, .configOptions, #config .configOptions .configTab:after, #shortcutsPopup .box, .shareLink input, span.copied {
        border-color: var(--darkborder);
    }
    
    .actionForm input[disabled] {
        background: var(--darkborder) !important;
        color: var(--darktitle) !important;
    }
    
    #app, .logo, .configurations li span, .form input[type='text'], .form textarea, div.searchBar input.show, #homeKeyword,  div.searchBar.open input, #defaultParams td.comment, #customParams td.comment textarea, #infoBox p, .info, select.downloadOptions, .lastEdit, .paramsList li:not(.noParams) a, .autoCompleteParam li {
        color: var(--darktext);
    }
    
    .toggleMenu span {
        background: var(--darktext);
    }
    
    h3, .navLinks a, #params th, .configurations li a, #menu ul.settingsList li a, #filter li a, #accountSettings li a, .form label, ul.downloadOptions li.option a, .topOptions span, .get > p {
        color: var(--darktitle);
    }
    
    pre, code, #params td input, #params td.name, .configName, #customParams .value select, #customParams textarea, #customParams .value .radioLabel {
        color: #ffffff;
    }
    
    .navIcons svg path, .navIcons svg ellipse, .navIcons svg rect, .configurations li svg.arrow path, .configurations li a.router-link-exact-active:focus svg.arrow path {
        fill: var(--darktitle);
    } 
    
    #params tr:not(.error) td > svg path, #params td > svg circle {
        fill: var(--gray4);
    }
    
    .form li input[type='text'], .form textarea, div.searchHome, .paramsList, .autoCompleteParam {
        border-color: var(--gray5);
    }
    
    .form input[type="radio"] {
        position: relative;
        width: 25px;
        height: 25px;
        cursor: pointer;
        appearance: none;
        border-radius: 50%;
        background-color: rgba(166, 167, 174, .1);
        border: none;
    }

    .configurations li.pgFile code {
        color: #fff;
    }

    .form .privacy input[type="radio"] {
        appearance: none;
        width: 15px;
        height: 15px;
        border: 2px solid var(--blue);
        border-radius: 50%;
        min-height: auto;
        background: none;
    }

    span.copied {
        box-shadow: 1px 1px 5px rgba(2, 14, 20, .8);
    }
}*/