/** 
*This file contains the core design features for all wwiionline website products.
*
*It should be included in the standard sass files of your project, but should
*not otherwise be altered. Overrides for settings in this file should be
*placed in your app.scss file
*Created on : July 31, 2017, 12:35:50 PM
*Author     : Brian 'b2k' Steinke <b2k@corneredrats.com>
*/

/* general body formatting */

body, tr, td, p, li {
  font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
  font-size: 11pt;
  line-height: normal;
  margin: 0;
}

.control-label {
  padding-top: 9px;
  color: var(--wwiiol-grey-light);
}

.box {
  min-height: 20px;
  padding: 10px;
  margin-bottom: 20px;
  background-color: var(--wwiiol-black);
  border: 1px solid var(--wwiiol-border-color);
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  background-image: linear-gradient(var(--wwiiol-grey-dark), var(--wwiiol-black) 30px, #0b0a0a);
}

.footer {
  background-color: var(--wwiiol-footer-bg);
  color: var(--wwiiol-grey-med);
  bottom: 0;
  /* Set the fixed height of the footer here */
  height: var(--wwiiol-footer-height);
  position: fixed;
  width: 100%;
  z-index: 2000; /**some form elements such as dropdowns appear over the top if we dont set this **/
}

.fullback {
  background: url("/images/bg.jpg") no-repeat center center fixed;
  background-size: cover;
  color: var(--wwiiol-white);
}

.help-block {
  color: var(--wwiiol-grey-light);
}   

.icon-flag {
    max-width: 26px;
}

#logout, #logoutSm {
  color: #ffcc00;
	margin-bottom: -10px;
}

#logout {
	margin-top: 10px;
}

#main {
    padding-bottom: var(--wwiiol-footer-height);
}

#playerInfo {
	padding-bottom: 5px;
}

.pull-right {
  float: right;
}
.pull-left {
  float: left;
}

.text-muted {
  /* color: #7a8288; */
  color: var(--wwiiol-grey-light) !important;
}

.text-success {
  color: #ffffff;
}

.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}

/**
* Buttons
**/
.btn,
.btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.btn-default {
  background-image: -webkit-linear-gradient(var(--wwiiol-grey-med), var(--wwiiol-grey-med) 60%, var(--wwiiol-grey-dark));
  background-repeat: no-repeat;
  color: var(--wwiiol-yellow);
}

