style.css

body {
    font-size: 0.85em !important;
    color: white;
}

label, input {
    font-size: 1.3em !important;
    color: white;
}

form {
    font-size: 0.7em;
}

.btn {
    top: 8px!important;
    font-size: 0.9em!important;
    text-transform: none!important;
    font-weight: 300;
}

#snipe {
    position: relative;
    left: -40px;
}

.material-icons {
    position: relative;
    top: 8px;
}

#filters .material-icons {
    position: relative;
    top: 0px;
}

.collection {
    border: none!important;
}

.select-wrapper input.select-dropdown, input {
    border-bottom: 1px dotted rgba(0,0,0,0)!important;
    padding-left: 0!important;
}

.select-wrapper input.select-dropdown {
    border-bottom: 1px dotted rgba(0,0,0,0)!important;
    padding-left: 10px!important;
}

/* .filter-group .filter-detail-group {
    border: 1px dashed rgba(0,200,100,0)!important;
} */

.filter-group {
    margin-bottom: 20px!important;
}

.filter-group-content {
    padding-top: 20px;
    /* padding-bottom: 20px; */
}

.filter-detail-group {
    transition: background-color 0.2s linear;
}

.filter-detail-group:hover {
    background-color: rgba( 121, 121, 121, 0.1 )!important;
    transition: background-color 0.2s linear;
    cursor: pointer;
}

.group-amount {
    top: 4px;
    position: relative;
    color: #909090;
}

.droppable {
    background-color: rgb(0, 47, 41)!important;
    border: 1px dashed rgba(0,200,100,1)!important;
    border-radius: 5px;
}

.caret {
    color: white!important;
}

.progress {
    position: absolute!important;
    top: 240px;
}

span.title {
    font-size: 1.3em!important;
    font-weight: 300!important;
}

.collection-item {
    border: none!important;
    margin-top: 3px!important;
}

.currency {
    font-weight: bold;
    color: rgba(220, 187, 127, 1);
}

.item {
    font-weight: bold;
    /*color: orange;*/
}

.timestamp {
    color: grey;
}

.account {
    color: rgba( 0, 200, 200, 1 );
}

li.collection-item {
    line-height: 0.5rem!important;
}

#current-change-id {
    position: relative;
    left: 10px;
}

.implicit, .explicit {
    color: rgb(132, 183, 255);
}

.affix-filter-list .affix-implicit, .affix-filter-list .affix-explicit, .affix-filter-list .affix-crafted, .affix-filter-list .affix-enchant, .affix-filter-list .affix-total, .affix-filter-list .affix-pseudo, .affix-filter-list .affix-unique {
    margin-left: 20px!important;
}

.affix-implicit {
    background-color: rgba(132, 183, 255, 0.25)!important;
}

.affix-explicit {
    background-color: rgba(132, 183, 255, 0.5)!important;
}

.affix-legacy {
    background-color: rgba(255, 232, 132, 0.5)!important;
}

.affix-P {
    background-color: rgba(200, 0, 100, 0.5)!important;
}

.affix-S {
    background-color: rgba(0, 100, 200, 0.5)!important;
}

.affix-corrupted {
    background-color: rgba(255, 0, 0, 0.5)!important;
}

.affix-Tora, .affix-Elreon, .affix-Catarina, .affix-Leo, .affix-Vorici, .affix-Haku, .affix-Vagan, .affix-Renegades, .affix-Mutewind, .affix-Brineroot, .affix-Redblade {
    background-color: rgba(24, 93, 20, 1)!important;
}

.affix-talisman {
    background-color: rgba(0, 100, 200, 0.5)!important;
}

.implicit {
    border-bottom: 1px dotted grey;
}

.crafted {
    color: rgba(181, 229, 250, 1);
}

.affix-crafted {
    background-color: rgba(181, 229, 250, 0.5)!important;
}

.enchant {
    color: rgba(180, 180, 255, 1);
}

