@import url("https://cdn.datatables.net/1.9.4/css/jquery.dataTables.min.css");
@import url("https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.min.css");

:root {
     color-scheme: only light !important;
}

@media (prefers-color-scheme: dark) {
  .button_header {
    color: white !important;
    background-color: black !important;
  }
  .header_section {
    color: white !important;
    background-color: black !important;
  }
  #logo {
    color: white !important;
    background-color: white !important;
  }
  .clear_button {
    color: white !important;
  }
  .dataTables_paginate>a {
    color: white !important;
    background-color: black !important;
    border-color: black !important;
  }
  .spinner > div {
  background-color: #FFFFFF !important;
  }
}

input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 14px 12px;
  cursor: pointer;
  background-color: rgb(82, 95, 122);
  color: rgb(256, 256, 256);
  border-radius: 10px;
  text-align:center; 
  width: 85%;
}
.custom-file-upload:hover {
   background-color: rgb(104, 119, 150);
        }

.launch_button {
  cursor: pointer;
  width: 100%;
  background-color: rgb(82, 95, 122);
  border-radius: 10px;
  
}
.launch_button:hover {
   background-color: rgb(104, 119, 150);
        }

.clear_button {
  cursor: pointer;
  background-color: transparent;
  color: rgb(82, 95, 122, 0.7);
  outline-color: rgb(82, 95, 122, 0.5);
  border-color: rgb(82, 95, 122, 0.5);
  padding: 6px 12px;
  margin: -10px 2px;
  border-width: 2px;
}
.clear_button:hover {
  border-color: rgb(82, 95, 122);
  color: rgb(82, 95, 122);
        }

.slidecontainer {
  width: 270px;
  height: 95px;
}

.slider {
  width: 200px !important;
  padding-bottom: 0px;
}

#ratio_text, #domain_text, #pae_text, 
#min_dis_text, #freq_dis_text, #freq_linker_text {
  width: 62px;
  height: 62px;
  padding: 10px 7px 10px 7px;
  border-style: none;
}

#prop_dis_text {
  width: 65px;
  height: 62px;
  padding: 10px 6px 10px 5px;/*10px 17px;*/
  border-style: none;
}

input {
  display: inline-block;
  vertical-align: middle;
}

.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.slider_label {
  margin-bottom: -10px;
}

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button 
  {
    opacity: 1;
  }

#slider_container {
  display: inline-grid;
  background-color: #F5F5F5;
  padding: 10px;
  border-radius: 10px;
  border-color: rgb(82, 95, 122);
  border-style: solid;
  border:2px
  -moz-border-radius: 10px;
  width=100%;
  overflow: auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, auto));
  justify-items: center;
  align-items: center;
}



details > summary{
  width: 200px;
  vertical-align: middle;
  margin-top: -10px;
}

details > p{
    width: 100%;
}

.fileDescription {
  display: block;
  font-size: 15px;
  padding: 0px;
  margin-top: -5px;
  margin-bottom: 0px;
}

.grouping{
  display: inline-block;
  text-align: center;
  width: 33%;
}

.grid {
  margin-top: -10px;
}



#past_runs_table {
  border-collapse: collapse;
  border-spacing: 0px;
}
#past_runs_table td {
  /*width: 25%;*/
  padding: 0;
  margin: 0px;
  overflow: hidden;
}

#past_runs_table tbody tr:first-child td:nth-child(1) {
   width: 33%;
}
#past_runs_table tbody tr:first-child td:nth-child(2) {
   width: 33%;
}
#past_runs_table tbody tr:first-child td:nth-child(3) {
   width: 33%;
}
#past_runs_table tbody tr:first-child td:nth-child(4) {
   width: 33%;
}

#past_runs_table div {
  overflow: hidden;
  height: 30px;
  margin: 0px;
  padding: 0px;
  display:block;
}

.dataTables_filter input {
  width: 250px;
  height: 32px;
  border-radius: 5px;
  margin-bottom: 0px;
  margin-top: 0px;
}
 

.dataTables_length {
        display: none;
    }


.dataTables_paginate>span>a {
    padding: 1px 5px !important;
}

.dataTables_paginate>a {
    padding: 1px 5px !important;
    background-color: rgb(256, 256, 256);
    color: #0172ad;
    outline-color: rgb(256, 256, 256);
    border-color: rgb(256, 256, 256);
}

 div.dataTables_paginate {
  text-align: center;
  width: fit-content;
  display: inline-flex;
  float:right;
}

div.dataTables_wrapper {
    margin-bottom: 10px
}

div.dataTables_info {
  display: inline-flex;
  width: fit-content;
}





.spinner {
  margin: 1px auto;
  width: 100px;
  height: 30px;
  text-align: left;
  font-size: 10px;
  vertical-align: middle;
}

.spinner > div {
  background-color: #333;
  height: 25px;
  width: 5px;
  display: inline-block !important;
  vertical-align: middle;
  outline-color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}