body {
    margin: 5px;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(27, 24, 94);
  }
  
  header {
    background-color: #312d28;
    height: 35px;
    width: 100%;
    opacity: .9;
    margin-bottom: 10px;
  }
  
  div.home {
    padding: 10px 0 30px 0;
    background-color: #312d28;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
  }
  
  div.about {
    padding: 10px 0 30px 0;
    background-color: #312d28;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
  }
  
  h1 {
    font-size: 1.9em;
    margin-top: 20px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }
  
  h2 {
    font-size: 1.5em;
    margin-top: 15px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }
  
  h3 {
    font-size: 1.2em;
    font-weight: 100;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }

  h3_bold {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }

  h3_underline {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }

  h4 {
    font-size: 1em;
    font-weight: 100;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0px;
    text-align: left;
    letter-spacing: normal;
    color:  rgb(27, 25, 95);
  }

  h5 {
    font-size: 1em;
    font-weight: 100;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    letter-spacing: normal;
    color:  rgb(27, 25, 95);
  }

  h6 {
    font-size: 1.35em;
    font-weight: 100;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    text-decoration: underline;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }

  h7 {
    font-size: 1.00em;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }
  
  h8 {
    font-size: 1.00em;
    font-weight: 100;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }

  h9 {
    font-size: 1.1em;
    font-weight: 100;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    text-decoration: underline;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }

  h10 {
    font-size: 1.1em;
    font-weight: 100;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }

  h11 {
    font-size: 1.00em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }

  h12 {
    font-size: 0.8em;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
  }

  table  {
    margin-top: 5px;
    color: rgb(27, 25, 95);
    border: 0.5px solid;
    border-collapse: collapse;
    padding: 0px;
  }

  table.index_table  {
    margin-top: 5px;
    margin-right:10px;
    color: rgb(27, 25, 95);
    border: 0.5px solid;
    border-collapse: collapse;
    padding: 0px;
    float: left;
    table-layout: fixed;
    min-width:250px;
  }
  
  td {
    font-size: 0.95em;
    margin-top: 0px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
    border-collapse: collapse;
    padding: 5px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
  }

  td.preview {
    font-size: 0.6em;
    margin-top: 0px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
    border-collapse: collapse;
    padding: 2px;
  }

  th {
    font-size: 1.05em;
    font-weight: not bold;
    margin-top: 15px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
    border-bottom: 0.5px solid;
    padding: 5px;
  }

  th.preview {
    font-size: 0.75em;
    font-weight: not bold;
    margin-top: 3px;
    text-align: left;
    letter-spacing: normal;
    color: rgb(27, 25, 95);
    border-bottom: 0.2px solid;
    padding: 2px;
  }

  tr:nth-child(odd){background-color: #f2f2f2;}
  tr:hover{background-color: rgb(217, 214, 213);} 

  .button {
    background-color: rgb(27, 25, 95);
    border: solid;
    border-radius: 25px;
    color: white;
    padding: 5px 10px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 4px 1px;
    cursor: pointer;
  }

  .link-button {
    background-color: rgb(27, 25, 95);
    border: solid;
    border-radius: 25px;
    color: white !important; /* Force white text */
    padding: 5px 10px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 4px 1px;
    cursor: pointer;
    text-decoration: none;
  }
  
  .link-button:visited {
    color: white !important; /* Force white text for visited links */
  }
  
  .link-button:hover {
    background-color: rgb(22, 20, 81); /* Darker shade on hover */
    text-decoration: underline;
  }
  
  

  .button_modal_close {
    border: solid 1px;
    border-radius: 25px;
    padding: 3px 6px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
  }

  .tab_button_version_view {
    border-bottom: none; 
    border-right: 1px solid rgb(201, 201, 201); 
    background-color: #eee; 
    padding: 10px; 
    font-size: 16px; 
    cursor: pointer; 
    color: rgb(27, 25, 95);
  }

  .tab_button_version_view_active {
    border-bottom: none; 
    border-right: 1px solid rgb(201, 201, 201); 
    background-color: rgb(192, 192, 192); 
    padding: 10px; 
    font-size: 16px; 
    cursor: pointer; 
    color: rgb(27, 25, 95);
  }

  .alert-message {
    font-size: 1.00em;
    font-weight: bold;
  }

 


#toc_instrument_version {
  position: fixed;
  right: 30;
  top: 130;
  background-color:#FFF;
}
#toc_instrument_version:hover  #full {
  display: block;
}
#toc_instrument_version  #full {
  display: none;
}

ul {
  color: rgb(34, 30, 168);
}

ul li {
  margin: 5px;
}

ul.toc_list {
  list-style-type: circle;
  color: rgb(34, 30, 168);
}

.h10_li {
  font-size: 1.1em;
  font-weight: 100;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  letter-spacing: normal;
  color: rgb(27, 25, 95);
}

a:link {
  color: rgb(34, 30, 168);
}

a:visited {
  color: #551A8B;
}

#tableproject {
  width: 50%;
}

div.form-group {
  width: 100%;
}

label {
  font-size: 1.05em;
  font-weight: 100;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  letter-spacing: -0.5px;
  color: rgb(27, 25, 95);
}

td.shortcell {
  width:50px
}

td.shortercell {
  font-size: 0.9em;
  width:30px
}

input {
  border: 1.5px solid rgb(27, 25, 95);
  border-radius: 6px;
  width: 100%;
  max-width: 350px;
}

input.radio {
  border: 1.5px solid rgb(27, 25, 95);
  border-radius: 6px;
  width: 100%;
  max-width: 60px;
}

.options {
  border: 1px solid #e5e5e5;
  padding: 10px;
}

/* select {
  font-size: 14px;
  border: none;
  width: 100%;
  background: white;
}*/
select {
  border: 1.5px solid rgb(27, 25, 95);
  border-radius: 6px;
}



textarea {
  border: 1.5px solid rgb(27, 25, 95);
  border-radius: 6px;
}

.dataTables_filter {
  float: left;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}

.dataTables_length {
  margin-top: 5px;
}

.dataTables_paginate {
  float: left;
  text-align: left;
}

/***** MODAL DIALOG ****/
#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

#modal > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:10vh;

	/* Sizing for visible dialog */
	width:80%;
	max-height: 75%;
  max-width:1200px;
  overflow-x:auto;
  overflow-y:auto;

	/* Display properties for visible dialog*/
	border:solid 1px #999;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	background-color:white;
	padding:20px;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
} 

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
} 

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
} 

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
} 

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 60px;
  height: 60px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid rgb(27, 25, 95);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}

.infolink:before
{
    content: '?';
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    width: 1.8ex;
    height: 1.8ex;
    font-size: 1.4ex;
    line-height: 1.8ex;
    border-radius: 1.2ex;
    margin-right: 4px;
    padding: 1px;
    color: rgb(27, 25, 95);
    background: white;
    border: 1px solid rgb(27, 25, 95);
    text-decoration: none;
}

.infolink:hover:before
{
    color: white;
    background:rgb(27, 25, 95);
    border-color: white;
    text-decoration: none;
}