@font-face {
    font-family: 'Noto Sans Regular Nerd Font';
    /* @TODO you need to adjust the path to the font: */
    src: url("/fonts/Noto Sans Regular Nerd Font Complete.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }

body {
	min-height: 100vh;
	color: var(--color_text);
	background-color: var(--color_background);
}

.hidden{
	display: none;
}

.nf {
    font-family: 'Noto Sans Regular Nerd Font';
    speak-as: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering (from devicons, et al) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

div .row{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.navbar-dark {
    background-color: var(--color_background_dk);
    z-index: 202020;
    width: 100%;
}

#navbarToggle {
	margin-left: 10px!important;
}

#mainContent {
	max-width: 100vw;
	overflow-x: auto;
}

.blur {
	filter: blur(2px);
}

#mainOverlay {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 202020;
	text-align: center;
	vertical-align: middle;
}

#mainOverlay img {
	margin-top: 42vh;
	height: 16%;
}
	
.rotate {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.btn-primary{
	background-color:var(--color_primary);
}

.btn-primary:hover{
	color: var(--color_primary_dk);
	border-color: #00000000;
}

a{
	color: var(--color_primary);
}

a:hover{
	color: var(--color_primary_dk);
}

.navbar-dark .navbar-brand{
	color: var(--color_primary);
}

.navbar-dark .navbar-brand:hover{
	color: var(--color_primary_dk);
}

.nav-link{
	color: var(--color_primary);
}

.nav-link:hover{
	color: var(--color_primary_dk);
}

.btn-danger{
	background-color: var(--color_danger);
	border-color: var(--color_danger_dk);
}

.btn-danger:hover{
	background-color: var(--color_danger_dk);
	border-color: var(--color_danger);
}

.btn-success{
	background-color: var(--color_success);
	border-color: var(--color_success_dk);
}

.btn-success:hover{
	background-color: var(--color_success_dk);
	border-color: var(--color_success);
}

.btn-secondary{
	background-color: var(--color_secondary);
	border-color: var(--color_secondary_dk);
}

.btn-secondary:hover{
	background-color: var(--color_secondary_dk);
	border-color: var(--color_secondary);
}

.navbar-dark{
	background: #000000a0!important;
}
#sidenav{
	background: #000000a0!important;
}

.bg-dark{
	background: #000000a0!important;
}

.table{
	color: var(--color_text);
	border-color: var(--color_text);
}

.table th{
	color: var(--color_text);
	border-color: var(--color_text);
	background-color: var(--color_background_bt);
}

.table td{
	color: var(--color_text);
	border-color: var(--color_text);
	background-color: var(--color_background_bt);
}

.btn{
	color: var(--color_text);
}

.btn:focus{
	color: var(--color_text_bt);
}

.btn:hover{
	color: var(--color_text_bt);
}

.navbar-dark .navbar-nav .nav-link{
	color: var(--color_text_dk);
}

.navbar-dark .navbar-nav .nav-link:hover{
	color: var(--color_text);
}

.message_notify{
	position: relative;
	vertical-align:top;
	width:fit-content;
}

.message_count{
	position: absolute;
	font-size: 0.5em;
	text-align: center;
	top: 0.2em;
	right: 0.7em;
	background-color: var(--color_primary);
	padding:2px;
	border:solid;
	border-color: var(--color_primary_dk);
	border-width: 1px;
	border-radius:50%;
	min-width:1rem;
}