/* Adjustments for the side panel */
/* Fixed navbar with scrollbar */
#navbar {
    position: fixed;
    bottom: 6px;
    left: 0;
    width: auto; /* Adjust width as needed */
    overflow-y: auto; /* Add scrollbar when content exceeds height */
    overflow-x: hidden;
    background-color: whitesmoke;
    height: calc(100% - 118px);
  }

.nav{
  display: block;
}
/* Adjustments for the main content */
 /* Adjust main content to avoid overlapping with fixed navbar */
#main-doc {
    padding: 20px; /* Add padding to avoid content sticking to the edge */
    padding-left: 0;
    padding-right: 0;
    overflow-y: auto; /* Add scrollbar when content exceeds height */
  }

.col-md-9.col-sm-12.col-xs-12 {
    padding-left: 0;
    padding-right: 0;
}

.one{
  color: black;
}

.one:hover{
  color: #ffffff !important;
  background: #fd7e14;
}

/* a:focus{
  color: #6c757d;
} */

.one.selected {
  color: #ffffff !important;
  background: #007bff;;
}

/* Optional: Style for header inside navbar */
#navbar header {
	background-color: #6c757d;
	color: #fff;
	padding: 15px 28px 6px;
	margin-bottom: 10px;
}


  /* Optional: Style for nav links */
#navbar .one {
    padding: 3px 12px;
    display: block;
    color: inherit;
  }

  
/* Optional: Style for active nav link */
#navbar .one.active {
    background-color: #007bff;
    color: #fff;
  }


.row {
	max-width: 100vw;
    margin-right: unset;
	margin-left: unset;
}


.jsonview {
  /* height: auto;     */
  max-height: 300px;
  /* max-width: auto; */
  overflow: auto;
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
  margin-top: 0;
  margin-bottom: 1rem;
  background: none repeat scroll 0% 0% #FFF;
  /* box-shadow: 1px 2px 4px; */
  font-family: "Arial";
  font-size: 10pt;
}

.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.key { color: red; }
.null { color: magenta; }

pre{
  box-shadow: unset;
}


.container, .container-lg, .container-md, .container-sm, .container-xl {
	max-width: 98vw;
}

.btn-custom {
  width: unset;
  height: unset;
  font-size: 0.8rem;
  height: 4.5%;
  padding: 3px 25px;
}
.size{
  padding-left: 0;
}
.liss {
  list-style-type: disc !important;
}

/* Media Queries for Responsiveness */

/* Very Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  #navbar {
      height: calc(100% - 80px); /* Further adjust height for smaller screens */
      width: 12rem; /* Narrower width for the navbar */
  }
  
  #main-doc {
      padding: 10px; /* Further reduce padding for smaller screens */
  }

  .btn-custom {
      font-size: 0.6rem; /* Further adjust font size for smaller screens */
  }

  .col-md-3, .col-xs-4 {
      max-width: 100%; /* Columns take full width on very small screens */
      margin-bottom: 10px; /* Add margin between stacked columns */
  }

  .col-md-9, .col-xs-8 {
    max-width: 75%;
    left: 35%;/* Columns take full width on very small screens */
  }

  /* Optional: Adjustments for text and other elements */
  .one {
      font-size: 0.85rem; /* Adjust font size for small screens */
  }
  
  .jsonview {
      font-size: 8pt; /* Reduce font size for JSON view */
  }
  
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 100vw; /* Ensure full viewport width */
  }
}


/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  #navbar {
      height: calc(100% - 100px); /* Adjust height */
      width: 14rem;
  }
  
  #main-doc {
      padding: 15px; /* Reduce padding */
  }

  .btn-custom {
      font-size: 0.7rem; /* Adjust font size */
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  #navbar {
      height: calc(100% - 110px); /* Adjust height */
  }
  
  #main-doc {
      padding: 20px; /* Keep padding as is */
  }

  .btn-custom {
      font-size: 0.75rem; /* Adjust font size */
  }

  .col-md-9 {
    max-width: 75% !important;
    left: 3rem;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #navbar {
      height: calc(100% - 118px); /* Keep original height */
  }

  #main-doc {
      padding: 20px; /* Keep padding as is */
  }

  .btn-custom {
      font-size: 0.8rem; /* Keep original font size */
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and  (max-width: 1399.98px){
  #navbar {
      height: calc(100% - 118px); /* Keep original height */
  }

  #main-doc {
      padding: 20px; /* Keep padding as is */
  }

  .btn-custom {
      font-size: 0.8rem; /* Keep original font size */
  }

  .col-md-3 {
    max-width: 18rem !important;
  }

  .col-md-9 {
    max-width: 75% !important;
  }
}

/* Screens larger than 1200px */
@media (min-width: 1400px) {
  .col-md-3 {
      max-width: 20rem !important; /* Slightly larger width for first column */
  }

  .col-md-9 {
      max-width: calc(100% - 20rem) !important; /* Adjust second column accordingly */
  }
}