/** KDManage new style **/

/** These are mostly quick fixes and need to be organised **/
/** most of these are functional css updates from the old kdman.css **/

.hidden {
  display: none;
}

img.site-logo {
  width: 250px;
  padding-top: initial;
  padding-left: 5px;
}

.nav-sm .container.body .right_col {
  margin-left: 90px;
}

.nav-sm .nav.toggle {
  margin-left: 25px;
}

.nav-tabs .nav-link {
  color: var(--darkaccentgreen);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: var(--darkaccentgreen);
}

/** login page **/

.page-login .right_col {
  margin-left: 0px !important;
}

.page-login footer {
  margin-left: 0px;
}

.page-login .page-title {
  display: none;
}

.login_wrapper {
  max-width: 70%;
}

.fake-input {
  border: none;
  background: transparent;
  color: #73879C;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.471;
  font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
}

/** fixing datatables update that messed with pagination view **/

.dataTables_wrapper .dataTables_paginate {
  height: auto;
  width: auto;
}



.overflow-holder {
  margin-top: 2VH;
}

.ui-dform-form button {
  float: right;
}

.login_content {
  background-color: white;
  border: solid black 1px;
  padding: 4%;
}

/** nicer looking form elements **/

select.form-gen {
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}


/** getting rid of blue border **/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: none;

}

/** nicer looking buttons **/

button {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  background-color: #e0e0e0;
}

.form-control.half {
  display: inline;
  width: 50%;
}

.form-control.quarter {
  display: inline;
  width: 25%;
}


.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background-color: #81c44c;
}

.page-title {
  width: 100%;
  height: auto;
  padding: 10px 0px;
  font-size: 2.4em;
  /*margin: 0 0 75px 0;*/
}

.div-err-msg-right,.text-small-err-right, .select-small-err-right {
  position: relative;
  display: block;
  float: right;
  width: 370px;
  margin-bottom: 10px;
  color: #FF0011;
}


.col-sm-6 .div-err-msg-right {
  width: 50%;
}

.left_col.scroll-view,
.ol-md-3.left_col {
  position: fixed;
}

.nav-sm .left_col.scroll-view,
.ol-md-3.left_col {
  width: 90px;
}

/** for site search box **/

.search-input {
  font-family: Courier
}

.search-input,
.leaflet-control-search {
  max-width: 400px;
}

.site-logo-hide {
  display: none;
}

.ui-widget-header {
  background-image: none !important;
  background-color: #2A3F54 !important;
  color: white;
  border-radius: 0;

}

.nav-sm footer {
  margin-left: 90px;
}

.panel_toolbox>li {
  float: right;
}

table.display thead th {

  background-image: none;
  background-color: rgba(44, 66, 89, 1);
  color: #FFF;
}

table.display {
  border-color: #000;
}

.form-err-msg {
  color: red;
}

.ui-button {
  box-shadow: none;
  border-radius: 0;
  padding: 6px 12px;
  font-size: 14px;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
}

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable {
  background-color: white;
  /* top: 0 !important;
  left: 0 !important; */
}

.ui-dform-addbutton,
.ui-dform-viewbutton,
.ui-dform-downloadbutton {
  float: right;
}

.ui-dform-span {
  display: inline;
  width: 100%;
  float: left;
}

.ui-dform-label,
.form-label,
.div-info-msg-left {
  display: block;
  text-align: left;
  position: relative;
  float: left;
  width: auto;
  height: 25px;
  margin-bottom: 10px;
  margin-right: 10px;

}

.ui-dform-text,
.form-input,
.ui-dform-password {
  position: relative;
  display: block;
  float: right;
  width: 376px;
  height: 25px;
  line-height: 22px;
  margin-bottom: 8px;
}

.half-form .ui-dform-text,
.half-form .form-input,
.half-form .ui-dform-password,
.half-form .ui-dform-select {
  width: 275px;
}

.form-control.stocktake-item-field {
  width: 200px;
  display: inline;
}

.half-form .ui-dform-textarea {
  width: 275px;
  height: 80px;
}

.ui-dform-select {
  position: relative;
  display: block;
  float: right;
  line-height: 25px;
  width: 376px;
  height: 25px;
  margin-bottom: 10px;
}

.ui-dform-textarea {
  position: relative;
  display: block;
  float: right;
  width: 375px;
  height: 50px;
  margin-bottom: 8px;
}

#rightp_span {
  width: 50%;
  padding-left: 5%;
}

#leftp_span {
  width: 40%;
}



