/* This CSS rule is for the sidebar. It's a fixed sidebar that takes the full height of the viewport.
It's initially hidden with width 0, then gets shown (presumably through JavaScript).
The flex properties help organize the content vertically and evenly space them. */
.sidebar {
  height: 100%;
  width: 200;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.2s;
  padding-top: 20px; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
  border: 1px solid #eee;
}

/* The logo inside the sidebar. It has a specific width and automatic height for aspect ratio. There's also a little margin around it. */
.logo {
  height: auto;  /* Maintain aspect ratio */
  width: 200px;
  margin: 10px;  /* Add some space around the logo */
}

/* Style for anchor tags in the sidebar. They have padding, no text decoration, and color transition on hover. */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  color: #000000de;
  display: block;
  transition: 0.3s;
}

/* Changes the color of the anchor tags in sidebar on hover */
.sidebar a:hover {
  color: black;
}

/* Style for the close button. Positioned absolute at the top-right of the sidebar. */
.closebtn {
  position: absolute;
  top: 64px;
  right: 25px;
  display:block;
  font-size: 36px;
  margin-left: 50px;
  color: black;
}

.editBtn {
  top: 64px;
  right: 65px;
  display: block;
  font-size: 36px;
  margin-left: 50px;
  z-index: 3;
  position: absolute;
  color: black;
}

/* A full-screen overlay that's hidden by default. Presumably used when the sidebar is visible. */
.overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
}

/* A class for external links. These have a specific height and a light grey background. */
.external-link {
  position: absolute;
  bottom: 0px;
  width: 100%;
}

/* Links container is aligned to the start (top, in this column flexbox context) of its parent element */
#links-container {
  align-self: flex-start;
}

/* Styles for anchor tags inside the links container. They have a specific width and a light grey top and bottom border. */
#links-container a {
  width: 220px;
  padding: 12px;
  border-left: 4px solid;
  border-left-color: #fff;
}

/* Changes the background and text color of the anchor tags inside links container on hover */
#links-container a:hover {
  background-color: #f8f9fe;
  color: #4d5ee0;
  border-left-color: #4d5ee0;
}

.external-link a:hover {
  background-color: #f8f9fe;
  color: #4d5ee0;
}

.selected {
  background-color: #4d5ee01f;
  border-left-color: #4d5ee01f;
  color: #4d5ee0;
  border-left: 4px solid;
  border-left-color: #4d5ee0 !important;
}

/* An empty space that occupies 80% of the height of its parent. Used for pushing down certain elements. */
#space {
  height: 70%;
}

/* Styles for a card class. This is an absolute-positioned element with specific width and height. */
.card-2 {
    background-color: #fff;
    padding: 10px;
    width: 350px;
    height: 100px;
    bottom: -50px;
    left: 20px;
    position: absolute;
    border-radius: 5px
}

/* This CSS rule styles list group items in the treeview. The cursor changes to a pointer when you hover over these elements. */
.treeview .list-group-item{
  cursor:pointer;
}

/* This rule adds a left and right margin to span elements with the class "indent" inside the treeview. This could be used to provide some spacing around indented items in the tree. */
.treeview span.indent{
  margin-left:10px;
  margin-right:10px;
}

/* This rule styles span elements with the class "icon" inside the treeview, providing them with a specific width and a margin to their right. This could be used for the icons representing the tree structure. */
.treeview span.icon{
  width:12px;
  margin-right:5px;
}

/* This rule styles disabled nodes in the treeview. These elements will have a silver color and their cursor will change to a "not-allowed" icon when hovered over, indicating their disabled status to the user. */
.treeview .node-disabled{
  color:silver;
  cursor:not-allowed;
}

/* This rule sets a specific color for elements with the class "node-treeview6". */
.node-treeview6{
  color:#428bca;
}

/* This rule changes the background color of non-disabled "node-treeview6" elements when hovered over, providing a visual feedback to the user. */
.node-treeview6:not(.node-disabled):hover{
  background-color:#F5F5F5;
}

/* Overrides the default rounded borders for a button class. */
.btn-circle {
  border-radius: 0px;
}

/* Styles for pagination links. They have no padding, border, background, and the text color is black. */
.page-link {
    padding: 0;
    border: 0;
    color: black;
    background-color: transparent !important;
}

/* Styles for disabled page items. They have a transparent background. */
.page-item.disabled .page-link {
  background-color: transparent !important; 
}

/* Styles for active page items. They have a transparent background. */
.page-item.active .page-link {
  background-color: transparent !important;
}

html {
  overflow-x:hidden;
}

.actionBar {
  position: absolute;
  display:none;
  z-index: 2;
  background-color: #fff;
  height: 100%;
  top:0;
  max-height: 100vh;
  overflow-y: auto;
  right:0;
  min-width: 800px;
  max-width: 800px;
  box-shadow: 0 8px 10px -5px #0003, 0 16px 24px 2px #00000024, 0 6px 30px 5px #0000001f;
}

