j1-template 2021.2.5 → 2021.2.6

data/assets/data/translator.html

@@ -64,20 +64,22 @@ exclude_from_search:                    true
 {% comment %} i18n: translations
 -------------------------------------------------------------------------------- {% endcomment %}
 
-{% comment %} Modal translator dialog (default: en-EN)
+{% comment %} Modal Google Translator dialog (default: en-EN)
 -------------------------------------------------------------------------------- {% endcomment %}
 <div id="google-data-en">
   <div id="modal-google-translate-en" class="modal-dialog modal-frame modal-top modal-notify modal-primary" role="document">
     <div class="modal-content">
 
       <div class="modal-header">
-        <p class="lead">{{translate_options.modal_settings.title.en}}</p>
+        <p class="lead">{{translate_options.google.modal_settings.title.en}}</p>
       </div>
 
       <div class="modal-body">
         <div class="modal-body-text" style="font-size: 90%">
-          <p class="mb-3">{{translate_options.modal_settings.body_text.en}}</p>
+          <p class="mb-3">{{translate_options.google.modal_settings.body_text.en}}</p>
         </div>
+        <p style="font-size: 90%">{{translate_options.google.modal_settings.language_selector_title.en}}</p>
+        <div id="dropdownJSON" class="mb-4" style="display:none"></div>
         <p>
           <a href="#google-privacy" data-toggle="collapse" class="">Privacy Notice</a>
           <a href="#google-options" data-toggle="collapse" class="float-right">My Settings</a>
@@ -85,7 +87,7 @@ exclude_from_search:                    true
 
         <div id="google-privacy" class="collapse">
           <div class="modal-body-text" style="font-size: 90%">
-            <p class="mb-4">{{translate_options.modal_settings.privacy_notice.en}}</p>
+            <p class="mb-4">{{translate_options.google.modal_settings.privacy_notice.en}}</p>
           </div>
         </div>
 
@@ -148,16 +150,16 @@ exclude_from_search:                    true
       </div>
 
       <div class="modal-footer">
-        <button id="translator-buttonDoNotAgree" type="button" class="btn btn-link text-decoration-none" style="">
-        No, disable translation
+        <button id="translator-buttonDoNotAgree" type="button" class="btn btn-link text-decoration-none" style="min-width: 20rem">
+        No, skip translation
         </button>
-        <button id="translator-buttonAgree" type="button" class="btn btn-primary btn-raised" style="">
+        <button id="translator-buttonAgree" type="button" class="btn btn-primary btn-raised" style="min-width: 20rem">
         Yes, please translate
         </button>
-        <button id="translator-buttonSave" type="button" class="btn btn-primary" style="display: none;">
+        <button id="translator-buttonSave" type="button" class="btn btn-primary" style="display:none; min-width: 20rem">
         Save selection
         </button>
-        <button id="translator-buttonAgreeAll" type="button" class="btn btn-primary btn-raised" style="display: none;">
+        <button id="translator-buttonAgreeAll" type="button" class="btn btn-primary btn-raised" style="display:none; min-width: 20rem">
         I Agree on all
         </button>
       </div>
@@ -166,21 +168,23 @@ exclude_from_search:                    true
   </div>
 </div>
 
-{% comment %} END Modal translator dialog (en-EN)
+{% comment %} END Modal Google Translator dialog (en-EN)
 -------------------------------------------------------------------------------- {% endcomment %}
 
-{% comment %} Modal translator dialog (de-DE)
+{% comment %} Modal Google Translator dialog (de-DE)
 -------------------------------------------------------------------------------- {% endcomment %}
 <div id="google-data-de">
   <div id="modal-google-translate-de" class="modal-dialog modal-frame modal-top modal-notify modal-primary" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <p class="lead">{{translate_options.modal_settings.title.de}}</p>
+        <p class="lead">{{translate_options.google.modal_settings.title.de}}</p>
       </div>
       <div class="modal-body">
         <div class="modal-body-text" style="font-size: 90%">
-          <p class="mb-4">{{translate_options.modal_settings.body_text.de}}</p>
+          <p class="mb-4">{{translate_options.google.modal_settings.body_text.de}}</p>
         </div>
+        <p style="font-size: 90%">{{translate_options.google.modal_settings.language_selector_title.de}}</p>
+        <div id="dropdownJSON" class="mb-4" style="display:none"></div>
         <p>
           <a href="#google-privacy" data-toggle="collapse" class="">Datenschutzerklärung</a>
           <a href="#google-options" data-toggle="collapse" class="float-right">Meine Einstellungen</a>