.smaller-select.ui-dform-select_3dots {
  width: 225px;
}

.ui-dform-select_3dots,
.ui-dform-text_3dots,
.ui-dform-textfunction_3dots {
  display: block;
  float: right;
  width: 400px;
}

.ui-dform-3dots,
.ui-dform-textfunc3dots {
  float: left;
  margin-top: 4px;
  margin-left: 4px;
}

/** style changes more in line with boostrap **/


.col-sm-6 .ui-dform-file {
  width: 50%;
}

.col-sm-6 .ui-dform-select_3dots,
.col-sm-6 .ui-dform-text_3dots {
  width: 50%;
}

.col-sm-6 .ui-dform-select_3dots .ui-dform-select {
  width: 90%;
}

.col-sm-6 .ui-dform-select,
.col-sm-6 .ui-dform-text {
  width: 50%;
}


/** for csv import helper **/
.selected-column,
table.dataTable.display tbody tr.odd>.selected-column,
table.dataTable.order-column.stripe tbody tr.odd>.selected-column,
table.dataTable.display tbody tr.even>.selected-column,
table.dataTable.order-column.stripe tbody tr.even>.selected-column {
  background-color: #d4f9d4;
}

.reused-column,
table.dataTable.display tbody tr.odd>.reused-column,
table.dataTable.order-column.stripe tbody tr.odd>.reused-column,
table.dataTable.display tbody tr.even>.reused-column,
table.dataTable.order-column.stripe tbody tr.even>.reused-column {
  background-color: #f9d4d4;
}

.okay-column,
table.dataTable.display tbody tr.odd>.okay-column,
table.dataTable.order-column.stripe tbody tr.odd>.okay-column,
table.dataTable.display tbody tr.even>.okay-column,
table.dataTable.order-column.stripe tbody tr.even>.okay-column {
  background-color: #f9f9d4;
}




/** hide the mobile toggle on login page **/

.page-login .fa.fa-bars {
  display: none;
}

.topbar #sidebarToggleTop:hover {
  background-color: transparent;
}

/** main menu icons_222222_256x240 **/

.iconbox {
  text-align: center;
  width: 30% !important;
}

.iconbox.col-sm-2 {
  text-align: center;
  width: 20% !important;
}

.approw {
  padding-bottom: 2%;
}



/** taking from kdman.css **/

.add_tt_row,
.add_tk_row,
.add_ts_row,
.add_tm_row,
.add_ma_row,
.add_survey_trait_row {
  border-style: solid;
  border-width: 1px;
  border-right-style: hidden;
  border-bottom-style: hidden;
  min-height: 38px;
  float: left;
  padding-top: 5px;
  padding-left: 5px;
}

.add_ma_row {
  border-style:none;

}


/** loading message in search **/

.ui-jqgrid .loading {
  top: 0% !important;
  left: 0% !important;
}


/** fxing tick box icon **/
.chk_box_img {
  width: 18px !important;
  height: auto !important;
}

/** for search bar **/
input[type="file"] {
  /* display: inline-block; */
  float: right;
}



/** csv search results table **/

table.csv_results {
  border-collapse: collapse;
}

table.csv_results,
table.csv_results th,
table.csv_results td {
  border: 1px solid black;
  padding: 5px;
}

#add_trial_layout_formerrmsg {
  color: red;
}

/** dragable css from kdman.css **/
#dropdest {
  min-height: 100px;
  width: 705px;
  margin-left: 133px;
  border: 1px solid black;
}

#drop_spec {
  width: 500px;
}


#dropdest.hover {
  border: 1px solid red;
}

table.listing,
.drag-cart-item table {
  width: 400px;
}

table.listing,
table.listing td,
table.listing th,
.drag-cart-item table,
.drag-cart-item td {
  border-collapse: collapse;
  border: 1px solid gray;
  padding: 5px;
}

table td.draggable {
  cursor: move;
}

table th {
  background: #E6E6E6;
  text-align: inherit;
  border-width: 1px;
  max-width: 20%;
}

.drag-cart-item {
  z-index: 3000;
}

.data-grid-small {
  display: block;
  position: relative;
  margin-bottom: 20px;
}

.spinner {
  position: fixed !important;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  /* half width of the spinner gif */
  margin-top: -50px;
  /* half height of the spinner gif */
  text-align: center;
  z-index: 99999 !important;
  overflow: auto;
  width: auto;
  /* width of the spinner gif */
  height: auto;
  /*hight of the spinner gif +2px to fix IE8 issue */
  background-color: transparent;
  border-radius: 50%;
  padding: 3%;
  border-color: black;
}


