html, body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 15px;
    width: 100%;
    height: 100%;
    position: relative;
    background: #202020 url(../images/noise.png) repeat scroll 0 0;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

div,
span {
    box-sizing: content-box;
}

a,
a:visited,
a:hover {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: darkblue;
    text-decoration: underline;
}

h2 {
    margin: 5px 0 5px 0;
    font-size: 20px;
}

h3 {
    display: inline;
    font-size: 0.8em;
}

.offscreen {
    position: absolute;
    left:-10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.monospace {
    font-family: "Lucida Console", Monaco, monospace;
}

#title_screen {
    /*keep in sync with main_window*/
    min-width: 1260px;
    min-height: 759px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    /*keep in sync with main_window*/

    z-index: 400; /* below modal z-index for do=login */
    background: #202020 url(../images/noise.png) repeat scroll 0 0;
    display: table;
}

#title_screen div {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

progress {
    border: 1px solid #6b6b6b;
    background: #e0e0e0; /* background color */
    color: #242fff; /* foreground color */
}

progress::-webkit-progress-bar {
    background: #e0e0e0; /* background colour */
}

progress::-moz-progress-bar {
    background: #242fff; /* foreground color */
}

progress::-webkit-progress-value {
    background: #242fff; /* foreground color */
}

.hidden {
    display: none !important;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clickable {
    cursor: pointer;
    cursor: hand;
    cursor: -o-pointer;
    cursor: -moz-pointer;
    cursor: -webkit-pointer;
}

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#main_window {
    min-width: 1260px;
    min-height: 759px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

#page_window {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

#footer {
    float: right;
}

#footer a,
#footer a:visited,
#footer a:hover {
    font-size: 10px;
    color: #D0D0D0;
    font-weight: normal;
}

#footer a:hover {
    text-decoration: underline;
}

#moneyMaker {
    width: 100%;
    text-align: center;
    height: 104px;
}

#moneyMaker a,
#moneyMaker a:visited {
    font-size: 10px;
    color: #D0D0D0;
}

.static_dialog {
    position: relative;
    margin: 100px auto 50px auto;
    text-align: left;
}

/**********************************/
/* ----- Character Creation ----- */

p.name {
    color: #6da6d1;
}

.name > input {
    width: 44%;
}

#selections {
    height: 150px;
    width: 100%;
    border-collapse: collapse;
}

#selections caption {
    text-align: left;
    color: #6da6d1;
}

fieldset.radiogroup {
    width: 97%;
    margin: 0;
    padding: 0;
}

fieldset.radiogroup legend {
    margin: 0 0 0 20px;
    font-weight: bold;
    color: black;
}

ul.radio {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.radio li input {
    display: none;
}

ul.radio li input + label {
    display: block;
    padding-left: 20px;
    background-color: #ffffff;
    color: #6da6d1;
}

ul.radio li input + label:hover {
    background-color: #ffffff;
    color: black;
}

ul.radio li input[type="radio"]:checked + label {
    background-color: #6da6d1;
    color: black;
}

.help {
    cursor: help;
}

#error {
    color: #b80000;
}

#randomize {
    margin-left: 4px;
}

/****************************/
/* ----- Click Events ----- */

.clickevent {
    position: absolute;
    z-index: 30000;
}

.event_firefly {
    background-image: url(../images/events/firefly.png);
    width: 263px;
    height: 150px;
    right: 100%;
    bottom: 100%;
}

.event_fish {
    background-image: url(../images/events/fish.gif);
    width: 170px;
    height: 105px;
    left: 100%;
    bottom: 25%;
}

.event_fairy {
    background-image: url(../images/events/fairy.gif);
    width: 90px;
    height: 170px;
    left: 100%;
    top: 0;
}

.event_bandit {
    background-image: url(../images/events/bandit.png);
    width: 215px;
    height: 200px;
    left: 100%;
    /*top: is calculated based on gold offset*/
}

.event_stealMoney {
    /*top: is calculated based on gold offset*/
    left: 10px;
    color: white;
    font-weight: bold;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 1px 1px 1px #000, 1px 1px 1px #000
}

