body {
	padding-top: 70px;
}

.table a.btn {
    text-decoration: none;
}

.mapping-section {
	max-height: 600px;
	overflow: auto;
}

.add-mapping-btn {
	margin-left: 5px;
}

th.sortable:hover {
	cursor: pointer;
    background-color: #f0ffff;
}

/* Update your existing rounded class for tables */
.table.rounded {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
}

/* Add styles for nested tables within rounded tables */
.table.rounded table {
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
}

/* Ensure first row of thead has rounded top corners */
.table.rounded thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.table.rounded thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

/* Ensure last row of tbody has rounded bottom corners */
.table.rounded tbody tr:last-child td:first-child,
.table.rounded tbody tr:last-child th:first-child {
    border-bottom-left-radius: 12px;
}

.table.rounded tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Fix for nested tables to prevent their corners from sticking out */
.table.rounded td table {
    margin: -8px;
    width: calc(100% + 16px);
}

/* Remove border on nested tables to avoid double borders */
.table.rounded td table.table-borderless,
.table.rounded td table.table-borderless td {
    border: none;
}

/* Fancy table styling */
.table.table-fancy {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.table.table-fancy thead {
    background-color: #f8f9fa;
}

.table.table-fancy thead th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    padding: 15px 12px;
    position: relative;
}

.table.table-fancy tbody td,
.table.table-fancy tbody th {
    padding: 12px;
    border-top: 1px solid #eee;
}

.table.table-fancy.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
    transition: background-color 0.3s ease;
}

.table.table-fancy tbody tr:hover {
    background-color: #f7fbff;
    transition: background-color 0.2s ease;
}

/* Rounded corners */
.table.table-fancy thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.table.table-fancy thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

.table.table-fancy tbody tr:last-child td:first-child,
.table.table-fancy tbody tr:last-child th:first-child {
    border-bottom-left-radius: 12px;
}

.table.table-fancy tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Nested tables handling */
.table.table-fancy td table {
    margin: -8px;
    width: calc(100% + 16px);
    box-shadow: none;
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
}

