body, html {
  height: 100%;
  margin: 0px !important;
  background: #f0f2f5;
}

/* NAVBAR  */
  .navbar{
    height:64px;
  }
  #navbarlocal {
    border-bottom: 1px solid #e8e8e8;
  }

  li.cutouttile{
    color: rgba(0,0,0,.85);
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    padding-left: 26px;
    font-family:sans-serif;

  }
  .logo {
    height: 72px;
    width: 173px;
    margin: 3px;
  }
    ul.navbar {
      list-style-type: none;
      margin: 0;
      overflow: hidden;
      background-color: #fff;
      font-weight: 400;
      font-size: 14px;
      font-family: sans-serif;
      color: rgba(0,0,0,.65);
      padding: inherit;
    }
    /* ul.cutouttile{
      background-color: #f0f2f5 !important;
    } */
    /* ul.local {
      background-color: #f0f2f5 !important;
    } */
    li.navbar {
      float: left;
      /* border-right:1px solid #bbb !important; */
    }

    li.navbar a {
      display: inline-block;
      height: -webkit-fill-available;
      vertical-align: bottom;
      position: relative;
      top:1px;
      color: rgba(0,0,0,.65);
      padding: 20px 20px;
      text-decoration: none;
      cursor: pointer;
    }
    li.navbar a:hover:not(.active) {
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }
    li.active a {
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
      /* background-color: #e6550d; */
    }
     /* END NAVBAR  */
     li.local {
       font-weight: bold !important;
       font-size: medium !important;
     }

     main{
           height: inherit;
           background-color: white;
           height: inherit;
           padding: 5px;
         }
.content {
  padding: 0 50px;

 }
 /* .container{
   background-color: white;;
  height: inherit;
  padding:5px;
 } */

.header{
  box-sizing: border-box;
  margin: 0;
  color: rgba(0,0,0,.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  padding: 16px 24px;
}
.headertitle{
  display: block;
    float: left;
    margin-bottom: 13px;
    padding-right: 12px;
    color: rgba(0,0,0,.85);
    font-weight: 600;
    font-size: 20px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 32px;
    width: 100%;
    overflow: hidden;
}

.footer{
  text-align: center;
  padding: 24px 50px;
  color: rgba(0,0,0,.65);
  font-size: 14px;
  background: #f0f2f5;
  font-weight: 400;
  bottom: 0;
  width: -webkit-fill-available;
  font-family: sans-serif;
}
#main-footer{
  color: rgba(0,0,0,.65);
  font-size: 14px;
  font-weight: 400;
}
.errorlist {
  color: red;
  padding-inline-start: 10px;
  padding-right: 10px;
  list-style: none;
}

/* Dajngo Form */

#cutout-form{
  width: 700px;
    /* margin-left: 3px; */
  /* padding-left: 5px; */
}

#userinput{
  padding: 5px;
  padding-bottom: 15px;
  display: grid;
  border-bottom: 2px solid #ddd;
}
label {
  display: inline-block;
  font-size: 14px;
}

.form_label{
  font-weight: bold;
  font-size: 16px !important;
  width: 155px;
  vertical-align: middle;
}
span.query {
	width: auto;
	/* padding-top: 10px; */
	padding-right: 5px;
}
span.options{

}
div.query{
  width: auto;
	padding-top: 2px;
	padding-right: 5px;
  display: inline-table;
}
.form-style-2-heading{
	font-weight: bold;
	font-style: italic;
	border-bottom: 2px solid #ddd;
	margin-bottom: 3px;
	font-size: 17px;
	padding-bottom: 3px;
  padding-left: 5px;
}

button[type="submit"] {
  border: none;
  padding: 8px 15px 8px 15px;
  background: #3e3c3b;
  color: #fff;
  box-shadow: 1px 1px 4px #DADADA;
  -moz-box-shadow: 1px 1px 4px #DADADA;
  -webkit-box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  width:fit-content;
}

input[type="number"]{
  cursor: pointer !important;
  /* margin-bottom: 1px; */
  margin-top: 8px;
  margin-bottom: 10px !important;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
    -webkit-box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 7px;
    outline: none;
    margin-right: 4px;
}

input[type="checkbox"], textarea, select, input[type="text"], input[type="radio"], input[type="file"] {
    cursor: pointer !important;
    /* width: -webkit-fill-available !important; */
    /* margin-bottom: 1px; */
        margin-top: 8px;
        margin-bottom: 10px !important;
        box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	border: 1px solid #C2C2C2;
    	box-shadow: 1px 1px 4px #EBEBEB;
    	-moz-box-shadow: 1px 1px 4px #EBEBEB;
    	-webkit-box-shadow: 1px 1px 4px #EBEBEB;
    	border-radius: 3px;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	padding: 7px;
    	outline: none;
      margin-left: 0px;
}



input[type="email"] {
  width: -webkit-fill-available !important;
  margin: 5px !important;
}

/* END django form */


/*  feedback*/

#pagedetails {
  padding: 5px;
}

.feedback{
  display: flex;
}
#feedback-form{
  border-bottom: 2px solid #ddd;
}

input:disabled+label {
  color: #ccc;
}

