renalware-core 2.0.51 → 2.0.52

data/app/views/renalware/research/study_participants/_filters.html.slim

@@ -0,0 +1,13 @@
+.search-form.filters
+  = simple_form_for query,
+      as: :q,
+      url: research_study_participants_path(study),
+      method: :get do |f|
+    .row
+      .columns.medium-3
+        = f.input :identity_match, label: "Search by Hosp/NHS no or name"
+
+      .columns.medium-4.actions.end
+        = f.submit t("helpers.submit.filter"), class: "button", name: nil
+        span= " or "
+        = link_to t("helpers.reset"), research_study_participants_path(study)

data/app/views/renalware/research/study_participants/_table.html.slim

@@ -2,8 +2,8 @@
   table
     thead
       tr
-        th.col-width-date Joined on
-        th.col-width-date Left on
+        th.col-width-date= sort_link(query, :joined_on, "Joined on")
+        th.col-width-date= sort_link(query, :left_on, "Left on")
         th Patient
         th.col-width-nhs-no NHS Number
         th.col-width-reference-no Hosp no

data/app/views/renalware/research/study_participants/create.js.erb

@@ -1,3 +1,3 @@
 <%= refresh(".flash-message", partial: "renalware/shared/flash_messages", locals: local_assigns) %>
-$(".study-participants-table").replaceWith("<%= j(render 'table', study: study, participants: participants) %>");
+$(".study-participants-table").replaceWith("<%= j(render 'table', **local_assigns) %>");
 $("#study-participant-modal").foundation('reveal', 'close');

data/app/views/renalware/research/study_participants/index.html.slim

@@ -5,6 +5,9 @@
             class: :button,
             data: { "reveal-id" => "study-participant-modal", "reveal-ajax" => "true" })
 
