/******************************************************************************
 * Copyright © 2013-2016 The Nxt Core Developers.                             *
 * Copyright © 2016-2022 Jelurida IP B.V.                                     *
 *                                                                            *
 * See the LICENSE.txt file at the top-level directory of this distribution   *
 * for licensing information.                                                 *
 *                                                                            *
 * Unless otherwise agreed in a custom licensing agreement with Jelurida B.V.,*
 * no part of this software, including this file, may be copied, modified,    *
 * propagated, or distributed except according to the terms contained in the  *
 * LICENSE.txt file.                                                          *
 *                                                                            *
 * Removal or modification of this copyright notice is prohibited.            *
 *                                                                            *
 ******************************************************************************/

/* Bootstrap override section */
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  padding-left: 10px;
  padding-right: 10px;
}

.row {
  margin-right: -10px;
  margin-left: -10px;
}

.bootstrap-growl-top-right {
  box-shadow: 0px 2px 10px rgba(50, 50, 50, 0.5);
}

.btn-group.colors .color {
  display: inline-block;
  margin-right: 5px;
  margin-top: 3px;
  vertical-align: text-top;
  width: 10px;
  height: 10px;
}

.input-group-btn .btn.focus {
  background-color: #fff;
  color: #666;
  border: none !important;
}

.form-control:placeholder-shown {
  text-transform: none !important;
}

/*!
 *   AdminLTE v1.0
 *   Author: AlmsaeedStudio.com
 *   License: Please visit http://wrapbootstrap.com for information about
 *            this theme's license
!*/
/*
    Core: General style
----------------------------
*/
html,
body {
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  background: #f9f9f9;
  color: black !important;
}

/* preload images or they will flicker */
body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url("../img/nxt-load-progress-logo-circle.png");
}

html.lockscreen,
html.lockscreen body {
  height: 100%;
  overflow-x: auto;
}

a {
  color: #3c8dbc;
}

a:hover,
a:active,
a:focus {
  outline: none;
  text-decoration: none;
  color: #72afd2;
}

/* Layouts */
.wrapper {
  height: calc(100vh - 51px);
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* Header */
body > .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* Define 2 column template */
.right-side,
.left-side {
  min-height: 100%;
  display: block;
}

/*right side - contins main content*/
.right-side {
  background-color: #f9f9f9;
  flex: 10;
  min-width: 0;
}

/*left side - contains sidebar*/
.left-side {
  overflow-y: auto;
  min-width: 300px;
  max-width: 300px;
  height: 100%;
  min-height: inherit !important;
  flex: 1;
  background: #f4f4f4;
  box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);
}

#dummyCheckbox {
  position: absolute;
  bottom: 0;
}

/*noinspection CssNoGenericFontName*/
#notification_menu::after {
  font-family: "Font Awesome 5 Pro";
  font-size: 50px;
  content: "\f0f3";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(35deg);
  opacity: 0.2;
}

/*
    By default the layout is not fixed but if you add the class .fixed to the body element
    the sidebar and the navbar will automatically become positioned fixed
*/
body.fixed > .header,
body.fixed .navbar {
  position: fixed;
}

body.fixed > .header {
  top: 0;
  right: 0;
  left: 0;
}

#testnet_warning.testnet-collapse[style*="display: block;"] ~ .header {
    top: 12px;
}

body.fixed .navbar {
  left: 0;
  right: 0;
}

body.fixed .wrapper {
  margin-top: 50px;
}

/* Content */
.content {
  padding: 20px; /*wesley*/
  background: #f9f9f9;
}

.content.content-flex {
  display: flex;
  flex-direction: row;
  padding: 5px 0 0 0;
  height: calc(100% - 55px);
}

.content.content-flex .content-splitter-sidebar {
  min-width: 200px;
  overflow-x: hidden;
  flex: 1;
}

.content.content-flex .content-splitter-right {
  flex: 10;
  min-width: 0;
}

/* Utility */
/* H1 - H6 font */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: sans-serif;
}

/* Page Header */
.page-header {
  margin: 10px 0 20px 0;
  font-size: 22px;
}

.page-header > small {
  color: #666;
  display: block;
  margin-top: 5px;
}

/* All images should be responsive */
img {
  max-width: 100% !important;
}

.small-box {
  color: #f9f9f9;
  background: #217ba5; /* Old browsers */
  background: linear-gradient(to right, #217ba5 0%, #56b3d8 100%); /* W3C */
}

/*Hide elements by display none only*/
.hide {
  display: none !important;
}

/* Remove padding */
.no-padding {
  padding: 0px !important;
}

.table > tbody > tr > td {
  background-color: #fff;
}

/* Change the color of the striped tables */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f3f4f5;
}

/* .text-center in tables */
table.text-center td,
table.text-center th {
  text-align: center;
}

/*
    Components: navbar, logo and content header
-------------------------------------------------
*/
body > .header {
  position: relative;
  max-height: 100px;
  z-index: 1030;
}

body > .header .navbar {
  height: 50px;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-left: 300px;
}

body > .header .navbar .sidebar-toggle {
  float: left;
  padding: 9px 5px;
  margin: 8px 0 8px 5px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0 !important;
}

.header .navbar .sidebar-toggle:hover .icon-bar {
  background: #f6f6f6;
}

body > .header .navbar .sidebar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 4px;
  background: #acd0e5;
}

body > .header .navbar .sidebar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

body > .header .logo {
  float: left;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  padding: 0 10px;
  width: 300px;
  height: 50px;
  display: block;
  color: #f9f9f9;
  background: #005f82; /* Old browsers */
  background: linear-gradient(to bottom, #005f82 0%, #004a66 100%); /* W3C */
}

body > .header .logo:hover {
  background: #357ca5;
}

.right-side > .page > .content-header {
  position: relative;
  padding: 15px 20px 10px 20px;
  background: #fbfbfb;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.right-side > .page > .content-header > h1,
.right-side > .page > .content-header > .title-wrapper > h1 {
  padding-left: 0;
  margin: 0;
  font-size: 24px;
}

#blocks_page_type > .btn.active {
  background-color: lightgray;
}

#currencies_search,
#alias_search {
  margin: 0;
}

.header-button-container {
  padding-top: 9px;
}

.header-button-container > .btn-group {
  float: right;
  display: flex;
}

@media screen and (max-width: 767px) {
  #currencies_search,
  #alias_search {
    margin-top: 10px;
  }

  .navbar .navbar-nav > li {
    float: left;
  }

  .navbar-nav {
    float: left;
  }

  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 16px;
  }

  .navbar .navbar-right {
    float: right;
  }
}

/*
    Component: Sidebar
--------------------------
*/
.sidebar a {
  color: #555555;
}

.sidebar a:hover {
  text-decoration: none;
}

.sidebar-form {
  border-radius: 2px;
  border: 1px solid #dbdbdb;
  margin: 10px 10px;
}