/**************************/
/* ----- Info Panel ----- */

#character, #stats, #skills {
    margin-bottom: 15px;
}

#info_panel {
    float: left;
    color: white;
    width: 196px;
    padding: 4px;
}

#info_panel h2 {
    color: #6da6d1;
    text-transform: uppercase;
}

#party, #stats, #skills, #resources {
    width: 100%;
}

#party, #stats {
    margin-bottom: 15px;
}

#party .level_detail {
    top: 14px;
    color: white;
    opacity: 0;
    font-size: 12px;
    position: absolute;
    text-align: center;
    width: 190px;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 3px #000;
}

#party .level_detail:hover {
    opacity: 1;
}

#party .party_member {
    display: none;
    margin-bottom: 10px;
    position: relative;
}

#party .party_class_desc,
#party .party_extra {
    display: none;
    font-size: 12px;
}

#party .party_extra a,
#party .party_extra a:visited,
#party .party_extra a:hover {
    color: #6da6d1;
    text-decoration: none;
}

#party progress {
    width: 190px;
    height: 4px;
    border: 1px solid #575757;
    border-radius: 2px;
    background: #868686;
}

#party progress::-webkit-progress-bar {
    background: #868686; /* background colour */
}

#party progress.expendable {
    color: red;
}

#party progress.expendable::-moz-progress-bar {
    background: red; /* foreground color */
}

#party progress.expendable::-webkit-progress-value {
    background: red; /* foreground color */
}

#stats table {
    width: 100%;
    text-transform: lowercase;
}

#stats table tr td.value {
    text-align: center;
    width: 35%;
    white-space: nowrap;
}

#stats table tr td.levelup {
    text-align: center;
    width: 42px;
    color: #5fff00;
}

.stats_button {
    -moz-box-shadow: inset 0px 1px 0px 0px #9acc85;
    -webkit-box-shadow: inset 0px 1px 0px 0px #9acc85;
    box-shadow: inset 0px 1px 0px 0px #9acc85;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5eff00), color-stop(1, #68a54b));
    background: -moz-linear-gradient(top, #5eff00 5%, #68a54b 100%);
    background: -webkit-linear-gradient(top, #5eff00 5%, #68a54b 100%);
    background: -o-linear-gradient(top, #5eff00 5%, #68a54b 100%);
    background: -ms-linear-gradient(top, #5eff00 5%, #68a54b 100%);
    background: linear-gradient(to bottom, #5eff00 5%, #68a54b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5eff00', endColorstr='#68a54b', GradientType=0);
    background-color: #5eff00;
    border: 1px solid #3b6e22;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    padding: 0px 4px;
    text-decoration: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.stats_button:active {
    position: relative;
    top: 1px;
}

#stats table tr td.levelup span {
    display: none;
}

#character {
    position: relative;
}

#stats_fatigue_val {
    color: #008800;
}

#stats_char_desc {
    font-size: 10px;
}

.stats_change {
    text-align: center;
    position: relative;
}

.stats_change span {
    white-space: nowrap;
    top: 1px;
}

#stats_points {
    color: white;
    /*background-color: #5fff00;*/
    text-align: center;
    display: none;
    text-shadow: 0 0 4px #000, 1px 1px 2px #000;
    border-radius: 4px;
    padding-bottom: 2px;

    animation: blink_background_green 1s ease-in-out 0s infinite normal;
    -webkit-animation: blink_background_green 1s ease-in-out 0s infinite normal;
}

#skills table {
    width: 100%;
    border-collapse: collapse;
    text-transform: lowercase;
}

#skills table tr {
    width: 100%;
}

#skills table tr td.value {
    text-align: center;
    width: 25%;
}

#skills .highlight {
    background-color: inherit;
    animation: highlight 4s linear 0s 1 normal;
    -webkit-animation: highlight 4s linear 0s 1 normal;
}

#resources table {
    width: 100%;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
}

#resources table .resource {
    width: 24px;
}

/*************************/
/* ----- Main Area ----- */

