xtlive

Dockerfile

@@ -4,13 +4,16 @@ WORKDIR /code
 
 # Install stable packages from CRAN
 RUN install2.r --error \
-    ggExtra \
-    shiny
+    shiny \
+    htmltools \
+    plotly
 
 # Install development packages from GitHub
 RUN installGithub.r \
     rstudio/bslib \
-    rstudio/httpuv
+    rstudio/httpuv \
+    egenn/rtemis \
+    egenn/rtemisbio
 
 COPY . .
 

app.R

@@ -1,58 +1,518 @@
+# xtlive.R
+# ::rtemislive::
+# 2024 EDG rtemis.org
+
+# [ Shiny ]
+# https://shiny.posit.co/r/getstarted/shiny-basics/lesson1/
+# https://posit-dev.github.io/r-shinylive/
+# to run shiny app:
+# shiny::runApp("./")
+#
+# [ bslib ]
+# https://rstudio.github.io/bslib/
+# Theming variables: https://rstudio.github.io/bslib/articles/bs5-variables/index.html
+#
+# [ Bootstrap icons ]
+# https://icons.getbootstrap.com
+#
+# [ Huggingface Spaces]
+# https://huggingface.co/docs/hub/en/spaces-sdks-docker-shiny
+
+# Setup
 library(shiny)
 library(bslib)