.sidebar-form input[type="text"],
.sidebar-form .btn {
  box-shadow: none;
  background-color: #fafafa;
  border: 1px solid #fafafa;
  height: 34px;
}

.sidebar-form .btn {
  color: #999;
  border-radius: 0 2px 2px 0;
}

.sidebar-form input[type="text"] {
  color: #666;
  border-radius: 2px 0 0 2px;
}

.sidebar-form input[type="text"]:focus,
.sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff;
  color: #666;
}

.sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff;
}

.sidebar-form input:focus,
.sidebar-form .btn:focus {
  border-color: transparent !important;
}

.sidebar .sidebar-menu {
  list-style: none;
  margin: 0 0 50px 0;
  padding: 0;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #dbdbdb;
}

.sidebar .sidebar-menu > li {
  margin: 0;
  padding: 0;
}

.sidebar .sidebar-menu > li > a {
  margin-right: 1px;
  padding: 11px 5px 11px 15px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #dbdbdb;
  display: block;
}

.sidebar > .sidebar-menu > li > a:hover,
.sidebar > .sidebar-menu > li.active > a {
  color: #222;
  background: #f9f9f9;
}

.sidebar .sidebar-menu > li > a > .fa,
.sidebar .sidebar-menu > li > a > .far,
.sidebar .sidebar-menu > li > a > .glyphicon,
.sidebar .sidebar-menu > li > a > .ion {
  width: 20px;
}

.sidebar .sidebar-menu .treeview-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0 1px;
  background: #f9f9f9;
}

.sidebar .sidebar-menu .treeview-menu > li {
  margin: 0;
}

.sidebar .sidebar-menu .treeview-menu > li > a,
.sidebar .sidebar-menu .treeview-menu > li > .sm_sub_header {
  padding: 5px 5px 5px 15px;
  display: block;
  font-size: 14px;
  margin: 0px 0px;
  color: #777;
}

.sidebar .sidebar-menu .treeview-menu > li.active > a,
.sidebar .sidebar-menu .treeview-menu > li > a:hover {
  color: #111;
}

.sidebar .sidebar-menu .treeview-menu > li > a > .fa,
.sidebar .sidebar-menu .treeview-menu > li > a > .far,
.sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon,
.sidebar .sidebar-menu .treeview-menu > li > a > .ion {
  width: 20px;
}

.user-panel {
  padding: 10px 0;
}

.user-panel:before,
.user-panel:after {
  display: table;
  content: " ";
}

.user-panel:after {
  clear: both;
}

.user-panel > .info {
  font-size: 14px;
  line-height: 1;
  color: #555555;
}

.user-panel > .info > .info > .row {
  margin: 0;
}

.user-panel .account_info {
  padding-right: 0;
}

.user-panel .account_id,
.user-panel .account_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-panel .account_balance > .label-success {
  color: #ffffff;
}

.user-panel #sidebar_account_id {
  display: block;
  padding: 0;
  line-height: 1.5;
  color: #555555;
  font-weight: 500;
}

.user-panel #sidebar_account_link {
  padding-left: 20px;
}

.user-panel #sidebar_account_link > a {
  display: block;
  padding: 5px 10px;
  font-size: 14px;
}

.user-panel #sidebar_account_link > a > .regular-view {
  display: initial !important;
}

.user-panel #sidebar_account_link > a > .mobile-view {
  display: none !important;
}

.user-panel #account_id_dropdown {
  padding-top: 10px;
}

.user-panel #account_id_dropdown > ul {
  margin: 0 10px;
}

.user-panel .input-group {
  padding: 15px 10px 10px 10px;
}

.user-panel .input-group.next-block {
  padding-left: 20px;
}

.user-panel #chain_dropdown {
  padding-top: 10px;
  padding-left: 20px;
  display: flex;
}

.user-panel #chain_dropdown > ul {
  margin: 0 10px;
  right: 0;
  left: auto;
}

.user-panel .network_status {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10px 0;
}

/*
    Dropdown menus
----------------------------
*/
/*Dropdowns in general*/
.dropdown-menu {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  z-index: 2300;
}

.dropdown-menu > li > a > .glyphicon,
.dropdown-menu > li > a > .fa,
.dropdown-menu > li > a > .far,
.dropdown-menu > li > a > .ion {
  margin-right: 10px;
}

.navbar-static-top .dropdown-menu {
  max-height: calc(100vh - 50px);
  overflow-y: auto;
}

/*Drodown in navbars*/
.navbar .dropdown-menu > li > a {
  color: #444444;
}

.dropdown-menu > li > a:hover {
  background-color: #3c8dbc;
  color: #f9f9f9;
}

.dropdown-menu .remove-account {
  padding-left: 5px;
}

/*
   All form elements including input, select, textarea etc.
-----------------------------------------------------------------
*/
.form-control {
  border-radius: 0px !important;
  box-shadow: none;
}

.form-control:focus {
  border-color: #3c8dbc !important;
  box-shadow: none;
}

/* Input group */
.input-group .input-group-addon {
  border-radius: 0;
  background-color: #f4f4f4;
}

/*
    Compenent: Progress bars
--------------------------------
*/
/* size variation */
.progress.sm {
  height: 10px;
}

.progress.xs {
  height: 7px;
}

/* Vertical bars */
.progress.vertical {
  position: relative;
  width: 30px;
  height: 200px;
  display: inline-block;
  margin-right: 10px;
}

.progress.vertical > .progress-bar {
  width: 100% !important;
  position: absolute;
  bottom: 0;
}

.progress.vertical.sm {
  width: 20px;
}

.progress.vertical.xs {
  width: 10px;
}

/* Remove margins from progress bars when put in a table */
.table tr > td .progress {
  margin: 0;
}

.confirmations-bar-ul {
  margin: auto;
  height: 10px;
  width: 144px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  list-style: none;
  padding: 0;
}

.confirmations-bar-li {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
}

.confirmations-bar-li-bundled {
  background: #56b3d8;
  opacity: 1;
  margin-right: 2px;
}

.confirmations-bar-li-not-bundled {
  background: #56b3d8;
  opacity: 0.2;
  margin-right: 2px;
}

.confirmations-bar-li-confirmed {
  background: #217ba5;
  opacity: 1;
  margin-right: 2px;
}

.confirmations-bar-li-unconfirmed {
  background: #217ba5;
  opacity: 0.2;
  margin-right: 2px;
}

.confirmations-bar-li-confirmations-set {
  background: #001f3f;
  opacity: 1;
  margin-right: 1px;
}

.confirmations-bar-li-confirmations-wait {
  background: #001f3f;
  opacity: 0.2;
  margin-right: 1px;
}

.confirmations-pulse {
  animation: confirmations 1s alternate infinite;
}

