/*
	Bryan
	Styles sheet
*/

//////////////////////////////
// BACKGROUND COLORS
//////////////////////////////
@colorHighBack: #181B1F;
@colorLowBack: #101317;
@colorImportant: #202428;
@colorImportant2: #22262A;
@colorImportant3: #394046;
@colorImportant4: #505a62;
@colorAccent: #3FD4FC;
//////////////////////////////
// HIGH COLORS
//////////////////////////////
@colorHighYellow: #FFCA12;
@colorHighRed: #DB456D;
@colorHighGreen: #B2EC00;
@colorHighGrey: #D2D2D2;
@colorHighPink: #EC007A;
@colorHighBlue: #00C8EC;
//////////////////////////////
// LOW COLORS
//////////////////////////////
@colorLowBlue: #3FD4FC;
@colorLowGreen: #A0DF3B;
@colorLowRed: #C72651;
@colorLowGrey: #868686;
//////////////////////////////
// SUPER LOW
//////////////////////////////
@colorDisabledRed: #5c1226;
@screenHeight: `window.screen.availHeight`;
@screenWidth: `window.screen.availWidth`;
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// This makes all bootstrap elements square, because I dislike the roundededededededed-ness
//https://stackoverflow.com/questions/9742166/getting-rid-of-all-the-rounded-corners-in-twitter-bootstrap
* {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    border: 0;
    box-shadow: none;
    outline: none;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
html {
    height: 100%;
    max-height: 100%;
    margin: 0;
}
body {
    background-color: @colorHighBack;
    color: @colorHighGrey;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}
@media (max-width: 998px) {
	body {
		overflow: initial;
	}
}
// Unvisited link
a:link {
    color: @colorLowRed;
}
// Visited link
a:visited {
    color: @colorLowRed;
}
// mouse over link
a:hover {
    color: @colorHighRed;
    text-decoration: none !important;
}
// Selected link
a:active {
    color: @colorLowRed;
}
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
.wrapper {
    position: absolute;
    top: 50%;
    left: 53%;
}
.fake-link {
    color: @colorLowRed;
    cursor: pointer;
}
.panel {
    background-color: transparent;
}
.center-panel {
    margin: 15% 25% 0 25%;
    background-color: @colorImportant;
}
@media (max-width: 768px) {
    .center-panel {
        margin: 15% 5% 0 5%;
    }
}
.community-logo {
    padding-top: 1%;
}
.community-info {
    padding-top: 1%;
    overflow: hidden;
}
.login-row-2 {
    padding-bottom: 3%;
}
.login_servers_container {
    margin-left: 3%;
}
.login_servers {
    margin-top: 1%;
    height: unit(@screenHeight / 5, px);
    max-height: unit(@screenHeight / 5, px);
    overflow-y: auto;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.community-info h1 {
    font-size: 2.5em;
}
.login {
    padding-left: 50px;
    margin-bottom: 0px;
}
.server-leaderboard {
    max-height: unit(@screenHeight / 1.3, px);
    overflow-y: auto;
}
.no-border {
    margin-top: 5px;
    border: 0;
    box-shadow: none;
}
.button {
    background-color: @colorLowRed;
    border: none;
    color: white;
    margin-top: 5px;
    padding: 10px 32px;
    margin-bottom: 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
}
.button:disabled {
    background: @colorDisabledRed;
    color: @colorLowGrey;
}
.navigation {
    background-color: @colorLowBack;
    z-index: 10;
}
.navigation-logo {
    height: 50px;
    width: 50px;
    margin-top: -10px;
}
.community-title {
    font-size: 2em;
    margin-left: 65px;
    margin-top: -33px;
}
@media(max-width: 500px)
{
	.navbar-brand
	{
		max-width: 75%;
		overflow: hidden;
		white-space: nowrap;
	}
}
.navbar {
    height: 63px;
}
.drop-username {
    margin-right: 25px;
    margin-top: 5px;
    font-weight: bold;
    font-size: larger;
}
.drop-user-menu {
    background-color: @colorImportant;
}
.dropdown-menu > li > a {
    color: @colorHighGrey;
}
@media (max-width: 768px) {
    #id_Navbar {
        border: 0;
    }
    .dropdown {
        background-color: @colorImportant3 !important;
    }
}
.sidebar {
    height: 100%;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    background-color: @colorImportant;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: 55px;
    transition: 0.5s;
    width: 350px;
}
@media (max-width: 1500px) {
	.sidebar {
		padding-left: 0;
		padding-right: 0;
		width: 0;
	}
}
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: @colorHighGrey;
    display: block;
}
.collapse_sidebar {
	width: 0;
	padding-left: 0;
	padding-right: 0;
}
.show_sidebar {
	width: 350px;
	padding-left: 15px;
	padding-right: 15px;
}
.side-bar-arrow {
	margin-top: 50%;
	position: fixed;
	color: @colorLowGrey;
	transition: 0.5s;
	text-align: center;
	vertical-align: middle;
	z-index: 8;
}
.sidenav-servers {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: unit(@screenHeight / 1.15, px);
}
.server {
    margin-left: 20px;
}
.server h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    position: relative;
}
.player_name {
    font-size: 1.1em;
}
.player_uid {
    font-size: 0.8em;
}
.server-info {
    margin-left: 25px;
    font-style: italic;
}
.server-options h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    position: relative;
}
.modal.custom .modal-dialog {
    width: 35%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: @colorImportant;
}
.modal.custom .modal-header {
    background-color: @colorImportant;
    border: 0;
    color: @colorHighGrey;
}
.modal.custom .modal-body {
    background-color: @colorImportant;
    padding-left: 25px;
}
.modal.custom .modal-footer {
    background-color: @colorImportant;
    border: 0;
}
.list-group .list-group-item {
    background-color: @colorImportant3;
    border: 0;
    color: @colorHighGrey;
    cursor: pointer;
}
.list-group .list-group-item.active {
    color: @colorHighGrey;
    background-color: @colorLowRed;
}
.list-group li:hover {
    background-color: @colorImportant4;
}
.playerList {
    height: unit(@screenHeight / 2.25, px);
    max-height: unit(@screenHeight / 1, px);
    overflow-y: auto;
}
.server-panel {
    margin-top: 65px;
    padding-bottom: 15px;
    margin-left: 355px;
    margin-right: 100%;
    background-color: @colorImportant;
    height: 100vh;
}
.server-panel .server-panel-info {
    margin: 35px 55px 20px 55px;
}
@media(max-width: 1500px)
{
	.server-panel
	{
		margin-left: inherit;
		width: 100%;
	}
}
@media (max-width: 992px) {
	#id_title
	{
		text-align: center;
	}
	#id_divider
	{
		width: 100%
	}
	.server-panel {
		height: 100%;
	}
}
.blue-horizontal-divider {
    background-color: @colorAccent;
    width: 45%;
    height: 2px;
}
.player-uid {
    font-size: 0.4em;
}
.table-striped > thead > tr > td,
.table-striped > thead > tr > th {
    border-color: @colorAccent;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: @colorImportant3;
}
.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
    background-color: @colorImportant4;
}
.table-striped > tbody > tr > td {
    border: 0;
}
.poptabs-inline {
    height: 15px;
    width: 15px;
}
.player-info h3 {
    margin-left: -15px;
}
.territories {
    height: 100%;
    bottom: 0;
    background-color: @colorImportant3;
}
.width-3-4 {
    width: 75%
}
.full-width {
    width: 100%
}
.hidden {
    display: none;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: transparent;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: @colorAccent;
}