/** 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 : 220px;
    padding-top: 5px;
    padding-left: 5px;
}

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


/** 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;
}

table.display {
  width: 100% !important;
}

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

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

@media (max-width: 800px) {

  .login_wrapper {
      max-width: 100%;
    }

}


.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: #e0e0e0 !important;
}

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

.div-err-msg-right {
    position: relative;
    display: block;
    float: right;
    width: 370px;
    margin-bottom: 10px;
    color: #FF0011;
    margin-top: -8px;
}
.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: 0;
    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;
}

.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
{
  display: block;
  float: right;
  width: 400px;
}

.ui-dform-3dots
{
  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;}


/** 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
{
  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;
}


/** 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;
}
.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 {
    background-color: #6b1c1c;
    font-weight: 600;
}

/** scrollable nav bar **/

.main_menu_side
{

max-height: 100vh;
}

table.trial th
{
    width: 30%;
}

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

.table-vip-info:not(:empty), .vip-info:not(:empty) {
    padding: 15px;
    margin: 20px 0 20px 0;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #ffffff;
    background-color: rgb(26, 187, 156);
    border-color: rgba(38,185,154,0.88);
}

.alert-danger a {
    color: white;
    font-weight: 600;
    text-decoration: underline;
}

.error-info:not(:empty), .error-info:not(:empty) {
    padding: 15px;
    margin: 20px 0 20px 0;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #E9EDEF;
    background-color: rgba(231, 76, 60, 0.88);
    border-color: rgba(231, 76, 60, 0.88);
}

.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%;
}

#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: scroll;
    width:100%;
    min-height: 10VH;
}

.tab-content .overflow-holder {
    overflow-y: scroll;
    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 **/

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

.btn.btn-primary.btn-xs {

}

.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;
}

/** 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;
}

/** marker data quick fix **/

.button.marker {
  border-radius: 0px !important;
  color:black !important;
}

/** datatables column matching changes **/


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

ul.dropdown-menu li:hover {
    background-color: #0275d8;
    color: white;
    cursor: pointer;
}

ul.dropdown-menu li:hover a {
  color: white;
}

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: 12px;
    height:26px;
    border-radius: 0 !important;
    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: 12px;
    height:26px;
    border-radius: 0 !important;
    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: 12px;
    height:26px;
    border-radius: 0 !important;
    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: 12px;
    height:26px;
    border-radius: 0 !important;
    padding: 0px;

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

/*Genotypes phenotypic data*/
.bs-example{
  width: 100%;
  font-size:30px;
}

/*Genotype pedigree wrapper, Genotype Genotype alias wrapper, Genotype Genotype Trait wrapper*/
#list_genpedigree_table_wrapper, #list_alias_table_wrapper, #list_genotypetrait_table_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: 220px
  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;
}