@keyframes confirmations {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

/*
    Component: Small boxes
*/
.small-box {
  position: relative;
  display: block;
  border-radius: 2px;
  margin-bottom: 15px;
}

.small-box > .inner {
  padding: 10px;
  min-height: 101.8px;
}

.small-box > .small-box-footer {
  position: relative;
  text-align: center;
  padding: 3px 0;
  color: #fff;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  z-index: 10;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.small-box > .small-box-footer:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
}

.small-box h3 {
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
}

#dashboard_blocks_div .small-box h3 {
  white-space: normal;
  font-size: 23px;
}

.small-box p {
  font-size: 14px;
  margin-bottom: 0px;
}

.small-box p > small {
  display: block;
  color: #f9f9f9;
  font-size: 13px;
  margin-top: 5px;
}

.small-box h3,
.small-box p {
  z-index: 5;
}

.small-box .icon {
  position: absolute;
  top: auto;
  bottom: 5px;
  right: 5px;
  z-index: 0;
  font-size: 90px;
  color: rgba(0, 0, 0, 0.15);
}

.small-box .icon-smaller {
  position: absolute;
  bottom: -7px;
  right: 5px;
  z-index: 0;
  font-size: 75px;
  color: rgba(0, 0, 0, 0.15);
}

.small-box > .inner-smaller {
  padding-bottom: 0 !important;
}

.small-box:hover {
  text-decoration: none;
  color: #f9f9f9;
}