.btn-default:hover {
  background-image: -webkit-linear-gradient(#020202, #101112 40%, #141618);
  background-repeat: no-repeat;
  color: var(--wwiiol-yellow);
}

.btn-dark {
  background-color: var(--wwiiol-black);
}

/**
* Dropdowns
*/
.dropdown {
  font-weight: bold;
}

.dropdown-item {
  color: var(--wwiiol-white);
}
.dropdown-item:not(:last-child) {
	border-bottom: 1px solid #272b30;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: var(--wwiiol-black);
  border: 1px solid #272b30;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.open>.dropdown-menu {
    display: block;
    z-index: 1000;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #c8c8c8;
    white-space: nowrap;
background-color: var(--wwiiol-black);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: var(--wwiiol-grey-med);
}

.dropdown-menu > li:not(:last-child) {
	background-color: #000;
	border-bottom: 1px solid #272b30;
}

/**
* Forms and Formgroups
*/
.control-label {
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: bold;
}

.form-control {
  display: block;
  width: 100%;
  height: 36px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wwiiol-white);
  background-color: var(--wwiiol-grey-dark);
  background-image: none;
  border: 1px solid var(--wwiiol-grey-dark);
  border-radius: 2px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control:focus {
  background-color: var(--wwiiol-grey-light);
}

.form-control::placeholder {
  color: var(--wwiiol-grey-light);
}

.form-group {
  margin-bottom: 15px;
  vertical-align: middle;
}

/**
* Headers
*/
th {
	text-align: center;
}

h1, .h1 {
	margin-top: 0px;
}

h2, .h2 {
	margin-top: 10px;
}

h3, .h3 {
  text-align:center;
	margin-top: 10px;
}

/**
* labels
*/


/**
* Lists & Links
*/
a:active,
a:hover {
  outline: 0;
}

a {
  color: var(--wwiiol-link);
  text-decoration: none;
  background-color: transparent;
}

a.list-group-item,
button.list-group-item {
  color: var(--wwiiol-yellow);  
  display: inline-block;
}

a.list-group-item:hover,
button.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:focus {
  text-decoration: none;
  color: #c8c8c8;
  background-color: #3e444c;
}

.list-group-item {
  background-color: #020202;
  border: 1px solid rgba(0, 0, 0, 0.6);
  color: var(--wwiiol-grey-light);
  display: block;
  margin-bottom: -1px;
  padding: 10px 15px;
  position: relative;
}

ul {
  --bs-dropdown-bg: var(--wwiiol-black);
  align-items: center;
}

/**
* Modal (pop up notes for some screens)
*/
.modal-body {
  color: var(--wwiiol-grey-light);
  /* overflow-x: hidden;
   overflow-wrap: auto; */
}

.modal-content {
  position: relative;
  background-color: var(--wwiiol-black);
  border: 1px solid var(--wwiiol-border-color);
  border-radius: 6px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  outline: 0;
}

.modal-header .close {
  background-color: var(--wwiiol-grey-med);
  text-align: center;
  vertical-align: middle;
  color: var(--wwiiol-white);
}

.modal-title {
  color: var(--wwiiol-white);
  line-height: 1.42857143;
  margin: 0;
  text-align: center;
}

pre {
  overflow-x: hidden;
  white-space: pre-wrap;
}

/**
* navbar
*/
.navbar {
  background-image: linear-gradient(var(--wwiiol-grey-med), var(--wwiiol-grey-dark) 40%, var(--wwiiol-black));
  padding: 0;
}

.navbar-nav {
	display:inline-block;
  float:none;
	font-weight: bold;
}

.navbar .navbar-nav {
  display: inline-block;
  font-weight: bold;
  vertical-align: middle;
}

.navbar-nav .dropdown-menu {
  position: absolute;
}

.nav > li {
  float:left;
}

.nav > li > a {
	position: relative;
  display: block;
  padding: 10px 15px;
}

.nav > li > a:focus {
	background-image: linear-gradient(var(--wwiiol-black), var(--wwiiol-grey-dark) 40%, var(--wwiiol-grey-med));

}

.navbar-nav > li > a {
  color: var(--wwiiol-white);  
}

.navbar-nav > li > a:hover {
  background-image: linear-gradient(var(--wwiiol-black), var(--wwiiol-grey-dark) 40%, var(--wwiiol-grey-med));
  
  
}

/**
* Panels
*/
.panel {
  background-color: var(--wwiiol-grey-dark);
}

.panel-body {
	padding: 10px;
}

.panel-default {
  border-color: rgba(0, 0, 0, 0.6);
}

.panel-heading {
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  color: var(--wwiiol-grey-light);
  padding: 10px 15px;
  text-align: center;
}

.panel-default > .panel-heading {
  color: var(--wwiiol-grey-light);
  text-align: center;
  border-color: rgba(0, 0, 0, 0.6);
}

.panel-default > .panel-heading,
.panel-default > .panel-body {
  color: var(--wwiiol-grey-light);
  background-color: var(--wwiiol-black);
  border-color: rgba(0, 0, 0, 0.6);
}

.panel-default > .panel-heading, 
.panel-default > .panel-footer {
	background-color: var(--wwiiol-black);
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  color: var(--wwiiol-grey-light);
}

/**
* Tables
*/
.table {
  width: 100%;
  max-width: 100%;
}

.table-bordered > tfoot > tr {
  background-color: var(--wwiiol-grey-dark);
  border-color: var(--wwiiol-black);
  border-top: 5px solid var(--wwiiol-black);
}

.table > tfoot > tr > td{
  background-color: var(--wwiiol-grey-dark);
  border-color: var(--wwiiol-black);
  border-top: 1px solid #1c1e22;
}

.table th {
  color: var(--wwiiol-white);
}

.table-bordered {
  border: 1px solid #1c1e22;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #1c1e22;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th {
  background-color: var(--wwiiol-black);
  text-align: center;
}

.table-responsive > .table {
  background-color: #000000;
}

.even-row td {
    background-color: var(--wwiiol-grey-dark);
    color: var(--wwiiol-white);
}

.odd-row td {
    background-color: var(--wwiiol-black);
    color: var(--wwiiol-white);
}

.active .page-link {
  background-color: var(--wwiiol-grey-med);
  border-color: var(--wwiiol-white);
  color: var(--wwiiol-white);
}

.pagination > li > a{
  background-color: var(--wwiiol-black);
  color: var(--wwiiol-link);
}
.pagination > li > a:hover{
  background-color: var(--wwiiol-link);
  color: var(--wwiiol-black);
}

.disabled .page-link {
  background-color: var(--wwiiol-grey-light);
}

/**
* well
**/
.well {
  min-height: 20px;
  padding: 10px;
  margin-bottom: 20px;
  background-color: var(--wwiiol-black);
  background-image: linear-gradient(#313539, #000 30px, #000);
  border: 1px solid var(--wwiiol-border-color);
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.well blockquote {
  border-color: var(--wwiiol-white);
  border-color: rgba(0, 0, 0, 0.15);
}

.well h2 {
  color: var(--wwiiol-grey-light);
}

.well h3 {
  color: var(--wwiiol-grey-light);
}