@media (min-width:1300px){.container{max-width:1235px}}
@media (min-width:1400px){.container{max-width:1340px}}
@media (min-width:1500px){.container{max-width:1425px}}
@media (min-width:1600px){.container{max-width:1520px}}
@media (min-width:1700px){.container{max-width:1615px}}
@media (min-width:1800px){.container{max-width:1710px}}


body {
    background: #fafafa;
    color: #333333;
    margin-top: 5rem;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #444444;
  }

  .navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.7);
  }
  .navbar-light .navbar-nav .nav-link:hover {
    color: rgba(0,0,0,.9);
  }

  .site-header .navbar-nav .nav-link.active {
    font-weight: 500;
  }
  
  .content-section {
    background: #ffffff;
    padding: 10px 20px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin-bottom: 20px;
  }
  
  .header-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .download-btn {
    min-width: 100px;
    margin-bottom: 15px;
  }

  .hover:hover {
    cursor: pointer;
  }
  .mimic-link{color: #007bff;cursor: pointer;}
  .mimic-link:hover{color: #0056b3;text-decoration: underline;}
  
  .legend {
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: .5rem;
    font-size: 1.5rem;
  }

  a.button, p.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    display:inline;
    text-decoration: underline;
    color: cornflowerblue;
  }
  p.button:hover {
  cursor: pointer;
  }



/* From https://stackoverflow.com/questions/19089933/how-to-position-two-elements-side-by-side-using-css */
.NTleft{
  width:50%;
  margin-right:2%;
  float: left;
}

.NTright {
  width:48%;
  float: left;
}
.clearfix{
  clear:both
}


/* From http://jsfiddle.net/YB8UW/8/ */
.custom_radio_buttons {
  margin:0px 0 0 0;
  padding:0;
  column-count: 1;
  column-gap: 0;
}

.custom_radio_buttons label, .custom_radio_buttons input {
 display:inline-block;
}

.custom_radio_buttons input{
  border: 1px solid #098ae6;
}

.custom_radio_buttons input[type="radio"] {
 opacity:0.011;
 width: 1px;
 z-index:100;
}

.custom_radio_buttons input[type="radio"]:checked + label {
 background:#098ae6;
 color: #ffffff;
}

.custom_radio_buttons label {
  padding:5px;
  border:1px solid #CCC; 
  cursor:pointer;
  border-radius: 8px;
  z-index:90;
}

.custom_radio_buttons label:hover {
  background:#DDD;
}
.custom_radio_buttons input:focus + label{
  background-color: #DDD;
}

/* Custom colors for each section */
label.blue_button, label.blue{
  border: 1px solid #098ae6;
}
label.blue_button:hover, label.blue:hover {
  background: #DDD;
}
input[type="radio"]:checked + label.blue_button, input[type="radio"]:checked + label.blue {
  background:#098ae6;
  color: #ffffff;
 }

 label.red_button, label.red, label[for="Negative"]{
  border: 1px solid #e63509;
}
label.red_button:hover, label.red:hover, label[for="Negative"]:hover {
  background: #DDD;
}
input[type="radio"]:checked + label.red_button, input[type="radio"]:checked + label.red, input[type="radio"]:checked + label[for="Negative"] {
  background:#e63509;
  color: #ffffff;
 }

label.yellow_button, label.yellow, label[for="Neutral"]{
  border: 1px solid #ebb217;
}
label.yellow_button:hover, label[for="Neutral"]:hover {
  background: #DDD;
}
input[type="radio"]:checked + label.yellow_button, input[type="radio"]:checked + label.yellow, input[type="radio"]:checked + label[for="Neutral"] {
  background:#ebb217;
  color: #ffffff;
 }
 label.green_button, label.green, label[for="Positive"]{
  border: 1px solid #0ec43e;
}
label.green_button:hover, label.green:hover, label[for="Positive"]:hover {
  background: #DDD;
}
input[type="radio"]:checked + label.green_button, input[type="radio"]:checked + label.green, input[type="radio"]:checked + label[for="Positive"] {
  background:#0ec43e;
  color: #ffffff;
 }


 /* Approve and Reject buttons (admin page) */
.approve_button {
  color: #0ec43e;
  border-color: #0ec43e;
  }
.approve_button:hover {
    color: white;
    background-color: #0ec43e;
    border-color: #0ec43e;
  }
.approve_button:active, .approve_button:focus {
  box-shadow: 0 0 0 0.2rem rgba(14, 196, 62,.5);
}
.approve_button:not(:disabled):not(.disabled).active, .approve_button:not(:disabled):not(.disabled):active, .show>.approve_button.dropdown-toggle {
  color: #fff;
  background-color: #0ec43e;
  border-color: #0ec43e;
}
.approve_button:not(:disabled):not(.disabled).active:focus, .approve_button:not(:disabled):not(.disabled):active:focus, .show>.approve_button.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(14, 196, 62,.5);
}


  .reject_button {
color: #e63509;
border-color: #e63509;
}
.reject_button:hover {
  color: white;
  background-color: #e63509;
  border-color: #e63509;
}
.reject_button:active, .reject_button:focus {
  box-shadow: 0 0 0 0.2rem rgba(230, 53, 9,.5);
}
.reject_button:not(:disabled):not(.disabled).active, .reject_button:not(:disabled):not(.disabled):active, .show>.reject_button.dropdown-toggle {
  color: #fff;
  background-color: #e63509;
  border-color: #e63509;
}
.reject_button:not(:disabled):not(.disabled).active:focus, .reject_button:not(:disabled):not(.disabled):active:focus, .show>.reject_button.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(230, 53, 9,.5);
}