.small-box:hover .icon {
  animation-name: tansformAnimation;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/** WESLEY **/
.small-box:hover .icon-smaller {
  animation-name: transformAnimationSmall;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes tansformAnimation {
  from {
    font-size: 90px;
  }
  to {
    font-size: 96px;
  }
}

@keyframes transformAnimationSmall {
  from {
    font-size: 75px;
  }
  to {
    font-size: 81px;
  }
}

/*
    component: Boxes
-------------------------
*/
.box {
  position: relative;
  background: #ffffff;
  border-top: 2px solid #c1c1c1;
  margin-bottom: 20px;
  border-radius: 3px;
  width: 100%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.box.box-primary {
  border-top-color: #3c8dbc;
}

.box.box-info {
  border-top-color: #00c0ef;
}

.box.box-danger {
  border-top-color: #f56954;
}

.box.box-warning {
  border-top-color: #f39c12;
}

.box.box-success {
  border-top-color: #00a65a;
}

.box.height-control .box-body {
  max-height: 300px;
  overflow: auto;
}

.box .box-header {
  position: relative;
  color: #444;
}

.box .box-header:before,
.box .box-header:after {
  display: table;
  content: " ";
}

.box .box-header:after {
  clear: both;
}

.box .box-header .box-title {
  padding: 10px 0px 10px 10px;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  float: left;
  cursor: default;
}

.box .box-header a {
  color: #444;
}

.box .box-header > .box-tools {
  padding: 5px 10px 5px 5px;
}

.box .box-body {
  padding: 10px;
  border-radius: 0 0 3px 3px;
}

.box .box-footer {
  border-top: 1px solid #f4f4f4;
  border-radius: 0 0 3px 3px;
  padding: 10px;
  background-color: #ffffff;
}

.box.box-solid {
  border-top: 0px;
}

.box.box-solid > .box-header {
  padding-bottom: 0px !important;
}

.box.box-solid > .box-header .btn.btn-default {
  background: transparent;
}

.box.box-solid.box-primary > .box-header {
  color: #fff;
  background: #3c8dbc;
}

.box.box-solid.box-primary > .box-header a {
  color: #444;
}

.box.box-solid.box-info > .box-header {
  color: #fff;
  background: #00c0ef;
}

.box.box-solid.box-info > .box-header a {
  color: #444;
}

.box.box-solid.box-danger > .box-header {
  color: #fff;
  background: #f56954;
}

.box.box-solid.box-danger > .box-header a {
  color: #444;
}

.box.box-solid.box-warning > .box-header {
  color: #fff;
  background: #f39c12;
}

.box.box-solid.box-warning > .box-header a {
  color: #444;
}

.box.box-solid.box-success > .box-header {
  color: #fff;
  background: #00a65a;
}

.box.box-solid.box-success > .box-header a {
  color: #444;
}

.box.box-solid > .box-header > .box-tools > .btn {
  border: 0;
  box-shadow: none;
}

.box.box-solid.collapsed-box .box-header {
  border-radius: 3px;
}

.box.box-solid[class*="bg"] > .box-header {
  color: #fff;
}

.loading-img {
  z-index: 1020;
  background: transparent url("../img/ajax-loader.gif") 50% 50% no-repeat;
}

/*
    Component: Buttons
-------------------------
*/
.btn {
  font-weight: 500;
  border-radius: 3px;
  border: 1px solid transparent;
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09);
}

.btn.btn-default {
  background-color: #fafafa;
  color: #666;
  border-color: #ddd;
}

.btn.btn-default:hover,
.btn.btn-default:active,
.btn.btn-default.hover {
  background-color: #f4f4f4 !important;
}

.btn.btn-primary {
  background-color: #3c8dbc;
  border-color: #367fa9;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.hover {
  background-color: #367fa9;
}

.btn.btn-success {
  background-color: #00a65a;
  border-color: #008d4c;
}

.btn.btn-success:hover,
.btn.btn-success:active,
.btn.btn-success.hover {
  background-color: #008d4c;
}

.btn.btn-info {
  background-color: #00c0ef;
  border-color: #00acd6;
}

.btn.btn-info:hover,
.btn.btn-info:active,
.btn.btn-info.hover {
  background-color: #00acd6;
}

.btn.btn-danger {
  background-color: #f56954;
  border-color: #f4543c;
}

.btn.btn-danger:hover,
.btn.btn-danger:active,
.btn.btn-danger.hover {
  background-color: #f4543c;
}

.btn.btn-sm {
  font-size: 12px;
}

.btn.btn-lg {
  padding: 10px 16px;
}

.btn.btn-block {
  font-size: 15px;
  padding: 10px;
}

.btn.btn-block.btn-sm {
  font-size: 13px;
  padding: 7px;
}

.btn.btn-flat {
  border-radius: 0;
  box-shadow: none;
  border-width: 1px;
}

.btn:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn:focus {
  border-color: black;
  outline: none;
}

.btn[disabled]:active {
  pointer-events: none;
}

/*
    Component: callout
------------------------
*/
.callout {
  margin: 0 0 20px 0;
  padding: 15px 30px 15px 15px;
  border-left: 5px solid #eee;
}

.callout h4 {
  margin-top: 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout code,
.callout .highlight {
  background-color: #fff;
}

.callout.callout-danger {
  background-color: #fcf2f2;
  border-color: #dfb5b4;
  word-break: normal;
}

.callout.callout-danger.technical-data {
  word-break: break-all;
}

.callout.callout-warning {
  background-color: #fefbed;
  border-color: #f1e7bc;
}

.callout.callout-info {
  background-color: #f0f7fd;
  border-color: #d0e3f0;
}

.callout.callout-danger h4 {
  color: #b94a48;
}

.callout.callout-warning h4 {
  color: #c09853;
}

.callout.callout-info h4 {
  color: #3a87ad;
}

.callout.callout-hardware {
  background-color: #f0fff0;
  border-color: #c0ffc0;
}

.callout-bottom {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/*
    Component: alert
------------------------
*/
.alert {
  padding-left: 30px;
  margin-left: 15px;
  position: relative;
}

.alert > .fa,
.alert > .far,
.alert > .glyphicon {
  position: absolute;
  left: -15px;
  top: -15px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  line-height: 35px;
  text-align: center;
  background: inherit;
  border: inherit;
}

/* wesley */
.alert-no-icon {
  margin-left: 0px !important;
  padding-left: 15px !important;
  word-wrap: break-word;
}

/*
    Component: Navs
	NAV TABS */
.nav-tabs > li > a {
  padding-right: 12px;
  padding-left: 12px;
}

/*
    Page: locked screen
*/
/* ADD THIS CLASS TO THE <HTML> TAG */
.lockscreen {
  min-height: 100% !important;
}

/* Remove the background from the body element */
.lockscreen > body {
  background: transparent;
  min-height: 100% !important;
}

/* navbar */
.navbar {
  background: #005f82;
  background: linear-gradient(to bottom, #005f82 0%, #004a66 100%);
  border: none;
}

.navbar .nav a {
  color: #fff;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:active,
.navbar .nav > li > a:focus,
.navbar .nav .open > a,
.navbar .nav .open > a:hover,
.navbar .nav .open > a:focus {
  background: #307095;
  color: #f6f6f6;
}

.navbar .navbar-right > .nav {
  margin-right: 10px;
}

.navbar-right > ul > li > a {
  transition: all 300ms linear;
}

.navbar-right > .nav > .dropdown > a {
  font-weight: bold;
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -12px;
}

.page {
  display: none;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.lockscreen header,
.lockscreen #page {
  display: none !important;
}

.direct-access-pages {
    display: none;
}

.lockscreen .direct-access-pages {
    display: initial;
}

.back-to-login {
    margin-top: 10px;
    margin-left: 20px;
    position: absolute;
    display: none;
}

.unlogged-access .back-to-login {
    display: initial;
}

.unlogged-access #lockscreen,
.unlogged-access .header,
.unlogged-access #sidebar,
.unlogged-access #blocks_page_type,
.unlogged-access #bundlers_page_type,
.unlogged-access #user_info_actions,
.unlogged-access #monitor_start_wrapper {
    display: none;
}

.list-group-item-heading {
  font-weight: bold;
  font-size: 14px;
}

a.list-group-item:hover {
  color: black;
}

a.list-group-item-header {
  background: #e6eef4;
  color: white;
  padding: 5px 15px;
}

a.list-group-item-header h4 {
  margin-bottom: 0;
}

a.list-group-item-header:hover {
  background: #e6eef4;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
  z-index: auto;
}

a.list-group-item h4 span {
  color: blue;
}

a.list-group-item.active h4 span {
  color: yellow;
}

.chat {
  margin: 0 auto;
  font-size: 14px;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  color: #000;
  padding: 0 20px 10px;
  box-sizing: border-box;
}

.chat strong {
  font-weight: 500;
}

.chat dt {
  margin-bottom: 1em;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.chat dd + dt {
  margin-top: 1.5em;
}

.chat dd + dd {
  margin-top: 0.5em;
}

.chat dd:after {
  clear: both;
  content: " ";
  display: block;
  height: 0.1em;
}

.chat p::before {
  box-sizing: content-box !important;
}

.chat p {
  -webkit-font-smoothing: subpixel-antialiased;
  float: left;
  z-index: 1;
  margin-right: 25%;
  padding: 0.45em 0.75em;
  background: rgb(230, 230, 230);
  line-height: 1.25;
  border-radius: 1em;
  clear: both;
  word-break: break-all;
}

.chat .to p {
  float: right;
  margin-right: 0;
  margin-left: 25%;
  background: rgb(0, 120, 255);
  color: #fff;
  clear: both;
}

.chat p + p {
  margin-top: 0.1em;
}

.chat p:last-child {
  position: relative;
}

.chat p:last-child::before {
  position: absolute;
  bottom: 0;
  left: -3em;
  z-index: -1;
  width: 3em;
  height: 2em;
  border-right: 1.5em solid rgb(230, 230, 230);
  border-bottom-right-radius: 50%;
  content: " ";
  clip: rect(1em, 4em, 3em, 2em);
}

.chat .to p:last-child::before {
  right: -3em;
  left: auto;
  border-right: none;
  border-left: 1.5em solid rgb(0, 120, 255);
  border-bottom-left-radius: 50%;
  clip: rect(1em, 2em, 2em, 0);
}

.chat .to.tentative p {
  font-style: italic !important;
  background-color: #cff4ff !important;
  color: #000 !important;
}

.chat .to.tentative p:last-child:before {
  border-left: 1.5em solid #cff4ff !important;
}

dd.to_decrypt p {
  background: #ffcc00 !important;
  color: black !important;
  cursor: pointer;
}

dd.from.to_decrypt p:last-child::before {
  border-right: 1.5em solid #ffcc00 !important;
}

dd.to.to_decrypt p:last-child::before {
  border-left: 1.5em solid #ffcc00 !important;
}

dd.decryption_failed p {
  background: red !important;
  color: white !important;
}

dd.decryption_failed p::before {
  border-right: 1.5em solid red !important;
}

.content-splitter-sidebar .list-group {
  margin-bottom: 0 !important;
}

.content-splitter-sidebar .list-group .list-group-item {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #ddd !important;
  margin-bottom: 0 !important;
}

.content-splitter-sidebar .list-group-item:first-child {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.content-splitter-sidebar .list-group-item:last-child {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.content-splitter-right-inner {
  padding: 20px;
}

#messages_page .content-splitter-right-inner {
  bottom: 155px;
  padding-bottom: 0;
}

#messages_page #inline_message_form {
  margin: 15px 15px 0 15px;
}

#shared_key_modal #shared_key_link {
  height: auto;
  word-break: break-all;
}

#publish_exchange_offer_modal .form-horizontal .form-group {
  margin-right: auto;
  margin-left: auto;
}

#dgs_refund_modal .add_message_encrypt_option {
    display: none !important; /* refund message is always private */
}

.content-splitter-right .box-solid {
  margin-bottom: 15px !important;
}

#asset_exchange_bid_orders_table tr:hover td,
#asset_exchange_ask_orders_table tr:hover td {
  background-color: #feffbc !important;
  cursor: pointer;
}

tr.your-order td {
  background-color: #fffaf0 !important;
}

div.tentative {
  font-style: italic !important;
  background-color: #c4e1ec !important;
  padding: 5px;
}

tr.tentative td {
  font-style: italic !important;
  background-color: #c4e1ec !important;
}

.tentative a {
  pointer-events: none;
  cursor: default;
  color: black;
}

tr.tentative-crossed td {
  position: relative;
}

tr.tentative-crossed td:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  border-bottom: 1px solid red;
  width: 100%;
}

tr.tentative-crossed td,
tr.tentative-crossed td a {
  color: red !important;
}

.data-loading-container {
  height: 200px;
  text-align: center;
}

.data-loading-container img {
  margin-top: 84px;
}

.data-loading-container,
.data-empty-container {
  display: none;
}

.data-container.data-loading .data-loading-container {
  display: block;
}

.data-container.data-empty .data-empty-container {
  display: block;
}

.data-container.data-empty table,
.data-container.data-loading table {
  display: none;
}

#buy_asset_box .box-header,
#sell_asset_box .box-header,
#buy_asset_box .box-title,
#sell_asset_box .box-title {
  cursor: pointer;
}