.affix-enchant {
    background-color: rgba(180, 180, 255, 0.5)!important;
}

.total {
    color: rgba(167,167,58,1);
}

.affix-total {
    background-color: rgba(167,167,58,0.5)!important;
}

.pseudo {
    color: rgba(155,155,155,1);
}

.affix-pseudo {
    background-color: rgba(155,155,155,0.5)!important;
}

.corrupted {
    color: rgba(210, 0, 0, 1);
    font-weight: bold;
}

div.title {
    font-size: 1.3em;
    padding-bottom: 10px;
}

.details {
    /* border-top: 1px dotted grey; */
    border-top: 1px solid #284358;
    font-size: 1.3em;
    padding-top: 10px;
}

ul .row {
    margin-bottom: 0!important;
}

.autocomplete-content {
    position: absolute!important;
    top: 40px;
    width: 95%!important;
    z-index: 1000!important;
    width: 400px!important;
    max-width: 400px;
}

.dropdown-content {
    z-index: 1000!important;
}

.dropdown-content li > a, .dropdown-content li > span {
    font-size: 1.3em!important;
    background: black!important;
    color: white!important;
}

.dropdown-content li > a, .dropdown-content li > span:hover {
    font-size: 1.3em;
    background: rgba( 50, 50, 50, 1 )!important;
    color: white;
}

.dropdown-content li.selected > a, .dropdown-content li.selected > span, .dropdown-content li.active > span {
    font-size: 1.3em;
    background: rgba( 100, 100, 100, 1 );
    color: white;
}

.select-wrapper input.select-dropdown, input {
    /*border-bottom: 1px dotted white!important;*/
    /*padding-left: 0!important;*/
}

span.highlight {
    color: rgb(38, 166, 154) !important;
}

img.right.circle {
    width: auto !important;
}

.property-title {
    color: grey;
    font-weight: bold;
}

.property-value {
    color: grey;
}

#affixes {
    left: -10px!important;
    position: relative;
}

#affixes-list {
    position: absolute;
    top: 80px;
    font-size: 1.3em;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 130px;
    width: 100%;
}

.affix-value {
    color: orange
}

.affix-item {
    cursor: pointer;
    transition: color 0.2s linear;
}

.affix-item:hover {
    color: rgba(34, 255, 147, 1)!important;
    transition: color 0.2s linear;
}

.filter-corrupted {
    padding-right: 10px;
    color: rgba(210, 0, 0, 1);
    font-weight: bold;
}

.filter-enchanted {
    padding-right: 10px;
    color: rgba(180, 180, 255, 1);
    font-weight: bold;
}

.filter-crafted {
    padding-right: 10px;
    color: rgba(181, 229, 250, 1);
    font-weight: bold;
}

.filter-links {
    padding-left: 10px;
    padding-right: 10px;
}

.filter-sockets {
    padding-left: 10px;
    padding-right: 10px;
}

.filter-property {
    padding-right: 10px;
    color: grey;
}

.filter-affix {
    padding-right: 10px;
    color: rgba(135, 135, 254, 1);
}

input {
    height: 1.5rem!important;
}

.magic {
    color: rgba(135, 135, 254, 1);
}

.rare {
    color: rgba(243, 243, 113, 1);
}

.unique {
    color: rgba(175, 96, 37, 1);
}

.affix-unique {
    background-color: rgba(175, 96, 37, 0.5)!important;
}

.gem {
    color: rgba(0, 255, 0, 1);
}

.divination {
    color: rgb(19, 255, 183);
}

.prophecy {
    color: rgba(181, 75, 255, 1);
}

.currency {
    color: rgba(170, 158, 130, 1);
}

.legacy {
    color: rgba(72, 144, 68, 1);
}

.map {
    color: rgba(255, 0, 100, 1);
}

.affix-essence {
    background-color: rgba(255, 0, 100, 0.5)!important;
}

.fragment {
    color: rgba(200, 200, 0, 1);
}

