body {
  padding-top: 40px;
  padding-bottom: 40px;
background-color: #0B2735;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23185B72' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%234EFDFE'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.container {
  max-width: none !important;
  width: 360px;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 32px;
  font-weight: 100;
  color: rgba(255,255,255, .8);
  margin-top: 10px;
  
}

.pub {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 100;
  color: rgba(255,255,255, .8);
  margin-top: 10px;
  
}

.score{
    margin: 10px;
  
}

hr {
    border-color: rgba(255,255,255, .1);
}


.panel {
   -webkit-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
   box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
   background-color: rgba(25,85,104, .2);
   border-color: rgba(255,255,255, 0.1);
}

/*--Tab bar adapted from Riliwan Ralogun @bootsnipp.com --*/
.board{
    background: eeeeee;
}

.board .nav-tabs {
    position: relative;
    margin: -20px auto;
    margin-bottom: 0;
    box-sizing: border-box;

}


.liner-right{
    height: 1px;
    /*background: #ddd;*/
    background-color: rgba(255,255,255, 0.1);
    position: absolute;
    width:18%;
    margin: 0 auto;
    right: 24%;
    top: 50%;
    z-index: 1;
}

.liner-left{
    height: 1px;
    background-color: rgba(255,255,255, 0.1);
    position: absolute;
    width: 18%;
    margin: 0 auto;
    left: 24%;
    top: 50%;
    z-index: 1;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
}

.board  li {
    min-width: 33.333%;
    max-width: 33.333%;
    border-bottom: 4px solid rgba(255,255,255, 0.0);
}

.board  li:hover {
    min-width: 33.333%;
    border-bottom: 4px solid rgba(255, 255, 255, 0.5);  
}

.board li.active {
    min-width: 33.333%;
    /*prevent tab to chanage size on .active */
    max-width: 33.333%;
    border-bottom: 4px solid rgba(100, 65, 165, 0.7);

}

span.round-tabs{
    width: 46px;
    height: 46px;
    line-height: 46px;
    display: inline-block;
    border-radius: 100px;
    background-color: rgba(255,255,255, 0.7);
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 18px;
}

span.round-tabs.one{
    color: #6441A5;
    border: 1px solid rgba(255, 255, 0.1);
     background-color: rgba(255,255,255, 0.1);
  
}



span.round-tabs.two{
    color:rgba(135,187,83, 1);
    border: 1px solid rgba(255, 255, 0.1);
    background-color: rgba(255,255,255, 0.1);
}

span.round-tabs.three{
     color: rgba(230,0,0, 0.8);
    border: 1px solid rgba(255, 255, 0.1);
     background-color: rgba(255,255,255, 0.1);
}

.nav-tabs > li.active > a span.round-tabs{
    
    box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
    background-color: rgba(255,255,255, 0.2);
}
.nav-tabs > li {
    width: 33.333%;
}

li:after {
    content: " ";
    position: absolute;
    left: 45%;
    opacity:0;
    margin: 0 auto;
    bottom: 0px; 
    border: 5px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    transition:0.1s ease-in-out;
    
}

.nav-tabs > li a{
   width: 46px;
   height: 46px;
   margin: 20px auto;
   border-radius: 100%;
   padding: 0;
   border: 1px solid rgba(255,255,255, 0.1);
    
}

.nav-tabs > li a:hover{
   background-clip: border-box;
}

.nav-tabs > li.active > a span.round-tabs {
    background-color: mediumpurple;
    background-color: rgba(255,255,255, 0.1) !important;
}

.nav-tabs {
   border-bottom: 1px solid rgba(255,255,255, 0.1);
}

.tab-pane{
  position: relative;
  padding-top: 5px;
}


.tab-content {
    padding-bottom: 0;
}

/*----End Tab Bar ---*/




/*--Search box --*/
.input-group {
    margin-top: 15px;   
}

.input-group  {
     border-radius: 5px;
    margin-bottom: 10px;
}

.input-group-style .input-group-addon{
    background: white !important; 
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;  
    
    background-color: rgba(255,255,255, 0.7) !important;
    border-color: rgba(255,255,255, 0.1) !important;
}

.input-group-style .form-control{
	border-right:0; 
	box-shadow:0 0 0; 
	border-color:#ccc;
}
.input-group-style button{
    border:0;
    background:transparent;
} 

.form-control {
     border-radius: 5px;
}

input {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px !important;
    background-color: rgba(255,255,255, 0.1) !important;
    border-color: rgba(255,255,255, 0.1) !important;
     box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
    color: rgba(255,255,255, 0.7) !important;
}


/*--Twitch streamers list */
.img-circle {
    
    width: 20%;
    margin-right: 10px;
    
}

.list-group-item {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    position: relative;
    vertical-align: middle;
    background-color: rgba(255,255,255, 0.1);
    border-color: rgba(255,255,255, 0.1);
    border-bottom: none;
    color: rgba(255,255,255, 0.4) !important;
}

a.list-group-item:hover {
    vertical-align: middle;
    background-color: rgba(255,255,255, 0.2);
    box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
}

.float-right {
    float: right;
    margin-top: 18px;    
}


/*--Panel body --*/
.panel-body {
    margin-bottom: -6px;
    padding-bottom: 0px;
}

/*--LED Light (Streamer ON(GREEN)/OFF(RED)--*/
span.led-red {
    display: block;
    width: 12px;
    height: 12px;
    background-color: rgb(230,0,0);
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
                 0px 0px 3px 2px rgba(226,0,0,0.5);
    border-radius: 100%;
    clear: both;
    position: absolute;
    top: 42%;
    right: 6%;
}

span.led-green {
    display: block;
    width: 12px;
    height: 12px;
    background-color: rgb(135,187,83);
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
                0px 0px 3px 2px rgba(135,187,83,0.5);
    border-radius: 100%;
    clear: both;
    position: absolute;
    top: 42%;
    right: 6%;
}