.dataTables_filter {
  padding-top: 5px;
}

/** temp fix for duplicate search bar causing it not to appear in some pages (need to fix asap! **/

.dataTables_filter {
  display: none;
}


/** DNA two columns sizing fixes**/

#addplate_dialog input.smaller-text,
#addplate_dialog select.smaller-select,
#uploaddataset_dialog select.smaller-select {
  width: 200px !important;
}

#downloaddataset_dialog select.smaller-select {
  width: 260px !important;
}

#downloaddataset_dialog select[multiple] {
  height: 180px;
}

#downloaddataset_dialog input.smaller-text {

  width: 260px !important;
}

#downloaddataset_dialog span.leftpanel_span {

  width: 460px !important;
}

#downloaddataset_dialog div.down_ds_div {

  min-height: 80px !important;
  min-width: 260px !important;
  float: right;
  background-color: #eeeeee;
  color: blue;
  padding: 5px;
  margin-bottom: 5px;
}

#downloaddataset_dialog span.rightpanel_span {

  width: 520px !important;
  padding-left: 40px !important;
}

.smaller-text-div-info-right {
  position: relative;
  display: block;
  float: right;
  width: 200px;
  margin-bottom: 10px;
  margin-top: 0x;
  color: blue;
}

.plate-label {
  display: block;
  text-align: center;
  position: relative;
  float: left;
  line-height: 25px;
  width: 250px;
  height: 25px;
  /*background-color:#ff0;*/
  margin-bottom: 10px;
  margin-right: 10px;
}

.plate-well-label {
  display: block;
  text-align: center;
  position: relative;
  float: left !important;
  line-height: 30px !important;
  width: 55px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.plate-well-text {
  display: block;
  text-align: center;
  position: relative;
  float: left !important;
  line-height: 30px !important;
  width: 55px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.plate-well-text-data {
  background-color: blue !important;
}

.plate-well-text-mod-data {
  background-color: red !important;
}

.plate-well-new-row {
  clear: left !important;
}

.analgrp-plate-span {
  margin-top: 15px;
  /** border-top-color: #2a3f54 !important; **/
  /** border-top-style: groove !important; **/
  padding-top: 15px;
}

.analgrp-well-span {
  padding-bottom: 15px;
  border-bottom-color: #2a3f54 !important;
  border-bottom-style: groove !important;
  margin-bottom: 15px
}

#PlateLayout_ctrl_id {
  margin-left: 22px;
}

#addanalgrp_dialog .smaller-text,
#addanalgrp_dialog select {
  width: 160px !important;

}

.smaller-select-div-info-right {
  position: relative;
  display: block;
  float: right;
  width: 200px;
  margin-bottom: 10px;
  color: blue;
}

#upload_dataset_container input {
  width: 200px;
}

.mrk_data_sort_msg,
.mrk_data_filter_msg {
  min-height: 80px;
  min-width: 23px;
  width: 230px;
  color: blue;
  padding: 5px;
  background-color: #EEEEEE;
  margin-right: 4px;
}

.ui-datepicker {
  background-color: rgb(230, 230, 230);
}


#groupctrl {
  font-size: 1em;
  height: 40px;
  width: 300px;
}

.nav-md .container.body .col-md-3.left_col {
  z-index: 0;
}

#geometry {
  float: none;
  width: 100%;
}

/** trial workflow style fixes **/

#ReminderTo_span label.ui-dform-label {
  max-width: 30% !important;
}

/** add item styles **/

a.trialunitspecimen_lookup {
  font-weight: 600;
  cursor: pointer;
}

/** manually made forms **/

.button {
  /* display: inline-block; */
  padding: 6px 12px;
  margin-bottom: 0;
  margin-right: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 1em;
  background-color: #e0e0e0;
  float: right;

}

a:hover {
  color: black;
  cursor: pointer;
}

.paginate_button_disabled {
  opacity: .35;
}

.logout {
  font-weight: 600;
}

/** scrollable nav bar **/

.main_menu_side {

  max-height: 100vh;
}

table.trial th {
  width: 30%;
}

.navbar-right .glyphicon {
  font-size: 14px;
}

/* Change the color of alert */
.table-vip-info:not(:empty),
.vip-info:not(:empty) {
  margin: 0 0 5px 0;
}

.table-vip-info a,
.error-info a {
  color: inherit;
  text-decoration: underline;
}


body.page-welcome .custom_dataTables_filter {
  display: none;
}