.essence {
    background: -webkit-linear-gradient(left, rgb(101,94,192), rgb(127,255,252),rgb(255,255,167),rgb(219,66,63),rgb(235,117,154),rgb(92,25,205));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.not-unique {
    background: -webkit-linear-gradient(#eee, #828282);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.item-stats {
    color: rgba(0, 200, 200, 1);
    display: none;
    word-wrap: break-word;
    line-height: 15px;
    padding-top: 2px!important;
    left: -10px!important;
    position: relative;
}

.poe-trade-link, .poe-ninja-link, .poe-rates-link, .poe-wiki-link {
    top: 8px!important;
    margin-right: 10px;
    position: relative;
}

.poe-trade-link a, .poe-ninja-link a, .poe-rates-link a, .poe-wiki-link a {
    color: white;
}

.badge-link {
    background: #353535!important;
    border: 1px solid #4c4c4c;
}

.filter-detail a {
    transition: color 0.2s linear;
}

.filter-detail a:hover {
    color: rgba(34, 255, 147, 1)!important;
    transition: color 0.2s linear;
}

[type="checkbox"].filled-in:checked+label:after {
    border: 2px solid rgba(96, 125, 139, 1)!important;
    background-color: rgba(96, 125, 139, 1)!important;
}

.filter-form input:not(.select-dropdown) {
    color: rgba(34, 255, 147, 1)!important;
}

.affix-preview {
    color: rgba(150,150,150,1)!important;
    /* font-style: italic; */
}

input:active {
    color: white;
}

#cancel-filter {
    opacity: 100;
}

#settings-modal {
    width: 97%;
    max-height: 90%!important;
    top: 5%!important;
    border-radius: 5px;
    font-size: 0.8em;
}

.preference-title {
    font-size: 1.4em;
}

.item-stats span {
    padding-right: 10px;
}

#poe-trade-output, #poe-trade-search-output {
    display: none;
}

input[type=range] {
    border: none!important;
    position: relative;
    top: -35px;
}

input.item {
    border: none!important;
    box-shadow: none!important;
    margin: 0!important;
}

.volume-label {
    position: relative;
    top: -10px;
}

#status-bar {
    position: fixed;
    bottom: 0;
    height: 40px;
    padding-top: 10px;
    padding-left: 10px;
    background: black;
    color: rgba(34, 255, 147, 1);
    width: 100%;
    font-size: 0.9em;
    opacity: 1;
    transition: 5s opacity;
}

.fadedText {
    opacity: 0;
    transition: 5s opacity;
}

.sockets {
    position: absolute;
    display: none;
}

.socket1 {
    top: 50px;
    left: 33px;
}

.socket2 {
    top: 50px;
    left: 80px;
}

.socket3 {
    top: 97px;
    left: 80px;
}

.socket4 {
    top: 97px;
    left: 33px;
}

.socket5 {
    top: 144px;
    left: 33px;
}

.socket6 {
    top: 144px;
    left: 80px;
}

.links {
    position: absolute;
    z-index: 999;
    display: none;
}

.link1 {
    left: 61px;
    top: 66px;
}

.link2 {
    left: 95px;
    top: 79px;
}

.link3 {
    left: 61px;
    top: 112px;
}

.link4 {
    left: 48px;
    top: 126px;
}

.link5 {
    left: 61px;
    top: 159px;
}

.blurred {
    transform: translateZ(0);
    transition: 0.5s filter linear;
    filter: blur(5px);
}

.new-update {
    position: fixed;
    left: 30%;
    top: 10%;
    max-height: 80%;
    overflow-y: scroll;
    width: 40%;
    filter: blur(0px);
    z-index: 999;
}

.update-title {
    font-size: 2em;
    color: rgba(34, 255, 147, 1);
    text-shadow: 0 0 15px #72bd3a;
    border-bottom: 1px dotted white;
}

.update-date {
    padding-top: 10px;
}

.update-body h3 {
    font-size: 1.5em;
}

