.test-line {
    border: 1px solid red;
}

strong, b {
	font-weight: bold;
}

body {
    font-family: 'Roboto Condensed', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    background: rgb(200,200,200);
}

.header {

}

.header .header-logo {
    max-width: 100%;
    max-height: 150px;
}

/* Navbar */
.navbar-avatar {
    height: 28px;
    width: 28px;
}

.navbar-nav .nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
}

.navbar-no-drowndown-arrow .dropdown-toggle::after {
    display:none
}

.navbar-noti-group {
    position: relative;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.navbar-noti-icon {
    font-size: 1.5em;
}

.navbar-noti-num {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6em;
}

.navbar-dropdown {
    transform: translateX(-45%);
    width: 350px;
}

/* End of Navbar */
.content-container {
    background: white;

    -webkit-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.25);

    min-height: 70vh;
}

.body-community {
    background: url('../img/bg-titanfall.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.card-bigicon-header {
    position: relative;
}

.card-bigicon-header-icon {
    position: absolute;
    right: 5%;
    top: 50%;

    transform: translateY(-50%);
    font-size: 3.5em;
    opacity: 0.5;
}

.btn-social {
    display: block;
    position: relative;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75);

}

.btn-social:hover {
    transform: translateY(-3px);
}

.btn-social * {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.dropdown-item:hover {
    background: #37474F;
    color: white !important;
}

.dropdown-item:active {
    background: #37474F !important;
    color: white !important;
}

/*
    GAME SERVER
*/
.gameserver-icon {
    width: 24px;
    height: 24px;
}

/*
    EFFECTS
*/
/* LOADING EFFECT */
.loading-blue:after {
    border: 16px solid #2196f3 !important;
    border-color: #2196f3 transparent #2196f3 transparent !important;
}

.icon-loading {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
}

.icon-loading:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 0px;
    margin-top: 3px;
    box-sizing: border-box;
    border: 16px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: icon-loading 1.2s infinite;
}

.loading-blue-sm:after {
    border: 8px solid #2196f3 !important;
    border-color: #2196f3 transparent #2196f3 transparent !important;
}

.icon-loading-sm {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
}

.icon-loading-sm:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 0px;
    margin-top: 3px;
    box-sizing: border-box;
    border: 8px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: icon-loading 1.2s infinite;
}

@keyframes icon-loading {
    0% {
      transform: rotate(0);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
      transform: rotate(900deg);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
      transform: rotate(1800deg);
    }
}

/* VUE EFFECT */
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}
.bounce-enter-active {
    animation: bounce-in .5s;
}
.bounce-leave-active {
    animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
}

.slideup-enter-active, .slideup-leave-active {
    transition: all 1s;
}
.slideup-enter, .slideup-leave-to /* .list-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
}

/* =======
 SIDEBAR
======== */
.community-message .avatar {
  width: 15%;
}

.community-message .avatar img {
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgb(220,220,220);
}

.community-message .detail {
  width: 85%;
}

/* =======
 OTHER SHIT
======== */
.responsive-overflow {
    max-width: 100%;
    overflow: auto;
}

.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
    color: inherit;
    text-decoration: inherit;
}

.font-weight-bold {
    font-weight: bold !important;
}

.text-shadow-dark {
    text-shadow: 1px 1px 1px rgba(0,0,0,.9);
}

/* Absolute Center Spinner */
.overlay-loading {
    position: fixed;
    z-index: 99999999;
    height: 2em;
    width: 2em;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Transparent Overlay */
.overlay-loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.overlay-loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}

.overlay-loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
0% {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
100% {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
100% {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}
}
@-o-keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*
	Notification
*/
.menu-noti {
	transform: translateX(-75%);
	width: 480px;
}

.noti-scroll {
	/* height: 450px; */
	max-height: 450px;
	overflow-y: auto;
	overflow-x: hidden;
}

.menu-noti .noti {
	padding-left: 10px;
	padding-right: 10px;
}

.menu-noti .avatar {
	width: 15%;
	padding: 8px;
}

.menu-noti .avatar img {
	width: 100%;
	border-radius: 50%;
}

.menu-noti .detail {
	width: 85%;
	font-size: 0.9em;
	line-height: 1.15;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
	.menu-noti {
		transform: translateX(0);
		width: 480px;
	}
}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 768px) {
	.menu-noti {
		transform: translateX(-10%);
		width: 480px;
	}
}


/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
	.menu-noti {
		transform: translateX(-22%);
		width: 95vw;
	}

	.noti-scroll {
		height: 300px;
	}
}

.h-24px {
    height: 24px;
}

.line-height-100 {
    line-height: 1;
}

.table-avatar {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid white;
    margin-right: 3px;
}