/*
  Theme Name: Classic 1
  Version: 1.1
*/
/*
  @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
  @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
  @import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700); */



  body {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 18px;
    color: lightgrey;
    background-image: url(i/TestBG22.jpg);
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
  }

input, select, option, textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.10em;
  color: lightgrey;
  background : #2c375a;
  border : 0;
}

body A:link {color:#9edcfe; text-decoration : none;}
body A:visited {color:#9edcfe; text-decoration : none;}
body A:hover {color:#008a8a; text-decoration : underline;}
body B {color: #117A65; font-weight : bold;}




/* TEST SECTION */

input[type=button], input[type=submit] {
	background: linear-gradient(to bottom, #2e466e 5%, #415989 100%);
	border-radius: 4px;
	border: 1px solid #1f2f47;
	cursor: pointer;
	color: #ffffff;
	font-family: Arial;
	font-size: 13px;
	text-decoration: none;
  text-align: center;
  margin: 0;
  display: inline-block;
  padding: 1% 2%;
  width: auto;
}

input[type=button]:hover, input[type=submit]:hover
{
	background: linear-gradient(to bottom, #415989 5%, #2e466e 100%);
	background-color: #415989;
}

input[type=button]:active, input[type=submit]:active {
  top: 2px;
}


/* Mobile Bottom Nav */

.menu-navigation-dark {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.menu-navigation-dark a {
    display: inline-block;
    color: #ffffff;
    background-color: #232526;
    font-size: 1.1em;
    font-weight: bold;
    box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.26);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid #161718;
    border-top: none;
    margin: 0 auto;
    width: 25%;
    padding: 1em 0;
    box-sizing: border-box;
}

.menu-navigation-dark a:hover {
    background-color: #27292a;
}

.menu-navigation-dark a:first-child{
    border-left: 1px solid #161718;
}

.menu-navigation-dark a:not(.selected) {
    box-shadow:	1px 3px 5px 0 rgba(0, 0, 0, 0.26),
    inset 1px 0 0 #323435,
    inset 0 1px 0 #282a2b,
    inset 0 -1px 0 #282a2b;
}

.menu-navigation-dark a:last-child {
    box-shadow:	1px 3px 5px 0 rgba(0, 0, 0, 0.26),
    inset 1px 0 0 #323435,
    inset -1px 0 0 #282a2b,
    inset 0 1px 0 #282a2b,
    inset 0 -1px 0 #282a2b;
}

.menu-navigation-dark a i {
    display: block;
    line-height: 1.3;
}

.menu-navigation-dark a span {
    display: block;
    font-size: 11px;
    font-weight: bold;
    line-height: 2;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.menu-navigation-dark a.selected {
    background-color: #1d1e1f;
    border-bottom: 2px solid #4a9fda;
    pointer-events: none;
}

.menu-navigation-dark a.selected i {
    color: #4a9fda;
}

/* Make this page responsive */

.slicknav_menu {
    display:none;
}

@media (max-width: 800px) {
    .menu-navigation-dark{
        display:none;
    }

    .slicknav_nav a i {
        display: none;
    }

    .slicknav_menu {
        display:block;
    }
}


/****** Else ****/






#helpShow {

}

.card {
  margin-bottom: 0.1%;
}
.card .card-subtitle {
    font-weight: 300;
    color: #757e8a;
  }

.card-inverse .card-bodyquote .blockquote-footer,
.card-inverse .card-link,
.card-inverse .card-subtitle,
.card-inverse .card-text {
  color: rgba(255, 255, 255, 0.65);
}

.card-primary {
  background: #7460ee;
  border-color: #7460ee;
}

.card-dark {
  background: #2f3d4a;
  border-color: #2f3d4a;
}

  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

    .full-color-table.full-dark-table {
  background-color: rgba(43, 43, 43, 0.8);
}
  .full-color-table.full-dark-table thead th {
    background-color: #263238;
    border: 0;
    color: #ffffff;
  }
  .full-color-table.full-dark-table tbody td {
    border: 0;
    padding: 2px;
    color: #ffffff;
  }
  .full-color-table.full-dark-table tr:hover {
    background-color: #263238;
    color: #ffffff;
  }
  .Header2 {
    background-color: #263238;
    color: #A7A1AB;
  }

.Header3 {
  border-bottom: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  padding: 0;
  margin-left: 0;
  font-weight: bold;
}

.expPic{
  width: 80%;
  height: 50%;
}

.stats{
    border: 2px solid darkslategrey;
    border-radius: 8px;
    font-size:1em;
    padding: 0.5%;
    color: darkgrey;
}

.statsM{
    border: 2px solid darkslategrey;
    border-radius: 8px;
    font-size: 0.9em;
    padding: 0.25%;
    color: darkgrey;
}


#SBar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  background-color: rgba(245,245,245,0.03);
  border-radius: 10px;
}

#SBar::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(245,245,245,0.03);
}

#SBar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FFF;
  background-image: -webkit-gradient(linear,
  40% 0%,
  75% 84%,
  from(#4D9C41),
  to(#19911D),
  color-stop(.6,#54DE5D))
}

.userN {
  color: #d9deff;
  text-decoration: none;
  font-weight: bold;
}

.btnNavP {
  background: #071A3B;
  background-image: -webkit-linear-gradient(top, #071A3B, #6c899c);
  background-image: -moz-linear-gradient(top, #071A3B, #6c899c);
  background-image: -ms-linear-gradient(top, #071A3B, #6c899c);
  background-image: -o-linear-gradient(top, #071A3B, #6c899c);
  background-image: linear-gradient(to bottom, #071A3B, #6c899c);
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  border-radius: 12px;
  text-shadow: 1px 1px 2px #665f66;
  -webkit-box-shadow: 0px 3px 2px #666666;
  -moz-box-shadow: 0px 3px 2px #666666;
  box-shadow: 0px 2px 1px #666666;
  color: #d9deff;
  padding: 0.1% 1.25% 0.1% 1.25%;
  text-decoration: none;
  font-weight: bold;
}

.btnNavP:hover {
  background: #9aa2a6;
  background-image: -webkit-linear-gradient(top, #9aa2a6, #4a5870);
  background-image: -moz-linear-gradient(top, #9aa2a6, #4a5870);
  background-image: -ms-linear-gradient(top, #9aa2a6, #4a5870);
  background-image: -o-linear-gradient(top, #9aa2a6, #4a5870);
  background-image: linear-gradient(to bottom, #9aa2a6, #4a5870);
  text-decoration: none;
}

.btnNavG {
  background: #071A3B;
  background-image: -webkit-linear-gradient(top, #071A3B, #6c899c);
  background-image: -moz-linear-gradient(top, #071A3B, #6c899c);
  background-image: -ms-linear-gradient(top, #071A3B, #6c899c);
  background-image: -o-linear-gradient(top, #071A3B, #6c899c);
  background-image: linear-gradient(to bottom, #071A3B, #6c899c);
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  border-radius: 12px;
  text-shadow: 1px 1px 2px #665f66;
  -webkit-box-shadow: 0px 2px 1px #666666;
  -moz-box-shadow: 0px 2px 1px #666666;
  box-shadow: 0px 2px 1px #666666;
  color: #d9deff;
  padding: 0.05% 0.50% 0.05% 0.50%;
  text-decoration: none;
  font-weight: bold;
}

.btnNavG:hover {
  background: #9aa2a6;
  background-image: -webkit-linear-gradient(top, #9aa2a6, #4a5870);
  background-image: -moz-linear-gradient(top, #9aa2a6, #4a5870);
  background-image: -ms-linear-gradient(top, #9aa2a6, #4a5870);
  background-image: -o-linear-gradient(top, #9aa2a6, #4a5870);
  background-image: linear-gradient(to bottom, #9aa2a6, #4a5870);
  text-decoration: none;
}

.button-link {
  padding: 0.15em 1em;
  background: #4479BA;
  color: #FFF;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: inset 5px #20538D;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  font-size: 1.1em;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 3px;
}
.button-link:hover {
  background: #356094;
  border: inset 4px #2A4E77;
  text-decoration: none;
}
.button-link:active {
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  background: #2E5481;
  border: solid 4px #203E5F;
}


.button-link2 {
  padding: 0.20em 0.5em;
  background: #4479BA;
  color: #FFF;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: inset 3px #20538D;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  font-size: 0.9em;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 2px;
}
.button-link2:hover {
  background: #356094;
  border: inset 4px #2A4E77;
  text-decoration: none;
}
.button-link2:active {
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  background: #2E5481;
  border: solid 4px #203E5F;
}

.TurnUse {
  margin: 0 auto;
  width: auto;
  color: #fff;
  background: rgb(3, 11, 18);
  border: 1px solid rgba(38, 35, 53, 0.5);
  font-size: 1em;
  border-radius: 0.6em;
  padding: 0.16em;
  margin-bottom: 1px;
}

.TurnUse td {
  border: 1px solid rgba(38, 35, 53, 0.5);
}

.posFont{
  color: limegreen;
}

.negFont{
  color: red;
}

ul#topnavbar{
  margin: auto;
  text-align: center;
}

ul#topnavbar li{
  display: inline;
}

.icon-bar2 {
  width: 98%;
  border: 6px ridge #071A3B;
  background-color: rgba(0,0,0,0.01);
  text-align: left;
  height: auto;
  padding: 1%;
}

.icon-bar2 a {
 display: block;
}

.icon-bar3M {
  position: sticky !important;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1%;
  z-index: 9999;
  background: rgba(0,0,0,0);
  transform: translate(0%, 0%, 0%, 2%);
}

/* Mobile Only Icon Bar */
.icon-bar2M {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  max-width: 100vh;
  background-color: rgba(0,0,0,0.90);
  text-align: center;
  padding: 0;
  transform: translate(0%, 0%, 0%, 2%);
}

.icon-bar2M a {
}

*{
  margin: 0;
  padding: 0;
}

.clear{
  clear: both;
}


.slide-toggle{
  display: none;
}

.slidemenu{
  font-family: arial, sans-serif;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  border: 2px solid white;
  border-bottom: 0;
  padding-top: 2%;
  height: 10%;
}

.slidemenu label{
  width: 25%;
  text-align: center;
  display: block;
  float: left;
  color: white;
  opacity: 0.2;

}

.slidemenu label:hover{
  cursor: pointer;
  color: #666;
}

.slidemenu label span{
  display: block;
  padding: 2%;
}

.slidemenu label .icon{
  font-size: 1em;
  border: solid 2px white;
  text-align: center;
  height: 20%;
  width: 20%;
  display: block;
  margin: 0 auto;
  border-radius: 100%;
}

/*Bar Style*/

.slider{
  width: 100%;
  height: 4px;
  display: block;
  background: #ccc;
  margin-top: 10px;
  border-radius: 5px;
}

.slider .bar{
  width: 25%;
  height: 4px;
  background: #333;
  border-radius: 5px;
}

/*Animations*/
.slidemenu label, .slider .bar {
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
}

/*Toggle*/

.slidemenu .slide-toggle:checked + label{
  opacity: 1;
}



.slidemenu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; }
.slidemenu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; }
.slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; }
.slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; }


/*Hover state for top level links*/
.icon-bar li:hover a {
  background: #19c589;
}
/*Style for dropdown links*/
.icon-bar li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}
/*Hover state for dropdown links*/
.icon-bar li:hover ul a:hover {
  background: #19c589;
  color: #fff;
}

/*Hide dropdown links until they are needed*/
.icon-bar li ul {
  display: none;
}
/*Make dropdown links vertical*/
.icon-bar li ul li {
  display: block;
  float: none;
}
/*Prevent text wrapping*/
.icon-bar li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}
/*Display the dropdown on hover*/
.icon-bar ul li a:hover + .hidden, .hidden:hover {
  display: block;
}


.icon-bar a:hover {
  background-color: #000;
}

#Resources {
    color: #0AB4FF;
    float: right;
    position: relative;
    margin-right: -2em;
    margin-top: 0.3em;
}

#Resources2 {
    color: #0AB4FF;
    float: left;
    position: relative;
}

#Resources span {
    color: #0AB4FF;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid #696969;
    font-size: 1.25em;
    border-radius: 1.2em;
    padding: 0.25em;
    font-weight: bold;
}

#Resources2 span {
    color: #0AB4FF;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid #696969;
    font-size: 0.9em;
    border-radius: 1.1em;
    padding: 0.2em;
}

.PM {
    width: 40px;
    height: 35px;
    border: 0;
}

.Logo {
width: 55%;
height: 100%;
border: 0;
}


.icon-bar ul {
    list-style-type: none;
    padding: 0;
    width: 100%;
    text-align: center;
    }


.icon-bar li {
    display: inline-block;
    }

    /*Style for menu links*/
.icon-bar li a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    }

/*********************** FONTS  ***********************/


.yellowfont{
  font-size: 1.1em;
  color: #C3BBC3;
  font-weight: bold;
}

.yellowfont2{
  font-size: 1.5em;
  color: steelblue;
  font-weight: bold;
}

.eventfont{
  font-size: 1em;
  color: #8a8a00;
  font-weight: bold;
}

.smallfont{
  font-size: .90em;
  color: steelblue;
}

.abovenormalfont{
  font-size: 1.25em;
  color: white;
}

.bigbluefont{
  font-size: 1.5em;
  color: blue;
}

.RedFont{
  color: red;
  font-size: 1.3em;
  font-weight: bold;
}

.RedFont2{
  color: red;
  font-size: 1.1em;
  font-weight: bold;
}

.FRight{
  float: right;
}

.FLeft{
  float: left;
}




/* ----------- Tables ---------- */


.noBorder {
  border:none !important;
}

@media only screen
  and (min-device-width : 260px)
  and (max-device-width : 699px)
  {
Table.Default {
  /* border: 3px solid rgba(38, 35, 53, 0.5); */
  border: 1px solid lightblue;
  margin: 0 auto;
  width: 95%;
  background: linear-gradient(top, #000000 -40%, #323232 75%);
  background: -moz-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -webkit-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -ms-linear-gradient(top, #000000 -40%, #323232 75%);
}
}

Table.Default {
  /* border: 3px solid rgba(38, 35, 53, 0.5); */
  border: 1px solid lightblue;
  margin: 0 auto;
  width: auto;
  background: linear-gradient(top, #000000 -40%, #323232 75%);
  background: -moz-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -webkit-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -ms-linear-gradient(top, #000000 -40%, #323232 75%);
}

Table.Default thead {
  text-align: center;
}

.table1{
  text-align: center;
  margin: 0 auto;
  border: 1px solid white;
  font-size: 1em;
  color: white;
  background-color: rgba(25,25,26,0.85);
  padding: 2px;
}

th, td{
  padding: 1px 3px 1px 3px;
  border: 1px solid black;
}

.table_row1{
  background-color: rgba(35,35,35,0.6);
  text-align: center;
  border: 1px solid white;
}
.table_row2{
  background-color: rgba(35,35,35, 1);
  text-align: center;
  border: 1px solid white;
}
.tr1_header{
  background-color: rgba(35,35,35,0.9);
  text-align: center;
  border: 1px solid white;
  color: white;
}
.tr_black{
  text-align: center;
  font-size: 1em;
  color: black;
  background-color: rgba(196,204,213,0.85);
}

.Header tr{

  /* background-image: radial-gradient(circle, #000000, #111111, #1b1b1b, #252525, #303030); */
   border-top-left-radius: 20%;
   border-top-right-radius: 20%;
}

.Header td{
  background-image: linear-gradient(to bottom, #000207, #090d14, #10151d, #151b26, #192130, #1a2232, #1a2335, #1b2437, #182133, #141d2f, #111a2b, #0e1727);
   color: #DADADA;
   font-weight: bold;
   padding-top: 1%;
   padding-bottom: 1%;
}

.Header th{
  background-image: linear-gradient(to bottom, #000207, #090d14, #10151d, #151b26, #192130, #1a2232, #1a2335, #1b2437, #182133, #141d2f, #111a2b, #0e1727);
   color: #DADADA;
   font-weight: bold;
   padding-top: 1%;
   padding-bottom: 1%;
}


#DefInfra {
  border: 3px solid rgba(38, 35, 53, 0.5);
  margin: 0 auto;
  width: auto;
  background: linear-gradient(top, #000000 -40%, #323232 75%);
  background: -moz-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -webkit-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -ms-linear-gradient(top, #000000 -40%, #323232 75%);
}

#DefInfra tr:hover{
 cursor: pointer;
 background-color: #ccc;
}

#DefInfra td:hover{
 cursor: pointer;
}

#DefInfra thead {
  text-align: center;
}


Table.DefaultLogin {
  /* border: 3px solid rgba(38, 35, 53, 0.5); */
  border: 3px ridge #071A3B;
  margin: 0 auto;
  width: 25%;
  background: linear-gradient(top, #000000 -40%, #323232 75%);
  background: -moz-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -webkit-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -ms-linear-gradient(top, #000000 -40%, #323232 75%);
}

Table.DefaultLogin thead {
  text-align: center;
}


Table.DefaultLogin td {
  padding-right: 2%;
  padding-left: 2%;
  padding-bottom: 3%;
  padding-top: 3%;
  border: 0;
}


Table.Default2 {
  /* border: 3px solid rgba(38, 35, 53, 0.5); */
  border: 0;
  margin: auto;
  text-align: center;
  width: auto;
  background: linear-gradient(top, #000000 -40%, #323232 75%);
  background: -moz-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -webkit-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -ms-linear-gradient(top, #000000 -40%, #323232 75%);
}

Table.Default2 thead {
  text-align: center;
}


Table.Default2 td {
  padding-right: 1%;
  padding-left: 1%;
  padding-bottom: 2%;
  padding-top: 2%;
  border: 0;
}

Table.Default2 tr {
  padding-right: 1%;
  padding-left: 1%;
  padding-bottom: 2%;
  padding-top: 2%;
  border: 0;
}

Table.Default2 input {
  border-radius: 4px;
  border: 0;
  text-align: center;
  width: 50%;
}

Table.Default2 input:active {
  border-radius: 4px;
  border: 0;
  text-align: center;
  top: 2px;
}

Table.Fusion {
  /* border: 3px solid rgba(38, 35, 53, 0.5); */
  border: 0;
  margin: auto;
  text-align: center;
  width: auto;
  background: linear-gradient(top, #000000 -40%, #323232 75%);
  background: -moz-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -webkit-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -ms-linear-gradient(top, #000000 -40%, #323232 75%);
}

Table.Fusion thead {
  text-align: center;
}


Table.Fusion td {
  padding-right: 0.5%;
  padding-left: 0.5%;
  padding-bottom: 1%;
  padding-top: 1%;
  border: 0;
}

Table.Fusion tr {
  padding-right: 0.5%;
  padding-left: 0.5%;
  padding-bottom: 1%;
  padding-top: 1%;
  border: 0;
}

Table.Stocks {
  /* border: 3px solid rgba(38, 35, 53, 0.5); */
  border: 0;
  margin: auto;
  text-align: center;
  width: auto;
  font-size: 0.9em;
  background: linear-gradient(top, #000000 -40%, #323232 75%);
  background: -moz-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -webkit-linear-gradient(top, #000000 -40%, #323232 75%);
  background: -ms-linear-gradient(top, #000000 -40%, #323232 75%);
}

Table.Stocks thead {
  text-align: center;
}


Table.Stocks td {
  padding-right: 0.125%;
  padding-left: 0.125%;
  padding-bottom: 0.25%;
  padding-top: 0.25%;
  border: 0;
}

Table.Stocks tr {
  padding-right: 0.125%;
  padding-left: 0.125%;
  padding-bottom: 0.25%;
  padding-top: 0.25%;
  border: 0;
}



/* SCIFITEST1 */

.containerB {
  position: relative;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.containerB hr {
  visibility: hidden;
}
.containerB button {
  width: 20%;
  height: 15%;
  box-sizing: border-box;
  background: none;
  border: none;
  margin: 1.5%;
  background-color: #42D6CA;
  border: 5px solid #42D6CA;
  transition: all 0.5s ease;
}

.containerB button:focus {
  outline: none;
  opacity: 0.2;
}
.containerB button:before {
  border: 2px transparent solid;
  position: relative;
  left: 5px;
  top: 5px;
  box-sizing: border-box;
  width: 50%;
  height: 20%;
  transition: all 0.7s ease;
}
.containerB button:hover {
  background-color: rgba(66, 214, 202, 0.7);
  color: #fff;
  border-radius: 20px;
}
.containerB button:hover:before {
  border-radius: 20px;
  border: 2px #42D6CA solid;
}


.containerC {
  position: relative;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.containerC hr {
  visibility: hidden;
}
.containerC button {
  width: 20%;
  height: 15%;
  box-sizing: border-box;
  background: none;
  border: none;
  margin: 1.5%;
  background-color: #42D6CA;
  border: 5px solid #42D6CA;
  transition: all 0.5s ease;
  background-color: rgba(66, 214, 202, 0.1);
  border-radius: 50px;
  color: #42D6CA;
}

.containerC button:hover {
  background-color: rgba(66, 214, 202, 0.2);
}
.containerC button:hover:before {
  border-radius: 20px;
  border: 2px #42D6CA solid;
  position: fixed;
  left: 50%;
  top: 25%;
  box-sizing: border-box;
  width: 40%;
  height: 15%;
  transition: all 0.7s ease;
  animation: grow 1s infinite;
}

@keyframes grow {
  from {
    transform: scale(0, 0);
    opacity: 1;
  }
  to {
    transform: scale(1.5, 1.5);
    opacity: 0;
  }
}


Table.Default3 {
  /* border: 3px solid rgba(38, 35, 53, 0.5); */
  margin: auto;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  text-align: center;
  width: auto;
  background-image: url(i/tbbg1.jpg);
}

Table.Default3 thead {
  text-align: center;
}

.Header3 td{
   background: rgb(51,52,52);
   background: linear-gradient(194deg, rgba(51,52,52,1) 0%, rgba(61,78,78,1) 48%);
   border-top-left-radius: 18px;
   border-top-right-radius: 18px;
   color: #DADADA;
   font-weight: bold;
   padding-top: 1%;
   padding-bottom: 1%;
}


Table.Default3 td {
  padding-right: 1%;
  padding-left: 1%;
  padding-bottom: 2%;
  padding-top: 2%;
  border: 0;
}

Table.Default3 tr {
  padding-right: 1%;
  padding-left: 1%;
  padding-bottom: 2%;
  padding-top: 2%;
  border: 0;
}

Table.Default3 input {
  border-radius: 4px;
  border: 0;
  text-align: center;
  width: 50%;
}

Table.Default3 input:active {
  border-radius: 4px;
  border: 0;
  text-align: center;
  top: 2px;
}


.publicInput {
  font-family: "Arvo";
  font-weight: 400;
  color: #377D6A;
  background: rgba(0,0,0,0.3);
  border: none;
  outline: none;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 4px;
  box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px  1px rgba(255,255,255,0.2);
  position: relative;
  font-size: 15px;
}

.btn-div {
  display: flex;
  flex-direction: column;
  height: 93vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
  font-family: "Dosis", sans-serif;
}

.brk-btn {
  position: relative;
  background: none;
  color: lightblue;
  text-decoration: none;
  border: 0.15em solid slategrey;
  padding: 0.25em 0.5em;
}

.brk-btn::before {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: black;
  height: 0.3em;
  right: 20%;
  top: -0.21em;
  transform: skewX(-45deg);
  -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.brk-btn::after {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: black;
  height: 0.3em;
  left: 20%;
  bottom: -0.25em;
  transform: skewX(45deg);
  -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}
.brk-btn:hover::before {
  right: 80%;
}
.brk-btn:hover::after {
  left: 80%;
}



/* Nav Buttons */

.buttonN {
    position: relative;
    overflow: visible;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid darkslategrey;
    margin: 0;
    text-decoration: none;
    text-align: center;
    font: 11px/normal sans-serif;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    background-color: #141E30;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#141E30), to(#243B55));
    background-image: -moz-linear-gradient(#141E30, #243B55);
    background-image: -ms-linear-gradient(#141E30, #243B55);
    background-image: -o-linear-gradient(#141E30, #243B55);
    background-image: linear-gradient(#141E30, #243B55);
    -moz-background-clip: padding; /* for Firefox 3.6 */
    background-clip: padding-box;
    border-radius: 0.2em;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}
/*
.buttonN:hover,
.buttonN:focus,
.buttonN:active,
.buttonN.active {
    border-color: #3072b3;
    border-bottom-color: #2a65a0;
    text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #fff;
    background-color: darkgrey;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
    background-image: -moz-linear-gradient(#599bdc, #3072b3);
    background-image: -o-linear-gradient(#599bdc, #3072b3);
    background-image: linear-gradient(#599bdc, #3072b3);
}
*/
.buttonN:hover,
.buttonN:focus,
.buttonN:active,
.buttonN.active {
      -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 20px yellow;
    }
/*
.buttonN:active,
.buttonN.active {
    border-color: #2a65a0;
    border-bottom-color: #3884cd;
    background-color: #3072b3;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
    background-image: -moz-linear-gradient(#3072b3, #599bdc);
    background-image: -ms-linear-gradient(#3072b3, #599bdc);
    background-image: -o-linear-gradient(#3072b3, #599bdc);
    background-image: linear-gradient(#3072b3, #599bdc);
}
*/

/* overrides extra padding on button elements in Firefox */
.buttonN::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.buttonN.pill {
    border-radius: 50em;
}

.buttonN-group {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}

.buttonN + .buttonN,
.buttonN + .buttonN-group,
.buttonN-group + .buttonN,
.buttonN-group + .buttonN-group {
    margin-left: 15px;
}

.buttonN-group li {
    padding: 0;
    margin: 0;
}

.buttonN-group > .buttonN:not(:first-child):not(:last-child),
.buttonN-group li:not(:first-child):not(:last-child) .buttonN {
    border-radius: 0;
}

.buttonN-group > .buttonN:first-child,
.buttonN-group li:first-child .buttonN {
    margin-left: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.buttonN-group > .buttonN:last-child,
.buttonN-group li:last-child > .buttonN {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.buttonN-container .buttonN,
.buttonN-container .buttonN-group {
    vertical-align: top;
}


/* Bottom Mobile Nav Bar */

.buttonNM {
    position: relative !important;
    overflow: visible;
    display: inline-block !important;
    padding: 0 !important;
    border: 1px solid darkslategrey;
    margin: 0;
    width: 100%;
    height: 7.5vh;
    text-decoration: none;
    font-weight: bold;
    color: #b41837;
    text-align: center;
    font: 11px/sans-serif;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    background-color: #141E30;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#141E30), to(#243B55));
    background-image: -moz-linear-gradient(#141E30, #243B55);
    background-image: -ms-linear-gradient(#141E30, #243B55);
    background-image: -o-linear-gradient(#141E30, #243B55);
    background-image: linear-gradient(#141E30, #243B55);
    -moz-background-clip: padding; /* for Firefox 3.6 */
    background-clip: padding-box;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}

.buttonNM:hover,
.buttonNM:focus,
.buttonNM:active,
.buttonNM.active {
      -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 20px yellow;
    }

    /* overrides extra padding on button elements in Firefox */
    .buttonNM::-moz-focus-inner {
        padding: 0;
        border: 0;
    }





/* MOBILE NAV BAR DROPDOWN TEST */

.dropdown-menu {
  outline: none;
  background-color: #141E30;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#141E30), to(#243B55));
  background-image: -moz-linear-gradient(#141E30, #243B55);
  background-image: -ms-linear-gradient(#141E30, #243B55);
  background-image: -o-linear-gradient(#141E30, #243B55);
  background-image: linear-gradient(#141E30, #243B55);
  -moz-background-clip: padding; /* for Firefox 3.6 */
  background-clip: padding-box;
  border: 1px solid darkslategrey;
}

.dropdown-item {
  margin-top: 1%;
  border: 1px solid darkslategrey;
  white-space: nowrap;
}

.btn-primary {
  background-color: #2e2a2a;
  border-radius: 0;
}

/* END TEST SECTION */



  a{
    color: #00aeef;
  }

  a:hover {
    outline: none;
    text-decoration:underline;
    color: #4fcccd;
  }

  a:focus {
    outline:none;
    outline-offset: 0;
  }

  a {
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
  }


  ul {
    list-style: none;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
  }

  h1{
    color: #686868;
  }

  h2{
    font-size: 14px;
    color: #33CC33;
    margin: 0;
    padding-bottom: 2px;
  }

  h3{
    font-size: 14px;
    color: #33CC33;
  }

  .overflow{
    overflow: hidden;
  }

  .uppercase{
    text-transform: uppercase;
  }

  .btn-common {
    font-size: 14px;
    color: #0099ae;
    border: 1px solid #0099ae;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    padding: 10px 25px;
  }

  #action .col-sm-5{
    position: absolute;

    top: 0;
    height: 100%;
    right: 0;
  }


  .btn-common:hover,
  .btn-common:focus{
    outline: none;
    background: none;
    box-shadow: none;
    color: #01707f;
    border-color:#01707f;
  }

  .align-right{
    text-align: right;
  }

  .inline{
    display: inline-block;
  }

  .padding{
    padding: 65px 0;
  }

  .padding-bottom{
    padding-bottom: 65px;
  }

  .padding-top{
    padding-top: 90px;
  }

  .padding-right{
    padding-right: 80px;
  }

  .padding-left{
    padding-left: 80px;
  }

  .margin-bottom{
    margin-bottom: 35px;
  }

     .carousel-indicators.visible-xs {
      height: 20px;
      margin: 0;
      padding: 0;
      position: absolute;
      top: -35px;
      width: 100%;
      left: 0;
    }

  .carousel-indicators.visible-xs li {
    border-color: #D29948;
    border-width: 2px;
    height: 12px;
    margin: 0 5px 0 0;
    width: 12px;
  }

  .carousel-indicators.visible-xs li.active {
    background: rgba(210, 153, 72, 0.7);
  }


  a.button{
    color:#fff;
    border: 1px solid darkslategrey;
    position:relative;
    font-size:1em;
    padding: 0;
    cursor:pointer;
    transition:800ms ease all;
    outline:none;

  }
  a.button:hover{
    background:#fff;
    color:#1AAB8A;
  }
  a.button:before,button:after{
    content:'';
    background: darkslategrey;
    transition:400ms ease all;
  }
  a.button:after{
    right:inherit;
    top:inherit;
    left:0;
    bottom:0;
  }

  a.button:hover:before,button:hover:after{
    width:100%;
    transition:800ms ease all;
  }


  /* Smaller buttons styles */

  .button.small{
    padding: 1.5% 3%;
  }

  /* Larger buttons styles */

  .button.large{
    padding: 12px 30px;
    text-transform: uppercase;
  }

  .button.large:active{
    top: 2px;
  }




/*************************
*******Header******
**************************/


#header{
  background-color: black;
}

#header .navbar-inverse .container{
  position: relative;
}

.search{
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 1;
}

.search i{
  color: #00aeef;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 2px;
}

.field-toggle{
  position: relative;
  top: 30px;
  right: 15px;
  display: none;
  height: 50px;
}

.search-form{
  padding-left: 10px;
  height: 40px;
  font-size: 18px;
  color: #818285;
  font-weight: 300;
  outline: none;
  border: 1px solid #00aeef;
  margin-top: 20px;
  border-radius: 4px;
}

.social-icons ul li{
  padding: 0 10px;

}

.social-icons ul li:last-child{
  padding-right: 0;

}

.social-icons ul li a{
  font-size: 18px;
  color: #d3d3d3;
  padding: 0;
}

.social-icons ul li a:hover .fa-facebook {
  color:#0884d5;
}

.social-icons ul li a:hover .fa-twitter {
  color:#2AA7DC;
}

.social-icons ul li a:hover .fa-google-plus {
  color:#A22523;
}

.social-icons ul li a:hover .fa-dribbble {
  color:#E94989;
}

.social-icons ul li a:hover .fa-linkedin {
  color:#006DC0;
}

.social-icons ul li a:hover,
.social-icons ul li a:focus{
  background: none;
}

#header .navbar {
  border: 0;
}

#header .navbar-inverse {
  border: 1px solid darkslategrey;
}


/*  Dropdown menu*/

ul.sub-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

#header .navbar-nav li ul.sub-menu li a{
  color: #818285;
  padding: 5px 0;
  font-size: 13px;
  display: block;
  text-transform: capitalize;
}

#header .navbar-nav li ul.sub-menu li .active{
  background: #00aeef;
  color: #fff;
  position: relative;
}

#header .navbar-nav li ul.sub-menu li .active i{
  position: absolute;
  font-size: 56px;
  top: -13px;
  color: #0884d5;
}

#header .navbar-nav li ul.sub-menu li .active .fa-angle-right{
  left: -3px;
}

#header .navbar-nav li ul.sub-menu li .active .fa-angle-left{
  right: -3px;
}

#header .navbar-nav li ul.sub-menu li a:hover,
#header .navbar-nav li ul.sub-menu li a:focus{
  background: #FFFFFF;
  color: #00aeef;
}

.fa-angle-down{
  padding-left: 5px;
}

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
}

@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}


/*************************
*******Footer******
**************************/

#footer {
  padding-bottom: 10px;
  background-size: contain;
}

#footer h1{
  margin-bottom: 65px;
  margin-top: 36px;
}

#footer .bottom-separator {
  margin-bottom: 60px;
}

#message {
  height: 110px;
  resize: none;
}

.bottom > h2 {
  margin-top: 0;
  margin-bottom: 26px;
}

.bottom .media-body h3 {
  margin-top: 0;
  padding-left: 25px;
}

.bottom .media-body h3 a{
  color: #ea2c00;
}

.testimonial .media{
  margin-top: 0;
  margin-bottom: 0.1%;
}

.testimonial .media>.pull-left{
  margin-right: 25px;
}

.testimonial .media>.pull-left img{
  margin-top: 6px;
}

.testimonial .media .media-body blockquote{
  padding-left: 25px;
  padding-right: 30px;
  position: relative;
  border-left: 0;
  margin-bottom: 0;
}

.testimonial .media .media-body blockquote:before{
  position: absolute;
  left: 5px;
  top: 8px;
  content: '"';
  font-size: 40px;
  color: #ea2c00;
  font-family: 'Noto Sans', sans-serif;
  transform:rotate(180deg);
  -ms-transform:rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Opera, Chrome, and Safari */
  line-height: 0;
}

.testimonial .media .media-body blockquote:after{
  position: absolute;
  right: 30px;
  bottom: 14px;
  content: '"';
  font-size: 40px;
  color: #ea2c00;
  font-family: 'Noto Sans', sans-serif;
  line-height: 0;
}

.contact-info.bottom {
  padding-left: 25px;
}

.bottom > address {
  line-height: 22px;
  margin-bottom: 40px;
}

.form-control {
  border: 1px solid #eaeaea;
  font-weight: 300;
  outline: none;
  box-shadow: none;
  height: 40px;
}

.form-control:hover,
.form-control:focus{
  border-color: #4fcccd;
  outline: none;
  box-shadow: none;
}

.btn-submit {
  width: 100%;
  background-color: #4fcccd;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 5px;
  text-transform: uppercase;
  border-radius: 3px;
  margin-top: 5px;
  border-bottom: 3px solid #2f9697;
  box-shadow: none;
  padding: 10px;
}

.btn-submit:hover,
.btn-submit:focus{
  color: #fff;
  outline: none;
  box-shadow: none;
  opacity: .8;
}

.copyright-text{
  margin-top: 70px;
  color: #fff;
  font-size: 16px;
  padding-bottom: 15px;
}

.copyright-text a {
  color: #3e848a
}

.copyright-text p {
  margin-bottom: 0;
}


/*****************************
Default
*****************************/

.post-thumb{
  margin: -1px -1px 0;
  position: relative;
  overflow: hidden;
}

.arrow-right{
  position: relative;
}

.arrow-right:after{
  position: absolute;
  right: 1px;
  content: "";
  top: 15px;
  background: url(CSS/Game/Dev/Images/blog/left.png);
  width: 43px;
  height: 54px;
}

.arrow-left{
  position: relative;
}

.arrow-left:before{
  position: absolute;
  left: -2px;
  content: "";
  top: 86px;
  background: url(CSS/Game/Dev/Images/blog/right.png);
  width: 43px;
  height: 54px;
}

.post-title {
  margin-top: 0;
}

.post-content .post-author{
  margin-top: 0;
}

.post-content  .post-author a{
  font-weight: 300;
  font-size: 14px;
  color: #0099AE;
}

.post-bottom{
  border-top: 1px solid #eeeeee;
  padding-top: 10px;
  margin-top: 20px;
  margin: 20px -20px 0;
  padding: 20px 20px 0;
}






/*************************
********404 page CSS******
**************************/

#error-page {
  display: table;
  height: 100%;
  min-height: 100%;
  width: 100%;
  color: #686868;
  font-size: 18px;
  font-weight: 300;
  padding: 100px 0;
}

#error-page .container-fluid {
  overflow: hidden;
}

.error-page-inner {
  display: table-cell;
  vertical-align: middle;
}

.bg-404 {
  background-image: url("CSS/Game/Dev/Images/home/tour-bg.png");
  background-repeat: repeat-x;
  background-position: center top;
}

.error-image {
  display: inline-block;
  padding-top: 50px;
  padding-bottom: 50px;
}

.error-image img {
  width: 100%;
}

#error-page h2 {
  font-size:36px;
  text-transform: uppercase;
}

.btn-error {
  font-weight: 300;
  margin-top: 30px;
  padding:25px 55px;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 5px;
  background-color: transparent;
  border: 1px solid #cc9b59;
  margin-top: 50px;
  margin-bottom: 50px;
}

.btn-error:hover, .btn-error:focus  {
  background-color: #cc9b59;
  border-color:#cc9b59;
  color:#fff;
}

#error-page i, #coming-soon i {
  border: 1px solid #cc9b59;
  height: 40px;
  width: 40px;
  line-height: 40px;
  color: #cc9b59;
  font-size: 17px;
  margin:0 15px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#error-page i:hover, #coming-soon i:hover {
  background-color: #cc9b59;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


/*************************
********404 page CSS******
**************************/

#error-page {
  display: table;
  height: 100%;
  min-height: 100%;
  width: 100%;
  color: #686868;
  font-size: 18px;
  font-weight: 300;
  padding: 100px 0;
}

#error-page .container-fluid {
  overflow: hidden;
}

.error-page-inner {
  display: table-cell;
  vertical-align: middle;
}

.bg-404 {
  background-image: url("CSS/Game/Dev/Images/404-bg.png");
  background-repeat: repeat-x;
  background-position: center top;
}

.error-image {
  display: inline-block;
  padding-top: 50px;
  padding-bottom: 50px;
}

.error-image img {
  width: 100%;
}

#error-page h2 {
  font-size:36px;
  text-transform: uppercase;
}

.btn-error {
  background-color: rgba(0, 0, 0, 0);
  border: 3px solid #4FCCCD;
  color: #797979;
  font-size: 16px;
  font-weight: 700;
  letter-spacing:0;
  margin-bottom: 50px;
  margin-top: 50px;
  padding: 25px 53px;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
}

.btn-error:hover, .btn-error:focus  {
  background-color: #4FCCCD;
  border-color:#4FCCCD;
  color:#fff;
}

#error-page i, #coming-soon i {
  border: 3px solid #cecece;
  height: 40px;
  width: 40px;
  line-height: 35px;
  color: #cecece;
  font-size: 17px;
  margin:0 15px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#error-page i.fa-twitter:hover,
#coming-soon i.fa-twitter:hover,
#error-page i.fa-twitter:hover,
#coming-soon i.fa-twitter:hover,
#error-page i.fa-google-plus:hover,
#coming-soon i.fa-google-plus:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#error-page i.fa-facebook:hover,
#coming-soon i.fa-facebook:hover{
  background-color:transparent;
  color: #314A87;
  border-color:#314A87;
}

#error-page i.fa-twitter:hover,
#coming-soon i.fa-twitter:hover{
  background-color:transparent;
  color: #22BBF4;
  border-color:#22BBF4;
}

#error-page i.fa-google-plus:hover,
#coming-soon i.fa-google-plus:hover{
  background-color:transparent;
  color: #DD4C3B;
  border-color:#DD4C3B;
}


/*Shortcodes CSS*/
.bs-example{
  margin: 0 0 20px;
}

.panel-group{
  border: 1px solid #eee;
}
.panel-default{
  border: 0;
}
.panel-group .panel{
  border-radius: 0;
}
.panel-group .panel+.panel{
  margin-top: 0;
}

.panel-default>.panel-heading{
  background-color: transparent;
  border-top: 1px solid #eee;
}

.panel-group .panel-default:first-child>.panel-heading{
  border-top: 0;
}

.panel-default>.panel-heading+.panel-collapse .panel-body{
  border-top-color: #eee;
}


.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{
  background-color: #4FCCCD;
}

.tab-content {
  padding-top: 20px;
}

/*Features*/
.feature-inner{
  text-align: center;
}
.icon-wrapper{
  display: inline-block;
  background-color: #4FCCCD;
  color: #fff;
  padding: 25px;
  box-shadow: 0 0 0 5px rgba(0,0,0,.1) inset;
  -webkit-box-shadow: 0 0 0 5px rgba(0,0,0,.1) inset;
  border-radius: 100%;
  margin: 10px 0;
}

/*BW Sort however*/
.TDSub .MobileTDSub {
  cursor: arrow;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Opera and Firefox */
}

.TDSub:hover .MobileTDSub:hover {
  background-color: #444444;
}

.TDSub:active .MobileTDSub:active {
  background-color: #7B241C;
}

.TDAdd .MobileTDAdd {
  cursor: arrow;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Opera and Firefox */
}

.TDAdd:hover .MobileTDAdd:hover {
  background-color: #444444;
}

.TDAdd:active .MobileTDAdd:active {
  background-color: #145A32;
}



/* Slicknav */

.slicknav_menu:after,
.slicknav_menu:before{
  display:table;
  content:" "
  position: fixed;
  bottom: 0;
}
  .slicknav_btn,
  .slicknav_nav
  .slicknav_item {
    cursor: pointer
  }
  .slicknav_menu,
  .slicknav_menu *{
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
  }
  .slicknav_nav,
  .slicknav_nav ul{
    padding:0;
    list-style:none;
    overflow:hidden
  }
  .slicknav_btn{
    position:relative;
    display:block;
    vertical-align:middle;
    float:right;
    padding:.438em .625em;
    line-height:1.125em}
    .slicknav_btn
    .slicknav_icon-bar+.slicknav_icon-bar{
      margin-top:.188em}
      .slicknav_menu
      .slicknav_menutxt {
        display:block;
        line-height:1.188em;
        float:left;
        color:#fff;
        font-weight:700;
        text-shadow:0 1px 3px #000
        }
        .slicknav_menu .slicknav_icon{
          float:left;
          margin:.188em 0 0 .438em
          }
          .slicknav_menu
          .slicknav_no-text{
            margin:0
            }
          .slicknav_menu
          .slicknav_icon-bar{
            display:block;
            width:1.125em;
            height:.125em;
            -webkit-border-radius:1px;
            -moz-border-radius:1px;
            border-radius:1px;
            -webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);
            -moz-box-shadow:0 1px 0 rgba(0,0,0,.25);
            box-shadow:0 1px 0 rgba(0,0,0,.25)}

            .slicknav_menu:after{
              clear:both }
            .slicknav_nav li,
            .slicknav_nav ul{
              display:block
              }
            .slicknav_nav
            .slicknav_arrow{
              font-size:.8em;
              margin:0 0 0 .4em }
          .slicknav_nav
          .slicknav_item a {
            display:inline }
          .slicknav_nav
          .slicknav_row,
          .slicknav_nav a{
            display:block}
          .slicknav_nav
          .slicknav_parent-link a{
          display:inline}
        .slicknav_menu{
          *zoom:1;
          font-size: 16px;
          background: #4c4c4c;
          padding: 5px }
        .slicknav_menu
        .slicknav_icon-bar{
          background-color: #fff }
        .slicknav_btn {
        margin: 5px 5px 6px;
        text-decoration: none;
        text-shadow: 0 1px 1px rgba(255,255,255,.75);
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        background-color:#222 }
        .slicknav_nav {
          clear: both;
          color: #fff;
          margin:0;
          font-size:.875em }
        .slicknav_nav ul{
          margin: 0 0 0 20px;
          }
        .slicknav_nav
        .slicknav_row,
        .slicknav_nav a{
          padding: 5px 10px;
          margin: 2px 5px }
        .slicknav_nav
        .slicknav_row:hover{
          -webkit-border-radius:6px;
          -moz-border-radius:6px;
          border-radius:6px;
          background:#ccc;
          color:#fff}

        .slicknav_nav a{
          text-decoration:none;
          color:#fff}

        .slicknav_nav a:hover{
        -webkit-border-radius:6px;
        -moz-border-radius:6px;
        border-radius:6px;
        background:#ccc;
        color:#222 }

      .slicknav_nav
      .slicknav_txtnode{
        margin-left: 15px }

      .slicknav_nav
      .slicknav_item a,
      .slicknav_nav
      .slicknav_parent-link a {
      padding: 0;
      margin: 0
    }

    .slicknav_brand{
      float :left;
      color: #fff;
      font-size: 18px;
      line-height: 30px;
      padding: 7px 12px;
      height: 44px}

/* ========================================
   MATCHMAKING UI STYLES - Modern Update
   ======================================== */

/* Glass morphism cards */
.mm-card {
  background: rgba(15, 15, 25, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.mm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Header gradient card */
.mm-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
  color: white;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
  position: relative;
  overflow: hidden;
}

.mm-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.mm-header h1 {
  margin: 0 0 12px 0;
  font-size: 2.8em;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: white;
}

.mm-header p {
  font-size: 1.1em;
  margin: 0;
  opacity: 0.95;
  color: rgba(255, 255, 255, 0.95);
}

/* Status cards */
.mm-status-card {
  background: linear-gradient(145deg, rgba(25, 25, 35, 0.9), rgba(35, 35, 45, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.mm-status-card:hover {
  transform: scale(1.02);
  border-color: rgba(255, 255, 255, 0.15);
}

.mm-status-card h3 {
  color: #4fc3f7;
  margin: 0;
  font-size: 2em;
  font-weight: 600;
}

.mm-status-card p {
  margin: 8px 0 0 0;
  color: #9ca3af;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mm-status-card.green {
  border-left: 4px solid #4caf50;
}

.mm-status-card.orange {
  border-left: 4px solid #ff9800;
}

.mm-status-card.blue {
  border-left: 4px solid #2196f3;
}

.mm-status-card.purple {
  border-left: 4px solid #9c27b0;
}

/* Modern buttons */
.mm-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 14px 28px;
  text-decoration: none;
  border-radius: 8px;
  display: inline-block;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.95em;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.mm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
  color: white;
  text-decoration: none;
}

.mm-btn:active {
  transform: translateY(0);
}

.mm-btn.primary {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.mm-btn.primary:hover {
  box-shadow: 0 6px 25px rgba(76, 175, 80, 0.4);
}

.mm-btn.secondary {
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.mm-btn.secondary:hover {
  box-shadow: 0 6px 25px rgba(33, 150, 243, 0.4);
}

.mm-btn.danger {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
}

.mm-btn.danger:hover {
  box-shadow: 0 6px 25px rgba(244, 67, 54, 0.4);
}

.mm-btn.ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.mm-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Login/Auth panels */
.mm-auth-panel {
  background: linear-gradient(145deg, rgba(20, 20, 30, 0.95), rgba(30, 30, 40, 0.95));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.mm-auth-panel h3 {
  color: #fff;
  text-align: center;
  margin: 0 0 8px 0;
  font-size: 1.8em;
  font-weight: 600;
}

.mm-auth-panel p {
  text-align: center;
  color: #9ca3af;
  margin-bottom: 28px;
}

.mm-form-group {
  margin-bottom: 20px;
}

.mm-form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #e0e0e0;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mm-form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1em;
  transition: all 0.3s ease;
}

.mm-form-group input:focus {
  outline: none;
  border-color: #667eea;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Info panels */
.mm-info-card {
  background: linear-gradient(145deg, rgba(25, 25, 40, 0.9), rgba(35, 35, 50, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.mm-info-card h3 {
  color: #4fc3f7;
  margin: 0 0 16px 0;
  font-size: 1.5em;
  font-weight: 600;
}

.mm-info-card h4 {
  color: #667eea;
  margin: 0 0 8px 0;
  font-size: 1.1em;
  font-weight: 500;
}

.mm-info-card p {
  color: #9ca3af;
  margin: 0 0 16px 0;
  line-height: 1.6;
}

/* Alert/Notice boxes */
.mm-alert {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid;
  font-weight: 500;
}

.mm-alert.success {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.3);
  color: #4caf50;
}

.mm-alert.error {
  background: rgba(244, 67, 54, 0.1);
  border-color: rgba(244, 67, 54, 0.3);
  color: #f44336;
}

.mm-alert.warning {
  background: rgba(255, 152, 0, 0.1);
  border-color: rgba(255, 152, 0, 0.3);
  color: #ff9800;
}

.mm-alert.info {
  background: rgba(33, 150, 243, 0.1);
  border-color: rgba(33, 150, 243, 0.3);
  color: #2196f3;
}

/* Leaderboard styling */
.mm-leaderboard {
  background: rgba(20, 20, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.mm-leaderboard h4 {
  color: #fff;
  margin: 0 0 16px 0;
  font-size: 1.3em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mm-leaderboard-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.mm-leaderboard-item:hover {
  background: rgba(255, 255, 255, 0.03);
  padding-left: 12px;
}

.mm-leaderboard-item:last-child {
  border-bottom: none;
}

.mm-rank {
  font-weight: 700;
  font-size: 1.1em;
  min-width: 30px;
}

.mm-rank.gold { color: #ffd700; }
.mm-rank.silver { color: #c0c0c0; }
.mm-rank.bronze { color: #cd7f32; }
.mm-rank.normal { color: #9ca3af; }

.mm-username {
  flex: 1;
  color: #e0e0e0;
  margin: 0 12px;
}

.mm-mmr {
  color: #4fc3f7;
  font-weight: 600;
  font-size: 1.05em;
}

/* Recent matches */
.mm-match-item {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.mm-match-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.mm-match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mm-match-result {
  font-weight: 600;
  font-size: 1.05em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mm-match-result.win { color: #4caf50; }
.mm-match-result.loss { color: #f44336; }
.mm-match-result.draw { color: #ff9800; }

.mm-match-date {
  font-size: 0.85em;
  color: #6b7280;
}

.mm-match-details {
  font-size: 0.9em;
  color: #9ca3af;
  display: flex;
  gap: 16px;
}

.mm-mmr-change {
  font-weight: 500;
}

.mm-mmr-change.positive { color: #4caf50; }
.mm-mmr-change.negative { color: #f44336; }

/* How it works section */
.mm-steps {
  background: rgba(15, 15, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px;
  margin-top: 32px;
}

.mm-steps h3 {
  color: #fff;
  text-align: center;
  margin: 0 0 32px 0;
  font-size: 1.8em;
  font-weight: 600;
}

.mm-step {
  text-align: center;
  padding: 20px;
  transition: all 0.3s ease;
}

.mm-step:hover {
  transform: translateY(-4px);
}

.mm-step-number {
  font-size: 2.5em;
  margin-bottom: 12px;
}

.mm-step h4 {
  color: #e0e0e0;
  margin: 0 0 8px 0;
  font-size: 1.2em;
  font-weight: 600;
}

.mm-step p {
  color: #9ca3af;
  margin: 0;
  font-size: 0.95em;
  line-height: 1.5;
}

/* Animations */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.mm-pulse {
  animation: pulse 2s infinite;
}

/* Loading spinner */
.mm-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mm-header {
    padding: 24px;
  }

  .mm-header h1 {
    font-size: 2em;
  }

  .mm-card {
    padding: 16px;
  }

  .mm-auth-panel {
    padding: 20px;
  }

  .mm-btn {
    padding: 12px 20px;
    font-size: 0.9em;
  }

  .mm-status-card {
    padding: 16px;
  }

  .mm-status-card h3 {
    font-size: 1.5em;
  }
}

/* ========================================
   CURRENT MATCH WAR DISPLAY - SCI-FI THEME
   ======================================== */

/* Main container for the war display */
.war-display-container {
  background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 100%);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  border: 1px solid rgba(0, 212, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Match Elo Header Card */
.match-elo-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d4f73 100%);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.match-elo-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  animation: shimmer-subtle 3s infinite;
}

@keyframes shimmer-subtle {
  0% { left: -100%; }
  100% { left: 100%; }
}

.match-elo-title {
  color: #00d4ff;
  font-size: 1.2em;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.match-rank-badge {
  display: inline-block;
  background: linear-gradient(135deg, #4fc3f7 0%, #00d4ff 100%);
  color: #0a1628;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 0.9em;
  margin-left: 8px;
  text-shadow: none;
}

/* Team Statistics Container */
.teams-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* Individual Team Cards */
.team-card {
  border-radius: 8px;
  padding: 20px;
  position: relative;
  border: 1px solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.team-card-a {
  background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
  border-color: rgba(63, 81, 181, 0.4);
  color: #e8eaf6;
}

.team-card-b {
  background: linear-gradient(135deg, #b71c1c 0%, #e53935 100%);
  border-color: rgba(244, 67, 54, 0.4);
  color: #ffebee;
}

.team-header {
  font-size: 1.1em;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.team-stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.team-stats-list li {
  padding: 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-stats-list li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-label {
  font-weight: 500;
  opacity: 0.9;
}

.stat-value {
  font-weight: 700;
  font-size: 1.1em;
}

.war-points {
  color: #4caf50;
  text-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}

/* Recent Battles Section */
.recent-battles-section {
  background: linear-gradient(135deg, #263238 0%, #37474f 100%);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.recent-battles-header {
  color: #00d4ff;
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.battles-scroll-container {
  max-height: 300px;
  overflow-y: auto;
  border-radius: 4px;
}

/* Custom Scrollbar */
.battles-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.battles-scroll-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.battles-scroll-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #00d4ff 0%, #4fc3f7 100%);
  border-radius: 4px;
}

.battles-scroll-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #4fc3f7 0%, #00d4ff 100%);
}

/* Modern Battle Table */
.modern-battle-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.modern-battle-table thead {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d4f73 100%);
}

.modern-battle-table th {
  padding: 12px 8px;
  text-align: center;
  color: #00d4ff;
  font-weight: 600;
  font-size: 0.9em;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.modern-battle-table td {
  padding: 10px 8px;
  text-align: center;
  font-size: 0.95em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
}

.modern-battle-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.05);
}

.modern-battle-table tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.1);
}

/* Team Colors in Battle Table */
.team-a-color {
  color: #7986cb;
}

.team-b-color {
  color: #ef5350;
}

/* Battle Result Indicators */
.battle-win {
  color: #4caf50;
  font-weight: 600;
}

.battle-loss {
  color: #f44336;
  font-weight: 600;
}

.battle-points-positive {
  color: #4caf50;
  font-weight: 600;
}

.battle-points-negative {
  color: #f44336;
  font-weight: 600;
}

.battle-points-neutral {
  color: #ff9800;
  font-weight: 600;
}

/* Empty State */
.battles-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #90a4ae;
  font-style: italic;
}

.battles-loading-state {
  text-align: center;
  padding: 40px 20px;
  color: #90a4ae;
  font-style: italic;
}

/* War Display Responsive Design */
@media (max-width: 768px) {
  .war-display-container {
    padding: 16px;
    margin: 16px 0;
  }

  .teams-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .team-card {
    padding: 16px;
  }

  .match-elo-title {
    font-size: 1.1em;
  }

  .match-rank-badge {
    display: block;
    margin: 8px auto 0;
    width: fit-content;
  }

  .recent-battles-section {
    padding: 16px;
  }

  .battles-scroll-container {
    max-height: 250px;
  }

  .modern-battle-table th,
  .modern-battle-table td {
    padding: 8px 4px;
    font-size: 0.9em;
  }

  .team-stats-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .stat-value {
    font-size: 1em;
  }
}

@media (max-width: 480px) {
  .war-display-container {
    padding: 12px;
  }

  .team-card {
    padding: 12px;
  }

  .recent-battles-section {
    padding: 12px;
  }

  .modern-battle-table th,
  .modern-battle-table td {
    padding: 6px 2px;
    font-size: 0.85em;
  }

  .battles-scroll-container {
    max-height: 200px;
  }
}