.update-body ul:not(.browser-default) li {
    list-style: square inside!important;
}

.new-update {
    display: none;
}

#fold-filters {
    position: relative;
    left: 10px;
    font-weight: bold;
    color: #607d8b;
    cursor: pointer;
    transition: transform 0.2s linear;
    /*transform: rotate(0deg);*/
}

.fold-group {
    cursor: pointer;
}

.folded {
    transition: transform 0.2s linear;
    transform: rotate(-90deg);
}

#fold-filters::selection {
  background: rgba(0,0,0,0); /* WebKit/Blink Browsers */
}

#item-filter {
    position: relative;
    top:-1px;
}

#filter-filter, #filter-processing-total-time {
    position: relative;
    top: 9px;
}

#filter-filter[disabled] {
    background-color: rgba( 255, 0, 0, 0 );
    color: rgb( 50, 50, 50 )!important;
}

.filter-list .collection {
    padding-top: 10px!important;
    margin: 0;
}

.filter-list .collection-item {
    padding-top: 0!important;
    margin: 0;
}

.filter-detail, .entry {
    border: 1px solid rgba(0, 0, 0, 0)!important;
    /* border: none!important; */
    background-color: rgba( 0, 0, 0, 0 )!important;
    transition: background-color 0.2s linear;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    top: -9px;
    padding-bottom: 15px!important;
}

.filter-detail-group .item {
    font-size: 1em!important;
}

.filter-detail, .filter-detail-group {
    margin-bottom: 5px!important;
}

.filter-detail-group {
    border: 1px solid rgba(50,50,50,1);
}

.filter-detail:hover, .entry:hover {
    /* background-color: rgba( 0, 200, 200, 0.1 )!important; */
    /* transition: background-color 0.2s linear; */
    background-color: rgba(206, 206, 206, 0.1)!important;
    transition: background-color 0.2s linear;
    border: 1px solid #3e3e3e!important;
}

.filter-detail .title, .filter-detail-group .title {
    position: relative;
    top: 9px;
    word-wrap: break-word;
    line-height: 15px;
}

.filter-entry {
    padding: 0!important;
}

.old {
    opacity: 0.3;
}

.sold {
    filter: grayscale(100%) brightness(76%);
    opacity: 0.5;
}

.cover {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background: rgba( 0, 0, 0, 0.5 );
    display: none;
}

.typeLine {
    color: #c7c7c7;
    padding-left: 10px;
}

label {
    top: 3px!important;
    left: 0!important;
    padding-left: 10px;
}

label.active {
    transform: translateX(50px)!important;
    text-align: right!important;
    color: #b9ecb7!important;
    /*text-shadow: 0 0 5px blue;*/
}

.modal-content label.active {
    transform: translateX(110%)!important;
    text-align: right!important;
    color: #b9ecb7!important;
    /*text-shadow: 0 0 5px blue;*/
}

#settings-modal label {
    color: white;
}

.dps-group label.active {
    transform: translateX(30px)!important;
}

.map-group label.active {
    transform: translateX(35px)!important;
}

.item-name label.active {
    transform: translateX(230%)!important;
}

.item-type label.active {
    transform: translateX(260%)!important;
}

label.active[for="mod-group-min"], label.active[for="mod-group-max"] {
    transform: translateX(90%)!important;
}

label.active[for="sockets-red"], label.active[for="sockets-green"], label.active[for="sockets-blue"], label.active[for="sockets-white"] {
    transform: translateX(120%)!important;
}

label.active[for="tier"] {
    transform: translateX(165%)!important;
}

label[for="price-bo"] {
    left: 20px!important;
}

.input-field {
    margin-top: 0rem!important;
}

input[type="number"], input[type="text"], input.select-dropdown {
    /*padding-left: 25%!important;*/
    /*width: 75%!important;*/
    border-radius: 5px!important;
    padding-left: 10px!important;
    /*width: 100%!important;*/
}

input[type="number"], input[type="text"] {
    /*border-bottom: 1px solid rgba(27, 173, 173, 0.2)!important;*/
}

