/* Zoom to 67% in all modern browsers */
@media screen and (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
  body {
    transform: scale(0.67);
    transform-origin: top left;
  }
}

#maincontent_container {
  margin-top: 5px;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 1px;
}

.btn-primary {
  margin-bottom: 2px;
  margin-top: 2px;
}

.sidebar li .submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

.sidebar .nav-item .nav-link:focus {
  font-weight: 500;
  color: white;
  background: dodgerblue;
}

.sidebar .nav-link:hover {
  font-weight: 500;
  color: white;
  background: dodgerblue;
}

/*.variantnavsupernavlink:hover {
    font-weight: 500;
    color: white;
    background: white;
}*/

.sidebar .nav-link {
  font-weight: 500;
  color: black;
}

.sidebar .nav-link.active {
  font-weight: 500;
  color: white;
  background: dodgerblue;
}

/* todo fix centering alert

.alert {
    border-left-style: solid;
    border-left-width: 1px;
    padding-left: 200px;
    margin-left: 190px;
}
*/

#publications > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
  font-size: 14px;
}

#clinvar-record {
  margin-left: 20px;
  width: auto;
}

#clinvar-entries {
  margin-left: 20px;
  width: auto;
}

.variantdetailbutton {
  font-size: 0.9em;
}

/* add some width to Pagination entries for datatables */
div.dataTables_wrapper div.dataTables_length select {
  width: 40%;
  display: inline-block;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  /* justify-content: flex-end; */
  justify-content: flex-start;
}

table.dataTable {
  /*table-layout: fixed;*/
  font-size: 16px;
  line-height: 18px;
  background-color: white;
}

.logo_sidebar {
  margin-top: 5px;
  margin-bottom: 35px;
  width: 190px;
}

.responsive_login_logo {
  width: 100%;
  max-width: 250px; /* Add this line */
  height: auto;
  margin-bottom: 35px;
}

@media (max-width: 576px) {
  .responsive_login_logo {
    width: 70%;
  }
}

@media (max-width: 768px) {
  .responsive_login_logo {
    width: 80%;
  }
}

/*logged in as and log out button*/
.button_logged_in_as {
  width: 150px;
  margin-bottom: 50px;
  color: black;
  text-decoration: none;
  font-size: 11pt;
}

.button_log_out {
  width: 100px;
  margin-bottom: 50px;
  color: black;
  text-decoration: none;
  font-size: 11pt;
}

.version {
  color: dimgrey;
  font-size: 10pt;
  position: fixed;
  bottom: 0;
  left: 0;
}

.sidenavcolumn {
  max-width: 280px;
  min-width: 240px;
}

.interpretation-content-col {
  max-width: 300px;
}

/*
 * Configure the z-index of the editor UI, so when inside a Bootstrap
 * modal, it will be rendered over the modal.
 */
:root {
  --ck-z-default: 100;
  --ck-z-modal: calc(var(--ck-z-default) + 999);
}

/*
for gradient pscore
 */

.scoregradient-container {
  position: relative;
}

.scoregradient-image {
  position: relative;
  display: inline-block;
}

.scorevalue {
  position: relative;
  font-size: 14px; /* Adjust font size as needed */
  border-radius: 5px; /* Optional: Add rounded corners */
  max-width: 300px;
}

#id_login::placeholder {
  color: transparent;
}

#id_password::placeholder {
  color: transparent;
}

/*make the reviewtable on variant summary have the same width as the table above */
.vrsummary_firsttable .table-primary {
  width: 8em; /* Adjust the width as needed */
}

.vertical-alignment-helper {
  display: table;
  height: 100%;
  width: 100%;
  pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
}

.vertical-align-center {
  /* To center vertically */
  display: table-cell;
  vertical-align: middle;
  pointer-events: none;
}

.modal-content {
  /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
  width: inherit;
  max-width: inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
  height: inherit;
  /* To center horizontally */
  margin: 0 auto;
  pointer-events: all;
}

/* Progress on sidenav, status of variant stages */

/* Styling for circle items */
.circle-item {
  display: flex;
  align-items: center;
}

/* Styling for vertical connectors */
.connector-vertical {
  width: 1px;
  height: 20px; /* Height of the vertical line */
  background-color: #ccc; /* Color of the vertical line */
  margin-left: 26px; /* Adjust left margin for alignment */
  margin-top: -10px; /* Adjust top margin to position correctly */
}

/* Green tick icon */
.text-success::before {
  content: '\f058'; /* Unicode for check-circle */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: green;
  margin-right: 5px;
}

/* Red cross icon */
.text-danger::before {
  content: '\f057'; /* Unicode for times-circle */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: red;
  margin-right: 5px;
}

/* Remove blue highlight for active links */
.nav-link.active {
  background-color: transparent;
  color: inherit;
}

.nav-link:focus,
.nav-link:active {
  background-color: transparent;
  color: inherit;
  outline: none;
}

.d-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* First column takes less space, second column takes more space */
  gap: 2px; /* Adjust the gap between columns */
}

.stage-name-wrapper {
  grid-column: 1 / 2;
  margin-right: 0; /* Ensure no extra right margin */
  color: orange; /* Ensure stage name is orange */
}

.status-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-column: 2 / 3;
}

.button-container {
  margin-top: 20px; /* Adjust vertical space between status text and buttons */
}

.status-accepted {
  color: green;
}

.status-revision {
  color: orange;
}

.status-progress {
  color: grey;
}
/* Add a grey highlight for the current variant stage (lightgrey is also a possibility) */
.current-stage-highlight {
  background-color: #f0f0f0; /* Helleres Grau */
}

/* style for the external link buttons */
.btn-linkout {
  background-color: white;
  color: #0d6efd;
  border: 1px solid white;
}

/* style for the non external buttons in blue */
.btn-nolinkout {
  background-color: white;
  color: #0d6efd;
  border: 1px solid white;
}

/* style for the argument buttons */
.btn-fixed-width {
  width: 200px; /* Set a fixed width for the buttons */
}

/* style for the link text buttons */
.table-sm a {
  color: black; /* Change link color to black */
  text-decoration: underline; /* Remove underline */
  white-space: nowrap; /* Prevent text wrapping */
}
.content-container {
  margin-top: 10px; /* Adjust the space as needed */
}

/* style for decision tree and preselected nodes */
.decision-tree {
  list-style-type: none;
  padding-left: 0;
}

.tree-node {
  margin-bottom: 0.5em;
}

.tree-node input[type='checkbox'] {
  margin-right: 0.5em;
}

.tree-node label {
  font-weight: normal;
}

.tree-node .bold-label {
  font-weight: bold;
}

.parent-eval-result {
  font-size: 0.9em;
  margin-left: 0.5em;
}