.toast-message {
  max-width: 250px;
  margin-left: -125px;
  background-color: #cc2e29;
  border-radius: 5px !important;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 0;
  right: 1%;
  bottom: 1%;
  font-size: 10px;
  min-height: 80px;
  border-radius: 3px;
  box-shadow: 0 0 12px #0d0d0dde;
  margin: 10px;
  word-break: break-word;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  font-family: Roboto,sans-serif;
  letter-spacing: .0178571429em;
  white-space: pre-line;
  opacity: 0; /* Start with the toast being transparent */
  transform: translateY(100px); /* Start below its final position */
  visibility: hidden;
  transition: opacity 0.5s linear, transform 0.5s ease;
}

.toast-message.show {
  visibility: visible;
  z-index: 100;
  opacity: 1; /* Full opacity when showing the toast */
  transform: translateY(0); /* Move to final position */
  transition: opacity 0.5s linear, transform 0.5s ease, visibility 0s 0s; /* Apply visibility transition without delay when showing */
}

.toast-message.hide {
  opacity: 0;
  z-index: 0;
  transform: translateY(100px); /* Move back to below its final position */
  transition: opacity 0.5s linear, transform 0.5s ease, visibility 0s 0.5s; /* Delay visibility to hide after transitions */
}

.toast-message strong {
  font-weight: 500;
}

.toast-message p {
  margin: 8px 0;
}

.toast-message button {
  background-color: transparent;
  color: white;
  border: none;
  padding: 0;
  cursor: pointer;
}

.dropdown-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.blocklyFlyoutButton {
  display:none;
}

.blocklyFlyoutBackground {
  fill: whitesmoke;
  fill-opacity: .8;
}

.blocklyTrash {
  display: none;
}

.blocklyToolboxDiv {
  background-color: whitesmoke;
  overflow-x: visible;
  overflow-y: auto;
  padding: 4px 0 4px 0;
  position: absolute;
  z-index: 70;
  -webkit-tap-highlight-color: transparent;
}

.blocklyScrollbarVertical  {
  display: none;
}

.blocklyScrollbarVertical {
  display: none;
}

#content {
  padding: 0;
   margin: 0;
   position: absolute;
   bottom: 0;
   top: 64px;
   left: 225px;
}

#contentEdit {
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 0;
  top: 80px;
  left: 225px;
}

.buttonModal {
  width: 200px;
  font-size: 15px;
  border-radius: 4px;
  background-color: #4d5ee0 !important;
}

.icon-otp {
  width: 24px;
  height: 24px;
  fill: white;
}

.floating-btn {
  z-index: 1;
  position: fixed;
  bottom: 17px;
  right: 20px;
  width: 400px;
}

/* Add custom styles here */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #F0F0F0; /* Adjust the background color as needed */
}

.card {
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    width: 350px; /* Adjust width as needed */
}

.logo {
    display: block;
    margin: 0 auto;
    height: auto;
}

.single-sign-in-notice {
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.54);
    padding: 10px 0;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.brand-label {
    color: black;
}

.login-icon {
    float: left;
    width: 32px;
}

.toast-close-button {
  position: absolute;
  top: 5%;
  right: 5%;
}

.navbar-custom {
  z-index: 3;
  padding: 0.5rem 1rem !important;
  height: 64px;
  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
}

.header-title {
  font-family: Barlow, Roboto, sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  line-height: 15px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: rgba(var(--mdc-theme-text-primary-on-background-rgb, 0, 0, 0), var(--mdc-theme-text-primary-on-background-text-primary-on-background, .9));
  text-decoration: none;
}

.logo-img {
  width: 150px;
  height: auto;
  margin-top: -15px;
}

.custom-align-right {
  margin-left: -10%;
}

.login-button {
  color: #0009;
}

.login-popup {
  display: none;
  position: absolute;
  top: 66px;
  right: 15px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease-in-out;
}

.sidebar-custom {
  margin-top: 64px;
  z-index: 1;
  width: 222px;
}

.version-text {
  color: #000000de;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.collapse-link {
  color: #000000de;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  letter-spacing: 0.0333333333em;
  margin-left: -20px;
}

.arrow-icon {
  width: 20px;
  float: right;
}

.dataTables_wrapper {
  color: black;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 3px
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: black;
    background-color: #fff;
    border: 1px solid #dfe3e6
}

/* .page-link:hover {
    z-index: 2;
    color: #2134bf;
    text-decoration: none;
    background-color: #eaeced;
    border-color: #dfe3e6
}

.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 .2rem #4d5ee040
} */

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.page-item:last-child .page-link {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.page-item.active .page-link {
    z-index: 1;
    color: black;
    background-color: #ddd;
    border-color: #ddd
}

.page-item.disabled .page-link {
    color: #515559;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dfe3e6
}

.pagination-lg .page-link {
    padding: .75rem 1.5rem;
    font-size: 1.16075rem;
    line-height: 1.5
}

.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

.pagination-sm .page-link {
    padding: .25rem .5rem;
    font-size: .812525rem;
    line-height: 1.5
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem
}

.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem
}

