body {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
}

a.navbar-brand { font-family: 'Grandstander', cursive; font-size:1.5rem; }

.container {
  margin-top: 8rem;
}

.device-panel {
  -webkit-box-shadow: 0px 1px 15px 1px rgba(255, 255, 255, 0.12);
  -moz-box-shadow: 0px 1px 15px 1px rgba(255, 255, 255, 0.12);
  box-shadow: 0px 1px 15px 1px rgb(255 255 255 / 12%);
  background-color: #2b2c2d;
}

.device-panel .panel-head {
display: table;
width: 100%;
border-bottom: 1px solid #ebedf2;
padding: 0 2.2rem 1rem 2.2rem;
height:5.0rem;
}

.device-panel .panel-head .panel-name {
display: table-cell;
vertical-align: middle;
text-align: left;
}

.device-panel .panel-head .panel-name span {
font-size: 0.8rem;
}

.device-panel .panel-head .panel-name .panel-title {
display: table;
table-layout: fixed;
height: 100%;
}

.device-panel .panel-head .panel-name .panel-title .icon {
display: table-cell;
vertical-align: middle;
line-height: 0;
padding: 0 13px 0 0;
color: #b2b1c5;
}

.device-panel .panel-head .panel-name .panel-title .icon i {
font-size: 1.8rem;
}

.device-panel .panel-head .panel-name .panel-title .extra {
display: table-cell;
vertical-align: middle;
}

.device-panel .panel-head .panel-name .panel-title h2 {
font-size: 1.2rem;
margin-top: 1.6rem;
}




.device-panel .panel-head .panel-info {
display: table-cell;
vertical-align: middle;
text-align: right;
width: 20%;
}

.device-panel .panel-head .panel-info .misc {
text-align:left;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
color: #9699a2;
}

.device-panel .panel-head .panel-info .misc span {
font-size: 0.6rem;
font-weight: 400;
float: right;
}


.device-panel .panel-head .panel-info .progress {
height: 6px;
border-radius: 3px;
margin-bottom: 0.5rem;
}

.device-panel .panel-head .panel-info .progress .progress-bar {

}

.device-panel .panel-head .panel-info .battery-info {
margin-bottom: 0.5rem;
}

.device-panel .panel-head .panel-info .battery-info span {
color: #9699a2;
font-size: 0.7rem;
font-weight: 300;
}

.device-panel .panel-head .panel-info .battery-info span.title {
float: left;
}

.device-panel .panel-head .panel-info .battery-info span.value {
float:right;
}

.device-panel .panel-body {
  padding: 1rem;
}

.device-panel form {
text-align: center;
}

.device-panel form input[type="text"] {
text-align: center;
}


.device-panel h4 { font-size: 1.3rem; }


@media (min-width: 576px) {
  .device-panel .panel-body {
    padding: 2.2rem 2.2rem;
  }


}


form .input-group {

}


