.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
    height: 100vh;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 10px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.relative{
    position: absolute;
    bottom: 0;
    min-height: 32px;
    text-align: center;
    vertical-align: middle;
    align-content: center;
    padding: 0;
    width: 100%;
    font-size: 12px;
}

.topbar {
	display:none;
	background-color: #f8f9fa;
}

.navbar-toggler {
	display:none;
	position: absolute;
}

@media (max-width: 767.98px) {
	.topbar {
		display:block;
		padding: 0.6rem;
		text-align:center;
	}
	
	.navbar-toggler {
		top: 0.6rem;
		right: 1rem;
		z-index:150;
		display: block;
	}
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.nav-link {
    display: flex;
    align-items: center;
    padding: .25rem 1rem;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

.sidebar hr {
	margin: 0.5rem;
	height: 1px;
	padding:0;
}

#loadingDiv {
  display:none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10000;
  width: 100px;
  height: 100px;
  background-color:#f3f3f3;
  margin: -50px 0 0 -50px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Useful for button columns on tables to disable button wrapping */
.disable-text-wrap {
	white-space: nowrap !important; 
}

.modal-header-danger {
	color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #dc3545;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}

.modal-header-success {
	color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #198754;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}

.respect-newlines {
	white-space: pre-wrap;
}

.button-column {
	width: 1%;
	white-space: nowrap;
}

.copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    background-color: white;
    font-weight: bold;
}

.copy-button:focus, .copy-button:active {
    box-shadow: 0 0 4px #bababa;
    background-color: #bababa;
}