.node.home-node {
  font-weight: 600;

  padding: 5px 10px;
  border-style: solid;
}

.trial ul.stats-overview li,
.site ul.stats-overview li {
  width: 16%;
}

.genotype ul.stats-overview li {
  width: 24%;
}

#oldtrialevents li {
  color: #e1aaaa;
  font-style: italic;
}

#trialevents .today {
  font-weight: 600;
  color: #126c12;
}

.nav.navbar-nav>li>a {
  color: #5A738E !important;
}

.ui-widget-content a {
  color: #73879C;
}

.ui-widget-content a.btn-primary {
  color: #ffffff;
}

.overflow-holder {
  overflow-x: visible;
  overflow-y: auto;
  width: 100%;
  min-height: 10VH;
}

.tab-content .overflow-holder {
  max-height: 40VH;
}

#data_buttons {
  padding-top: 3%;
}

.btn.btn-primary.okay {
  background-color: #18B720;
  border-color: #18B720;
  float: right;
}

.btn.btn-primary.nookay {
  background-color: #318431;
  border-color: #318431;
}

/** fixing curate edit cell color so it's visible **/

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  color: black;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  background: url(images/ui-bg_highlight-soft_100_b16135_1x100.png) 50% 50% repeat-x !important;
}



.table-finder {
  background-color: white;
  padding: 2% 1%;
  margin: 1% 0%;
  border-style: solid;
}

/** alternate graph tab form **/

.row.row-buttons {
  margin-top: 1%;
  float: right;
}

.button_info {
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/** trial map **/

.trialmap button {
  margin-top: 5.5%;
}


/** profile page **/

th.user-pref {
  width: 30%;
}

/** trial unit style **/

.specimen_box ul.stats-overview li {
  width: 19%;
}

/** nursery forms **/

.current-step {
  font-weight: 600;
}

.nursery-label {
  padding: 5px;
}


/** inputs in table forms **/

tbody input {
  padding: 1px 3px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/** using font awesome icons **/

#trait_average_table {
  box-sizing: border-box;
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
  border-top: 1px solid #dee2e6;
  border: 1;
  border-collapse: collapse;
  color: #212529;
}

#trait_average_table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}


.btn-xs {
  padding: 2px 8px;
  border-radius: 0;
  margin: 1px;
  font-size: 13px;
}

.dataTable .btn-xs {
  height: 2em;
}

.btn-group-xs .caret {
  line-height: 14px;
}

.btn-s {
  padding: 3px 12px;
  border-radius: 0;
}

.btn-action.btn-update.btn-xs {
  background-color: #18B720;
  color: white;
  border: 1px solid #18B720;
}

.btn-action.btn-delete.btn-xs {
  background-color: #d9534f;
  color: white;
  border: 1px solid #d43f3a;
}

.btn-action.btn-primary {
  border: 1px solid#2e6da4;
  font-size: 13px;
}

/** table forms **/

table.dataTable tbody tr.new {
  background-color: rgba(24, 183, 32, 0.11);
}

/** environmental adjustments **/

.count.date {
  font-size: 16px;
  padding: 18px 0px;
}

.list-unstyled.top_profiles.scroll-view {
  overflow-y: scroll;
}


#view_data_grid {
  display: inline-block;
}

/** datatables column matching changes **/


.dropdown-menu.leftmenu {
  left: -56%;
}

ul.dropdown-menu li:hover a {
  color: black;
  background-color: var(--lightaccentgreen);
}

/* Main nav bar - Admin Settings */
.nav.justify-content-end li {
  margin-left: 0;
}

ul.dropdown-menu li:hover {
  background-color: var(--lightaccentgreen);
}

div.consolebox {
  padding: 5px;
  height: 340px;
  overflow-y: scroll;
  border: black solid 1px;
  font-family: monospace;
}


/** Highlighting cells in genpedigree edit mode**/
.bad_name {
  background-color: #f3acac !important
}

.bad_row,
.bad_row_duplicate {
  background-color: #FFE0E0 !important
}

.warning_text {
  color: red
}

@keyframes update_saved {
  0% {
    background-color: white;
  }

  50% {
    background-color: #B9F6CA;
  }

  100% {
    background-color: white;
  }
}

.update_success {
  animation-name: update_saved;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
}

/** d3 circle packing testing **/
.node:hover {
  stroke-opacity: 0.3 !important;
  fill-opacity: 0.3 !important;
}

.node_text:hover {
  display: inline-block !important;
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 50%;
  vertical-align: top;
  overflow: hidden;
}

.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}