/* http://stackoverflow.com/questions/12996736/basic-jquery-animation-elipsis-three-dots-sequentially-appearing */

@keyframes opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.loading_dots {
  text-align: center;
  margin: 100px 0 0 0;
}

.loading_dots span {
  animation-name: opacity;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.loading_dots span:nth-child(1) {
  animation-delay: 100ms;
}

.loading_dots span:nth-child(2) {
  animation-delay: 300ms;
}

.loading_dots span:nth-child(3) {
  animation-delay: 500ms;
}

.form-group-last {
  margin-bottom: 0 !important;
}

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

.list-group-item.context {
  background-color: #f5f5f5 !important;
}

.list-group-item.context p.list-group-item-text,
.list-group-item.context h4 {
  color: black;
}

.unselectable {
  user-select: none;
}

.testnet_only {
  display: none;
}

.label {
  font-size: 100%;
  font-weight: bold;
}

.label-small {
  font-size: 12px;
}

.warning-label {
  content: "*";
  font-weight: bold;
  color: red;
  display: none;
}

.scrollable-menu {
  height: auto;
  max-height: 500px;
  overflow-x: hidden;
}

#nrs_update_drop_zone,
#nrs_update_result {
  padding: 25px;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  line-height: 30px;
  background: #dff0d9;
  color: #48874a;
  border: 1px solid #d6e8c7;
  display: none;
}

#nrs_update_hash_progress {
  height: 15px;
  background: #48874a;
  display: none;
  margin-top: 20px;
}

.nrs_message {
  background: #dff0d9;
  color: #48874a;
  padding: 5px;
  border: 1px solid #d6e8c7;
  display: none;
}

#nrs_update_explanation > span {
  display: none;
}

.incorrect {
  background: #e2424f !important;
  color: white !important;
  border: 1px solid #e4404b !important;
}

#nrs_update_explanation_wait {
  display: inline !important;
}

#nrs_update_hashes {
  display: none;
  margin-top: 20px;
}

#nrs_update_hashes table {
  border-collapse: collapse;
  border: 1px solid #bbb;
}

#nrs_update_hashes table td {
  padding: 2px;
  margin-bottom: 1px;
}

#downloading_blockchain {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: white;
  background: black;
  padding: 10px 15px 10px 15px;
  border-radius: 3px;
  display: none;
  z-index: 10;
  pointer-events: none;
  transition: 1.5s ease-in-out;
}

/*noinspection CssNoGenericFontName*/
#downloading_blockchain:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  content: "\f101";
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  position: absolute;
  pointer-events: all;
  transition: 1.5s ease-in-out;
}

#downloading_blockchain.shift-right {
  transform: translateX(calc(100% - 4px));
}

#downloading_blockchain.shift-right:before {
  transform: scaleX(-1) translateY(-50%);
}

#show_console {
  position: fixed;
  bottom: 0px;
  right: 3px;
  display: none;
}

label .popover-content {
  font-weight: normal;
}

#account_id:hover {
  cursor: pointer;
}

#account_id_dropdown ul.dropdown-menu > li > a {
  padding: 3px 8px;
}

#chain_dropdown ul.dropdown-menu > li > a {
  padding: 3px 8px;
}

.dropdown-menu > li > a.zeroclipboard-is-hover {
  background-color: #3c8dbc;
  color: #f9f9f9;
}

.popover {
  z-index: 9999999999;
}

#buy_automatic_price.nonzero,
#sell_automatic_price.nonzero {
  cursor: pointer;
}

.left-side .user-panel .dropdown-menu > li > a {
  color: #333;
}

.left-side .user-panel .dropdown-menu > li > a:hover {
  color: #fff;
}

.show_logout {
  display: none;
}

#id_search {
  margin-top: 0;
}

table.settings td {
  padding-bottom: 5px;
}

.malformed_address {
  font-weight: bold;
  cursor: pointer;
}

input:invalid {
  border: 1px solid red;
}

#forging_indicator {
  font-size: 13px;
  display: none;
}

/* Red (not forging) */
#forging_indicator i,
#connected_indicator i {
  color: #a94442;
}

/* Red (not forging) */
#forging_indicator.not_forging i {
  color: #a94442;
}

/* Green (forging) */
#forging_indicator.forging i,
#connected_indicator.connected i {
  color: #3c763d;
}

/* Gray (Unknown forging status) */
#forging_indicator.unknown i {
  color: #cccccc;
}

#forging_indicator.forging.animated i {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  from {
    color: #749a02;
    text-shadow: 0 0 9px #266000;
  }
  50% {
    color: #91bd09;
    text-shadow: 0 0 18px #9bc92b;
  }
  to {
    color: #749a02;
    text-shadow: 0 0 9px #266000;
  }
}

#account_name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

#asset_description {
  word-wrap: break-word;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
}

#lockscreen {
  height: 100%;
  overflow: auto;
}

#lockscreen > .panel.col-md-6 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/**
 * Initial progress indicator component
 */

#lockscreen.loading {
  height: 99%;
  overflow: hidden;
  position: relative;
}

html.loading,
body.loading {
  overflow: hidden;
}

#progress-container {
  position: absolute;
  width: 210px;
  height: 210px;
  left: 50%;
  top: 50%;
}

#progress-container > img {
  position: absolute;
  left: -50%;
  top: -50%;
}

#progress {
  position: absolute;
  height: 100%;
  overflow: hidden;
  left: -50%;
  top: -50%;
}

#progress > #img-wrapper {
  position: relative;
  height: 100%;
  width: 210px;
}

#progress > #img-wrapper > img {
  position: absolute;
  left: 0;
  top: 0;
}

#testnet_login,
#proxy_connection_error {
  display: none;
}

#testnet_warning {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 5px;
  background: red;
  color: white;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}

#asset_exchange_sidebar_search {
  display: none;
  margin-top: 10px;
  border-bottom: 1px solid #ddd;
}

.owns_asset {
  background-color: #ffffd5;
}

.asset_owner td {
  background-color: #ffffd5 !important;
}