#display_wrap {
    background-color: white;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    min-width: 820px;
    min-height: 742px;

    height: -moz-calc(100% - 104px);
    height: -webkit-calc(100% - 104px);
    height: -o-calc(100% - 104px);
    height: calc(100% - 104px);
}

#navbar {
    background-color: #808080;
    border-bottom: 1px solid black;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px;
    font-size: 12px;
}

#navbar #tabs {
    float: left;
}

#speedbar {
    position: absolute;
    right: 110px;
    height: 40px;
}

#navbar .tabs {
    margin: 0;
    height: 36px;
    padding: 4px 10px 0 0;
    overflow: hidden;
    color: black;
}

#navbar .tabs span {
    background-color: #f0f0f0;
    border-right: 1px solid black;
    border-top: 1px solid black;
    float: left;
    width: 155px;
    height: 35px;
    font-size: 22px;
    text-align: center;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-top: 4px;
    padding-top: 3px;
    cursor: pointer;
    cursor: hand;
    box-shadow: 4px 4px 5px #494949, inset 0 3px 4px #c9c9c9;
    -webkit-box-shadow: 4px 4px 5px #494949, inset 0 3px 4px #c9c9c9;

    transition: margin-top 200ms, background-color 200ms;
    -webkit-transition: margin-top 200ms, background-color 200ms; /* Chrome */
}

#navbar .tabs span:hover {
    background-color: white;
    margin-top: 0;
}

#navbar .tabs span.active_tab {
    background-color: white;
    cursor: default;
    margin-top: 0;
}

#navbar .tabs span.highlight {
    animation: blink_background_grey_green 1s ease-in-out 0s infinite normal;
    -webkit-animation: blink_background_grey_green 1s ease-in-out 0s infinite normal;
}

#navbar .menu {
    background-color: white;
    border-left: 1px solid black;
    float: right;
}

#navbar #time {
    float: right;
    text-align: center;
    width: 90px;
    margin: 4px 0 0 0;
    color: white;
    text-shadow: 1px 1px 2px #000;
}

#navbar #resources {
    text-align: center;
    float: right;
    color: white;
    text-shadow: 1px 1px 2px #000;
    margin: 0 25px 0 0;
}

#navbar #resources table {
    border-collapse: collapse;
    padding: 0;
    margin: 0;
}

#navbar .resource {
    margin-left: 15px;
    display: inline-block;
}

#navbar .resource img {
    float: left;
    margin: 1px 4px 0 0;
}

#display_container {
    height: -moz-calc(100% - 40px);
    height: -webkit-calc(100% - 40px);
    height: -o-calc(100% - 40px);
    height: calc(100% - 40px);
}

#expand_tab {
    display: none;
}

#action_tab_display,
#expand_tab_display,
#menu_tab_display,
#faq_tab_display {
    height: 100%;
    overflow: hidden;
}

.main_panel {
    height: 100%;
    overflow: hidden;
}

.shadow_box {
    background-color: #f9f9f9;
    -webkit-box-shadow: inset 0 0 24px #a4a4a4;
    -moz-box-shadow: inset 0 0 24px #a4a4a4;
    box-shadow: inset 0 0 24px #a4a4a4;
}

/**************************/
/* ----- Action Tab ----- */

#scroll_container_container_container {
    /* seriously, this is stupid */
    position: relative;
    height: -moz-calc(100% - 108px);
    height: -webkit-calc(100% - 108px);
    height: -o-calc(100% - 108px);
    height: calc(100% - 108px);
}

#scroll_container_container {
    height: 100%;
    width: 100%;
    position: relative;
    overflow-y: scroll;
}

#more_activity {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    color: white;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    padding: 4px 0;
    display: none;
}

#scroll_container {
    display: table;
    height: 100%;
    width: 100%;
}

#scroll_content {
    display: table-cell;
    vertical-align: bottom;
}

.display_elem {
    width: 100%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-collapse: collapse;
    display: none;
}

.display_elem:hover {
    background-color: #fdfdfd;
    border-top: 1px dotted #e8e8e8;
    border-bottom: 1px dotted #e8e8e8;
}

