' +
- '
' + file.mime.split('/')[1] + '
' +
- '' +
- '
' +
- '';
- }
-
+
// Insert file element in appropriate order
- var $file = $(fileHtml);
- if (index >= that.$files.children().length) {
- $file.appendTo(that.$files);
+ const $file = $(fileHtml);
+
+ this.$add.toggleClass('hidden', isProvider);
+
+ if (updateFileId) {
+ this.updateId = undefined;
+ this.updateIndex = undefined;
+ const oldFile = filesContainer.find(`#${updateFileId}`);
+ index = oldFile.index();
+ oldFile.remove();
+ $file.insertBefore(filesContainer.children().eq(index));
}
else {
- $file.insertBefore(that.$files.children().eq(index));
+ $file.prependTo(filesContainer);
}
this.$add.parent().find('.h5p-copyright-button').removeClass('hidden');
- // Handle thumbnail click
+ const boxEl = $file.find('.h5p-dnd__box').get(0);
+ const blockEl = $file.find('.h5p-dnd__box__block').get(0);
+
+ // Handle drag and drop
+ this.addDragAndDropListeners(boxEl, blockEl, true);
+
+ // Handle space/enter on frame/box
+ boxEl.addEventListener('keydown', (e) => {
+ if (!isProvider && e.target?.nodeName !== 'INPUT') {
+ if ((e.code === 'Space' || e.code === 'Enter')) {
+ this.openFileSelector({
+ onChangeCallback: () => {
+ this.updateIndex = index;
+ this.updateId = boxEl.attr('id');
+ this.handleUploadProgress(boxEl);
+ },
+ context: {
+ updateId: boxEl.attr('id'),
+ updateIndex: index
+ }
+ });
+ }
+ }
+ });
+
+ // Handle delete file
$file
- .children('.h5p-thumbnail')
- .click(function () {
- if (!that.$add.is(':visible')) {
- return; // Do not allow editing of file while uploading
+ .find('.h5p-delete-image-button')
+ .on('click', (e) => {
+ e.preventDefault();
+ confirmRemovalDialog.show($file.offset().top);
+ });
+
+ // Handle click on thumbnail
+ $file
+ .find('.h5p-dnd__video-container')
+ .click(() => {
+ if (!isProvider) {
+ this.openFileSelector({
+ onChangeCallback: () => {
+ this.updateIndex = index;
+ this.updateId = $file.attr('id');
+ let current = filesContainer.find(`#${this.updateId}`).get(0);
+ this.handleUploadProgress(current);
+ },
+ context: {
+ updateId: $file.attr('id'),
+ updateIndex: index
+ }
+ });
}
- that.$addDialog.addClass('h5p-open').find('.h5p-file-url').val(that.params[index].path);
- that.updateIndex = index;
});
// Handle remove button click
@@ -410,7 +729,7 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
});
// Create remove file dialog
- var confirmRemovalDialog = new H5P.ConfirmationDialog({
+ const confirmRemovalDialog = new H5P.ConfirmationDialog({
headerText: H5PEditor.t('core', 'removeFile'),
dialogText: H5PEditor.t('core', 'confirmRemoval', {':type': 'file'})
}).appendTo(document.body);
@@ -418,7 +737,7 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
// Remove file on confirmation
confirmRemovalDialog.on('confirmed', function () {
that.removeFileWithElement($file);
- if (that.$files.children().length === 0) {
+ if (filesContainer.children().length === 0) {
that.$add.parent().find('.h5p-copyright-button').addClass('hidden');
}
});
@@ -430,36 +749,61 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
* @param {number} $file File element
*/
C.prototype.removeFileWithElement = function ($file) {
- var index = $file.index();
+ const avTabPanel = this.$dialogTable.find('.av-tabpanel:not([hidden])');
+ const filesContainer = avTabPanel.children('.h5p-dnd__av-container');
+ const filesContainerId = filesContainer.attr('id') === 'urlFiles' ? true : false;
+ const urlInputHasValue = filesContainerId ? filesContainer.get(0).querySelector('.input-video').value : '';
- // Remove from params.
if (this.params.length === 1) {
+ // Remove from params.
delete this.params;
this.setValue(this.field);
+ avTabPanel.removeClass('has_content');
}
else {
+ const index = $file.index();
this.params.splice(index, 1);
+ this.setValue(this.field, this.params);
}
$file.remove();
this.$add.removeClass('hidden');
+ if (filesContainerId && urlInputHasValue !== '') {
+ this.updatePasteBox(false);
+ this.$videoUrlErrorContainer.addClass('hidden');
+ }
// Notify change listeners
- for (var i = 0; i < this.changes.length; i++) {
+ for (let i = 0; i < this.changes.length; i++) {
this.changes[i]();
}
};
+ C.prototype.updatePasteBox = function (isReplace) {
+ const filesContainer = this.$dialogTable.find('.av-tabpanel:not([hidden])').children('.h5p-dnd__av-container');
+ const pasteBoxEl = filesContainer.get(0).querySelector('.h5p-dnd__box__video-paste');
+ const inputEl = pasteBoxEl.querySelector('.input-video');
+ const btnEl = pasteBoxEl.querySelector('.h5p-dnd__btn__insert-url');
+
+ btnEl.innerText = isReplace ? H5PEditor.t('core', 'replaceUrl') : H5PEditor.t('core', 'insertUrl');
+ inputEl.value = isReplace ? inputEl.value : "";
+ }
+
+ /**
+ * Add new url to Url container
+ *
+ * @param {string} url new url
+ */
C.prototype.useUrl = function (url) {
if (this.params === undefined) {
this.params = [];
this.setValue(this.field, this.params);
}
- var mime;
- var aspectRatio;
- var i;
- var matches = url.match(/\.(webm|mp4|ogv|m4a|mp3|ogg|oga|wav)/i);
+ let mime;
+ let aspectRatio;
+ let i;
+ const matches = url.match(/\.(webm|mp4|ogv|m4a|mp3|ogg|oga|wav)/i);
if (matches !== null) {
mime = matches[matches.length - 1];
}
@@ -472,14 +816,18 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
}
}
- var file = {
+ const file = {
+ id: H5P.createUUID(),
path: url,
mime: this.field.type + '/' + (mime ? mime : 'unknown'),
copyright: this.copyright,
aspectRatio: aspectRatio ? aspectRatio : undefined,
+ tabIndex: C.TABS.INPUT,
};
- var index = (this.updateIndex !== undefined ? this.updateIndex : this.params.length);
- this.params[index] = file;
+
+ this.params.push(file);
+ this.setValue(this.field, this.params);
+ index = this.params.findIndex(param => param.id === file.id);
this.addFile(index);
for (i = 0; i < this.changes.length; i++) {
@@ -487,6 +835,67 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
}
};
+ /**
+ * Replace the file in the Url container
+ *
+ * @param {string} url New file url
+ */
+ C.prototype.replaceUrl = function (url) {
+ let mime;
+ let aspectRatio;
+ const matches = url.match(/\.(webm|mp4|ogv|m4a|mp3|ogg|oga|wav)/i);
+ if (matches !== null) {
+ mime = matches[matches.length - 1];
+ }
+ else {
+ // Try to find a provider
+ const provider = C.findProvider(url);
+ if (provider) {
+ mime = provider.name;
+ aspectRatio = provider.aspectRatio;
+ }
+ }
+
+ const index = this.params.findIndex(param => C.findProvider(param.path));
+
+ const file = {
+ id: this.params[index].id,
+ path: url,
+ mime: this.field.type + '/' + (mime ? mime : 'unknown'),
+ copyright: this.copyright,
+ aspectRatio: aspectRatio ? aspectRatio : undefined,
+ tabIndex: C.TABS.INPUT,
+ };
+
+ this.params[index] = file;
+ this.setValue(this.field, this.params);
+
+ const mimeType = file.mime.split('/')[1];
+ const videoText = C.providers.map(p => p.name).includes(mimeType) ? mimeType : `.${mimeType.toUpperCase()}`;
+
+ // Simulating loading to give some feedback to user since this is actually instant.
+ const urlFilesContainer = this.$dialogTable.find('#urlFiles');
+ const boxEl = urlFilesContainer.get(0).querySelector('.h5p-dnd__videobox-wrapper--is-provider .h5p-dnd__box');
+ const videoOverlayEl = boxEl.querySelector('.h5p-dnd__video-overlay');
+
+ videoOverlayEl.innerHTML = `
+
+ ${videoText}
+ `;
+
+ this.handleUploadProgress(boxEl);
+ setTimeout(() => {
+ this.handleUploadComplete(boxEl)
+ }, 500);
+ }
+
+ C.prototype.getInputUrlFile = function () {
+ if (this.params && this.params.length) {
+ return this.params.filter(param => C.isProvider(param.mimeType) !== 'undefined'); // Should only give one result
+ }
+ return null;
+ }
+
/**
* Validate the field/widget.
*
@@ -558,14 +967,9 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
* @param {boolean} hasDescription
* @returns {string} HTML
*/
- C.createInsertDialog = function (content, disableInsert, id, hasDescription) {
- return '' +
- '' +
- '';
};
@@ -578,22 +982,76 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
*/
C.createTabContent = function (tab, type) {
const isAudio = (type === 'audio');
-
+ const firstFile = Array.isArray(this.params) ? this.params[0] : undefined;
+ const isProvider = firstFile?.path && C.findProvider(firstFile.path);
+ const copyPasteString = `${ns.t('core', 'ctrlKey')}${ns.t('core', 'commandKey')} + ${ns.t('core', 'pasteKey')}`;
+ const dragCopyPasteString = ns.t('core', isAudio ? 'dragAndDropAndPasteAudio' : 'dragAndDropAndPasteVideo', { ':keyCombination': copyPasteString });
+
switch (tab) {
case 'BasicFileUpload':
- const id = 'av-upload-' + C.getNextId();
- return '
' + content + '
' +
- '' +
+ C.createInsertDialog = function (content) {
+ return '' +
+ '
' + content + '
' +
'' + H5PEditor.t('core', isAudio ? 'uploadAudioTitle' : 'uploadVideoTitle') + '
' + - '' +
- '' +
- '
';
+ return `
+
+
+
+ `;
case 'InputLinkURL':
- return '
+
+
+
+
+
+
+
+ ${isAudio ? H5PEditor.t('core', 'dropAudio') : H5PEditor.t('core', 'dropVideo')}
+
+
+ ' + H5PEditor.t('core', isAudio ? 'enterAudioTitle' : 'enterVideoTitle') + '
' + - '' +
- '' +
- '
' +
- (isAudio ? '' : '' + H5PEditor.t('core', 'addVideoDescription') + '
');
-
+ return `
+
+
+
+ `;
default:
return '';
}
@@ -607,60 +1065,53 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
* @param {Array} extraTabs
* @returns {string} HTML
*/
- C.createTabbedAdd = function (type, extraTabs, id, hasDescription) {
+ C.createTabbedAdd = function (type, extraTabs) {
let i;
const tabs = [
'BasicFileUpload',
'InputLinkURL'
];
- for (i = 0; i < extraTabs.length; i++) {
- tabs.push(extraTabs[i]);
+
+ // Add when adding record audio
+ if (extraTabs && extraTabs.length > 0) {
+ for (i = 0; i < extraTabs.length; i++) {
+ tabs.push(extraTabs[i]);
+ }
}
let tabsHTML = '';
let tabpanelsHTML = '';
for (i = 0; i < tabs.length; i++) {
+ let title = '';
const tab = tabs[i];
const tabId = C.getNextId();
const tabindex = (i === 0 ? 0 : -1)
const selected = (i === 0 ? 'true' : 'false');
- const title = (i > 1 ? H5PEditor.t('H5PEditor.' + tab, 'title') : H5PEditor.t('core', 'tabTitle' + tab));
- tabsHTML += '
+
+
+
+
+
+
+
+
+
+
+ ${!isAudio ? `
+
+
+ `: ''}
+
+ ${H5PEditor.t('core', 'supportedVideoFormats')}
+
+ ' + title + '
';
+ switch (tab) {
+ case 'BasicFileUpload':
+ title = H5PEditor.t('core', 'fileUploadTitle');
+ tabsHTML +='' + title + '
';
+ break;
+ case 'InputLinkURL':
+ title = H5PEditor.t('core', 'insertLinkTitle');
+ tabsHTML +='' + title + '
';
+ break;
+ case 'AudioRecorder':
+ title = H5PEditor.t('core', 'recordAudioTitle');
+ tabsHTML +='' + title + '
';
+ break;
+ default:
+ title = H5PEditor.t('H5PEditor.' + tab, 'title')
+ break;
+ }
tabpanelsHTML += '' + C.createTabContent(tab, type) + '
';
}
return C.createInsertDialog(
- '' + tabsHTML + '
' + tabpanelsHTML,
- true, id, hasDescription
- );
- };
-
- /**
- * Creates the HTML for the basic 'Upload or URL' dialog.
- *
- * @param {string} type 'video' or 'audio'
- * @param {string} id
- * @param {boolean} hasDescription
- * @returns {string} HTML
- */
- C.createAdd = function (type, id, hasDescription) {
- return C.createInsertDialog(
- '' +
- C.createTabContent('BasicFileUpload', type) +
- '
' +
- '' +
- '' +
- '
' +
- '' +
- '
' +
- '' + H5PEditor.t('core', 'or') + '
' +
- '' +
- C.createTabContent('InputLinkURL', type) +
- '
',
- false, id, hasDescription
+ '' + tabsHTML + '
' + tabpanelsHTML
);
};
@@ -685,9 +1136,9 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
aspectRatio: '16:9',
},
{
- name: 'Echo360',
- regexp: /^[^\/]+:\/\/(echo360[^\/]+)\/media\/([^\/]+)\/h5p.*$/i,
- aspectRatio: '16:9',
+ name: 'Echo360',
+ regexp: /^[^\/]+:\/\/(echo360[^\/]+)\/media\/([^\/]+)\/h5p.*$/i,
+ aspectRatio: '16:9',
},
];
@@ -716,5 +1167,17 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
return idCounter++;
};
+ C.STATE = {
+ NO_IMAGE: 'NO_IMAGE',
+ UPLOADING: 'UPLOADING',
+ HAS_IMAGE: 'HAS_IMAGE'
+ };
+
+ // Tabs that are hard-coded into this widget. Any other tab must be an extension.
+ C.TABS = {
+ UPLOAD: 0,
+ INPUT: 1
+ };
+
return C;
})(H5P.jQuery);
diff --git a/scripts/h5peditor-file-uploader.js b/scripts/h5peditor-file-uploader.js
index 3953e4f6..846058dc 100644
--- a/scripts/h5peditor-file-uploader.js
+++ b/scripts/h5peditor-file-uploader.js
@@ -19,7 +19,7 @@ H5PEditor.FileUploader = (function ($, EventDispatcher) {
* @param {Blob|File} file
* @param {string} filename Required due to validation
*/
- self.upload = function (file, filename) {
+ self.upload = function (file, filename, context = {}) {
var formData = new FormData();
formData.append('file', file, filename);
formData.append('field', JSON.stringify(field));
@@ -29,12 +29,16 @@ H5PEditor.FileUploader = (function ($, EventDispatcher) {
var request = new XMLHttpRequest();
request.upload.onprogress = function (e) {
if (e.lengthComputable) {
- self.trigger('uploadProgress', (e.loaded / e.total));
+ self.trigger('uploadProgress', {
+ ...context,
+ progress: (e.loaded / e.total)
+ });
}
};
request.onload = function () {
var result;
var uploadComplete = {
+ ...context,
error: null,
data: null
};
@@ -77,22 +81,25 @@ H5PEditor.FileUploader = (function ($, EventDispatcher) {
*
* @param {File[]} files
*/
- self.uploadFiles = function (files) {
- self.upload(files[0], files[0].name);
+ self.uploadFiles = function (files, context = {}) {
+ self.upload(files[0], files[0].name, context);
};
/**
* Open the file selector and trigger upload upon selecting file.
*/
- self.openFileSelector = function () {
+ self.openFileSelector = function ({ onChangeCallback, context } = {}) {
// Create a file selector
const input = document.createElement('input');
input.type = 'file';
input.setAttribute('accept', determineAllowedMimeTypes());
input.style='display:none';
input.addEventListener('change', function () {
+ if (typeof onChangeCallback === 'function') {
+ onChangeCallback();
+ }
// When files are selected, upload them
- self.uploadFiles(this.files);
+ self.uploadFiles(this.files, context);
document.body.removeChild(input);
});
diff --git a/scripts/h5peditor-file.js b/scripts/h5peditor-file.js
index 92288119..43f8d98a 100644
--- a/scripts/h5peditor-file.js
+++ b/scripts/h5peditor-file.js
@@ -59,6 +59,9 @@ ns.File = function (parent, field, params, setValue) {
// Monitor upload progress
self.on('uploadProgress', function (e) {
+ if (typeof self.handleUploadProgress === 'function') {
+ self.handleUploadProgress(Math.round(e.data.progress*100));
+ }
self.$file.children().html(ns.t('core', 'uploading') + ' ' + Math.round(e.data * 100) + ' %');
});
@@ -78,18 +81,17 @@ ns.File = function (parent, field, params, setValue) {
// Make it possible for other widgets to process the result
self.trigger('fileUploaded', result.data);
-
+
self.setValue(self.field, self.params);
for (var i = 0; i < self.changes.length; i++) {
self.changes[i](self.params);
}
+ self.addFile();
}
catch (error) {
- self.$errors.append(ns.createError(error));
+ this.setErrorMessage(error);
}
-
- self.addFile();
});
};
@@ -115,6 +117,7 @@ ns.File.prototype.appendTo = function ($wrapper) {
var html = ns.createFieldMarkup(this.field, fileHtml, this.id);
var $container = ns.$(html).appendTo($wrapper);
+ this.$container = $container;
this.$copyrightButton = $container.find('.h5p-copyright-button');
this.$file = $container.find('.file');
this.$errors = $container.find('.h5p-errors');
diff --git a/scripts/h5peditor-image.js b/scripts/h5peditor-image.js
index 9bc0d980..c7d71f04 100644
--- a/scripts/h5peditor-image.js
+++ b/scripts/h5peditor-image.js
@@ -22,6 +22,8 @@ ns.widgets.image = function (parent, field, params, setValue) {
this.setValue = setValue;
this.library = parent.library + '/' + field.name;
this.id = ns.getNextFieldId(field);
+ this.previousState = typeof params === 'undefined' ? this.STATE.NO_IMAGE : this.STATE.HAS_IMAGE;
+ this.previousParams = params;
if (params !== undefined) {
this.copyright = params.copyright;
@@ -41,13 +43,25 @@ ns.widgets.image = function (parent, field, params, setValue) {
this.confirmationDialog = new H5P.ConfirmationDialog({
headerText: H5PEditor.t('core', 'removeImage'),
- bodyText: H5PEditor.t('core', 'confirmImageRemoval')
- });
+ dialogText: H5PEditor.t('core', 'confirmImageRemoval')
+ }).appendTo(document.body);
this.confirmationDialog.on('confirmed', function () {
+ self.boxEl.classList.remove('h5p-dnd__box--has-image', 'h5p-dnd__box--is-inline');
+ self.previousState = self.STATE.NO_IMAGE;
self.removeImage();
});
+ this.replaceCallback = () => {};
+ this.confirmReplaceDialog = new H5P.ConfirmationDialog({
+ headerText: H5PEditor.t('core', 'replaceImage'),
+ dialogText: H5PEditor.t('core', 'confirmReplaceImage')
+ }).appendTo(document.body);
+
+ this.confirmReplaceDialog.on('confirmed', function () {
+ self.replaceCallback();
+ });
+
// When uploading starts
self.on('upload', function () {
// Hide edit image button
@@ -56,10 +70,11 @@ ns.widgets.image = function (parent, field, params, setValue) {
// When a new file has been uploaded
self.on('fileUploaded', function (event) {
+ self.boxContainerEl.classList.remove('has-error');
// Uploaded new original image
if (self.isOriginalImage) {
delete self.params.originalImage;
- self.editImagePopup.mime = self.params.mime
+ self.editImagePopup.mime = self.params.mime;
}
// Store width and height
@@ -69,6 +84,12 @@ ns.widgets.image = function (parent, field, params, setValue) {
// Show edit image button
self.$editImage.removeClass('hidden');
self.isEditing = false;
+
+ window.requestAnimationFrame(() => {
+ this.$container.get(0)
+ .querySelector('.h5p-editing-image-button')
+ .focus({focusVisible: true});
+ });
});
};
@@ -83,31 +104,41 @@ ns.widgets.image.prototype.constructor = ns.widgets.image;
ns.widgets.image.prototype.appendTo = function ($wrapper) {
var self = this;
- var htmlString = '' +
- '' +
- '';
+ this.$container = ns.$(html).appendTo($wrapper);
+ this.$imageDropContainer = this.$container.find('.h5p-dnd__container');
+ this.boxEl = this.$container.find(".h5p-dnd__box").get(0);
+ this.boxContainerEl = this.$container.find('.h5p-dnd__container').get(0);
- var html = ns.createFieldMarkup(this.field, htmlString, this.id);
+ this.ariaLiveEl = this.$container.find('.h5p-sr-only').get(0);
- var $container = ns.$(html).appendTo($wrapper);
- this.$item = $container;
- this.$editImage = $container.find('.h5p-editing-image-button');
- this.$copyrightButton = $container.find('.h5p-copyright-button');
- this.$file = $container.find('.file');
- this.$errors = $container.find('.h5p-errors');
+ this.addDragAndDropListeners();
+
+ this.$editImage = this.$container.find('.h5p-editing-image-button');
+ this.$copyrightButton = this.$container.find('.h5p-copyright-button');
+ this.$file = this.$container.find('.file');
+
+ this.$errors = this.$container.find('.h5p-errors');
this.addFile();
- var $dialog = $container.find('.h5p-editor-dialog');
- $container.find('.h5p-copyright-button').add($dialog.find('.h5p-close')).click(function () {
+ const $dialog = this.$container.find('.h5p-editor-dialog');
+
+ this.$container.parent().on('click', '.h5p-copyright-button, .h5p-editor-dialog .h5p-close', () => {
$dialog.toggleClass('h5p-open');
return false;
});
@@ -133,6 +164,7 @@ ns.widgets.image.prototype.appendTo = function ($wrapper) {
const filenameparts = self.params.path.match(/([^\/]+)\.([^#]+)/);
+ self.removeImage();
// Upload new image
self.upload(e.data, filenameparts[1] + '-edit.' + filenameparts[2]);
});
@@ -150,7 +182,7 @@ ns.widgets.image.prototype.appendTo = function ($wrapper) {
self.$editImage.removeClass('loading');
});
- $container.find('.h5p-editing-image-button').click(function (event) {
+ this.$container.on('click', '.edit', function (event) {
if (self.params && self.params.path) {
var imageSrc;
if (!self.isEditing) {
@@ -164,6 +196,55 @@ ns.widgets.image.prototype.appendTo = function ($wrapper) {
}
});
+ this.$container.on('click', '.h5p-dnd__btn__upload', (event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ this.isOriginalImage = true;
+ this.openFileSelector();
+ });
+
+ document.addEventListener('paste', (e) => {
+ if (document.activeElement.closest('.h5p-dnd__box') === this.boxEl) {
+ if (e.clipboardData.files.length === 0) {
+ this.boxContainerEl.classList.add("has-error");
+ this.$container.find('.h5p-errors').text(ns.t('core', 'onlyPasteImageFiles'));
+ this.setAriaLiveErrorMessage(ns.t('core', 'onlyPasteImageFiles'));
+ } else {
+ this.uploadOrReplaceImage(e.clipboardData.files);
+ }
+ }
+ });
+
+ this.boxEl.addEventListener('keydown', (e) => {
+ if (this.boxEl.classList.contains('h5p-dnd__box--has-image')) {
+ if ((e.code === 'Space' || e.code === 'Enter')) {
+ this.isOriginalImage = true;
+ this.openFileSelector({
+ onChangeCallback: () => {
+ this.removeImage();
+ }
+ });
+ }
+ }
+ });
+
+ this.boxEl.addEventListener('click', (e) => {
+ e.preventDefault();
+ const imageContainerEl = this.boxEl.querySelector('.h5p-dnd__img__container');
+
+ // Only trigger file selector when we have an image and the user is actually clicking on the
+ // image (not the frame around).
+ if (this.boxEl.classList.contains('h5p-dnd__box--has-image')
+ && e.target.closest('.h5p-dnd__img__container') === imageContainerEl) {
+ this.isOriginalImage = true;
+ this.openFileSelector({
+ onChangeCallback: () => {
+ this.removeImage();
+ }
+ });
+ }
+ });
+
ns.File.addCopyright(self, $dialog, function (field, value) {
if (self.params !== undefined) {
self.params.copyright = value;
@@ -173,88 +254,249 @@ ns.widgets.image.prototype.appendTo = function ($wrapper) {
};
+/**
+ * Displays the error message to the user.
+ *
+ * @param {string} message
+ */
+ns.widgets.image.prototype.setErrorMessage = function (message) {
+ if (this.previousState === this.STATE.HAS_IMAGE) {
+ this.params = this.previousParams;
+ this.addFile();
+ } else {
+ this.removeImage();
+ }
+
+ this.setAriaLiveErrorMessage(message);
+ this.boxContainerEl.classList.add('has-error');
+ this.$container.find('.h5p-errors').text(message);
+};
+
+ns.widgets.image.prototype.setAriaLiveErrorMessage = function (message) {
+ this.ariaLiveEl.innerText = message;
+ // Note: Should last long enough for the screen reader to read the text above.
+ setTimeout(() => {
+ this.ariaLiveEl.innerText = "";
+ }, 5000);
+};
/**
- * Sync copyright.
+ * Will either upload or replace (and upload) an image.
+ *
+ * @param {FileList} files
*/
-ns.widgets.image.prototype.setCopyright = function (value) {
- this.copyright = this.params.copyright = value;
+ns.widgets.image.prototype.uploadOrReplaceImage = function (files) {
+ if (typeof this.params !== 'undefined') {
+ // Need to make a copy of the file since Firefox loses the reference to it during the confirm replace dialog.
+ const filesBackup = [new File([files[0]], files[0].name, { type: files[0].type })];
+ this.replaceCallback = () => {
+ this.removeImage();
+ this.uploadFile(filesBackup);
+ };
+ this.previousState = this.STATE.HAS_IMAGE;
+ this.previousParams = this.params;
+ this.confirmReplaceDialog.show(this.$imageDropContainer.offset().top);
+ } else {
+ this.previousState = this.STATE.NO_IMAGE;
+ this.previousParams = null;
+ this.uploadFile(files);
+ }
};
+/**
+ * Add drag and drop listeners to the appropriate DOM elements.
+ */
+ns.widgets.image.prototype.addDragAndDropListeners = function () {
+ const boundedHandleDnD = this.handleDragAndDrop.bind(this);
+
+ this.dropBlockEl = this.boxEl.querySelector('.h5p-dnd__box__block');
+ this.boxEl.addEventListener('dragenter', boundedHandleDnD);
+ this.dropBlockEl.addEventListener('dragover', boundedHandleDnD);
+ this.dropBlockEl.addEventListener('dragend', boundedHandleDnD);
+ this.dropBlockEl.addEventListener('dragleave', boundedHandleDnD);
+ this.dropBlockEl.addEventListener('drop', boundedHandleDnD);
+};
/**
- * Creates thumbnail HTML and actions.
+ * Upload the first file in the FileList.
+ * @todo: handle multiple files?
*
- * @returns {boolean} True if file was added, false if file was removed
+ * @param {FileList} files
*/
-ns.widgets.image.prototype.addFile = function () {
- var that = this;
+ns.widgets.image.prototype.uploadFile = function (files) {
+ if (files.length > 0) {
+ this.upload(files[0], files[0].name);
+ }
+};
- if (this.params === undefined) {
+/**
+ * Handle drag and drop events. Will apply the correct css classes (styling)
+ * depending on event type and will handle uploading if the user drops the file.
+ *
+ * @param {Event} e
+ */
+ns.widgets.image.prototype.handleDragAndDrop = function (e) {
+ e.preventDefault();
+ e.stopPropagation();
- // No image look
- let html = '' +
- '' + ns.t('core', 'add') + '
' +
- ''
-
- this.$file
- .html(html)
- .children('.add')
- .click(function () {
- that.isOriginalImage = true;
- that.openFileSelector();
- return false;
- });
+ const container = e.target.closest('.h5p-dnd__container');
+ const boxBlock = container.querySelector('.h5p-dnd__box__block');
- // Remove edit image button
- this.$editImage.addClass('hidden');
- this.$copyrightButton.addClass('hidden');
- this.isEditing = false;
+ if (e.type === 'dragenter') {
+ this.boxEl.classList.add('h5p-dnd__box--is-dragging')
+ }
+ else if (e.type === 'dragend' || (e.type === 'dragleave' && boxBlock === e.target)) {
+ this.boxEl.classList.remove('h5p-dnd__box--is-dragging');
+ }
+ else if (e.type === 'drop') {
+ this.boxEl.classList.remove('h5p-dnd__box--is-dragging');
+ this.uploadOrReplaceImage(e.dataTransfer.files);
+ }
+};
- return false;
+/**
+ * Generates the HTML for the NO_IMAGE state.
+ *
+ * @returns string The HTML for the NO_IMAGE state
+ */
+ns.widgets.image.prototype.getBaseMarkup = function () {
+ const copyPasteString = `${ns.t('core', 'ctrlKey')}${ns.t('core', 'commandKey')} + ${ns.t('core', 'pasteKey')}`;
+ const dragCopyPasteString = ns.t('core', 'dragAndDropAndPasteImage', { ':keyCombination': copyPasteString });
+ return `
+
+
+
+
+
+
+
+ `
+};
+
+/**
+ * Generates the HTML for the UPLOADING state.
+ * @returns string The HTML for the UPLOADING state
+ */
+ns.widgets.image.prototype.getUploadingMarkup = function () {
+ return `
+
+ ${ns.t('core', 'dropImage')}
+
+
+
+ `;
+};
+
+/**
+ * Generates the HTML for the HAS_IMAGE state.
+ * @returns string The HTML for the HAS_IMAGE state
+ */
+ns.widgets.image.prototype.getUploadedMarkup = function () {
+ const source = H5P.getPath(this.params.path, H5PEditor.contentId);
+ const altText = (this.field.label === undefined ? '' : this.field.label);
+
+ return `
+
+
+
+
+
+
+
+
+ 
+
+
+
+ `;
+};
+
+/**
+ * Generates the HTML for the HAS_IMAGE state. This is an extra function needed
+ * as this HTML will be placed in a different place than the HTML from getUploadedMarkup().
+ * @returns string The HTML for the HAS_IMAGE state
+ */
+ns.widgets.image.prototype.getImageActionMarkup = function () {
+ return `
+
+
+ ${ns.t('core', 'dragAndDropAndPasteReplaceImage')}
+
+
+
+
+
+
+ `;
+};
+
+/**
+ *
+ * @param {number} progress 0-100 the progress of uploading the image
+ */
+ns.widgets.image.prototype.handleUploadProgress = function (progress) {
+ // @todo: want to use progress for something?
+
+ // Since this function is called multiple times during upload we only want to trigger
+ // the render of the uploading markup once.
+ if (this.boxContainerEl.querySelector('.h5p-loader__wrapper') === null) {
+ this.setAriaLiveErrorMessage(ns.t('core', 'uploadingImage'));
+
+ this.boxEl.innerHTML = this.getUploadingMarkup();
+ this.boxEl.classList.add('h5p-dnd__box--is-uploading');
+ this.boxEl.classList.remove('h5p-dnd__box--is-dragging')
}
+};
+
+/**
+ * Sync copyright.
+ */
+ns.widgets.image.prototype.setCopyright = function (value) {
+ this.copyright = this.params.copyright = value;
+};
- var source = H5P.getPath(this.params.path, H5PEditor.contentId);
- var altText = (this.field.label === undefined ? '' : this.field.label);
- var fileHtmlString = '' +
- '';
-
- this.$file.html(fileHtmlString)
- .children(':eq(0)')
- .click(function () {
- that.isOriginalImage = true;
- that.openFileSelector();
- return false;
- })
- .children('img')
- .attr('src', source)
- .end()
- .next()
- .click(function () {
- that.confirmRemovalDialog.show(that.$file.offset().top);
- return false;
- });
- var $img = this.$file.find('img');
- $img.one('load', function () {
- // Make editor resize
- $img.addClass('loaded');
+ this.boxEl.classList.add('h5p-dnd__box--is-inline','h5p-dnd__box--has-image')
+ this.boxEl.classList.remove('h5p-dnd__box--is-uploading');
+ this.boxEl.innerHTML = this.getUploadedMarkup();
+ this.boxEl.setAttribute('role', 'button');
+ // Only aria-label is supported by NVDA (not aria-describedby which could be an alternative).
+ const altText = (this.field.label === undefined ? '' : this.field.label);
+ const ariaLabel = `${altText ?? ns.t('core', 'image')}. ${ns.t('core', 'dragAndDropAndPasteReplaceImage')}`;
+ this.boxEl.setAttribute('aria-label', ariaLabel);
+ const actionsContainerEl = document.createElement('div');
+ actionsContainerEl.classList.add('h5p-image-action-container');
+ actionsContainerEl.innerHTML = this.getImageActionMarkup();
+
+ this.boxContainerEl.insertBefore(actionsContainerEl, this.boxEl.nextElementSibling);
+
+ this.boxContainerEl.querySelector('.delete').addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.confirmationDialog.show(this.$imageDropContainer.offset().top);
});
- // Uploading original image
- that.$editImage.removeClass('hidden');
- that.$copyrightButton.removeClass('hidden');
+ this.cleanUp();
+ this.addDragAndDropListeners();
// Notify listeners that image was changed to params
- that.trigger('changedImage', this.params);
+ this.trigger('changedImage', this.params);
return true;
};
@@ -263,13 +505,24 @@ ns.widgets.image.prototype.addFile = function () {
* Remove image
*/
ns.widgets.image.prototype.removeImage = function () {
-
+ this.boxEl.classList.remove('h5p-dnd__box--is-uploading');
+ this.boxContainerEl.classList.remove('has-error');
+ this.cleanUp();
// Notify listeners that we removed image with params
this.trigger('removedImage', this.params);
+ const actionsContainerEl = this.$container.find('.h5p-image-action-container').get(0);
+ if (actionsContainerEl) {
+ actionsContainerEl.remove();
+ }
+
delete this.params;
this.setValue(this.field);
- this.addFile();
+
+ this.boxEl.removeAttribute('role');
+ this.boxEl.innerHTML = this.getBaseMarkup();
+
+ this.addDragAndDropListeners();
for (var i = 0; i < this.changes.length; i++) {
this.changes[i]();
@@ -291,6 +544,16 @@ ns.widgets.image.prototype.remove = function () {
this.$file.parent().remove();
};
+ns.widgets.image.prototype.cleanUp = function () {
+ const boundedHandleDnD = this.handleDragAndDrop.bind(this);
+
+ this.boxEl.removeEventListener('dragenter', boundedHandleDnD);
+ this.dropBlockEl?.removeEventListener('dragover', boundedHandleDnD);
+ this.dropBlockEl?.removeEventListener('dragend', boundedHandleDnD);
+ this.dropBlockEl?.removeEventListener('dragleave', boundedHandleDnD);
+ this.dropBlockEl?.removeEventListener('drop', boundedHandleDnD);
+}
+
/**
* Collect functions to execute once the tree is complete.
*
@@ -304,3 +567,21 @@ ns.widgets.image.prototype.ready = function (ready) {
ready();
}
};
+
+/**
+ * Lazy load images
+ */
+ns.widgets.imageObserver = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.src = entry.target.dataset.src;
+ ns.widgets.imageObserver.unobserve(entry.target);
+ }
+ });
+});
+
+ns.widgets.image.prototype.STATE = {
+ NO_IMAGE: 'NO_IMAGE',
+ UPLOADING: 'UPLOADING',
+ HAS_IMAGE: 'HAS_IMAGE'
+};
diff --git a/scripts/h5peditor-metadata.js b/scripts/h5peditor-metadata.js
index 2e69b800..2be54e51 100644
--- a/scripts/h5peditor-metadata.js
+++ b/scripts/h5peditor-metadata.js
@@ -263,7 +263,7 @@ H5PEditor.MetadataForm = (function (EventDispatcher, $, metadataSemantics) {
* @param {$} $element
*/
self.appendButtonTo = function ($item) {
- $button.appendTo($item.children('.h5peditor-label-wrapper').wrap('').parent());
+ $button.appendTo($item.parent().find('.h5peditor-label-wrapper').first());
};
/**
diff --git a/styles/css/application.css b/styles/css/application.css
index f44107b1..c9af577d 100644
--- a/styles/css/application.css
+++ b/styles/css/application.css
@@ -1 +1 @@
-ul.list-unstyled{list-style:none;padding-left:0;margin:0}.field{margin:20px 0;font-size:16px;padding:0}.field:first-child{margin-top:0}.field:last-child{margin-bottom:0}.tree>.field.group:last-child{margin-bottom:0}.fields>.field.group{margin:10px 0}.fields>.field.group:first-child{margin-top:0}.fields>.field.group:last-child{margin-bottom:0}.field.boolean .h5peditor-label{display:inline}.field .h5p-editor-image-buttons{float:left;clear:both}.field .library{border:0}.field.importance-high>.h5peditor-label-wrapper>.h5peditor-label{font-size:18px;color:#356593}.field .h5p-dialog-anchor{position:relative;margin:-16px}.common-fields-library-wrapper{margin:20px 0;border:none;margin:0;padding:0}.common-fields-library-wrapper:first-child{margin-top:0}.common-fields-library-wrapper:last-child{margin-bottom:0}.common-fields-library-wrapper .common-field-legend{display:none}.common>.h5peditor-label,.h5p-li>.list-item-title-bar,.group>.title{visibility:inherit;cursor:pointer}.h5p-li>.list-item-title-bar.importance-high,.group.importance-high>.title{background:#2579c6;border:1px solid #1f67a8;height:42px}.h5p-li>.list-item-title-bar.importance-high>.title,.h5p-li>.list-item-title-bar.importance-high>.h5peditor-label,.group.importance-high>.title{font-size:16px;font-weight:600;line-height:42px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.h5p-li>.list-item-title-bar,.group>.title{background:#747275;border:1px solid #636164;height:38px}.h5p-li>.list-item-title-bar.importance-medium>.h5peditor-label,.h5p-li>.list-item-title-bar>.h5peditor-label,.group>.title{font-size:16px;font-weight:600;color:#fff;line-height:38px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.common>.h5peditor-label,.h5p-li>.list-item-title-bar.importance-low,.group.importance-low>.title{background:#f5f5f5;height:38px;border:1px solid #d0d0d1}.common>.h5peditor-label,.h5p-li>.list-item-title-bar.importance-low>.title,.h5p-li>.list-item-title-bar.importance-low>.h5peditor-label,.group.importance-low>.title{font-size:16px;font-weight:400;color:#212121;line-height:38px}.group{border:none}.group>.title{padding:0 10px;outline:none}.group>.content{position:relative;display:none;margin:0;padding:20px;border:1px solid #d0d0d1;border-top:none;background:#fff}.group.importance-high>.title{color:#fff}.group.importance-low>.title{color:#212121}.group.importance-low>.title:focus:before{outline:1px dashed}.common .content,.content .content{background-color:#fcfcfc}.common .content .content,.content .content .content{background-color:#fff}.common .content .content .content,.content .content .content .content{background-color:#fcfcfc}.common .content .content .content .content,.content .content .content .content .content{background-color:#fff}.common .content .content .content .content .content,.content .content .content .content .content .content{background-color:#fcfcfc}.common .content .content .content .content .content .content,.content .content .content .content .content .content .content{background-color:#fff}.h5p-li>.list-item-title-bar{color:#fff}.h5p-li>.list-item-title-bar>.h5peditor-label{overflow:hidden;margin:0 54px 0 0;padding:0 10px;white-space:nowrap;line-height:38px;outline:none;text-overflow:ellipsis}.h5p-li>.list-item-title-bar>.list-actions{height:100%;float:right;position:relative}.h5p-li>.list-item-title-bar .remove{cursor:pointer;width:1.25em;height:38px;font-size:1.75em;display:inline-block}.h5p-li>.list-item-title-bar .remove:hover{opacity:1;text-decoration:none}.h5p-li>.list-item-title-bar .remove:after{font-family:"H5P";content:"";opacity:.7;display:inline-block;line-height:38px}.h5p-li>.list-item-title-bar .remove:hover:after{opacity:1}.h5p-li>.list-item-title-bar .order-group{text-align:center;float:right;background:#636164;font-size:16px;cursor:pointer}.h5p-li>.list-item-title-bar .order-up,.h5p-li>.list-item-title-bar .order-down{width:19px;height:19px;line-height:19px}.h5p-li>.list-item-title-bar .order-up:hover,.h5p-li>.list-item-title-bar .order-down:hover{background:#636164}.h5p-li>.list-item-title-bar .order-up:after,.h5p-li>.list-item-title-bar .order-down:after{font-family:"H5P";content:"";display:inline-block}.h5p-li>.list-item-title-bar .order-down:after{content:""}.h5p-li>.list-item-title-bar.importance-high>.title{border:none;margin:0 74px 0 0}.h5p-li>.list-item-title-bar.importance-high .remove{height:42px;line-height:42px;font-size:40px}.h5p-li>.list-item-title-bar.importance-high .remove:after{line-height:42px;opacity:.7}.h5p-li>.list-item-title-bar.importance-high .remove:hover:after{opacity:1}.h5p-li>.list-item-title-bar.importance-high .order-group{background:#1f67a8;font-size:18px}.h5p-li>.list-item-title-bar.importance-high .order-up,.h5p-li>.list-item-title-bar.importance-high .order-down{width:21px;height:21px;line-height:21px}.h5p-li>.list-item-title-bar.importance-high .order-up:hover,.h5p-li>.list-item-title-bar.importance-high .order-down:hover{background:#1f67a8}.h5p-li>.list-item-title-bar.importance-low>.title{border:none;margin:0 54px 0 0}.h5p-li>.list-item-title-bar.importance-low>.title:before{color:#212121}.h5p-li>.list-item-title-bar.importance-low>.title:focus:before{outline:1px dashed #212121}.h5p-li>.list-item-title-bar.importance-low .remove{height:38px;line-height:38px;font-size:30px}.h5p-li>.list-item-title-bar.importance-low .remove:after{line-height:38px}.h5p-li>.list-item-title-bar.importance-low .remove:after{color:#212121;opacity:.7}.h5p-li>.list-item-title-bar.importance-low .remove:hover:after{opacity:1}.h5p-li>.list-item-title-bar.importance-low .order-up,.h5p-li>.list-item-title-bar.importance-low .order-down{width:19px;height:19px;background:#d0d0d1;font-size:16px;line-height:19px}.h5p-li>.list-item-title-bar.importance-low .order-up:hover,.h5p-li>.list-item-title-bar.importance-low .order-down:hover{background:#deddde}.h5p-li>.list-item-title-bar.importance-low .order-up:after,.h5p-li>.list-item-title-bar.importance-low .order-down:after{color:#212121}.group.expanded>.content,.listgroup.expanded>.content{display:block}.listgroup>.list-item-title-bar>.h5peditor-label{cursor:pointer}.list-item-title-bar>.title:before,.group>.title:before{content:"";font-family:"H5P";margin-right:5px}.list-item-title-bar>.title:focus:before,.group>.title:focus:before{outline:1px dashed #fff}.listgroup.expanded>.list-item-title-bar>.h5peditor-label:before,.expanded>.title:before{content:""}.listgroup>.group.field{margin:0;padding:0;min-width:0}.content{display:block;margin:0;padding:20px;border:1px solid #d0d0d1;border-top:none;background:#fff}.common{margin-top:20px}.common>.h5peditor-label{margin:0;padding:0 10px;cursor:pointer;font-size:1em}.common>.h5peditor-label>.icon:before{content:"";font-family:"H5P";margin-right:5px}.common>.h5peditor-label:hover>.icon{opacity:1}.common>.h5peditor-label:focus{outline:none}.common>.h5peditor-label:focus>.icon:before{outline:1px dashed}.common>.fields{min-height:2em;padding:20px;border:1px solid #d0d0d1;border-top:none;background:#fff;position:relative}.common>.fields>.desc{margin:0;font-size:.875em;color:#666;float:left}.common>.fields p:first-child{margin-bottom:20px}.common.collapsed>.h5peditor-label>.icon:before{content:""}.common.collapsed>.fields{display:none}.common.hidden{display:none}.h5peditor-button[aria-label]:before{content:attr(aria-label);visibility:hidden;position:absolute;top:115%;right:-10%;z-index:2;padding:.25em .75em;background:#212121;color:#fff;white-space:nowrap;font-size:14px;line-height:1.5;box-shadow:0 0 .5em #858585}.h5peditor-button[aria-label]:hover:before{visibility:visible}.h5peditor-button[aria-label][aria-disabled=true]:before{display:none}.h5peditor .h5p-editing-image-button{background:linear-gradient(to bottom, #fff 0, #f2f2f2 100%);font-size:14px;color:#212121;line-height:28px;padding-right:20px;margin-right:.5em;height:30px;padding-left:0;font-weight:normal}.h5peditor .h5p-editing-image-button:hover:not([disabled]){background:linear-gradient(to bottom, #fff 0, #d0d0d1 100%);border-color:#999}.h5peditor .h5p-editing-image-button:before{font-family:"H5P";content:"";color:#666;padding-right:.3em;padding-left:.45em;vertical-align:middle;font-size:1.5em;line-height:.9}.h5peditor .h5p-editing-image-button.loading:before{content:""}.h5peditor .h5p-editing-image-button.hidden,.h5peditor .h5p-copyright-button.hidden{display:none !important}.h5peditor .ui-dialog .h5p-editing-image-button,.h5peditor .ui-dialog .h5p-copyright-button{padding-left:.5em}body.h5p-editor-image-popup{position:relative}.h5p-editing-image-popup-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);padding:3em 1em;box-sizing:border-box;z-index:102}#darkroom-icons{top:0;left:0}.h5p-editing-image-popup-background.hidden{display:none}.h5p-editing-image-popup{display:inline-block;position:relative;top:0;background:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.h5p-editing-image-header{padding:1em .75em}.h5p-editing-image{max-height:100%;max-width:100%}.h5p-editing-image.hidden{display:none}.h5p-editing-image-popup .darkroom-toolbar{position:relative;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:0}.h5p-editing-image-popup .darkroom-toolbar:before{content:initial}.h5p-editing-image-popup .darkroom-image-container{padding:32px 2em}.h5p-editing-image-popup .darkroom-image-container .canvas-container{box-shadow:0 0 8px 3px rgba(0,0,0,.6);margin:auto}.h5p-editing-image-header-title{display:inline-block;font-size:1.25em}.h5p-editing-image-header-buttons{display:inline-block;float:right}.h5p-editing-image-loading{padding:1em}.h5p-editing-image-loading.hidden{display:none}.h5p-editing-image-editing-container{background:#666}.h5p-editing-image-header-buttons button{padding:.5em 1.75em;margin:0 0 0 1em;border:1px solid #ccc;border-radius:.25em;color:#333;cursor:pointer;background:#f2f2f2;background:-webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);background:-ms-linear-gradient(top, #fff 0, #f2f2f2 100%)}.h5p-editing-image-header-buttons button:hover{background:#ededed}.h5p-editing-image-header-buttons .h5p-done{color:#fff;border-color:#20588f;background:#3673b5;background:-webkit-linear-gradient(top, #5A94D3 0, #3673B5 100%);background:-ms-linear-gradient(top, #5A94D3 0, #3673B5 100%)}.h5p-editing-image-header-buttons .h5p-done:hover{background:#3275bc;background:-webkit-linear-gradient(top, #3275bc 0, #285585 100%);background:-ms-linear-gradient(top, #3275bc 0, #285585 100%)}.h5p-editing-image-header-buttons .h5p-remove{background:none;border:none;color:#a00;padding-right:0;padding-left:0;border-radius:0}.h5p-editing-image-header-buttons .h5p-remove:hover{background:none;color:#e40000}.h5p-vtab-wrapper>.h5p-vtab-forms .h5p-remove:after{color:#d0d0d1}html,body{margin:0;padding:0;color:#212121;font-family:"Open Sans",sans-serif;max-width:960px;position:relative}a{text-decoration:none}.offsite{left:-9999px;opacity:0;position:absolute;top:0}.h5peditor{font-size:16px}.h5peditor .h5p-more-libraries{font-size:.875em;margin-top:.4em}.h5peditor .h5peditor-single>.field.library{border:0;padding:0}.h5peditor .cke_dialog_background_cover{width:100% !important;height:100% !important}.h5peditor .errors p,.h5peditor .h5p-errors{color:#da0001;white-space:normal}.h5peditor textarea{resize:vertical}.h5peditor .h5p-editor-flex-wrapper{display:flex;flex-direction:row}.h5peditor .h5p-editor-flex-wrapper.has-button-collapse{align-items:flex-end;margin-bottom:.5rem;width:100%}.h5peditor .h5p-editor-flex-wrapper.has-button-collapse.has-label{justify-content:space-between;gap:.5rem}.h5peditor .h5p-editor-flex-wrapper.has-button-collapse:not(.has-label){justify-content:flex-end}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse{align-items:center;background-color:#228380;background-image:none;border:3px solid #228380;border-radius:.4rem;box-sizing:border-box;display:grid;font-size:.815rem;font-weight:bold;grid-template-columns:auto 1fr;height:2.6rem;line-height:1.2rem;margin:0;padding:0 .6rem 0 .2rem}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse .label{white-space:nowrap}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse.collapsed .icon::before{content:"";font-family:"H5P";font-size:1.2rem;font-weight:normal;padding:0 .2rem 0 .2rem;vertical-align:middle}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse:not(.collapsed) .icon::before{content:"";font-family:"H5P";font-size:1.2rem;font-weight:normal;padding:0 .2rem 0 .2rem;vertical-align:middle}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse:hover:not([disabled]){background-color:#228380;background-image:none;border:3px solid #4dc2bf}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse.no-label{grid-template-columns:auto;padding:0 .2rem;width:auto}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse.no-label .label{display:none}.h5peditor .h5peditor-label-wrapper{display:flex;flex-direction:row}.h5peditor .has-important-description .h5peditor-field-description{display:none}.h5peditor .has-important-description .h5peditor-label-wrapper{float:left}.h5peditor .important-description-visible .h5peditor-field-important-description{display:block}.h5peditor .important-description-visible .h5peditor-label-wrapper{float:none}.h5peditor .important-description-visible .important-description-show{display:none}.h5peditor textarea,.h5peditor .h5peditor-text,.h5peditor .ckeditor{box-shadow:inset 0px 0px 5px rgba(0,0,0,.12);box-sizing:border-box;margin:0;padding:10px;min-height:40px;border:1px solid #d0d0d1;background:#fff;outline:none;font-size:16px;word-wrap:break-word}.h5peditor textarea a,.h5peditor .h5peditor-text a,.h5peditor .ckeditor a{text-decoration:underline}.h5peditor textarea figure.table,.h5peditor .h5peditor-text figure.table,.h5peditor .ckeditor figure.table{display:table;table-layout:fixed;margin:0 auto;padding:0;float:left}.h5peditor textarea figure.table table,.h5peditor .h5peditor-text figure.table table,.h5peditor .ckeditor figure.table table{border-collapse:collapse;height:100%;width:100%;border-spacing:0;border-width:1px;border-color:#494949}.h5peditor textarea figure.table table td,.h5peditor textarea figure.table table th,.h5peditor .h5peditor-text figure.table table td,.h5peditor .h5peditor-text figure.table table th,.h5peditor .ckeditor figure.table table td,.h5peditor .ckeditor figure.table table th{padding:1px;border-color:#494949;border-bottom-style:solid}.h5peditor textarea figure.table table td,.h5peditor .h5peditor-text figure.table table td,.h5peditor .ckeditor figure.table table td{border-width:.083em}.h5peditor textarea figure.table table th,.h5peditor .h5peditor-text figure.table table th,.h5peditor .ckeditor figure.table table th{border-width:.167em}.h5peditor textarea figure.table table tr:last-child>td,.h5peditor .h5peditor-text figure.table table tr:last-child>td,.h5peditor .ckeditor figure.table table tr:last-child>td{border-bottom-style:none}.h5peditor textarea figure.table figcaption,.h5peditor .h5peditor-text figure.table figcaption,.h5peditor .ckeditor figure.table figcaption{background-color:rgba(0,0,0,0);caption-side:top;color:#333;display:table-caption;font-size:.75em;outline-offset:-1px;padding:.6em;text-align:center;word-break:break-word}.h5peditor textarea .table-overflow-protection,.h5peditor .h5peditor-text .table-overflow-protection,.h5peditor .ckeditor .table-overflow-protection{clear:both}.h5peditor textarea.error,.h5peditor .h5peditor-text.error,.h5peditor .ckeditor.error{border-color:red}.h5peditor .ck-content figure.table{float:left}.h5peditor .ck-content figure.table table{border-width:1px;border-color:#494949;border-style:none}.h5peditor .ck-content figure.table table td,.h5peditor .ck-content figure.table table th{padding:1px;border-style:none;border-color:#494949;border-bottom-style:solid}.h5peditor .ck-content figure.table table td{border-width:.083em}.h5peditor .ck-content figure.table table th{border-width:.167em;background-color:rgba(0,0,0,0)}.h5peditor .ck-content figure.table table tr:last-child>td{border-bottom-style:none}.h5peditor .ck-content figure.table figcaption{background-color:rgba(0,0,0,0)}.h5peditor .h5peditor-text,.h5peditor textarea{width:100%;box-sizing:border-box}.h5peditor .h5peditor-text.error,.h5peditor textarea.error{border-color:red}.h5peditor .ck a{text-decoration:underline}.h5peditor .ck .ck-font-size-dropdown .ck-dropdown__panel,.h5peditor .ck .ck-text-fragment-language-dropdown .ck-dropdown__panel{max-height:20em;overflow-y:scroll}.h5peditor .ck .ck-fontsize-option .ck-button__label{line-height:normal !important}.h5peditor .ck .ck-content pre{background:initial;border:initial;border-radius:initial;padding:0}.h5peditor textarea:focus::-webkit-input-placeholder,.h5peditor input:focus::-webkit-input-placeholder{color:#fff}.h5peditor textarea:focus:-moz-placeholder,.h5peditor input:focus:-moz-placeholder{color:#fff}.h5peditor textarea:focus::-moz-placeholder,.h5peditor input:focus::-moz-placeholder{color:#fff}.h5peditor textarea:focus:-ms-input-placeholder,.h5peditor input:focus:-ms-input-placeholder{color:#fff}.h5peditor textarea:focus.h5peditor-ckeditor-placeholder,.h5peditor input:focus.h5peditor-ckeditor-placeholder{color:#fff}.h5peditor ::-webkit-input-placeholder{color:#858585}.h5peditor :-moz-placeholder{color:#858585}.h5peditor ::-moz-placeholder{color:#858585}.h5peditor :-ms-input-placeholder{color:#858585}.h5peditor .h5peditor-ckeditor-placeholder{color:#858585}.h5peditor>select,.h5peditor .h5peditor-language-switcher select,.h5peditor h5peditor-select,.h5peditor .field>select{padding:10px 30px 10px 8px;font-family:"Open Sans",sans-serif;font-size:16px;border:1px solid #d0d0d1;background:#fff url(a1aff8c82bc779d09357.png) no-repeat;background-position:calc(100% - 10px);box-shadow:inset 0px 0px 5px rgba(0,0,0,.12);-moz-appearance:none;-webkit-appearance:none}.h5peditor>select:disabled,.h5peditor .h5peditor-language-switcher select:disabled,.h5peditor h5peditor-select:disabled,.h5peditor .field>select:disabled{background-color:#efefef}.h5peditor>select{margin-bottom:13px;margin-right:20px}.h5peditor select::-ms-expand{display:none}.h5peditor a:focus{outline:none}.h5peditor textarea:focus,.h5peditor .h5peditor-text:focus{outline:none;background-color:#fff;border-color:#53a0ff}.h5peditor .h5p-ul{padding:0;margin:0;list-style:none}.h5peditor .h5p-ul .h5p-li{margin:10px 0;padding:0;list-style:none}.h5peditor .h5p-ul .h5p-li:first-child{margin-top:0}.h5peditor .h5p-ul .h5p-li:last-child{margin-bottom:0}.h5peditor .h5p-ul .h5p-li.placeholder{box-sizing:border-box;background:#e8f2fa;border:dashed 2px #2782d1}.h5peditor .h5p-ul .h5p-li:hover{text-decoration:none}.h5peditor .h5p-ul .h5p-li:nth-child(2).moving{margin-top:0}.h5peditor .h5p-ul .h5p-li:nth-last-child(2).placeholder{margin-bottom:0}.h5peditor .dimensions input,.h5peditor .coordinates input,.h5peditor .number input{width:75px}.h5peditor .number input[type=range]{width:300px;float:left;margin:7px 8px 0 0}.h5peditor .h5p-errors{clear:both}.h5peditor .h5p-add-file{float:left;position:relative;background:rgba(0,0,0,0);border:2px dashed #ddd;color:#ddd;margin:.5em;width:6em;height:4.5em;cursor:pointer;outline:none;box-sizing:border-box;-moz-box-sizing:border-box}.h5peditor .h5p-add-file:focus,.h5peditor .h5p-add-file:hover{color:#999;border-color:#999}.h5peditor .h5p-add-file.hidden{visibility:hidden}.h5peditor .h5p-add-file:after{position:absolute;content:"+";font-size:2em;line-height:2.2em;width:100%;height:100%;text-align:center}.h5peditor .h5p-add-dialog{position:absolute;z-index:1;visibility:hidden;opacity:0;background:#fff;left:1em;right:1em;top:1em;border:1px solid #cdcdcd;box-sizing:border-box;-moz-box-sizing:border-box;box-shadow:0 0 8px #666;transition:visibility 0s .2s,opacity .2s}.h5peditor .h5p-add-dialog.h5p-open{visibility:visible;opacity:1;transition:visibility 0s 0s,opacity .2s}.h5peditor .h5p-add-dialog .h5p-add-dialog-table{overflow:hidden}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tablist{overflow:hidden;margin:1em 1em 0 1em}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tab{cursor:pointer;float:left;padding:.5em .75em;border-top:1px solid #ccc;border-right:1px solid #ccc;font-weight:bold;font-size:15px;color:#666;background:#f5f5f5}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tab:first-child{border-left:1px solid #ccc}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tab.selected{color:#333;background:#fff}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tabpanel{border:1px solid #ccc;margin:0 1em 1em 1em;overflow:hidden;padding:1em}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tabpanel h3{margin:0 0 1em 0}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tabpanel .h5p-file-drop-upload{width:90px;margin:0}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box{float:left;padding:0;width:60%;margin-right:5%;margin-left:4%;text-align:left;margin-top:30px}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child{width:22%;margin-left:3%;margin-right:1%}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child h3{text-align:center}.h5peditor .h5p-add-dialog .h5p-add-dialog-table h3{color:#666;font-size:1em;margin:1.2em 0;line-height:1.1em}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description{color:#bbb}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper{background-color:#f5f5f5;border:1px solid #bbb;padding:15px 15px 15px 60px;position:relative}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper:before{font-family:"H5P";position:absolute;left:0;top:.083em;font-size:3.8em;line-height:1}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper.video:before{content:"";color:#dd0505}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper.audio:before{content:"";color:#747275}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper input{border-color:#bbb;text-align:left;padding-left:20px}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload{position:relative;width:70%;height:90px;margin:0 15%;float:left;background-color:#f5f5f5;text-align:center;cursor:pointer;border:1px solid #bbb}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload .h5p-file-drop-upload-inner{border:2px dashed #bbb;background-color:#fff;position:absolute;top:3px;bottom:3px;left:3px;right:3px}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload .h5p-file-drop-upload-inner:after{font-family:"H5P";line-height:1.4em;font-size:3.5em;color:#bbb}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload .h5p-file-drop-upload-inner.video:after{content:""}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload .h5p-file-drop-upload-inner.audio:after{content:""}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload:hover .h5p-file-drop-upload-inner:after,.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload.over .h5p-file-drop-upload-inner:after{color:#999}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical{float:left;position:relative;width:5%;height:250px}.h5peditor .h5p-add-dialog .h5p-dialog-box{text-align:center;padding:1em .5em}.h5peditor .h5p-add-dialog .h5p-buttons{padding:.5em;border-top:1px solid #cdcdcd;background:#ddd;text-align:right}.h5peditor .h5p-or{border-bottom:1px solid #cdcdcd;padding:0;margin:0 1em;text-align:center;height:.5em;line-height:1em}.h5peditor .h5p-or>span{background:#fff;padding:0 .5em}.h5peditor .h5p-or-vertical{float:left;position:relative;width:50px;height:80px}.h5peditor .h5p-or-vertical .h5p-or-vertical-line{position:absolute;margin:10px 0;left:49%;top:0;bottom:0;width:1px;background:#ccc;z-index:1}.h5peditor .h5p-or-vertical .h5p-or-vertical-word-wrapper{text-align:center;height:18px;position:absolute;left:0;right:0;top:22%;margin-top:-12px;z-index:2}.h5peditor .h5p-or-vertical .h5p-or-vertical-word-wrapper .h5p-or-vertical-word{color:#999;font-weight:bold;font-size:18px;padding:3px;background:#fff}.h5peditor .h5p-file-url{text-align:center}.h5peditor .h5p-thumbnail{margin:.5em;width:6em;height:4.5em;display:block;float:left;position:relative;box-shadow:0 0 10px 0 #666;border:1px solid #fff;box-sizing:border-box;-moz-box-sizing:border-box}.h5peditor .h5p-thumbnail .h5p-remove{position:absolute;top:0;right:0;cursor:pointer;outline:none;width:1.6em;height:1.6em;line-height:1.6em;overflow:hidden;text-indent:-0.4em;padding:.065em;opacity:.6}.h5peditor .h5p-thumbnail .h5p-remove:hover,.h5peditor .h5p-thumbnail .h5p-remove:focus{opacity:1}.h5peditor .h5p-thumbnail .h5p-remove:after{font-family:"H5P";font-size:2em;color:#fff;content:"";opacity:.6}.h5peditor .h5p-type{position:absolute;width:100%;height:100%;font-size:1.1em;line-height:4em;display:block;text-align:center;background:#000;color:#fff;cursor:pointer}.h5peditor .file{position:relative;float:left;margin-bottom:0;max-width:100%}.h5peditor .file.authorList{float:none}.h5peditor .file.field{float:none}.h5peditor .file .thumbnail{display:inline-block;margin:10px 10px 10px 0;box-shadow:0 0 10px 0 #666;border:1px solid #fff;cursor:pointer;max-width:100%;min-width:1em;min-height:1em;background:#fff url(ae8568c2320881fd5899.png) repeat}.h5peditor .file .thumbnail:focus{box-shadow:0 0 10px 0 #222}.h5peditor .file .add{display:inline-block;cursor:pointer;padding:.5em 1.5em .5em 3em;background:linear-gradient(to bottom, #fbfbfb 0, #f2f2f2 100%);border:1px solid #d0d0d1;border-radius:.25em;color:#222;font-weight:bold;line-height:normal}.h5peditor .file .add:hover{background:#ededed}.h5peditor .file .add:focus{box-shadow:0 0 16px 0 rgba(133,188,255,.84)}.h5peditor .file .add .h5peditor-field-file-upload-text:before{font-family:"H5P";content:"";line-height:1;color:#39c943;font-size:2em;position:absolute;left:.3em;top:.1em}.h5peditor .file .remove{display:block;position:absolute;top:7px;right:7px;cursor:pointer}.h5peditor .file .remove:focus:before{opacity:1}.h5peditor .file .remove:before{font-family:"H5P";font-size:1.4em;color:#fff;content:"";opacity:.6;text-shadow:rgba(0,0,0,.4) 0 0 4px,rgba(0,0,0,.4) 0 0 4px,rgba(0,0,0,.4) 0 0 4px}.h5peditor .file .remove:hover{text-decoration:none}.h5peditor .file .remove:hover:before{color:#fff;opacity:1;text-shadow:rgba(0,0,0,.4) 0 0 4px,rgba(0,0,0,.4) 0 0 4px,rgba(0,0,0,.4) 0 0 4px}.h5peditor .file img{max-width:100%;vertical-align:bottom;max-height:100px}.h5peditor .file .h5p-av-row{overflow:auto;margin-bottom:.5em}.h5peditor .file .h5p-av-row .h5p-thumbnail{display:table-cell}.h5peditor .file .h5p-av-row .h5p-video-quality{display:table-cell;overflow:hidden;width:10000px;padding-left:1em}.h5peditor .file .h5p-av-row .h5p-video-quality input.h5peditor-text{width:100%}.h5peditor .file .h5p-av-cell{overflow:auto;float:left}.h5peditor .video .file,.h5peditor .audio .file{position:static;overflow:visible}.h5peditor .video .file .thumbnail,.h5peditor .video .file .add,.h5peditor .audio .file .thumbnail,.h5peditor .audio .file .add{float:left}.h5peditor .video .file .add,.h5peditor .audio .file .add{margin-top:8px}.h5peditor .video .file .thumbnail,.h5peditor .audio .file .thumbnail{overflow:visible;position:relative;cursor:auto}.h5peditor .video .file .remove,.h5peditor .audio .file .remove{top:-3px;right:-5px}.h5peditor .video .file .type,.h5peditor .audio .file .type{padding:16px 8px 4px;background:#000;color:#fff;font-size:10px}.h5peditor .video .file .h5peditor-uploading,.h5peditor .audio .file .h5peditor-uploading{float:left;margin:.5em}.h5peditor .libwrap{margin-top:20px}.h5peditor .libwrap.no-margin,.h5peditor .libwrap:empty{margin-top:0}.h5peditor input[type=checkbox]{margin:4px 4px 4px 0;vertical-align:bottom}.h5peditor .moving{position:absolute;z-index:1;opacity:.8;-webkit-transform:translateZ(0)}.h5peditor .moving .h5peditor-label{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.h5peditor .h5peditor-uploading,.h5peditor .h5peditor-loading{padding-top:10px;padding-bottom:6px;font-size:14px}.h5peditor .h5peditor-loading{padding:.875em 0 1em 3.25em;font-style:italic}.h5peditor .h5p-copyright-button{border-radius:.25em;height:30px;background:linear-gradient(to bottom, #fff 0, #f2f2f2 100%);border:1px solid #d0d0d1;color:#212121;font-size:14px;line-height:28px;padding-right:20px;padding-left:0;clear:both;font-weight:normal}.h5peditor .h5p-copyright-button:before{font-family:"H5P";content:"";color:#666;padding:0 .25em 0 .25em;vertical-align:middle;font-size:1.5em;line-height:.9}.h5peditor .h5p-copyright-button:hover:not([disabled]){background:linear-gradient(to bottom, #fff 0, #d0d0d1 100%);text-decoration:none;border-color:#999}.h5peditor .h5p-copyright-button:focus{box-shadow:0 0 16px 0 rgba(133,188,255,.84)}.h5peditor .field.file>.h5p-copyright-button,.h5peditor .field.video>.h5p-copyright-button,.h5peditor .field.audio>.h5p-copyright-button{float:left}.h5peditor .h5p-editor-dialog{position:absolute;z-index:2;margin:5.5em 0 1em;visibility:hidden;opacity:0;height:0;overflow:hidden;background:#fff;box-shadow:0 0 8px #666;transition:visibility 0s .2s,height 0s .2s,opacity .2s,margin-top .2s}.h5peditor .h5p-editor-dialog.h5p-open{margin-top:3.5em;visibility:visible;opacity:1;height:auto;transition:visibility 0s 0s,height 0s 0s,opacity .2s,margin-top .2s}.h5peditor .h5p-editor-dialog>.field{margin:0;border:0;box-shadow:none}.h5peditor .h5p-editor-dialog .content{border:none;background:#fff}.h5peditor .h5p-editor-dialog .content .h5peditor-label{font-size:18px;font-weight:600}.h5peditor .h5p-editor-dialog .h5p-close{color:#494949}.h5peditor .h5p-editor-dialog .h5p-close:before{font-size:2em;right:-0.125em;top:0;position:absolute;z-index:1;font-family:"H5P";content:"";line-height:1em;transition:scale .2s}.h5peditor .h5p-editor-dialog .h5p-close:hover:before{scale:1.1,1.1}.h5peditor .h5p-li>.content>.library{border:0;padding:0}.ck-powered-by-balloon{display:none !important}.h5p-editor-dialog.h5p-dialog-wide{width:90%;border-radius:.208em}.h5peditor-button-textual{border-radius:.25em;background:#747275;background-image:linear-gradient(#7b797c 50%, transparent 50%, transparent);display:inline-block;width:auto;margin:10px 0 0 0;padding:0 20px;box-sizing:border-box;height:38px;border:1px solid #d0d0d1;font-size:16px;font-family:"Open Sans",sans-serif;line-height:38px;color:#fff;cursor:pointer;font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.h5peditor-button-textual:focus{box-shadow:0 0 16px 0 rgba(133,188,255,.84)}.h5peditor-button-textual:before,.h5peditor-button-textual:after{color:#fff}.h5peditor-button-textual .h5p-editing-image-button:before{font-family:"H5P";content:"";color:#666;padding-right:.25em;vertical-align:middle;font-size:1.5em;line-height:.9}.h5peditor-button-textual:hover:not([disabled]){background:#636164;background-image:linear-gradient(#6b696c 50%, transparent 50%, transparent);text-decoration:none}.h5peditor-button-textual.importance-high{background:#2579c6;background-image:linear-gradient(#3080c9 50%, transparent 50%, transparent);border-color:#1f67a8;text-transform:uppercase;height:42px;line-height:42px}.h5peditor-button-textual.importance-high:hover:not([disabled]){background:#1f67a8;background-image:linear-gradient(#2a6fac 50%, transparent 50%, transparent);border-color:#1f67a8}.h5peditor-button-textual.importance-low{background:#f5f5f5;background-image:linear-gradient(#eeeeef 50%, transparent 50%, transparent);border-color:#d0d0d1;color:#212121}.h5peditor-button-textual.importance-low:before,.h5peditor-button-textual.importance-low:after{color:#212121}.h5peditor-button-textual.importance-low:hover:not([disabled]){background:#deddde;background-image:linear-gradient(#deddde 50%, transparent 50%, transparent);border-color:#deddde}.h5peditor-button-textual[disabled],.h5peditor-button-textual[aria-disabled=true]{background:#f5f5f5;color:#707171;border-color:#eee;cursor:not-allowed}.h5peditor-button-textual[disabled]:before,.h5peditor-button-textual[aria-disabled=true]:before{font-family:"H5P";content:"";color:#707171;margin-right:.5em;vertical-align:top}.h5peditor-field-description,.h5p-help-text{font-size:12px;margin-top:.3em;margin-bottom:1em;font-weight:500;color:#434446;line-height:15px;letter-spacing:.5px}.h5peditor-field-important-description{position:relative;padding:1.5em 2.2em 2em 2.2em;font-size:.9em;margin:0 0 20px 0;border:1px solid #ffde78;background-color:#f9f9d8;color:#000;display:none}.h5peditor-field-important-description .important-description-close{position:absolute;font-size:.9em;line-height:2em;right:1.5em;top:1em;user-select:none;cursor:pointer}.h5peditor-field-important-description .important-description-close:before{font-family:"H5P";content:"";vertical-align:top;font-size:1.6em}.h5peditor-field-important-description .h5p-info-icon{font-size:.75em}.h5peditor-field-important-description .h5p-info-icon:before{font-family:"H5P";content:"";font-size:2.3em;line-height:.94em;margin-left:-0.3em;vertical-align:middle}.h5peditor-field-important-description .important-description-title{font-weight:bold;font-size:1.2em;vertical-align:bottom}.h5peditor-field-important-description .important-description-content ul{padding:0;line-height:2em;margin-top:20px}.h5peditor-field-important-description .important-description-content ul li{line-height:1.8em;margin-left:1.5em}.h5peditor-field-important-description .important-description-example{border:1px solid #bbde98;background-color:#d9fac3;display:flex;margin-top:20px}.h5peditor-field-important-description .important-description-example .important-description-example-title{padding:15px;font-weight:bold}.h5peditor-field-important-description .important-description-example .important-description-example-text{padding:15px;width:100%;background-color:#f6fef1}.h5peditor-form{position:relative;background:#fcfcfc;border:1px solid #d0d0d1}.h5peditor-form.h5peditor-form-manager>.tree,.h5peditor-form.h5peditor-form-manager>.common,.h5peditor-form.h5peditor-form-manager>.field{max-width:918px;margin:20px auto;padding:0 20px}.h5peditor-form.h5peditor-semi-fullscreen{margin:0;position:fixed;overflow-y:scroll;margin-top:40px;padding-bottom:40px;box-sizing:border-box;background:#fff;height:calc(100% - 40px)}.h5peditor-label{display:block;margin-bottom:6px;font-weight:600;font-size:16px;color:#454347}.h5peditor-label-button{background:rgba(0,0,0,0);border:none;color:#454347;cursor:pointer;display:flex;flex-direction:row;font-family:inherit;font-weight:600;font-size:16px;padding:0 0 0 10px;text-align:left}.h5peditor-label-button.collapsed .icon::before{content:"";font-family:"H5P";margin-right:5px}.h5peditor-label-button:not(.collapsed) .icon::before{content:"";font-family:"H5P";margin-right:5px}#h5peditor-uploader{position:absolute;width:1px;height:1px;top:-1px;border:0;overflow:hidden}.h5p-tutorial-url,.h5p-example-url{font-size:1em;display:inline-flex;align-items:center;line-height:1;margin-right:1em;margin-bottom:.5em;margin-left:.25em;height:2rem;border-radius:1rem}.h5p-tutorial-url:focus,.h5p-example-url:focus{box-shadow:0px 0px 5px #1634f7}.h5p-tutorial-url:active,.h5p-example-url:active{border-color:#1c70ba}.h5p-tutorial-url::before,.h5p-example-url::before{font-family:"H5P";font-size:1.25em;border-radius:50%;width:2rem;height:2rem;position:absolute;display:flex;justify-content:center;align-items:center}.h5p-tutorial-url .h5p-tutorial-url-label,.h5p-tutorial-url .h5p-example-url-label,.h5p-example-url .h5p-tutorial-url-label,.h5p-example-url .h5p-example-url-label{font-style:italic;font-weight:bold;text-decoration:underline;margin:.25em .5em;margin-left:2rem;padding-left:.5em;padding-right:1em}.h5p-tutorial-url:active,.h5p-tutorial-url:hover{background-color:#eaffab}.h5p-tutorial-url::before{content:"";color:#eaffab;background-color:#749e00}.h5p-tutorial-url .h5p-tutorial-url-label{color:#415702}.h5p-example-url:active,.h5p-example-url:hover{background-color:#f8d4ff}.h5p-example-url::before{content:"";font-size:1em;color:#f8d4ff;background-color:#8f4f9c}.h5p-example-url .h5p-example-url-label{color:#422447}.h5peditor-widget-select{display:flex;flex-direction:row-reverse;justify-content:end;overflow:hidden;margin:0 0 -1px;padding:0;list-style:none}.h5peditor-widget-option{border:1px solid #ccc;margin-left:.5em;padding:.6em 1em;color:#0e1a25;font-size:.875em;background:#f5f5f5;line-height:1.285714286em;cursor:pointer;outline:none}.h5peditor-widget-option:hover{color:#000}.h5peditor-widget-option:active{color:#8e636a}.h5peditor-widget-active{background:#fff;line-height:1.357142857em;border-bottom:0}.h5peditor-widgets>.h5peditor-widget-wrapper{border:1px solid #ccc;margin:0 0 .25em;padding:.5em}.h5peditor-widgets>.h5peditor-label,.h5peditor-widgets>.h5peditor-label-button{float:left;margin-top:5px}.h5p-editor-iframe{margin-bottom:1em}.h5peditor-required:after{content:"*";color:#da0001;margin-left:.2em;position:relative;top:-0.2em}.h5peditor .cke_bottom,.h5peditor .cke_top{background:#d0d0d1}.h5peditor .cke_chrome{border:1px solid #f5f5f5;background:#d0d0d1}.h5peditor .cke_contents,.h5peditor .cke_toolgroup,.h5peditor .cke_combo_button{border:1px solid #f5f5f5}.important-description-show{background:#f3d55a;padding:.2em .5em .2em 1.7em;margin-bottom:.5em;font-size:.9em;cursor:pointer;float:right;position:relative;line-height:normal;font-style:italic;font-weight:bold}.important-description-show:before{font-family:"H5P";font-style:normal;font-weight:normal;content:"";font-size:1.8em;position:absolute;left:0em;top:0em;line-height:.85em;vertical-align:top}.important-description-clear-right{display:block;clear:right}.h5peditor fieldset.common-fields-library-wrapper{width:100%;padding:0 1em 1em;box-sizing:border-box;height:20px;border:solid 1px #e2e5ee;border-radius:4px;margin-bottom:1em}.h5peditor fieldset.common-fields-library-wrapper>*{display:none}.h5peditor fieldset.common-fields-library-wrapper>legend{display:block;cursor:pointer;outline:none;color:#363b42;background-color:#fff;padding:10px;font-weight:bold;font-size:.875em}.h5peditor fieldset.common-fields-library-wrapper>legend:before{font-family:"H5P";content:"";margin-right:.5em}.h5peditor fieldset.common-fields-library-wrapper>legend:focus:before{outline:1px dotted #666}.h5peditor fieldset.common-fields-library-wrapper.expanded{height:auto}.h5peditor fieldset.common-fields-library-wrapper.expanded>*{display:block}.h5peditor fieldset.common-fields-library-wrapper.expanded>legend:before{content:""}.h5p-metadata-button-wrapper{display:flex;flex-direction:row;align-items:center;margin-top:-7px;margin-left:7px;cursor:pointer}.h5p-metadata-button-wrapper.inline-with-selector{display:inline-flex;margin-left:17px}.h5p-metadata-toggler{margin-left:-11px;height:14.5px;max-height:14.5px;padding:.217rem .3rem .217rem .217rem;font-size:.625em;font-weight:bold;letter-spacing:.025em;border:1px solid #b6cada;border-left:none;border-radius:4px;background:linear-gradient(#fff, #deeaf1);color:#356593;z-index:1;justify-content:center;align-content:center;line-height:1.5em}.h5p-metadata-button-tip{width:16.5px;height:16.5px;content:"";background:linear-gradient(-215deg, #fff, #deeaf1);border:1px solid #b6cada;border-right:none;border-top:none;border-radius:4px;transform:rotate(45deg);z-index:0}.h5p-metadata-button-wrapper:hover .h5p-metadata-toggler,.h5p-metadata-button-wrapper:hover .h5p-metadata-button-tip{border-color:#6d9fce}.h5p-metadata-button-wrapper:hover .h5p-metadata-toggler{background:linear-gradient(#f3f8fb, #cee5f3)}.h5p-metadata-button-wrapper:hover .h5p-metadata-button-tip{background:linear-gradient(-215deg, #f3f8fb, #cee5f3)}.h5p-metadata-button-wrapper:active .h5p-metadata-toggler,.h5p-metadata-button-wrapper:active .h5p-metadata-button-tip{color:#294f73;border-color:#6d9fce}.h5p-metadata-button-wrapper:active .h5p-metadata-toggler{background:linear-gradient(#f3f8fb, #bcd4e2)}.h5p-metadata-button-wrapper:active .h5p-metadata-button-tip{background:linear-gradient(-215deg, #f3f8fb, #bcd4e2)}#metadata-title-main-label{margin-top:0}.h5p-metadata-button{background:#fff;padding:10px;text-align:center;border-radius:5px;border:2px solid #6b6b6b;color:#6b6b6b;font-weight:bold;display:inline;cursor:pointer}.h5p-metadata-button:hover{border-color:#4a4a4a;color:#4a4a4a}.h5p-metadata-button:active{border-color:#000;color:#000}.h5p-metadata-button.inverted{border:2px solid #0a715e;color:#0a715e}.h5p-metadata-button.inverted:hover{border-color:#0d826c;color:#0d826c}.h5p-metadata-button.inverted:active{border-color:#095345;color:#095345}.h5p-metadata-icon-button{border:none;cursor:pointer;color:#6b6b6b;background:rgba(0,0,0,0);padding:0}.h5p-metadata-icon-button:hover{color:#4a4a4a}.h5p-metadata-icon-button:active{color:#000}.h5p-metadata-wrapper{display:inline-block;background-color:#fff;max-width:700px;width:calc(100% - 4em);text-align:left;border-bottom:20px solid rgba(0,0,0,0);background-clip:padding-box;max-height:calc(100% - 40px);overflow:auto;margin-bottom:20px}.h5p-metadata-wrapper .h5p-metadata-header{display:flex;border-bottom:1px solid #ced6e3;padding:1.5em}.h5p-metadata-wrapper .h5p-metadata-header .h5p-title-container{flex-grow:1;padding-left:3.5em;white-space:nowrap;overflow:hidden;margin-right:1%;position:relative}.h5p-metadata-wrapper .h5p-metadata-header .h5p-title-container h2{margin:0}.h5p-metadata-wrapper .h5p-metadata-header .h5p-title-container p{margin:.1em}.h5p-metadata-wrapper .h5p-metadata-header .h5p-title-container:before{position:absolute;font-family:"h5p-metadata-icons";content:"";left:0;top:0;font-size:2em;height:1.4em;line-height:1.3}.h5p-metadata-wrapper .h5p-save{border:solid 2px #0a715e;border-radius:.3rem;color:#fff;background-color:#0a715e;padding:.75rem;white-space:nowrap}.h5p-metadata-wrapper .h5p-save:hover{border-color:#0d826c;background-color:#0d826c}.h5p-metadata-wrapper .h5p-save:active{border-color:#095345;background-color:#095345}.h5p-metadata-wrapper .h5peditor-label{font-size:.8em;color:#333}.h5p-metadata-wrapper .h5peditor-field-description{color:#697484;margin-top:.35em;letter-spacing:.5px}.h5p-metadata-wrapper .copyright-form{margin-top:20px}.h5p-metadata-wrapper h2{font-size:1em;overflow:hidden;text-overflow:ellipsis}.h5p-metadata-wrapper p{font-size:.8333em;color:#697484;overflow:hidden;text-overflow:ellipsis;margin-bottom:0}.h5p-metadata-wrapper .errors p,.h5p-metadata-wrapper .h5p-errors p{color:#da0001;font-size:1em;white-space:normal;text-overflow:unset}.h5p-metadata-wrapper select.h5peditor-select,.h5p-metadata-wrapper input.h5peditor-text,.h5p-metadata-wrapper textarea{border:1px solid #b8c0cd;font-size:.833em;border-radius:.208em;box-shadow:none;font-family:"Open Sans",sans-serif}.h5p-metadata-wrapper select:focus,.h5p-metadata-wrapper input:focus,.h5p-metadata-wrapper textarea:focus{box-shadow:inset 0px 0px 10px rgba(0,0,0,.15)}.h5p-metadata-wrapper select{width:100%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper{display:flex;flex-wrap:wrap;margin:1.5em}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field{margin-bottom:0;width:100%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-license{width:49%;margin-right:1%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-licenseVersion{width:49%;margin-left:1%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-yearFrom{width:24%;margin-right:1%;white-space:nowrap}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-yearFrom .h5peditor-text{width:100%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-yearTo{width:23%;margin-right:1%;margin-left:1%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-yearTo .h5peditor-text{width:100%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-source{width:49%;margin-left:1%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label{justify-content:space-between}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle{background:none;border:none;cursor:pointer}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:before{font-family:"h5p-metadata-icons";content:"";margin-right:.5em;font-size:1.5em;vertical-align:middle}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:focus,.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:active,.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:hover{border:none}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:hover .h5p-a11y-title-text{text-decoration:underline}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-a11yTitle{transition:max-height .2s,margin .2s;overflow:hidden}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-a11yTitle.hide{max-height:0;margin:0}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-a11yTitle.hidden{display:none}.h5p-metadata-wrapper .field.group>.title{font-weight:400;background:#f6f6f6;color:#323232;border:solid 1px #ced6e3;border-radius:.208em}.h5p-metadata-wrapper .field.group.expanded>.title{border-radius:.208em .208em 0 0}.h5p-metadata-wrapper .field.group>.title:focus{border-color:#4d90fe}.h5p-metadata-wrapper .field.group>.content{border:solid 1px #ced6e3;border-radius:0 0 .208em .208em;padding:20px;border-top:0}.h5p-metadata-additional-information{width:100%;margin-top:1em}.h5p-metadata-additional-information .content.h5peditor-single{min-height:2em;border:1px solid #d0d0d1;border-top:none;background:#fff}.h5p-metadata-additional-information .title{font-weight:400;background:#f6f6f6;color:#323232;border:solid 1px #ced6e3;border-radius:.208em}.h5p-metadata-additional-information .title:focus{border-color:#4d90fe}.h5p-metadata-popup-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.85);z-index:101;text-align:center}.h5p-metadata-changelog{width:100%}.h5p-metadata-changelog .field-name-change.expanded .content{display:flex;flex-wrap:wrap}.h5p-metadata-changelog .field-name-change .field-name-date{width:49%;margin-bottom:.5em;margin-right:1%;margin-top:0}.h5p-metadata-changelog .field-name-change .field-name-date span{width:100%}.h5p-metadata-changelog .field-name-change .field-name-author{width:49%;margin-bottom:.5em;margin-left:1%;margin-top:0}.h5p-metadata-changelog .field-name-change .field-name-log{width:100%}.h5p-metadata-changelog .field-name-change .h5p-add-author:before{content:"+";margin-right:.7em}.h5p-metadata-changelog .field-name-change .h5p-cancel{margin-right:10px}.h5p-metadata-changelog .field-name-change .h5p-metadata-changelog-buttons{width:100%}.h5p-metadata-changelog .field-name-change .h5p-metadata-logged-changes{width:100%;margin-top:1em}.h5p-metadata-changelog .field-name-change .h5p-metadata-logged-changes.editing{display:none}.h5p-metadata-changelog .field-name-change .h5p-metadata-logged-changes .h5peditor-field-description{margin-bottom:0}.h5p-metadata-changelog .field-name-change .h5p-metadata-log-wrapper{margin-top:1em;border:solid 1px #ced6e3;border-radius:.208em;max-height:15.917rem;overflow-y:auto;padding:0 .5em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log{display:flex;margin-top:.5em;padding-bottom:.5em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log .h5p-metadata-delete{margin-left:2em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log .h5p-metadata-delete:after{font-family:"h5p-metadata-icons";content:"";font-size:1.2em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log .h5p-metadata-edit:after{font-family:"h5p-metadata-icons";content:"";font-size:1.2em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log-buttons{min-width:3em;line-height:2.5}.h5p-metadata-changelog .field-name-change .h5p-metadata-log:not(:last-child){border-bottom:solid 1px #ced6e3}.h5p-metadata-changelog .field-name-change .h5p-metadata-log-date{min-width:25%;font-size:.85em;font-style:italic;line-height:2.5}.h5p-metadata-changelog .field-name-change .h5p-metadata-description-wrapper{flex-grow:1;font-size:.85em;font-style:italic}.h5p-metadata-changelog .field-name-change .h5p-metadata-description-wrapper{font-weight:bolder}.h5p-metadata-changelog .field-name-change .h5p-metadata-log-author{font-weight:normal}.h5p-metadata-changelog .field-name-change .h5p-metadata-new-log-message{width:100%;background:#c5e7e1;padding:.5em;margin-bottom:1em;color:#0a715e}.h5p-metadata-author-widget{display:flex;flex-direction:column;border:solid 1px #ced6e3;border-radius:.208em;width:100%;padding:1em;margin-top:1em}.h5p-metadata-author-widget .h5p-save-author{border:solid 2px #0a715e;color:#fff;background-color:#0a715e}.h5p-metadata-author-widget .h5p-save-author:hover{border-color:#0d826c;color:#fff;background-color:#0d826c}.h5p-metadata-author-widget .h5p-save-author:active{border-color:#095345;color:#fff;background-color:#095345}.h5p-metadata-author-widget .h5p-author-data{display:flex;flex-direction:row;flex-wrap:nowrap}.h5p-metadata-author-widget .h5p-author-data>.field{margin-bottom:0}.h5p-metadata-author-widget .field-name-name{flex-grow:1;margin-right:2%;overflow:hidden;white-space:nowrap;min-width:49%}.h5p-metadata-author-widget .field-name-role{margin-top:0;margin-right:2%;width:25%;flex-grow:1;overflow:hidden;white-space:nowrap}.h5p-metadata-author-widget .authorList{margin-top:1.5em;white-space:nowrap}.h5p-metadata-author-widget .authorList li{display:inline;margin-right:.5em}.h5p-metadata-author-widget .authorList li span{margin-right:1em;font-style:italic}.h5p-metadata-author-widget .h5p-author-list-wrapper{margin-top:.5em}.h5p-metadata-author-widget .h5p-author-list-wrapper ul{margin:0;padding:0}.h5p-metadata-author-widget .h5p-author-list-wrapper li{display:inline-block;margin-right:2em;list-style:none;font-weight:bold;font-size:.8em}.h5p-metadata-author-widget .h5p-author-list-wrapper .h5p-metadata-role{font-style:italic;margin:0 .6em;font-weight:normal;font-size:.85em;color:#757575}.h5p-metadata-author-widget .h5p-author-list-wrapper button:after{font-family:"h5p-metadata-icons";content:"";font-size:1em;position:relative;top:-0.1em}.h5peditor-copypaste-wrap{float:right}.h5peditor>.h5peditor-copypaste-wrap{margin-bottom:14px}.h5peditor-copypaste-wrap.hidden{display:none}.h5peditor-clearfix{clear:both}.h5peditor-paste-button,.h5peditor-copy-button{border:1px solid #deeeec;padding:.5em .75em .75em .5em;margin-left:.5em;border-radius:.25em;cursor:pointer;background:#f2faff;line-height:.5em}.h5peditor-paste-button:hover,.h5peditor-copy-button:hover{border-color:#bbdae8}.h5peditor-paste-button:active,.h5peditor-copy-button:active{background-color:#deeffb}.h5peditor-paste-button.disabled,.h5peditor-copy-button.disabled{color:#707070;background-color:#f5f5f5;border-color:#ededed;cursor:not-allowed}.h5peditor-copy-button:before,.h5peditor-paste-button:before{font-family:"H5P";margin-right:5px;font-size:1.5em;position:relative;top:.2em;color:#2372b3}.h5peditor-copy-button:before{content:""}.h5peditor-paste-button:before{content:""}.h5peditor-copy-button.disabled:before,.h5peditor-paste-button.disabled:before{color:#707070}.h5peditor-copy-button.disabled:before{content:""}.h5peditor-paste-button.disabled:before{content:""}.h5p-hub .h5peditor-paste-button{font-family:"Open Sans",sans-serif;color:#fff;border:solid 1px #9fc8f4;padding:0 .75em .5em .75em;background:rgba(0,0,0,0);line-height:1;height:auto;margin-top:.675em;margin-right:.675em}.h5p-hub .h5peditor-paste-button:hover{background:#4b5460;border-color:#606a78}.h5p-hub .h5peditor-paste-button:active{background:#434b55}.h5p-hub .h5peditor-paste-button.disabled{border-color:#30353d;background:#30353d;color:#c2c2c2}.h5p-hub .h5peditor-paste-button:before{color:#9fc8f4}.h5p-hub .h5peditor-paste-button.disabled:before{color:#c3c3c3}@font-face{font-family:"h5p-fullscreen-bar";src:url(./fonts/h5p-fullscreen-bar.eot);src:url(./fonts/h5p-fullscreen-bar.eot#iefix) format("embedded-opentype"),url(./fonts/h5p-fullscreen-bar.ttf) format("truetype"),url(./fonts/h5p-fullscreen-bar.woff) format("woff"),url(./fonts/h5p-fullscreen-bar.svg#h5p) format("svg");font-weight:normal;font-style:normal}.h5peditor-form-manager-head{background:#f5f5f5;color:#414141;border-bottom:1px solid #dfdfdf;height:41px;line-height:40px;box-sizing:border-box;position:relative;display:flex;z-index:3;justify-content:space-between;align-items:flex-start;box-shadow:0px 2px 2px rgba(128,128,128,.15);padding:0 1em 0 .5em}.h5peditor-form-manager-button{background:rgba(0,0,0,0);padding:0;border:0;cursor:pointer;color:#414141;position:relative;white-space:nowrap;line-height:normal}.h5peditor-form-manager-button-inner{display:block;outline:none}.h5peditor-form-manager-breadcrumb{display:flex;min-width:0;flex-grow:1}.h5peditor-form-manager-proceed{display:none;background:#186df7;color:#fff;font-size:14px;font-weight:bold;font-family:Open Sans,sans-serif;border-radius:2px;margin-right:5px;margin-top:5px;padding:5px 10px}.h5peditor-form-manager-proceed:hover{background:#20588f}.h5peditor-form-manager-fullscreen{width:24px;height:24px;font-size:20px;margin-top:9px;margin-left:.25em}.h5peditor-form-manager-fullscreen .h5peditor-form-manager-button-inner:before{font-family:"h5p-fullscreen-bar";content:""}.h5peditor-form-manager-fullscreen:after{visibility:hidden;position:absolute;top:120%;right:-10%;z-index:3;padding:.25em .75em;background:#212121;color:#fff;white-space:nowrap;font-size:14px;box-shadow:0 0 .5em #858585;text-indent:0;font-weight:normal;pointer-events:none;outline:none;line-height:normal;content:attr(aria-label)}.h5peditor-form-manager-fullscreen:hover:after,.h5peditor-form-manager-fullscreen:focus:after{visibility:visible}.h5peditor-semi-fullscreen .h5peditor-form-manager-fullscreen .h5peditor-form-manager-button-inner:before{content:""}.h5peditor-semi-fullscreen .h5peditor-form-manager-proceed{display:block}.h5peditor-semi-fullscreen .h5peditor-form-manager-head{position:fixed;top:0;left:0;right:0;z-index:2}.form-manager-exit.form-manager-fullscreen .h5peditor-form-manager-button-inner:before{content:""}.h5peditor-form-manager-title{position:relative;min-width:20px;font-weight:bold;font-size:14px}.h5peditor-form-manager-title:before{font-family:"h5p-fullscreen-bar";content:"";font-size:1.2em;position:relative;top:.1em;margin-right:.25em;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.h5peditor-form-manager-title.dragtext:before{content:""}.h5peditor-form-manager-title.markthewords:before{content:""}.h5peditor-form-manager-title.multichoice:before{content:""}.h5peditor-form-manager-title.interactivevideo:before{content:""}.h5peditor-form-manager-title.audio:before{content:""}.h5peditor-form-manager-title.truefalse:before{content:""}.h5peditor-form-manager-title.dialogcards:before{content:""}.h5peditor-form-manager-title.questionnaire:before{content:""}.h5peditor-form-manager-title.coursepresentation:before{content:""}.h5peditor-form-manager-title.dragquestion:before{content:""}.h5peditor-form-manager-title.summary:before{content:""}.h5peditor-form-manager-title.singlechoiceset:before{content:""}.h5peditor-form-manager-title.blanks:before{content:""}.h5peditor-semi-fullscreen+.h5p-metadata-popup-overlay{position:fixed}.h5peditor-semi-fullscreen+.h5p-metadata-popup-overlay .h5p-metadata-wrapper{margin-top:20px !important}.h5peditor .h5peditor-language-switcher{float:right;white-space:nowrap;margin-bottom:1em}.h5peditor .h5peditor-language-switcher .language-label{padding:0 10px;font-size:15px}.h5peditor .h5peditor-language-switcher select{padding:6px 30px 6px 8px;font-size:15px}.h5peditor-language-notice{display:none;clear:both;font-size:14px;background:#dcf6ff;color:#295b7a;padding:10px 20px 10px 40px;margin:1em 0;line-height:1.5;position:relative}.h5peditor-language-notice:before{font-family:h5p;content:"";position:absolute;left:15px;font-size:1.125em}.h5peditor-language-notice.show{display:block}.h5peditor-language-notice .first{font-weight:bold}.h5peditor-language-notice a{text-decoration:underline}.h5p-loader__wrapper{width:100%;height:100%;flex:1;display:flex;align-items:center;padding:10px;min-width:180px}.h5p-loader__wrapper .h5p-loader__icon{border:8px solid #d0cfd4;border-bottom-color:#554e4a;border-radius:50%;width:40px;height:40px;animation:rotation linear 1s infinite;margin:0 auto}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.h5p-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}
+ul.list-unstyled{list-style:none;padding-left:0;margin:0}.field{margin:20px 0;font-size:16px;padding:0}.field:first-child{margin-top:0}.field:last-child{margin-bottom:0}.tree>.field.group:last-child{margin-bottom:0}.fields>.field.group{margin:10px 0}.fields>.field.group:first-child{margin-top:0}.fields>.field.group:last-child{margin-bottom:0}.field.boolean .h5peditor-label{display:inline}.field .library{border:0}.field.importance-high>.h5peditor-label-wrapper>.h5peditor-label{font-size:18px;color:#356593}.field .h5p-dialog-anchor{position:relative;width:100%}.common-fields-library-wrapper{margin:20px 0;border:none;margin:0;padding:0}.common-fields-library-wrapper:first-child{margin-top:0}.common-fields-library-wrapper:last-child{margin-bottom:0}.common-fields-library-wrapper .common-field-legend{display:none}.common>.h5peditor-label,.h5p-li>.list-item-title-bar,.group>.title{visibility:inherit;cursor:pointer}.h5p-li>.list-item-title-bar.importance-high,.group.importance-high>.title{background:#2579c6;border:1px solid #1f67a8;height:42px}.h5p-li>.list-item-title-bar.importance-high>.title,.h5p-li>.list-item-title-bar.importance-high>.h5peditor-label,.group.importance-high>.title{font-size:16px;font-weight:600;line-height:42px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.h5p-li>.list-item-title-bar,.group>.title{background:#747275;border:1px solid #636164;height:38px}.h5p-li>.list-item-title-bar.importance-medium>.h5peditor-label,.h5p-li>.list-item-title-bar>.h5peditor-label,.group>.title{font-size:16px;font-weight:600;color:#fff;line-height:38px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.common>.h5peditor-label,.h5p-li>.list-item-title-bar.importance-low,.group.importance-low>.title{background:#f5f5f5;height:38px;border:1px solid #d0d0d1}.common>.h5peditor-label,.h5p-li>.list-item-title-bar.importance-low>.title,.h5p-li>.list-item-title-bar.importance-low>.h5peditor-label,.group.importance-low>.title{font-size:16px;font-weight:400;color:#212121;line-height:38px}.group{border:none}.group>.title{padding:0 10px;outline:none}.group>.content{position:relative;display:none;margin:0;padding:20px;border:1px solid #d0d0d1;border-top:none;background:#fff}.group.importance-high>.title{color:#fff}.group.importance-low>.title{color:#212121}.group.importance-low>.title:focus:before{outline:1px dashed}.common .content,.content .content{background-color:#fcfcfc}.common .content .content,.content .content .content{background-color:#fff}.common .content .content .content,.content .content .content .content{background-color:#fcfcfc}.common .content .content .content .content,.content .content .content .content .content{background-color:#fff}.common .content .content .content .content .content,.content .content .content .content .content .content{background-color:#fcfcfc}.common .content .content .content .content .content .content,.content .content .content .content .content .content .content{background-color:#fff}.h5p-li>.list-item-title-bar{color:#fff}.h5p-li>.list-item-title-bar>.h5peditor-label{overflow:hidden;margin:0 54px 0 0;padding:0 10px;white-space:nowrap;line-height:38px;outline:none;text-overflow:ellipsis}.h5p-li>.list-item-title-bar>.list-actions{height:100%;float:right;position:relative}.h5p-li>.list-item-title-bar .remove{cursor:pointer;width:1.25em;height:38px;font-size:1.75em;display:inline-block}.h5p-li>.list-item-title-bar .remove:hover{opacity:1;text-decoration:none}.h5p-li>.list-item-title-bar .remove:after{font-family:"H5P";content:"";opacity:.7;display:inline-block;line-height:38px}.h5p-li>.list-item-title-bar .remove:hover:after{opacity:1}.h5p-li>.list-item-title-bar .order-group{text-align:center;float:right;background:#636164;font-size:16px;cursor:pointer}.h5p-li>.list-item-title-bar .order-up,.h5p-li>.list-item-title-bar .order-down{width:19px;height:19px;line-height:19px}.h5p-li>.list-item-title-bar .order-up:hover,.h5p-li>.list-item-title-bar .order-down:hover{background:#636164}.h5p-li>.list-item-title-bar .order-up:after,.h5p-li>.list-item-title-bar .order-down:after{font-family:"H5P";content:"";display:inline-block}.h5p-li>.list-item-title-bar .order-down:after{content:""}.h5p-li>.list-item-title-bar.importance-high>.title{border:none;margin:0 74px 0 0}.h5p-li>.list-item-title-bar.importance-high .remove{height:42px;line-height:42px;font-size:40px}.h5p-li>.list-item-title-bar.importance-high .remove:after{line-height:42px;opacity:.7}.h5p-li>.list-item-title-bar.importance-high .remove:hover:after{opacity:1}.h5p-li>.list-item-title-bar.importance-high .order-group{background:#1f67a8;font-size:18px}.h5p-li>.list-item-title-bar.importance-high .order-up,.h5p-li>.list-item-title-bar.importance-high .order-down{width:21px;height:21px;line-height:21px}.h5p-li>.list-item-title-bar.importance-high .order-up:hover,.h5p-li>.list-item-title-bar.importance-high .order-down:hover{background:#1f67a8}.h5p-li>.list-item-title-bar.importance-low>.title{border:none;margin:0 54px 0 0}.h5p-li>.list-item-title-bar.importance-low>.title:before{color:#212121}.h5p-li>.list-item-title-bar.importance-low>.title:focus:before{outline:1px dashed #212121}.h5p-li>.list-item-title-bar.importance-low .remove{height:38px;line-height:38px;font-size:30px}.h5p-li>.list-item-title-bar.importance-low .remove:after{line-height:38px}.h5p-li>.list-item-title-bar.importance-low .remove:after{color:#212121;opacity:.7}.h5p-li>.list-item-title-bar.importance-low .remove:hover:after{opacity:1}.h5p-li>.list-item-title-bar.importance-low .order-up,.h5p-li>.list-item-title-bar.importance-low .order-down{width:19px;height:19px;background:#d0d0d1;font-size:16px;line-height:19px}.h5p-li>.list-item-title-bar.importance-low .order-up:hover,.h5p-li>.list-item-title-bar.importance-low .order-down:hover{background:#deddde}.h5p-li>.list-item-title-bar.importance-low .order-up:after,.h5p-li>.list-item-title-bar.importance-low .order-down:after{color:#212121}.group.expanded>.content,.listgroup.expanded>.content{display:block}.listgroup>.list-item-title-bar>.h5peditor-label{cursor:pointer}.list-item-title-bar>.title:before,.group>.title:before{content:"";font-family:"H5P";margin-right:5px}.list-item-title-bar>.title:focus:before,.group>.title:focus:before{outline:1px dashed #fff}.listgroup.expanded>.list-item-title-bar>.h5peditor-label:before,.expanded>.title:before{content:""}.listgroup>.group.field{margin:0;padding:0;min-width:0}.content{display:block;margin:0;padding:20px;border:1px solid #d0d0d1;border-top:none;background:#fff}.common{margin-top:20px}.common>.h5peditor-label{margin:0;padding:0 10px;cursor:pointer;font-size:1em}.common>.h5peditor-label>.icon:before{content:"";font-family:"H5P";margin-right:5px}.common>.h5peditor-label:hover>.icon{opacity:1}.common>.h5peditor-label:focus{outline:none}.common>.h5peditor-label:focus>.icon:before{outline:1px dashed}.common>.fields{min-height:2em;padding:20px;border:1px solid #d0d0d1;border-top:none;background:#fff;position:relative}.common>.fields>.desc{margin:0;font-size:.875em;color:#666;float:left}.common>.fields p:first-child{margin-bottom:20px}.common.collapsed>.h5peditor-label>.icon:before{content:""}.common.collapsed>.fields{display:none}.common.hidden{display:none}.h5peditor-button[aria-label]:before{content:attr(aria-label);visibility:hidden;position:absolute;top:115%;right:-10%;z-index:2;padding:.25em .75em;background:#212121;color:#fff;white-space:nowrap;font-size:14px;line-height:1.5;box-shadow:0 0 .5em #858585}.h5peditor-button[aria-label]:hover:before{visibility:visible}.h5peditor-button[aria-label][aria-disabled=true]:before{display:none}.h5peditor .h5p-delete-image-button,.h5peditor .h5p-editing-image-button{background:linear-gradient(to bottom, #fff 0, #f2f2f2 100%);font-size:14px;color:#212121;line-height:28px;padding-right:20px;margin-right:.5em;height:30px;padding-left:0;font-weight:normal}.h5peditor .h5p-delete-image-button:hover:not([disabled]),.h5peditor .h5p-editing-image-button:hover:not([disabled]){background:linear-gradient(to bottom, #fff 0, #d0d0d1 100%);border-color:#999}.h5peditor .h5p-delete-image-button:before,.h5peditor .h5p-editing-image-button:before{font-family:"H5P";color:#666;padding-right:.3em;padding-left:.45em;vertical-align:middle;font-size:1.5em;line-height:.9}.h5peditor .h5p-delete-image-button:before{content:""}.h5peditor .h5p-editing-image-button:before{content:""}.h5peditor .h5p-delete-image-button.loading:before,.h5peditor .h5p-editing-image-button.loading:before{content:""}.h5peditor .h5p-delete-image-button.hidden,.h5peditor .h5p-editing-image-button.hidden,.h5peditor .h5p-copyright-button.hidden{display:none !important}.h5peditor .ui-dialog .h5p-delete-image-button,.h5peditor .ui-dialog .h5p-editing-image-button,.h5peditor .ui-dialog .h5p-copyright-button{padding-left:.5em}body.h5p-editor-image-popup{position:relative}.h5p-editing-image-popup-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);padding:3em 1em;box-sizing:border-box;z-index:102}#darkroom-icons{top:0;left:0}.h5p-editing-image-popup-background.hidden{display:none}.h5p-editing-image-popup{display:inline-block;position:relative;top:0;background:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.h5p-editing-image-header{padding:1em .75em}.h5p-editing-image{max-height:100%;max-width:100%}.h5p-editing-image.hidden{display:none}.h5p-editing-image-popup .darkroom-toolbar{position:relative;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:0}.h5p-editing-image-popup .darkroom-toolbar:before{content:initial}.h5p-editing-image-popup .darkroom-image-container{padding:32px 2em}.h5p-editing-image-popup .darkroom-image-container .canvas-container{box-shadow:0 0 8px 3px rgba(0,0,0,.6);margin:auto}.h5p-editing-image-header-title{display:inline-block;font-size:1.25em}.h5p-editing-image-header-buttons{display:inline-block;float:right}.h5p-editing-image-loading{padding:1em}.h5p-editing-image-loading.hidden{display:none}.h5p-editing-image-editing-container{background:#666}.h5p-editing-image-header-buttons button{padding:.5em 1.75em;margin:0 0 0 1em;border:1px solid #ccc;border-radius:.25em;color:#333;cursor:pointer;background:#f2f2f2;background:-webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);background:-ms-linear-gradient(top, #fff 0, #f2f2f2 100%)}.h5p-editing-image-header-buttons button:hover{background:#ededed}.h5p-editing-image-header-buttons .h5p-done{color:#fff;border-color:#20588f;background:#3673b5;background:-webkit-linear-gradient(top, #5A94D3 0, #3673B5 100%);background:-ms-linear-gradient(top, #5A94D3 0, #3673B5 100%)}.h5p-editing-image-header-buttons .h5p-done:hover{background:#3275bc;background:-webkit-linear-gradient(top, #3275bc 0, #285585 100%);background:-ms-linear-gradient(top, #3275bc 0, #285585 100%)}.h5p-editing-image-header-buttons .h5p-remove{background:none;border:none;color:#a00;padding-right:0;padding-left:0;border-radius:0}.h5p-editing-image-header-buttons .h5p-remove:hover{background:none;color:#e40000}.h5p-dnd__container{clear:both;margin-top:.5rem}.h5p-dnd__container.has-error .h5p-errors,.h5p-dnd__box.has-error .h5p-errors,.video-url-error-container.has-error .h5p-errors{margin-top:1em;display:flex;align-items:center}.h5p-dnd__container.has-error .h5p-errors:before,.h5p-dnd__box.has-error .h5p-errors:before,.video-url-error-container.has-error .h5p-errors:before{font-family:"H5P";content:"";font-size:1.5em;vertical-align:middle}.h5p-dnd__container .h5p-errors,.h5p-dnd__box .h5p-errors,.video-url-error-container .h5p-errors{display:none}.h5p-dnd__box{display:flex;flex-flow:row;align-items:stretch;justify-content:center;border:solid 2px #d0cfd4;border-radius:6px;flex:1;min-height:150px;position:relative;background:none;font-size:14px}.h5p-dnd__box--is-dashed{border:dashed 2px #d0cfd4}.h5p-dnd__box--is-inline{display:inline-flex}.h5p-dnd__box--has-image{flex-flow:column;width:min-content;min-height:auto;min-width:140px}.h5p-dnd__box:focus-visible{outline:none}.h5p-dnd__box:not(.h5p-dnd__box--is-uploading):hover{border:dashed 2px #acacac}.h5p-dnd__box--has-image:not(.h5p-dnd__box--is-uploading):hover,.h5p-dnd__box.h5p-dnd__box--is-focused:not(.h5p-dnd__box--is-uploading),.h5p-dnd__box:not(.h5p-dnd__box--is-uploading):focus,.h5p-dnd__box.h5p-dnd__box--is-dragging:not(.h5p-dnd__box--is-uploading){border:solid 2px #1670df}.h5p-dnd__box:focus:not(.h5p-dnd__box--has-image):not(.h5p-dnd__box--is-uploading):not(.h5p-dnd__box--is-inline) .h5p-dnd__column--is-highlighted{background:#fff}.h5p-dnd__box:focus:not(.h5p-dnd__box--has-image):not(.h5p-dnd__box--is-uploading):not(.h5p-dnd__box--is-inline) .h5p-dnd__column:not(.h5p-dnd__column--is-highlighted):not(.h5p-dnd__column--tight){background:#f6faff}.h5p-dnd__box__block{position:absolute;top:0;left:0;right:0;bottom:0;display:none;z-index:2}.h5p-dnd__box--is-dragging .h5p-dnd__box__block{display:block}.h5p-dnd__column{margin:10px;display:flex;flex-flow:column;align-items:center;justify-content:center;border-radius:6px;flex:1}.h5p-dnd__column--is-highlighted{background:#f6faff}.h5p-dnd__column--is-fixed{flex:0 0 150px}.h5p-dnd__column--is-full-width{flex:1}.h5p-dnd__column--show-when-focus{display:none}.h5p-dnd__column--is-padded{padding:0 20px}.h5p-dnd__column--is-padded-small{padding:0 10px}.h5p-dnd__column.h5p-dnd__column--is-padded-small{margin:0}.h5p-dnd__box--is-dragging .h5p-dnd__column--hide-when-focus{display:none}.h5p-dnd__box:not(.h5p-dnd__box--is-uploading).h5p-dnd__box--is-dragging .h5p-dnd__column--show-when-focus,.h5p-dnd__box:not(.h5p-dnd__box--is-uploading).h5p-dnd__box--has-image:focus .h5p-dnd__column--show-when-focus{display:flex}.h5p-dnd__column--tight{max-height:130px}.h5p-dnd__column--tight:has(.h5p-dnd__video-container){margin-right:0}.h5p-dnd__column__drag-text{margin-top:-5px}.h5p-dnd__btn{display:flex;align-items:center;justify-content:center;padding:8px 10px;gap:5px;border-radius:4px;border:1px solid #1f67a8;background:#2579c6;font-family:"Open Sans",sans-serif;font-size:1em;font-weight:600;color:#fff;cursor:pointer}.h5p-dnd__btn:focus{outline:solid 2px #1f67a8;outline-offset:2px}.h5p-dnd__btn:before{font-family:"H5P";content:"";vertical-align:middle;font-size:1.5em;line-height:.9;font-weight:400}.h5p-dnd__btn:hover{background:#1f67a8}.h5p-dnd__btn:focus{outline:solid 2px #1f67a8;outline-offset:2px}div:has(>.h5p-dnd__badge),div:has(>.h5p-dnd-nowrap),.h5p-dnd__column--is-padded:has(.h5p-dnd__badge){line-height:1.7}.h5p-dnd__badge{background:#e7e9ee;color:#434446;text-transform:uppercase;font-weight:400;font-size:12px;font-family:"Arial Black";border-radius:6px;padding:3px 8px;display:inline-flex;line-height:1.4}.h5p-dnd__badge .h5p-dnd__badge__separator{border-left:solid 2px rgba(67,68,70,.25);margin:3px 6px;overflow:hidden;display:inline-block;overflow:hidden;top:0;left:0;right:0;bottom:0;position:relative}.h5p-dnd__img{max-width:175px;max-height:120px;min-width:40px;min-height:40px;border-radius:6px;display:block}.h5p-dnd__img__container{position:relative;min-width:100%;display:flex;align-items:center;justify-content:center}.h5p-dnd__img__overlay{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:6px;background:#1670df;opacity:.9;color:#fff;display:none;cursor:pointer}.h5p-dnd__img__overlay:before{font-family:"H5P";content:"";font-size:2.5em}.h5p-dnd__img__container:hover .h5p-dnd__img__overlay,.h5p-dnd__box:focus:not(.h5p-dnd__box--is-uploading) .h5p-dnd__img__overlay,.h5p-dnd__box.h5p-dnd__box--is-dragging:not(.h5p-dnd__box--is-uploading) .h5p-dnd__img__overlay{display:flex;align-items:center;justify-content:center}.h5p-dnd__text{font-family:"Open Sans",sans-serif;font-size:14px;text-align:center;color:#454347}.h5p-dnd__upload-image-svg,.h5p-dnd__upload-audio-svg,.h5p-dnd__upload-video-svg{width:60px;height:43px;margin-bottom:13px}.h5p-dnd__upload-image-svg{background:url(./fonts/upload-image.svg) no-repeat}.h5p-dnd__upload-video-svg{background:url(./fonts/upload-video.svg) no-repeat}.h5p-dnd__upload-audio-svg{background:url(./fonts/upload-audio.svg) no-repeat}.h5p-dnd__play-icon-svg{background:url(./fonts/play-icon.svg) no-repeat;width:28px;height:29px}.h5p-dnd__drop-text{display:flex;flex-flow:column;align-items:center;justify-content:center;font-size:.9em}.h5p-dnd__drop-text:before{font-size:3.9em;font-family:"H5P";content:"";color:#3b435a;line-height:.9;margin-bottom:10px}.input-container{display:flex;align-items:center;border:solid 1px #d0d0d1;padding:3px;width:100%;border-radius:2px;background:#fff;gap:5px}.input-container:has(.input-video:focus){border:solid 1px #1570df}.h5p-dnd__av-container .h5p-dnd__box__url.h5p-dnd__box__video-paste .input-container input[type=text].input-video{border:0;flex:1;outline:0;font-size:1em;box-shadow:none}.h5p-dnd__av-container .h5p-dnd__box__url.h5p-dnd__box__video-paste .input-container input[type=text].input-video:focus{background:none;box-shadow:none}.video-url-error-container{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-bottom:5px;width:100%}.video-url-error-container.hidden{display:none}.text-muted{color:#454347;text-align:center;font-family:"Open Sans",sans-serif;font-size:.85em;font-weight:400;line-height:normal}.text-center{text-align:center}.h5p-dnd__box__title{color:#454347;text-align:center;font-size:16px;font-weight:600;font-family:"Open Sans",sans-serif}.h5p-dnd__box.h5p-dnd__box__url,.h5p-dnd__box__url{display:flex;flex-flow:column;align-items:center;justify-content:center;color:#454347;font-size:14px;border-radius:6px;flex:1;min-height:169px;position:relative;background:none;padding:10px;gap:7px;min-width:271px;box-sizing:border-box}.h5p-dnd__box.h5p-dnd__box__url:focus:not(.h5p-dnd__box__video-paste):not(.h5p-dnd__box--is-dragging):not(.h5p-dnd__box--is-uploading),.h5p-dnd__box.h5p-dnd__box__url:focus-within:not(.h5p-dnd__box__video-paste):not(.h5p-dnd__box--is-dragging):not(.h5p-dnd__box--is-uploading),.h5p-dnd__box__url:focus:not(.h5p-dnd__box__video-paste):not(.h5p-dnd__box--is-dragging):not(.h5p-dnd__box--is-uploading),.h5p-dnd__box__url:focus-within:not(.h5p-dnd__box__video-paste):not(.h5p-dnd__box--is-dragging):not(.h5p-dnd__box--is-uploading){background:#f6faff;border:solid 2px #1570df}.h5p-dnd__box.h5p-dnd__box__url:focus-visible:not(.h5p-dnd__box__video-paste):not(.h5p-dnd__box--is-uploading),.h5p-dnd__box__url:focus-visible:not(.h5p-dnd__box__video-paste):not(.h5p-dnd__box--is-uploading){outline:0;border:solid 2px #1570df}.h5p-dnd__box.h5p-dnd__box__url.h5p-dnd__box__video-paste,.h5p-dnd__box__url.h5p-dnd__box__video-paste{border:solid 1px #d0cfd4;padding:20px}.h5p-dnd__box.h5p-dnd__box__action{flex:2}.h5p-dnd__box.h5p-dnd__box__video-paste{flex:1 0 fit-content}.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url{height:154px;min-height:110px;min-width:260px}.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url .h5p-dnd__upload-audio-svg,.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url .h5p-dnd__upload-video-svg{display:none}.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url.h5p-dnd__box.has-error{height:auto}.h5p-dnd__box--is-dashed:not(.h5p-dnd__box--is-uploading):hover{border:dashed 2px #acacac}.h5p-dnd__row{display:flex;flex:1;align-items:center;justify-content:center;width:100%}.h5p-bold{font-weight:700}.divider{border-top:solid 1px #d0cfd4;width:35%;margin:0 10px}.h5p-dnd__box--has-video{flex-flow:column;width:100%}.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider) .h5p-dnd__box--has-video:focus .h5p-dnd__video-container{background:#1670df}.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider) .h5p-dnd__box--has-video:focus .h5p-dnd__video-container:before{font-family:"H5P";content:"";font-size:2.5em}.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider) .h5p-dnd__box--has-video:focus .h5p-dnd__video-container .h5p-dnd__video-overlay{display:none}.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider) .h5p-dnd__video-container{cursor:pointer}.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider) .h5p-dnd__video-container:hover{background:#1670df}.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider) .h5p-dnd__video-container:hover:before{font-family:"H5P";content:"";font-size:2.5em}.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider) .h5p-dnd__video-container:hover .h5p-dnd__video-overlay{display:none}.h5p-dnd__videobox-wrapper--is-provider .h5p-dnd__box--has-video:focus,.h5p-dnd__videobox-wrapper--is-provider .h5p-dnd__box--has-video:hover{border:solid 2px #d0cfd4}.h5p-dnd__videobox-wrapper--has-label{min-width:400px;flex:1}.h5p-dnd__video-container{width:100%;height:100%;min-height:130px;background:#1b1b1b;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff}.h5p-dnd__video-overlay{display:flex;flex-flow:column;justify-content:center;align-items:center;gap:10px}.h5p-dnd__box--has-video.h5p-dnd__box--is-dragging .h5p-dnd__video-container{background:#1670df}.h5p-dnd__box:not(.h5p-dnd__box--is-uploading).h5p-dnd__box--has-image:focus .h5p-dnd__column--show-when-focus,.h5p-dnd__box:not(.h5p-dnd__box--is-uploading).h5p-dnd__box--has-video:focus .h5p-dnd__column--show-when-focus{display:flex}.h5p-dnd__av-container{display:flex;align-items:flex-start;gap:11px;flex-flow:row wrap;margin-bottom:20px;container:h5p-dnd__av-container/inline-size}.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider)~.h5p-dnd__box__video-paste,.h5p-dnd__box--is-dragging+.h5p-dnd__box__video-paste{display:none}.h5p-dnd__videobox-wrapper--is-provider+.h5p-dnd__box__url{display:none}.h5p-dnd__box--is-uploading+.h5p-dnd__box__video-paste{display:none}.h5p-dnd__videobox-wrapper{width:195px;text-align:center}.h5p-dnd__video-quality{text-align:left;height:130px;display:flex;flex-flow:column;justify-content:space-between;box-sizing:border-box;border-left:solid 1px #ccc;padding:0 10px}.h5p-dnd__video-quality-title{font-size:14px}.h5p-dnd__video-quality-description{font-size:11px;line-height:normal;display:inline-block;font-family:"Open Sans",sans-serif}.h5p-dnd__box__url.h5p-dnd__box--is-dragging .h5p-dnd__column.h5p-dnd__column--is-highlighted{width:100%;margin:0}.h5p-dnd__btn__insert-url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:150px}.h5p-dnd__btn__insert-url:before{content:""}@media(max-width: 525px){.h5p-dnd__box{flex-flow:column}}.h5p-dnd__box__url{container:h5p-dnd__box__url/inline-size}.h5p-dnd__row--when-wide,.h5p-dnd__column--when-wide{display:none}.h5p-dnd__row:has(.input-container),.h5p-dnd__row:has(.video-url-error-container){flex:0}.h5p-dnd__column--no-margin,.h5p-dnd__column--no-margin.h5p-dnd__column{margin:0}@container h5p-dnd__av-container (min-width: 760px){.h5p-dnd__box.h5p-dnd__box__action{flex-flow:row;align-items:stretch;padding:0}.h5p-dnd__row--when-wide,.h5p-dnd__column--when-wide{display:flex}.h5p-dnd__row--when-small,.h5p-dnd__column--when-small{display:none}.h5p-dnd__box.h5p-dnd__box__action,.h5p-dnd__box__action{background:#fff}}@container h5p-dnd__av-container (max-width: 760px){.h5p-dnd__badge,.h5p-dnd__column,.h5p-dnd__row{font-size:.85em}.text-muted{font-size:1em}.h5p-dnd__btn__insert-url{max-width:120px}}@container h5p-dnd__av-container (max-width: 250px){.h5p-dnd__box__url,.h5p-dnd__box.h5p-dnd__box__url,.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url{min-width:0;flex-basis:100%}.h5p-dnd__btn__insert-url{max-width:90px}.h5p-dnd__box__url.h5p-dnd__box__video-paste{padding:10px}}.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url.h5p-dnd__box.h5p-dnd__box__action{flex-flow:column;align-items:center;padding:10px}.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url .h5p-dnd__row--when-wide,.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url .h5p-dnd__column--when-wide{display:none}.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url .h5p-dnd__row--when-small,.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url .h5p-dnd__column--when-small{display:flex}.h5p-dnd-nowrap{white-space:nowrap}.h5p-vtab-wrapper>.h5p-vtab-forms .h5p-remove:after{color:#d0d0d1}html,body{margin:0;padding:0;color:#212121;font-family:"Open Sans",sans-serif;max-width:960px;position:relative}a{text-decoration:none}.offsite{left:-9999px;opacity:0;position:absolute;top:0}.h5peditor{font-size:16px}.h5peditor .h5p-more-libraries{font-size:.875em;margin-top:.4em}.h5peditor .h5peditor-single>.field.library{border:0;padding:0}.h5peditor .cke_dialog_background_cover{width:100% !important;height:100% !important}.h5peditor .errors p,.h5peditor .h5p-errors{color:#da0001;white-space:normal}.h5peditor textarea{resize:vertical}.h5peditor .h5p-editor-flex-wrapper{display:flex;flex-direction:row}.h5peditor .h5p-editor-flex-wrapper.has-button-collapse{align-items:flex-end;margin-bottom:.5rem;width:100%}.h5peditor .h5p-editor-flex-wrapper.has-button-collapse.has-label{justify-content:space-between;gap:.5rem}.h5peditor .h5p-editor-flex-wrapper.has-button-collapse:not(.has-label){justify-content:flex-end}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse{align-items:center;background-color:#228380;background-image:none;border:3px solid #228380;border-radius:.4rem;box-sizing:border-box;display:grid;font-size:.815rem;font-weight:bold;grid-template-columns:auto 1fr;height:2.6rem;line-height:1.2rem;margin:0;padding:0 .6rem 0 .2rem}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse .label{white-space:nowrap}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse.collapsed .icon::before{content:"";font-family:"H5P";font-size:1.2rem;font-weight:normal;padding:0 .2rem 0 .2rem;vertical-align:middle}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse:not(.collapsed) .icon::before{content:"";font-family:"H5P";font-size:1.2rem;font-weight:normal;padding:0 .2rem 0 .2rem;vertical-align:middle}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse:hover:not([disabled]){background-color:#228380;background-image:none;border:3px solid #4dc2bf}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse.no-label{grid-template-columns:auto;padding:0 .2rem;width:auto}.h5peditor .h5p-editor-flex-wrapper .h5peditor-button-collapse.no-label .label{display:none}.h5peditor .h5peditor-label-wrapper{display:flex;flex-direction:row}.h5peditor .has-important-description .h5peditor-field-description{display:none}.h5peditor .has-important-description .h5peditor-label-wrapper{float:left}.h5peditor .important-description-visible .h5peditor-field-important-description{display:block}.h5peditor .important-description-visible .h5peditor-label-wrapper{float:none}.h5peditor .important-description-visible .important-description-show{display:none}.h5peditor textarea,.h5peditor .h5peditor-text,.h5peditor .ckeditor{box-shadow:inset 0px 0px 5px rgba(0,0,0,.12);box-sizing:border-box;margin:0;padding:10px;min-height:40px;border:1px solid #d0d0d1;background:#fff;outline:none;font-size:16px;word-wrap:break-word}.h5peditor textarea a,.h5peditor .h5peditor-text a,.h5peditor .ckeditor a{text-decoration:underline}.h5peditor textarea figure.table,.h5peditor .h5peditor-text figure.table,.h5peditor .ckeditor figure.table{display:table;table-layout:fixed;margin:0 auto;padding:0;float:left}.h5peditor textarea figure.table table,.h5peditor .h5peditor-text figure.table table,.h5peditor .ckeditor figure.table table{border-collapse:collapse;height:100%;width:100%;border-spacing:0;border-width:1px;border-color:#494949}.h5peditor textarea figure.table table td,.h5peditor textarea figure.table table th,.h5peditor .h5peditor-text figure.table table td,.h5peditor .h5peditor-text figure.table table th,.h5peditor .ckeditor figure.table table td,.h5peditor .ckeditor figure.table table th{padding:1px;border-color:#494949;border-bottom-style:solid}.h5peditor textarea figure.table table td,.h5peditor .h5peditor-text figure.table table td,.h5peditor .ckeditor figure.table table td{border-width:.083em}.h5peditor textarea figure.table table th,.h5peditor .h5peditor-text figure.table table th,.h5peditor .ckeditor figure.table table th{border-width:.167em}.h5peditor textarea figure.table table tr:last-child>td,.h5peditor .h5peditor-text figure.table table tr:last-child>td,.h5peditor .ckeditor figure.table table tr:last-child>td{border-bottom-style:none}.h5peditor textarea figure.table figcaption,.h5peditor .h5peditor-text figure.table figcaption,.h5peditor .ckeditor figure.table figcaption{background-color:rgba(0,0,0,0);caption-side:top;color:#333;display:table-caption;font-size:.75em;outline-offset:-1px;padding:.6em;text-align:center;word-break:break-word}.h5peditor textarea .table-overflow-protection,.h5peditor .h5peditor-text .table-overflow-protection,.h5peditor .ckeditor .table-overflow-protection{clear:both}.h5peditor textarea.error,.h5peditor .h5peditor-text.error,.h5peditor .ckeditor.error{border-color:red}.h5peditor .ck-content figure.table{float:left}.h5peditor .ck-content figure.table table{border-width:1px;border-color:#494949;border-style:none}.h5peditor .ck-content figure.table table td,.h5peditor .ck-content figure.table table th{padding:1px;border-style:none;border-color:#494949;border-bottom-style:solid}.h5peditor .ck-content figure.table table td{border-width:.083em}.h5peditor .ck-content figure.table table th{border-width:.167em;background-color:rgba(0,0,0,0)}.h5peditor .ck-content figure.table table tr:last-child>td{border-bottom-style:none}.h5peditor .ck-content figure.table figcaption{background-color:rgba(0,0,0,0)}.h5peditor .h5peditor-text,.h5peditor textarea{width:100%;box-sizing:border-box}.h5peditor .h5peditor-text.error,.h5peditor textarea.error{border-color:red}.h5peditor .ck a{text-decoration:underline}.h5peditor .ck .ck-font-size-dropdown .ck-dropdown__panel,.h5peditor .ck .ck-text-fragment-language-dropdown .ck-dropdown__panel{max-height:20em;overflow-y:scroll}.h5peditor .ck .ck-fontsize-option .ck-button__label{line-height:normal !important}.h5peditor .ck .ck-content pre{background:initial;border:initial;border-radius:initial;padding:0}.h5peditor textarea:focus::-webkit-input-placeholder,.h5peditor input:focus::-webkit-input-placeholder{color:#fff}.h5peditor textarea:focus:-moz-placeholder,.h5peditor input:focus:-moz-placeholder{color:#fff}.h5peditor textarea:focus::-moz-placeholder,.h5peditor input:focus::-moz-placeholder{color:#fff}.h5peditor textarea:focus:-ms-input-placeholder,.h5peditor input:focus:-ms-input-placeholder{color:#fff}.h5peditor textarea:focus.h5peditor-ckeditor-placeholder,.h5peditor input:focus.h5peditor-ckeditor-placeholder{color:#fff}.h5peditor ::-webkit-input-placeholder{color:#858585}.h5peditor :-moz-placeholder{color:#858585}.h5peditor ::-moz-placeholder{color:#858585}.h5peditor :-ms-input-placeholder{color:#858585}.h5peditor .h5peditor-ckeditor-placeholder{color:#858585}.h5peditor>select,.h5peditor .h5peditor-language-switcher select,.h5peditor h5peditor-select,.h5peditor .field>select{padding:10px 30px 10px 8px;font-family:"Open Sans",sans-serif;font-size:16px;border:1px solid #d0d0d1;background:#fff url(a1aff8c82bc779d09357.png) no-repeat;background-position:calc(100% - 10px);box-shadow:inset 0px 0px 5px rgba(0,0,0,.12);-moz-appearance:none;-webkit-appearance:none}.h5peditor>select:disabled,.h5peditor .h5peditor-language-switcher select:disabled,.h5peditor h5peditor-select:disabled,.h5peditor .field>select:disabled{background-color:#efefef}.h5peditor>select{margin-bottom:13px;margin-right:20px}.h5peditor select::-ms-expand{display:none}.h5peditor a:focus{outline:none}.h5peditor textarea:focus,.h5peditor .h5peditor-text:focus{outline:none;background-color:#fff;border-color:#53a0ff}.h5peditor .h5p-ul{padding:0;margin:0;list-style:none}.h5peditor .h5p-ul .h5p-li{margin:10px 0;padding:0;list-style:none}.h5peditor .h5p-ul .h5p-li:first-child{margin-top:0}.h5peditor .h5p-ul .h5p-li:last-child{margin-bottom:0}.h5peditor .h5p-ul .h5p-li.placeholder{box-sizing:border-box;background:#e8f2fa;border:dashed 2px #2782d1}.h5peditor .h5p-ul .h5p-li:hover{text-decoration:none}.h5peditor .h5p-ul .h5p-li:nth-child(2).moving{margin-top:0}.h5peditor .h5p-ul .h5p-li:nth-last-child(2).placeholder{margin-bottom:0}.h5peditor .dimensions input,.h5peditor .coordinates input,.h5peditor .number input{width:75px}.h5peditor .number input[type=range]{width:300px;float:left;margin:7px 8px 0 0}.h5peditor .h5p-errors{clear:both}.h5peditor .h5p-add-file{float:left;position:relative;background:rgba(0,0,0,0);border:2px dashed #ddd;color:#ddd;margin:.5em;width:6em;height:4.5em;cursor:pointer;outline:none;box-sizing:border-box;-moz-box-sizing:border-box}.h5peditor .h5p-add-file:focus,.h5peditor .h5p-add-file:hover{color:#999;border-color:#999}.h5peditor .h5p-add-file.hidden{visibility:hidden}.h5peditor .h5p-add-file:after{position:absolute;content:"+";font-size:2em;line-height:2.2em;width:100%;height:100%;text-align:center}.h5peditor .h5p-add-dialog{position:inherit;z-index:1;visibility:hidden;opacity:0;background:#fff;margin-bottom:1rem;box-sizing:border-box;-moz-box-sizing:border-box;transition:visibility 0s .2s,opacity .2s}.h5peditor .h5p-add-dialog.h5p-open{visibility:visible;opacity:1;transition:visibility 0s 0s,opacity .2s}.h5peditor .h5p-add-dialog .h5p-add-dialog-table{overflow:hidden;position:relative}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tablist{display:inline-flex;border-left:1px solid #d0cfd4}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tablist:has(~.av-tabpanel.has_content) .av-tab:not(.selected){opacity:.5;cursor:not-allowed;pointer-events:none}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tab{cursor:pointer;padding:.5em .75em;border-top:1px solid #d0cfd4;border-right:1px solid #d0cfd4;position:relative;font-weight:600;font-size:15px;background:#e7e9ee;z-index:1}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tab::before{font-family:"H5P";color:#297bc7;vertical-align:middle;font-size:1.8em;margin-right:4px}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tab.selected{color:#000;background:#fff}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tab.selected::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:#fff}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tabpanel{border:1px solid #d0cfd4;border-radius:0 0 5px 5px;margin-top:1px;position:relative;padding:1em;top:-1px}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tabpanel h3{margin:0 0 1em 0}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .av-tabpanel .h5p-file-drop-upload{width:90px;margin:0}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box{float:left;padding:0;width:60%;margin-right:5%;margin-left:4%;text-align:left;margin-top:30px}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child{width:22%;margin-left:3%;margin-right:1%}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child h3{text-align:center}.h5peditor .h5p-add-dialog .h5p-add-dialog-table h3{color:#666;font-size:1em;margin:1.2em 0;line-height:1.1em}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description{color:#bbb}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper{background-color:#f5f5f5;border:1px solid #bbb;padding:15px 15px 15px 60px;position:relative}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper:before{font-family:"H5P";position:absolute;left:0;top:.083em;font-size:3.8em;line-height:1}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper.video:before{content:"";color:#dd0505}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper.audio:before{content:"";color:#747275}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-url-wrapper input{border-color:#bbb;text-align:left;padding-left:20px}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload{position:relative;width:70%;height:90px;margin:0 15%;float:left;background-color:#f5f5f5;text-align:center;cursor:pointer;border:1px solid #bbb}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload .h5p-file-drop-upload-inner{border:2px dashed #bbb;background-color:#fff;position:absolute;top:3px;bottom:3px;left:3px;right:3px}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload .h5p-file-drop-upload-inner:after{font-family:"H5P";line-height:1.4em;font-size:3.5em;color:#bbb}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload .h5p-file-drop-upload-inner.video:after{content:""}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload .h5p-file-drop-upload-inner.audio:after{content:""}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload:hover .h5p-file-drop-upload-inner:after,.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-file-drop-upload.over .h5p-file-drop-upload-inner:after{color:#999}.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical{float:left;position:relative;width:5%;height:250px}.h5peditor .h5p-add-dialog .h5p-dialog-box{text-align:center;padding:1em .5em}.h5peditor .h5p-add-dialog .h5p-buttons{padding:.5em;border-top:1px solid #cdcdcd;background:#ddd;text-align:right}.h5peditor .h5p-or{border-bottom:1px solid #cdcdcd;padding:0;margin:0 1em;text-align:center;height:.5em;line-height:1em}.h5peditor .h5p-or>span{background:#fff;padding:0 .5em}.h5peditor .h5p-or-vertical{float:left;position:relative;width:50px;height:80px}.h5peditor .h5p-or-vertical .h5p-or-vertical-line{position:absolute;margin:10px 0;left:49%;top:0;bottom:0;width:1px;background:#ccc;z-index:1}.h5peditor .h5p-or-vertical .h5p-or-vertical-word-wrapper{text-align:center;height:18px;position:absolute;left:0;right:0;top:22%;margin-top:-12px;z-index:2}.h5peditor .h5p-or-vertical .h5p-or-vertical-word-wrapper .h5p-or-vertical-word{color:#999;font-weight:bold;font-size:18px;padding:3px;background:#fff}.h5peditor .h5p-file-url{text-align:center}.h5peditor .h5p-thumbnail{margin:.5em;width:6em;height:4.5em;display:block;float:left;position:relative;box-shadow:0 0 10px 0 #666;border:1px solid #fff;box-sizing:border-box;-moz-box-sizing:border-box}.h5peditor .h5p-thumbnail .h5p-remove{position:absolute;top:0;right:0;cursor:pointer;outline:none;width:1.6em;height:1.6em;line-height:1.6em;overflow:hidden;text-indent:-0.4em;padding:.065em;opacity:.6}.h5peditor .h5p-thumbnail .h5p-remove:hover,.h5peditor .h5p-thumbnail .h5p-remove:focus{opacity:1}.h5peditor .h5p-thumbnail .h5p-remove:after{font-family:"H5P";font-size:2em;color:#fff;content:"";opacity:.6}.h5peditor .h5p-type{position:absolute;width:100%;height:100%;font-size:1.1em;line-height:4em;display:block;text-align:center;background:#000;color:#fff;cursor:pointer}.h5peditor .file{position:relative;float:left;margin-bottom:0;max-width:100%}.h5peditor .file.authorList{float:none}.h5peditor .file.field{float:none}.h5peditor .file .thumbnail{display:inline-block;margin:10px 10px 10px 0;box-shadow:0 0 10px 0 #666;border:1px solid #fff;cursor:pointer;max-width:100%;min-width:1em;min-height:1em;background:#fff url(ae8568c2320881fd5899.png) repeat}.h5peditor .file .thumbnail:focus{box-shadow:0 0 10px 0 #222}.h5peditor .file .add{display:inline-block;cursor:pointer;padding:.5em 1.5em .5em 3em;background:linear-gradient(to bottom, #fbfbfb 0, #f2f2f2 100%);border:1px solid #d0d0d1;border-radius:.25em;color:#222;font-weight:bold;line-height:normal}.h5peditor .file .add:hover{background:#ededed}.h5peditor .file .add:focus{box-shadow:0 0 16px 0 rgba(133,188,255,.84)}.h5peditor .file .add .h5peditor-field-file-upload-text:before{font-family:"H5P";content:"";line-height:1;color:#39c943;font-size:2em;position:absolute;left:.3em;top:.1em}.h5peditor .file .remove{display:block;position:absolute;top:7px;right:7px;cursor:pointer}.h5peditor .file .remove:focus:before{opacity:1}.h5peditor .file .remove:before{font-family:"H5P";font-size:1.4em;color:#fff;content:"";opacity:.6;text-shadow:rgba(0,0,0,.4) 0 0 4px,rgba(0,0,0,.4) 0 0 4px,rgba(0,0,0,.4) 0 0 4px}.h5peditor .file .remove:hover{text-decoration:none}.h5peditor .file .remove:hover:before{color:#fff;opacity:1;text-shadow:rgba(0,0,0,.4) 0 0 4px,rgba(0,0,0,.4) 0 0 4px,rgba(0,0,0,.4) 0 0 4px}.h5peditor .file img{max-width:100%;vertical-align:bottom;max-height:100px}.h5peditor .file .h5p-av-row{overflow:auto;margin-bottom:.5em}.h5peditor .file .h5p-av-row .h5p-thumbnail{display:table-cell}.h5peditor .file .h5p-av-row .h5p-video-quality{display:table-cell;overflow:hidden;width:10000px;padding-left:1em}.h5peditor .file .h5p-av-row .h5p-video-quality input.h5peditor-text{width:100%}.h5peditor .file .h5p-av-cell{overflow:auto;float:left}.h5peditor .video .file,.h5peditor .audio .file{position:static;overflow:visible}.h5peditor .video .file .thumbnail,.h5peditor .video .file .add,.h5peditor .audio .file .thumbnail,.h5peditor .audio .file .add{float:left}.h5peditor .video .file .add,.h5peditor .audio .file .add{margin-top:8px}.h5peditor .video .file .thumbnail,.h5peditor .audio .file .thumbnail{overflow:visible;position:relative;cursor:auto}.h5peditor .video .file .remove,.h5peditor .audio .file .remove{top:-3px;right:-5px}.h5peditor .video .file .type,.h5peditor .audio .file .type{padding:16px 8px 4px;background:#000;color:#fff;font-size:10px}.h5peditor .video .file .h5peditor-uploading,.h5peditor .audio .file .h5peditor-uploading{float:left;margin:.5em}.h5peditor .libwrap{margin-top:20px}.h5peditor .libwrap.no-margin,.h5peditor .libwrap:empty{margin-top:0}.h5peditor input[type=checkbox]{margin:4px 4px 4px 0;vertical-align:bottom}.h5peditor .moving{position:absolute;z-index:1;opacity:.8;-webkit-transform:translateZ(0)}.h5peditor .moving .h5peditor-label{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.h5peditor .h5peditor-uploading,.h5peditor .h5peditor-loading{padding-top:10px;padding-bottom:6px;font-size:14px}.h5peditor .h5peditor-loading{padding:.875em 0 1em 3.25em;font-style:italic}.h5peditor .h5p-copyright-button{border-radius:.25em;height:30px;background:linear-gradient(to bottom, #fff 0, #f2f2f2 100%);border:1px solid #d0d0d1;color:#212121;font-size:14px;line-height:28px;padding-right:20px;padding-left:0;clear:both;font-weight:normal}.h5peditor .h5p-copyright-button:before{font-family:"H5P";content:"";color:#666;padding:0 .25em 0 .25em;vertical-align:middle;font-size:1.5em;line-height:.9}.h5peditor .h5p-copyright-button:hover:not([disabled]){background:linear-gradient(to bottom, #fff 0, #d0d0d1 100%);text-decoration:none;border-color:#999}.h5peditor .h5p-copyright-button:focus{box-shadow:0 0 16px 0 rgba(133,188,255,.84)}.h5peditor .field.file>.h5p-copyright-button,.h5peditor .field.video>.h5p-copyright-button,.h5peditor .field.audio>.h5p-copyright-button{float:left}.h5peditor .h5p-editor-dialog{position:absolute;z-index:2;margin:5.5em 0 1em;visibility:hidden;opacity:0;height:0;overflow:hidden;background:#fff;box-shadow:0 0 8px #666;transition:visibility 0s .2s,height 0s .2s,opacity .2s,margin-top .2s}.h5peditor .h5p-editor-dialog.h5p-open{margin-top:3.5em;visibility:visible;opacity:1;height:auto;transition:visibility 0s 0s,height 0s 0s,opacity .2s,margin-top .2s}.h5peditor .h5p-editor-dialog>.field{margin:0;border:0;box-shadow:none}.h5peditor .h5p-editor-dialog .content{border:none;background:#fff}.h5peditor .h5p-editor-dialog .content .h5peditor-label{font-size:18px;font-weight:600}.h5peditor .h5p-editor-dialog .h5p-close{color:#494949}.h5peditor .h5p-editor-dialog .h5p-close:before{font-size:2em;right:-0.125em;top:0;position:absolute;z-index:1;font-family:"H5P";content:"";line-height:1em;transition:scale .2s}.h5peditor .h5p-editor-dialog .h5p-close:hover:before{scale:1.1,1.1}.h5peditor .h5p-li>.content>.library{border:0;padding:0}.ck-powered-by-balloon{display:none !important}.h5p-editor-dialog.h5p-dialog-wide{width:90%;border-radius:.208em}.h5peditor-button-textual{border-radius:.25em;background:#747275;background-image:linear-gradient(#7b797c 50%, transparent 50%, transparent);display:inline-block;width:auto;margin:10px 0 0 0;padding:0 20px;box-sizing:border-box;height:38px;border:1px solid #d0d0d1;font-size:16px;font-family:"Open Sans",sans-serif;line-height:38px;color:#fff;cursor:pointer;font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.h5peditor-button-textual:focus{box-shadow:0 0 16px 0 rgba(133,188,255,.84)}.h5peditor-button-textual:before,.h5peditor-button-textual:after{color:#fff}.h5peditor-button-textual .h5p-editing-image-button:before{font-family:"H5P";content:"";color:#666;padding-right:.25em;vertical-align:middle;font-size:1.5em;line-height:.9}.h5peditor-button-textual:hover:not([disabled]){background:#636164;background-image:linear-gradient(#6b696c 50%, transparent 50%, transparent);text-decoration:none}.h5peditor-button-textual.importance-high{background:#2579c6;background-image:linear-gradient(#3080c9 50%, transparent 50%, transparent);border-color:#1f67a8;text-transform:uppercase;height:42px;line-height:42px}.h5peditor-button-textual.importance-high:hover:not([disabled]){background:#1f67a8;background-image:linear-gradient(#2a6fac 50%, transparent 50%, transparent);border-color:#1f67a8}.h5peditor-button-textual.importance-low{background:#f5f5f5;background-image:linear-gradient(#eeeeef 50%, transparent 50%, transparent);border-color:#d0d0d1;color:#212121}.h5peditor-button-textual.importance-low:before,.h5peditor-button-textual.importance-low:after{color:#212121}.h5peditor-button-textual.importance-low:hover:not([disabled]){background:#deddde;background-image:linear-gradient(#deddde 50%, transparent 50%, transparent);border-color:#deddde}.h5peditor-button-textual[disabled],.h5peditor-button-textual[aria-disabled=true]{background:#f5f5f5;color:#707171;border-color:#eee;cursor:not-allowed}.h5peditor-button-textual[disabled]:before,.h5peditor-button-textual[aria-disabled=true]:before{font-family:"H5P";content:"";color:#707171;margin-right:.5em;vertical-align:top}.h5peditor-field-description,.h5p-help-text{font-size:12px;margin-top:.3em;margin-bottom:1em;font-weight:500;color:#434446;line-height:15px;letter-spacing:.5px}.h5peditor-field-important-description{position:relative;padding:1.5em 2.2em 2em 2.2em;font-size:.9em;margin:0 0 20px 0;border:1px solid #ffde78;background-color:#f9f9d8;color:#000;display:none}.h5peditor-field-important-description .important-description-close{position:absolute;font-size:.9em;line-height:2em;right:1.5em;top:1em;user-select:none;cursor:pointer}.h5peditor-field-important-description .important-description-close:before{font-family:"H5P";content:"";vertical-align:top;font-size:1.6em}.h5peditor-field-important-description .h5p-info-icon{font-size:.75em}.h5peditor-field-important-description .h5p-info-icon:before{font-family:"H5P";content:"";font-size:2.3em;line-height:.94em;margin-left:-0.3em;vertical-align:middle}.h5peditor-field-important-description .important-description-title{font-weight:bold;font-size:1.2em;vertical-align:bottom}.h5peditor-field-important-description .important-description-content ul{padding:0;line-height:2em;margin-top:20px}.h5peditor-field-important-description .important-description-content ul li{line-height:1.8em;margin-left:1.5em}.h5peditor-field-important-description .important-description-example{border:1px solid #bbde98;background-color:#d9fac3;display:flex;margin-top:20px}.h5peditor-field-important-description .important-description-example .important-description-example-title{padding:15px;font-weight:bold}.h5peditor-field-important-description .important-description-example .important-description-example-text{padding:15px;width:100%;background-color:#f6fef1}.av-tab__file-upload::before{content:""}.av-tab__insert-url::before{content:""}.av-tab__record-audio:last-child::before{content:""}.h5peditor-form{position:relative;background:#fcfcfc;border:1px solid #d0d0d1}.h5peditor-form.h5peditor-form-manager>.tree,.h5peditor-form.h5peditor-form-manager>.common,.h5peditor-form.h5peditor-form-manager>.field{max-width:918px;margin:20px auto;padding:0 20px}.h5peditor-form.h5peditor-semi-fullscreen{margin:0;position:fixed;overflow-y:scroll;margin-top:40px;padding-bottom:40px;box-sizing:border-box;background:#fff;height:calc(100% - 40px)}.h5peditor-label{display:block;margin-bottom:6px;font-weight:600;font-size:16px;color:#454347}.h5peditor-label-button{background:rgba(0,0,0,0);border:none;color:#454347;cursor:pointer;display:flex;flex-direction:row;font-family:inherit;font-weight:600;font-size:16px;padding:0 0 0 10px;text-align:left}.h5peditor-label-button.collapsed .icon::before{content:"";font-family:"H5P";margin-right:5px}.h5peditor-label-button:not(.collapsed) .icon::before{content:"";font-family:"H5P";margin-right:5px}#h5peditor-uploader{position:absolute;width:1px;height:1px;top:-1px;border:0;overflow:hidden}.h5p-tutorial-url,.h5p-example-url{font-size:1em;display:inline-flex;align-items:center;line-height:1;margin-right:1em;margin-bottom:.5em;margin-left:.25em;height:2rem;border-radius:1rem}.h5p-tutorial-url:focus,.h5p-example-url:focus{box-shadow:0px 0px 5px #1634f7}.h5p-tutorial-url:active,.h5p-example-url:active{border-color:#1c70ba}.h5p-tutorial-url::before,.h5p-example-url::before{font-family:"H5P";font-size:1.25em;border-radius:50%;width:2rem;height:2rem;position:absolute;display:flex;justify-content:center;align-items:center}.h5p-tutorial-url .h5p-tutorial-url-label,.h5p-tutorial-url .h5p-example-url-label,.h5p-example-url .h5p-tutorial-url-label,.h5p-example-url .h5p-example-url-label{font-style:italic;font-weight:bold;text-decoration:underline;margin:.25em .5em;margin-left:2rem;padding-left:.5em;padding-right:1em}.h5p-tutorial-url:active,.h5p-tutorial-url:hover{background-color:#eaffab}.h5p-tutorial-url::before{content:"";color:#eaffab;background-color:#749e00}.h5p-tutorial-url .h5p-tutorial-url-label{color:#415702}.h5p-example-url:active,.h5p-example-url:hover{background-color:#f8d4ff}.h5p-example-url::before{content:"";font-size:1em;color:#f8d4ff;background-color:#8f4f9c}.h5p-example-url .h5p-example-url-label{color:#422447}.h5peditor-widget-select{display:flex;flex-direction:row-reverse;justify-content:end;overflow:hidden;margin:0 0 -1px;padding:0;list-style:none}.h5peditor-widget-option{border:1px solid #ccc;margin-left:.5em;padding:.6em 1em;color:#0e1a25;font-size:.875em;background:#f5f5f5;line-height:1.285714286em;cursor:pointer;outline:none}.h5peditor-widget-option:hover{color:#000}.h5peditor-widget-option:active{color:#8e636a}.h5peditor-widget-active{background:#fff;line-height:1.357142857em;border-bottom:0}.h5peditor-widgets>.h5peditor-widget-wrapper{border:1px solid #ccc;margin:0 0 .25em;padding:.5em}.h5peditor-widgets>.h5peditor-label,.h5peditor-widgets>.h5peditor-label-button{float:left;margin-top:5px}.h5p-editor-iframe{margin-bottom:1em}.h5peditor-required:after{content:"*";color:#da0001;margin-left:.2em;position:relative;top:-0.2em}.h5peditor .cke_bottom,.h5peditor .cke_top{background:#d0d0d1}.h5peditor .cke_chrome{border:1px solid #f5f5f5;background:#d0d0d1}.h5peditor .cke_contents,.h5peditor .cke_toolgroup,.h5peditor .cke_combo_button{border:1px solid #f5f5f5}.important-description-show{background:#f3d55a;padding:.2em .5em .2em 1.7em;margin-bottom:.5em;font-size:.9em;cursor:pointer;float:right;position:relative;line-height:normal;font-style:italic;font-weight:bold}.important-description-show:before{font-family:"H5P";font-style:normal;font-weight:normal;content:"";font-size:1.8em;position:absolute;left:0em;top:0em;line-height:.85em;vertical-align:top}.important-description-clear-right{display:block;clear:right}.h5peditor fieldset.common-fields-library-wrapper{width:100%;padding:0 1em 1em;box-sizing:border-box;height:20px;border:solid 1px #e2e5ee;border-radius:4px;margin-bottom:1em}.h5peditor fieldset.common-fields-library-wrapper>*{display:none}.h5peditor fieldset.common-fields-library-wrapper>legend{display:block;cursor:pointer;outline:none;color:#363b42;background-color:#fff;padding:10px;font-weight:bold;font-size:.875em}.h5peditor fieldset.common-fields-library-wrapper>legend:before{font-family:"H5P";content:"";margin-right:.5em}.h5peditor fieldset.common-fields-library-wrapper>legend:focus:before{outline:1px dotted #666}.h5peditor fieldset.common-fields-library-wrapper.expanded{height:auto}.h5peditor fieldset.common-fields-library-wrapper.expanded>*{display:block}.h5peditor fieldset.common-fields-library-wrapper.expanded>legend:before{content:""}.h5p-metadata-button-wrapper{display:flex;flex-direction:row;align-items:center;margin-top:-7px;margin-left:7px;cursor:pointer}.h5p-metadata-button-wrapper.inline-with-selector{display:inline-flex;margin-left:17px}.h5p-metadata-toggler{margin-left:-11px;height:14.5px;max-height:14.5px;padding:.217rem .3rem .217rem .217rem;font-size:.625em;font-weight:bold;letter-spacing:.025em;border:1px solid #b6cada;border-left:none;border-radius:4px;background:linear-gradient(#fff, #deeaf1);color:#356593;z-index:1;justify-content:center;align-content:center;line-height:1.5em}.h5p-metadata-button-tip{width:16.5px;height:16.5px;content:"";background:linear-gradient(-215deg, #fff, #deeaf1);border:1px solid #b6cada;border-right:none;border-top:none;border-radius:4px;transform:rotate(45deg);z-index:0}.h5p-metadata-button-wrapper:hover .h5p-metadata-toggler,.h5p-metadata-button-wrapper:hover .h5p-metadata-button-tip{border-color:#6d9fce}.h5p-metadata-button-wrapper:hover .h5p-metadata-toggler{background:linear-gradient(#f3f8fb, #cee5f3)}.h5p-metadata-button-wrapper:hover .h5p-metadata-button-tip{background:linear-gradient(-215deg, #f3f8fb, #cee5f3)}.h5p-metadata-button-wrapper:active .h5p-metadata-toggler,.h5p-metadata-button-wrapper:active .h5p-metadata-button-tip{color:#294f73;border-color:#6d9fce}.h5p-metadata-button-wrapper:active .h5p-metadata-toggler{background:linear-gradient(#f3f8fb, #bcd4e2)}.h5p-metadata-button-wrapper:active .h5p-metadata-button-tip{background:linear-gradient(-215deg, #f3f8fb, #bcd4e2)}#metadata-title-main-label{margin-top:0}.h5p-metadata-button{background:#fff;padding:10px;text-align:center;border-radius:5px;border:2px solid #6b6b6b;color:#6b6b6b;font-weight:bold;display:inline;cursor:pointer}.h5p-metadata-button:hover{border-color:#4a4a4a;color:#4a4a4a}.h5p-metadata-button:active{border-color:#000;color:#000}.h5p-metadata-button.inverted{border:2px solid #0a715e;color:#0a715e}.h5p-metadata-button.inverted:hover{border-color:#0d826c;color:#0d826c}.h5p-metadata-button.inverted:active{border-color:#095345;color:#095345}.h5p-metadata-icon-button{border:none;cursor:pointer;color:#6b6b6b;background:rgba(0,0,0,0);padding:0}.h5p-metadata-icon-button:hover{color:#4a4a4a}.h5p-metadata-icon-button:active{color:#000}.h5p-metadata-wrapper{display:inline-block;background-color:#fff;max-width:700px;width:calc(100% - 4em);text-align:left;border-bottom:20px solid rgba(0,0,0,0);background-clip:padding-box;max-height:calc(100% - 40px);overflow:auto;margin-bottom:20px}.h5p-metadata-wrapper .h5p-metadata-header{display:flex;border-bottom:1px solid #ced6e3;padding:1.5em}.h5p-metadata-wrapper .h5p-metadata-header .h5p-title-container{flex-grow:1;padding-left:3.5em;white-space:nowrap;overflow:hidden;margin-right:1%;position:relative}.h5p-metadata-wrapper .h5p-metadata-header .h5p-title-container h2{margin:0}.h5p-metadata-wrapper .h5p-metadata-header .h5p-title-container p{margin:.1em}.h5p-metadata-wrapper .h5p-metadata-header .h5p-title-container:before{position:absolute;font-family:"h5p-metadata-icons";content:"";left:0;top:0;font-size:2em;height:1.4em;line-height:1.3}.h5p-metadata-wrapper .h5p-save{border:solid 2px #0a715e;border-radius:.3rem;color:#fff;background-color:#0a715e;padding:.75rem;white-space:nowrap}.h5p-metadata-wrapper .h5p-save:hover{border-color:#0d826c;background-color:#0d826c}.h5p-metadata-wrapper .h5p-save:active{border-color:#095345;background-color:#095345}.h5p-metadata-wrapper .h5peditor-label{font-size:.8em;color:#333}.h5p-metadata-wrapper .h5peditor-field-description{color:#697484;margin-top:.35em;letter-spacing:.5px}.h5p-metadata-wrapper .copyright-form{margin-top:20px}.h5p-metadata-wrapper h2{font-size:1em;overflow:hidden;text-overflow:ellipsis}.h5p-metadata-wrapper p{font-size:.8333em;color:#697484;overflow:hidden;text-overflow:ellipsis;margin-bottom:0}.h5p-metadata-wrapper .errors p,.h5p-metadata-wrapper .h5p-errors p{color:#da0001;font-size:1em;white-space:normal;text-overflow:unset}.h5p-metadata-wrapper select.h5peditor-select,.h5p-metadata-wrapper input.h5peditor-text,.h5p-metadata-wrapper textarea{border:1px solid #b8c0cd;font-size:.833em;border-radius:.208em;box-shadow:none;font-family:"Open Sans",sans-serif}.h5p-metadata-wrapper select:focus,.h5p-metadata-wrapper input:focus,.h5p-metadata-wrapper textarea:focus{box-shadow:inset 0px 0px 10px rgba(0,0,0,.15)}.h5p-metadata-wrapper select{width:100%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper{display:flex;flex-wrap:wrap;margin:1.5em}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field{margin-bottom:0;width:100%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-license{width:49%;margin-right:1%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-licenseVersion{width:49%;margin-left:1%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-yearFrom{width:24%;margin-right:1%;white-space:nowrap}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-yearFrom .h5peditor-text{width:100%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-yearTo{width:23%;margin-right:1%;margin-left:1%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-yearTo .h5peditor-text{width:100%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper>.field-name-source{width:49%;margin-left:1%}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label{justify-content:space-between}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle{background:none;border:none;cursor:pointer}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:before{font-family:"h5p-metadata-icons";content:"";margin-right:.5em;font-size:1.5em;vertical-align:middle}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:focus,.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:active,.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:hover{border:none}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-title label .a11y-title-toggle:hover .h5p-a11y-title-text{text-decoration:underline}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-a11yTitle{transition:max-height .2s,margin .2s;overflow:hidden}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-a11yTitle.hide{max-height:0;margin:0}.h5p-metadata-wrapper .h5p-metadata-fields-wrapper .field-name-a11yTitle.hidden{display:none}.h5p-metadata-wrapper .field.group>.title{font-weight:400;background:#f6f6f6;color:#323232;border:solid 1px #ced6e3;border-radius:.208em}.h5p-metadata-wrapper .field.group.expanded>.title{border-radius:.208em .208em 0 0}.h5p-metadata-wrapper .field.group>.title:focus{border-color:#4d90fe}.h5p-metadata-wrapper .field.group>.content{border:solid 1px #ced6e3;border-radius:0 0 .208em .208em;padding:20px;border-top:0}.h5p-metadata-additional-information{width:100%;margin-top:1em}.h5p-metadata-additional-information .content.h5peditor-single{min-height:2em;border:1px solid #d0d0d1;border-top:none;background:#fff}.h5p-metadata-additional-information .title{font-weight:400;background:#f6f6f6;color:#323232;border:solid 1px #ced6e3;border-radius:.208em}.h5p-metadata-additional-information .title:focus{border-color:#4d90fe}.h5p-metadata-popup-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.85);z-index:101;text-align:center}.h5p-metadata-changelog{width:100%}.h5p-metadata-changelog .field-name-change.expanded .content{display:flex;flex-wrap:wrap}.h5p-metadata-changelog .field-name-change .field-name-date{width:49%;margin-bottom:.5em;margin-right:1%;margin-top:0}.h5p-metadata-changelog .field-name-change .field-name-date span{width:100%}.h5p-metadata-changelog .field-name-change .field-name-author{width:49%;margin-bottom:.5em;margin-left:1%;margin-top:0}.h5p-metadata-changelog .field-name-change .field-name-log{width:100%}.h5p-metadata-changelog .field-name-change .h5p-add-author:before{content:"+";margin-right:.7em}.h5p-metadata-changelog .field-name-change .h5p-cancel{margin-right:10px}.h5p-metadata-changelog .field-name-change .h5p-metadata-changelog-buttons{width:100%}.h5p-metadata-changelog .field-name-change .h5p-metadata-logged-changes{width:100%;margin-top:1em}.h5p-metadata-changelog .field-name-change .h5p-metadata-logged-changes.editing{display:none}.h5p-metadata-changelog .field-name-change .h5p-metadata-logged-changes .h5peditor-field-description{margin-bottom:0}.h5p-metadata-changelog .field-name-change .h5p-metadata-log-wrapper{margin-top:1em;border:solid 1px #ced6e3;border-radius:.208em;max-height:15.917rem;overflow-y:auto;padding:0 .5em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log{display:flex;margin-top:.5em;padding-bottom:.5em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log .h5p-metadata-delete{margin-left:2em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log .h5p-metadata-delete:after{font-family:"h5p-metadata-icons";content:"";font-size:1.2em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log .h5p-metadata-edit:after{font-family:"h5p-metadata-icons";content:"";font-size:1.2em}.h5p-metadata-changelog .field-name-change .h5p-metadata-log-buttons{min-width:3em;line-height:2.5}.h5p-metadata-changelog .field-name-change .h5p-metadata-log:not(:last-child){border-bottom:solid 1px #ced6e3}.h5p-metadata-changelog .field-name-change .h5p-metadata-log-date{min-width:25%;font-size:.85em;font-style:italic;line-height:2.5}.h5p-metadata-changelog .field-name-change .h5p-metadata-description-wrapper{flex-grow:1;font-size:.85em;font-style:italic}.h5p-metadata-changelog .field-name-change .h5p-metadata-description-wrapper{font-weight:bolder}.h5p-metadata-changelog .field-name-change .h5p-metadata-log-author{font-weight:normal}.h5p-metadata-changelog .field-name-change .h5p-metadata-new-log-message{width:100%;background:#c5e7e1;padding:.5em;margin-bottom:1em;color:#0a715e}.h5p-metadata-author-widget{display:flex;flex-direction:column;border:solid 1px #ced6e3;border-radius:.208em;width:100%;padding:1em;margin-top:1em}.h5p-metadata-author-widget .h5p-save-author{border:solid 2px #0a715e;color:#fff;background-color:#0a715e}.h5p-metadata-author-widget .h5p-save-author:hover{border-color:#0d826c;color:#fff;background-color:#0d826c}.h5p-metadata-author-widget .h5p-save-author:active{border-color:#095345;color:#fff;background-color:#095345}.h5p-metadata-author-widget .h5p-author-data{display:flex;flex-direction:row;flex-wrap:nowrap}.h5p-metadata-author-widget .h5p-author-data>.field{margin-bottom:0}.h5p-metadata-author-widget .field-name-name{flex-grow:1;margin-right:2%;overflow:hidden;white-space:nowrap;min-width:49%}.h5p-metadata-author-widget .field-name-role{margin-top:0;margin-right:2%;width:25%;flex-grow:1;overflow:hidden;white-space:nowrap}.h5p-metadata-author-widget .authorList{margin-top:1.5em;white-space:nowrap}.h5p-metadata-author-widget .authorList li{display:inline;margin-right:.5em}.h5p-metadata-author-widget .authorList li span{margin-right:1em;font-style:italic}.h5p-metadata-author-widget .h5p-author-list-wrapper{margin-top:.5em}.h5p-metadata-author-widget .h5p-author-list-wrapper ul{margin:0;padding:0}.h5p-metadata-author-widget .h5p-author-list-wrapper li{display:inline-block;margin-right:2em;list-style:none;font-weight:bold;font-size:.8em}.h5p-metadata-author-widget .h5p-author-list-wrapper .h5p-metadata-role{font-style:italic;margin:0 .6em;font-weight:normal;font-size:.85em;color:#757575}.h5p-metadata-author-widget .h5p-author-list-wrapper button:after{font-family:"h5p-metadata-icons";content:"";font-size:1em;position:relative;top:-0.1em}.h5peditor-copypaste-wrap{float:right}.h5peditor>.h5peditor-copypaste-wrap{margin-bottom:14px}.h5peditor-copypaste-wrap.hidden{display:none}.h5peditor-clearfix{clear:both}.h5peditor-paste-button,.h5peditor-copy-button{border:1px solid #deeeec;padding:.5em .75em .75em .5em;margin-left:.5em;border-radius:.25em;cursor:pointer;background:#f2faff;line-height:.5em}.h5peditor-paste-button:hover,.h5peditor-copy-button:hover{border-color:#bbdae8}.h5peditor-paste-button:active,.h5peditor-copy-button:active{background-color:#deeffb}.h5peditor-paste-button.disabled,.h5peditor-copy-button.disabled{color:#707070;background-color:#f5f5f5;border-color:#ededed;cursor:not-allowed}.h5peditor-copy-button:before,.h5peditor-paste-button:before{font-family:"H5P";margin-right:5px;font-size:1.5em;position:relative;top:.2em;color:#2372b3}.h5peditor-copy-button:before{content:""}.h5peditor-paste-button:before{content:""}.h5peditor-copy-button.disabled:before,.h5peditor-paste-button.disabled:before{color:#707070}.h5peditor-copy-button.disabled:before{content:""}.h5peditor-paste-button.disabled:before{content:""}.h5p-hub .h5peditor-paste-button{font-family:"Open Sans",sans-serif;color:#fff;border:solid 1px #9fc8f4;padding:0 .75em .5em .75em;background:rgba(0,0,0,0);line-height:1;height:auto;margin-top:.675em;margin-right:.675em}.h5p-hub .h5peditor-paste-button:hover{background:#4b5460;border-color:#606a78}.h5p-hub .h5peditor-paste-button:active{background:#434b55}.h5p-hub .h5peditor-paste-button.disabled{border-color:#30353d;background:#30353d;color:#c2c2c2}.h5p-hub .h5peditor-paste-button:before{color:#9fc8f4}.h5p-hub .h5peditor-paste-button.disabled:before{color:#c3c3c3}@font-face{font-family:"h5p-fullscreen-bar";src:url(./fonts/h5p-fullscreen-bar.eot);src:url(./fonts/h5p-fullscreen-bar.eot#iefix) format("embedded-opentype"),url(./fonts/h5p-fullscreen-bar.ttf) format("truetype"),url(./fonts/h5p-fullscreen-bar.woff) format("woff"),url(./fonts/h5p-fullscreen-bar.svg#h5p) format("svg");font-weight:normal;font-style:normal}.h5peditor-form-manager-head{background:#f5f5f5;color:#414141;border-bottom:1px solid #dfdfdf;height:41px;line-height:40px;box-sizing:border-box;position:relative;display:flex;z-index:3;justify-content:space-between;align-items:flex-start;box-shadow:0px 2px 2px rgba(128,128,128,.15);padding:0 1em 0 .5em}.h5peditor-form-manager-button{background:rgba(0,0,0,0);padding:0;border:0;cursor:pointer;color:#414141;position:relative;white-space:nowrap;line-height:normal}.h5peditor-form-manager-button-inner{display:block;outline:none}.h5peditor-form-manager-breadcrumb{display:flex;min-width:0;flex-grow:1}.h5peditor-form-manager-proceed{display:none;background:#186df7;color:#fff;font-size:14px;font-weight:bold;font-family:Open Sans,sans-serif;border-radius:2px;margin-right:5px;margin-top:5px;padding:5px 10px}.h5peditor-form-manager-proceed:hover{background:#20588f}.h5peditor-form-manager-fullscreen{width:24px;height:24px;font-size:20px;margin-top:9px;margin-left:.25em}.h5peditor-form-manager-fullscreen .h5peditor-form-manager-button-inner:before{font-family:"h5p-fullscreen-bar";content:""}.h5peditor-form-manager-fullscreen:after{visibility:hidden;position:absolute;top:120%;right:-10%;z-index:3;padding:.25em .75em;background:#212121;color:#fff;white-space:nowrap;font-size:14px;box-shadow:0 0 .5em #858585;text-indent:0;font-weight:normal;pointer-events:none;outline:none;line-height:normal;content:attr(aria-label)}.h5peditor-form-manager-fullscreen:hover:after,.h5peditor-form-manager-fullscreen:focus:after{visibility:visible}.h5peditor-semi-fullscreen .h5peditor-form-manager-fullscreen .h5peditor-form-manager-button-inner:before{content:""}.h5peditor-semi-fullscreen .h5peditor-form-manager-proceed{display:block}.h5peditor-semi-fullscreen .h5peditor-form-manager-head{position:fixed;top:0;left:0;right:0;z-index:2}.form-manager-exit.form-manager-fullscreen .h5peditor-form-manager-button-inner:before{content:""}.h5peditor-form-manager-title{position:relative;min-width:20px;font-weight:bold;font-size:14px}.h5peditor-form-manager-title:before{font-family:"h5p-fullscreen-bar";content:"";font-size:1.2em;position:relative;top:.1em;margin-right:.25em;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.h5peditor-form-manager-title.dragtext:before{content:""}.h5peditor-form-manager-title.markthewords:before{content:""}.h5peditor-form-manager-title.multichoice:before{content:""}.h5peditor-form-manager-title.interactivevideo:before{content:""}.h5peditor-form-manager-title.audio:before{content:""}.h5peditor-form-manager-title.truefalse:before{content:""}.h5peditor-form-manager-title.dialogcards:before{content:""}.h5peditor-form-manager-title.questionnaire:before{content:""}.h5peditor-form-manager-title.coursepresentation:before{content:""}.h5peditor-form-manager-title.dragquestion:before{content:""}.h5peditor-form-manager-title.summary:before{content:""}.h5peditor-form-manager-title.singlechoiceset:before{content:""}.h5peditor-form-manager-title.blanks:before{content:""}.h5peditor-semi-fullscreen+.h5p-metadata-popup-overlay{position:fixed}.h5peditor-semi-fullscreen+.h5p-metadata-popup-overlay .h5p-metadata-wrapper{margin-top:20px !important}.h5peditor .h5peditor-language-switcher{float:right;white-space:nowrap;margin-bottom:1em}.h5peditor .h5peditor-language-switcher .language-label{padding:0 10px;font-size:15px}.h5peditor .h5peditor-language-switcher select{padding:6px 30px 6px 8px;font-size:15px}.h5peditor-language-notice{display:none;clear:both;font-size:14px;background:#dcf6ff;color:#295b7a;padding:10px 20px 10px 40px;margin:1em 0;line-height:1.5;position:relative}.h5peditor-language-notice:before{font-family:h5p;content:"";position:absolute;left:15px;font-size:1.125em}.h5peditor-language-notice.show{display:block}.h5peditor-language-notice .first{font-weight:bold}.h5peditor-language-notice a{text-decoration:underline}.h5p-loader__wrapper{width:100%;height:100%;flex:1;display:flex;align-items:center;padding:10px;min-width:180px}.h5p-loader__wrapper .h5p-loader__icon{border:8px solid #d0cfd4;border-bottom-color:#554e4a;border-radius:50%;width:40px;height:40px;animation:rotation linear 1s infinite;margin:0 auto}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.h5p-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}
diff --git a/styles/css/fonts/play-icon.svg b/styles/css/fonts/play-icon.svg
new file mode 100644
index 00000000..4fae56b2
--- /dev/null
+++ b/styles/css/fonts/play-icon.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/styles/css/fonts/upload-audio.svg b/styles/css/fonts/upload-audio.svg
new file mode 100644
index 00000000..ed298d0e
--- /dev/null
+++ b/styles/css/fonts/upload-audio.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/styles/css/fonts/upload-image.svg b/styles/css/fonts/upload-image.svg
new file mode 100644
index 00000000..5da31db0
--- /dev/null
+++ b/styles/css/fonts/upload-image.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/styles/css/fonts/upload-video.svg b/styles/css/fonts/upload-video.svg
new file mode 100644
index 00000000..e69a2b0c
--- /dev/null
+++ b/styles/css/fonts/upload-video.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/styles/scss/_form-field.scss b/styles/scss/_form-field.scss
index 4439013a..7eac8cbb 100644
--- a/styles/scss/_form-field.scss
+++ b/styles/scss/_form-field.scss
@@ -20,11 +20,6 @@
display: inline;
}
- .h5p-editor-image-buttons {
- float: left;
- clear: both;
- }
-
.library {
border: 0;
}
@@ -36,7 +31,7 @@
.h5p-dialog-anchor {
position: relative;
- margin: -16px;
+ width: 100%;
}
}
diff --git a/styles/scss/_h5peditor-drag-and-drop.scss b/styles/scss/_h5peditor-drag-and-drop.scss
new file mode 100644
index 00000000..891ee4fb
--- /dev/null
+++ b/styles/scss/_h5peditor-drag-and-drop.scss
@@ -0,0 +1,709 @@
+.h5p-dnd__container {
+ clear: both;
+ margin-top: 0.5rem;
+}
+
+.h5p-dnd__container,
+.h5p-dnd__box,
+.video-url-error-container {
+ &.has-error .h5p-errors {
+ margin-top: 1em;
+ display: flex;
+ align-items: center;
+ &:before {
+ font-family: $icon-font-family;
+ content: "\e859";
+ font-size: 1.5em;
+ vertical-align: middle;
+ }
+ }
+ .h5p-errors {
+ display: none;
+ }
+}
+
+.h5p-dnd__box {
+ display: flex;
+ flex-flow: row;
+ align-items: stretch;
+ justify-content: center;
+ border: solid 2px $dnd-gray-light;
+ border-radius: 6px;
+ flex: 1;
+ min-height: 150px;
+ position: relative;
+ background: none;
+ font-size: 14px;
+}
+
+.h5p-dnd__box--is-dashed {
+ border: dashed 2px $dnd-gray-light;
+}
+
+.h5p-dnd__box--is-inline {
+ display: inline-flex;
+}
+
+.h5p-dnd__box--has-image {
+ flex-flow: column;
+ width: min-content;
+ min-height: auto;
+ min-width: 140px;
+}
+
+.h5p-dnd__box:focus-visible {
+ outline: none;
+}
+
+.h5p-dnd__box:not(.h5p-dnd__box--is-uploading):hover {
+ border: dashed 2px $dnd-gray-dark;
+}
+
+.h5p-dnd__box--has-image:not(.h5p-dnd__box--is-uploading):hover,
+.h5p-dnd__box.h5p-dnd__box--is-focused:not(.h5p-dnd__box--is-uploading),
+.h5p-dnd__box:not(.h5p-dnd__box--is-uploading):focus,
+.h5p-dnd__box.h5p-dnd__box--is-dragging:not(.h5p-dnd__box--is-uploading) {
+ border: solid 2px $dnd-blue;
+}
+
+
+.h5p-dnd__box:focus:not(.h5p-dnd__box--has-image):not(.h5p-dnd__box--is-uploading):not(.h5p-dnd__box--is-inline) {
+ .h5p-dnd__column--is-highlighted {
+ background: #fff;
+ }
+ .h5p-dnd__column:not(.h5p-dnd__column--is-highlighted):not(.h5p-dnd__column--tight) {
+ background: $dnd-blue-faded;
+ }
+}
+
+.h5p-dnd__box__block {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: none;
+ z-index: 2;
+}
+
+.h5p-dnd__box--is-dragging .h5p-dnd__box__block {
+ display: block;
+}
+
+.h5p-dnd__column {
+ margin: 10px;
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ flex: 1;
+}
+
+.h5p-dnd__column--is-highlighted {
+ background: $dnd-blue-faded;
+}
+
+.h5p-dnd__column--is-fixed {
+ flex: 0 0 150px;
+}
+
+.h5p-dnd__column--is-full-width {
+ flex: 1;
+}
+.h5p-dnd__column--show-when-focus {
+ display: none;
+}
+
+.h5p-dnd__column--is-padded {
+ padding: 0 20px;
+}
+
+.h5p-dnd__column--is-padded-small {
+ padding: 0 10px;
+}
+
+.h5p-dnd__column.h5p-dnd__column--is-padded-small {
+ margin: 0;
+}
+
+.h5p-dnd__box--is-dragging .h5p-dnd__column--hide-when-focus {
+ display: none;
+}
+
+.h5p-dnd__box:not(.h5p-dnd__box--is-uploading).h5p-dnd__box--is-dragging .h5p-dnd__column--show-when-focus,
+.h5p-dnd__box:not(.h5p-dnd__box--is-uploading).h5p-dnd__box--has-image:focus .h5p-dnd__column--show-when-focus {
+ display: flex;
+}
+
+.h5p-dnd__column--tight {
+ max-height: 130px;
+ &:has(.h5p-dnd__video-container) {
+ margin-right: 0;
+ }
+}
+
+.h5p-dnd__column__drag-text {
+ margin-top: -5px;
+}
+
+.h5p-dnd__btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 10px;
+ gap: 5px;
+ border-radius: 4px;
+ border: 1px solid #1F67A8;
+ background: #2579C6;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 1em;
+ font-weight: 600;
+ color: #fff;
+ cursor: pointer;
+
+ &:focus {
+ outline: solid 2px #1F67A8;
+ outline-offset: 2px;
+ }
+
+ &:before {
+ font-family: $icon-font-family;
+ content: "\e85d";
+ vertical-align: middle;
+ font-size: 1.5em;
+ line-height: 0.9;
+ font-weight: 400;
+ }
+}
+
+.h5p-dnd__btn:hover {
+ background: #1F67A8;
+}
+
+.h5p-dnd__btn:focus {
+ outline: solid 2px #1F67A8;
+ outline-offset: 2px;
+}
+
+div:has(> .h5p-dnd__badge),
+div:has(> .h5p-dnd-nowrap),
+.h5p-dnd__column--is-padded:has(.h5p-dnd__badge) {
+ line-height: 1.7;
+}
+
+
+.h5p-dnd__badge {
+ background: #E7E9EE;
+ color: #434446;
+ text-transform: uppercase;
+ font-weight: 400;
+ font-size: 12px;
+ font-family: 'Arial Black';
+ border-radius: 6px;
+ padding: 3px 8px;
+ display: inline-flex;
+ line-height: 1.4;
+
+ .h5p-dnd__badge__separator {
+ border-left: solid 2px rgba(67, 68, 70, 0.25);
+ margin: 3px 6px;
+ overflow: hidden;
+ display: inline-block;
+ overflow: hidden;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ position: relative;
+ }
+}
+
+.h5p-dnd__img {
+ max-width: 175px;
+ max-height: 120px;
+ min-width: 40px;
+ min-height: 40px;
+ border-radius: 6px;
+ display: block;
+}
+
+.h5p-dnd__img__container {
+ position: relative;
+ min-width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.h5p-dnd__img__overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 6px;
+ background: $dnd-blue;
+ opacity: 0.9;
+ color: #fff;
+ display: none;
+ cursor: pointer;
+ &:before {
+ font-family: $icon-font-family;
+ content: "\e85d";
+ font-size: 2.5em;
+ }
+}
+
+.h5p-dnd__img__container:hover .h5p-dnd__img__overlay,
+.h5p-dnd__box:focus:not(.h5p-dnd__box--is-uploading) .h5p-dnd__img__overlay,
+.h5p-dnd__box.h5p-dnd__box--is-dragging:not(.h5p-dnd__box--is-uploading) .h5p-dnd__img__overlay {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.h5p-dnd__text {
+ font-family: 'Open Sans', sans-serif;
+ font-size: 14px;
+ text-align: center;
+ color: $dnd-text-color;
+}
+
+.h5p-dnd__upload-image-svg,
+.h5p-dnd__upload-audio-svg,
+.h5p-dnd__upload-video-svg {
+ width: 60px;
+ height: 43px;
+ margin-bottom: 13px;
+}
+
+
+.h5p-dnd__upload-image-svg {
+ background: url("../css/fonts/upload-image.svg") no-repeat;
+}
+
+.h5p-dnd__upload-video-svg {
+ background: url("../css/fonts/upload-video.svg") no-repeat;
+}
+
+.h5p-dnd__upload-audio-svg {
+ background: url("../css/fonts/upload-audio.svg") no-repeat;
+}
+.h5p-dnd__play-icon-svg {
+ background: url("../css/fonts/play-icon.svg") no-repeat;
+ width: 28px;
+ height: 29px;
+}
+
+.h5p-dnd__drop-text {
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.9em;
+
+ &:before {
+ font-size: 3.9em;
+ font-family: $icon-font-family;
+ content: "\e85d";
+ color: #3B435A;
+ line-height: 0.9;
+ margin-bottom: 10px;
+ }
+}
+
+.input-container {
+ display: flex;
+ align-items: center;
+ border: solid 1px #D0D0D1;
+ padding: 3px;
+ width: 100%;
+ border-radius: 2px;
+ background: #fff;
+ gap: 5px;
+
+ &:has(.input-video:focus) {
+ border: solid 1px #1570df;
+ }
+}
+
+/* Need high specificity to counteract interactive video styling for inputs */
+.h5p-dnd__av-container .h5p-dnd__box__url.h5p-dnd__box__video-paste .input-container input[type="text"].input-video {
+ border: 0;
+ flex: 1;
+ outline: 0;
+ font-size: 1em;
+ box-shadow: none;
+
+ &:focus {
+ background: none;
+ box-shadow: none;
+ }
+}
+
+.video-url-error-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 5px;
+ width: 100%;
+
+ &.hidden {
+ display: none;
+ }
+}
+
+.text-muted {
+ color: #454347;
+ text-align: center;
+ font-family: "Open Sans", sans-serif;
+ font-size: 0.85em;
+ font-weight: 400;
+ line-height: normal;
+}
+.text-center {
+ text-align: center;
+}
+
+.h5p-dnd__box__title {
+ color: #454347;
+ text-align: center;
+ font-size: 16px;
+ font-weight: 600;
+ font-family: "Open Sans", sans-serif;
+}
+
+.h5p-dnd__box.h5p-dnd__box__url,
+.h5p-dnd__box__url {
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ justify-content: center;
+ color: #454347;
+ font-size: 14px;
+ border-radius: 6px;
+ flex: 1;
+ min-height: 169px;
+ position: relative;
+ background: none;
+ padding: 10px;
+ gap: 7px;
+ min-width: 271px;
+ box-sizing: border-box;
+
+ &:focus:not(.h5p-dnd__box__video-paste):not(.h5p-dnd__box--is-dragging):not(.h5p-dnd__box--is-uploading),
+ &:focus-within:not(.h5p-dnd__box__video-paste):not(.h5p-dnd__box--is-dragging):not(.h5p-dnd__box--is-uploading) {
+ background: $dnd-blue-faded;
+ border: solid 2px #1570df;
+ }
+ &:focus-visible:not(.h5p-dnd__box__video-paste):not(.h5p-dnd__box--is-uploading) {
+ outline: 0;
+ border: solid 2px #1570df;
+ }
+
+ &.h5p-dnd__box__video-paste {
+ border: solid 1px #D0CFD4;
+ padding: 20px;
+ }
+}
+
+.h5p-dnd__box.h5p-dnd__box__action {
+ flex: 2;
+}
+
+.h5p-dnd__box.h5p-dnd__box__video-paste {
+ flex: 1 0 fit-content;
+}
+
+.h5p-dnd__videobox-wrapper ~ .h5p-dnd__box__url {
+ height: 154px;
+ min-height: 110px;
+ min-width: 260px;
+
+ .h5p-dnd__upload-audio-svg,
+ .h5p-dnd__upload-video-svg {
+ display: none;
+ }
+}
+
+.h5p-dnd__videobox-wrapper~.h5p-dnd__box__url.h5p-dnd__box.has-error {
+ height: auto;
+}
+
+.h5p-dnd__box--is-dashed:not(.h5p-dnd__box--is-uploading):hover {
+ border: dashed 2px #ACACAC;
+}
+
+.h5p-dnd__row {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+
+.h5p-bold {
+ font-weight: 700;
+}
+
+.divider {
+ border-top: solid 1px #D0CFD4;
+ width: 35%;
+ margin: 0 10px;
+}
+
+.h5p-dnd__box--has-video {
+ flex-flow: column;
+ width: 100%;
+}
+
+.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider) {
+ .h5p-dnd__box--has-video:focus {
+ .h5p-dnd__video-container {
+ background: #1670DF;
+ &:before {
+ font-family: $icon-font-family;
+ content: "\e85d";
+ font-size: 2.5em;
+ }
+
+ .h5p-dnd__video-overlay {
+ display: none;
+ }
+ }
+ }
+ .h5p-dnd__video-container {
+ cursor: pointer;
+
+ &:hover {
+ background: #1670DF;
+
+ &:before {
+ font-family: $icon-font-family;
+ content: "\e85d";
+ font-size: 2.5em;
+ }
+ .h5p-dnd__video-overlay {
+ display: none;
+ }
+ }
+ }
+}
+
+.h5p-dnd__videobox-wrapper--is-provider {
+ .h5p-dnd__box--has-video {
+ &:focus,
+ &:hover {
+ border: solid 2px #D0CFD4;
+ }
+ }
+}
+
+.h5p-dnd__videobox-wrapper--has-label {
+ min-width: 400px;
+ flex: 1;
+}
+
+.h5p-dnd__video-container {
+ width: 100%;
+ height: 100%;
+ min-height: 130px;
+ background: #1B1B1B;
+ border-radius: 6px;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+}
+
+.h5p-dnd__video-overlay {
+ display: flex;
+ flex-flow: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.h5p-dnd__box--has-video.h5p-dnd__box--is-dragging {
+ .h5p-dnd__video-container {
+ background: #1670DF;
+ }
+}
+
+.h5p-dnd__box:not(.h5p-dnd__box--is-uploading).h5p-dnd__box--has-image:focus .h5p-dnd__column--show-when-focus,
+.h5p-dnd__box:not(.h5p-dnd__box--is-uploading).h5p-dnd__box--has-video:focus .h5p-dnd__column--show-when-focus
+{
+ display: flex;
+}
+
+.h5p-dnd__av-container {
+ display: flex;
+ align-items: flex-start;
+ gap: 11px;
+ flex-flow: row wrap;
+ margin-bottom: 20px;
+ container: h5p-dnd__av-container / inline-size;
+}
+
+.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider) ~ .h5p-dnd__box__video-paste,
+.h5p-dnd__box--is-dragging + .h5p-dnd__box__video-paste {
+ display: none;
+}
+
+.h5p-dnd__videobox-wrapper--is-provider + .h5p-dnd__box__url {
+ display: none;
+}
+
+.h5p-dnd__box--is-uploading + .h5p-dnd__box__video-paste {
+ display: none;
+}
+
+.h5p-dnd__videobox-wrapper {
+ width: 195px;
+ text-align: center;
+}
+
+.h5p-dnd__video-quality {
+ text-align: left;
+ height: 130px;
+ display: flex;
+ flex-flow: column;
+ justify-content: space-between;
+ box-sizing: border-box;
+ border-left: solid 1px #ccc;
+ padding: 0 10px;
+}
+
+.h5p-dnd__video-quality-title {
+ font-size: 14px;
+}
+
+.h5p-dnd__video-quality-description {
+ font-size: 11px;
+ line-height: normal;
+ display: inline-block;
+ font-family: 'Open Sans', sans-serif;
+}
+
+.h5p-dnd__box__url.h5p-dnd__box--is-dragging .h5p-dnd__column.h5p-dnd__column--is-highlighted {
+ width: 100%;
+ margin: 0;
+}
+
+.h5p-dnd__btn__insert-url {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: block;
+ max-width: 150px;
+ &:before {
+ content: '\e85c';
+ }
+}
+
+@media (max-width: 525px) {
+ .h5p-dnd__box {
+ flex-flow: column;
+ }
+}
+
+.h5p-dnd__box__url {
+ container: h5p-dnd__box__url / inline-size;
+}
+
+.h5p-dnd__row--when-wide,
+.h5p-dnd__column--when-wide {
+ display: none;
+}
+
+.h5p-dnd__row:has(.input-container),
+.h5p-dnd__row:has(.video-url-error-container) {
+ flex: 0;
+}
+
+.h5p-dnd__column--no-margin,
+.h5p-dnd__column--no-margin.h5p-dnd__column {
+ margin: 0;
+}
+
+@container h5p-dnd__av-container (min-width: 760px) {
+ .h5p-dnd__box.h5p-dnd__box__action {
+ flex-flow: row;
+ align-items: stretch;
+ padding: 0;
+ }
+
+ .h5p-dnd__row--when-wide,
+ .h5p-dnd__column--when-wide {
+ display: flex;
+ }
+
+ .h5p-dnd__row--when-small,
+ .h5p-dnd__column--when-small {
+ display: none;
+ }
+
+ .h5p-dnd__box.h5p-dnd__box__action,
+ .h5p-dnd__box__action {
+ background: #fff;
+ }
+}
+
+
+@container h5p-dnd__av-container (max-width: 760px) {
+ .h5p-dnd__badge,
+ .h5p-dnd__column,
+ .h5p-dnd__row {
+ font-size: 0.85em;
+ }
+
+ .text-muted {
+ font-size: 1em;
+ }
+
+ .h5p-dnd__btn__insert-url {
+ max-width: 120px;
+ }
+}
+
+@container h5p-dnd__av-container (max-width: 250px) {
+ .h5p-dnd__box__url,
+ .h5p-dnd__box.h5p-dnd__box__url,
+ .h5p-dnd__videobox-wrapper~.h5p-dnd__box__url {
+ min-width: 0;
+ flex-basis: 100%;
+ }
+
+ .h5p-dnd__btn__insert-url {
+ max-width: 90px;
+ }
+
+ .h5p-dnd__box__url.h5p-dnd__box__video-paste {
+ padding: 10px;
+ }
+}
+
+.h5p-dnd__videobox-wrapper ~ .h5p-dnd__box__url {
+ &.h5p-dnd__box.h5p-dnd__box__action {
+ flex-flow: column;
+ align-items: center;
+ padding: 10px;
+ }
+
+ .h5p-dnd__row--when-wide,
+ .h5p-dnd__column--when-wide {
+ display: none;
+ }
+
+ .h5p-dnd__row--when-small,
+ .h5p-dnd__column--when-small {
+ display: flex;
+ }
+}
+
+.h5p-dnd-nowrap {
+ white-space: nowrap;
+}
\ No newline at end of file
diff --git a/styles/scss/_h5peditor-image-edit.scss b/styles/scss/_h5peditor-image-edit.scss
index ebeb318b..8741f170 100644
--- a/styles/scss/_h5peditor-image-edit.scss
+++ b/styles/scss/_h5peditor-image-edit.scss
@@ -1,6 +1,7 @@
@import 'variables';
.h5peditor {
+ .h5p-delete-image-button,
.h5p-editing-image-button {
background: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
font-size: $font-size-small;
@@ -18,9 +19,9 @@
}
}
+ .h5p-delete-image-button:before,
.h5p-editing-image-button:before {
font-family: $icon-font-family;
- content: "\e900";
color: #666;
padding-right: 0.3em;
padding-left: 0.45em;
@@ -28,16 +29,27 @@
font-size: 1.5em;
line-height: 0.9;
}
+
+ .h5p-delete-image-button:before {
+ content: "\e85f";
+ }
+ .h5p-editing-image-button:before {
+ content : "\e85e";
+ }
+
+ .h5p-delete-image-button.loading:before,
.h5p-editing-image-button.loading:before {
content: "\e901";
}
+ .h5p-delete-image-button.hidden,
.h5p-editing-image-button.hidden,
.h5p-copyright-button.hidden {
display: none !important;
}
+ .ui-dialog .h5p-delete-image-button,
.ui-dialog .h5p-editing-image-button,
.ui-dialog .h5p-copyright-button {
padding-left: 0.5em;
diff --git a/styles/scss/_variables.scss b/styles/scss/_variables.scss
index 3b08cf69..0b9f5070 100644
--- a/styles/scss/_variables.scss
+++ b/styles/scss/_variables.scss
@@ -56,6 +56,21 @@ $form-item-buttons-width-small: 54px;
$form-label: #454347;
$form-label-importance-high: #356593;
+// Audio and Video (av) tab widget
+$av-tab-container-border-color: #D0CFD4;
+$av-tab-container-background-color: #FFFFFF;
+$av-tab-button-color: #E7E9EE;
+$av-tab-button-selected-color: #FFFFFF;
+$av-tab-button-title-color: #000000;
+$av-tab-button-font-color: #297BC7;
+
+// Drag and drop
+$dnd-blue: #1670DF;
+$dnd-blue-faded: #f6faff;
+$dnd-text-color: #454347;
+$dnd-gray-light: #D0CFD4;
+$dnd-gray-dark: #ACACAC;
+
// Group collapse button
$group-collapse-button-color: #228380;
$group-collapse-button-color-light: #4dc2bf;
diff --git a/styles/scss/application.scss b/styles/scss/application.scss
index 9d433d84..605cc65b 100644
--- a/styles/scss/application.scss
+++ b/styles/scss/application.scss
@@ -5,6 +5,7 @@
@import "form-groups";
@import "h5peditor-image-edit";
@import "h5peditor-image-edit-popup";
+@import "h5peditor-drag-and-drop";
@import "deprecated";
html, body {
@@ -443,18 +444,14 @@ a {
text-align: center;
}
.h5p-add-dialog {
- position: absolute;
+ position: inherit;
z-index: 1;
visibility: hidden;
opacity: 0;
background: #fff;
- left: 1em;
- right: 1em;
- top: 1em;
- border: 1px solid #cdcdcd;
+ margin-bottom: 1rem;
box-sizing: border-box;
-moz-box-sizing: border-box;
- box-shadow: 0 0 8px #666;
transition: visibility 0s 0.2s, opacity 0.2s;
&.h5p-open {
@@ -465,37 +462,63 @@ a {
.h5p-add-dialog-table {
overflow: hidden;
+ position: relative;
.av-tablist {
- overflow: hidden;
- margin: 1em 1em 0 1em;
+ display: inline-flex;
+ border-left: 1px solid $av-tab-container-border-color;
+
+ &:has(~ .av-tabpanel.has_content) {
+ .av-tab:not(.selected) {
+ opacity: 0.5;
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+ }
}
.av-tab {
cursor: pointer;
- float: left;
padding: 0.5em 0.75em;
- border-top: 1px solid #ccc;
- border-right: 1px solid #ccc;
- font-weight: bold;
+ border-top: 1px solid $av-tab-container-border-color;
+ border-right: 1px solid $av-tab-container-border-color;
+ position: relative;
+ font-weight: 600;
font-size: 15px;
- color: #666;
- background: #f5f5f5;
+ background: $av-tab-button-color;
+ z-index: 1;
- &:first-child {
- border-left: 1px solid #ccc;
+ &::before {
+ font-family: $icon-font-family;
+ color: $av-tab-button-font-color;
+ vertical-align: middle;
+ font-size: 1.8em;
+ margin-right: 4px;
}
+
&.selected {
- color: #333;
- background: #fff;
+ color: $av-tab-button-title-color;
+ background: $av-tab-button-selected-color;
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: $av-tab-button-selected-color;
+ }
}
}
.av-tabpanel {
- border: 1px solid #ccc;
- margin: 0 1em 1em 1em;
- overflow: hidden;
+ border: 1px solid $av-tab-container-border-color;
+ border-radius: 0 0 5px 5px;
+ margin-top: 1px;
+ position: relative;
padding: 1em;
+ top: -1px;
h3 {
margin: 0 0 1em 0;
@@ -1219,6 +1242,19 @@ a {
}
}
+.av-tab__file-upload::before {
+ content: "\e85d";
+}
+
+.av-tab__insert-url::before {
+ content: "\e85c";
+}
+
+.av-tab__record-audio:last-child::before {
+ content: "\e85d"; // TODO: Change to microphone icon
+}
+
+
.h5peditor-form {
position: relative;
background: $form-background;