.svg_text_element {
  pointer-events: none;
}

/** Trials Table Status Button **/

.trial_status_div {
  text-align: center;
}

.btn_status_new_trial {
  color: #2e6da4;
  background-color: transparent;
  border-color: #2e6da4;
  width: 85%;
  font-size: 13px;
  height: 3em;  
  padding: 0px;
}

/**
.btn_status_new_trial:hover{
    color: #0859a5;
    border-color: #0859a5;
    font-weight: bold;
}
**/

.btn_status_traitsorlayoutadded {
  color: #fff;
  background-color: #f8cf5d;
  border-color: #f8cf5d;
  width: 85%;
  font-size: 13px;
  height: 3em;  
  padding: 0px;
}

/**
.btn_status_traitsorlayoutadded:hover{
    color: #fff;
    background-color: #f7c12d;
    font-weight: bold;
}
**/
.btn_status_readyforupload {
  color: #fff;
  background-color: #7DCF79;
  border-color: #7DCF79;
  width: 85%;
  font-size: 13px;
  height: 3em;  
  padding: 0px;
}

/**
.btn_status_readyforupload:hover{
    color: #fff;
    background-color: #5ad454;
    font-weight: bold;
}
**/

.btn_status_data_added {
  color: #fff;
  background-color: #2e6da4;
  border-color: #2e6da4;
  width: 85%;
  font-size: 13px;
  height: 3em;  
  padding: 0px;

}

/**
.btn_status_data_added:hover{
    color: #fff;
    background-color: #115da0;
    font-weight: bold;
}
**/
/*Genotypes specimens*/
.dataTables_wrapper {
  width: 100%;
}



/* Table Buttons*/
/**
.btn-primary, .btn-action{
  height:26px;
  font-size: 12px !important;
}
**/
/* Navigation Bar Dropdown*/
/**
.dropdown-menu {
  left: auto !important;
  right: 0 !important;
  width: 300px !important;
}
**/

/** trial unit panel **/

.trial_unit_panel .table td,
.trial_unit_panel .table th {
  padding: 0.4em;
}

.trial_unit_panel .trialunit_msg {
  margin: 0px;
}

/** Word Visualisation On Click dialog styling **/
.word_vis_dialog_row {
  border: 1px solid black;
  border-radius: 5px;
  padding: 10px 5px 5px 10px;
}

.word_vis_dialog_row+.word_vis_dialog_row {
  border-top: 0;
}

.col-md-4.word_vis_col {
  margin-left: 25px;
  text-align: center;
  vertical-align: middle;
}

.word_vis_text_row+.word_vis_text_row {
  margin-top: 5px;
}

/** Layer Styling **/

.layer_controls {
  margin-bottom: 30px;
}

/** Leaflet Maps Styling **/
#mapid {
  height: 500px;
}

/** thumbnails for multimedia **/

.thumbnail {
  min-height: 200px
    /* height: auto; */
}


/** curated data **/

.calculated input {
  background-color: #0000ff2e;
}

/** trial design tweaks **/

.btn-app svg {
  font-size: 30px;
  display: block;
  margin-left: 20px;
}

.btn-app.btn {
  padding: 10px 5px;
}

.map-y {
  margin-bottom: 15px;
}

.plot {
  width: 80px;
  display: inline-block;
  margin-right: 1.2%;
  font-size: 10px;
  background: deeppink;
  border: 3px solid deeppink;
  box-sizing: border-box;
  color: white;
  line-height: 80px;
  vertical-align: middle;
  text-align: center;
  border-radius: 0px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.plot:last-child {
  margin-right: 0;
}

.plot.dragging {
  opacity: 0.5;
}


.plot.over {
  border: 3px dashed black;
}

.plot.selected {
  background-color: blue;
  color: white;
}

.plot.empty {
  background-color: white;
  border: solid 2px black;
  color: black;
}

.plot.selected.empty {
  background-color: blue;
  color: white;
}

[draggable] {
  user-select: none
}

.my-legend .legend-scale ul {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  float: left;
  list-style: none;
}

.my-legend .legend-scale ul li {
  display: inline;
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 18px;
  margin-bottom: 2px;
}

.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 16px;
  width: 20px;
  margin-left: 0;
}

.map-z {
  width: 65vw;
  padding: 5px;
}

.map-z.top {
  border-top: solid lightgrey;
}

.map-z.bottom {
  border-bottom: solid lightgrey;
}

.map-z.left {
  border-left: solid lightgrey;
}

.map-z.right {
  border-right: solid lightgrey;
}