.table tfoot th { border-top:2px solid #dee2e6; }
.table td, .table th { padding: 0.55rem; }
.table.bait .b-right { border-right:1px solid #dee2e6; }




.device-panel input[disabled] { cursor:not-allowed; }
.device-panel .c-radio[disabled] { cursor:not-allowed; }
.device-panel select[disabled] { cursor:not-allowed; }
.device-panel button[disabled] { cursor:not-allowed; }

.device-panel button { cursor: pointer; }

.noselect {
-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 */
}





.tooltip.in { filter: alpha(opacity=90); opacity: .9; }



.tab-content>.tab-pane { padding:3rem 1rem 1rem 1rem; border:1px solid #495057; border-top:0; }

input.itemQty { height:20px; }




.dropdown-item:focus, .dropdown-item:hover { background-color:#383838; }
.uib-typeahead-match .dropdown-item { cursor:pointer; }

.uib-typeahead-match .dropdown-item .itemId { font-size:12px; color:#f9ff00; }


.rzslider .rz-pointer { background-color:#495057; }
.rzslider .rz-pointer.rz-active:after { background-color:#7c7e81; }
.rzslider .rz-bubble { color:#b6bbc1; }
.rzslider .rz-bubble.rz-limit { color:#d3d3d3; }

.enchant-select { margin-top:20px; }
.upgrade-info { display:flex; flex-wrap:wrap; margin-top:20px; }
.upgrade-info .item-header { width:100%; display:flex; flex-wrap:nowrap; margin-bottom:20px; }
.upgrade-info .item-header .item-icon { position: relative; margin-right:10px; }
.upgrade-info .item-header .item-icon, .upgrade-info .item-header .item-icon img { width:54px; height:54px; }
.upgrade-info .item-header .item-icon img.icon { background:#000; border-radius:3px; }
.upgrade-info .item-header .item-icon img.icon-panel { position:absolute; top:0; left:0; }

.upgrade-info .item-header .item-name { }
.upgrade-info .item-header .item-name h1 { font-size:28px; margin-bottom:0; font-weight:bold; }
.upgrade-info .item-header .item-name h1 span.grade { font-weight:normal; color:#b6bbc1; position:relative; top:-5px; margin-left:10px; text-transform:uppercase; }
.upgrade-info .item-header .item-name .item-type { }


.upgrade-info .materials { display:flex; flex-wrap:wrap; }
.upgrade-info .materials .material img { width:32px; height:32px; }
.upgrade-info .materials .material span.grade { color:#b6bbc1; position:relative; top:-4px; text-transform:uppercase; margin-left:5px; }

.item-icon { position: relative; }
.item-icon img.icon { background:#000; border-radius:3px; }
.item-icon img.icon-panel { position:absolute; top:0; left:0; }

.virtual-items .tab-content .virtual-item-list h2 { font-size:1.2rem; }
.virtual-items .tab-content .virtual-item-list .table th { font-size:0.6rem; padding:0.35rem; }
.virtual-items .tab-content .virtual-item-list .table tbody td { font-size: 0.7rem; padding:0.05rem; }

.virtual-items #nav-items .mas { column-count:3; }
.virtual-items #nav-skills .mas { column-count:2; }
.virtual-items .virtual-item-list .mas .col { display:grid; grid-template-rows:1fr auto; margin-bottom:10px; break-inside:avoid; }

/*
.upgrade-info .materials .material { width:100%; display:flex; flex-wrap:nowrap; margin-left:20px; margin-bottom:10px; }
.upgrade-info .materials .material img { width:32px; height:32px; }
.upgrade-info .materials .material h5  { margin-left:10px; align-self:end; font-size:14px; margin-bottom:0; width:250px; }
.upgrade-info .materials .material span.qty { align-self:end; }
.upgrade-info .materials .material span.grade { color:#b6bbc1; position:relative; top:-5px; text-transform:uppercase; }
*/

.mono-spacing { font-family:'Lucida', monospace; }

.item-icon[data-enchant]:before, .dropdown-item[data-enchant]:before { left: 2px; bottom: -2px; z-index: 99; color: #b777fa; font-size: 11px; font-weight:700; position: absolute; content: attr(data-enchant); text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000; }
a.dropdown-item[data-enchant] { position:relative; }
a.dropdown-item[data-enchant]:before { left:26px; bottom:1px; font-size:8px; }

.upgrade-path { padding-top:1rem; }
.upgrade-path .card-deck { margin-top:1rem; }
.upgrade-path .card-deck .card.selected { border-color:#ffffff; }
.upgrade-path .card-deck .item-icon { position:relative; margin:0 auto; }
.upgrade-path .card-deck .card-body { text-align:center; padding-bottom:0; }
.upgrade-path .card-deck .card-body h5 { font-size:0.85rem; text-wrap:balance; }
.upgrade-path .card-deck .card-body span.grade { color:#b6bbc1; position:relative; top:-4px; text-transform:uppercase; margin-left:5px; }
.upgrade-path .card-deck .card:after { content:"\00BB"; position:absolute; right:-31px; font-size:60px; }
.upgrade-path .card-deck .card:last-child::after { display:none; }



.raid-ico { height:18px; width:18px; display:inline-block; background-size:140%; background-position:30% 30%; vertical-align: text-bottom; }
.raid-ico.dead  { background-image: url('../images/raid/raid_dead.png'); }
.raid-ico.alive { background-image: url('../images/raid/raid_alive.png'); }
.raid-ico.soon  { background-image: url('../images/raid/raid_soon.png'); }

table.raid-list tr:hover .raid-ico.dead  { background-image: url('../images/raid/raid_dead_h.png'); }
table.raid-list tr:hover .raid-ico.alive { background-image: url('../images/raid/raid_alive_h.png'); }
table.raid-list tr:hover .raid-ico.soon  { background-image: url('../images/raid/raid_soon_h.png'); }

.raid-listing h4 { display: flex; justify-content: space-between; align-items: center; }

.raid-listing .custom-switch { margin-right:-1rem; }

.raid-listing .fas.rbAlert { padding-right:6px; width:22px; text-align:center; cursor:pointer; }
.raid-listing .fas.rbAlert.fa-bell { color:#1aef0f; }
.raid-listing .fas.rbAlert.fa-bell-slash { color:#f13737; }

.fa-svg-icon {
  display: inline-block;
  vertical-align: middle;
  min-width: 1em;
  min-height: 1em;
  height: 100%;
  position: relative;
  top: -1px;
}
.fa-svg-icon svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.datetimepicker .disabled, .datetimepicker .disabled:hover {
  color: #2a2a2a;
}

.datetimepicker .current, .datetimepicker .current:hover, .datetimepicker .current.disabled, .datetimepicker .current.disabled:hover {
  background-color: #4e4e4e;
}
.datetimepicker .minute:hover, .datetimepicker .hour:hover, .datetimepicker .day:hover, .datetimepicker .switch:hover, .datetimepicker .left:hover, .datetimepicker .right:hover {
  background-color: #1c1a1a;
}


.panel-body.raid form,
.public-time form { text-align:left; }
.panel-body.raid .well p,
.public-time .well p { margin-bottom:0.1rem; font-size:14px; font-weight:bold; }
.public-time label { font-size:14px; font-weight:bold; }
.public-time .well.radios label { font-weight:normal; }
.panel-body.raid .well,
.public-time .well {
  margin-bottom:2rem;
  background:#000000;
  padding:1rem 2rem 1.5rem 2rem;
  border: 1px solid #6c757d;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.public-time .well { margin-bottom: 1rem; }

.accordion-item .card-header a { display:block; }

.accordion-item .card-header .accordion-toggle:after {
  font-family: 'Font Awesome 5 Free';
  content: "\f107";
  font-weight: 900;
  float: right;
}

.accordion-item.card-open .card-header .accordion-toggle:after {
  font-family: 'Font Awesome 5 Free';
  content: "\f106";
}


div.forgotten-container {
  display: grid;
  grid-template-rows: [fsb-start] repeat(32, 50px) [fsb-end] 30px;
}

div.forgotten-container.cnt--4 {
  grid-template-columns: [fsb-start] 55px [fsb-content] repeat(4, 160px);
}
div.forgotten-container.cnt--5 {
  grid-template-columns: [fsb-start] 55px [fsb-content] repeat(5, 160px);
}

div.forgotten-container div.item {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
div.forgotten-container div.item.heading.corner {
  border-top: 0;
  border-left: 0;
}
div.forgotten-container div.item.heading {
  font-weight: 700;
}

div.forgotten-container div.item--align-end {
  align-items: end;
}

div.forgotten-container div.item span {
  writing-mode: sideways-lr;
  font-weight: 700;
}

div.forgotten-container div.item.item__rowspan--1 {
  grid-row: span 1;
}

div.forgotten-container div.item.item__rowspan--2 {
  grid-row: span 2;
}

div.forgotten-container div.item.item__rowspan--5 {
  grid-row: span 5;
}

div.forgotten-container div.item.item__rowspan--10 {
  grid-row: span 10;
}

div.forgotten-container div.item.item__colspan--3 {
  grid-column: span 3;
}

div.forgotten-container div.item.item__colspan--4 {
  grid-column: span 4;
}

div.forgotten-container section { display:inherit; }

div.spellbooks div.tab-pane { justify-items: center; }