input[type="number"]:focus, input[type="text"]:focus {
    box-shadow: 0 1px 0 0 rgba(0,0,0,0)!important;
    background: black;
    padding-left: 10px!important;
}

input:hover:enabled {
    background-color: rgba( 0, 0, 0, 0.2 )!important;
    transition: background-color 0.2s linear;
}

.filter-form input:hover:enabled {
    background-color: rgba(51, 51, 51, 0.59)!important;
    transition: background-color 0.2s linear;
}

input:focus {
    background-color: rgba( 0, 0, 0, 0.4 )!important;
    transition: background-color 0.2s linear;
}

.filter-form .row {
    margin-bottom: 0!important;
}

.btn {
    background: #2b2b2b!important;
}

.cb[type="checkbox"].filled-in:checked + label:after {
    border: 2px solid #2b2b2b!important;
    background-color: #2b2b2b!important;
}

[type="checkbox"].filled-in:not(:checked)+label:after {
    background-color: rgb(41, 41, 41)!important;
    border: 2px solid rgba(0, 0, 0, 1)!important;
}

#poe-trade-url {
    font-size: 1em!important;
    position: relative;
    top: 10px;
    left: -10px;
    color: rgba(0,200,100,1)!important;
}

.filter-action {
    margin-bottom: 10px;
}

#settings i, #snipe i, #cancel-filter i, #add-filter i, #import-poe-trade i {
    position: relative;
    top: 0;
}

#settings span, #snipe span, #cancel-filter span, #add-filter span, #import-poe-trade span {
    position: relative;
    top: -6px;
    left: 5px;
}

.modal-content hr {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-content {
    font-size: 1em!important;
}

.modal-footer .btn {
    margin-bottom: 20px;
}

.section {
    font-size: 1.5em;
}

#whisper-message, #barter-message {
    color: rgba(34, 255, 147, 1)!important;
    border-radius: 5px!important;
    border-bottom: 1px solid rgba(0,0,0,0)!important;
    padding: 5px!important;
    font-size: 1.22em!important;
    padding-bottom: 15px;
    min-height: 4rem!important;
    font-family: "Courier New", Courier, monospace;
}

.materialize-textarea:hover {
    background-color: rgba( 0, 0, 0, 0.2 )!important;
    transition: background-color 0.2s linear;
}

.materialize-textarea:focus {
    background-color: rgba( 0, 0, 0, 0.4 )!important;
    transition: background-color 0.2s linear;
    box-shadow: none!important;
}

#whisper-preview, #barter-preview {
    font-size: 1.3em!important;
    font-family: "Fontin";
    color: rgba(255, 255, 255, 0.8)!important;
    min-height: 4rem!important;
}

#whisper-preview:hover, #barter-preview:hover {
    background-color: rgba( 0, 0, 0, 0 )!important;
    transition: background-color 0.2s linear;
}

.tag {
    font-family: "Courier New", Courier, monospace;
    color: yellow;
}

#apply-settings, #import {
    position: relative;
    top: -10px!important;
    left: -10px!important;
}

.btn {
    border: 1px solid rgba(255, 255, 255, 0.03)!important;
}

.btn:hover {
    border: 1px solid rgba(0,200,200,0.5)!important;
}

#cancel-filter.disabled, #add-filter.disabled, #import-poe-trade.disabled, #cancel-affix.disabled, #add-affix.disabled, #play-sound.disabled {
    background-color: #2f2f2f !important;
    color: #5f5f5f !important;
}

.underpriced-form {
    display: none;
}

.underpriced-form .caret {
     top: -20px!important; 
     right: 30px!important; 
}

.underpriced-form .select-wrapper {
    left: -250px!important;
}

#underpriced-percentage {
    width: 50px;
}

#underpriced-league {
    left: -200px!important;
}

#poe-trade-forms {
    display: none;
}