.map-actions {
  padding: 5px;
}

ul {
  margin: 0;
}

/* a quick hacky fix for Add Trial Trait Autocomplete dialog not showing */
.ui-autocomplete {
  z-index: 102;
}

.good_name_border {
  border: 1px solid #126c12;
}

.bad_name_border {
  border: 1px solid red;
}

.map-action-wrapper {
  text-align: center;
}

.form-control::placeholder {
  font-style: italic;
}















/* Login Page*/

/**
#left-side {
  background-color: var(--primarygreen);
  width: 45VW !important;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: -248px;
  text-align: center;
  padding-top: 220px;
  padding-right: 60px;
  padding-left: 50px;
  height: 89%;
}
**/


/* Change the color of username for topbar*/
.nav-item .nav-link.user-name {
  background-position: 10px 10px !important;
  color: var(--darkaccentgreen);
}

/* Change the background color and radius of Column Settings'button in the main page */
.ui-widget-header {
  background-image: none !important;
  background-color: var(--primarygreen) !important;
  color: white;
}

button {
  background-color: #a4cf60;
}


.alert {
  box-shadow: 0px 0px px 5px #E4E1E5 !important;
  color: black;

}

/* Change the color of title for dialog */
.ui-dialog .ui-dialog-title {
  color: white;
}

/* Change the location of icon for topbar in the main page */
.fa.fa-bars {
  margin-left: 0px;
  margin-top: 10px;
}

/* Adjust the z-index of dialog */
.ui-dialog {
  background-color: white;
  z-index: 1000;
}

/* Change the location of logo for topbar in the main page */
.site-logo {
  margin-left: -30px;
}

button.dt-button {
  color: white;
  background-color: #81c44c;
  border: 0px;
  background-image: none;
}

button.dt-button:hover {
  background-color: var(--darkaccentgreen) !important;
  color: var(--white);
  border: none !important;
  background-image: none !important;
}

button.dt-button:active, button.dt-button:focus {
  background-color: var(--darkaccentgreen) !important;
  color: var(--white);
  border: none !important;
  background-image: none !important;
  text-shadow: none !important;
}

/* Change the location of logo in login page */
#logo1 {
  margin-left: 20px;
}


button {
  background-color: #e4e1e5;
}

/* Change the background color of add button for dialog */
.ui-widget-content a {
  color: #FFF;
  background-color: #81c44c;
}

/* Change the radius of add button for dialog */
.alert {
  position: relative;
  padding: 0.5rem 0.5rem;
  margin-bottom: 1rem;
  border-radius: none !important;
}


.ui-dform-addbutton {
  background-color: #8dbc68;
  color: white;
}

/* Add shadow and radius for each box */
.x_panel {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px;
}

/* Change the color of background and title text for each table */
table.display thead th {
  background-image: none;
  background-color: var(--lightaccentgreen);
  color: black;
}

/* Change the color of icons for the topbar in the main page */
.navbar i.fa-solid, .navbar i.fas {
  color: #81C44C;
}

/* Change the margin of topbar for the button of settings in the main page */
.dropdown-menu.show {
  display: block;
  margin-top: -25px;
}

/* Change the padding of sidebar in the main page */



/* Change the font style of topbar in the main page */
.dropdown-menu>li>a {
  color: black !important;
  font-weight: 600;
}

/* change the button in each box */
.btn-action.btn-primary {
  border: 1px solid #81c44c;
}


/* change the table style */
table.dataTable {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #212529;
  --bs-table-striped-bg: rgb(228, 225, 229);
  --bs-table-active-color: #212529;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #212529;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 99.9% !important;
  color: #212529;
  border-color: #dee2e6;

}

table.display thead th {
  padding: 8px 18px 8px 10px;
  border: 1px solid var(--bordergreen);
  font-weight: bold;
  cursor: pointer;
}

/* change top buttons'style */
.ui-button,
.paginate_button {
  color: #fff;
  background-color: #81c44c;
  border: none
}


/* Change the buttons of tables */
.btn-xs {
  padding: 0px;
  font-size: 13px;
}

.btn-action.btn-primary {
  border: 1px solid #81c44c;
  padding: 4px;
}

.btn-action.btn-primary:hover {
  border-color: var(--darkaccentgreen);
}