#asset_exchange_sidebar_content .list-group-item {
  border-right: 5px solid transparent !important;
}

#asset_exchange_sidebar_content .list-group-item.owns_asset.active,
#asset_exchange_sidebar_content .list-group-item.owns_asset:hover {
  border-right: 5px solid #ffe545 !important;
}

#asset_exchange_sidebar_content .group_icon {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #000;
}

/* till here */

#asset_exchange_page.no_assets .content-splitter-sidebar {
  display: none !important;
}

#asset_exchange_page.no_assets .content-splitter-right {
  left: 0 !important;
}

#asset_exchange_page .asset_controls {
  color:#838383;
  margin-bottom:5px
}

#asset_exchange_page .asset_controls a {
  white-space:nowrap
}

.goods_info,
.purchase_info {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fafafa;
  color: black;
  margin: 5px 5px 15px;
}

.goods_info table,
.purchase_info table {
  width: 100%;
}

.purchase_info th,
.purchase_info td {
  vertical-align: top;
}

.purchase_info th {
  white-space: nowrap;
  padding-right: 5px;
}

.dgs_page_contents h3 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: bold;
}

.dgs_page_contents span.tags,
.dgs_page_contents span.quantity,
.dgs_page_contents span.purchases {
  color: #999999;
}

.dgs_page_contents .price,
.dgs_page_contents .showmore {
  margin-bottom: 5px;
}

.dgs_page_contents hr {
  border-top: 1px solid #ddd;
}

#dgs_view_delivery_output,
#dgs_view_purchase_modal_note,
#dgs_delivery_modal_note,
#dgs_view_refund_output,
#transaction_info_output_top,
#transaction_info_output_bottom {
  word-wrap: break-word;
}

table.purchase {
  margin-bottom: 5px;
}

table.purchase td {
  vertical-align: top;
  padding-right: 5px;
  padding-bottom: 5px;
}

.data-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-index-input {
  border-style: solid;
  border-width: 1px;
  padding: 0px;
  width: 100px
}

.pagination-index-input.invalid {
  color: red;
  border-color: red;
}

.advanced_info {
  float: left;
  color: #737373;
  font-style: italic;
  line-height: 34px;
}

.advanced {
  display: none;
}

.pas_contact_info {
  display: table-cell;
  vertical-align: middle;
  min-width: 80px;
  border: 1px solid #ccc;
  padding: 0px 10px 0px 10px;
  background-color: #f2f2f2;
}

.approve_modal,
.phasing_only_modal,
.advanced_mandatory_approval {
  border-bottom: 1px solid #ddd;
  padding: 6px 0px 12px 0px;
  margin-top: 3px;
  margin-bottom: 18px;
}

.phasing_duration_and_min_fees {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}

.phasing_only_enabled_info {
  color: #31708f;
  background-color: #d9edf7;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.phasing_only_manual_setup_warning {
  background-color: #fefbed;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.tab_pane_approve {
  padding: 16px 0px 0px 0px;
}

input.masked {
  text-transform: uppercase;
}

.recipient_public_key {
  display: none;
}

.recipient_contract_reference_selector {
  display: none;
}

.optional_message,
.optional_note,
.optional_do_not_sign,
.optional_public_key,
.piece_entry_group {
  display: none;
}

.optional_message label,
.add_message_encrypt_option label {
  font-weight: normal;
  color: #666;
}

.modal {
  overflow-y: auto;
}

.modal-body {
  padding-bottom: 8px;
}

.modal-backdrop {
  height: 1500px !important;
}

.modal-context-help {
  color: #4caa6e;
}

#sideBalance {
  display: block;
}

#alias_count_heading {
  vertical-align: middle;
}

.numeric {
  text-align: right;
}

#testnet_warning.testnet-collapse {
  position: relative;
  height: 12px;
  padding: 0;
  font-size: 9px;
  width: 100%;
  overflow: hidden;
  cursor: none;
}

.popover.tour {
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
}

.tour-login-just-started .tour-login.popover {
  animation: tour-login-shake 5s ease;
}

.tour-dashboard-just-started .tour-dashboard.popover {
  animation: tour-dashboard-shake 5s ease;
}

.popover.tour .popover-title {
  color: #ffffff;
  background-color: #007bff;
}

.popover.tour .popover-content,
.popover.tour .popover-navigation {
  background: #f7f7f9;
}

.popover.tour .popover-content ul {
  margin-top: 5px;
  margin-bottom: 10px;
  padding-inline-start: 30px;
}

.popover.tour .popover-navigation {
  min-width: 180px;
}

.popover.tour .popover-navigation .btn {
  font-size: 14px;
}

@keyframes tour-login-shake {
  25% {
    transform: translate3d(-5px, 0, 0);
  }

  75% {
    transform: translate3d(5px, 0, 0);
  }
}

@keyframes tour-dashboard-shake {
  25% {
    transform: translate3d(0, 5px, 0);
  }

  75% {
    transform: translate3d(0, -5px, 0);
  }
}

#m_save_forging_encrypted_modal dl.forgingAccounts span.forgetForgingAccount {
  float: right;
  cursor: pointer;
  font-size: large;
  color: #72afd2;
}

video.qr {
  width: 100%;
  max-width: 640px;
}

#login_panel .chainSelector img {
  height: 16px;
  vertical-align: text-bottom;
}

#login_panel .chainSelector li a span {
  width: 7rem;
  display: inline-block;
}

#login_seed_account option,
#login_hardware_account option,
#account_id_dropdown a {
  font-family: monospace;
}

.top-right-button-section a {
  margin-left: 20px;
}

div#configuration_page tr.config-changed {
  font-weight: bold;
}

div#configuration_page tr.text-primary td.value {
  text-decoration: line-through;
}

.input-group-clearable input {
  padding-left: 35px;
}

.input-group-clearable input:placeholder-shown {
  padding-left: 12px;
}

.input-group-clearable .input-clear-btn {
  position: absolute;
  left: 1px;
  z-index: 3;
}

.input-group-clearable input:placeholder-shown ~ .input-clear-btn {
  display: none;
}

/* svg flags, hand picked from https://github.com/lipis/flag-icon-css */

.flag-icon-background {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}

.flag-icon:before {
  content: "\00a0";
}

.flag-icon.flag-icon-squared {
  width: 1em;
}

.flag-icon-de {
  background-image: url(./flags/de.svg);
}

.flag-icon-gr {
  background-image: url(./flags/gr.svg);
}

.flag-icon-gb {
  background-image: url(./flags/gb.svg);
}

.flag-icon-es {
  background-image: url(./flags/es.svg);
}

.flag-icon-fr {
  background-image: url(./flags/fr.svg);
}

.flag-icon-id {
  background-image: url(./flags/id.svg);
}

.flag-icon-it {
  background-image: url(./flags/it.svg);
}

.flag-icon-jp {
  background-image: url(./flags/jp.svg);
}