-library(dplyr)
-library(ggplot2)
-
-df <- readr::read_csv("penguins.csv")
-# Find subset of columns that are suitable for scatter plot
-df_num <- df |> select(where(is.numeric), -Year)
-
-ui <- page_sidebar(
-  theme = bs_theme(bootswatch = "minty"),
-  title = "Penguins explorer",
-  sidebar = sidebar(
-    varSelectInput("xvar", "X variable", df_num, selected = "Bill Length (mm)"),
-    varSelectInput("yvar", "Y variable", df_num, selected = "Bill Depth (mm)"),
-    checkboxGroupInput("species", "Filter by species",
-      choices = unique(df$Species), selected = unique(df$Species)
-    ),
-    hr(), # Add a horizontal rule
-    checkboxInput("by_species", "Show species", TRUE),
-    checkboxInput("show_margins", "Show marginal plots", TRUE),
-    checkboxInput("smooth", "Add smoother"),
-  ),
-  plotOutput("scatter")
-)
-
-server <- function(input, output, session) {
-  subsetted <- reactive({
-    req(input$species)
-    df |> filter(Species %in% input$species)
-  })
-
-  output$scatter <- renderPlot(
-    {
-      p <- ggplot(subsetted(), aes(!!input$xvar, !!input$yvar)) +
-        theme_light() +
-        list(
-          theme(legend.position = "bottom"),
-          if (input$by_species) aes(color = Species),
-          geom_point(),
-          if (input$smooth) geom_smooth()
-        )
-
-      if (input$show_margins) {
-        margin_type <- if (input$by_species) "density" else "histogram"
-        p <- p |> ggExtra::ggMarginal(
-          type = margin_type, margins = "both",
-          size = 8, groupColour = input$by_species, groupFill = input$by_species
-        )
-      }
-
-      p
-    },
-    res = 100
+library(htmltools)
+library(plotly)
+library(rtemis)
+library(rtemisbio)
+source("globals.R")
+
+# Source built-in datasets from data.R
+source("data.R")
+# Get names of all objects defined in data.R
+builtin_names <- readLines("data.R") |>
+  (\(z) grep("<-", x = z, value = TRUE))() |>
+  (\(z) gsub(" <-.*", "", x = z))()
+
+# Colors
+primary <- "#72CDF4"
+secondary <- "#704071"
+info <- helpcol <- "#FEB2E0"
+success <- "#B4DC55"
+
+#' Create timeseries visualization shinylive app
+#'
+#' Visualize timeseries data using `dplot3_xt()`
+#'
+#' Set verbosity to 1 to monitor app progress
+#'
+#' @param default_theme Character: "dark" or "light" theme
+#' @param verbosity Integer: 0 = silent, 1 = verbose
+#'
+#' @author EDG
+#' @export
+#' @return A shiny app that can be converted to a shinylive app
+
+xtlive <- function(
+    default_theme = "dark",
+    xt_plotly_height = "900px",
+    verbosity = 1) {
+  # Logo
+  logo <- base64enc::dataURI(
+    file = "./www/rtemisxt_gray.png", mime = "image/png"
   )
-}
+  # Version
+  xtl <- paste0(
+    "xtlive v.0.0.2",
+    # " | ", "rtemis v.0.97.3", utils::packageVersion("rtemis"), # doesn't work in shinylive
+    " | R v.", version$major, ".", version$minor,
+    " | running on ", sessionInfo()[[2]]
+  )
+
+  # UI page_navbar ----
+  ui <- function(request) {
+    bslib::page_navbar(
+      # Title ----
+      title = list(
+        logo = a(
+          img(
+            src = logo,
+            width = "140px",
+            height = "auto",
+            alt = "rtemis"
+          ),
+          href = "https://rtemis.org/xtlive"
+        )
+      ),
+      id = "xtlive",
+      selected = "Welcome",
+      footer = span(
+        xtl,
+        " © 2024 EDG",
+        style = "display: block; text-align: center; margin-top: 1em; margin-bottom: 1em;"
+      ),
+      # Theme ----
+      theme = bslib::bs_theme(
+        bg = "#fff",
+        fg = "#000",
+        primary = primary,
+        secondary = secondary,
+        success = success,
+        info = info,
+        `tooltip-bg` = "#303030",
+        `tooltip-color` = helpcol,
+        `tooltip-opacity` = 1,
+        `tooltip-border-radius` = "10px",
+        `tooltip-padding-x` = "1rem",
+        `tooltip-padding-y` = "1rem",
+        `tooltip-font-size` = "1rem"
+        # base_font = bslib::font_google("Inter"), # doesn't work in shinylive
+        # code_font = bslib::font_google("Fira Code")
+      ) |>
+        bs_add_rules(sass::sass_file("www/rtemislive.scss")),
+      # Window title ----
+      window_title = "rtemis xtlive",
+      # Language ----
+      lang = "en",
+      # tags$script(src = "globals.js"),
+      # Nav Panels ----
+      ## [] Welcome ----
+      bslib::nav_panel(
+        title = "Welcome",
+        icon = bsicons::bs_icon("stars"),
+        bslib::card(
+          h4("Welcome to xtlive.", style = "text-align: center;"),
+          card_body(
+            class = "d-inline text-center",
+            HTML(paste0(
+              "xtlive is a web interface for ",
+              as.character(a("rtemis", href = "https://rtemis.org", target = "_blank")),
+              ", <br>providing interactive visualization of timeseries data.",
+              "<br><br>",
+              rthelp_inline(
+                "To get started, use the navigation tabs at the top.",
+                title = "Welcome"
+              ),
+              "<br><br>This application has been compiled to ",
+              as.character(a("WebAssembly", href = "https://webassembly.org/", target = "_blank")),
+              " using ",
+              as.character(a("shinylive", href = "https://posit-dev.github.io/r-shinylive/", target = "_blank")),
+              "<br>and is best viewed with the latest version of Chrome."
+            ))
+          ),
+          bslib::card_image(
+            file = "./www/rtemisxt_splash.png",
+            alt = "rtemislive",
+            align = "center",
+            border_radius = "all",
+            fill = FALSE,
+            width = "40%",
+            class = "mx-auto"
+          )
+        )
+      ), # /nav_panel Welcome
+      ## [] Timeseries Visualization ----
+      bslib::nav_panel(
+        title = "Timeseries",
+        icon = bsicons::bs_icon("body-text"),
+        card(
+          full_screen = TRUE,
+          class = "p-0",
+          # allow items side by side ----
+          card_header(
+            class = "d-flex justify-content-end",
+            # tooltip UI output ----
+            uiOutput("ui_xt_tooltip"),
+            # popover UI output ----
+            uiOutput("ui_xt_popover")
+          ),
+          layout_sidebar(
+            fillable = TRUE,
+            # Data Load Sidebar ----
+            sidebar = bslib::sidebar(
+              uiOutput("ui_xt_load_switch"), # Switch between file upload and built-in data
+              uiOutput("ui_xt_data_load"), # File upload or built-in data selection depending on switch
+              uiOutput("ui_xt_data_info"), # Shows dataset info
+              uiOutput("ui_xt_plot_button"), # Click to plot
+              # uiOutput("ui_xt_tooltip")
+            ),
+            # layout_sidebar(
+            #   sidebar = bslib::sidebar(
+            #     position = "right",
+            #     # xt transformations
+            #     "Timeseries Transformations"
+            #   ),
+            #   # Plot Output ----
+            #   # for shinylive, do not use plotlyOutput directly in ui !!
+            #   # fails when no plot is rendered, unlike shiny
+            #   uiOutput("ui_dplot3_xt")
+            # )
+            uiOutput("ui_dplot3_xt")
+          )
+        )
+      ), # /nav_panel Timeseries Visualization
+      ## [] About ----
+      bslib::nav_panel(
+        title = "About",
+        icon = bsicons::bs_icon("info-square"),
+        bslib::card(
+          card_image(
+            file = "./www/rtemislive.jpeg",
+            href = "https://rtemis.org",
+            alt = "rtemislive",
+            align = "center",
+            border_radius = "all",
+            fill = FALSE,
+            width = "54%",
+            class = "mx-auto"
+          ),
+          div(
+            class = "d-inline text-center",
+            HTML(paste0(
+              "Powered by rtemis (",
+              as.character(a("rtemis.org", href = "https://rtemis.org", target = "_blank")),
+              ")."
+            )),
+            br(), br(),
+            a(
+              img(
+                src = "rtemis_gray.png",
+                alt = "rtemis",
+                align = "center",
+                width = "190px"
+              ),
+              href = "https://rtemis.org",
+              target = "_blank"
+            ),
+            align = "center"
+          )
+        )
+      ), # /nav_panel About
+      bslib::nav_spacer(),
+      bslib::nav_item(input_dark_mode(id = "dark_mode", mode = default_theme)),
+      header = list(
+        # busy indicators ----
+        shinybusy::add_busy_spinner(
+          spin = "orbit",
+          # color = "#72CDF4",
+          color = "#00ffff",
+          timeout = 200,
+          position = "bottom-left",
+          onstart = FALSE
+        )
+      )
+    ) # /ui /bslib::page_navbar
+  } # /ui function
+
+  # Server ----
+  server <- function(input, output, session) {
+    # UI xt load switch ----
+    output$ui_xt_load_switch <- shiny::renderUI({
+      if (verbosity > 0) {
+        message("Rendering ui_xt_load_switch")
+      }
+      # Radio buttons: built-in data vs upload file ----
+      shiny::radioButtons(
+        inputId = "xt_load_switch",
+        label = "Data source",
+        choices = list(
+          `Built-in datasets` = "builtin",
+          `File upload` = "upload"
+        ),
+        selected = "builtin"
+      )
+    })
+
+    # UI xt Data ----
+    output$ui_xt_data_load <- shiny::renderUI({
+      req(input$xt_load_switch)
+      if (input$xt_load_switch == "upload") {
+        # Upload xt JSON file
+        if (verbosity > 0) {
+          message("Rendering ui_xt_data_load for file upload")
+        }
+        shiny::fileInput(
+          inputId = "xt_file",
+          label = "Upload xt file",
+          buttonLabel = "Browse local files...",
+        )
+      } else {
+        # Select built-in data stored in ./data/ directory
+        if (verbosity > 0) {
+          message("Rendering ui_xt_data_load for built-in data selection")
+        }
+        shiny::selectizeInput(
+          inputId = "xt_builtin_data",
+          label = "Select built-in xt dataset",
+          choices = builtin_names,
+          selected = builtin_names[1]
+        )
+      }
+    }) # /ui_xt_data_load
+
+    # UI for xt data info ----
+    output$ui_xt_data_info <- shiny::renderUI({
+      req(xt_obj())
+      if (verbosity > 0) {
+        message("Rendering ui_xt_data_info")
+      }
+      # inv comment
+      bslib::card(
+        bslib::card_title("xt Dataset Info", container = htmltools::h6),
+        bslib::card_body(
+          summarize_xt(xt_obj()),
+          fillable = FALSE
+        ) # /card_body
+      ) # /card
+    }) # /ui_xt_data_info
+
+    # UI for plot action button ----
+    output$ui_xt_plot_button <- shiny::renderUI({
+      req(xt_obj())
+      if (verbosity > 0) {
+        message("Rendering ui_xt_plot_button")
+      }
+      bslib::input_task_button(
+        "xt_plot_button",
+        "Plot dataset",
+        icon = bsicons::bs_icon("magic"),
+        label_busy = "Drawing...",
+        icon_busy = bsicons::bs_icon("clock-history"),
+        type = "primary",
+        auto_reset = TRUE
+      )
+    }) # /ui_xt_plot_button
+
+    # Load Dataset ----
+    xt_obj <- shiny::reactive({
+      req(input$xt_load_switch)
+      if (input$xt_load_switch == "upload") {
+        # inv changed to "req(input$xt_file$datapath)": no help
+        req(input$xt_file$datapath)
+        if (verbosity > 0) {
+          message("Loading xt data from file '", input$xt_file$datapath, "'")
+        }
+        # get file extension
+        ext <- tools::file_ext(input$xt_file$datapath)
+        dat <- if (ext == "json") {
+          read.xtjson(input$xt_file$datapath)
+        } else if (ext == "rds") {
+          readRDS(input$xt_file$datapath)
+        } else {
+          stop("Unsupported file format")
+        }
+        if (verbosity > 0) {
+          message("Loaded dataset of class '", class(dat)[1], "'")
+        }
+        return(dat)
+      } else {
+        # Load built-in data from data.R objects
+        req(input$xt_builtin_data)
+        if (verbosity > 0) {
+          message("Loading built-in xt dataset '", input$xt_builtin_data, "'")
+        }
+        # Reading from data folder works fine in shiny app, not shinylive,
+        # use objects from data.R instead
+        # assign to dat object of name input$xt_builtin_data
+        dat <- get(input$xt_builtin_data)
+        if (verbosity > 0) {
+          message("Loaded dataset of class '", class(dat)[1], "'")
+        }
+        return(dat)
+      }
+    }) # /xt_obj
+
+    # dplot3 theme is "white" or "black" ----
+    dplot3_theme <- shiny::reactive({
+      req(input$dark_mode)
+      if (input$dark_mode == "dark") {
+        "black"
+      } else {
+        "white"
+      }
+    }) # /dplot3_theme
+
+    # dplot3_theme() ----
+    dplot3_theme <- shiny::reactive({
+      req(input$dark_mode)
+      if (input$dark_mode == "dark") {
+        "darkgraygrid"
+      } else {
+        "whitegrid"
+      }
+    }) # /dplot3_theme
+
+    # Render plotly ----
+    output$dplot3_xt <- plotly::renderPlotly({
+      req(xt_obj())
+      if (verbosity > 0) {
+        message("Rendering dplot3_xt of object with class '", class(xt_obj())[1], "'")
+      }
+      dplot3_xt(
+        x = xt_obj(),
+        yline.width = input$xt.linewidth,
+        y2line.width = input$xt.linewidth,
+        theme = dplot3_theme(),
+        bg = input$plot.bg, # legend.bg defaults to transparent, this sets paper bg
+        plot.bg = input$plot.bg,
+        legend.x = 0,
+        legend.xanchor = "left",
+        show.rangeslider = input$show.rangeslider,
+        margin = list(l = 75, r = 75, b = 75, t = 75),
+      )
+    }) |> # /dplot3_xt
+      # bindEvent(input$xt_plot_button)
+      bindEvent(input$xt_plot_button, input$xt_plot_update_button)
+
+    # Create variable clicked that is TRUE after input$xt_plot_button is clicked
+    # clicked <- shiny::reactiveVal(TRUE)
+    clicked <- shiny::reactiveVal(FALSE)
+    shiny::observeEvent(input$xt_plot_button, {
+      clicked(TRUE)
+    })
+
+    # UI xt tooltip ----
+    output$ui_xt_tooltip <- shiny::renderUI({
+      if (clicked()) {
+        bslib::tooltip(
+          trigger = span(
+            "Plot help", bsicons::bs_icon("info-circle", class = "text-info"),
+            style = "text-align: right;",
+            class = "rtanihi"
+          ),
+          div(
+            # HTML(
+            #   paste0(
+            #     "<ul>",
+            #     "<li>Hover over plot to see annotations.",
+            #     "<li>Click on legend items to toggle visibility of annotations.",
+            #     "<li>Double-click on legend items to isolate a single annotation type.",
+            #     "<li>Click on top-right gear icon to change plot settings.",
+            #     "</ul>"
+            #   )
+            # ),
+            rthelplist(
+              c(
+                "Hover over plot to see spike lines",
+                # "Use top-right gear icon to access plot settings and click on 'Update rendering' to apply.",
+                "Use top-right gear icon to access plot settings.",
+                htmlEscape("To enter superscripts and subscripts in labs or units, use HTML tags, e.g. '<sup>2</sup>' and '<sub>i</sub>'.")
+              )
+            ),
+            style = "text-align: left;"
+          ), # /div rt-tooltip
+          placement = "bottom"
+        ) # /tooltip
+      }
+    }) # /ui_xt_tooltip
+
+    # UI xt popover ----
+    output$ui_xt_popover <- shiny::renderUI({
+      if (clicked()) {
+        popover(
+          trigger = bsicons::bs_icon("gear", class = "ms-auto"),
+          textInput(inputId = "xt.xlab", label = "X-axis label", value = ""),
+          textInput(inputId = "xt.ylab", label = "Left Y-axis label", value = ""),
+          textInput(inputId = "xt.y2lab", label = "Right Y-axis label", value = ""),
+          textInput(inputId = "xt.xunits", label = "X-axis units", value = ""),
+          textInput(inputId = "xt.yunits", label = "Left Y-axis units", value = ""),
+          textInput(inputId = "xt.y2units", label = "Right Y-axis units", value = ""),
+          textInput(inputId = "xt.firsttick", label = "First X-axis tick", value = "2"),
+          textInput(inputId = "xt.ticksevery", label = "Show X-axis ticks every this many X values", value = "2"),
+          sliderInput(inputId = "xt.linewidth", label = "Line width", min = 1, max = 10, value = 3),
+          bslib::input_switch(
+            id = "show.rangeslider",
+            label = "Show rangeslider",
+            value = TRUE
+          ),
+          shinyWidgets::colorPickr(
+            "plot.bg",
+            label = "Plot background",
+            selected = ifelse(input$dark_mode == "dark", "#191919", "#FFFFFF")
+          ),
+          # shinyWidgets::colorPickr(
+          #   "marker.col",
+          #   label = "Marker color",
+          #   selected = ifelse(input$dark_mode == "dark", "#3f3f3f", "#dfdfdf")
+          # ),
+          # tags$i("Click on 'Plot dataset' to update render after changing settings."),
+          bslib::input_task_button(
+            "xt_plot_update_button",
+            "Update rendering",
+            icon = bsicons::bs_icon("arrow-clockwise"),
+            label_busy = "Drawing...",
+            icon_busy = bsicons::bs_icon("clock-history"),
+            type = "primary",
+            auto_reset = TRUE
+          ),
+          title = "Plot settings",
+          placement = "auto"
+          # options = list(trigger = "hover focus click")
+        ) # /popover
+      }
+    }) # /ui_xt_popover
+
+
+    # UI dplot3_xt ----
+    output$ui_dplot3_xt <- renderUI({
+      if (clicked() == FALSE || is.null(xt_obj())) {
+        rthelp(
+          # "Select Data Source and Click 'Plot dataset' on the left.",
+          "Select Data Source on the left.",
+          title = "Timeseries Visualization "
+        )
+      } else {
+        plotly::plotlyOutput(
+          "dplot3_xt",
+          width = "100%",
+          height = xt_plotly_height
+        )
+      }
+    }) # /ui_dplot3_xt
+  } # /server
+
+  # Shiny app ----
+  shiny::shinyApp(ui = ui, server = server, enableBookmarking = "url")
+} # xtlive
 
-shinyApp(ui, server)
+xtlive()

globals.R

@@ -0,0 +1,91 @@
+# globals.R
+# seqvizlive
+# EDG rtemis.org
+
+# Themes ----
+# {bg_dark, bg_light} also used by plot.bg
+bg_dark <- "#191919"
+bg_light <- "#ffffff"
+primary_dark <- "#72CDF4"
+primary_light <- "#1295D8"
+seconday_dark <- "#808080"
+secondary_light <- "#808080"
+info_dark <- "#FEB2E0"
+info_light <- "#E44C9A"
+success_dark <- "#B4DC55"
+success_light <- "#84C234"
+
+bslib_dark <- bslib::bs_theme(
+  bg = bg_dark,
+  fg = "#fff",
+  primary = primary_dark,
+  secondary = seconday_dark,
+  success = success_dark,
+  info = info_dark,
+  `tooltip-bg` = "#bbbbbb",
+  `tooltip-color` = info_dark,
+  `tooltip-opacity` = .95
+) |>
+  bslib::bs_add_rules(sass::sass_file("www/rtemislive.scss"))
+
+bslib_light <- bslib::bs_theme(
+  bg = bg_light,
+  fg = "#000",
+  primary = primary_light,
+  secondary = secondary_light,
+  success = success_light,
+  info = info_light,
+  `tooltip-bg` = "#303030",
+  `tooltip-color` = info_light,
+  `tooltip-opacity` = .95
+) |>
+  bslib::bs_add_rules(sass::sass_file("www/rtemislive.scss"))
+
+# from rtemislive
+rthelp <- function(..., title = NULL, class = "rthelp") {
+  div(
+    div(HTML(paste0(title, " Instructions")),
+      style = "color: #808080; font-weight: 300; padding-bottom:.5em;"
+    ),
+    HTML(paste0("<i>", paste(..., sep = "<br>")), "</i>"),
+    class = class
+  )
+} # rtemislive::rthelp
+
+rthelp_inline <- function(..., title = NULL, class = "rthelp-inline") {
+  rthelp(..., title = title, class = class)
+} # rtemislive::rthelp_inline
+
+bold <- function(x) {
+  paste0("<b>", x, "</b>")
+}
+
+hilite <- function(x) {
+  paste0("<span style='color: #72CDF4;font-weight: bold;'>", x, "</span>")
+}
+
+#' Summarize xt object in HTML
+#'
+#' @param x xt object
+#'
+#' @return HTML string
+#' @author EDG
+summarize_xt <- function(x) {
+  htmltools::HTML(
+    paste0(
+      paste0("N time points: ", hilite(length(x$x[[1]])))
+    )
+  )
+} # seqvizlive::summarize_xt
+
+
+# Create list using custom bullet
+rthelplist <- function(x, bullet = bsicons::bs_icon("arrow-right-short")) {
+  htmltools::HTML(
+    paste0(
+      bullet, "<i>", x, "</i>", "<br>"
+    )
+  )
+} # seqvizlive::rtlist
+
+rtTheme <- theme_darkgraygrid()

penguins.csv

@@ -1,345 +0,0 @@
-Species,Island,Bill Length (mm),Bill Depth (mm),Flipper Length (mm),Body Mass (g),Sex,Year
-Adelie,Torgersen,39.1,18.7,181,3750,male,2007
-Adelie,Torgersen,39.5,17.4,186,3800,female,2007
-Adelie,Torgersen,40.3,18,195,3250,female,2007
-Adelie,Torgersen,NA,NA,NA,NA,NA,2007
-Adelie,Torgersen,36.7,19.3,193,3450,female,2007
-Adelie,Torgersen,39.3,20.6,190,3650,male,2007
-Adelie,Torgersen,38.9,17.8,181,3625,female,2007
-Adelie,Torgersen,39.2,19.6,195,4675,male,2007
-Adelie,Torgersen,34.1,18.1,193,3475,NA,2007
-Adelie,Torgersen,42,20.2,190,4250,NA,2007
-Adelie,Torgersen,37.8,17.1,186,3300,NA,2007
-Adelie,Torgersen,37.8,17.3,180,3700,NA,2007
-Adelie,Torgersen,41.1,17.6,182,3200,female,2007
-Adelie,Torgersen,38.6,21.2,191,3800,male,2007
-Adelie,Torgersen,34.6,21.1,198,4400,male,2007
-Adelie,Torgersen,36.6,17.8,185,3700,female,2007
-Adelie,Torgersen,38.7,19,195,3450,female,2007
-Adelie,Torgersen,42.5,20.7,197,4500,male,2007
-Adelie,Torgersen,34.4,18.4,184,3325,female,2007
-Adelie,Torgersen,46,21.5,194,4200,male,2007
-Adelie,Biscoe,37.8,18.3,174,3400,female,2007
-Adelie,Biscoe,37.7,18.7,180,3600,male,2007
-Adelie,Biscoe,35.9,19.2,189,3800,female,2007
-Adelie,Biscoe,38.2,18.1,185,3950,male,2007
-Adelie,Biscoe,38.8,17.2,180,3800,male,2007
-Adelie,Biscoe,35.3,18.9,187,3800,female,2007
-Adelie,Biscoe,40.6,18.6,183,3550,male,2007
-Adelie,Biscoe,40.5,17.9,187,3200,female,2007
-Adelie,Biscoe,37.9,18.6,172,3150,female,2007
-Adelie,Biscoe,40.5,18.9,180,3950,male,2007
-Adelie,Dream,39.5,16.7,178,3250,female,2007
-Adelie,Dream,37.2,18.1,178,3900,male,2007
-Adelie,Dream,39.5,17.8,188,3300,female,2007
-Adelie,Dream,40.9,18.9,184,3900,male,2007
-Adelie,Dream,36.4,17,195,3325,female,2007
-Adelie,Dream,39.2,21.1,196,4150,male,2007
-Adelie,Dream,38.8,20,190,3950,male,2007
-Adelie,Dream,42.2,18.5,180,3550,female,2007
-Adelie,Dream,37.6,19.3,181,3300,female,2007
-Adelie,Dream,39.8,19.1,184,4650,male,2007
-Adelie,Dream,36.5,18,182,3150,female,2007
-Adelie,Dream,40.8,18.4,195,3900,male,2007
-Adelie,Dream,36,18.5,186,3100,female,2007
-Adelie,Dream,44.1,19.7,196,4400,male,2007
-Adelie,Dream,37,16.9,185,3000,female,2007
-Adelie,Dream,39.6,18.8,190,4600,male,2007
-Adelie,Dream,41.1,19,182,3425,male,2007
-Adelie,Dream,37.5,18.9,179,2975,NA,2007
-Adelie,Dream,36,17.9,190,3450,female,2007
-Adelie,Dream,42.3,21.2,191,4150,male,2007
-Adelie,Biscoe,39.6,17.7,186,3500,female,2008
-Adelie,Biscoe,40.1,18.9,188,4300,male,2008
-Adelie,Biscoe,35,17.9,190,3450,female,2008
-Adelie,Biscoe,42,19.5,200,4050,male,2008
-Adelie,Biscoe,34.5,18.1,187,2900,female,2008
-Adelie,Biscoe,41.4,18.6,191,3700,male,2008
-Adelie,Biscoe,39,17.5,186,3550,female,2008
-Adelie,Biscoe,40.6,18.8,193,3800,male,2008
-Adelie,Biscoe,36.5,16.6,181,2850,female,2008
-Adelie,Biscoe,37.6,19.1,194,3750,male,2008
-Adelie,Biscoe,35.7,16.9,185,3150,female,2008
-Adelie,Biscoe,41.3,21.1,195,4400,male,2008
-Adelie,Biscoe,37.6,17,185,3600,female,2008
-Adelie,Biscoe,41.1,18.2,192,4050,male,2008
-Adelie,Biscoe,36.4,17.1,184,2850,female,2008
-Adelie,Biscoe,41.6,18,192,3950,male,2008
-Adelie,Biscoe,35.5,16.2,195,3350,female,2008
-Adelie,Biscoe,41.1,19.1,188,4100,male,2008
-Adelie,Torgersen,35.9,16.6,190,3050,female,2008
-Adelie,Torgersen,41.8,19.4,198,4450,male,2008
-Adelie,Torgersen,33.5,19,190,3600,female,2008
-Adelie,Torgersen,39.7,18.4,190,3900,male,2008
-Adelie,Torgersen,39.6,17.2,196,3550,female,2008
-Adelie,Torgersen,45.8,18.9,197,4150,male,2008
-Adelie,Torgersen,35.5,17.5,190,3700,female,2008
-Adelie,Torgersen,42.8,18.5,195,4250,male,2008
-Adelie,Torgersen,40.9,16.8,191,3700,female,2008
-Adelie,Torgersen,37.2,19.4,184,3900,male,2008
-Adelie,Torgersen,36.2,16.1,187,3550,female,2008
-Adelie,Torgersen,42.1,19.1,195,4000,male,2008
-Adelie,Torgersen,34.6,17.2,189,3200,female,2008
-Adelie,Torgersen,42.9,17.6,196,4700,male,2008
-Adelie,Torgersen,36.7,18.8,187,3800,female,2008
-Adelie,Torgersen,35.1,19.4,193,4200,male,2008
-Adelie,Dream,37.3,17.8,191,3350,female,2008
-Adelie,Dream,41.3,20.3,194,3550,male,2008
-Adelie,Dream,36.3,19.5,190,3800,male,2008
-Adelie,Dream,36.9,18.6,189,3500,female,2008
-Adelie,Dream,38.3,19.2,189,3950,male,2008
-Adelie,Dream,38.9,18.8,190,3600,female,2008
-Adelie,Dream,35.7,18,202,3550,female,2008
-Adelie,Dream,41.1,18.1,205,4300,male,2008
-Adelie,Dream,34,17.1,185,3400,female,2008
-Adelie,Dream,39.6,18.1,186,4450,male,2008
-Adelie,Dream,36.2,17.3,187,3300,female,2008
-Adelie,Dream,40.8,18.9,208,4300,male,2008
-Adelie,Dream,38.1,18.6,190,3700,female,2008
-Adelie,Dream,40.3,18.5,196,4350,male,2008
-Adelie,Dream,33.1,16.1,178,2900,female,2008
-Adelie,Dream,43.2,18.5,192,4100,male,2008
-Adelie,Biscoe,35,17.9,192,3725,female,2009
-Adelie,Biscoe,41,20,203,4725,male,2009
-Adelie,Biscoe,37.7,16,183,3075,female,2009
-Adelie,Biscoe,37.8,20,190,4250,male,2009
-Adelie,Biscoe,37.9,18.6,193,2925,female,2009
-Adelie,Biscoe,39.7,18.9,184,3550,male,2009
-Adelie,Biscoe,38.6,17.2,199,3750,female,2009
-Adelie,Biscoe,38.2,20,190,3900,male,2009
-Adelie,Biscoe,38.1,17,181,3175,female,2009
-Adelie,Biscoe,43.2,19,197,4775,male,2009
-Adelie,Biscoe,38.1,16.5,198,3825,female,2009
-Adelie,Biscoe,45.6,20.3,191,4600,male,2009
-Adelie,Biscoe,39.7,17.7,193,3200,female,2009
-Adelie,Biscoe,42.2,19.5,197,4275,male,2009
-Adelie,Biscoe,39.6,20.7,191,3900,female,2009
-Adelie,Biscoe,42.7,18.3,196,4075,male,2009
-Adelie,Torgersen,38.6,17,188,2900,female,2009
-Adelie,Torgersen,37.3,20.5,199,3775,male,2009
-Adelie,Torgersen,35.7,17,189,3350,female,2009
-Adelie,Torgersen,41.1,18.6,189,3325,male,2009
-Adelie,Torgersen,36.2,17.2,187,3150,female,2009
-Adelie,Torgersen,37.7,19.8,198,3500,male,2009
-Adelie,Torgersen,40.2,17,176,3450,female,2009
-Adelie,Torgersen,41.4,18.5,202,3875,male,2009
-Adelie,Torgersen,35.2,15.9,186,3050,female,2009
-Adelie,Torgersen,40.6,19,199,4000,male,2009
-Adelie,Torgersen,38.8,17.6,191,3275,female,2009
-Adelie,Torgersen,41.5,18.3,195,4300,male,2009
-Adelie,Torgersen,39,17.1,191,3050,female,2009
-Adelie,Torgersen,44.1,18,210,4000,male,2009
-Adelie,Torgersen,38.5,17.9,190,3325,female,2009
-Adelie,Torgersen,43.1,19.2,197,3500,male,2009
-Adelie,Dream,36.8,18.5,193,3500,female,2009
-Adelie,Dream,37.5,18.5,199,4475,male,2009
-Adelie,Dream,38.1,17.6,187,3425,female,2009
-Adelie,Dream,41.1,17.5,190,3900,male,2009
-Adelie,Dream,35.6,17.5,191,3175,female,2009
-Adelie,Dream,40.2,20.1,200,3975,male,2009
-Adelie,Dream,37,16.5,185,3400,female,2009
-Adelie,Dream,39.7,17.9,193,4250,male,2009
-Adelie,Dream,40.2,17.1,193,3400,female,2009
-Adelie,Dream,40.6,17.2,187,3475,male,2009
-Adelie,Dream,32.1,15.5,188,3050,female,2009
-Adelie,Dream,40.7,17,190,3725,male,2009
-Adelie,Dream,37.3,16.8,192,3000,female,2009
-Adelie,Dream,39,18.7,185,3650,male,2009
-Adelie,Dream,39.2,18.6,190,4250,male,2009
-Adelie,Dream,36.6,18.4,184,3475,female,2009
-Adelie,Dream,36,17.8,195,3450,female,2009
-Adelie,Dream,37.8,18.1,193,3750,male,2009
-Adelie,Dream,36,17.1,187,3700,female,2009
-Adelie,Dream,41.5,18.5,201,4000,male,2009
-Gentoo,Biscoe,46.1,13.2,211,4500,female,2007
-Gentoo,Biscoe,50,16.3,230,5700,male,2007
-Gentoo,Biscoe,48.7,14.1,210,4450,female,2007
-Gentoo,Biscoe,50,15.2,218,5700,male,2007
-Gentoo,Biscoe,47.6,14.5,215,5400,male,2007
-Gentoo,Biscoe,46.5,13.5,210,4550,female,2007
-Gentoo,Biscoe,45.4,14.6,211,4800,female,2007
-Gentoo,Biscoe,46.7,15.3,219,5200,male,2007
-Gentoo,Biscoe,43.3,13.4,209,4400,female,2007
-Gentoo,Biscoe,46.8,15.4,215,5150,male,2007
-Gentoo,Biscoe,40.9,13.7,214,4650,female,2007
-Gentoo,Biscoe,49,16.1,216,5550,male,2007
-Gentoo,Biscoe,45.5,13.7,214,4650,female,2007
-Gentoo,Biscoe,48.4,14.6,213,5850,male,2007
-Gentoo,Biscoe,45.8,14.6,210,4200,female,2007
-Gentoo,Biscoe,49.3,15.7,217,5850,male,2007
-Gentoo,Biscoe,42,13.5,210,4150,female,2007
-Gentoo,Biscoe,49.2,15.2,221,6300,male,2007
-Gentoo,Biscoe,46.2,14.5,209,4800,female,2007
-Gentoo,Biscoe,48.7,15.1,222,5350,male,2007
-Gentoo,Biscoe,50.2,14.3,218,5700,male,2007
-Gentoo,Biscoe,45.1,14.5,215,5000,female,2007
-Gentoo,Biscoe,46.5,14.5,213,4400,female,2007
-Gentoo,Biscoe,46.3,15.8,215,5050,male,2007
-Gentoo,Biscoe,42.9,13.1,215,5000,female,2007
-Gentoo,Biscoe,46.1,15.1,215,5100,male,2007
-Gentoo,Biscoe,44.5,14.3,216,4100,NA,2007
-Gentoo,Biscoe,47.8,15,215,5650,male,2007
-Gentoo,Biscoe,48.2,14.3,210,4600,female,2007
-Gentoo,Biscoe,50,15.3,220,5550,male,2007
-Gentoo,Biscoe,47.3,15.3,222,5250,male,2007
-Gentoo,Biscoe,42.8,14.2,209,4700,female,2007
-Gentoo,Biscoe,45.1,14.5,207,5050,female,2007
-Gentoo,Biscoe,59.6,17,230,6050,male,2007
-Gentoo,Biscoe,49.1,14.8,220,5150,female,2008
-Gentoo,Biscoe,48.4,16.3,220,5400,male,2008
-Gentoo,Biscoe,42.6,13.7,213,4950,female,2008
-Gentoo,Biscoe,44.4,17.3,219,5250,male,2008
-Gentoo,Biscoe,44,13.6,208,4350,female,2008
-Gentoo,Biscoe,48.7,15.7,208,5350,male,2008
-Gentoo,Biscoe,42.7,13.7,208,3950,female,2008
-Gentoo,Biscoe,49.6,16,225,5700,male,2008
-Gentoo,Biscoe,45.3,13.7,210,4300,female,2008
-Gentoo,Biscoe,49.6,15,216,4750,male,2008
-Gentoo,Biscoe,50.5,15.9,222,5550,male,2008
-Gentoo,Biscoe,43.6,13.9,217,4900,female,2008
-Gentoo,Biscoe,45.5,13.9,210,4200,female,2008
-Gentoo,Biscoe,50.5,15.9,225,5400,male,2008
-Gentoo,Biscoe,44.9,13.3,213,5100,female,2008
-Gentoo,Biscoe,45.2,15.8,215,5300,male,2008
-Gentoo,Biscoe,46.6,14.2,210,4850,female,2008
-Gentoo,Biscoe,48.5,14.1,220,5300,male,2008
-Gentoo,Biscoe,45.1,14.4,210,4400,female,2008
-Gentoo,Biscoe,50.1,15,225,5000,male,2008
-Gentoo,Biscoe,46.5,14.4,217,4900,female,2008
-Gentoo,Biscoe,45,15.4,220,5050,male,2008
-Gentoo,Biscoe,43.8,13.9,208,4300,female,2008
-Gentoo,Biscoe,45.5,15,220,5000,male,2008
-Gentoo,Biscoe,43.2,14.5,208,4450,female,2008
-Gentoo,Biscoe,50.4,15.3,224,5550,male,2008
-Gentoo,Biscoe,45.3,13.8,208,4200,female,2008
-Gentoo,Biscoe,46.2,14.9,221,5300,male,2008
-Gentoo,Biscoe,45.7,13.9,214,4400,female,2008
-Gentoo,Biscoe,54.3,15.7,231,5650,male,2008
-Gentoo,Biscoe,45.8,14.2,219,4700,female,2008
-Gentoo,Biscoe,49.8,16.8,230,5700,male,2008
-Gentoo,Biscoe,46.2,14.4,214,4650,NA,2008
-Gentoo,Biscoe,49.5,16.2,229,5800,male,2008
-Gentoo,Biscoe,43.5,14.2,220,4700,female,2008
-Gentoo,Biscoe,50.7,15,223,5550,male,2008
-Gentoo,Biscoe,47.7,15,216,4750,female,2008
-Gentoo,Biscoe,46.4,15.6,221,5000,male,2008
-Gentoo,Biscoe,48.2,15.6,221,5100,male,2008
-Gentoo,Biscoe,46.5,14.8,217,5200,female,2008
-Gentoo,Biscoe,46.4,15,216,4700,female,2008
-Gentoo,Biscoe,48.6,16,230,5800,male,2008
-Gentoo,Biscoe,47.5,14.2,209,4600,female,2008
-Gentoo,Biscoe,51.1,16.3,220,6000,male,2008
-Gentoo,Biscoe,45.2,13.8,215,4750,female,2008
-Gentoo,Biscoe,45.2,16.4,223,5950,male,2008
-Gentoo,Biscoe,49.1,14.5,212,4625,female,2009
-Gentoo,Biscoe,52.5,15.6,221,5450,male,2009
-Gentoo,Biscoe,47.4,14.6,212,4725,female,2009
-Gentoo,Biscoe,50,15.9,224,5350,male,2009
-Gentoo,Biscoe,44.9,13.8,212,4750,female,2009
-Gentoo,Biscoe,50.8,17.3,228,5600,male,2009
-Gentoo,Biscoe,43.4,14.4,218,4600,female,2009
-Gentoo,Biscoe,51.3,14.2,218,5300,male,2009
-Gentoo,Biscoe,47.5,14,212,4875,female,2009
-Gentoo,Biscoe,52.1,17,230,5550,male,2009
-Gentoo,Biscoe,47.5,15,218,4950,female,2009
-Gentoo,Biscoe,52.2,17.1,228,5400,male,2009
-Gentoo,Biscoe,45.5,14.5,212,4750,female,2009
-Gentoo,Biscoe,49.5,16.1,224,5650,male,2009
-Gentoo,Biscoe,44.5,14.7,214,4850,female,2009
-Gentoo,Biscoe,50.8,15.7,226,5200,male,2009
-Gentoo,Biscoe,49.4,15.8,216,4925,male,2009
-Gentoo,Biscoe,46.9,14.6,222,4875,female,2009
-Gentoo,Biscoe,48.4,14.4,203,4625,female,2009
-Gentoo,Biscoe,51.1,16.5,225,5250,male,2009
-Gentoo,Biscoe,48.5,15,219,4850,female,2009
-Gentoo,Biscoe,55.9,17,228,5600,male,2009
-Gentoo,Biscoe,47.2,15.5,215,4975,female,2009
-Gentoo,Biscoe,49.1,15,228,5500,male,2009
-Gentoo,Biscoe,47.3,13.8,216,4725,NA,2009
-Gentoo,Biscoe,46.8,16.1,215,5500,male,2009
-Gentoo,Biscoe,41.7,14.7,210,4700,female,2009
-Gentoo,Biscoe,53.4,15.8,219,5500,male,2009
-Gentoo,Biscoe,43.3,14,208,4575,female,2009
-Gentoo,Biscoe,48.1,15.1,209,5500,male,2009
-Gentoo,Biscoe,50.5,15.2,216,5000,female,2009
-Gentoo,Biscoe,49.8,15.9,229,5950,male,2009
-Gentoo,Biscoe,43.5,15.2,213,4650,female,2009
-Gentoo,Biscoe,51.5,16.3,230,5500,male,2009
-Gentoo,Biscoe,46.2,14.1,217,4375,female,2009
-Gentoo,Biscoe,55.1,16,230,5850,male,2009
-Gentoo,Biscoe,44.5,15.7,217,4875,NA,2009
-Gentoo,Biscoe,48.8,16.2,222,6000,male,2009
-Gentoo,Biscoe,47.2,13.7,214,4925,female,2009
-Gentoo,Biscoe,NA,NA,NA,NA,NA,2009
-Gentoo,Biscoe,46.8,14.3,215,4850,female,2009
-Gentoo,Biscoe,50.4,15.7,222,5750,male,2009
-Gentoo,Biscoe,45.2,14.8,212,5200,female,2009
-Gentoo,Biscoe,49.9,16.1,213,5400,male,2009
-Chinstrap,Dream,46.5,17.9,192,3500,female,2007
-Chinstrap,Dream,50,19.5,196,3900,male,2007
-Chinstrap,Dream,51.3,19.2,193,3650,male,2007
-Chinstrap,Dream,45.4,18.7,188,3525,female,2007
-Chinstrap,Dream,52.7,19.8,197,3725,male,2007
-Chinstrap,Dream,45.2,17.8,198,3950,female,2007
-Chinstrap,Dream,46.1,18.2,178,3250,female,2007
-Chinstrap,Dream,51.3,18.2,197,3750,male,2007
-Chinstrap,Dream,46,18.9,195,4150,female,2007
-Chinstrap,Dream,51.3,19.9,198,3700,male,2007
-Chinstrap,Dream,46.6,17.8,193,3800,female,2007
-Chinstrap,Dream,51.7,20.3,194,3775,male,2007
-Chinstrap,Dream,47,17.3,185,3700,female,2007
-Chinstrap,Dream,52,18.1,201,4050,male,2007
-Chinstrap,Dream,45.9,17.1,190,3575,female,2007
-Chinstrap,Dream,50.5,19.6,201,4050,male,2007
-Chinstrap,Dream,50.3,20,197,3300,male,2007
-Chinstrap,Dream,58,17.8,181,3700,female,2007
-Chinstrap,Dream,46.4,18.6,190,3450,female,2007
-Chinstrap,Dream,49.2,18.2,195,4400,male,2007
-Chinstrap,Dream,42.4,17.3,181,3600,female,2007
-Chinstrap,Dream,48.5,17.5,191,3400,male,2007
-Chinstrap,Dream,43.2,16.6,187,2900,female,2007
-Chinstrap,Dream,50.6,19.4,193,3800,male,2007
-Chinstrap,Dream,46.7,17.9,195,3300,female,2007
-Chinstrap,Dream,52,19,197,4150,male,2007
-Chinstrap,Dream,50.5,18.4,200,3400,female,2008
-Chinstrap,Dream,49.5,19,200,3800,male,2008
-Chinstrap,Dream,46.4,17.8,191,3700,female,2008
-Chinstrap,Dream,52.8,20,205,4550,male,2008
-Chinstrap,Dream,40.9,16.6,187,3200,female,2008
-Chinstrap,Dream,54.2,20.8,201,4300,male,2008
-Chinstrap,Dream,42.5,16.7,187,3350,female,2008
-Chinstrap,Dream,51,18.8,203,4100,male,2008
-Chinstrap,Dream,49.7,18.6,195,3600,male,2008
-Chinstrap,Dream,47.5,16.8,199,3900,female,2008
-Chinstrap,Dream,47.6,18.3,195,3850,female,2008
-Chinstrap,Dream,52,20.7,210,4800,male,2008
-Chinstrap,Dream,46.9,16.6,192,2700,female,2008
-Chinstrap,Dream,53.5,19.9,205,4500,male,2008
-Chinstrap,Dream,49,19.5,210,3950,male,2008
-Chinstrap,Dream,46.2,17.5,187,3650,female,2008
-Chinstrap,Dream,50.9,19.1,196,3550,male,2008
-Chinstrap,Dream,45.5,17,196,3500,female,2008
-Chinstrap,Dream,50.9,17.9,196,3675,female,2009
-Chinstrap,Dream,50.8,18.5,201,4450,male,2009
-Chinstrap,Dream,50.1,17.9,190,3400,female,2009
-Chinstrap,Dream,49,19.6,212,4300,male,2009
-Chinstrap,Dream,51.5,18.7,187,3250,male,2009
-Chinstrap,Dream,49.8,17.3,198,3675,female,2009
-Chinstrap,Dream,48.1,16.4,199,3325,female,2009
-Chinstrap,Dream,51.4,19,201,3950,male,2009
-Chinstrap,Dream,45.7,17.3,193,3600,female,2009
-Chinstrap,Dream,50.7,19.7,203,4050,male,2009
-Chinstrap,Dream,42.5,17.3,187,3350,female,2009
-Chinstrap,Dream,52.2,18.8,197,3450,male,2009
-Chinstrap,Dream,45.2,16.6,191,3250,female,2009
-Chinstrap,Dream,49.3,19.9,203,4050,male,2009
-Chinstrap,Dream,50.2,18.8,202,3800,male,2009
-Chinstrap,Dream,45.6,19.4,194,3525,female,2009
-Chinstrap,Dream,51.9,19.5,206,3950,male,2009
-Chinstrap,Dream,46.8,16.5,189,3650,female,2009
-Chinstrap,Dream,45.7,17,195,3650,female,2009
-Chinstrap,Dream,55.8,19.8,207,4000,male,2009
-Chinstrap,Dream,43.5,18.1,202,3400,female,2009
-Chinstrap,Dream,49.6,18.2,193,3775,male,2009
-Chinstrap,Dream,50.8,19,210,4100,male,2009
-Chinstrap,Dream,50.2,18.7,198,3775,female,2009

www/globals.js

@@ -0,0 +1,9 @@
+// highlight object on load using CSS animation
+// window.addEventListener("load", function () {
+//   const elementToHighlight = document.querySelector(".rthelp"); // Replace with your element's CSS selector
+
+//   if (elementToHighlight) {
+//     elementToHighlight.style.borderColor = "transparent"; // Set initial transparent border
+//     elementToHighlight.classList.add("highlight-animation"); // Add animation class
+//   }
+// });

www/rtemislive.scss

@@ -0,0 +1,66 @@
+/* rtemislive.scss */
+
+/* rthelp */
+.rthelp {
+  position: fixed !important;
+  top: 33% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%);
+  color: $info !important;
+  margin: 11px;
+  border: 0.5px solid transparent;
+  border-radius: 10px;
+  padding: 11px;
+}
+
+.rthelp-inline {
+  display: inline-block;
+  color: $info !important;
+  margin: 11px;
+  border: 0.5px solid transparent;
+  border-radius: 10px;
+  padding: 11px;
+  text-align: left;
+}
+
+// modify bs link color only for body links
+// card-body a {
+//   color: $primary !important;
+// }
+
+.rt-tooltip {
+  background-color: #282828aa;
+  color: orange;
+  border-radius: 10px;
+}
+
+// Border animation
+.rthelp,
+.rthelp-inline {
+  // animation: highlight-border 1s ease-in-out forwards;
+  animation-name: highlight-border;
+  animation-duration: 6s;
+  animation-timing-function: ease-in-out;
+  // animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+}
+
+@keyframes highlight-border {
+  0% {
+    border-color: transparent;
+  }
+
+  50% {
+    border-color: $info;
+  }
+
+  100% {
+    border-color: transparent;
+  }
+}
+
+// theme switch
+#lightson {
+  margin-top: auto;
+  margin-bottom: auto;
+}