.btn-primary:focus, .btn-primary:focus-visible {
  background-color: var(--darkaccentgreen);
  box-shadow: 1px var(--bordergreen);
  border: 2px solid var(--darkaccentgreen);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle,
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle,
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle,
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle, 
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle, 
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle, 
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle, 
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle, 
.btn-third:not(:disabled):not(.disabled):active, .btn-third:not(:disabled):not(.disabled).active, .show > .btn-third.dropdown-toggle, 
.btn-alternative:not(:disabled):not(.disabled):active, .btn-alternative:not(:disabled):not(.disabled).active, .show > .btn-alternative.dropdown-toggle, 
.btn-gray:not(:disabled):not(.disabled):active, .btn-gray:not(:disabled):not(.disabled).active, .show > .btn-gray.dropdown-toggle   {
  background-color: var(--darkaccentgreen);
  color: black;
  border: 2px solid var(--darkaccentgreen);
  box-shadow: none;
}

.dataTable .btn-xs {
  height: 3em;
}

.btn-xs {
  padding: 4px;
  font-size: 13px;
}

.dataTable .btn-xs {
  height: 3em;
  border-radius: 4px;
  font-size: 13px;
}

.ui-button {
  color: #fff;
  border-radius: 4px;
}

.ui-dform-addbutton {
  background-color: #8dbc68;
  color: white;
  border-radius: 4px;
}

button {
  background-color: #81c44c;
  border-radius: 4px;
  color: white;
}

.ui-button:active, .ui-button:hover {
  background-color: var(--darkaccentgreen) !important;
  color: white;
  border: none;
}

.ui-button:focus {
  background-color: var(--darkaccentgreen);
  box-shadow: 0 0 0 0.25rem var(--bordergreen);
  border: none;
  color: white;
}

/** Login Page Extras **/

.page-login #page-content {
  margin-top: 0;
  margin-left: 0;
  max-width: 100VW;
  width: 100VW;
  padding: 0;
}

#left-side {
  background-color: var(--primarygreen);
  width: 50VW;
  text-align: center;
  height: 100vh;
}

#left-side img {
  width: auto;
  height: 50vh;
  margin-top: 25%;
}

.page-login .main-top-bar {
  border-bottom: none;
}

/* For card in mainpage */
.x_panel {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 17px;
  display: inline-block;
  background: #fff;
  border: 1px solid #E6E9ED;
  opacity: 1;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

/* For topbar in mainpage */
a,
a:visited,
a:focus,
a:active,
:visited,
:focus,
:active,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 0;
}

.bg-white {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #73879C;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 13px 15px 12px;
}

/* For ICONS in mainpage */
.nav>li {
  position: relative;
  display: block;
}



/* For pagniation */
.dataTables_paginate {
  float: right;
  text-align: right;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #fff !important;
  background: #81c44c;
  box-shadow: none;
  border-radius: 6px;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  border: none;
  margin-right: 0.5px;
  opacity: .35;

}


.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #fff !important;
  background-color: white;
  background: #81c44c;
  border-radius: 6px;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  border: none;
  margin-right: 0.5px;
  opacity: .35;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  color: #fff !important;
  border-radius: 6px;
  background-color: #81c44c;
  padding: 6px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  border: none;
  margin-right: 0.5px;
}

/* 
Change the font weight in the table */
table a {
  color: var(--charcoal);
  text-decoration: none;
  background-color: transparent;
  font-weight: 400;
}
 /* Change the dropdown font weight */
.sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
 font-weight: 700;
}

/* Change the location of spinner */

.spinner {
  margin-right: 100px;
  margin-top: -150px;
}


/* Change for trail status */
.btn_status_new_trial {
  color: #f9f9f9;
  background-color: #81c44c;
  border-color: #81c44c;
  width: 100%;
}

.btn_status_data_added {
  color: #fff;
  background-color: #a4cf60;
  border-color: #a4cf60;
  width: 100%;
}

.btn_status_readyforupload {
  width: 100%;
}

/* For table */
.top,
.bottom {
  padding: 0.1px;
}

/* For button in the inventory management page */
.btn-action.btn-update.btn-xs {
  background-color: #a4cf60;
  color: white;
  border: 1px solid #a4cf60;
}

/* change the color in the gennotype page  */


/* For vertical tab */
.align-items-start {
  align-items: flex-start !important;
  margin-top: 10px;
}


/* For horizontal tab */
.table.genotype {

  margin-top: 10px;
  height: 100%;
}



#list_items {
  height: 30px;
}

#list_item_info {
  padding: 2px;
}

/* For start overview */

.stats-overview {
  padding-left: 0rem;
}

/* Single Layer Page */
.layer_measurement_update_buttons {
  padding-top: 1rem;
}

.tab-pane h5{
  margin-bottom: 0;
}