.flag-icon-kr {
  background-image: url(./flags/kr.svg);
}

.flag-icon-pt {
  background-image: url(./flags/pt.svg);
}

.flag-icon-ru {
  background-image: url(./flags/ru.svg);
}

.flag-icon-th {
  background-image: url(./flags/th.svg);
}

.flag-icon-vn {
  background-image: url(./flags/vn.svg);
}

.flag-icon-cn {
  background-image: url(./flags/cn.svg);
}

.checkbox-inline input,
.radio-inline input {
  height: 13px;
  width: 13px;
}

#login_panel .checkbox-inline [data-i18n] {
  font-weight: 700;
}

#upload_file_message,
#upload_file {
  height: auto;
}

@keyframes marching-ants-animation {
  0% {
    background-position: 0 0, 0 100%, 0 0, 100% 0;
  }
  100% {
    background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px;
  }
}

#lockscreen > .panel.col-md-6.tour-login-element, /* need to override some important styles */
.tour-login-element,
.tour-accountLogin-element,
.tour-passphraseLogin-element,
.tour-hardwareLogin-element,
.tour-seedLogin-element,
.tour-dashboard-element {
  border: none;
  border-radius: 5px;
  padding: 7px !important;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  animation: marching-ants-animation 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
  background-image: linear-gradient(to right, #808080 50%, #fff 50%),
    linear-gradient(to right, #808080 50%, #fff 50%),
    linear-gradient(to bottom, #808080 50%, #fff 50%),
    linear-gradient(to bottom, #808080 50%, #fff 50%);
}

div.fee-priority-slider-container {
  text-align: center;
  flex-grow: 1;
  margin-left: 5px;
  margin-right: 5px;
}

div.fee-calculation-container {
  margin-bottom: 5px;
  display: flex;
  align-items: start;
}

.transaction-types-checkboxes {
}

.transaction-types-checkboxes span {
  white-space: nowrap
}

/* start of media queries */
@media screen and (min-width: 800px) {
  body .modal-dialog-wide,
  body .modal-dialog-700 {
    width: 700px;
    margin: 30px auto;
  }

  body .modal-dialog-wide,
  .modal-dialog-wider {
    width: 1150px;
  }
}

@media screen and (min-width: 992px) {
  /* Left side collapse */
  .left-side.collapse-left {
    display: none;
  }
}

/*
 * Off Canvas
 * --------------------------------------------------
 *  Gives us the push menu effect
 /* */
@media screen and (max-width: 992px) {
  body.fixed .sidebar-offcanvas {
    display: none;
  }

  body.fixed .row-offcanvas-left.active .sidebar-offcanvas {
    display: block;
  }
}

@media (max-width: 965px) {
  /*Shorten width of send containers to wrap on 2 lines*/
  .navbar-right > .nav.sends > .dropdown > a {
    width: 91px;
    text-align: center;
    padding: 5px 15px;
  }

  body > .header .logo {
    width: 155px;
  }

  body > .header .navbar {
    margin-left: 150px;
    padding-right: 9px;
  }

  .navbar .navbar-right > .nav {
    margin: 0;
  }
}

@media (max-width: 800px) {
  body.fixed .wrapper {
    margin-top: 75px;
    height: calc(100vh - 75px);
  }

  body > .header .logo {
    position: relative;
    z-index: 9999;
    width: 160px;
    margin: 0 0 0 40px;
    background: transparent;
  }

  body > .header .navbar {
    margin: 0;
    height: 75px;
  }

  .navbar .navbar-right > .nav.sends {
    width: 100%;
    position: absolute;
    text-align: center;
    left: 0;
    bottom: 0;
    height: 24px;
  }

  .navbar .navbar-right > .nav.sends li {
    display: inline;
    float: none;
  }

  .navbar .navbar-right > .nav.sends a {
    display: inline;
    padding: 0 25px;
  }
}

@media (max-width: 767px) {
  .navbar .navbar-nav > li {
    position: static;
  }

  .navbar-nav .open .dropdown-menu {
    background: #fff;
    margin-top: -30px;
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
  }

  .navbar .nav > li > a:focus,
  .navbar .nav > li > a:hover,
  .navbar .nav > li > a:hover .badge,
  .navbar .nav .open > a:hover {
    background: none !important;
    color: #bbb;
  }

  .navbar-right > .nav > .dropdown > a,
  .navbar .nav .open > a,
  .navbar .nav a {
    background: none;
  }

  .header-button-container {
    padding-top: 0;
  }

  .header-button-container > .btn-group {
    float: left;
  }
}

@media (max-width: 700px) {
  #testnet_warning {
      position: relative;
      height: 12px;
      padding: 0;
      font-size: 9px;
      width: 100%;
      overflow: hidden;
      cursor: none;
  }

  #testnet_warning[style*="display: block;"] ~ .header {
    top: 12px;
  }

  .modal td ~ td {
    word-break: break-all;
  }
}

@media (max-width: 600px) {
  /* Dashboard BOXES  @media 600px -- duckx */
  #dashboard_page .small-box {
    height: 110px;
  }

  #dashboard_page .small-box > .inner {
    padding: 5px;
  }

  #dashboard_page .small-box h3 {
    font-size: 23px;
    white-space: normal;
  }

  #dashboard_page .small-box p {
    display: inline !important;
  }

  #dashboard_page .small-box > .small-box-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
  }

  /* Dashboard Tables @media 600px -- duckx */
  #dashboard_page .content,
  #dashboard_page .row,
  #dashboard_page .panel-body {
    margin: 0;
    padding: 0;
  }

  #dashboard_page .data-container th,
  #transactions_page .data-container th {
    display: none;
  }

  #dashboard_page .data-container tr,
  #transactions_page .data-container tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
  }

  #dashboard_page .table-striped > tbody > tr:nth-of-type(odd),
  #transactions_page .table-striped > tbody > tr:nth-of-type(odd) {
    background: #eee;
  }

  #dashboard_page .data-container td,
  #transactions_page .data-container td {
    display: block;
    width: 33% !important;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    padding: 15px 3px !important;
    border: 0 !important;
    background: none !important;
  }

  #dashboard_page [data-column-title]:before,
  #transactions_page [data-column-title]:before {
    font-weight: bold;
    content: attr(data-column-title) ": ";
  }

  #dashboard_page .data-container td:nth-child(1),
  #transactions_page .data-container td:nth-child(1) {
    /* date */
    order: 1;
    padding: 15px 0 0 15px !important;
  }

  #dashboard_page
    .data-container
    td:nth-child(1)
    .show_transaction_modal_action,
  #transactions_page
    .data-container
    td:nth-child(1)
    .show_transaction_modal_action {
    white-space: normal;
  }

  #dashboard_page .data-container .transaction-has-message,
  #transactions_page .data-container .transaction-has-message {
    position: absolute;
    left: 0;
    width: 0% !important;
  }

  #dashboard_page .data-container .transaction-type,
  #transactions_page .data-container .transaction-type {
    white-space: normal !important;
  }

  #dashboard_page .data-container .transaction-has-message .fa-envelope,
  #transactions_page .data-container .transaction-has-message .fa-envelope {
    top: 0;
    left: 0;
    position: absolute;
    border-bottom: 35px solid transparent !important;
    border-left: 35px solid #337ab7 !important;
    height: 0;
  }

  #dashboard_page .data-container .transaction-has-message .fa-envelope:before,
  #transactions_page
    .data-container
    .transaction-has-message
    .fa-envelope:before {
    margin: 6px 0 0 -46px;
    transform: rotate(-45deg);
    display: block;
    color: #fff;
  }

  #dashboard_page .data-container td:nth-child(3),
  #transactions_page .data-container td:nth-child(3) {
    /* trans type */
    order: 3;
    width: 22% !important;
    background: #337ab7 !important;
    color: #fff;
    padding: 5px 9px !important;
  }

  #dashboard_page .data-container .transaction-amount,
  #transactions_page .data-container .transaction-amount {
    order: 4;
    white-space: nowrap;
    position: absolute;
    left: 15px;
    bottom: 23px;
    text-align: left !important;
    font-size: 16px;
  }

  #dashboard_page .data-container td:nth-child(5),
  #transactions_page .data-container td:nth-child(5) {
    order: 5;
  }

  #dashboard_page .data-container td:nth-child(6),
  #transactions_page .data-container td:nth-child(6) {
    order: 6;
  }

  #dashboard_page .data-container td:nth-child(7),
  #transactions_page .data-container td:nth-child(7) {
    order: 2;
    width: 45% !important;
  }

  #dashboard_page .data-container td:nth-child(7) .show_popover,
  #transactions_page .data-container td:nth-child(7) .show_popover {
    text-align: center !important;
    border: none !important;
    background-color: transparent !important;
  }

  #dashboard_page .data-container td:nth-child(7) .label,
  #transactions_page .data-container td:nth-child(7) .label {
    display: block !important;
  }

  #dashboard_page .data-container .transaction-height,
  #transactions_page .data-container .transaction-height {
    display: none;
  }

  #dashboard_page .data-container td:nth-child(8) .show_popover,
  #transactions_page .data-container td:nth-child(8) .show_popover {
    margin: 0 0 15px;
  }

  #dashboard_page .data-container .confirmations,
  #transactions_page .data-container .confirmations {
    order: 7;
    text-align: right !important;
  }

  .regular-view {
    display: none;
  }

  .mobile-view {
    display: initial !important;
  }

  #account_details_modal .regular-view {
    display: initial;
  }

  #account_details_modal .mobile-view {
    display: none !important;
  }

  #dashboard_page
    .data-container
    .confirmations.confirmations-show-bar-mobile-view,
  #transactions_page
    .data-container
    .confirmations.confirmations-show-bar-mobile-view {
    width: 100% !important;
    padding: 0 !important;
  }

  #dashboard_page
    .data-container
    .confirmations.confirmations-show-bar-mobile-view
    .mobile-view
    .confirmations-bar-ul,
  #transactions_page
    .data-container
    .confirmations.confirmations-show-bar-mobile-view
    .mobile-view
    .confirmations-bar-ul {
    width: 100%;
    display: flex;
  }

  #dashboard_page
    .data-container
    .confirmations
    .mobile-view
    .confirmations-bar-li,
  #transactions_page
    .data-container
    .confirmations
    .mobile-view
    .confirmations-bar-li {
    width: 10%;
  }

  #dashboard_page
    .confirmations.confirmations-show-bar-mobile-view[data-column-title]:before,
  #transactions_page
    .confirmations.confirmations-show-bar-mobile-view[data-column-title]:before {
    content: "";
  }

  @keyframes slide {
    0% {
      transform: translateX(-25%);
    }
    100% {
      transform: translateX(25%);
    }
  }

  .content-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .header-select-container {
    font-size: 18px;
    margin-top: 5px;
  }

  .content-splitter-sidebar {
    display: none;
  }

  .content-splitter-right {
    left: 0px;
  }

  /* My Transaction Page @media 600px -- duckx */
  #transactions_type_navi {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  #transactions_type_navi li a {
    padding: 9px;
  }

  #transactions_sub_type_navi {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 9px;
  }

  #transactions_sub_type_navi li {
    flex-basis: 49%;
    font-size: 12px;
  }

  #transactions_sub_type_navi li > a {
    padding: 9px 5px;
  }

  .all-changed-filter {
    display: flex;
    float: right;
  }
}

