body {
    overflow-y: scroll;
}

/*Table */
.scrollable{
    max-height: 200px;
    overflow-y: scroll;
}

/* slider */

.slidecontainer {
    width: 100%; /* Width of the outside container */
    height: 100%;
}


.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}


/* brusharea */
.brusharea {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*padding*/
.padding{
    padding-bottom: 2rem;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}
/*Footer*/
footer {
    background-color:#41464b;
    color: #b6d4fe;
    padding-top: 2rem;
}
hr.light{
    border-top: 1px solid #b6d4fe;
    width: 100%;
    margin-top: .8rem;
    margin-bottom: 1rem;
}

/*Sequence*/
#sequence {
  width: 1600px;
  height: 50px;
  overflow-x: auto;
  overflow: hidden;
  position: center;
}
#sequencenumber {
  width: 1600px;
  height: 50px;
  overflow-x: auto;
  overflow: hidden;
  position: center;
}


/*Datatable*/
.featureContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    float: left;
    overflow: hidden;
    padding: 10px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.labelContainer {
    width: 200px;
    float: left;
    left: 0px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    background: white;
    z-index: 10;
    display: inline;
}

.labelContainer, .structureContainer {
    flex-shrink: 0;
    /* other styles... */
}

#resizer {
    cursor: col-resize; /* display a resize cursor when over the draggable area */
    width: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
    background: #ccc; /* color of draggable area */
}

.dataContainer {
    flex-grow: 1;
    overflow: auto;
}

.structureContainer {
    width: 30%; /* Adjust as needed */
    overflow: auto;
    flex-grow: 1; /* allow this div to grow */
}

.viewerSection {
    margin: 120px 0 0 0;
}

#pdb_structure {
    position: relative;
    height: 500px;
}

.onerowdiv {
    height: 23px;
}
/*.helpContainer {*/
/*    float: left;*/
/*    left: 0px;*/
/*    overflow: hidden;*/
/*    padding-top: 10px;*/
/*    margin-top: 5px;*/
/*    background: white;*/
/*    z-index: 10;*/
/*    display: inline;*/
/*}*/
.dataContainer {
    padding: 0px;
    margin: 0px;
    overflow: auto;
    overflow: hidden;
    background: #e3e2e2;
    touch-action: none;
}
/*innerclasses*/
.featureType{
    padding: 1px;
    margin: 2px;
    background: #e3e2e2;
    border-radius: 5px;
}
.featureHelp{
    padding: 1px;
    margin: 2px;
    background: #e3e2e2;
    border-radius: 5px;
}
p {
    margin: 0;
}
/*Dataclasses*/

.empty{
    padding: 1px;
    margin: 2px;
}

.tablecontainer{
    padding-top: 1px;
    padding-bottom: 1px;
}

.wrapper{
    width: 600px;
    height: 30px;
    white-space: nowrap;
    font-size:0;
}

.single-block{
   width:20px;
   height:100%;
   display:inline-block;
   vertical-align:bottom;
   font-size:16px;
}
.red{
    background-color:red;
    position:relative;
}
.green {
    background-color:green;
}

/* Loader */

.no-scroll {
   overflow: hidden;
}

/*.loader {*/

/*}*/

.loader {
    width: 100%;
    min-height: 95%;
    position: absolute;
    top: 65px ;
    left: 0;
    background-color: white;
    z-index: 100;
    display: flex;
}

.spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    position: relative;
    animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}

.disorderedblocks {
    height: 15px;
    width: 6px;
    font-family: 'Courier New', Courier, monospace;
}


/* Off Canvas */


/* off canvas */
.offcanvas-btn {
  left: 420px;
  visibility: visible;
}

/* optional junk to toggle the button text */
.offcanvas-btn span:last-child,
.offcanvas.show .offcanvas-btn span:first-child {
  display: none;
}

.offcanvas.show .offcanvas-btn span:last-child {
  display: inline;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.shadow_card{
    background-color: rgba(255, 255, 255, 0.8); /* semi-transparent white background to ensure readability */
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2)
}

/* Add to your stylesheet so that the index is rendered above the residues on the right */
.line {
  margin-bottom: 4px;
    margin-right: 10px ;
}



.idx-row {
  text-align: right;
  font-weight: bold;
    /*user-select: none;*/
  font-size: 0.9em;
  color: #555;
}

.residue-row .residue {
  /*display: inline-block;*/
  /*width: 1em;*/
  font-size: 1em;
  text-align: center;
  font-family: monospace;
}


/* When a residue has been “drag‐selected”, we give it a yellow background: */
.residue::selection {
  background-color: rgba(255, 255, 0, 0.6);
}

.idx::selection {
  background-color: transparent;
  color: inherit;
}