+= content_for(:filters) do
+  = render "filters", study: study, query: query
+
 = within_admin_layout(\
   title: "Participants",
   breadcrumbs: [\
@@ -20,6 +23,6 @@
       br
       = "Leader: #{study.leader}"
 
-  = render "table", study: study, participants: participants
+  = render "table", study: study, participants: participants, query: query
 
   #study-participant-modal.reveal-modal.small(data-reveal)

data/app/views/renalware/research/study_participants/update.js.erb

@@ -1,3 +1,3 @@
 <%= refresh(".flash-message", partial: "renalware/shared/flash_messages", locals: local_assigns) %>
-$(".study-participants-table").replaceWith("<%= j(render 'table', study: study, participants: participants) %>");
+$(".study-participants-table").replaceWith("<%= j(render 'table', **local_assigns) %>");
 $("#study-participant-modal").foundation('reveal', 'close');

data/app/views/renalware/shared/documents/_year_dated_confirmation_input.html.slim

@@ -1,5 +1,5 @@
 = f.simple_fields_for attribute, f.object.public_send(attribute) do |fd|
-  tr
+  tr(class="year-dated-confirmation--#{attribute}")
     td= fd.label :status, f.object.class.human_attribute_name(attribute)
     td= fd.input :status, as: :inline_radio_buttons,
         label: false, wrapper: "vertical_form"

data/app/views/renalware/transplants/wait_lists/show.html.slim

@@ -27,8 +27,8 @@
         th Sex
         th= sort_link([:renalware, q], :patient_current_modality_description_name, "Modality")
         th= sort_link([:renalware, q], :hd_site, "HD Site")
-        th Status
-        th UKT Status
+        th= sort_link([:renalware, q], :patient_current_status_description_name, "Status")
+        th= sort_link([:renalware, q], :ukt_status, "UKT Status")
         th.col-width-date= sort_link([:renalware, q], :esrf_on, "ESRF Date")
         th.col-width-date= sort_link([:renalware, q], :entered_on, "Entry Date")
         th DOL

data/db/migrate/20181008144324_update_daily_letters_report_view_to_version_2.rb

@@ -0,0 +1,13 @@
+class UpdateDailyLettersReportViewToVersion2 < ActiveRecord::Migration[5.2]
+  include MigrationHelper
+
+  def change
+    within_renalware_schema do
+      update_view(
+        :reporting_daily_letters,
+        version: 2,
+        revert_to_version: 1
+      )
+    end
+  end
+end

data/db/migrate/20181008145159_create_reporting_daily_ukrdc_view.rb

@@ -0,0 +1,11 @@
+require "migration_helper"
+
+class CreateReportingDailyUKRDCView < ActiveRecord::Migration[5.2]
+  include MigrationHelper
+
+  def change
+    within_renalware_schema do
+      create_view :reporting_daily_ukrdc
+    end
+  end
+end

data/db/migrate/20181013115138_update_reporting_daily_pathology_view_to_v2.rb

@@ -0,0 +1,13 @@
+class UpdateReportingDailyPathologyViewToV2 < ActiveRecord::Migration[5.2]
+  include MigrationHelper
+
+  def change
+    within_renalware_schema do
+      update_view(
+        :reporting_daily_pathology,
+        version: 2,
+        revert_to_version: 1
+      )
+    end
+  end
+end

data/db/views/reporting_daily_letters_v02.sql

@@ -0,0 +1,4 @@
+select
+  (select count(*) from letter_letters where created_at::date = now()::date) as letters_created_today,
+  (select count(*) from letter_letters where completed_at::date = now()::date) as letters_printed_today,
+  (select count(*) from letter_letters where type = 'Renalware::Letters::Letter::Draft' and issued_on < (current_date - interval '14 days')) as draft_letters_older_than_14_days;

data/db/views/reporting_daily_pathology_v02.sql

@@ -0,0 +1,18 @@
+-- A pathology report to help identify any HL7/delayed_job issues
+-- the name of the view (the filename here) is significant as we'll compile all reporting_daily_*
+-- views into a daily digest email
+select
+  (select count(*) from delayed_jobs) as delayed_jobs_total,
+  (select count(*) from delayed_jobs where attempts = 0) as delayed_jobs_unprocessed,
+  (select count(*) from delayed_jobs where last_error is not null and failed_at is null ) as delayed_jobs_retrying,
+  (select count(*) from delayed_jobs where last_error is not null and failed_at is not null ) as delayed_jobs_failed,
+  (select max(created_at) from delayed_jobs) as delayed_jobs_latest_entry,
+  (select count(*) from delayed_jobs where created_at >= now()::date) as delayed_jobs_added_today,
+  (select json_object_agg(priority, count) from (select priority, count(*) from delayed_jobs group by priority ) query) as delayed_jobs_priority_counts,
+  (select json_object_agg(queue, count) from (select queue, count(*) from delayed_jobs group by queue ) query) as delayed_jobs_queue_counts,
+  (select json_object_agg(attempts, count) from (select attempts, count(*) from delayed_jobs group by attempts ) query) as delayed_jobs_attempts_counts,
+  (select count(*) from feed_messages) as feed_messages_total,
+  (select count(*) from feed_messages where created_at >= now()::date) as feed_messages_added_today,
+  (select max(created_at) from feed_messages) as feed_messages_added_latest_entry, -- will be slow, needs index on feed_messages.created_at
+  (select count(*) from pathology_observations where created_at::date >= now()::date) as pathology_observations_added_today,
+  (select max(observed_at) from pathology_observations) as pathology_observations_latest_observed_at;

data/db/views/reporting_daily_ukrdc_v01.sql

@@ -0,0 +1,2 @@
+select
+  (select count(*) from patients where sent_to_ukrdc_at::date = current_date) as patients_sent_to_ukrdc_today;

data/lib/migration_helper.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module MigrationHelper
+  def within_renalware_schema
+    reversible do |direction|
+      direction.up { connection.execute("SET SEARCH_PATH=renalware,public;") }
+      direction.down { connection.execute("SET SEARCH_PATH=renalware,public;") }
+    end
+    yield if block_given?
+  end
+end

data/lib/renalware/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Renalware
-  VERSION = "2.0.51"
+  VERSION = "2.0.52"
 end

data/lib/sql/{index_case_stmt.rb → indexed_case_stmt.rb}

@@ -26,10 +26,10 @@ module SQL
 
       clauses = []
       Array(items).each_with_index do |item, index|
-        clauses << "WHEN '#{item}' THEN #{index}"
+        clauses << Arel.sql("WHEN '#{item}' THEN #{index}")
       end
 
-      "CASE #{column} #{clauses.join(' ')} END"
+      Arel.sql("CASE #{column} #{clauses.join(' ')} END")
     end
   end
 end

data/lib/tasks/ukrdc.rake

@@ -1,5 +1,6 @@
+# frozen_string_literal: true
+
 require "fileutils"
-require "gpgme"
 
 # Note you can print out the help for this task and others with `rake -D`
 namespace :ukrdc do

data/spec/factories/patients/practices.rb

@@ -2,8 +2,9 @@
 
 FactoryBot.define do
   sequence :practice_code do |n|
-    "PR432#{n}"
+    "M" + n.to_s.rjust(5, "0")
   end
+
   factory :practice, class: "Renalware::Patients::Practice" do
     name { "Trumpton Medical Centre" }
     email { "admin@trumptonmedicalcentre-nhs.net" }

data/spec/factories/patients/primary_care_physicians.rb

@@ -2,7 +2,7 @@
 
 FactoryBot.define do
   sequence :gp_code do |n|
-    "GP1234#{n}"
+    "G" + n.to_s.rjust(7, "0")
   end
 
   factory :primary_care_physician, class: "Renalware::Patients::PrimaryCarePhysician" do

data/spec/support/pages/admissions/consults_page.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require_relative "../page_object"
+
+module Pages
+  module Admissions
+    class Consults < PageObject
+      def go
+        visit admissions_consults_path
+        self
+      end
+
+      def sort_by_modality
+        within ".admissions-consults-table thead" do
+          click_on "Modality"
+        end
+      end
+
+      def has_patient?(patient)
+        within ".admissions-consults-table" do
+          has_content?(patient.to_s)
+        end
+      end
+    end
+  end
+end

data/spec/support/pages/page_object.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+module Pages
+  class PageObject
+    include Capybara::DSL
+    include Renalware::Engine.routes.url_helpers
+  end
+end

data/spec/support/shared_examples/paranoia_examples.rb

@@ -6,10 +6,10 @@ shared_examples_for "a Paranoid model" do
   it { is_expected.to have_db_index(:deleted_at) }
 
   it "adds a deleted_at where clause" do
-    expect(described_class.all.where_sql).to include(".\"deleted_at\" IS NULL")
+    expect(described_class.all.to_sql).to include(".\"deleted_at\" IS NULL")
   end
 
   it "skips adding the deleted_at where clause when unscoped" do
-    expect(described_class.unscoped.where_sql.to_s).not_to include("\"deleted_at\"")
+    expect(described_class.unscoped.to_sql).not_to include("\"deleted_at\"")
   end
 end

data/vendor/assets/stylesheets/renalware/balloon.css

@@ -0,0 +1,383 @@
+// Tweaked CSS tooltips from https://github.com/kazzkiq/balloon.css
+button[data-balloon] {
+  overflow: visible; }
+
+[data-balloon] {
+  cursor: pointer;
+  position: relative; }
+
+  [data-balloon]:after {
+    -khtml-opacity: 0;
+    -moz-opacity: 0;
+    -moz-transition: all 0.18s ease-out 0.18s;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    -ms-transition: all 0.18s ease-out 0.18s;
+    -o-transition: all 0.18s ease-out 0.18s;
+    -webkit-transition: all 0.18s ease-out 0.18s;
+    background: rgba(17, 17, 17, 0.9);
+    border-radius: 3px;
+    color: #fff;
+    content: attr(data-balloon);
+    filter: alpha(opacity=0);
+    font-family: sans-serif !important;
+    font-size: .9rem !important;
+    font-style: normal !important;
+    font-weight: normal !important;
+    opacity: 0;
+    padding: .5em 1em;
+    pointer-events: none;
+    position: absolute;
+    text-shadow: none !important;
+    transition: all 0.18s ease-out 0.18s;
+    white-space: nowrap;
+    z-index: 10; }
+
+  [data-balloon]:before {
+    -khtml-opacity: 0;
+    -moz-opacity: 0;
+    -moz-transition: all 0.18s ease-out 0.18s;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    -ms-transition: all 0.18s ease-out 0.18s;
+    -o-transition: all 0.18s ease-out 0.18s;
+    -webkit-transition: all 0.18s ease-out 0.18s;
+    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
+    background-size: 100% auto;
+    content: '';
+    filter: alpha(opacity=0);
+    height: 6px;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: all 0.18s ease-out 0.18s;
+    width: 18px;
+    z-index: 10; }
+
+  [data-balloon]:hover:before, [data-balloon]:hover:after, [data-balloon][data-balloon-visible]:before, [data-balloon][data-balloon-visible]:after {
+    -khtml-opacity: 1;
+    -moz-opacity: 1;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+    filter: alpha(opacity=100);
+    opacity: 1;
+    pointer-events: auto; }
+
+  [data-balloon].font-awesome:after {
+    font-family: FontAwesome; }
+
+  [data-balloon][data-balloon-break]:after {
+    white-space: pre; }
+
+  [data-balloon][data-balloon-blunt]:before, [data-balloon][data-balloon-blunt]:after {
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    -webkit-transition: none;
+    transition: none; }
+
+  [data-balloon][data-balloon-pos="up"]:after {
+    -moz-transform: translate(-50%, 10px);
+    -moz-transform-origin: top;
+    -ms-transform: translate(-50%, 10px);
+    -ms-transform-origin: top;
+    -webkit-transform: translate(-50%, 10px);
+    -webkit-transform-origin: top;
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: 11px;
+    transform: translate(-50%, 10px);
+    transform-origin: top; }
+
+  [data-balloon][data-balloon-pos="up"]:before {
+    -moz-transform: translate(-50%, 10px);
+    -moz-transform-origin: top;
+    -ms-transform: translate(-50%, 10px);
+    -ms-transform-origin: top;
+    -webkit-transform: translate(-50%, 10px);
+    -webkit-transform-origin: top;
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: 5px;
+    transform: translate(-50%, 10px);
+    transform-origin: top; }
+
+  [data-balloon][data-balloon-pos="up"]:hover:after, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:after {
+    -moz-transform: translate(-50%, 0);
+    -ms-transform: translate(-50%, 0);
+    -webkit-transform: translate(-50%, 0);
+    transform: translate(-50%, 0); }
+
+  [data-balloon][data-balloon-pos="up"]:hover:before, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:before {
+    -moz-transform: translate(-50%, 0);
+    -ms-transform: translate(-50%, 0);
+    -webkit-transform: translate(-50%, 0);
+    transform: translate(-50%, 0); }
+
+  [data-balloon][data-balloon-pos="up-left"]:after {
+    -moz-transform: translate(0, 10px);
+    -moz-transform-origin: top;
+    -ms-transform: translate(0, 10px);
+    -ms-transform-origin: top;
+    -webkit-transform: translate(0, 10px);
+    -webkit-transform-origin: top;
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 11px;
+    transform: translate(0, 10px);
+    transform-origin: top; }
+
+  [data-balloon][data-balloon-pos="up-left"]:before {
+    -moz-transform: translate(0, 10px);
+    -moz-transform-origin: top;
+    -ms-transform: translate(0, 10px);
+    -ms-transform-origin: top;
+    -webkit-transform: translate(0, 10px);
+    -webkit-transform-origin: top;
+    bottom: 100%;
+    left: 5px;
+    margin-bottom: 5px;
+    transform: translate(0, 10px);
+    transform-origin: top; }
+
+  [data-balloon][data-balloon-pos="up-left"]:hover:after, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:after {
+    -moz-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0); }
+
+  [data-balloon][data-balloon-pos="up-left"]:hover:before, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:before {
+    -moz-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0); }
+
+  [data-balloon][data-balloon-pos="up-right"]:after {
+    -moz-transform: translate(0, 10px);
+    -moz-transform-origin: top;
+    -ms-transform: translate(0, 10px);
+    -ms-transform-origin: top;
+    -webkit-transform: translate(0, 10px);
+    -webkit-transform-origin: top;
+    bottom: 100%;
+    margin-bottom: 11px;
+    right: 0;
+    transform: translate(0, 10px);
+    transform-origin: top; }
+
+  [data-balloon][data-balloon-pos="up-right"]:before {
+    -moz-transform: translate(0, 10px);
+    -moz-transform-origin: top;
+    -ms-transform: translate(0, 10px);
+    -ms-transform-origin: top;
+    -webkit-transform: translate(0, 10px);
+    -webkit-transform-origin: top;
+    bottom: 100%;
+    margin-bottom: 5px;
+    right: 5px;
+    transform: translate(0, 10px);
+    transform-origin: top; }
+
+  [data-balloon][data-balloon-pos="up-right"]:hover:after, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:after {
+    -moz-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0); }
+
+  [data-balloon][data-balloon-pos="up-right"]:hover:before, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:before {
+    -moz-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0); }
+
+  [data-balloon][data-balloon-pos='down']:after {
+    -moz-transform: translate(-50%, -10px);
+    -ms-transform: translate(-50%, -10px);
+    -webkit-transform: translate(-50%, -10px);
+    left: 50%;
+    margin-top: 11px;
+    top: 100%;
+    transform: translate(-50%, -10px); }
+
+  [data-balloon][data-balloon-pos='down']:before {
+    -moz-transform: translate(-50%, -10px);
+    -ms-transform: translate(-50%, -10px);
+    -webkit-transform: translate(-50%, -10px);
+    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
+    background-size: 100% auto;
+    height: 6px;
+    left: 50%;
+    margin-top: 5px;
+    top: 100%;
+    transform: translate(-50%, -10px);
+    width: 18px; }
+
+  [data-balloon][data-balloon-pos='down']:hover:after, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:after {
+    -moz-transform: translate(-50%, 0);
+    -ms-transform: translate(-50%, 0);
+    -webkit-transform: translate(-50%, 0);
+    transform: translate(-50%, 0); }
+
+  [data-balloon][data-balloon-pos='down']:hover:before, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:before {
+    -moz-transform: translate(-50%, 0);
+    -ms-transform: translate(-50%, 0);
+    -webkit-transform: translate(-50%, 0);
+    transform: translate(-50%, 0); }
+
+  [data-balloon][data-balloon-pos='down-left']:after {
+    -moz-transform: translate(0, -10px);
+    -ms-transform: translate(0, -10px);
+    -webkit-transform: translate(0, -10px);
+    left: 0;
+    margin-top: 11px;
+    top: 100%;
+    transform: translate(0, -10px); }
+
+  [data-balloon][data-balloon-pos='down-left']:before {
+    -moz-transform: translate(0, -10px);
+    -ms-transform: translate(0, -10px);
+    -webkit-transform: translate(0, -10px);
+    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
+    background-size: 100% auto;
+    height: 6px;
+    left: 5px;
+    margin-top: 5px;
+    top: 100%;
+    transform: translate(0, -10px);
+    width: 18px; }
+
+  [data-balloon][data-balloon-pos='down-left']:hover:after, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:after {
+    -moz-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0); }
+
+  [data-balloon][data-balloon-pos='down-left']:hover:before, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:before {
+    -moz-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0); }
+
+  [data-balloon][data-balloon-pos='down-right']:after {
+    -moz-transform: translate(0, -10px);
+    -ms-transform: translate(0, -10px);
+    -webkit-transform: translate(0, -10px);
+    margin-top: 11px;
+    right: 0;
+    top: 100%;
+    transform: translate(0, -10px); }
+
+  [data-balloon][data-balloon-pos='down-right']:before {
+    -moz-transform: translate(0, -10px);
+    -ms-transform: translate(0, -10px);
+    -webkit-transform: translate(0, -10px);
+    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
+    background-size: 100% auto;
+    height: 6px;
+    margin-top: 5px;
+    right: 5px;
+    top: 100%;
+    transform: translate(0, -10px);
+    width: 18px; }
+
+  [data-balloon][data-balloon-pos='down-right']:hover:after, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:after {
+    -moz-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0); }
+
+  [data-balloon][data-balloon-pos='down-right']:hover:before, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:before {
+    -moz-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0); }
+
+  [data-balloon][data-balloon-pos='left']:after {
+    -moz-transform: translate(10px, -50%);
+    -ms-transform: translate(10px, -50%);
+    -webkit-transform: translate(10px, -50%);
+    margin-right: 11px;
+    right: 100%;
+    top: 50%;
+    transform: translate(10px, -50%); }
+
+  [data-balloon][data-balloon-pos='left']:before {
+    -moz-transform: translate(10px, -50%);
+    -ms-transform: translate(10px, -50%);
+    -webkit-transform: translate(10px, -50%);
+    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
+    background-size: 100% auto;
+    height: 18px;
+    margin-right: 5px;
+    right: 100%;
+    top: 50%;
+    transform: translate(10px, -50%);
+    width: 6px; }
+
+  [data-balloon][data-balloon-pos='left']:hover:after, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:after {
+    -moz-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    -webkit-transform: translate(0, -50%);
+    transform: translate(0, -50%); }
+
+  [data-balloon][data-balloon-pos='left']:hover:before, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:before {
+    -moz-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    -webkit-transform: translate(0, -50%);
+    transform: translate(0, -50%); }
+
+  [data-balloon][data-balloon-pos='right']:after {
+    -moz-transform: translate(-10px, -50%);
+    -ms-transform: translate(-10px, -50%);
+    -webkit-transform: translate(-10px, -50%);
+    left: 100%;
+    margin-left: 11px;
+    top: 50%;
+    transform: translate(-10px, -50%); }
+
+  [data-balloon][data-balloon-pos='right']:before {
+    -moz-transform: translate(-10px, -50%);
+    -ms-transform: translate(-10px, -50%);
+    -webkit-transform: translate(-10px, -50%);
+    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
+    background-size: 100% auto;
+    height: 18px;
+    left: 100%;
+    margin-left: 5px;
+    top: 50%;
+    transform: translate(-10px, -50%);
+    width: 6px; }
+
+  [data-balloon][data-balloon-pos='right']:hover:after, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:after {
+    -moz-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    -webkit-transform: translate(0, -50%);
+    transform: translate(0, -50%); }
+
+  [data-balloon][data-balloon-pos='right']:hover:before, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:before {
+    -moz-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    -webkit-transform: translate(0, -50%);
+    transform: translate(0, -50%); }
+
+  [data-balloon][data-balloon-length='small']:after {
+    white-space: normal;
+    width: 80px; }
+
+  [data-balloon][data-balloon-length='medium']:after {
+    white-space: normal;
+    width: 150px; }
+
+  [data-balloon][data-balloon-length='large']:after {
+    white-space: normal;
+    width: 260px; }
+
+  [data-balloon][data-balloon-length='xlarge']:after {
+    white-space: normal;
+    width: 380px; }
+
+    @media screen and (max-width: 768px) {
+      [data-balloon][data-balloon-length='xlarge']:after {
+        white-space: normal;
+        width: 90vw; } }
+
+  [data-balloon][data-balloon-length='fit']:after {
+    white-space: normal;
+    width: 100%; }