.approve_other_button {
  color: #ebb217;
  border-color: #ebb217;
  }
.approve_other_button:hover {
  color: white;
  background-color: #ebb217;
  border-color: #ebb217;
  }
.approve_other_button:active, .approve_other_button:focus {
  box-shadow: 0 0 0 0.2rem rgba(235, 178, 23,.5);
}
.approve_other_button:not(:disabled):not(.disabled).active, .approve_other_button:not(:disabled):not(.disabled):active, .show>.approve_other_button.dropdown-toggle {
  color: #fff;
  background-color: #ebb217;
  border-color: #ebb217;
}
.approve_other_button:not(:disabled):not(.disabled).active:focus, .approve_other_button:not(:disabled):not(.disabled):active:focus, .show>.approve_other_button.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(235, 178, 23,.5);
}



/* Table Design */
.similarity_table tr:nth-child(odd), .history_table tr:nth-child(odd), .approval_table tr:nth-child(odd) {
  background-color: #eee;
}
.similarity_table th, .history_table th, .approval_table th{
  /* background-color: #555; */
  background-color: #6b6b6b;
  color: #fff;
  text-align: center;
  font-weight: bold;
  word-wrap:break-word;
}
.similarity_table, .history_table, .approval_table{
border-collapse:collapse; 
table-layout:fixed;
}
.similarity_table td, .history_table td, .approval_table td {
word-wrap:break-word;
padding-left: 2px;
}

.approval_table .btn {
  font-size: 12px;
  padding: .375rem .375rem;
  margin: auto;
  word-wrap: break-word;
  white-space: normal;
}

.ntheader {
  position: fixed;
  background-color: #0ec43e;
}

/* this is how bootstrap writes their breakpoints, manually add support for issue https://github.com/twbs/bootstrap/issues/26528 */
@media (min-width: 576px) {.w-sm-25{width: 25% !important}}
@media (min-width: 576px) {.w-sm-50{width: 50% !important}}
@media (min-width: 576px) {.w-sm-75{width: 75% !important}}
@media (min-width: 576px) {.w-sm-90{width: 90% !important}}
@media (min-width: 768px) {.w-md-25{width: 25% !important}}
@media (min-width: 768px) {.w-md-50{width: 50% !important}}
@media (min-width: 768px) {.w-md-75{width: 75% !important}}
@media (min-width: 768px) {.w-md-90{width: 90% !important}}
@media (min-width: 992px) {.w-lg-25{width: 25% !important}}
@media (min-width: 992px) {.w-lg-50{width: 50% !important}}
@media (min-width: 992px) {.w-lg-75{width: 75% !important}}
@media (min-width: 992px) {.w-lg-90{width: 90% !important}}
@media (min-width: 1200px) {.w-xl-25{width: 25% !important}}
@media (min-width: 1200px) {.w-xl-50{width: 50% !important}}
@media (min-width: 1200px) {.w-xl-75{width: 75% !important}}
@media (min-width: 1200px) {.w-xl-90{width: 90% !important}}

/* Enhanced table styling for home.html */
.table {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  overflow: hidden;
  margin-top: 24px;
}
.table thead th {
  background: #f5f7fa;
  color: #2c3e50;
  font-weight: 600;
  border-bottom: 2px solid #e0e6ed;
  padding: 14px 10px;
  font-size: 1.08rem;
}
.table tbody td {
  padding: 12px 10px;
  vertical-align: middle;
  border-top: 1px solid #f0f0f0;
  font-size: 1rem;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9fbfd;
}
.table-bordered {
  border: 1px solid #e0e6ed;
}
.table-hover tbody tr:hover {
  background-color: #eaf3fb;
  transition: background 0.2s;
}

/* Highlight table row on hover for better UX */
tbody tr:hover {
  background-color: #f2f2f2 !important;
  transition: background 0.2s;
}

@media (max-width: 768px) {
  .table {
    font-size: 0.95rem;
  }
  .table thead th, .table tbody td {
    padding: 10px 6px;
  }
}