/* Style buttons */
.btn {
  background-color: #649fd8 !important;
  color: white !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  font-size: 15px !important;
  cursor: pointer;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue !important;
}

/* download progress bar and text */
#download_batch{
      border-color: #fdae6b;

}
#download_progress{
    visibility: hidden;
    float:left;
}
.waiting:after{
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}
@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
.ldBar{
  position: absolute !important;
  width: 156px !important;
  height: 57px !important;
}
.ldBar-label {
    top: 100% !important;
}
/* END OF download progress bar and text */




button[type="select"]{
  margin-top: 5px;
  cursor: pointer;
}

#include_div {
  padding-top: 6px;
  padding-left: 70px;
  font-style: oblique;
  color: darkslategray;
}

span#sel_count {
  padding-left: 10px;
  font-style: oblique;
}

table#query_input{
  margin: 2px;
  background-color: white;
}
.thumbnail {
    width: 300px !important;
    height: 225px !important;
    object-fit: contain !important;
    cursor: pointer;
    /* float: left; */
}
.thumbnail.selected{
  border: 2px solid #e6550c;
}
.alert {
  padding: 20px !important;
  background-color: #d03428 !important;
  color: white !important;
}
.alert-success{
  background-color: #3eb543!important;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.hidden {
  display: none !important;
}

.VLASS-QL_epochs{
  padding-left: 20px !important;
}

.VLASS-SE_epochs{
  padding-left: 20px !important;
}

.filters{
  padding-left: 20px;
}

.tbl_opts {
  display: block; /*table-cell !important; */
}

.disabled-label {
  color: #ccc;
}

.radius {
  padding: 5px;
  display: table-cell !important;
}

#table_div{
    margin-bottom: 20px;
    border-bottom: ridge;
}


table.dataTable thead input[type="checkbox"]{
  width:20px !important;
  height:20px !important;
}
.dt-checkboxes{
  width:20px !important;
  height:20px !important;
}

#load{
  padding: 20px;
}

.expand{
  /* float:left; */
  font-size: x-large !important;
  /* vertical-align: bottom; */
  display: table-cell !important;
  /* padding-right: 300px; */
}

span.include{
  float: right !important;
  font-style: oblique;
  font-size: medium;
  margin-right: 15px;
}

input#include_all_orig {
  width: 15px;
  height: 15px;
}
input.include_orig {
  float: right;
  width: 15px;
  height: 15px;
  margin-left: 10px;
}
/* table.dataTable tbody tr.odd {
    background-color: #292929 !important;
}

table.dataTable tbody tr.even {
    background-color: #232323 !important;
}

table.dataTable tbody tr.odd td.sorting_1 {
    background-color: #262626 !important;
}

table.dataTable tbody tr.even td.sorting_1 {
    background-color: #202020 !important;
} */


table.dataTable tbody td {
    border-top: 1px solid #232323 !important;
    border-left: dashed thin #ccc !important;
    padding: 8px 3px !important;
    text-align: center !important;
}

th.ui-state-default {
    border-color: #393939 !important;
}

/* these are results columns */
td.fits_view {
    text-align: left !important;
    vertical-align: top !important;
}

div.fits_results {
  display: inline-block !important;
  max-width: fit-content !important;
}

span.span_wrap {
  float:left !important;
  width: min-content !important;
  margin-right: 5px !important;
  margin-left: 5px !important;
  margin-bottom: 3px !important;
  margin-top: 5px !important;
  box-shadow: 0px 0px 0px 2px #e8ebf1 !important;
  white-space: nowrap !important;
}

input[name="select"] {
  cursor: pointer;
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 7px;
}

button.download {
    float:right !important;
}
button.original{
  float: right !important;
  padding: 7px !important;
}

td.nest_td {
    overflow-x: scroll !important;
    word-wrap: break-word !important;
    max-width: min-content !important;
    font-size: small !important;
}

/*cutom column styling*/
/*This will work for firefox*/
@-moz-document url-prefix() {
  td.mozdate {
      text-overflow: ellipsis !important;
    }
    /* input[type="text"], input[type="email"] {
        width: -moz-available !important;
    } */
    /* .ldBar{
      position: absolute !important;
      width: 140px !important;
      height: 75px !important;
    } */

  }
/* end for firefox */

td.subtile{
  float:left !important;
  width: -webkit-fill-available !important;
  width: -moz-available !important; /*for firefox*/
  line-height: 2.5 !important;
}

span.thumb_title{
  color: #05396b !important;
  font-weight: bold !important;
  text-align: center !important;
  display: block !important;
}

th.nest_th {
    font-size: small !important;
    padding-left: 0 !important;
}

div.nested {
  width: 100% !important;
}

.nested_table  {
  table-layout: fixed !important;
  width: 100% !important;
  /* overflow-wrap: break-word !important;
  word-wrap: break-word !important; */
}
/* INFORMATION POPUPS */
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: max-content;
  background-color: #585858;
  color: #fff;
  text-align: justify;
  border-radius: 6px;
  padding: 8px 8px;
  position: absolute;
  z-index: 1;
  top: 25px;
  left: -13%;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 1%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  border-bottom: 5px solid #555;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

a.popuplink {
  color: cornflowerblue !important;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

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