.display_elem .time {
    color: #999999;
    vertical-align: top;
    font-size: 12px;
    width: 60px;
    padding-top: 6px;
}

.display_elem table {
    width: 100%;
    border-collapse: collapse;
}

.display_elem .action {
    vertical-align: top;
    padding: 2px 0 2px 4px;
}

.display_elem .action .combat_summary {
    padding-left: 15px;
}

.display_elem .result {
    vertical-align: top;
    text-align: right;
    width: 128px;
    padding-right: 4px;
}

.display_elem .result span {
    padding-left: 10px;
    white-space: nowrap;
}

.status_normal {
}

.status_bad {
    background-color: #FFF0F0;
    border: 1px dotted #e56b70;
}

.status_fatigue {
    background-color: #fdffea;
    border: 1px dotted #e5e3bf;
}

.status_skillup {
    background-color: #EDFFF4;
    border: 1px dotted #42e54e;
}

.status_discovery {
    background-color: #EDFFF4;
    border: 1px dotted #42e54e;
}

.status_achievement {
    background-color: #f6ecff;
    border: 1px dotted #ff5ef8;
}

.combat_log {
    width: 670px;
}

.combat_log > .combat_stats {
    float: left;
    width: 100px;
    font-size: 12px;
}

.combat_log > .combat_events {
    float: left;
    width: 430px;
    max-height: 400px;
    margin: 0 20px;
    overflow-y: auto;
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    box-sizing: border-box;
}

.combat_log > .combat_events table {
    width: 100%;
    text-align: center;
}

.combat_log > .combat_events table tr.header {
    font-size: 12px;
}

.combat_log .player_hit {
    color: #002b6e;
}

.combat_log .monster_hit {
    color: #990024;
}

.combat_log hr {
    margin: 0;
}

/***************************/
/* ----- Equipment ----- */

#equipment {
    height: 100px;
    overflow-y: auto;
    line-height: 14px;
    font-size: 14px;
    border-top: 1px solid black;
    padding-top: 6px;
}

#equipment table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    table-layout: fixed;
}

.equip_subbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
}

.equip {
    width: 48px;
    height: 48px;
    margin: 0 auto 2px auto;
    position: relative;
    -webkit-box-shadow: 0 2px 4px #000000;
    -moz-box-shadow: 0 2px 4px #000000;
    box-shadow: 0 2px 4px #000000;
}

.equip_head {
    background-image: url(../images/equipment/head.png);
}

.equip_chest {
    background-image: url(../images/equipment/chest.png);
}

.equip_legs {
    background-image: url(../images/equipment/legs.png);
}

.equip_hands {
    background-image: url(../images/equipment/hands.png);
}

.equip_weapon {
    background-image: url(../images/equipment/weapon.png);
}

.equip_offhand {
    background-image: url(../images/equipment/offhand.png);
}

.equip_poor {
    background-image: url(../images/equipment/poor.png);
}

.equip_common {
    background-image: url(../images/equipment/common.png);
}

.equip_uncommon {
    background-image: url(../images/equipment/uncommon.png);
}

.equip_rare {
    background-image: url(../images/equipment/rare.png);
}

.equip_epic {
    background-image: url(../images/equipment/epic.png);
}

.equip_legendary {
    background-image: url(../images/equipment/legendary.png);
}

.equip_artifact {
    background-image: url(../images/equipment/artifact.png);
}

.powerbox {
    background-color: black;
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: white;
    font-size: 11px;
    line-height: 10px;
    padding-left: 1px;
    pointer-events: none;
}

/***************************/
/* ----- Slider Bars ----- */

#controls {
    float: left;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 310px;
    height: 100%;
    border-left: 1px solid black;
    padding: 0 5px;
}

#sliders {
    width: 100%;
    margin-bottom: 15px;
}

#sliders > #presets {
    padding-bottom: 10px;
}

#sliders > #presets > .preset {
    display: inline-block;
    background-color: #e0e0e0;
    border-radius: 5px;
    padding: 0 4px;
    margin-bottom: 5px;
    margin-right: 6px;
    box-shadow: 1px 2px 2px #494949, 0 2px 3px #c9c9c9 inset;
}