@@ -188,7 +192,7 @@ exclude_from_search:                    true
 
         <div id="google-privacy" class="collapse">
           <div class="modal-body-text" style="font-size: 90%">
-            <p class="mb-4">{{translate_options.modal_settings.privacy_notice.de}}</p>
+            <p class="mb-4">{{translate_options.google.modal_settings.privacy_notice.de}}</p>
           </div>
         </div>
 
@@ -261,16 +265,16 @@ exclude_from_search:                    true
       </div>
 
       <div class="modal-footer">
-        <button id="translator-buttonDoNotAgree" type="button" class="btn btn-link text-decoration-none" style="">
-        Nein, bitte Übersetzungen abschalten
+        <button id="translator-buttonDoNotAgree" type="button" class="btn btn-link text-decoration-none" style="min-width: 20rem">
+        Nein, keine Übersetzung
         </button>
-        <button id="translator-buttonAgree" type="button" class="btn btn-primary btn-raised" style="">
+        <button id="translator-buttonAgree" type="button" class="btn btn-primary btn-raised" style="min-width: 20rem">
         Ja, bitte übersetzen
         </button>
-        <button id="translator-buttonSave" type="button" class="btn btn-primary" style="display: none;">
+        <button id="translator-buttonSave" type="button" class="btn btn-primary" style="display:none; min-width: 20rem">
         Auswahl speichern
         </button>
-        <button id="translator-buttonAgreeAll" type="button" class="btn btn-primary btn-raised" style="display: none;">
+        <button id="translator-buttonAgreeAll" type="button" class="btn btn-primary btn-raised" style="display:none; min-width: 20rem">
         Allen zustimmen
         </button>
       </div>
@@ -278,7 +282,7 @@ exclude_from_search:                    true
     </div>
   </div>
 </div>
-{% comment %} END Modal translator dialog (de-DE)
+{% comment %} END Modal Google Translator dialog (de-DE)
 -------------------------------------------------------------------------------- {% endcomment %}
 
 {% endcapture %}

data/assets/themes/j1/adapter/js/translator.js