/* Target pagination buttons with edge-manager class */
.edge-manager-pagination .paginate_button {
     background-color: transparent !important; ; 
    color: black !important;
    border-radius: 4px;
    padding: 5px 10px;
    margin: 2px;
    text-decoration: none;
    border: none;
}

.edge-manager-pagination .paginate_button:hover,
.edge-manager-pagination .paginate_button:focus,
.edge-manager-pagination .paginate_button.current {
     background-color: transparent !important; 
    color: grey !important;
    box-shadow: none;
    outline: none;
}

.edge-manager-pagination .paginate_button.disabled {
     background-color: transparent !important; 
    color: grey !important;
    pointer-events: none;
    cursor: default;
}

.edge-manager-pagination-button {  background-color: transparent !important;  color: black !important; }
.edge-manager-pagination-button:hover {  background-color: transparent !important;  color: black !important; }


.details-table {
  margin-left: 3%;
  width: 95%;
  color: black;
}

.dataselection-table {
  margin-left: 3%;
  width: 95%;
  color: black;
}

.schedules-table {
  margin-left: 3%;
  width: 95%;
  color: black;
}

.top-search input[type="search"] {
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 6px 10px;
    width: 250px;
    font-size: 14px;
}

.top-search {
  margin-right: 2%;
  margin-top: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom {
  margin-right: 2%;
  margin-bottom: 2%;
}

.details-source-table {
    margin-left: 3%;
    width: 95%;
    color: black;
}

.details-destination-table {
    margin-left: 3%;
    width: 95%;
    color: black;
}

/* Style for the close button. Positioned absolute at the top-right of the sidebar. */
.deleteBtn {
  position: absolute;
  top: 64px;
  right: 60px;
  display:block;
  font-size: 36px;
  margin-left: 50px;
  color: black;
}



.spacer {
    display: block;
    height: 1rem; /* or use `margin-top` if you prefer */
}

.components-table {
  margin-left: 1%;
  width: 99%;
  color: black;  
}

.templates-table {
  margin-left: 1%;
  width: 99%;
  color: black;  
}

#edgeDeamonStatus {
  color: black;
}

h3 {
  color: black; 
}

.chart-icon {
    text-decoration: none !important; /* Remove underline */
    display: inline-flex;             /* Keep layout intact */
    align-items: center;
}

.chart-icon mat-icon {
    /* Optional: add spacing or size adjustments if needed */
}

.chart-icon::after {
    content: none !important;         /* Remove any pseudo-elements */
}

.footer {
  background-color: #ECEFF1;
}


.clock-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  font: 500 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding:.25rem .5rem; border-radius:999px;
  border:1px solid transparent; user-select:none; white-space:nowrap;
}
.clock-ic { width:16px; height:16px; flex:0 0 16px; }

.clock-ok  { color:#166534; background:#dcfce7; border-color:#86efac; }
.clock-warn{ color:#92400e; background:#ffedd5; border-color:#fdba74; }
.clock-err { color:#7f1d1d; background:#fee2e2; border-color:#fca5a5; }
.clock-na  { color:#374151; background:#f3f4f6; border-color:#e5e7eb; }

/* Base chip (optional: keep if you already have styles) */
.clock-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  font: 500 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding:.25rem .5rem; border-radius:999px;
  border:1px solid transparent; user-select:none; white-space:nowrap;
  cursor:default;
}
.clock-ok  { color:#166534; background:#dcfce7; border-color:#86efac; }
.clock-warn{ color:#92400e; background:#ffedd5; border-color:#fdba74; }
.clock-err { color:#7f1d1d; background:#fee2e2; border-color:#fca5a5; }
.clock-na  { color:#374151; background:#f3f4f6; border-color:#e5e7eb; }


/* Raise above DT wrappers if needed */
.tooltip { z-index: 2000; }

/* Your custom class applied via customClass */
.clock-tooltip .tooltip-inner {
  max-width: 320px;
  min-width: 320px;
  text-align: left;
  white-space: pre-line;  /* renders '\n' as line breaks */
  word-break: break-word;
  padding: .6rem .8rem;
  border-radius: .6rem;
}

/* Optional darker theme to match your chips */
.clock-tooltip .tooltip-inner {
  background: #111827;
  color: #f9fafb;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.clock-tooltip .tooltip-arrow::before {
  background: #111827;
}

.tooltip-inner {
  background: rgba(60, 60, 60, 0.85); /* dark grey at 85% opacity */
  color: #fff;
  font-weight: 500;

  padding: 4px 8px;
  border-radius: 4px;

  white-space: pre-line;  /* if you want \n support */
  text-align: center;

  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: rgba(60, 60, 60, 0.85);
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: rgba(60, 60, 60, 0.85);
}
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: rgba(60, 60, 60, 0.85);
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: rgba(60, 60, 60, 0.85);
}