:root {
 --gap: 0.8rem;
}
html,
body {
 height: 100%;
 margin: 0;
 font-size: clamp(12px, 2vw, 14px);
 overflow: auto;
 min-width: 1280px;
 min-height: 720px;
}
body {
 font-size: 1rem;
 background-color: #f5f5f5;
}
.container-fluid {
 display: flex;
 flex-direction: column;
 height: 100%;
 gap: var(--gap);
 padding: var(--gap);
 box-sizing: border-box;
 min-width: 1280px;
 min-height: 720px;
}
#bodyWrapper,
#midCols {
 display: flex;
 gap: var(--gap);
 height: 100%;
}
#midWrapper {
 display: flex;
 flex-direction: column;
 height: 100%;
 min-height: 0;
}
#middleRow {
 flex: 0 0 10%;
 min-height: 0;
}
#midCols {
 flex: 1 1 0%;
 min-height: 0;
}
.column {
 display: flex;
 flex-direction: column;
 gap: var(--gap);
 height: 100%;
}
.card {
 margin: 0;
 border-color: #f2f2f2;
 border-width: 0px;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.12);
}
#rosCard .card {
 background-color: transparent !important;
}
.card-5 {
 flex: 0 0 5%;
 min-height: 0;
}
.card-10 {
 flex: 0 0 10%;
 min-height: 0;
}
.card-15 {
 flex: 0 0 15%;
 min-height: 0;
}
.card-20 {
 flex: 0 0 20%;
 min-height: 0;
}
.card-25 {
 flex: 0 0 25%;
 min-height: 0;
}
.card-26 {
 flex: 0 0 26%;
 min-height: 0;
}
.card-30 {
 flex: 0 0 30%;
 min-height: 0;
}
.card-235 {
 flex: 0 0 23.529%;
 min-height: 0;
}
.card-auto {
 flex: 1 0 auto;
 min-height: 0;
}
#col2CardB .card-body {
 padding: 0;
 display: flex;
 flex-grow: 1;
}
#col2CardB iframe {
 width: 100%;
 height: 100%;
 border: 0;
}
#col3 {
 min-width: 100px;
}
#col3CardA > .card-body {
 background-color: #ebebeb;
 border-radius: 5px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 height: 100%;
}
#col3CardB {
 background-color: #f5f5f5 !important;
 box-shadow: none !important;
}
#col4 {
 min-width: 200px;
}
#col4CardA {
 display: flex;
 flex-direction: column;
 flex: 1 0 0;
 min-height: 0;
 box-shadow: none;
}
#col4CardA > .card-body {
 display: flex;
 flex-direction: column;
 flex: 1 1 auto;
 min-height: 0;
 padding: 0;
 background-color: #f5f5f5;
}
/* MULTI CARDS */
#rosCard .card-body,
#productsCard .card-body,
#assetsGal {
 border-radius: 5px !important;
}
/* PILL TABS MENU */
.tab-content {
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
}
.tab-content > .tab-pane {
 flex: 1 1 auto;
 min-height: 0;
 display: none;
 flex-direction: column;
 transition: none !important;
}
.tab-content > .tab-pane.show.active {
 display: flex;
}
.rtab-pills .nav-link {
 border-radius: 0.2rem;
 margin: 0 0.15rem;
 padding: 0.25rem 0.5rem;
 font-weight: 600;
 font-size: 0.8rem;
 line-height: 0.8rem;
 text-transform: uppercase;
 color: #222;
 background-color: #fff;
 border: 1px transparent solid;
 background-color: #ebebeb;
}
.rtab-pills .nav-link:hover {
 background-color: #fff;
 color: #222;
 border: 1px #ccc solid;
}
.rtab-pills .nav-link:active {
 scale: 0.96;
}
.rtab-pills .nav-link.active {
 background-color: #0d6efd;
 color: #fff;
 border: none;
}
.fa:hover {
 color: #222;
}
.fa:active {
 scale: 0.96;
}
.nav.rtab-pills {
 justify-content: center;
}
#nav-tab-holder {
 background-color: #f5f5f5;
}
/* PRODUCER JOIN */
button#joinProducerBtn {
 border-radius: 0.2rem;
 margin: 0 0.15rem;
 padding: 0.25rem 0.5rem;
 font-weight: 600;
 font-size: 0.8rem;
 line-height: 1.25rem;
 text-transform: uppercase;
 color: #222;
 background-color: #fff;
 border: 1px transparent solid;
 background-color: #ebebeb;
}
button#joinProducerBtn:hover {
 background-color: #222;
 color: #f5f5f5;
 border: 1px #ccc solid;
 border-radius: 5px;
}
button#joinProducerBtn:active {
 scale: 0.96;
}
/* INPUTS */
:focus {
 outline: none !important;
 box-shadow: none !important;
}
button:focus,
a:focus,
input:focus,
textarea:focus,
.form-control:focus {
 outline: none !important;
 box-shadow: none !important;
}
.prod-search-wrapper,
.ros-search-wrapper,
.assetsGal-search-wrapper {
 position: relative;
 width: 100%;
 margin-right: 1px;
}
.prod-clear-x,
.ros-clear-x,
.assetsGal-clear-x {
 position: absolute;
 right: 6px;
 top: 50%;
 transform: translateY(-50%);
 color: #aaa;
 cursor: pointer;
 font-size: 0.85rem;
}
.prod-clear-x:hover,
.ros-clear-x:hover,
.assetsGal-clear-x:hover {
 color: #222;
}
.ros-search-wrapper .form-control-sm,
.prod-search-wrapper .form-control-sm,
.assetsGal-search-wrapper .form-control-sm {
 min-height: calc(1.5em + 0.45rem + calc(var(--bs-border-width) * 2));
 padding: 0.15rem 0.5rem;
 font-size: 0.8rem;
 border-radius: var(--bs-border-radius-sm);
}
.form-control:focus,
.form-control-sm:focus {
 outline: none !important;
 box-shadow: inset 0 0 0 2px #fe2c5657 !important;
 border-color: #fe2c5657 !important;
}
.blocked-search-wrapper .form-control-sm:focus,
.blocked-search-wrapper .form-control:focus {
 outline: none !important;
 box-shadow: inset 0 0 0 1px #fe2c5657 !important;
 border-color: #fe2c5657 !important;
}
.form-control:hover,
.form-control-sm:hover {
 outline: none !important;
 box-shadow: inset 0 0 0 2px #fe2c5657 !important;
 border-color: #fe2c5657 !important;
}
.blocked-search-wrapper .form-control-sm:hover,
.blocked-search-wrapper .form-control:hover {
 outline: none !important;
 box-shadow: inset 0 0 0 1px #fe2c5657 !important;
 border-color: transparent;
}
.shoutSubmit-submit-icon,
.noteSubmit-clear-x,
.prod-clear-x,
.ros-clear-x,
.blocked-submit-icon,
.assetsGal-clear-x {
 position: absolute;
 right: 6px;
 top: 50%;
 transform: translateY(-50%);
 color: #aaa;
 cursor: pointer;
 font-size: 0.85rem;
}
.shoutSubmit-submit-icon:hover,
.noteSubmit-clear-x:hover,
.prod-clear-x:hover,
.ros-clear-x:hover,
.blocked-submit-icon:hover,
.assetsGal-clear-x:hover {
 color: #222;
}
.shoutSubmit-input-wrapper,
.noteSubmit-input-wrapper,
.prod-search-wrapper,
.ros-search-wrapper,
.blocked-search-wrapper,
.assetsGal-search-wrapper {
 position: relative;
 width: 100%;
}
.shoutSubmit-input-wrapper input,
.noteSubmit-input-wrapper input,
.prod-search-wrapper input,
.ros-search-wrapper input,
.assetsGal-search-wrapper input {
 padding-right: 1.5rem;
 margin-bottom: 0 !important;
 border-color: #f2f2f2;
 border-width: 0px;
}
.blocked-search-wrapper input {
 padding-right: 1.5rem;
 margin-bottom: 0 !important;
 border-color: #999;
 border-width: 1px;
}
.shoutSubmit-input-wrapper input,
.noteSubmit-input-wrapper input {
 padding-right: 1.5rem;
 margin-bottom: 0.1rem !important;
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
}
input#noteInput,
input#shoutInput {
 text-transform: uppercase;
}
.form-control-sm input,
.shoutSubmit-input-wrapper input,
.noteSubmit-input-wrapper input {
 padding-right: 1.5rem;
 margin-bottom: 0px !important;
 margin-top: 0px !important;
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
}
.form-control::placeholder {
 color: #999;
 opacity: 1;
 font-size: 0.8rem;
}
/* ROS */
#rosCard {
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
}
#rosCard .card-body {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
}
#rosTable {
 width: 100%;
}
#rosTable .rosSegnum {
 min-width: 16px;
 background: #333;
 color: #fffffe;
 font-weight: 600;
 font-size: 0.8rem;
 text-align: center;
 border-radius: 0.1rem;
 padding: 0.25rem;
}
#rosTable .rosSegtitle {
 width: 100%;
 font-size: 0.9rem;
 padding-left: 0.5rem;
}
#rosTable .rosSegmedia {
 white-space: nowrap;
 text-align: end;
 padding-right: 10px;
}
#rosTable .rosSegmedia i {
 margin-left: 0.25rem;
}
#rosTable tbody tr:hover {
 cursor: pointer;
}
#rosTable tbody tr:hover .rosSegnum {
 background: #fffffe;
 color: #111;
}
#rosTable tbody tr:hover .rosSegtitle,
#rosTable tbody tr:hover .rosSegmedia {
 background: #555;
 color: #fffffe;
}
tr.rosSelectedRow,
tr.rosSelectedRow td {
 background: #0d6efd !important;
 color: #fff !important;
}
tr.rosSelectedRow .rosSegnum {
 background: #fffffe !important;
 color: #111 !important;
}
.ros-filter-btn {
 background: none;
 border: none;
 padding: 2px 3px;
 color: #888;
}
.ros-filter-btn.active {
 color: #0d6efd;
 filter: invert(25%) sepia(100%) saturate(600%) hue-rotate(180deg);
}
/* PRODUCTS */
#productsCard {
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
}
#productsCard .card-body {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
}
#productsCard {
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
}
#productsWrap {
 width: 100%;
 max-width: 100%;
 overflow-x: hidden;
 display: block;
}
#productsWrap table {
 width: 100%;
 table-layout: fixed;
}
.prod-title {
 display: block;
 width: 100%;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
#productsWrap .pin-btn {
 white-space: nowrap;
 text-align: end;
 width: 13%;
}
#productsWrap table td {
 overflow: hidden;
}
#productsWrap .prod-row td {
 vertical-align: middle;
}
#productsWrap img {
 width: 40px;
 height: 40px;
 border-radius: 0.5rem;
 object-fit: cover;
}
.prod-order {
 width: 25px !important;
 min-width: 25px !important;
 max-width: 25px !important;
 text-align: center;
 font-weight: 600;
 background: #212529;
 color: #fff;
 font-size: 0.75rem;
}
#productsWrap .prod-thumb {
 width: 50px;
 text-align: center;
}
.prod-pinned .text-muted {
 color: #efefef !important;
}
#productsWrap .prod-row {
 cursor: move;
}
#productsWrap .prod-btn {
 cursor: pointer;
 padding: 0.25rem 0.5rem;
 font-size: 0.75rem;
 background: #fff !important;
 border-color: #fff !important;
 border: 0;
 color: #222 !important;
 margin-right: 5px;
}
#productsWrap .prod-btn:hover {
 border: 1px solid #333 !important;
 color: #222 !important;
}
#productsWrap .prod-pinned,
#productsWrap .prod-pinned td {
 background: #dc3545 !important;
 color: #fff !important;
}
#productsWrap .prod-pinned td .prod-btn {
 color: #fff !important;
}
#prodReloadBtn {
 background: none !important;
 border: none !important;
 padding: 2px 4px;
 color: #888;
 cursor: pointer;
}
#prodReloadBtn:hover {
 color: #222;
}
#prodReloadBtn.spinning {
 animation: spin 0.6s linear;
 color: #0d6efd;
}
@keyframes spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}
.drag-chosen,
.drag-fallback {
 outline: 2px solid #0d6efd;
 background: #f8f9fa;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.drag-chosen {
 background-color: transparent !important;
 filter: none !important;
}
.drag-ghost {
 opacity: 0.7;
 background: #f8f9fa;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
body.dragging-disable-select,
body.dragging-disable-select * {
 user-select: none !important;
}
/* ASSETS */
#assetsCard {
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
}
#assetsCard > .card-body {
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 padding: 0.5rem;
}
#assetsGal {
 width: 100%;
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 --tw: 135px;
 --th: 240px;
}
#assetsGal .assetsGal-card {
 width: var(--tw);
 margin: 3px;
}
.assetsGal-filter-btn {
 background: none;
 border: none;
 padding: 2px 3px;
 color: #888;
}
.assetsGal-filter-btn.active {
 color: #0d6efd;
 filter: invert(25%) sepia(100%) saturate(600%) hue-rotate(180deg);
}
#assetsGal .assetsGal-thumb {
 position: relative;
 width: var(--tw);
 height: var(--th);
 background-size: cover;
 border: 2px solid #f8f9fa;
 border-radius: 0.5rem;
 box-sizing: border-box;
}
#assetsGal .assetsGal-thumb:hover {
 border: 2px solid #444;
 cursor: pointer;
}
#assetsGal .assetsGal-selected .assetsGal-thumb {
 border-color: #dc3545 !important;
}
#assetsGal .assetsGal-preview-btn {
 position: absolute;
 bottom: 4px;
 height: 20%;
 left: 4px;
 right: 4px;
 font-size: 0.9rem;
 border-radius: 0.25rem;
 padding: 0.15rem 0.4rem;
 border-color: #efefef;
 background-color: rgba(0, 0, 0, 0.6);
}
#assetsGal .assetsGal-preview-btn:hover {
 background-color: #0d6efd;
 color: #efefef;
}
#assetsGal .assetsGal-title {
 position: absolute;
 top: 4px;
 left: 4px;
 right: 4px;
 max-height: 50%;
 background: rgba(0, 0, 0, 0.6);
 color: #fff;
 font-size: 0.9rem;
 text-align: left;
 padding: 2px 4px;
 border-radius: 0.25rem;
 overflow: hidden;
 display: none;
 pointer-events: none;
 line-height: 1.2;
}
#assetsGal .assetsGal-title span {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 4;
 line-clamp: 4;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: normal;
}
#assetsGal .assetsGal-thumb.video .assetsGal-title {
 display: block;
}
input#assetsSizeRange {
 width: 40px;
}
body.modal-open.assets-modal-open {
 padding-right: 0 !important;
 overflow: auto !important;
}
#assetsPreviewModal.modal {
 overflow: hidden !important;
}
/* SHOUT BOX */
#shoutInput {
 padding-right: 4.5rem;
 font-size: 0.9rem;
}
#shoutGroupCard {
 flex: 0 0 auto;
}
#shoutGroup .bootstrap-maxlength {
 position: absolute !important;
 top: auto !important;
 bottom: 0.5rem !important;
 right: 2.4rem !important;
 left: auto !important;
 transform: translateY(0%) !important;
 font-size: 0.8rem;
 color: #6c757d;
 pointer-events: none;
 z-index: 9;
}
.list-group-shout .list-group-item {
 cursor: pointer;
}
.list-group-shout .list-group-item-check {
 position: absolute;
 clip: rect(0, 0, 0, 0);
}
.list-group-shout .list-group-item-check:hover + .list-group-item {
 background: var(--bs-secondary-bg);
}
.list-group-shout .list-group-item-check:checked + .list-group-item {
 color: #fff;
 background: #0d6efd;
 border-color: #0d6efd;
}
.ctaMain,
.shoutMain {
 color: #fffffe;
 background: #0d6efd;
}
.ctaAlt,
.shoutAlt {
 background: #cccccc;
 color: #888888;
}
#modeGroup {
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 border-bottom-left-radius: 0.3rem;
 border-bottom-right-radius: 0.3rem;
}
.list-group-item {
 padding: 0.5rem;
 font-size: 1rem;
 font-weight: 500;
 text-transform: uppercase;
 text-align: center;
}
/* CHART */
.chart-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 0px 10px 0px 10px;
}
#legend-container ul {
 list-style: none;
 display: flex;
 margin: 3px 0 0 0;
 padding: 0;
 font-size: 0.9em;
}
#legend-container li {
 display: flex;
 align-items: center;
 cursor: pointer;
 margin-right: 12px;
}
#legend-container span.legend-box {
 display: inline-block;
 width: 12px;
 height: 12px;
 margin-right: 4px;
 border-radius: 2px;
}
#granularity-controls button {
 border-radius: 0.2rem;
 margin: 0 0.1rem;
 padding: 0.1rem 0.2rem;
 font-size: 0.7rem;
 line-height: 1rem;
 color: #222;
 border: 1px transparent solid;
 background-color: transparent;
}
#granularity-controls button.active {
 background: #ebebeb;
 color: #222;
 border: 1px transparent solid;
}
#chartCard,
#chartCard .card-body {
 height: 100%;
 display: flex;
 flex-direction: column;
 min-height: 0;
}
#chartCard .card-body {
 padding: 0 !important;
}
#chart-container {
 position: relative;
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
}
#chart {
 width: 100% !important;
 height: 100% !important;
 display: block;
}
#legend-container li {
 cursor: pointer;
 font-size: 0.8em;
}
/* NOTES CARD */
#col3CardB,
#noteCard {
 flex: 0 0 auto;
}
#noteDisplay {
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 border-bottom-left-radius: 0.3rem;
 border-bottom-right-radius: 0.3rem;
}
.note-display {
 background: #333;
 color: #efefef;
 padding: 0.5rem;
 border-radius: 0.2rem;
 font-size: 1rem;
 font-weight: 500;
 text-transform: uppercase;
 text-align: center;
}
/* BLOCK WORDS */
#blockedCard {
 box-shadow: none;
}
.blocked-search-wrapper {
 position: relative;
 width: 100%;
}
.blocked-search-wrapper input {
 padding-right: 1.5rem;
 margin-bottom: 0 !important;
}
.blocked-submit-icon {
 position: absolute;
 right: 6px;
 top: 50%;
 transform: translateY(-50%);
 color: #aaa;
 cursor: pointer;
 font-size: 0.85rem;
}
.blocked-submit-icon:hover {
 color: #000;
}
#blockedReloadBtn {
 background: none !important;
 border: none !important;
 padding: 2px 8px;
 margin-right: 3px;
 font-size: 1rem;
 color: #888;
 cursor: pointer;
}
#blockedReloadBtn:hover {
 color: #0d6efd;
}
#blockedReloadBtn.spinning {
 animation: spin 0.6s linear;
}
@keyframes spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}
#tags-list {
 list-style: none;
 padding: 0;
 margin: 0;
}
.tag-item {
 display: inline-block;
 background-color: #efefef;
 color: #222;
 padding: 4px 8px;
 font-size: 0.85rem;
 border-radius: 4px;
 margin: 3px 4px 3px 0;
 transition: background-color 0.2s, box-shadow 0.3s;
}
.tag-item:hover {
 background-color: #ccc;
}
.tag-item span {
 cursor: pointer;
 margin-left: 8px;
 color: #dc3545;
 font-weight: bold;
}
.tag-item.flash {
 box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dc3545;
}
/* HOST BUTTONS */
#hostButtons {
 display: flex;
 gap: 0.5rem;
 width: 100%;
 justify-content: center;
 flex-wrap: wrap;
 flex-direction: column;
}
#hostButtonGroup2 {
 flex: 0 1 40%;
 min-width: 119px;
}
#hostButtonGroup2 .btn {
 width: 100%;
 white-space: nowrap;
}
#hostButtonGroup1 {
 flex: 1 1 60%;
 display: flex;
 gap: 0.2rem;
 min-width: 0;
}
#hostButtonGroup1 .btn {
 flex: 1;
}
#hostButtons .btn:active {
 scale: 0.96 !important;
}
/* IFRAMES */
#col1CardA iframe,
#col2CardB iframe,
#col3CardA iframe {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 100%;
 border: none;
 border-radius: 5px;
}
#iframeContainer {
 margin: 0;
 padding: 0;
}
#iframeContainer iframe {
 height: 90vh !important;
}
/* TOP BAR */
#topBar {
 display: flex;
 flex-wrap: wrap;
 border: 0;
 gap: var(--gap);
}
.topbar-section {
 display: flex;
 flex-wrap: wrap;
 flex: 1 1 auto;
}
.topbar-group {
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 gap: 20px;
 min-width: 0;
 overflow: hidden;
}
.topbar-item {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 flex: 0 0 auto;
}
.topbar-divider {
 width: 80%;
 height: 1px;
 background: #adb5bd50;
}
.topbar-divider-v {
 width: 1px;
 height: 60%;
 background: #adb5bd;
}
.topbar-label,
.topbar-value {
 line-height: 1;
 gap: var(--gap);
 text-transform: uppercase;
}
.topbar-label {
 font-size: 10px;
 color: #888;
}
.topbar-label a {
 font-size: 10px;
 color: #888;
 text-decoration: none;
 text-transform: uppercase;
}
.topbar-value {
 font-size: 14px;
 color: #222;
 font-weight: 600;
}
#userSection img {
 max-width: 27px;
 max-height: 27px;
 border-radius: 4px;
}
#userSection .topbar-group {
 gap: 5px;
}
#userName {
 align-items: start;
}
#timeSection,
#infoSection,
#statsSection,
#panelSection,
#userSection {
 justify-content: center;
}
/* ACCOUNT MENU */
.valkeytext,
#chatPageLink_copy,
#chatPageLink_open,
#modalLiveLink_copy,
#modalLiveLink_open,
#modalDirLink_copy,
#modalDirLink_open,
#producerDashLink_copy,
#producerDashLink_open,
#hostPortalLink_copy,
#hostPortalLink_open,
#hostAssetLink_copy,
#hostAssetLink_open {
 padding: 0.05rem;
 border-radius: 2px;
 min-width: 70px;
}
#chatPageLink_copy,
#chatPageLink_open,
#modalLiveLink_copy,
#modalLiveLink_open,
#modalDirLink_copy,
#modalDirLink_open,
#producerDashLink_copy,
#producerDashLink_open,
#hostPortalLink_copy,
#hostPortalLink_open,
#hostAssetLink_copy,
#hostAssetLink_open {
 font-size: 0.8rem;
}
#creatorAccount_copy,
#modalDisplayName_copy,
#modalHandleName_copy,
#user_id_copy,
#seller_id_copy,
#room_id_copy,
#chatSessionId_copy {
 width: 100%;
}
.infoBtnFlex {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: center;
 align-content: center;
 gap: 5px;
}
.info-columns tbody,
.info-columns td,
.info-columns tr {
 border-color: inherit;
 border-style: solid;
 border-width: 1px;
}
.info-columns > tbody > tr {
 height: 32px !important;
}
.info-columns > tbody > tr > td {
 align-items: center;
}
.info-columns > tbody > tr > td:nth-child(odd) {
 background-color: #f4f4f4 !important;
 padding-left: 10px;
}
.table-hover > tbody > tr:hover {
 background-color: #f4f4f4 !important;
}
#infoTable td {
 vertical-align: middle;
 padding-top: 0.25rem;
 padding-bottom: 0.25rem;
}
#infoTable .btn {
 margin-top: 0;
 margin-bottom: 0;
 padding-top: 0.25rem;
 padding-bottom: 0.25rem;
 line-height: 1.25;
}
/* DEVICES MENU */
#devicesCanvas .offcanvas-body {
 overflow: hidden !important;
}
#devicesCanvas #devicesBtnGroup {
 width: 71% !important;
 font-size: 0.75rem !important;
}
div#devicesBtnGroup .btn-outline-primary {
 background-color: #fff !important;
 border-color: #555;
 color: #555;
}
div#devicesBtnGroup .btn-outline-primary:hover {
 background-color: #ccc !important;
 border-color: #555;
 color: #555;
}
div#devicesBtnGroup .btn-outline-primary:active {
 background-color: #ccc !important;
 border-color: #555;
 color: #555;
 border-color: transparent;
}
div#devicesBtnGroup .btn-primary {
 background-color: #555 !important;
 color: #fff;
 border-color: #555;
 border-radius: 3px;
}
/* SIDEBAR */
#col0 {
 background-color: #fff;
 border-radius: 7px;
}
a.nav-link.py-3.border-bottom {
 color: #999;
}
a.nav-link.py-3.border-bottom:hover {
 color: #222;
}
#sidebarNav {
 height: 100%;
}
div#sideBarPanel .d-flex.flex-wrap {
 display: grid !important;
 grid-template-columns: repeat(3, 1fr);
 gap: 3px;
}
div#sideBarPanel label.form-check-label {
 font-size: 11px;
}
div#sideBarPanel select#hostControl-mccode {
 font-size: 11px;
}
div#sideBarPanel button.btn.btn-warning.btn-sm.px-2.py-0 {
 font-size: 11px;
 background-color: #555;
 border: 1px #222 solid;
 color: #efefef;
}
div#sideBarPanel select#chatControl-scale {
 font-size: 12px;
}