#sliders > #presets > .preset > a {
    color: black;
    font-size: 10px;
    white-space: nowrap;
}

#sliders > #presets > .preset:hover {
    font-weight: normal;
    background-color: #5fff00;
}

#sliders_list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#sliders_list::after {
    content: "\00a0";
    line-height: 10px;
}

#sliders_list .slider_blink .noUi-background {
    animation: blink_background_grey_green 1s linear 0s infinite normal;
    -webkit-animation: blink_background_grey_green 1s linear 0s infinite normal;
}

#sliders_list div.element {
    width: 100%;
    position: relative;
    margin-bottom: 4px;
    height: 42px;
}

#sliders_list div.element span.grabhandle {
    padding-left: 16px;
    margin-left: 2px;
    background-image: url(../images/ui/grabhandle.png);
    background-repeat: no-repeat;
    background-position: left center;

    cursor: grab;
    cursor: -o-grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

#sliders_list div.dragged {
    transition: box-shadow 400ms, margin-left 400ms, opacity 400ms;
    -webkit-transition: box-shadow 400ms, margin-left 400ms, opacity 400ms; /* Chrome    */

    background-color: white;
    margin-left: 2px;
    opacity: 0.75;
    box-shadow: 0 4px 8px #000000;
    -webkit-box-shadow: 0 4px 8px #000000;
}

#sliders_list div.sortable_placeholder {
    display: block !important;
    margin-bottom: 4px;
}

#sliders_list .element .slider {
    width: 250px;
    margin-top: 2px;
    height: 10px;
}

#sliders_list div.element div.lock {
    position: absolute;
    top: 20px;
    right: 0;
}

#sliders_list div.element div.lock input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    opacity: 0;

    cursor: pointer;
    cursor: hand;
    cursor: -o-pointer;
    cursor: -moz-pointer;
    cursor: -webkit-pointer;
}

#sliders_list div.element div.lock input[type=checkbox] + label {
    display: inline-block;
    margin-left: -16px;
    padding-left: 16px;
    background: url('../images/ui/game_icons.png') -63px -39px;
    line-height: 16px;
}

#sliders_list div.element div.lock input[type=checkbox]:checked + label {
    background: url('../images/ui/game_icons.png') -175px -18px;
}

.slidertip {
    width: 34px;
    text-align: center;
    font-size: 14px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif;
    position: relative;
    top: -3px;
}

/********************************/
/* ----- Adventure Points ----- */

#adventure_points {
    display: none;
    width: 100%;
    padding-bottom: 10px;
}

#adventure_points .container {
    width: 100%;
    position: relative;
}

#adventure_points .container progress {
    width: 100%;
    height: 18px;
    border: 1px solid #b4b4b4;
    border-radius: 5px;
    box-shadow: inset 0 2px 4px #b0b0b0;
    -webkit-box-shadow: inset 0 2px 4px #b0b0b0;
}

progress.dungeon {
    color: #a71a00; /* foreground color */
}

progress.dungeon::-webkit-progress-value {
    background: #a71a00; /* foreground color */
}

progress.dungeon::-moz-progress-bar {
    background: #a71a00; /* foreground color */
}

progress.lake {
    color: #000674; /* foreground color */
}

progress.lake::-webkit-progress-value {
    background: #000674; /* foreground color */
}

progress.lake::-moz-progress-bar {
    background: #000674; /* foreground color */
}

progress.forest {
    color: #007a29;
}

progress.forest::-webkit-progress-value {
    background: #007a29; /* foreground color */
}

progress.forest::-moz-progress-bar {
    background: #007a29; /* foreground color */
}

#adventure_points .container .title {
    font-size: 14px;
}

#adventure_points .container .tip {
    color: white;
    position: relative;
    text-align: center;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    top: -20px;
    width: 100%;
    opacity: 0;
    transition: opacity 250ms;
    -webkit-transition: opacity 250ms;
}

#adventure_points .container .tip:hover {
    opacity: 1;
}

