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