@media (max-width: 550px) {
  body > .header .logo {
    display: none;
  }

  body > .header .navbar .sidebar-toggle {
    position: relative;
    top: 31px;
    z-index: 9;
  }

  .navbar .navbar-right {
    float: none;
    width: 100%;
    position: absolute;
    height: 75px;
  }

  .navbar .navbar-right > .nav.sends + .nav {
    margin: 0;
    display: flex;
    float: none;
    width: 100%;
    justify-content: space-between;
  }

  .navbar .navbar-right > .nav.sends + .nav > li > a {
    padding: 13px;
  }

  .navbar .navbar-right > .nav.sends {
    height: 31px;
    display: flex;
    justify-content: space-around;
    margin: 0;
  }

  .navbar .navbar-right > .nav.sends li {
    width: 60px;
  }

  .navbar .navbar-right > .nav.sends a {
    padding: 0;
    display: block;
    width: 100%;
    line-height: 13px;
    font-weight: normal;
  }
}

/* Fix menu positions on xs screens to appear correctly and fully */
@media screen and (max-width: 480px) {
  #nrs_node_state_table tr td {
    display: inline-block;
    width: 50%;
  }

  #nrs_node_state_table tr td:nth-child(2n + 1),
  #nrs_node_state_table tr td:nth-child(2n + 2) {
    background-color: #fff;
  }

  #nrs_node_state_table tr td:nth-child(2n + 3),
  #nrs_node_state_table tr td:nth-child(2n + 4) {
    background-color: #f3f4f5;
  }
}

@media screen and (max-width: 480px) {
  #sidebar {
    position: fixed;
    z-index: 100;
    padding-bottom: 50px;
  }

  .small-box {
    text-align: center;
    overflow: hidden;
  }

  .small-box .icon {
    display: none;
  }

  .small-box p {
    font-size: 12px;
  }

  #dashboard_blocks_div .small-box p {
    white-space: nowrap;
    position: relative;
    animation: marquee 8s linear infinite;
  }

  @keyframes marquee {
    0% {
      left: 100%;
    }
    100% {
      left: -100%;
    }
  }
}

@media (max-height: 400px) {
  /* When mobile keyboard is displayed. Hide logo. */
  html.lockscreen body {
    margin-top: 25px;
  }
}

/* Don't display when printing */
@media print {
  .left-side,
  .header,
  .content-header {
    display: none;
  }
}