.tab-pane div p {
  margin-bottom: 0;
}

.tab-pane .media.event a{
  font-weight: 700;
}

ul.top_profiles li:nth-child(odd) {
  background-color: #eee;
}

.media.event {
  padding: 0.5rem;
  margin: 0.5rem 0 0 0;
}

footer {
  text-align: center;
  padding: 10px;
}

.actionbar {
  margin-bottom: 15px;
}

.bs-example {
  font-size: 25px;
}

/* Dialogs */
.ui-dialog-content .btn-group {
  z-index: 1;
  float: right;
}

.ui-dialog .dialog-graph {
  text-align: center;
  height: 600px;
}

/* Data card - used in single element page (Genotype, Trial, etc) */

.card-fields li {
  list-style-type: none;
}

.card-fields li.variantname::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: -2em;
  padding: 8px;
  color: var(--primarygreen);
}

.list-card .card{
  padding: 0;
  border: 2px solid var(--lightpurple);
  margin-bottom: 10px;
}

.list-card .card .img-fluid {
  width: 100%;
  height: 250px;
}

#list_products_card .card-body {
  height: 300px;
}

.card-border {
  border: 1px solid var(--bordergreen);
}

.quick-action-card {
  flex-direction: row;
  --bs-gutter-x: 0;
}

.tab-content {
  /* padding: 15px; */
  margin-bottom: 1rem;
}

.bold {
  font-weight: bold;
}

.ui-dialog-titlebar-close {
  border: none;
  background: none;
}

.ui-dialog-titlebar-close::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 20px;
  content: "\f00d"; /** Unicode for xmark **/
  position: relative;
  top: -6px;
  color: white;
}

.ui-dialog-titlebar-close:hover::before {
  color: var(--black);
}

.leaflet-container {
  width: 100%;
}

/* Sticky card */
.sticky-card {
  position: sticky;
  top: 4.375rem;
  z-index: 100;
}

/* Trial Page */

.mapwrapper {
  margin-top: 0;
}

/** from 1.9.19 to be placed elsewhere **/

.empty-section {
  display: none;
  border: none;
}

.empty-row {
  display: none;
}

.empty-column  {
  display: none;
}

#reset_password_form .form-group {
  margin-bottom: 24px;
}

#reset_password_form input::-ms-reveal,
input::-ms-clear {
  display: none;
}


.plot.dragging {
  opacity: 0.5;
}

.plot:last-child{
  margin-right: 0;
}

/** multi step forms **/

.step-container {
  position: relative;
  text-align: center;
  transform: translateY(-43%);
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid var(--secondarygreen);
  line-height: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  cursor: pointer; /* Added cursor pointer */
}

.step-line {
  position: absolute;
  top: 16px;
  left: 50px;
  width: calc(100% - 100px);
  height: 2px;
  background-color: var(--secondarygreen);
  z-index: -1;
}

.multi-step-form{
overflow-x: hidden;
}

.progress-bar {
  background-color: var(--secondarygreen);
}

.table-form input.form-control {
  padding: 0px
}

 /** general dashboard module styles **/

 .checklist-box {
  line-height: 200%;
  min-height: 250px;
  padding: 20px;
}

.checklist-box {
  padding: 20px;
}

.checklist-box {
  line-height: 200%;
}

.checkbox-container {
  display: flex;
  align-items: baseline;
  white-space: break-spaces;
  padding-bottom: 12px;
}

.checkbox-container i {
  font-size: 1.25em;
  color: var(--primarygreen);
}

.checkbox-container a {
  padding-left: 10px;
}

.top-icon a {
  color: var(--lightpurple);
}

.image.view.view-first img {
  width: 250px;
}

@media (max-width: 1280px) {

  .sidebar .nav-item.external-link {
    display: block;
  }

  nav .nav-item.external-link {
    display: none;
  }

}

@media (min-width: 1280px) {

  .sidebar .nav-item.external-link {
    display: none;
  }

  nav .nav-item.external-link {
    display: block;
  }

}

@media (max-width: 1200px) {

  header .nav > li > a {
    padding: 15px 0;
  }

}

@media (max-width: 992px) {

  .nav-item .nav-link.user-name {
    display: none;
  }

}

@media (max-width: 800px) {

  .login_wrapper {
    max-width: 100%;
  }

}

@media (max-width: 768px) {
  
}

@media (max-width: 480px) {
  #page-content {
    margin-left: 0;
    max-width: 100vw;
  }
  
  .page-title {
    font-size: 2.15em;
  }
}