#dungeons progress,
#dungeons .container .tip,
#lakes progress,
#lakes .container .tip,
#forests progress,
#forests .container .tip {
    display: none;
}

#dungeons .container .title,
#current_dungeon .container .title {
    color: #a71a00;
}

#lakes .container .title,
#current_lake .container .title {
    display: block;
    color: #000674;
}

#forests .container .title,
#current_forest .container .title {
    display: block;
    color: #007a29;
}

.container .title span.level {
    float: right;
    color: black;
    font-size: 14px;
    margin-left: -50px;
}

/****************************/
/* ----- Item Colours ----- */

.item_common {
    color: #4c4c4c;
}

.item_poor {
    color: #9d7d5d;
}

.item_uncommon {
    color: #17bc00;
}

.item_rare {
    color: #0070ff;
}

.item_epic {
    color: #a335ee;
}

.item_legendary {
    color: #ff8000;
}

.item_artifact {
    color: #e0006f;
}


/****************************/
/* ----- UI Tutorial ----- */

#ui_tutorial {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#ui_tutorial .black_blocker {
    background-color: rgba(0, 0, 0, 0.75);
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

#ui_tutorial .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: solid #5fff00 3px;
    animation: border_blink_green 1s ease-in-out 0s infinite normal;
    -webkit-animation: border_blink_green 1s ease-in-out 0s infinite normal;
}


/*******************/
/*  CSS Animations */

@keyframes highlight {
    10%, 30%, 50%, 70% {
        background-color: #1771ff;
    }
    0%, 20%, 40%, 100% {
        background-color: inherit;
    }
}

@-webkit-keyframes highlight {
    10%, 30%, 50% {
        background-color: #1771ff;
    }
    0%, 20%, 40%, 100% {
        background-color: inherit;
    }
}

@keyframes blink_background_grey_green {
    0%, 100% {
        background-color: #e0e0e0;
    }
    37% {
        background-color: #5fff00;
    }
}

@-webkit-keyframes blink_background_grey_green {
    0%, 100% {
        background-color: #e0e0e0;
    }
    37% {
        background-color: #5fff00;
    }
}

@keyframes blink_background_green {
    0%, 100% {
        background-color: transparent;
    }
    37% {
        background-color: #5fff00;
    }
}

@-webkit-keyframes blink_background_green {
    0%, 100% {
        background-color: transparent;
    }
    37% {
        background-color: #5fff00;
    }
}

@keyframes border_blink_green {
    0%, 100% {
        border-color: transparent;
    }
    37% {
        border-color: #5fff00;
    }
}

@-webkit-keyframes border_blink_green {
    0%, 100% {
        border-color: transparent;
    }
    37% {
        border-color: #5fff00;
    }
}

@keyframes flameblower {
    0% {
        opacity: 0.5;
    }
    65% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

@-webkit-keyframes flameblower {
    0% {
        opacity: 0.5;
    }
    65% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

/****************************/
/*  Override Slider Bar CSS */

.noUi-horizontal {
    padding-right: 32px;
}

.noUi-connect {
    background-color: #ffa200;
}

.noUi-background {
    background-color: #e0e0e0;
    -webkit-box-shadow: inset 0 1px 4px #d0d0d0;
    box-shadow: inset 0 1px 4px #d0d0d0;
}

.noUi-horizontal .noUi-handle {
    left: -1px;
    top: -4px;
    height: 18px;
    cursor: grab;
    cursor: -o-grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.noUi-horizontal[disabled],
.noUi-horizontal[disabled] div.noUi-handle {
    cursor: no-drop;
}

.noUi-horizontal .noUi-active {
    cursor: grabbing;
    cursor: -o-grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.noUi-handle::after,
.noUi-handle::before {
    background: transparent;
}

.noUi-horizontal .noUi-origin {
    right: -32px;
}

.noUi-horizontal {
    cursor: pointer;
    cursor: hand;
    cursor: -o-pointer;
    cursor: -moz-pointer;
    cursor: -webkit-pointer;
}

/****************************/
/* Override for Drag Scroll */

.dragscroll {
    overflow: hidden;
    cursor: grab;
    cursor: -o-grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}