/**
  * PNG download styles.
  * This file is used in the application as well as the `save_png` function to make sure
  * the PNG download looks the same when downloaded directly or as part of the ZIP.
  */

.image-title-parent {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  text-align: center;
  min-height: 85px;
}

.image-title-parent * {
  font-weight: bold;
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 0;
}

.image-title {
  font-size: 32px;
}

.image-subtitle {
  font-size: 28px;
}

/* Want titles/subtitles to be smaller in a table png download */
.image-title-parent.table .image-title {
  font-size: 22px;
}

.image-title-parent.table .image-subtitle {
  font-size: 18px;
}

.ytitle,
.xtitle {
  font-weight: bold !important;
}

/* They want this text size in the plot to be larger */

/* Taxa labels */
.ahsq_plot .plotly .overaxes-above .x2y-x .x2tick text,
#hidden_plot #reporting-ahsq-num_reported_parent .plotly .overaxes-above .x2y-x .x2tick text {
  font-size: 24px !important;
}

/* State xaxis tick labels */
.ahsq_plot .plotly .xaxislayer-above .xtick text,
#hidden_plot #reporting-ahsq-num_reported_parent .plotly .xaxislayer-above .xtick text {
  font-size: 18px !important;
}

/* y xaxis tick labels and bar labels */
.ahsq_plot .plotly .cartesianlayer .subplot .plot .point text,
.ahsq_plot .plotly .yaxislayer-above .ytick text,
#hidden_plot #reporting-ahsq-num_reported_parent .plotly .cartesianlayer .subplot .plot .point text,
#hidden_plot #reporting-ahsq-num_reported_parent .plotly .yaxislayer-above .ytick text {
  font-size: 20px !important;
}

/* Data explorer png download styling */
#hidden_map {

  .multiselect-input .form-group .selectize-input::after,
  .map_export,
  #data-map-colour_multiselect-add_new_select_input,
  #data-map-update_colours,
  #data-map-update_warning,
  .multiselect-inner-container>strong {
    display: none !important;
  }

  .multiselect-inner-container .multiselect-input .select-line,
  .multiselect-inner-container .multiselect-input>.form-group {
    margin: 0 !important;
  }

  .multiselect-inner-container .multiselect-input .selectize-input {
    padding: 0;
    min-height: unset;
    margin-bottom: 10px;
    margin-left: 15px;
  }

  .hidden-cat-name {
    display: flex !important;
    margin-bottom: 10px;
  }

  .multiselect-input .form-group .selectize-input {
    border: none;
  }
}