.table.table-fancy td table thead th {
    background-color: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

/* Remove border on nested tables */
.table.table-fancy td table.table-borderless,
.table.table-fancy td table.table-borderless td,
.table.table-fancy td table.table-borderless th {
    border: none;
    box-shadow: none;
}

/* Status indicators and badges */
.table.table-fancy .label {
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 500;
    display: inline-block;
}

/* Action buttons styling */
.table.table-fancy .btn {
    margin: 2px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Links styling */
.table.table-fancy a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.table.table-fancy a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Table responsiveness */
.table-responsive .table.table-fancy {
margin-bottom: 0;
}


.scroll-section {
    font-size: 0.75em;
    max-width: 700px;
    max-height: 100px;
    overflow: scroll;
}

.scroll-section-sm {
    font-size: 0.75em;
    max-width: 450px;
    max-height: 100px;
    overflow: auto;
}

.scroll-section-lg {
    /*font-size: 0.75em;*/
    max-width: 700px;
    max-height: 340px;
    overflow: scroll;
}

.scroll-section-lg-wide {
    max-width: 1850px;
    max-height: 1340px;
    width: 850px;
    height: 340px;
    overflow: scroll;
    resize: both;
}

.scroll-section-lg-y {
    max-height: 650px;
    overflow-y: auto;
}

.scroll-section-lg-tall {
    max-width: 1600px;
    max-height: 800px;
    overflow: scroll;
}
.scroll-section-xlg {
    max-width: 1600px;
    max-height: 900px;
    overflow: scroll;
}

.highlight-search {
    background-color: yellow;
}

.flip {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.scroll {
    overflow-x: auto;
}

.extra-spacing {
   margin: 10px 10px;
}

.live-animation.ng-enter {
    -webkit-transition: ease 1s;
    transition: ease 1s;
    background-color: green !important;
}

.live-animation.ng-enter-active {
    background-color: white !important;
}
[animate-on-change] {
  transition: all 1s;
  -webkit-transition: all 1s;
}
[animate-on-change].changed {
  background-color: green !important;
  -webkit-transition: ease 1s;
  transition: ease 1s;
}

/* Bootstrap overides */
.popover-content {
   word-wrap: break-word;
}

.popover {
    max-width: 600px !important;
}

.collapse-heading {
    cursor: pointer;
}

a[role="tab"] {
    cursor: pointer;
}

.admin-tab {
    padding: 20px 0;
}
.second-navbar {
    top: 30px;
}
.navbar-nav > li > a, .navbar-brand {
    padding-top: 5px !important;
    padding-bottom: 0 !important;
    height: 30px;
}
.navbar-nav > li > div {
    color: white;
    text-decoration: none;
    padding-top: 5px !important;
    padding-bottom: 0 !important;
    height: 30px;
    padding: 10px 15px;
}


.navbar {
    min-height: 30px !important;
}
/* Loading bar overides */
/* https://github.com/chieffancypants/angular-loading-bar*/
#loading-bar .bar {
	top: 61px !important;
    /*top: 60px !important;*/
}

#loading-bar-spinner {
	/*top: 60px !important;*/
    top: 80px !important;
}
.breadcrumb > li + li.pull-right:before {
    content: none;
}

.breadcrumb {
    padding: 4px 15px;
}

.modal-backdrop.am-fade {
  opacity: .5;
  transition: opacity .15s linear;
  &.ng-enter {
    opacity: 0;
    &.ng-enter-active {
      opacity: .5;
    }
  }
  &.ng-leave {
    opacity: .5;
    &.ng-leave-active {
      opacity: 0;
    }
  }
}

.lb-sm-imported {
    margin-top: 5px;
}
.lb-md-imported {
    margin-top: 4px;
    float: left;
}
.lb-lg-imported {
    margin-top: 3px;
}
.lb-sm {
    font-size: 12px;
}

.lb-md {
    font-size: 16px;
}

.lb-lg {
    font-size: 20px;
}
.prettyprint ol.linenums > li {
    list-style-type: decimal;
}

pre.prewrap  {
    white-space: normal;
}
.span-error {
    background-color: #f44;
}
.admin-navbar {
    color: #fff;
    padding-top: 5px;
    display: block;
    line-height: 20px;
}
.row-pb-1 {
    padding-bottom: 10px;
}
.color-picker {
    height: 4vh;
    width: 4vw;
    border-radius: 4px;
    background-color: transparent;
}
.preferences-flex {
    display: flex;
    justify-content: space-between;
}
.border {
    border: 1px solid;
}
.button-margin-top {
    margin-top: 10px;
    /*    border: 1px solid black;
    border-radius: 4px;*/
    margin-left: 10px;
}
.themes-dropdown {
    display: flex;
    align-items: center;
    gap: 10px;
/*    border:1px solid*/
}
.themes-dropdown>h3 {
    width: fit-content;
}
.themes-dropdown > select {
    margin-top: 10px;
    min-width: fit-content;
    width: 30%;
}
.theme-glyphicon {
    margin-top: 10px;
    font-size: 2em;
}
.delete-glyphicon {
    background-color: transparent;
    border: none;
}
.delete-glyphicon>.glyphicon-trash {
    font-size: 20px;
}
.delete-glyphicon:hover {
    background-color: red;
    border-radius: 4px;
    /*will-change to danger*/
}
.error-modal {
    width: 70%;
}
.mt-2 {
    margin-top: 20px;
}
/*.container-padding {
    padding-left: 50px;
    padding-right:50px;
}*/
.flex-it {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}
.theme-input {
    margin-top: 20px;
}
.vertical {
    display: flex;
    align-items: center;
    gap: 10px;
}
.row-pt-1 {
    margin-top: 5px;
}
.previewDiv,.previewTable,.previewButtonDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.previewDiv {
    height:30px;
}
.previewButtonDiv {
    gap: 20px;
    padding: 10px;
}
.previewButton {
    background-image:none;
}
.previewDivMain {
    padding: 30px;
    text-align: center;
    position: relative;
}
.previewDivSecondary {
    padding: 30px 60px;
    text-align: center;
}
.pagination {
    /* override big pagination margin */
    margin: 2px !important;
}
.panel-heading a {
    cursor: pointer;
}
.clickable {
    cursor: pointer;
}  
.expand-button {
    max-width: fit-content;
    padding: 1.5px 15px;
    line-height: .75;
}
.chart-container-sm {
    position: relative;
    aspect-ratio: auto 300 / 100;
    background: #f9f9f9;
}
.chart-container {
    position: relative;
    aspect-ratio: auto 2400 / 975;
    background: #f9f9f9;
}
.chart-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.flex-buttons {
    display: flex;
    flex-direction: column;
}
.flex-buttons > button {
    margin-bottom: 0px;
}
.expand-button > .glyphicon {
    font-size: 50%;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-container {
    display: flex;
    justify-content: flex-start;
}
.flex-buttons {
    display: flex;
    flex-direction: column;
    margin-right: 15px;
}
.left-align {
    justify-content: flex-start; /* This will align the children to the left */
}
.align-bottom {
    margin-top: auto;
}  
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-bottom {
    justify-content: flex-start;
    align-self: flex-end;
    display: flex;
    align-items: center;
} 
.chart-legend-text {
    font-size: 24px;
}
.copy-button {
    display: inline-block;
    cursor: pointer;
}

.copy-button:hover {
    cursor: copy;
}

.cursor-pointer {
    cursor: pointer;
}
.nav-pills.nav-stacked > li {
    margin-bottom: 0px; /* Reduce vertical spacing */
}

.nav-pills.nav-stacked > li:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .responsive-container {
        position: absolute;
        top: 150px;
    }
}