.search-engines {
    display: none;
    padding-bottom: 0;
    top: -8px;
    position: relative;
}

#poe-trade-link {
    display: none;
}

.performance-info {
    display: none;
}

input:disabled {
    color: grey!important;
}

label:disabled {
    color: grey!important;
}

.badge {
    float: none!important;
    margin-left: 0!important;
    font-weight: 500!important;
    font-size: 0.8rem!important;
    color: #fff!important;
    background-color: #26a69a;
    border-radius: 2px;
    margin-right: 10px;
}

.good {
    color: green;
}

.medium {
    color: rgb(180,180,0);
}

.bad {
    color: rgb(190,0,0);
}

.affix-filter-list {
    margin-top: 5px;
}

.value, .blacklist-account {
    color: #49bf9b;
    font-weight: bold;
}

/* color-picker skin */
.sp-replacer {
    border: solid 1px #323232!important;
    background: #2b2b2b!important;
    color: #ffffff!important;
}

.blacklist-action {
    left: 10px;
    color: #828282;
    font-size: 15px!important;
    top: 2px;
    transition: color 0.2s linear;
}

.blacklist-action:hover {
    color: red;
    transition: color 0.2s linear;
}

.edit-group {
    color: white;
    transition: color 0.2s linear;
}

.edit-group:hover {
    color: teal;
    transition: color 0.2s linear;
}

.modal-content .autocomplete-content {
    font-size: 0.7em;
}

#blacklist {
    top: -10px!important;
    left: -10px;
}

input:not([type]):disabled+label, input:not([type])[readonly="readonly"]+label, input[type=text]:disabled+label, input[type=text][readonly="readonly"]+label, input[type=password]:disabled+label, input[type=password][readonly="readonly"]+label, input[type=email]:disabled+label, input[type=email][readonly="readonly"]+label, input[type=url]:disabled+label, input[type=url][readonly="readonly"]+label, input[type=time]:disabled+label, input[type=time][readonly="readonly"]+label, input[type=date]:disabled+label, input[type=date][readonly="readonly"]+label, input[type=datetime]:disabled+label, input[type=datetime][readonly="readonly"]+label, input[type=datetime-local]:disabled+label, input[type=datetime-local][readonly="readonly"]+label, input[type=tel]:disabled+label, input[type=tel][readonly="readonly"]+label, input[type=number]:disabled+label, input[type=number][readonly="readonly"]+label, input[type=search]:disabled+label, input[type=search][readonly="readonly"]+label, textarea.materialize-textarea:disabled+label, textarea.materialize-textarea[readonly="readonly"]+label {
    color: rgb(97, 97, 97)!important;
}

span.condition-type {
    font-weight: bold;
}

.condition-container {
}

span.condition {
}

#conditions {
    height: 142px;
    max-height: 142px;
    overflow-y: scroll;
}

.condition-group {
    /* margin-bottom: -10px; */
}

.condition-index {
    color: rgb(245, 151, 27);
}

.condition-parameter, .affix-weight {
    color: #f3c200;
    font-weight: normal;
    margin-left: 10px;
}

.affix-form .caret {
    top: -21px!important;
}

.reason {
    color: #0cff00;
    text-shadow: 0 0 5px #27ff00;
}

.badge-AND {
    background: rgba(0, 255, 0, 0.15);
    border: 1px solid green;
}

.badge-NOT {
    background: rgba(109, 0, 0, 0.5);
    border: 1px solid #6d0000;
}

.badge-IF {
    background: rgba(109, 91, 0, 0.5);
    border: 1px solid #6d5b00;
}

.badge-SUM {
    background: rgba(128, 0, 111, 0.5);
    border: 1px solid #80006f;
}

.badge-WEIGHT {
    background: rgba(0, 121, 150, 0.5);
    border: 1px solid rgb(0, 121, 150);
}

.badge-COUNT {
    background: rgba(73, 0, 150, 0.5);
    border: 1px solid #490096;
}

.dark-form {
    background-color: #171717 !important;
}