/**
 *
 **
 ** NOTE: Do NOT customize CSS in this file. It will be overwritten by 
 ** updates. Put all customization inside of css/custom.css.
 **
 **/

:root{
        /* Background of the top navbar */
        --am3-navbar-background: rgba(0, 0, 0, 1);

        /* Text/Foreground color of the top navbar */
        --am3-navbar-color: rgba(255, 255, 255, 1);

        /* Background of the node titlebar */
        --am3-nodetitle-background: rgba(24, 92, 145, 1);

        /* Text/Forground color of the node titlebar */
        --am3-nodetitle-color: rgba(255, 255, 255, 1);

        /* Button highlight color of buttons in the node titlebar */
        --am3-nodetitle-button-hl: rgba(145, 24, 92, 1);

        /* Node connection table header background color */
        --am3-conntable-header-text: rgba(255, 255, 255, 1);

        /* Node connection table header text color */
        --am3-conntable-header-bg: rgba(33, 37, 41, 1);

        /* Node connection table border color */
        --am3-conntable-border-color: rgba(55, 59, 62, 1);

		/* Node connection table keyed colors */
	    --am3-conntable-conn-keyed-color: rgba(0, 0, 0, 1);
	    --am3-conntable-conn-keyed-bg-color: rgba(209, 231, 221, 1);

		/* Node connection table stats=Connecting colors */
		--am3-conntable-conn-noconn-color: rgba(0,0,0,1);
		--am3-conntable-conn-noconn-bg-color: rgba(255,255,255,1);

		/* Node Tx Local */
		--am3-node-tx-local-color: rgb(0, 0, 0);
		--am3-node-tx-local-bg-color: rgb(245, 198, 203);

		/* Node Tx Network */
		--am3-node-tx-network-color: rgb(0, 0, 0);
		--am3-node-tx-network-bg-color: rgb(245, 198, 203);

		/* Node Tx Telem */
		--am3-node-tx-telemetry-color: rgb(0, 0, 0);
		--am3-node-tx-telemetry-bg-color: rgb(245, 198, 203);

		/* Node Tx Remote */
		--am3-node-tx-playback-remote-color: rgb(0, 0, 0);
		--am3-node-tx-playback-remote-bg-color: rgb(245, 198, 203);

		/* Node No Tx */
		--am3-node-no-tx-color: rgb(0, 0, 0);
		--am3-node-no-tx-bg-color: rgb(195, 230, 203);

}

.am3-no-tx{
	
}

body {
  font-size: .875rem;
  height: 100%;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; 
  padding: 48px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

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

/***  Navbar ***/
.navbar-dark {
	background-color: var(--am3-navbar-background);
}
.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

.navbar-midbar {
	color: var(--am3-navbar-color); 
	font-size: 1.2em;
	font-weight: bold;
}

.header-banner-img {
	max-height: 50px;
	width: auto;
}

/*** Node Connections Display ***/
.uptime-box, .numconns-box {
  font-size: 0.8em;
  font-weight: normal;
}

.nodeline-header {
  background-color: var(--am3-nodetitle-background);
  color: var(--am3-nodetitle-color);
  font-size: 1.2em;
  font-weight: bolder;
}

.nodeline-tooltip {
    --bs-tooltip-bg: var(--bs-light-text);
}

.nodetxline {
	color: #000;
	font-weight: bold;
}

.am3-tx-local{
	color: var(--am3-node-tx-local-color);
	background-color: var(--am3-node-tx-local-bg-color);
}

.am3-tx-network{
	color: var(--am3-node-tx-network-color);
	background-color: var(--am3-node-tx-network-bg-color);
}

.am3-tx-telemetry{
	color: var(--am3-node-tx-telemetry-color);
	background-color: var(--am3-node-tx-telemetry-bg-color);
}

.am3-tx-playback-remote {
	color: var(--am3-node-tx-playback-remote-color);
	background-color: var(--am3-node-tx-playback-remote-bg-color);
}

.am3-no-tx{
	color: var(--am3-node-no-tx-color);
	background-color: var(--am3-node-no-tx-bg-color);
}

.node-conn-keyed {
	background-color: var(--am3-conntable-conn-keyed-bg-color) !important;
	color: var(--am3-conntable-conn-keyed-color) !important;
}

.node-conn-noconn {
	background-color: var(--am3-conntable-conn-noconn-bg-color) !important;
	color: var(--am3-conntable-conn-noconn-color) !important;
}

.node-bi {
  vertical-align: -.125em;
  color: var(--am3-nodetitle-color);
  text-decoration-color: var(--am3-nodetitle-color);
  --bs-btn-border-color: var(--am3-nodetitle-color);
  --bs-btn-hover-bg: var(--am3-nodetitle-button-hl);
  --bs-btn-hover-color: var(--am3-nodetitle-color);
  --bs-btn-hover-border-color: var(--am3-nodetitle-color);
}

.table-responsive {
	font-size: 1em;
}

.table-dark {
	--bs-table-color: var(--am3-conntable-header-text);
	--bs-table-bg: var(--am3-conntable-header-bg);
	--bs-table-border-color: var(--am3-conntable-border-color);
}

.node-line-bi {
	color: var(--bs-gray-300);
	--bs-btn-border-color: var(--bs-gray-300);
	--bs-btn-hover-bg: var(--bs-gray-300);
	--bs-btn-hover-color: var(--am3-nodetitle-button-hl);
	--bs-btn-hover-border-color: var(--bs-gray-300);
	--bs-btn-padding-y: 0;
	--bs-btn-padding-x: 0;
	--bs-btn-font-size: 0;
}



/*** Modal ***/
.login-form-success {
	color: green;
	font-size: 1.25em;
}

.login-form-failure-header {
	color: red;
}