/* 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: fixed;
  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: none;
  font-size: 36px;
  margin-left: 50px;
}

/* 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: 4;
}

/* A class for external links. These have a specific height and a light grey background. */
.external-link {
  position: absolute;
  bottom: 63px;
  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;
}

/* Removes the underline for pagination links on hover */
.page-link:hover {
  /* padding: 0; */
  /* border: 0; */
  color: black;
  background-color: transparent !important;
  text-decoration: none;
}

/* 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;
}

.actionBar {
  position: absolute;
  display: none;
  z-index: 4;
  background-color: #fff;
  /** height: 100%; */
  top: 0;
  right: 0;
  min-width: 470px;
  max-width: 560px;
  min-height: 550px;
  max-height: 720px;
  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: 1;
  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;
  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;
  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;
}