@@ -109,20 +109,23 @@ j1.adapter['translator'] = (function (j1, window) {
   // ---------------------------------------------------------------------------
   // helper functions
   // ---------------------------------------------------------------------------
+
+  // ---------------------------------------------------------------------------
+  // setCookie()
+  // writes a flat cookie (not using an encoded JSON string)
+  // ---------------------------------------------------------------------------
   function setCookie(options /*cName, cValue, expDays*/) {
-    var defaults = {
+    var defaults = {};
+    var settings;
+
+    defaults = {
         name: '',
         path: '/',
         expires: 0,
         domain: 'localhost'
     };
-    var settings = $.extend(defaults, options);
+    settings = $.extend(defaults, options);
 
-    var date = new Date();
-    date.setTime(date.getTime() + (settings.expires * 24 * 60 * 60 * 1000));
-    const expires = "expires=" + date.toUTCString();
-    // document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
-    // document.cookie = settings.name + "=" + settings.data  + "; " + expires + "; path=/";
     document.cookie = settings.name + "=" + settings.data  + "; path=/";
   };
 
@@ -249,17 +252,18 @@ j1.adapter['translator'] = (function (j1, window) {
           });
 
           j1.translator = new Translator({
-            contentURL:             moduleOptions.contentURL,                   // dialog content (modals) for all supported languages
-            cookieName:             moduleOptions.cookieName,                   // the name of the User State Cookie (primary data)
-            cookieConsentName:      moduleOptions.cookieConsentName,            // the name of the Cookie Consent Cookie (secondary data)
-            dialogContainerID:      moduleOptions.dialogContainerID,            // dest container, the dialog modal is loaded (dynamically)
-            dialogLanguage:         moduleOptions.dialogLanguage,               // language for the dialog (modal)
-            translationLanguage:    translation_language,                       // language for translation
-            translationEnabled:     moduleOptions.translationEnabled,           // run translation enabled|disabled
-            translatorName:         moduleOptions.translatorName,               // translator for translation
-            translationLanguage:    moduleOptions.translationLanguage,          // language for translation
-            xhrDataElement:         moduleOptions.xhrDataElement,               // container for all language-specific dialogs (modals)
-            postSelectionCallback:  function () {j1.adapter.translator.cb()}
+            contentURL:               moduleOptions.contentURL,                 // dialog content (modals) for all supported languages
+            cookieName:               moduleOptions.cookieName,                 // the name of the User State Cookie (primary data)
+            cookieConsentName:        moduleOptions.cookieConsentName,          // the name of the Cookie Consent Cookie (secondary data)
+            disableLanguageSelector:  moduleOptions.disableLanguageSelector,    // disable language dropdown for translation in dialog (modal)
+            dialogContainerID:        moduleOptions.dialogContainerID,          // dest container, the dialog modal is loaded (dynamically)
+            dialogLanguage:           moduleOptions.dialogLanguage,             // language for the dialog (modal)
+            translationLanguage:      moduleOptions.translationLanguage,        // default language for translation
+            translationLanguages:     moduleOptions.google.translationLanguages,// supported languages for translation
+            translationEnabled:       moduleOptions.translationEnabled,         // run translation enabled|disabled
+            translatorName:           moduleOptions.translatorName,             // translator used for translation
+            xhrDataElement:           moduleOptions.xhrDataElement,             // container for all language-specific dialogs (modals)
+            postSelectionCallback:    moduleOptions.google.postSelectionCallback
           });
 
           if (user_consent.analysis && user_consent.personalization && user_translate.translationEnabled) {
@@ -270,9 +274,6 @@ j1.adapter['translator'] = (function (j1, window) {
           } else {
             if (moduleOptions.translatorName === 'google') {
               j1.removeCookie({name: 'googtrans'});
-              // j1.removeCookie({name: 'CONSENT'});
-              // j1.removeCookie({name: 'NID'});
-              // j1.removeCookie({name: 'OTZ'});
            }
           }
 
@@ -328,29 +329,37 @@ j1.adapter['translator'] = (function (j1, window) {
     }, // END getState
 
     // -------------------------------------------------------------------------
-    // cb()
-    // Called by the translator CORE module after the user has
-    // made his selection (callback)
+    // cbGoogle()
+    // Called by the translator CORE module after the user
+    // has made the lanuage selection for translation (callback)
     // -------------------------------------------------------------------------
-    cb: function () {
+    cbGoogle: function () {
       var cookie_names   = j1.getCookieNames();
       var user_state     = j1.readCookie(cookie_names.user_state);
       var user_consent   = j1.readCookie(cookie_names.user_consent);
       var user_translate = j1.readCookie(cookie_names.user_translate);
+      var msDropdownLang = document.getElementById('dropdownJSON').msDropdown;
+      var msDropdown     = document.getElementById('dropdownJSON').msDropdown;
       var head;
       var script;
       var srcLang;
       var destLang;
       var transCode;
       var cookie_written;
+      var htmlScriptElement;
+      var selectedTranslationLanguage;
 
       logger.info('\n' + 'entered post selection callback from google_translate');
       logger.debug('\n' + 'current values from cookie consent: ' + JSON.stringify(user_consent));
       logger.debug('\n' + 'current values from user state: ' + JSON.stringify(user_state));
 
+      selectedTranslationLanguage = msDropdownLang.value;
+      logger.info('\n' + 'selected translation language: ' + selectedTranslationLanguage);
+
       // update cookie consent settings
-      user_consent.analysis = user_translate.analysis;
-      user_consent.personalization = user_translate.personalization;
+      user_consent.analysis         = user_translate.analysis;
+      user_consent.personalization  = user_translate.personalization;
+
       cookie_written = j1.writeCookie({
         name:     cookie_names.user_consent,
         data:     user_consent,
@@ -359,35 +368,13 @@ j1.adapter['translator'] = (function (j1, window) {
         expires:  0
       });
 
+      // translation allowed
       if (user_consent.analysis && user_consent.personalization)  {
-
-        // detect changes on the last element on your page, cause then
-        // you know all elements above is translated.
-        // $('#j1_footer').bind('DOMSubtreeModified', function() {
-        //       var val = $(this);
-        //       var strlang = "" + val[0].innerText + "";
-        //       console.log(strlang); // print your selected language in console
-        // });
-
-        // $('#google_translate_element').bind('DOMSubtreeModified', function() {
-        //     var val = $(this);
-        //     var strlang = "" + val[0].innerText + "";
-        //     console.log(strlang); // print your selected language in console
-        // });
-
-        // remove class dropcap
-//      $('.dropcap').children('span').removeClass('j1-dropcap');
-
-        // remove span dropcap !!!
-//      $('.dropcap').children('span').remove();
-
-        // $('.dropcap').children('span').removeClass('j1-dropcap');
-        // $('.paragraph.dropcap').parent().find('p').removeClass('j1-dropcap');
-
-        head       = document.getElementsByTagName('head')[0];
-        script     = document.createElement('script');
-        script.id  = 'google-translate';
-        script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+        head              = document.getElementsByTagName('head')[0];
+        script            = document.createElement('script');
+        script.id         = 'google-translate';
+        script.src        = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+        htmlScriptElement = document.getElementById(script.id);
 
         if (user_translate.translationEnabled && moduleOptions.translatorName === 'google') {
           head.appendChild(script);
@@ -396,11 +383,12 @@ j1.adapter['translator'] = (function (j1, window) {
             $('google_translate_element').hide();
           }
 
+          // set transCode settings
           srcLang   = "{{site.language}}";
           destLang  = translation_language;
-          transCode = '/' + srcLang + '/' + destLang;
+          transCode = '/' + srcLang + '/' + selectedTranslationLanguage;
 
-          // set language
+          // set the transCode cookie (googtrans)
           setCookie({
             name: 'googtrans',
             data: transCode
@@ -410,9 +398,9 @@ j1.adapter['translator'] = (function (j1, window) {
           if ($('#quickLinksTranslateButton').css('display') === 'none')  {
             $('#quickLinksTranslateButton').css('display', 'block');
           }
+        } else { // translation NOT allowed
 
-        } else {
-
+          // update cookie user translate settings
           user_translate.translationEnabled = false;
           cookie_written = j1.writeCookie({
             name:     cookie_names.user_translate,
@@ -421,31 +409,20 @@ j1.adapter['translator'] = (function (j1, window) {
             secure:   secure
           });
 
-          var el = document.getElementById(script.id);
-
-          if (el) { el.remove(); }
-
-          el = document.getElementById('google_translate_element');
-          if (el) { el.remove(); }
-
+          // stop translation for all pages
+          if (htmlScriptElement) { htmlScriptElement.remove(); }
           j1.removeCookie({name: 'googtrans'});
-          // j1.removeCookie({name: '1P_JAR'});
-          // j1.removeCookie({name: 'CONSENT'});
-          // j1.removeCookie({name: 'NID'});
         }
-
       }
 
+      // translation NOT allowed
       if (!user_translate.analysis || !user_translate.personalization) {
         head       = document.getElementsByTagName('head')[0];
         script     = document.createElement('script');
         script.id  = 'google-translate';
-        // script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
-
-        var el = document.getElementById(script.id);
 
         // update cookie consent settings
-        user_consent.analysis = user_translate.analysis;
+        user_consent.analysis        = user_translate.analysis;
         user_consent.personalization = user_translate.personalization;
         cookie_written = j1.writeCookie({
           name:     cookie_names.user_consent,
@@ -455,6 +432,7 @@ j1.adapter['translator'] = (function (j1, window) {
           expires:  0
         });
 
+        // update cookie user translate settings
         user_translate.translationEnabled = false;
         cookie_written = j1.writeCookie({
           name:     cookie_names.user_translate,
@@ -464,11 +442,8 @@ j1.adapter['translator'] = (function (j1, window) {
           expires:  0
         });
 
-        if (el) { el.remove(); }
-
-        el = document.getElementById('google_translate_element');
-        if (el) { el.remove(); }
-
+        // stop translation for all pages
+        if (htmlScriptElement) { htmlScriptElement.remove(); }
         j1.removeCookie({name: 'googtrans'});
       }
 
@@ -482,7 +457,18 @@ j1.adapter['translator'] = (function (j1, window) {
         $('#quickLinksTranslateButton').css('display', 'none');
       }
 
-    } // END cbCookie
+    }, // END cbGoogle
+
+    // -------------------------------------------------------------------------
+    // cbDeepl()
+    // Called by the translator CORE module after the user
+    // has made the lanuage selection for translation (callback)
+    // -------------------------------------------------------------------------
+    cbDeepl: function () {
+
+      // code for post procession on Deepl translations
+
+    } // END cbDeepl
 
   }; // END return
 })(j1, window);

data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.css

@@ -13,7 +13,7 @@
  # -----------------------------------------------------------------------------
 */
 /*!
- * Bootstrap v4.6.0 (https://getbootstrap.com/)
+ * Bootstrap v4.6.1 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1414,9 +1414,6 @@ pre {
   .form-control::-ms-expand {
     background-color: transparent;
     border: 0; }
-  .form-control:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 #495057; }
   .form-control:focus {
     color: #495057;
     background-color: #fff;
@@ -1436,6 +1433,10 @@ input[type="datetime-local"].form-control,
 input[type="month"].form-control {
   appearance: none; }
 
+select.form-control:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #495057; }
+
 select.form-control:focus::-ms-value {
   color: #495057;
   background-color: #fff; }
@@ -1576,7 +1577,7 @@ textarea.form-control {
 
 .was-validated .form-control:valid, .form-control.is-valid {
   border-color: #28a745;
-  padding-right: calc(1.5em + 0.75rem);
+  padding-right: calc(1.5em + 0.75rem) !important;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
@@ -1585,13 +1586,17 @@ textarea.form-control {
     border-color: #28a745;
     box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); }
 
+.was-validated select.form-control:valid, select.form-control.is-valid {
+  padding-right: 3rem !important;
+  background-position: right 1.5rem center; }
+
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
   padding-right: calc(1.5em + 0.75rem);
   background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); }
 
 .was-validated .custom-select:valid, .custom-select.is-valid {
   border-color: #28a745;
-  padding-right: calc(0.75em + 2.3125rem);
+  padding-right: calc(0.75em + 2.3125rem) !important;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
   .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
     border-color: #28a745;
@@ -1660,7 +1665,7 @@ textarea.form-control {
 
 .was-validated .form-control:invalid, .form-control.is-invalid {
   border-color: #dc3545;
-  padding-right: calc(1.5em + 0.75rem);
+  padding-right: calc(1.5em + 0.75rem) !important;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
@@ -1669,13 +1674,17 @@ textarea.form-control {
     border-color: #dc3545;
     box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
 
+.was-validated select.form-control:invalid, select.form-control.is-invalid {
+  padding-right: 3rem !important;
+  background-position: right 1.5rem center; }
+
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
   padding-right: calc(1.5em + 0.75rem);
   background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); }
 
 .was-validated .custom-select:invalid, .custom-select.is-invalid {
   border-color: #dc3545;
-  padding-right: calc(0.75em + 2.3125rem);
+  padding-right: calc(0.75em + 2.3125rem) !important;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
   .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
     border-color: #dc3545;
@@ -2551,16 +2560,21 @@ input[type="button"].btn-block {
     display: flex;
     align-items: center; }
     .input-group > .custom-file:not(:last-child) .custom-file-label,
+    .input-group > .custom-file:not(:last-child) .custom-file-label::after {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0; }
     .input-group > .custom-file:not(:first-child) .custom-file-label {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0; }
   .input-group:not(.has-validation) > .form-control:not(:last-child),
   .input-group:not(.has-validation) > .custom-select:not(:last-child),
+  .input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label,
   .input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0; }
   .input-group.has-validation > .form-control:nth-last-child(n + 3),
   .input-group.has-validation > .custom-select:nth-last-child(n + 3),
+  .input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label,
   .input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0; }
@@ -4581,8 +4595,11 @@ a.close.disabled {
   align-items: center;
   justify-content: center;
   width: 15%;
+  padding: 0;
   color: #fff;
   text-align: center;
+  background: none;
+  border: 0;
   opacity: 0.5;
   transition: opacity 0.15s ease; }
   @media (prefers-reduced-motion: reduce) {
@@ -4668,7 +4685,7 @@ a.close.disabled {
   display: inline-block;
   width: 2rem;
   height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
   border: 0.25em solid currentColor;
   border-right-color: transparent;
   border-radius: 50%;
@@ -4690,7 +4707,7 @@ a.close.disabled {
   display: inline-block;
   width: 2rem;
   height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
   background-color: currentColor;
   border-radius: 50%;
   opacity: 0;
@@ -7158,8 +7175,6 @@ a.text-dark:hover, a.text-dark:focus {
   blockquote {
     border: 1px solid #adb5bd;
     page-break-inside: avoid; }
-  thead {
-    display: table-header-group; }
   tr,
   img {
     page-break-inside: avoid; }