diff --git a/bellatrix.core/pom.xml b/bellatrix.core/pom.xml
index 23e2f014..478c5657 100644
--- a/bellatrix.core/pom.xml
+++ b/bellatrix.core/pom.xml
@@ -153,5 +153,20 @@
             <version>${rest.assured.version}</version>
             <scope>compile</scope>
         </dependency>
+        <dependency>
+            <groupId>com.azure</groupId>
+            <artifactId>azure-security-keyvault-secrets</artifactId>
+            <version>4.2.3</version>
+        </dependency>
+        <dependency>
+            <groupId>com.azure</groupId>
+            <artifactId>azure-identity</artifactId>
+            <version>1.2.0</version>
+        </dependency>
+        <dependency>
+            <groupId>org.jsoup</groupId>
+            <artifactId>jsoup</artifactId>
+            <version>1.17.2</version>
+        </dependency>
     </dependencies>
 </project>
\ No newline at end of file
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/ConverterService.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/ConverterService.java
index 466746b8..7023c17f 100644
--- a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/ConverterService.java
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/ConverterService.java
@@ -1,14 +1,33 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 package solutions.bellatrix.core.utilities;
 
 import lombok.SneakyThrows;
 
+import java.lang.reflect.Field;
+import java.util.ArrayList;
+import java.util.List;
+
 public class ConverterService {
     public static <SourceT, ResultT> ResultT convert(SourceT source, int index) {
         ResultT object = InstanceFactory.createByTypeParameter(source.getClass(), index);
 
+        assert object != null;
         return convert(source, object);
     }
 
+    @SuppressWarnings("unchecked")
     public static <SourceT, ResultT> ResultT convert(SourceT source, ResultT result) {
         var object = (ResultT) InstanceFactory.create(result.getClass());
 
@@ -38,8 +57,8 @@ public static <SourceT, ResultT> ResultT convert(SourceT source, ResultT result)
     public static <SourceT, ResultT> ResultT convertToClass(SourceT source, Class<ResultT> result) {
         var object = (ResultT) InstanceFactory.create(result);
 
-        var sourceFields = source.getClass().getDeclaredFields();
-        var objectFields = object.getClass().getDeclaredFields();
+        List<Field> sourceFields = getAllFields(source.getClass());
+        List<Field> objectFields = getAllFields(object.getClass());
 
         for (var sourceField : sourceFields) {
             for (var objectField : objectFields) {
@@ -55,4 +74,19 @@ public static <SourceT, ResultT> ResultT convertToClass(SourceT source, Class<Re
 
         return object;
     }
+
+    private static List<Field> getAllFields(Class<?> clazz) {
+        List<Field> fields = new ArrayList<>();
+        Class<?> currentClass = clazz;
+
+        while (currentClass != null) {
+            var declaredFields = currentClass.getDeclaredFields();
+            for (Field field : declaredFields) {
+                fields.add(field);
+            }
+            currentClass = currentClass.getSuperclass();
+        }
+
+        return fields;
+    }
 }
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/HtmlService.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/HtmlService.java
new file mode 100644
index 00000000..306e62cc
--- /dev/null
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/HtmlService.java
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.core.utilities;
+
+import lombok.experimental.UtilityClass;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.jsoup.nodes.Node;
+import solutions.bellatrix.core.utilities.parsing.TypeParser;
+
+import java.util.Arrays;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+/**
+ * Web Utility Class
+ */
+@UtilityClass
+public class HtmlService {
+    private static final String CHILD_COMBINATOR = " > ";
+    private static final String NODE = "/";
+    private static final String NODE_OR_SELF = "//";
+    private static final String ROOT_ELEMENT_TAG = "bellatrix-root";
+
+    public static Document addRootElementIfNeeded(Document doc) {
+        boolean hasMultipleTopLevelElements = doc.childNodes().stream()
+                .filter(node -> node instanceof Element).count() > 1;
+
+        if (hasMultipleTopLevelElements) {
+            var root = new Element(ROOT_ELEMENT_TAG);
+
+            for (Node node : doc.childNodes()) {
+                root.appendChild(node.clone());
+            }
+
+            doc.empty();
+            doc.appendChild(root);
+        }
+
+        return doc;
+    }
+
+    public static String getAbsoluteXpath(Element element) {
+        StringBuilder xpath = new StringBuilder();
+
+        Element currentElement = element;
+        while (currentElement != null) {
+            if (currentElement.tagName().equals("html") || currentElement.tagName().equals("body") || currentElement.tagName().startsWith("#") || currentElement.tagName().equals(ROOT_ELEMENT_TAG)) {
+                // ignore the <html> and <body>, because jsoup added them to the html fragment
+                // ignore added bellatrix root element
+                // ignore invalid element tags
+                break;
+            }
+
+            xpath.insert(0, indexElement(currentElement));
+
+            currentElement = currentElement.parent();
+        }
+
+        return xpath.toString();
+    }
+
+    private String indexElement(Element element) {
+        int index = 1;
+
+        Node previousSibling = element.previousSibling();
+        while (previousSibling != null) {
+            if (previousSibling.nodeName().equals(element.nodeName())) {
+                index++;
+            }
+            previousSibling = previousSibling.previousSibling();
+        }
+
+        return NODE + element.tagName() + "[" + index + "]";
+    }
+
+    public <T> T getAttribute(Element element, String attributeName, Class<T> clazz) {
+        if (element.attribute(attributeName) == null || element.attribute(attributeName).getValue() == null || element.attribute(attributeName).getValue().isBlank()) {
+            return null;
+        } else {
+            return TypeParser.parse(element.attribute(attributeName).getValue(), clazz);
+        }
+    }
+
+    public static String convertAbsoluteXpathToCss(String xpath) {
+        String cssSelector = xpath.replace(NODE, CHILD_COMBINATOR);
+
+        // Use regular expression to replace [number] with :nth-of-type(number)
+        Pattern pattern = Pattern.compile("\\[(\\d+)\\]");
+        Matcher matcher = pattern.matcher(cssSelector);
+        StringBuilder builder = new StringBuilder();
+
+        while (matcher.find()) {
+            matcher.appendReplacement(builder, ":nth-of-type(" + matcher.group(1) + ")");
+        }
+        matcher.appendTail(builder);
+
+        var semiFinalLocator = builder.toString();
+
+        if (semiFinalLocator.startsWith(CHILD_COMBINATOR)) {
+            semiFinalLocator = semiFinalLocator.substring(2);
+        }
+
+        return semiFinalLocator;
+    }
+
+    public static String removeDanglingChildCombinatorsFromCss(String css) {
+        // convert to array by splitting the css by the child combinator
+        // and remove from that array empty steps
+        var steps = Arrays.stream(css.split(CHILD_COMBINATOR))
+                .filter(x -> !x.isBlank())
+                .toArray(String[]::new);
+
+        // join the remaining steps with child combinator operators
+        return String.join(CHILD_COMBINATOR, steps);
+    }
+}
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/InstanceFactory.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/InstanceFactory.java
index fc630195..dd8e5360 100644
--- a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/InstanceFactory.java
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/InstanceFactory.java
@@ -16,6 +16,7 @@
 import java.lang.reflect.InvocationTargetException;
 import java.lang.reflect.ParameterizedType;
 
+@SuppressWarnings("unchecked")
 public final class InstanceFactory {
     public static <T> T create(Class<T> classOf) {
         T obj = null;
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/PropertyReference.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/PropertyReference.java
new file mode 100644
index 00000000..494f510b
--- /dev/null
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/PropertyReference.java
@@ -0,0 +1,8 @@
+package solutions.bellatrix.core.utilities;
+
+import java.io.Serializable;
+
+@FunctionalInterface
+public interface PropertyReference<T> extends Serializable {
+    Object apply(T t);
+}
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/PropertyReferenceNameResolver.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/PropertyReferenceNameResolver.java
new file mode 100644
index 00000000..839e0282
--- /dev/null
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/PropertyReferenceNameResolver.java
@@ -0,0 +1,33 @@
+package solutions.bellatrix.core.utilities;
+
+import lombok.SneakyThrows;
+import lombok.experimental.UtilityClass;
+
+import java.lang.invoke.SerializedLambda;
+import java.lang.reflect.Field;
+import java.lang.reflect.Method;
+
+@UtilityClass
+public class PropertyReferenceNameResolver {
+    public static <T> Field getMember(Class<T> clazz, PropertyReference<T> propertyReference) {
+        var methodName = getFunctionalMethodName(propertyReference);
+        var fields = clazz.getDeclaredFields();
+
+        for (var field : fields) {
+            if (methodName.toLowerCase().contains(field.getName().toLowerCase())) {
+                return field;
+            }
+        }
+
+        return null;
+    }
+
+    @SneakyThrows
+    public static String getFunctionalMethodName(PropertyReference<?> functionalInterface) {
+        Method writeReplaceMethod = functionalInterface.getClass().getDeclaredMethod("writeReplace");
+        writeReplaceMethod.setAccessible(true);
+        SerializedLambda serializedLambda = (SerializedLambda) writeReplaceMethod.invoke(functionalInterface);
+
+        return serializedLambda.getImplMethodName();
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/AssertionMethod.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/Ref.java
similarity index 75%
rename from bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/AssertionMethod.java
rename to bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/Ref.java
index 66018e0c..fe74b7a6 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/AssertionMethod.java
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/Ref.java
@@ -11,9 +11,15 @@
  * limitations under the License.
  */
 
-package solutions.bellatrix.playwright.utilities.functionalinterfaces;
+package solutions.bellatrix.core.utilities;
 
-@FunctionalInterface
-public interface AssertionMethod {
-    void perform();
-}
+/**
+ * Wrapper for passing primitives by reference.
+ */
+public class Ref<T> {
+    public T value;
+
+    public Ref(T value) {
+        this.value = value;
+    }
+}
\ No newline at end of file
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/SingletonFactory.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/SingletonFactory.java
index 1988bff3..dd7d93b8 100644
--- a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/SingletonFactory.java
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/SingletonFactory.java
@@ -13,31 +13,42 @@
 
 package solutions.bellatrix.core.utilities;
 
+import lombok.SneakyThrows;
+import lombok.experimental.UtilityClass;
+
 import java.util.HashMap;
 import java.util.Map;
 
 // Based on http://neutrofoton.github.io/blog/2013/08/29/generic-singleton-pattern-in-java/
 // Can be used inside App design pattern.
+@SuppressWarnings("unchecked")
 public class SingletonFactory {
     private static final SingletonFactory SINGLETON_FACTORY = new SingletonFactory();
 
-    private final Map<String, Object> mapHolder = new HashMap<>();
+    private final Map<Class<?>, Object> mapHolder = new HashMap<>();
 
     private SingletonFactory() {
     }
 
+    @SneakyThrows
     public static <T> T getInstance(Class<T> classOf, Object... initargs) {
         try {
-            if (!SINGLETON_FACTORY.mapHolder.containsKey(classOf.getName())) {
-
+            if (!SINGLETON_FACTORY.mapHolder.containsKey(classOf)) {
                 T obj = (T)classOf.getConstructors()[0].newInstance(initargs);
-                SINGLETON_FACTORY.mapHolder.put(classOf.getName(), obj);
+                SINGLETON_FACTORY.mapHolder.put(classOf, obj);
             }
-
-            return (T)SINGLETON_FACTORY.mapHolder.get(classOf.getName());
+            return (T)SINGLETON_FACTORY.mapHolder.get(classOf);
         } catch (Exception e) {
             Log.error("Failed to create instance of the object. Exception was: " + e);
             return null;
         }
     }
+
+    public static <T> void register(T instance) {
+        SINGLETON_FACTORY.mapHolder.put(instance.getClass(), instance);
+    }
+
+    public static <T> void register(Class<?> classKey, T instance) {
+        SINGLETON_FACTORY.mapHolder.put(classKey, instance);
+    }
 }
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/Wait.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/Wait.java
index 136a1d80..873f8fb9 100644
--- a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/Wait.java
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/Wait.java
@@ -77,4 +77,28 @@ public static boolean retry(Runnable action, Duration timeout, Duration sleepInt
     public static void retry(Runnable action, Duration timeout, Duration sleepInterval, Class<? extends Throwable> ... exceptionsToIgnore) {
         Wait.retry(action, timeout, sleepInterval, true, exceptionsToIgnore);
     }
+
+    public static boolean forConditionUntilTimeout(Comparator condition, long timeoutInMilliseconds, long pollingIntervalInMilliseconds) {
+        boolean isConditionMet = false;
+
+        long startTime = System.currentTimeMillis();
+
+        while (!isConditionMet && (System.currentTimeMillis() - startTime) <= (timeoutInMilliseconds)) {
+            try {
+                if (condition.evaluate()) {
+                    isConditionMet = true;
+                } else {
+                    Thread.sleep(pollingIntervalInMilliseconds);
+                }
+            } catch (Exception ignored) {
+            }
+        }
+
+        return isConditionMet;
+    }
+
+    @FunctionalInterface
+    public interface Comparator {
+        boolean evaluate();
+    }
 }
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/parsing/GenericDateTimeParser.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/parsing/GenericDateTimeParser.java
new file mode 100644
index 00000000..532731f7
--- /dev/null
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/parsing/GenericDateTimeParser.java
@@ -0,0 +1,127 @@
+package solutions.bellatrix.core.utilities.parsing;
+
+import lombok.experimental.UtilityClass;
+import solutions.bellatrix.core.utilities.Ref;
+
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.time.format.DateTimeParseException;
+import java.util.ArrayList;
+import java.util.List;
+
+@UtilityClass
+public class GenericDateTimeParser {
+    public static List<DateTimeFormatter> FORMATTERS = new ArrayList<>();
+    public static List<DateTimeFormatter> PRIORITIZED_FORMATTERS = new ArrayList<>();
+
+    public static void addPattern(String pattern) {
+        FORMATTERS.add(DateTimeFormatter.ofPattern(pattern));
+    }
+
+    public static void prioritizePattern(String pattern) {
+        PRIORITIZED_FORMATTERS.add(DateTimeFormatter.ofPattern(pattern));
+    }
+
+    static {
+        FORMATTERS.add(DateTimeFormatter.ISO_DATE_TIME);
+        FORMATTERS.add(DateTimeFormatter.ISO_TIME);
+        FORMATTERS.add(DateTimeFormatter.ISO_DATE);
+        FORMATTERS.add(DateTimeFormatter.BASIC_ISO_DATE);
+        FORMATTERS.add(DateTimeFormatter.ISO_LOCAL_DATE);
+        FORMATTERS.add(DateTimeFormatter.ISO_LOCAL_TIME);
+        FORMATTERS.add(DateTimeFormatter.ISO_LOCAL_DATE_TIME);
+        FORMATTERS.add(DateTimeFormatter.ISO_OFFSET_DATE);
+        FORMATTERS.add(DateTimeFormatter.ISO_OFFSET_TIME);
+        FORMATTERS.add(DateTimeFormatter.ISO_OFFSET_DATE_TIME);
+        FORMATTERS.add(DateTimeFormatter.ISO_ZONED_DATE_TIME);
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMdd'T'HHmmss.SSS'Z'"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("dd-MM-yyyy HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("dd/MM/yyyy HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("MM/dd/yyyy HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("dd MMM yyyy HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("dd MMMM yyyy HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("E, MMM dd yyyy HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("EEE, MMM dd, yyyy HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("EEEE, MMMM dd, yyyy HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy.MM.dd G 'at' HH:mm:ss z"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy.MM.dd GGGGG 'at' HH:mm:ss z"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy.MM.dd GGGGG 'at' HH:mm:ss z"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSSZ"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ssZ"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSSSSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMdd'T'HHmmss.SSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMdd'T'HHmmss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss,SSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss.SSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss.SSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMdd HHmmss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMdd HHmmssSSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMdd HH:mm"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMdd HHmm"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMdd HH"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMdd"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy/MM/dd"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMddHHmmss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyyMMddHHmmssSSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss.S"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm:ss"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm:ss.SSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy/MM/dd'T'HH:mm:ss.SSSXXX"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ssXXX"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSSXXX"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ssXXX"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSS"));
+        FORMATTERS.add(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss"));
+    }
+
+    public static LocalDateTime parse(String data) {
+        if (!PRIORITIZED_FORMATTERS.isEmpty()) {
+            for (var formatter : PRIORITIZED_FORMATTERS) {
+                try {
+                    return LocalDateTime.parse(data, formatter);
+                } catch (DateTimeParseException ignored){
+                }
+            }
+        }
+        for (var formatter : FORMATTERS) {
+            try {
+                return LocalDateTime.parse(data, formatter);
+            } catch (DateTimeParseException ignored){
+            }
+        }
+
+        throw new IllegalArgumentException(String.format("There was no proper format found for input string '%s'." +
+                "Please register your custom format in %s by using the add method!", data, GenericDateTimeParser.class.getName()));
+    }
+
+    public static boolean tryParse(String data, Ref<LocalDateTime> returnObject) {
+        if (!PRIORITIZED_FORMATTERS.isEmpty()) {
+            for (var formatter : PRIORITIZED_FORMATTERS) {
+                try {
+                    returnObject.value = LocalDateTime.parse(data, formatter);
+                    return true;
+                } catch (DateTimeParseException ignored){
+                }
+            }
+        }
+        for (var formatter : FORMATTERS) {
+            try {
+                returnObject.value = LocalDateTime.parse(data, formatter);
+                return true;
+            } catch (DateTimeParseException ignored){
+            }
+        }
+        returnObject.value = null;
+        return false;
+    }
+}
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/parsing/ParsingInstructions.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/parsing/ParsingInstructions.java
new file mode 100644
index 00000000..7da08d7a
--- /dev/null
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/parsing/ParsingInstructions.java
@@ -0,0 +1,31 @@
+package solutions.bellatrix.core.utilities.parsing;
+
+import java.util.HashMap;
+import java.util.Map;
+import java.util.function.Function;
+
+@SuppressWarnings({"unchecked", "rawtypes"})
+// TODO: RENAME ME
+public class ParsingInstructions<TFrom> extends HashMap<Class<?>, Function<TFrom, ?>> {
+    public ParsingInstructions() {
+        super();
+    }
+
+    public ParsingInstructions(Map<Class<?>, Function<TFrom, ?>> map) {
+        super(map);
+    }
+
+    public <TTo> ParsingInstructions add(Class<TTo> toClass, Function<TFrom, ?> parsingInstructions) {
+        // TODO: EventHandler<> for changing existing instructions
+        super.put(toClass, parsingInstructions);
+        return this;
+    }
+
+    public Function<TFrom, ?> get(Class<TFrom> clazz) {
+        return super.get(clazz);
+    }
+
+    public static ParsingInstructions ofEntries(Entry<Class<?>, Function<?, ?>>... entries) {
+        return new ParsingInstructions(Map.ofEntries(entries));
+    }
+}
\ No newline at end of file
diff --git a/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/parsing/TypeParser.java b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/parsing/TypeParser.java
new file mode 100644
index 00000000..b3f975f0
--- /dev/null
+++ b/bellatrix.core/src/main/java/solutions/bellatrix/core/utilities/parsing/TypeParser.java
@@ -0,0 +1,252 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.core.utilities.parsing;
+
+import lombok.SneakyThrows;
+import lombok.experimental.UtilityClass;
+
+import java.math.BigDecimal;
+import java.math.BigInteger;
+import java.time.LocalDateTime;
+import java.util.Map;
+import java.util.Objects;
+import java.util.function.Function;
+
+/**
+ * Utility class that contains instructions how to convert from one type to another.
+ */
+@UtilityClass
+@SuppressWarnings({"unchecked", "rawtypes"})
+public class TypeParser {
+    /**
+     * Checks for enum fields containing the specified value and prioritizes which enum value to return by the field,
+     * instead of the name of the enum value.
+     */
+    @SneakyThrows
+    public static <T> T parseEnumValue(Object value, Class<T> enumClass) {
+        var fields = enumClass.getDeclaredFields();
+
+        for (T enumConstant : enumClass.getEnumConstants()) {
+            for (var field : fields) {
+                if (field.getClass() == value.getClass()) {
+                    field.setAccessible(true);
+                    Object fieldValue = field.get(enumConstant);
+                    if (fieldValue != null && fieldValue.equals(value)) {
+                        return enumConstant;
+                    }
+                }
+            }
+        }
+        if (value.getClass() == String.class) {
+            return (T) Enum.valueOf((Class<Enum>)enumClass, (String)value);
+        } else {
+            // TODO: EventHandler<> for failing to parse enum.
+            return null;
+        }
+    }
+
+    /**
+     * Checks if instructions for parsing the value to the given class exist and uses them. <br>
+     * In case instructions aren't provided, you can provide them dynamically in your code through {@link #instruct(Class, Class, Function)}
+     */
+    public static <T> T parse(Object value, Class<T> clazz) {
+        var originalClass = value.getClass();
+
+        if (clazz == null) {
+            throw new IllegalArgumentException("Class cannot be null.");
+        }
+
+        Function<Object, T> operation = TypeParser.ALLOWED_OPERATIONS.get(originalClass).get(clazz);
+
+        if (operation != null) {
+            return operation.apply(value);
+        } else if (clazz.isEnum()) {
+            Function<Object, T> enumOperation = x -> TypeParser.parseEnumValue(x, clazz);
+            TypeParser.ALLOWED_OPERATIONS.get(String.class).add(clazz, enumOperation);
+            return enumOperation.apply(value);
+        } else {
+            throw new IllegalArgumentException("Unsupported class type: " + clazz.getName()
+                    + "\nYou can add a custom type parser in " + TypeParser.class.getName());
+        }
+    }
+
+    public static <T, V> void instruct(Class<T> fromClass, Class<V> toClass, Function<T, V> instructions) {
+        if (ALLOWED_OPERATIONS.containsKey(fromClass)) {
+            ALLOWED_OPERATIONS.get(fromClass).add(toClass, instructions);
+        } else {
+            Objects.requireNonNull(ALLOWED_OPERATIONS.put(fromClass, new ParsingInstructions<>())).add(toClass, instructions);
+        }
+    }
+
+    public static <TFrom> void instruct(Class<TFrom> fromClass, Map.Entry<Class<?>, Function<?, ?>>... entries) {
+        var map = ParsingInstructions.ofEntries(entries);
+
+        if (ALLOWED_OPERATIONS.containsKey(fromClass)) {
+            ALLOWED_OPERATIONS.get(fromClass).putAll(map);
+        } else {
+            Objects.requireNonNull(ALLOWED_OPERATIONS.put(fromClass, new ParsingInstructions<>())).putAll(map);
+        }
+    }
+
+    private static final ParsingInstructions<String> STRING_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(String.class, (Function<String, String>) (x) -> x),
+            Map.entry(Integer.class, (Function<String, Integer>) Integer::parseInt),
+            Map.entry(Double.class, (Function<String, Double>) Double::parseDouble),
+            Map.entry(Float.class, (Function<String, Float>) Float::parseFloat),
+            Map.entry(Byte.class, (Function<String, Byte>) Byte::parseByte),
+            Map.entry(Long.class, (Function<String, Long>) Long::parseLong),
+            Map.entry(Short.class, (Function<String, Short>) Short::parseShort),
+            Map.entry(Boolean.class, (Function<String, Boolean>) Boolean::parseBoolean),
+            Map.entry(Character.class, (Function<String, Character>) (x) -> x.charAt(0)),
+            Map.entry(BigDecimal.class, (Function<String, BigDecimal>) BigDecimal::new),
+            Map.entry(BigInteger.class, (Function<String, BigInteger>) BigInteger::new),
+            Map.entry(LocalDateTime.class, (Function<String, LocalDateTime>)GenericDateTimeParser::parse)
+            // TODO: to DateTime
+            // TODO: to Date
+    );
+
+    private static final ParsingInstructions<Integer> INTEGER_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(Integer.class, (Function<Integer, Integer>)(x) -> x),
+            Map.entry(String.class, (Function<Integer, String>)String::valueOf),
+            Map.entry(Double.class, (Function<Integer, Double>)Integer::doubleValue),
+            Map.entry(Float.class, (Function<Integer, Float>)Integer::floatValue),
+            Map.entry(Byte.class, (Function<Integer, Byte>)Integer::byteValue),
+            Map.entry(Long.class, (Function<Integer, Long>)Integer::longValue),
+            Map.entry(Short.class, (Function<Integer, Short>)Integer::shortValue),
+            Map.entry(Character.class, (Function<Integer, Character>)(x) -> String.valueOf(x).charAt(0)),
+            Map.entry(BigDecimal.class, (Function<Integer, BigDecimal>)BigDecimal::valueOf),
+            Map.entry(BigInteger.class, (Function<Integer, BigInteger>)BigInteger::valueOf)
+    );
+
+    private static final ParsingInstructions<Double> DOUBLE_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(Double.class, (Function<Double, Double>)(x) -> x),
+            Map.entry(String.class, (Function<Double, String>)String::valueOf),
+            Map.entry(Integer.class, (Function<Double, Integer>)Double::intValue),
+            Map.entry(Float.class, (Function<Double, Float>)Double::floatValue),
+            Map.entry(Byte.class, (Function<Double, Byte>)Double::byteValue),
+            Map.entry(Long.class, (Function<Double, Long>)Double::longValue),
+            Map.entry(Short.class, (Function<Double, Short>)Double::shortValue),
+            Map.entry(Character.class, (Function<Double, Character>)(x) -> String.valueOf(x).charAt(0)),
+            Map.entry(BigDecimal.class, (Function<Double, BigDecimal>)BigDecimal::valueOf),
+            Map.entry(BigInteger.class, (Function<Double, BigInteger>)(x) -> BigInteger.valueOf(x.intValue()))
+    );
+
+    private static final ParsingInstructions<Float> FLOAT_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(Float.class, (Function<Float, Float>)(x) -> x),
+            Map.entry(String.class, (Function<Float, String>)String::valueOf),
+            Map.entry(Integer.class, (Function<Float, Integer>)Float::intValue),
+            Map.entry(Double.class, (Function<Float, Double>)Float::doubleValue),
+            Map.entry(Byte.class, (Function<Float, Byte>)Float::byteValue),
+            Map.entry(Long.class, (Function<Float, Long>)Float::longValue),
+            Map.entry(Short.class, (Function<Float, Short>)Float::shortValue),
+            Map.entry(Character.class, (Function<Float, Character>)(x) -> String.valueOf(x).charAt(0)),
+            Map.entry(BigDecimal.class, (Function<Float, BigDecimal>)BigDecimal::valueOf),
+            Map.entry(BigInteger.class, (Function<Float, BigInteger>)(x) -> BigInteger.valueOf(x.intValue()))
+    );
+
+    private static final ParsingInstructions<Byte> BYTE_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(Byte.class, (Function<Byte, Byte>)(x) -> x),
+            Map.entry(String.class, (Function<Byte, String>)String::valueOf),
+            Map.entry(Integer.class, (Function<Byte, Integer>)Byte::intValue),
+            Map.entry(Double.class, (Function<Byte, Double>)Byte::doubleValue),
+            Map.entry(Float.class, (Function<Byte, Float>)Byte::floatValue),
+            Map.entry(Long.class, (Function<Byte, Long>)Byte::longValue),
+            Map.entry(Short.class, (Function<Byte, Short>)Byte::shortValue),
+            Map.entry(Character.class, (Function<Byte, Character>)(x) -> String.valueOf(x).charAt(0)),
+            Map.entry(BigDecimal.class, (Function<Byte, BigDecimal>)BigDecimal::valueOf),
+            Map.entry(BigInteger.class, (Function<Byte, BigInteger>)(x) -> BigInteger.valueOf(x.intValue()))
+    );
+
+    private static final ParsingInstructions<Long> LONG_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(Long.class, (Function<Long, Long>)(x) -> x),
+            Map.entry(String.class, (Function<Long, String>)String::valueOf),
+            Map.entry(Integer.class, (Function<Long, Integer>)Long::intValue),
+            Map.entry(Double.class, (Function<Long, Double>)Long::doubleValue),
+            Map.entry(Float.class, (Function<Long, Float>)Long::floatValue),
+            Map.entry(Byte.class, (Function<Long, Byte>)Long::byteValue),
+            Map.entry(Short.class, (Function<Long, Short>)Long::shortValue),
+            Map.entry(Character.class, (Function<Long, Character>)(x) -> String.valueOf(x).charAt(0)),
+            Map.entry(BigDecimal.class, (Function<Long, BigDecimal>)BigDecimal::valueOf),
+            Map.entry(BigInteger.class, (Function<Long, BigInteger>)(x) -> BigInteger.valueOf(x.intValue()))
+    );
+
+    private static final ParsingInstructions<Short> SHORT_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(Short.class, (Function<Short, Short>)(x) -> x),
+            Map.entry(String.class, (Function<Short, String>)String::valueOf),
+            Map.entry(Integer.class, (Function<Short, Integer>)Short::intValue),
+            Map.entry(Double.class, (Function<Short, Double>)Short::doubleValue),
+            Map.entry(Float.class, (Function<Short, Float>)Short::floatValue),
+            Map.entry(Byte.class, (Function<Short, Byte>)Short::byteValue),
+            Map.entry(Long.class, (Function<Short, Long>)Short::longValue),
+            Map.entry(Character.class, (Function<Short, Character>)(x) -> String.valueOf(x).charAt(0)),
+            Map.entry(BigDecimal.class, (Function<Short, BigDecimal>)BigDecimal::valueOf),
+            Map.entry(BigInteger.class, (Function<Short, BigInteger>)(x) -> BigInteger.valueOf(x.intValue()))
+    );
+
+    private static final ParsingInstructions<Character> CHARACTER_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(Character.class, (Function<Character, Character>)(x) -> x),
+            Map.entry(String.class, (Function<Character, String>)String::valueOf),
+            Map.entry(Integer.class, (Function<Character, Integer>)Integer::valueOf),
+            Map.entry(Double.class, (Function<Character, Double>)Double::valueOf),
+            Map.entry(Float.class, (Function<Character, Float>)Float::valueOf),
+            Map.entry(Byte.class, (Function<Character, Byte>)(x) -> Byte.valueOf(String.valueOf(x))),
+            Map.entry(Long.class, (Function<Character, Long>)Long::valueOf),
+            Map.entry(Short.class, (Function<Character, Short>)(x) -> Short.valueOf(String.valueOf(x))),
+            Map.entry(BigDecimal.class, (Function<Character, BigDecimal>)BigDecimal::valueOf),
+            Map.entry(BigInteger.class, (Function<Character, BigInteger>)(x) -> new BigInteger(String.valueOf(x)))
+    );
+
+    private static final ParsingInstructions<BigDecimal> BIG_DECIMAL_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(BigDecimal.class, (Function<BigDecimal, BigDecimal>)(x) -> x),
+            Map.entry(String.class, (Function<BigDecimal, String>)String::valueOf),
+            Map.entry(Integer.class, (Function<BigDecimal, Integer>)BigDecimal::intValue),
+            Map.entry(Double.class, (Function<BigDecimal, Double>)BigDecimal::doubleValue),
+            Map.entry(Float.class, (Function<BigDecimal, Float>)BigDecimal::floatValue),
+            Map.entry(Byte.class, (Function<BigDecimal, Byte>)BigDecimal::byteValue),
+            Map.entry(Long.class, (Function<BigDecimal, Long>)BigDecimal::longValue),
+            Map.entry(Short.class, (Function<BigDecimal, Short>)BigDecimal::shortValue),
+            Map.entry(Character.class, (Function<BigDecimal, Character>)(x) -> String.valueOf(x).charAt(0)),
+            Map.entry(BigInteger.class, (Function<BigDecimal, BigInteger>)(x) -> new BigInteger(String.valueOf(x)))
+    );
+
+    private static final ParsingInstructions<BigInteger> BIG_INTEGER_ALLOWED_OPERATIONS = ParsingInstructions.ofEntries(
+            Map.entry(BigInteger.class, (Function<BigInteger, BigInteger>)(x) -> x),
+            Map.entry(String.class, (Function<BigInteger, String>)String::valueOf),
+            Map.entry(Integer.class, (Function<BigInteger, Integer>)BigInteger::intValue),
+            Map.entry(Double.class, (Function<BigInteger, Double>)BigInteger::doubleValue),
+            Map.entry(Float.class, (Function<BigInteger, Float>)BigInteger::floatValue),
+            Map.entry(Byte.class, (Function<BigInteger, Byte>)BigInteger::byteValue),
+            Map.entry(Long.class, (Function<BigInteger, Long>)BigInteger::longValue),
+            Map.entry(Short.class, (Function<BigInteger, Short>)BigInteger::shortValue),
+            Map.entry(Character.class, (Function<BigInteger, Character>)(x) -> String.valueOf(x).charAt(0)),
+            Map.entry(BigDecimal.class, (Function<BigInteger, BigDecimal>)(x) -> new BigDecimal(String.valueOf(x)))
+    );
+
+    /**
+     * Instructions for converting from one type to another.<br>
+     * You can specify it statically here, or you could add new instructions dynamically via {@link #instruct(Class, Class, Function)}
+     */
+    private static Map<Class, ParsingInstructions> ALLOWED_OPERATIONS = Map.ofEntries(
+            Map.entry(String.class, STRING_ALLOWED_OPERATIONS),
+            Map.entry(Integer.class, INTEGER_ALLOWED_OPERATIONS),
+            Map.entry(Double.class, DOUBLE_ALLOWED_OPERATIONS),
+            Map.entry(Float.class, FLOAT_ALLOWED_OPERATIONS),
+            Map.entry(Byte.class, BYTE_ALLOWED_OPERATIONS),
+            Map.entry(Long.class, LONG_ALLOWED_OPERATIONS),
+            Map.entry(Short.class, SHORT_ALLOWED_OPERATIONS),
+            Map.entry(Character.class, CHARACTER_ALLOWED_OPERATIONS),
+            Map.entry(BigDecimal.class, BIG_DECIMAL_ALLOWED_OPERATIONS),
+            Map.entry(BigInteger.class, BIG_INTEGER_ALLOWED_OPERATIONS)
+    );
+}
diff --git a/bellatrix.playwright.getting.started/src/test/java/O24_iframes_and_shadow_dom/IFramesAndShadowDOMTests.java b/bellatrix.playwright.getting.started/src/test/java/O24_iframes_and_shadow_dom/IFramesAndShadowDOMTests.java
deleted file mode 100644
index 8556178d..00000000
--- a/bellatrix.playwright.getting.started/src/test/java/O24_iframes_and_shadow_dom/IFramesAndShadowDOMTests.java
+++ /dev/null
@@ -1,52 +0,0 @@
-package O24_iframes_and_shadow_dom;
-
-import org.junit.jupiter.api.Assertions;
-import org.junit.jupiter.api.Test;
-import solutions.bellatrix.playwright.components.*;
-import solutions.bellatrix.playwright.infrastructure.junit.WebTest;
-
-public class IFramesAndShadowDOMTests extends WebTest {
-    @Test
-    public void testFindingIFramesOnThePage() {
-        app().navigate().to("https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe");
-        app().create().byId(Button.class, "accept-choices").click();
-
-        // If you create a Frame component, it automatically will start searching for elements inside an <iframe> html element
-        // You can work with iframes in bellatrix.playwright module as if they were any other component
-        var parentIFrame = app().create().byXpath(Frame.class, "//iframe[@id='iframeResult']");
-
-        // This <iframe> is located inside the parentIFrame
-        var iframe = parentIFrame.create().byXpath(Frame.class, "//iframe[@src='https://www.w3schools.com']");
-
-        // This button is located inside iframe
-        iframe.create().byXpath(Button.class, "//div[@id='accept-choices']").click();
-
-        // In case you want to reuse the component locating logic, but stop looking inside the <iframe>, you can use the as() method;
-        // It will automatically switch to using normal locating strategies and you will stop being able to pierce the <iframe>
-        var iframeAsDiv = iframe.as(Div.class);
-        iframeAsDiv.create().byXpath(Heading.class, "//preceding-sibling::h1").validateInnerTextIs("The iframe element");
-
-        // Again, if you create a 'normal' component and want to reuse it, this time to search inside it, as if it is <iframe>, you use as() method again
-        var iframeAsNormalComponent = parentIFrame.create().byXpath(Div.class, "//iframe[@src='https://www.w3schools.com']");
-        var iframeAsFrame = iframeAsNormalComponent.as(Frame.class);
-
-        Assertions.assertEquals(iframeAsFrame.create().byXpath(Div.class, "//div[@id='subtopnav']//a[@title='HTML Tutorial']").getInnerText(), "HTML");
-    }
-
-    @Test
-    public void testFindingElementsInShadowDOM() {
-        app().navigate().to("https://web.dev/articles/shadowdom-v1");
-        // First, we create a Frame component, because the elements for this test are inside of it
-        var iframe = app().create().byXpath(Frame.class, "//iframe[contains(@src, 'raw/fancy-tabs-demo.html')]");
-        iframe.scrollToVisible();
-
-        var tabList = iframe.create().byAttributeContaining(Div.class, "role", "tablist");
-
-        // Be mindful that when in the Shadow DOM, Xpath doesn't work, you'll have to use CSS only
-        var tabs = tabList.create().byId(Div.class, "tabsSlot");
-        // This Xpath won't find the element, even though it searches by id as well:
-        //// var tabs = tabList.create().byXpath(Div.class, "//*[@id='tabsSlot']");
-
-        Assertions.assertEquals(tabs.getAttribute("name"), "title");
-    }
-}
\ No newline at end of file
diff --git a/bellatrix.playwright/pom.xml b/bellatrix.playwright/pom.xml
index e5fdbb0e..1cceb608 100644
--- a/bellatrix.playwright/pom.xml
+++ b/bellatrix.playwright/pom.xml
@@ -18,15 +18,10 @@
             <artifactId>lombok</artifactId>
             <version>1.18.30</version>
         </dependency>
-        <dependency>
-            <groupId>org.jsoup</groupId>
-            <artifactId>jsoup</artifactId>
-            <version>1.17.1</version>
-        </dependency>
         <dependency>
             <groupId>com.microsoft.playwright</groupId>
             <artifactId>playwright</artifactId>
-            <version>1.40.0</version>
+            <version>1.44.0</version>
         </dependency>
         <dependency>
             <groupId>org.junit.jupiter</groupId>
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Anchor.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Anchor.java
index 79daaf36..a08e7dc5 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Anchor.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Anchor.java
@@ -40,7 +40,7 @@ public String getHref() {
     }
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Button.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Button.java
index 4dde58ad..1eb15eeb 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Button.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Button.java
@@ -37,7 +37,7 @@ public void click(Function<Locator.ClickOptions, Locator.ClickOptions> options)
     }
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Div.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Div.java
index c7b3084a..c8c6b5f9 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Div.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Div.java
@@ -24,7 +24,7 @@ public String getHtml() {
     }
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Frame.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Frame.java
index 608a5b4d..8a2296ae 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Frame.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Frame.java
@@ -14,6 +14,7 @@
 package solutions.bellatrix.playwright.components;
 
 import solutions.bellatrix.core.utilities.InstanceFactory;
+import solutions.bellatrix.playwright.components.common.webelement.FrameElement;
 import solutions.bellatrix.playwright.findstrategies.FindStrategy;
 import solutions.bellatrix.playwright.components.common.webelement.WebElement;
 
@@ -32,10 +33,10 @@ public String getName() {
      * @param componentClass type of component
      */
     public <ComponentT extends WebComponent> ComponentT as(Class<ComponentT> componentClass) {
-        if (componentClass == Frame.class) return (ComponentT)this;
+        if (componentClass == this.getClass()) return (ComponentT)this;
 
         var component = InstanceFactory.create(componentClass);
-        var element = new WebElement(this.wrappedElement.getWrappedLocator());
+        var element = ((FrameElement)this.wrappedElement).owner();
         component.setWrappedElement(element);
 
         var findStrategy = (FindStrategy)this.findStrategy.clone();
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Heading.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Heading.java
index a685ef24..b12d03cf 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Heading.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Heading.java
@@ -17,7 +17,7 @@
 
 public class Heading extends WebComponent implements ComponentText {
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 }
\ No newline at end of file
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Label.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Label.java
index d36873f4..9143eac9 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Label.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Label.java
@@ -29,7 +29,7 @@ public String getHtml() {
     }
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Option.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Option.java
index f4fa8741..1f87f0f0 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Option.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Option.java
@@ -30,7 +30,7 @@ public boolean isSelected() {
     }
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 
@@ -40,7 +40,7 @@ public String getValue() {
     }
 
     private boolean equals(Option option) {
-        return this.getInnerText().equals(option.getInnerText()) &&
+        return this.getText().equals(option.getText()) &&
                 this.getValue().equals(option.getValue());
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Output.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Output.java
index e40edf23..82213cb7 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Output.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Output.java
@@ -29,7 +29,7 @@ public String getHtml() {
     }
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Progress.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Progress.java
index 6edd380c..96f1ef98 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Progress.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Progress.java
@@ -24,7 +24,7 @@ public String getMax() {
     }
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Reset.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Reset.java
index 63ae86e6..2726990e 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Reset.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Reset.java
@@ -33,7 +33,7 @@ public boolean isDisabled() {
     }
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Span.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Span.java
index a216b59e..f77db7f7 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Span.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/Span.java
@@ -23,7 +23,7 @@ public String getHtml() {
     }
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         return defaultGetText();
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/TextArea.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/TextArea.java
index 63426602..f2523871 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/TextArea.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/TextArea.java
@@ -22,7 +22,7 @@ public class TextArea extends WebComponent implements ComponentText, ComponentVa
     public final static EventListener<ComponentActionEventArgs> TEXT_SET = new EventListener<>();
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         String text = defaultGetText();
 
         if (text.isEmpty()) {
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/TextInput.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/TextInput.java
index 56717247..43568f67 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/TextInput.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/TextInput.java
@@ -22,7 +22,7 @@ public class TextInput extends WebComponent implements ComponentDisabled, Compon
     public final static EventListener<ComponentActionEventArgs> TEXT_SET = new EventListener<>();
 
     @Override
-    public String getInnerText() {
+    public String getText() {
         String text = defaultGetText();
 
         if (text.isEmpty()) {
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/WebComponent.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/WebComponent.java
index eb5bbf18..7fa92546 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/WebComponent.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/WebComponent.java
@@ -42,6 +42,7 @@
 import solutions.bellatrix.playwright.components.options.actions.HoverOptions;
 import solutions.bellatrix.playwright.components.options.actions.UncheckOptions;
 import solutions.bellatrix.playwright.components.options.states.BoundingBoxOptions;
+import solutions.bellatrix.playwright.components.shadowdom.ShadowRoot;
 import solutions.bellatrix.playwright.configuration.WebSettings;
 import solutions.bellatrix.playwright.findstrategies.*;
 import solutions.bellatrix.playwright.findstrategies.options.*;
@@ -75,7 +76,7 @@ public class WebComponent extends LayoutComponentValidationsBuilder implements C
     public final static EventListener<ComponentActionEventArgs> CREATING = new EventListener<>();
     public final static EventListener<ComponentActionEventArgs> CREATED = new EventListener<>();
 
-    private final WebSettings webSettings;
+    protected WebSettings webSettings;
     @Getter @Setter private WebComponent parentComponent;
     @Getter @Setter private int elementIndex;
     @Getter @Setter protected FindStrategy findStrategy;
@@ -104,7 +105,7 @@ public <ComponentT extends WebComponent> ComponentT as(Class<ComponentT> compone
         var component = InstanceFactory.create(componentClass);
 
         if (componentClass == Frame.class) {
-            component.setWrappedElement(new FrameElement(this.wrappedElement));
+            component.setWrappedElement(this.wrappedElement.locateFrame());
 
             var findStrategy = (FindStrategy)this.findStrategy.clone();
             findStrategy.setWebElement(component.getWrappedElement());
@@ -123,6 +124,7 @@ public <ComponentT extends WebComponent> ComponentT as(Class<ComponentT> compone
     }
 
     public WebElement getWrappedElement() {
+        RETURNING_WRAPPED_ELEMENT.broadcast(new ComponentActionEventArgs(this));
         return wrappedElement;
     }
 
@@ -194,6 +196,10 @@ public WebElement findLocator() {
         return wrappedElement;
     }
 
+    public ShadowRoot getShadowRoot() {
+        return this.as(ShadowRoot.class);
+    }
+
     @Override
     public Point getLocation() {
         return new Point((int)getBoundingBox().x, (int)getBoundingBox().y);
@@ -615,425 +621,771 @@ public <TElementType extends WebComponent> TElementType waitToBe() {
 
     // createBy methods
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByName(Class<TComponent> componentClass, String name) {
         return create().by(componentClass, new NameFindStrategy(name));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByName(Class<TComponent> componentClass, String name) {
         return create().allBy(componentClass, new NameFindStrategy(name));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByNameEndingWith(Class<TComponent> componentClass, String value) {
         return create().by(componentClass, new NameEndingWithFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByNameEndingWith(Class<TComponent> componentClass, String value) {
         return create().allBy(componentClass, new NameEndingWithFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByTag(Class<TComponent> componentClass, String tag) {
         return create().by(componentClass, new TagFindStrategy(tag));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByTag(Class<TComponent> componentClass, String tag) {
         return create().allBy(componentClass, new TagFindStrategy(tag));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByValueContaining(Class<TComponent> componentClass, String value) {
         return create().by(componentClass, new ValueContainingFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByValueContaining(Class<TComponent> componentClass, String value) {
         return create().allBy(componentClass, new ValueContainingFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByLinkText(Class<TComponent> componentClass, String text) {
         return create().by(componentClass, new LinkTextFindStrategy(text));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByLinkText(Class<TComponent> componentClass, String text) {
         return create().allBy(componentClass, new LinkTextFindStrategy(text));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByLinkTextContaining(Class<TComponent> componentClass, String text) {
         return create().by(componentClass, new LinkTextContainingFindStrategy(text));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByLinkTextContaining(Class<TComponent> componentClass, String text) {
         return create().allBy(componentClass, new LinkTextContainingFindStrategy(text));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByIdEndingWith(Class<TComponent> componentClass, String value) {
         return create().by(componentClass, new IdEndingWithFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByIdEndingWith(Class<TComponent> componentClass, String value) {
         return create().allBy(componentClass, new IdEndingWithFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByPlaceholder(Class<TComponent> componentClass, String text) {
         return create().byPlaceholder(componentClass, text, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByPlaceholder(Class<TComponent> componentClass, String text) {
         return create().allByPlaceholder(componentClass, text, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByPlaceholder(Class<TComponent> componentClass, Pattern pattern) {
         return create().byPlaceholder(componentClass, pattern, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByPlaceholder(Class<TComponent> componentClass, Pattern pattern) {
         return create().allByPlaceholder(componentClass, pattern, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByRole(Class<TComponent> componentClass, AriaRole role) {
         return create().byRole(componentClass, role, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByRole(Class<TComponent> componentClass, AriaRole role) {
         return create().allByRole(componentClass, role, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByAltText(Class<TComponent> componentClass, String text) {
         return create().byAltText(componentClass, text, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByAltText(Class<TComponent> componentClass, String text) {
         return create().allByAltText(componentClass, text, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByAltText(Class<TComponent> componentClass, Pattern pattern) {
         return create().byAltText(componentClass, pattern, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByAltText(Class<TComponent> componentClass, Pattern pattern) {
         return create().allByAltText(componentClass, pattern, null);
     }
 
-    public <TComponent extends WebComponent> TComponent createByText(Class<TComponent> componentClass, String text) {
-        return create().byText(componentClass, text, null);
-    }
-
-    public <TComponent extends WebComponent> List<TComponent> createAllByText(Class<TComponent> componentClass, String text) {
-        return create().allByText(componentClass, text, null);
-    }
-
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByTextContaining(Class<TComponent> componentClass, String text) {
-        return create().byText(componentClass, Pattern.compile(String.format(".*%s.*", text)), null);
+        return create().byInnerTextContaining(componentClass, text);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByTextContaining(Class<TComponent> componentClass, String text) {
-        return create().allByText(componentClass, Pattern.compile(String.format(".*%s.*", text)), null);
+        return create().allByInnerTextContaining(componentClass, text);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByTitle(Class<TComponent> componentClass, String text) {
         return create().byTitle(componentClass, text, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByTitle(Class<TComponent> componentClass, String text) {
         return create().allByTitle(componentClass, text, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByTitle(Class<TComponent> componentClass, Pattern pattern) {
         return create().byTitle(componentClass, pattern, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByTitle(Class<TComponent> componentClass, Pattern pattern) {
         return create().allByTitle(componentClass, pattern, null);
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByIdContaining(Class<TComponent> componentClass, String value) {
         return create().by(componentClass, new IdContainingFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByIdContaining(Class<TComponent> componentClass, String value) {
         return create().allBy(componentClass, new IdContainingFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createById(Class<TComponent> componentClass, String value) {
         return create().by(componentClass, new IdFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllById(Class<TComponent> componentClass, String value) {
         return create().allBy(componentClass, new IdFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByClass(Class<TComponent> componentClass, String value) {
         return create().by(componentClass, new ClassFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByClass(Class<TComponent> componentClass, String value) {
         return create().allBy(componentClass, new ClassFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByClassContaining(Class<TComponent> componentClass, String value) {
         return create().by(componentClass, new ClassContainingFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByClassContaining(Class<TComponent> componentClass, String value) {
         return create().allBy(componentClass, new ClassContainingFindStrategy(value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByAttributeContaining(Class<TComponent> componentClass, String attributeName, String value) {
         return create().by(componentClass, new AttributeContainingFindStrategy(attributeName, value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByAttributeContaining(Class<TComponent> componentClass, String attributeName, String value) {
         return create().allBy(componentClass, new AttributeContainingFindStrategy(attributeName, value));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByPlaceholder(Class<TComponent> componentClass, String text, Function<Page.GetByPlaceholderOptions, Page.GetByPlaceholderOptions> options) {
         var placeholderOptions = PlaceholderOptions.createAbsolute(options);
         return create().by(componentClass, new PlaceholderFindStrategy(text, placeholderOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByPlaceholder(Class<TComponent> componentClass, String text, Function<Page.GetByPlaceholderOptions, Page.GetByPlaceholderOptions> options) {
         var placeholderOptions = PlaceholderOptions.createAbsolute(options);
         return create().allBy(componentClass, new PlaceholderFindStrategy(text, placeholderOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByPlaceholder(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByPlaceholderOptions, Page.GetByPlaceholderOptions> options) {
         var placeholderOptions = PlaceholderOptions.createAbsolute(options);
         return create().by(componentClass, new PlaceholderFindStrategy(pattern, placeholderOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByPlaceholder(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByPlaceholderOptions, Page.GetByPlaceholderOptions> options) {
         var placeholderOptions = PlaceholderOptions.createAbsolute(options);
         return create().allBy(componentClass, new PlaceholderFindStrategy(pattern, placeholderOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByTestId(Class<TComponent> componentClass, String text) {
         return create().by(componentClass, new TestIdFindStrategy(text));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByTestId(Class<TComponent> componentClass, String text) {
         return create().allBy(componentClass, new TestIdFindStrategy(text));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByTestId(Class<TComponent> componentClass, Pattern pattern) {
         return create().by(componentClass, new TestIdFindStrategy(pattern));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByTestId(Class<TComponent> componentClass, Pattern pattern) {
         return create().allBy(componentClass, new TestIdFindStrategy(pattern));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByRole(Class<TComponent> componentClass, AriaRole role, Function<Page.GetByRoleOptions, Page.GetByRoleOptions> options) {
         var roleOptions = RoleOptions.createAbsolute(options);
         return create().by(componentClass, new AriaRoleFindStrategy(role, roleOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByRole(Class<TComponent> componentClass, AriaRole role, Function<Page.GetByRoleOptions, Page.GetByRoleOptions> options) {
         var roleOptions = RoleOptions.createAbsolute(options);
         return create().allBy(componentClass, new AriaRoleFindStrategy(role, roleOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByAltText(Class<TComponent> componentClass, String text, Function<Page.GetByAltTextOptions, Page.GetByAltTextOptions> options) {
         var altTextOptions = AltTextOptions.createAbsolute(options);
         return create().by(componentClass, new AltTextFindStrategy(text, altTextOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByAltText(Class<TComponent> componentClass, String text, Function<Page.GetByAltTextOptions, Page.GetByAltTextOptions> options) {
         var altTextOptions = AltTextOptions.createAbsolute(options);
         return create().allBy(componentClass, new AltTextFindStrategy(text, altTextOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByAltText(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByAltTextOptions, Page.GetByAltTextOptions> options) {
         var altTextOptions = AltTextOptions.createAbsolute(options);
         return create().by(componentClass, new AltTextFindStrategy(pattern, altTextOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByAltText(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByAltTextOptions, Page.GetByAltTextOptions> options) {
         var altTextOptions = AltTextOptions.createAbsolute(options);
         return create().allBy(componentClass, new AltTextFindStrategy(pattern, altTextOptions));
     }
 
-    public <TComponent extends WebComponent> TComponent createByText(Class<TComponent> componentClass, String text, Function<Page.GetByTextOptions, Page.GetByTextOptions> options) {
-        var textOptions = TextOptions.createAbsolute(options);
-        return create().by(componentClass, new TextFindStrategy(text, textOptions));
-    }
-
-    public <TComponent extends WebComponent> List<TComponent> createAllByText(Class<TComponent> componentClass, String text, Function<Page.GetByTextOptions, Page.GetByTextOptions> options) {
-        var textOptions = TextOptions.createAbsolute(options);
-        return create().allBy(componentClass, new TextFindStrategy(text, textOptions));
-    }
-
-    public <TComponent extends WebComponent> TComponent createByText(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByTextOptions, Page.GetByTextOptions> options) {
-        var textOptions = TextOptions.createAbsolute(options);
-        return create().by(componentClass, new TextFindStrategy(pattern, textOptions));
-    }
-
-    public <TComponent extends WebComponent> List<TComponent> createAllByText(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByTextOptions, Page.GetByTextOptions> options) {
-        var textOptions = TextOptions.createAbsolute(options);
-        return create().allBy(componentClass, new TextFindStrategy(pattern, textOptions));
-    }
-
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByTitle(Class<TComponent> componentClass, String text, Function<Page.GetByTitleOptions, Page.GetByTitleOptions> options) {
         var titleOptions = TitleOptions.createAbsolute(options);
         return create().by(componentClass, new TitleFindStrategy(text, titleOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByTitle(Class<TComponent> componentClass, String text, Function<Page.GetByTitleOptions, Page.GetByTitleOptions> options) {
         var titleOptions = TitleOptions.createAbsolute(options);
         return create().allBy(componentClass, new TitleFindStrategy(text, titleOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByTitle(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByTitleOptions, Page.GetByTitleOptions> options) {
         var titleOptions = TitleOptions.createAbsolute(options);
         return create().by(componentClass, new TitleFindStrategy(pattern, titleOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByTitle(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByTitleOptions, Page.GetByTitleOptions> options) {
         var titleOptions = TitleOptions.createAbsolute(options);
         return create().allBy(componentClass, new TitleFindStrategy(pattern, titleOptions));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByXpath(Class<TComponent> componentClass, String xpath) {
         return create().by(componentClass, new XpathFindStrategy(xpath));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByXpath(Class<TComponent> componentClass, String xpath) {
         return create().allBy(componentClass, new XpathFindStrategy(xpath));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent createByCss(Class<TComponent> componentClass, String css) {
         return create().by(componentClass, new CssFindStrategy(css));
     }
 
+    /**
+     * Use {@link WebComponent#create() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> createAllByCss(Class<TComponent> componentClass, String css) {
         return create().allBy(componentClass, new CssFindStrategy(css));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent shadowRootCreate(Class<TFindStrategy> findStrategyClass, Class<TComponent> componentClass, Object... args) {
         var findStrategy = InstanceFactory.create(findStrategyClass, args);
         return create().by(componentClass, findStrategy);
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> shadowRootCreateAll(Class<TFindStrategy> findStrategyClass, Class<TComponent> componentClass, Object... args) {
         var findStrategy = InstanceFactory.create(findStrategyClass, args);
         return create().allBy(componentClass, findStrategy);
     }
 
-
-    // There is no need for shadowRootCreate, because the native playwright locators pierce the shadow DOM (except for xpath)
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateById(Class<TComponent> componentClass, String id) {
         return create().by(componentClass, new IdFindStrategy(id));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByAttributeContaining(Class<TComponent> componentClass, String attributeName, String value) {
         return create().by(componentClass, new AttributeContainingFindStrategy(attributeName, value));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByIdEndingWith(Class<TComponent> componentClass, String idEnding) {
         return create().by(componentClass, new IdEndingWithFindStrategy(idEnding));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByCss(Class<TComponent> componentClass, String css) {
         return create().by(componentClass, new CssFindStrategy(css));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByClass(Class<TComponent> componentClass, String className) {
         return create().by(componentClass, new ClassFindStrategy(className));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByName(Class<TComponent> componentClass, String name) {
         return create().by(componentClass, new NameFindStrategy(name));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByNameEnding(Class<TComponent> componentClass, String nameEnding) {
         return create().by(componentClass, new NameEndingWithFindStrategy(nameEnding));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByValueContaining(Class<TComponent> componentClass, String valueContaining) {
         return create().by(componentClass, new ValueContainingFindStrategy(valueContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByClassContaining(Class<TComponent> componentClass, String classNameContaining) {
         return create().by(componentClass, new ClassContainingFindStrategy(classNameContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByXPath(Class<TComponent> componentClass, String xpath) {
         return create().by(componentClass, new XpathFindStrategy(xpath));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByLinkText(Class<TComponent> componentClass, String linkText) {
         return create().by(componentClass, new LinkTextFindStrategy(linkText));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByLinkTextContaining(Class<TComponent> componentClass, String linkTextContaining) {
         return create().by(componentClass, new LinkTextContainingFindStrategy(linkTextContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByTag(Class<TComponent> componentClass, String tag) {
         return create().by(componentClass, new TagFindStrategy(tag));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByIdContaining(Class<TComponent> componentClass, String idContaining) {
         return create().by(componentClass, new IdContainingFindStrategy(idContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByInnerTextContaining(Class<TComponent> componentClass, String innerText) {
-        return create().by(componentClass, new TextFindStrategy(Pattern.compile(String.format(".*%s.*", innerText))));
+        return create().by(componentClass, new InnerTextContainingFindStrategy(innerText));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllById(Class<TComponent> componentClass, String id) {
         return create().allBy(componentClass, new IdFindStrategy(id));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByAttributeContaining(Class<TComponent> componentClass, String attributeName, String value) {
         return create().allBy(componentClass, new AttributeContainingFindStrategy(attributeName, value));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByIdEndingWith(Class<TComponent> componentClass, String idEnding) {
         return create().allBy(componentClass, new IdEndingWithFindStrategy(idEnding));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByCss(Class<TComponent> componentClass, String css) {
         return create().allBy(componentClass, new CssFindStrategy(css));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByClass(Class<TComponent> componentClass, String className) {
         return create().allBy(componentClass, new ClassFindStrategy(className));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByName(Class<TComponent> componentClass, String name) {
         return create().allBy(componentClass, new NameFindStrategy(name));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByNameEnding(Class<TComponent> componentClass, String nameEnding) {
         return create().allBy(componentClass, new NameEndingWithFindStrategy(nameEnding));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByValueContaining(Class<TComponent> componentClass, String valueContaining) {
         return create().allBy(componentClass, new ValueContainingFindStrategy(valueContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByClassContaining(Class<TComponent> componentClass, String classNameContaining) {
         return create().allBy(componentClass, new ClassContainingFindStrategy(classNameContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByXPath(Class<TComponent> componentClass, String xpath) {
         return create().allBy(componentClass, new XpathFindStrategy(xpath));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByLinkText(Class<TComponent> componentClass, String linkText) {
         return create().allBy(componentClass, new LinkTextFindStrategy(linkText));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByLinkTextContaining(Class<TComponent> componentClass, String linkTextContaining) {
         return create().allBy(componentClass, new LinkTextContainingFindStrategy(linkTextContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByTag(Class<TComponent> componentClass, String tag) {
         return create().allBy(componentClass, new TagFindStrategy(tag));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByIdContaining(Class<TComponent> componentClass, String idContaining) {
         return create().allBy(componentClass, new IdContainingFindStrategy(idContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByInnerTextContaining(Class<TComponent> componentClass, String innerText) {
-        return create().allBy(componentClass, new TextFindStrategy(Pattern.compile(String.format(".*%s.*", innerText))));
+        return create().allBy(componentClass, new InnerTextContainingFindStrategy(innerText));
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/HeaderInfo.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/HeaderInfo.java
new file mode 100644
index 00000000..d44c0bd1
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/HeaderInfo.java
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter @Setter
+public class HeaderInfo {
+    private String headerName;
+    private Integer order;
+
+    public HeaderInfo(String headerName) {
+        this.headerName = headerName;
+    }
+
+    public HeaderInfo(String headerName, Integer order) {
+        this(headerName);
+        this.order = order;
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/HeaderRowIndex.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/HeaderRowIndex.java
new file mode 100644
index 00000000..61dfff7f
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/HeaderRowIndex.java
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter @Setter
+public class HeaderRowIndex {
+    public HeaderRowIndex(String headerName, int rowspan, int colspan, int rowIndex) {
+        this.headerName = headerName;
+        this.rowspan = rowspan;
+        this.colspan = colspan;
+        this.rowIndex = rowIndex;
+    }
+
+    private String headerName;
+    private int rowspan;
+    private int colspan;
+    private int rowIndex;
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/TableHeader.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/TableHeader.java
new file mode 100644
index 00000000..1a14672a
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/TableHeader.java
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced;
+
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+
+@Retention(RetentionPolicy.RUNTIME)
+public @interface TableHeader {
+    String name();
+    int order() default 0;
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/ControlColumnData.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/ControlColumnData.java
new file mode 100644
index 00000000..c1ef1b2e
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/ControlColumnData.java
@@ -0,0 +1,32 @@
+package solutions.bellatrix.playwright.components.advanced.grid;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.advanced.HeaderInfo;
+import solutions.bellatrix.playwright.findstrategies.FindStrategy;
+
+@Getter @Setter
+public class ControlColumnData extends HeaderInfo {
+    private FindStrategy findStrategy;
+    private Class<? extends WebComponent> componentClass;
+
+    ControlColumnData(String headerName) {
+        super(headerName);
+    }
+    ControlColumnData(String headerName, Integer order) {
+        super(headerName, order);
+    }
+
+    <TComponent extends WebComponent> ControlColumnData(String headerName, FindStrategy by, Class<TComponent> componentClazz) {
+        super(headerName, null);
+        findStrategy = by;
+        componentClass = componentClazz;
+    }
+
+    <TComponent extends WebComponent, TFindStrategy extends FindStrategy> ControlColumnData(String headerName, TFindStrategy by, Class<TComponent> componentClazz, int order) {
+        super(headerName, order);
+        findStrategy = by;
+        componentClass = componentClazz;
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/Grid.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/Grid.java
new file mode 100644
index 00000000..abec7ee5
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/Grid.java
@@ -0,0 +1,502 @@
+package solutions.bellatrix.playwright.components.advanced.grid;
+
+import lombok.Getter;
+import lombok.Setter;
+import lombok.SneakyThrows;
+import org.apache.commons.text.StringEscapeUtils;
+import org.junit.jupiter.api.Assertions;
+import solutions.bellatrix.core.assertions.EntitiesAsserter;
+import solutions.bellatrix.core.utilities.*;
+import solutions.bellatrix.core.utilities.parsing.TypeParser;
+import solutions.bellatrix.playwright.components.Button;
+import solutions.bellatrix.playwright.components.Label;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.advanced.HeaderInfo;
+import solutions.bellatrix.playwright.components.advanced.TableHeader;
+import solutions.bellatrix.playwright.components.advanced.services.FooterService;
+import solutions.bellatrix.playwright.components.advanced.services.HeaderNamesService;
+import solutions.bellatrix.playwright.components.advanced.services.TableLocators;
+import solutions.bellatrix.playwright.components.advanced.services.TableService;
+import solutions.bellatrix.playwright.components.advanced.table.TableCell;
+import solutions.bellatrix.playwright.components.advanced.table.TableHeaderRow;
+import solutions.bellatrix.playwright.components.common.datahandlers.ControlDataHandler;
+import solutions.bellatrix.playwright.findstrategies.FindStrategy;
+import solutions.bellatrix.playwright.findstrategies.XpathFindStrategy;
+
+import java.lang.reflect.Field;
+import java.lang.reflect.Method;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Objects;
+import java.util.function.Consumer;
+import java.util.function.Predicate;
+
+public class Grid extends WebComponent {
+    private TableService tableService;
+    @Getter @Setter private List<ControlColumnData> controlColumnDataCollection;
+
+    public TableService getTableService() {
+        if (tableService == null) {
+            waitUntilPopulated();
+            var innerHtml = defaultGetInnerHtmlAttribute();
+            tableService = new TableService(innerHtml);
+        }
+
+        return tableService;
+    }
+
+    private TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+
+    public HeaderNamesService getHeaderNamesService() {
+        return new HeaderNamesService(getTableService().getHeaderRows());
+    }
+
+    public FooterService getFooterService() {
+        return new FooterService(getTableService().getFooter());
+    }
+
+    public List<Button> getColumnHeaders() {
+        var list = new ArrayList<Button>();
+        for (var header : getTableService().getHeaders()) {
+            var element = this.create().byXpath(Button.class, HtmlService.getAbsoluteXpath(header));
+            list.add(element);
+        }
+
+        return list;
+    }
+
+    public List<TableHeaderRow> getTableHeaderRows() {
+        var list = new ArrayList<TableHeaderRow>();
+        for (var headerRow : getTableService().getHeaderRows()) {
+            var element = this.create().byXpath(TableHeaderRow.class, HtmlService.getAbsoluteXpath(headerRow));
+            list.add(element);
+        }
+
+        return list;
+    }
+
+    public void waitUntilPopulated() {
+        Wait.forConditionUntilTimeout(() -> {
+            var rows = this.create().allByXpath(Label.class, "." + locators().getRowsXpath());
+            return rows != null && !rows.isEmpty();
+        }, 3000, 500);
+    }
+
+    public List<String> getHeaderNames() {
+        return getHeaderNamesService().getHeaderNames();
+    }
+
+    public void forEachHeader(Consumer<Button> action) {
+        for (var header : getColumnHeaders()) {
+            action.accept(header);
+        }
+    }
+
+    public int rowsCount() {
+        return getTableService().getRows().size();
+    }
+
+    public GridRow getRow(int rowIndex) {
+        String xpath = HtmlService.getAbsoluteXpath(getTableService().getRow(rowIndex));
+        GridRow row = this.create().byXpath(GridRow.class, "." + xpath);
+        row.setParentGrid(this);
+        row.setIndex(rowIndex);
+
+        return row;
+    }
+
+    public List<GridRow> getRows() {
+        var rowsCount = getTableService().getRows().size();
+
+        var list = new ArrayList<GridRow>(rowsCount);
+
+        for (int rowIndex = 0; rowIndex < rowsCount; rowIndex++) {
+            list.add(getRow(rowIndex));
+        }
+
+        return list;
+    }
+
+    public <TComponent extends WebComponent> List<GridRow> getRows(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getRows().stream().filter(r -> !r.getCells(clazz, selector).isEmpty()).toList();
+    }
+
+    public <TComponent extends WebComponent> GridRow getFirstOrDefaultRow(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getRows(clazz, selector).stream().findFirst().orElse(null);
+    }
+
+    public void forEachRow(Consumer<GridRow> action) {
+        for (var gridRow : getTableService().getRows()) {
+            String xpath = HtmlService.getAbsoluteXpath(gridRow);
+            action.accept(this.create().byXpath(GridRow.class, "." + xpath));
+        }
+    }
+
+    public GridCell getCell(int row, int column) {
+        String xpath = HtmlService.getAbsoluteXpath(getTableService().getCell(row, column));
+//        if (innerXpath.startsWith(".")) innerXpath = innerXpath.substring(1);
+//        String outerXpath = getCurrentElementXPath();
+//
+//        String fullXpath = Objects.requireNonNullElse(outerXpath, ".") + innerXpath;
+
+        GridCell cell = this.create().byXpath(GridCell.class, xpath);
+        setCellMetaData(cell, row, column);
+
+        return cell;
+    }
+
+    public GridCell getCell(String header, int row) {
+        Integer position = getHeaderNamesService().getHeaderPosition(header, controlColumnDataCollection);
+        if (position == null) return null;
+
+        return getCell(row, position);
+    }
+
+    public <TDto> GridCell getCell(Class<TDto> clazz, PropertyReference<TDto> expression, int row) {
+        String headerName = getHeaderNamesService().getHeaderNameByExpression(clazz, expression);
+        Integer position = getHeaderNamesService().getHeaderPosition(headerName, controlColumnDataCollection);
+        if (position == null) return null;
+
+        return getCell(row, position);
+    }
+
+    public void forEachCell(Consumer<GridCell> action) {
+        for (var gridCell : getTableService().getCells()) {
+            action.accept(this.create().byXpath(GridCell.class, "." + HtmlService.getAbsoluteXpath(gridCell)));
+        }
+    }
+
+    public <TComponent extends WebComponent> List<TComponent> getCells(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        var rows = getRows();
+
+        var filteredCells = new ArrayList<TComponent>(rows.size());
+
+        for (var gridRow : rows) {
+            var currentFilteredCells = gridRow.getCells(clazz, selector);
+            filteredCells.addAll(currentFilteredCells);
+        }
+
+        return filteredCells;
+    }
+
+    public int getFooterRowsCount() {
+        return getFooterService().getRows().size();
+    }
+
+    public GridRow getFooterByName(String footerName) {
+        int currentRowIndex = 0;
+        for (var footerRow : getFooterService().getRows()) {
+            if (Objects.equals((footerRow).selectXpath(".//").text(), footerName)) {
+                return getFooterByPosition(currentRowIndex);
+            }
+
+            currentRowIndex++;
+        }
+
+        throw new IllegalArgumentException(String.format("Footer row %s was not found.", footerName));
+    }
+
+    public GridRow getFooterByPosition(int position) {
+        String xpath = HtmlService.getAbsoluteXpath(getFooterService().getRows().get(position));
+        GridRow row = this.create().byXpath(GridRow.class, "." + xpath);
+        row.setParentGrid(this);
+        row.setIndex(position);
+
+        return row;
+    }
+
+    public List<GridRow> getFooterRows() {
+        var list = new ArrayList<GridRow>(getFooterRowsCount());
+
+        for (int rowIndex = 0; rowIndex < getFooterRowsCount(); rowIndex++) {
+            GridRow row = getFooterByPosition(rowIndex);
+            list.add(row);
+        }
+
+        return list;
+    }
+
+    public <TComponent extends WebComponent> List<GridRow> getFooterRows(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getFooterRows().stream().filter(r -> !r.getCells(clazz, selector).isEmpty()).toList();
+    }
+
+    public <TComponent extends WebComponent> GridRow getFirstOrDefaultFooterRow(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getFooterRows(clazz, selector).stream().findFirst().orElse(null);
+    }
+
+    public void forEachFooterRow(Consumer<GridRow> action) {
+        for (var gridRow : getFooterService().getRows()) {
+            String xpath = HtmlService.getAbsoluteXpath(gridRow);
+            action.accept(this.create().byXpath(GridRow.class, "." + xpath));
+        }
+    }
+
+    public <TComponent extends WebComponent> TComponent getFirstOrDefaultCell(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getCells(clazz, selector).stream().findFirst().orElse(null);
+    }
+
+    public <TComponent extends WebComponent> TComponent getLastOrDefaultCell(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        var cells = getCells(clazz, selector);
+        if (cells == null || cells.isEmpty()) return null;
+
+        return cells.get(cells.size() - 1);
+    }
+
+    public String getGridColumnNameByIndex(int index) {
+        return getHeaderNamesService().getHeaderNames().get(index);
+    }
+
+    public int getGridColumnIndexByName(String columnName) {
+        var coll = getHeaderNamesService().getHeaderNames();
+
+        return coll.indexOf(columnName);
+    }
+
+    public List<GridCell> getColumn(int column) {
+        var list = new ArrayList<GridCell>(rowsCount());
+
+        for (int row = 0; row < rowsCount(); row++) {
+            list.add(getCell(row, column));
+        }
+
+        return list;
+    }
+
+    public List<GridCell> getColumn(String header) {
+        return getColumn(header, null);
+    }
+
+    public List<GridCell> getColumn(String header, Integer order) {
+        Integer position = getHeaderNamesService().getHeaderPosition(header, controlColumnDataCollection, order);
+        if (position == null) return new ArrayList<>();
+
+        return getColumn(position);
+    }
+
+    public <TRowObject> void assertTable(Class<TRowObject> clazz, List<TRowObject> expectedEntities, String... fieldsNotToCompare) {
+        scrollToVisible();
+        Assertions.assertEquals(expectedEntities.size(), rowsCount(), String.format("Expected rows count %d but rows was %s", expectedEntities.size(), rowsCount()));
+
+        for (int i = 0; i < rowsCount(); i++) {
+            var entity = castRow(clazz, i, fieldsNotToCompare);
+            EntitiesAsserter.areEqual(expectedEntities.get(i), entity, fieldsNotToCompare);
+        }
+    }
+
+    @SneakyThrows
+    @SuppressWarnings({"unchecked"})
+    public <TRowObject> void assertTable(Class<TRowObject> clazz, List<TRowObject> expectedEntities) {
+        scrollToVisible();
+        Assertions.assertEquals(expectedEntities.size(), rowsCount(), String.format("Expected rows count %d but rows was %s", expectedEntities.size(), rowsCount()));
+
+        for (int i = 0; i < rowsCount(); i++) {
+            int finalI = i;
+            var propsNotToCompare = Arrays.stream(expectedEntities.get(i).getClass().getDeclaredFields())
+                    .filter(f -> {
+                        try {
+                            f.setAccessible(true);
+                            return f.get(expectedEntities.get(finalI)) == null;
+                        } catch (IllegalAccessException e) {
+                            throw new RuntimeException(e);
+                        }
+                    })
+                    .map(f -> getHeaderNamesService().getHeaderNameByField(f))
+                    .toArray(String[]::new);
+
+            TRowObject entity;
+            if (!clazz.equals(Object.class)) {
+                entity = castRow(clazz, i, propsNotToCompare);
+            } else {
+                Method method = this.getClass().getMethod("castRow", int.class, List.class);
+                entity = (TRowObject)method.invoke(this, i, Arrays.stream(propsNotToCompare).toList());
+            }
+            EntitiesAsserter.areEqual(expectedEntities.get(i), entity, propsNotToCompare);
+        }
+    }
+
+    public void assertIsEmpty() {
+        scrollToVisible();
+        Assertions.assertTrue(getTableService().getRows().isEmpty(), String.format("Grid should be empty, but has %d rows.", rowsCount()));
+    }
+
+    public void assertIsNotEmpty() {
+        scrollToVisible();
+        Assertions.assertFalse(getTableService().getRows().isEmpty(), "Grid has no rows.");
+    }
+
+    public void assertRowsCount(int expectedRowsCount) {
+        scrollToVisible();
+        Assertions.assertEquals(expectedRowsCount, rowsCount(), String.format("Grid should have %d rows, but has %d rows.", expectedRowsCount, rowsCount()));
+    }
+
+    public <TRowObject> List<TRowObject> getItems(Class<TRowObject> clazz) {
+        scrollToVisible();
+        return getItems(clazz, getRows());
+    }
+
+    @SneakyThrows
+    public <TRowObject> TRowObject castRow(Class<TRowObject> clazz, int rowIndex, String... fieldsToSkip) {
+        var cells = getTableService().getRowCells(rowIndex);
+
+        if(controlColumnDataCollection == null || controlColumnDataCollection.isEmpty()) {
+            throw new IllegalArgumentException("The grid does not have a column model set!");
+        }
+
+        if (cells.size() != controlColumnDataCollection.size()) {
+
+            // Compare headers to determine why the cells count is different
+            var actual = getHeaderNamesService().getHeaderNames();
+            var expected = controlColumnDataCollection.stream().map(HeaderInfo::getHeaderName).toList();
+
+            Assertions.assertIterableEquals(expected, actual, String.format("Expected: %s%sActual: %s", expected, System.lineSeparator(), actual));
+        }
+
+        var dto = InstanceFactory.create(clazz);
+        var fields = clazz.getFields();
+        for (var field : fields) {
+            var fieldType = field.getType();
+
+            var headerInfo = getHeaderNamesService().getHeaderInfoByField(field);
+
+            if (Arrays.stream(fieldsToSkip).anyMatch(f -> f.equals(headerInfo.getHeaderName()))) continue;
+
+            Integer headerPosition = getHeaderNamesService().getHeaderPosition(headerInfo.getHeaderName(), controlColumnDataCollection, headerInfo.getOrder());
+            if (headerPosition == null) continue;
+
+            var controlData = getControlDataByField(field);
+            if (controlData != null && controlData.getComponentClass() != null && WebComponent.class.isAssignableFrom(controlData.getComponentClass())) {
+                var xpath = HtmlService.getAbsoluteXpath(cells.get(headerPosition));
+                var tableCell = this.create().byXpath(TableCell.class, "." + xpath);
+                Object elementValue;
+                if (controlData.getFindStrategy() == null) {
+                    controlData.setFindStrategy(new XpathFindStrategy(xpath));
+                    elementValue = getCellData(controlData, tableCell);
+                    controlData.setFindStrategy(null);
+                }
+                else {
+                    elementValue = getCellData(controlData, tableCell);
+                }
+
+                field.set(dto, TypeParser.parse(elementValue, fieldType));
+            } else {
+                String htmlNodeValue = StringEscapeUtils.unescapeHtml4((getTableService().getRowCells(rowIndex).get(headerPosition)).text().trim());
+                field.set(dto, TypeParser.parse(htmlNodeValue, fieldType));
+            }
+        }
+
+        return dto;
+    }
+
+    public void setCellMetaData(GridCell cell, int row, int column) {
+        cell.setRow(row);
+        cell.setColumn(column);
+
+        if (controlColumnDataCollection == null || controlColumnDataCollection.isEmpty()) {
+            throw new IllegalArgumentException("The grid does not have a column model set!");
+        }
+
+        var columnData = controlColumnDataCollection.get(column);
+        var headerName = columnData.getHeaderName();
+        var controlData = getControlColumnDataByHeaderName(controlColumnDataCollection, headerName);
+        cell.setCellControlFindStrategy(controlData.getFindStrategy());
+        cell.setCellControlComponentType(controlData.getComponentClass());
+    }
+
+    public <TRowObject, TRow extends GridRow> List<TRowObject> getItems(Class<TRowObject> clazz, List<TRow> rows) {
+        var list = new ArrayList<TRowObject>();
+        for (var row : rows) {
+            var obj = castRow(clazz, row.getIndex());
+            list.add(obj);
+        }
+
+        return list;
+    }
+
+    private ControlColumnData getControlDataByField(Field field) {
+        ControlColumnData headerInfo;
+
+        if (field.isAnnotationPresent(TableHeader.class)) {
+            var headerNameAttribute = field.getAnnotation(TableHeader.class);
+            headerInfo = controlColumnDataCollection.stream().filter(h -> Objects.equals(h.getHeaderName(), headerNameAttribute.name())).findFirst().orElse(null);
+        } else {
+            headerInfo = controlColumnDataCollection.stream().filter(h -> Objects.equals(h.getHeaderName(), field.getName())).findFirst().orElse(null);
+        }
+
+        return headerInfo;
+    }
+
+    @SneakyThrows
+    private Object getCellData(ControlColumnData controlData, TableCell tableCell) {
+        var element = this.create().by(controlData.getComponentClass(), controlData.getFindStrategy());
+
+        return ControlDataHandler.getData((WebComponent)element);
+    }
+
+    private ControlColumnData getControlColumnDataByHeaderName(List<? extends HeaderInfo> controlColumnDataCollection, String headerName) {
+        return (ControlColumnData)controlColumnDataCollection.stream().filter(x -> x.getHeaderName().equals(headerName)).findFirst().orElse(null);
+    }
+
+    private boolean anyControlColumnDataByHeaderName(List<? extends HeaderInfo> controlColumnDataCollection, String headerName) {
+        return controlColumnDataCollection.stream().anyMatch(x -> x.getHeaderName().equals(headerName));
+    }
+
+    public Grid setColumn(String headerName) {
+        if (controlColumnDataCollection == null) {
+            controlColumnDataCollection = new ArrayList<>();
+        }
+
+        controlColumnDataCollection.add(new ControlColumnData(headerName));
+
+        return this;
+    }
+
+    public Grid setColumns(List<String> headerNames) {
+        if (headerNames == null || headerNames.isEmpty()) {
+            return this;
+        }
+
+        if (controlColumnDataCollection == null) {
+            controlColumnDataCollection = new ArrayList<>();
+        }
+
+        for (var headerName : headerNames) {
+            controlColumnDataCollection.add(new ControlColumnData(headerName));
+        }
+
+        return this;
+    }
+
+    public <TComponent extends WebComponent> Grid setColumn(String headerName, Class<TComponent> type) {
+        if (controlColumnDataCollection == null) {
+            controlColumnDataCollection = new ArrayList<>();
+        }
+
+        controlColumnDataCollection.add(new ControlColumnData(headerName, null, type));
+
+        return this;
+    }
+
+    public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> Grid setColumn(String headerName, Class<TComponent> type, TFindStrategy controlInnerLocator) {
+        if (controlColumnDataCollection == null) {
+            controlColumnDataCollection = new ArrayList<ControlColumnData>();
+        }
+
+        var column = new ControlColumnData(headerName, controlInnerLocator, type);
+        controlColumnDataCollection.add(column);
+
+        return this;
+    }
+
+    public <TGridModel> Grid setModelColumns(Class<TGridModel> clazz) {
+        controlColumnDataCollection = new ArrayList<>();
+        for (var field : clazz.getFields()) {
+            var headerName = field.isAnnotationPresent(TableHeader.class) ? field.getAnnotation(TableHeader.class).name() : field.getName();
+            controlColumnDataCollection.add(new ControlColumnData(headerName));
+        }
+
+        return this;
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/GridCell.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/GridCell.java
new file mode 100644
index 00000000..b133002b
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/GridCell.java
@@ -0,0 +1,35 @@
+package solutions.bellatrix.playwright.components.advanced.grid;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.core.plugins.EventListener;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.advanced.table.TableCell;
+import solutions.bellatrix.playwright.components.common.ComponentActionEventArgs;
+import solutions.bellatrix.playwright.components.contracts.ComponentHtml;
+import solutions.bellatrix.playwright.components.contracts.ComponentText;
+import solutions.bellatrix.playwright.findstrategies.FindStrategy;
+
+@Getter @Setter
+@SuppressWarnings("rawtypes")
+public class GridCell extends TableCell implements ComponentHtml, ComponentText {
+    public final static EventListener<ComponentActionEventArgs> CLICKING = new EventListener<>();
+    public final static EventListener<ComponentActionEventArgs> CLICKED = new EventListener<>();
+
+    public void click() {
+        defaultClick(CLICKING, CLICKED);
+    }
+
+    private Class cellControlComponentType;
+    private FindStrategy cellControlFindStrategy;
+
+    @Override
+    public <TComponent extends WebComponent> TComponent as(Class<TComponent> clazz) {
+        cellControlComponentType = clazz;
+        if (cellControlFindStrategy == null) {
+            return super.as(clazz);
+        } else {
+            return this.create().by(clazz, cellControlFindStrategy);
+        }
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/GridRow.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/GridRow.java
new file mode 100644
index 00000000..5013dc8d
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/grid/GridRow.java
@@ -0,0 +1,114 @@
+package solutions.bellatrix.playwright.components.advanced.grid;
+
+import lombok.Getter;
+import lombok.Setter;
+import lombok.SneakyThrows;
+import solutions.bellatrix.core.assertions.EntitiesAsserter;
+import solutions.bellatrix.core.plugins.EventListener;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.PropertyReference;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.common.ComponentActionEventArgs;
+import solutions.bellatrix.playwright.components.contracts.ComponentHtml;
+import solutions.bellatrix.playwright.findstrategies.FindStrategy;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.function.Predicate;
+
+@Getter @Setter
+public class GridRow extends WebComponent implements ComponentHtml {
+    public final static EventListener<ComponentActionEventArgs> CLICKING = new EventListener<>();
+    public final static EventListener<ComponentActionEventArgs> CLICKED = new EventListener<>();
+
+    private Grid parentGrid;
+    private int index;
+
+    public void click() {
+        defaultClick(CLICKING, CLICKED);
+    }
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+
+    public GridCell getCell(int column) {
+        return parentGrid.getCell(index, column);
+    }
+
+    public GridCell getCell(String headerName) {
+        return parentGrid.getCell(headerName, index);
+    }
+
+    public <TDto> GridCell getCell(Class<TDto> dtoClass, PropertyReference<TDto> expression) {
+        return parentGrid.getCell(dtoClass, expression, index);
+    }
+
+    public List<GridCell> getCells() {
+        var listOfCells = new ArrayList<GridCell>();
+        var rowCells = parentGrid.getTableService().getRowCells(index);
+
+        for (int rowCellsIndex = 0; rowCellsIndex < rowCells.size(); rowCellsIndex++) {
+            var rowCellXPath = HtmlService.getAbsoluteXpath(rowCells.get(rowCellsIndex));
+            var cell = parentGrid.create().byXpath(GridCell.class, "." + rowCellXPath);
+            parentGrid.setCellMetaData(cell, index, rowCellsIndex);
+            listOfCells.add(cell);
+        }
+
+        return listOfCells;
+    }
+
+    @SneakyThrows
+    @SuppressWarnings("unchecked")
+    public <TComponent extends WebComponent> List<TComponent> getCells(Class<TComponent> clazz) {
+        var listOfElements = new ArrayList<TComponent>();
+        var cells = getCells();
+        for (int columnIndex = 0; columnIndex < cells.size(); columnIndex++) {
+            var cell = cells.get(columnIndex);
+            if (cell.getCellControlComponentType() == null) {
+                listOfElements.add(cell.as(clazz));
+            } else {
+                TComponent element = (TComponent)this.create().by(cell.getCellControlComponentType(), cell.getCellControlFindStrategy());
+                listOfElements.add(element);
+            }
+        }
+
+        return listOfElements;
+    }
+
+    public <TComponent extends WebComponent> List<TComponent> getCells(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getCells(clazz).stream().filter((component) -> component.getClass().equals(clazz)).filter(selector).toList();
+    }
+
+    public <TComponent extends WebComponent> TComponent getFirstOrDefault(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getCells(clazz, selector).stream().findFirst().orElse(null);
+    }
+
+    public <T> T getItem(Class<T> clazz, String... fieldsToSkip) {
+        return parentGrid.castRow(clazz, index, fieldsToSkip);
+    }
+
+    public <T> void assertRow(Class<T> clazz, T expectedItem, String... fieldsNotToCompare) {
+        var actualItem = getItem(clazz, fieldsNotToCompare);
+
+        EntitiesAsserter.assertAreEqual(expectedItem, actualItem, fieldsNotToCompare);
+    }
+
+    public <T> void assertRow(Class<T> clazz, T expectedItem) {
+        List<String> propsNotToCompare = Arrays.stream(expectedItem.getClass().getDeclaredFields())
+                .filter(field -> {
+                    field.setAccessible(true);
+                    try {
+                        return field.get(expectedItem) == null;
+                    } catch (IllegalAccessException e) {
+                        throw new RuntimeException(e);
+                    }
+                })
+                .map(field -> parentGrid.getHeaderNamesService().getHeaderNameByField(field))
+                .toList();
+
+        assertRow(clazz, expectedItem, propsNotToCompare.toArray(new String[0]));
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/FooterService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/FooterService.java
new file mode 100644
index 00000000..29e448e1
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/FooterService.java
@@ -0,0 +1,153 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced.services;
+
+import org.apache.commons.text.StringEscapeUtils;
+import org.jsoup.nodes.Element;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.Ref;
+import solutions.bellatrix.core.utilities.SingletonFactory;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Objects;
+
+public class FooterService {
+    private String xpathToNameElement;
+    private Element tableFooter;
+    private List<List<String>> tableFooterRowsValuesWithIndex;
+
+    public FooterService(Element tableFooter) {
+        this.tableFooter = tableFooter;
+    }
+
+    public FooterService(Element tableFooter, String xpathToNameElement) {
+        this(tableFooter);
+        this.xpathToNameElement = xpathToNameElement;
+    }
+
+    public TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+
+    public List<Element> getRows() {
+        return tableFooter.selectXpath(locators().getFooterRowsXpath()).stream()
+                .filter((a) -> a.attribute("style") == null || !Objects.equals(a.attribute("style").getValue(), "display:none"))
+                .toList();
+    }
+
+    public List<List<String>> getFooterRowsData() {
+        initializeFooterRows();
+
+        return tableFooterRowsValuesWithIndex;
+    }
+
+    public Element getFooterRowByName(String footerName) {
+        return getRows()
+                .stream().filter(row -> !row.selectXpath(String.format(".//%s[.='%s']", locators().getRowTag(), footerName)).isEmpty())
+                .findFirst().orElse(null);
+    }
+
+    public Element getFooterRowByPosition(int position) {
+        return getRows().get(position);
+    }
+
+    public Element getFooterRowCellByName(String footerName, int cellIndex) {
+        var row = getRows().stream()
+                .filter(a -> Objects.equals(a.text(), footerName))
+                .findFirst().orElse(null);
+
+        if (row == null) return null;
+
+        return row.selectXpath(locators().getCellXpath()).get(cellIndex);
+    }
+
+    public Element getFooterRowCellByPosition(int position, int cellIndex) {
+        return getFooterRowByPosition(position).selectXpath("." + locators().getCellXpath()).get(cellIndex);
+    }
+
+    public List<String> getFooterRowDataByName(String footerName) {
+        return getFooterRowsData()
+                .stream().filter(x -> Objects.equals(x.get(0), footerName))
+                .findFirst()
+                .orElseGet(() -> getFooterRowsData().stream().filter(x -> x.get(0).startsWith(footerName)).findFirst().orElse(null));
+    }
+
+    public List<String> getFooterRowDataByPosition(int position) {
+        return getFooterRowsData().get(position);
+    }
+
+    public String getFooterValueForIndex(int footerPosition, int index) {
+        return getFooterRowDataByPosition(footerPosition).get(index);
+    }
+
+    public String getFooterValueForIndex(String footerName, int index) {
+        return getFooterRowDataByName(footerName).get(index);
+    }
+
+    private void initializeFooterRows() {
+        if (tableFooterRowsValuesWithIndex != null) {
+            return;
+        }
+
+        tableFooterRowsValuesWithIndex = new ArrayList<>();
+        int rowIndex = 0;
+        for (var tableFooterRow : getRows()) {
+            var columnIndex = new Ref<Integer>(0);
+            var footerCellsCount = tableFooterRow.selectXpath("." + locators().getCellXpath()).size();
+            for (var currentCell : tableFooterRow.selectXpath("." + locators().getCellXpath())) {
+                String cellValue;
+                if (xpathToNameElement == null || xpathToNameElement.isBlank()) {
+                    cellValue = StringEscapeUtils.unescapeHtml4(currentCell.text());
+                } else {
+                    cellValue = StringEscapeUtils.unescapeHtml4(currentCell.selectXpath(xpathToNameElement).text());
+                }
+
+                int colSpan = getColSpan(currentCell);
+                addColumnIndex(rowIndex, colSpan, (Ref<Integer>)columnIndex, cellValue);
+            }
+
+            rowIndex++;
+        }
+    }
+
+    private void addColumnIndex(int currentRow, int colSpan, Ref<Integer> columnIndex, String cellValue) {
+        addFooterCellIndex(currentRow, cellValue);
+        if (colSpan == 0) columnIndex.value++;
+        else {
+            int initialIndex = columnIndex.value;
+            for (int i = 1; i < colSpan; i++) {
+                addFooterCellIndex(currentRow, "");
+                columnIndex.value++;
+            }
+
+            columnIndex.value++;
+        }
+    }
+
+    private void addFooterCellIndex(int currentRow, String cellValue) {
+        if (tableFooterRowsValuesWithIndex.size() > currentRow) {
+            tableFooterRowsValuesWithIndex.get(currentRow).add(cellValue);
+        } else {
+            var list = new ArrayList<String>();
+            list.add(cellValue);
+            tableFooterRowsValuesWithIndex.add(list);
+        }
+    }
+
+    private int getColSpan(Element headerCell) {
+        var attribute = HtmlService.getAttribute(headerCell, "colspan", Integer.class);
+        return attribute != null ? attribute : 0;
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/HeaderNamesService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/HeaderNamesService.java
new file mode 100644
index 00000000..21a02b13
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/HeaderNamesService.java
@@ -0,0 +1,234 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced.services;
+
+import lombok.Getter;
+import lombok.Setter;
+import lombok.SneakyThrows;
+import org.apache.commons.text.StringEscapeUtils;
+import org.jsoup.nodes.Element;
+import solutions.bellatrix.core.utilities.*;
+import solutions.bellatrix.playwright.components.advanced.HeaderInfo;
+import solutions.bellatrix.playwright.components.advanced.HeaderRowIndex;
+import solutions.bellatrix.playwright.components.advanced.TableHeader;
+
+import java.lang.reflect.Field;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Objects;
+import java.util.function.Predicate;
+
+public class HeaderNamesService {
+    private String xpathToNameElement;
+    private Map<Integer, String> headerNamesIndexes;
+    private List<Element> tableRowHeaders;
+
+    public HeaderNamesService(List<Element> tableRowHeaders) {
+        this.tableRowHeaders = tableRowHeaders;
+    }
+
+    public HeaderNamesService(List<Element> tableRowHeaders, String xpathToNameElement) {
+        this(tableRowHeaders);
+        this.xpathToNameElement = xpathToNameElement;
+    }
+
+    public TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+
+    @Getter @Setter private List<String> columnHeaderNames;
+
+    public void setHeaderNamesByIndex(int index, String value) {
+        headerNamesIndexes.put(index, value);
+    }
+    public List<String> getHeaderNames() {
+        initializeHeaderNames();
+
+        return headerNamesIndexes.values().stream().toList();
+    }
+
+    public String getNameByPosition(int position) {
+        return headerNamesIndexes.get(position);
+    }
+
+    public Integer getHeaderPosition(String header, List<? extends HeaderInfo> headerInfos) {
+        return  getHeaderPosition(header, headerInfos, null, null);
+    }
+
+    public Integer getHeaderPosition(String header, List<? extends HeaderInfo> headerInfos, Integer order) {
+        return getHeaderPosition(header, headerInfos, order, null);
+    }
+
+    public Integer getHeaderPosition(String header, List<? extends HeaderInfo> headerInfos, Integer order, Boolean throwException) {
+        setEmptyHeadersName(headerInfos);
+
+        if (headerNamesIndexes.values().stream().noneMatch(x -> x.endsWith(header))) {
+            if (throwException != null && throwException) {
+                throw new IllegalArgumentException(String.format("Header %s was not found.", header));
+            } else return null;
+        }
+
+        if (columnHeaderNames != null && columnHeaderNames.stream().noneMatch(x -> x.endsWith(header))) {
+            return null;
+        }
+
+        var allMatchingHeaders = headerNamesIndexes.entrySet().stream()
+                .filter(entry -> entry.getValue().endsWith(header))
+                .toList();
+
+        if (allMatchingHeaders.size() > 1) {
+            var exactMatchHeaders = headerNamesIndexes.entrySet().stream()
+                    .filter(entry -> Objects.equals(entry.getValue(), header))
+                    .toList();
+
+            if (exactMatchHeaders.size() != 1) {
+                if (order == null) {
+                    DebugInformation.debugInfo(String.format("More than one Header with name ending with '%s' was found. Returning the first one.", header));
+                    return allMatchingHeaders.get(0).getKey();
+                } else {
+                    return allMatchingHeaders.get(order).getKey();
+                }
+            }
+
+            return exactMatchHeaders.get(0).getKey();
+        } else if (!allMatchingHeaders.isEmpty()) {
+            return allMatchingHeaders.get(0).getKey();
+        }
+
+        return null;
+    }
+
+    public <T> String getHeaderNameByExpression(Class<T> dtoClass, PropertyReference<T> expression) {
+        return getHeaderNameByField(Objects.requireNonNull(PropertyReferenceNameResolver.getMember(dtoClass, expression)));
+    }
+
+    public String getHeaderNameByField(Field field) {
+        if (field.isAnnotationPresent(TableHeader.class)) {
+            return field.getAnnotation(TableHeader.class).name();
+        } else {
+            return field.getName();
+        }
+    }
+
+    public Integer getHeaderOrderByField(Field field) {
+        if (field.isAnnotationPresent(TableHeader.class)) {
+            return field.getAnnotation(TableHeader.class).order();
+        } else return null;
+    }
+
+    public HeaderInfo getHeaderInfoByField(Field field) {
+        var headerName = getHeaderNameByField(field);
+        var headerOrder = getHeaderOrderByField(field) != null ? getHeaderOrderByField(field) : null;
+
+        if (headerOrder == null) return new HeaderInfo(headerName);
+
+        else return new HeaderInfo(headerName, headerOrder);
+    }
+
+    private void setEmptyHeadersName(List<? extends HeaderInfo> headerInfos) {
+        var headerNameCollection = getHeaderNames();
+        var count = Math.min(headerInfos.size(), headerNameCollection.size());
+
+        for (int i = 0; i < count; i++) {
+            var headerName = headerInfos.get(i).getHeaderName();
+            var collectionName = headerNameCollection.get(i);
+
+            if (!Objects.equals(collectionName, headerName) && (collectionName == null || collectionName.isBlank())) {
+                setHeaderNamesByIndex(i, headerName);
+            }
+        }
+    }
+
+    private void initializeHeaderNames() {
+        if (headerNamesIndexes != null && !headerNamesIndexes.isEmpty()) {
+            return;
+        }
+
+        headerNamesIndexes = new HashMap<>();
+        var rowSpanPairs = new HashMap<Integer, HeaderRowIndex>();
+        int rowIndex = 0;
+        for (var tableRowHeader : tableRowHeaders) {
+            Ref<Integer> columnIndex = new Ref<>(0);
+            // UNUSED, REMOVE ME: var headerCellsCount = tableRowHeader.selectXpath(locators().getHeaderXpath()).size();
+
+            for (var currentHeader : tableRowHeader.selectXpath("." + locators().getHeaderXpath())) {
+                String headerName;
+                while (rowSpanPairs.containsKey(columnIndex.value) && rowIndex > rowSpanPairs.get(columnIndex.value).getRowIndex()) {
+                    headerName = rowSpanPairs.get(columnIndex.value).getHeaderName();
+                    rowSpanPairs.get(columnIndex.value).setRowspan(rowSpanPairs.get(columnIndex.value).getRowspan() -1);
+                    // UNUSED, REMOVE ME: int currentColSpan = rowSpanPairs.get(columnIndex.value).getColspan();
+
+                    if (rowSpanPairs.get(columnIndex.value).getRowspan() == 1) {
+                        rowSpanPairs.remove(columnIndex.value);
+                    }
+
+                    columnIndex.value++;
+                }
+
+                if (xpathToNameElement == null || xpathToNameElement.isBlank()) {
+                    headerName = currentHeader.text();
+                } else {
+                    headerName = StringEscapeUtils.unescapeHtml4(currentHeader.selectXpath(xpathToNameElement).text());
+                }
+
+                int colSpan = getColSpan(currentHeader);
+                int rowSpan = getRowSpan(currentHeader);
+
+                if (rowSpan > 1) {
+                    rowSpanPairs.put(columnIndex.value, new HeaderRowIndex(headerName, rowSpan, colSpan, rowIndex));
+                }
+
+                addColumnIndex(colSpan, (Ref<Integer>)columnIndex, headerName);
+            }
+
+            rowIndex++;
+        }
+    }
+
+    private void addColumnIndex(int colSpan, Ref<Integer> columnIndex, String headerName) {
+        if (colSpan == 0) {
+            addHeaderNameIndex(columnIndex.value, headerName);
+            columnIndex.value++;
+        } else {
+            int initialIndex = columnIndex.value;
+            for (int i = 0; i < colSpan; i++) {
+                addHeaderNameIndex(initialIndex + i, headerName);
+                columnIndex.value++;
+            }
+        }
+    }
+
+    private void addHeaderNameIndex(int operationalIndex, String headerName) {
+        if (headerNamesIndexes.containsKey(operationalIndex) && Objects.equals(headerNamesIndexes.get(operationalIndex), headerName)) {
+            return;
+        }
+
+        if (headerNamesIndexes.containsKey(operationalIndex)) {
+            headerNamesIndexes.put(operationalIndex, headerNamesIndexes.get(operationalIndex) + " " + headerName);
+        } else {
+            headerNamesIndexes.put(operationalIndex, headerName);
+        }
+    }
+
+    private int getColSpan(Element headerCell) {
+        var attribute = HtmlService.getAttribute(headerCell, "colspan", Integer.class);
+        return attribute != null ? attribute : 0;
+    }
+
+    private int getRowSpan(Element headerCell) {
+        var attribute = HtmlService.getAttribute(headerCell, "rowspan", Integer.class);
+        return attribute != null ? attribute : 0;
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/TableLocators.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/TableLocators.java
new file mode 100644
index 00000000..81ee21ca
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/TableLocators.java
@@ -0,0 +1,50 @@
+package solutions.bellatrix.playwright.components.advanced.services;
+
+import lombok.NoArgsConstructor;
+
+@NoArgsConstructor
+public class TableLocators {
+    public String getRowTag() {
+        return "tr";
+    }
+
+    public String getHeaderTag() {
+        return "th";
+    }
+
+    public String getCellTag() {
+        return "td";
+    }
+
+    public String getFooterTag() {
+        return "tfoot";
+    }
+
+    public String getBodyTag() {
+        return "tbody";
+    }
+
+    public String getHeaderXpath() {
+        return "//" + getHeaderTag();
+    }
+
+    public String getCellXpath() {
+        return "//" + getCellTag();
+    }
+
+    public String getRowsXpath() {
+        return String.format("//%s[descendant::%s]", getRowTag(), getCellTag());
+    }
+
+    public String getHeadersXpath() {
+        return String.format("//%s[descendant::%s]", getRowTag(), getHeaderTag());
+    }
+
+    public String getFooterRowsXpath() {
+        return String.format("//%s[ancestor::%s]", getRowTag(), getFooterTag());
+    }
+
+    public String getFooterXpath() {
+        return "//" + getFooterTag();
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/TableService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/TableService.java
new file mode 100644
index 00000000..d6744ef3
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/services/TableService.java
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced.services;
+
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Parser;
+import org.jsoup.select.Elements;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.SingletonFactory;
+
+import java.util.List;
+import java.util.Objects;
+
+public class TableService {
+    protected String tableXpath;
+    private final Document htmlDoc;
+
+    public TableService(String html) {
+        htmlDoc = Jsoup.parse(html, Parser.xmlParser());
+    }
+
+    public TableService(String html, String tableXpath) {
+        this(html);
+        this.tableXpath = tableXpath;
+    }
+
+    public TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+
+    public Element getTable() {
+        if (tableXpath == null || tableXpath.isBlank()) {
+            return HtmlService.addRootElementIfNeeded(htmlDoc);
+        }
+
+        return htmlDoc.selectXpath(tableXpath).first();
+    }
+
+    public List<Element> getHeaders() {
+        return getTable().selectXpath("." + locators().getHeadersXpath());
+    }
+
+    public List<Element> getHeaderRows() {
+        return getTable().selectXpath("." + locators().getHeadersXpath()).stream()
+                .filter((a) -> a.attribute("style") == null || !Objects.equals(a.attribute("style").getValue(), "display:none"))
+                .toList();
+    }
+
+    public Element getRow(int index) {
+        return getRows().get(index);
+    }
+
+    public List<Element> getRows() {
+        return getTable().selectXpath("." + locators().getRowsXpath());
+    }
+
+    public Element getFooter() {
+        return getTable().selectXpath("." + locators().getFooterXpath()).first();
+    }
+
+    public Element getCell(int row, int column) {
+        return getRowCells(row).get(column);
+    }
+
+    public List<Element> getCells() {
+        var listOfNodes = new Elements();
+        for (int i = 0; i < getRows().size(); i++) {
+            listOfNodes.addAll(getRow(i).selectXpath("." + locators().getCellXpath()));
+        }
+
+        return listOfNodes;
+    }
+
+    public List<Element> getRowCells(int rowIndex) {
+        return getRow(rowIndex).selectXpath("." + locators().getCellXpath());
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/Table.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/Table.java
new file mode 100644
index 00000000..7509a248
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/Table.java
@@ -0,0 +1,273 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.core.assertions.EntitiesAsserter;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.InstanceFactory;
+import solutions.bellatrix.core.utilities.PropertyReference;
+import solutions.bellatrix.core.utilities.parsing.TypeParser;
+import solutions.bellatrix.playwright.components.Label;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.advanced.HeaderInfo;
+import solutions.bellatrix.playwright.components.advanced.services.FooterService;
+import solutions.bellatrix.playwright.components.advanced.services.HeaderNamesService;
+import solutions.bellatrix.playwright.components.advanced.services.TableService;
+
+import java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Method;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.function.Consumer;
+import java.util.function.Predicate;
+
+public class Table extends WebComponent {
+    private HeaderNamesService headerNamesService;
+    private FooterService footerService;
+    private List<TableRow> rows;
+    private TableService tableService;
+
+    public Table() {
+    }
+
+    public TableService getTableService() {
+        if (this.tableService == null) {
+            this.tableService = new TableService(defaultGetInnerHtmlAttribute());
+        }
+        return this.tableService;
+    }
+
+    protected HeaderNamesService getHeaderNamesService() {
+        if (this.headerNamesService == null) {
+            this.headerNamesService = new HeaderNamesService(getTableService().getHeaderRows());
+        }
+        return this.headerNamesService;
+    }
+
+    protected FooterService getFooterService() {
+        if (this.footerService == null) {
+            this.footerService = new FooterService(getTableService().getFooter());
+        }
+        return this.footerService;
+    }
+
+    public TableFooter getFooter() {
+        return this.create().byXpath(TableFooter.class, HtmlService.getAbsoluteXpath(getTableService().getFooter()));
+    }
+
+    public int getRowsCount() {
+        return getRows().size();
+    }
+
+    @Getter @Setter private List<HeaderInfo> columnHeaderNames;
+
+    public List<Label> getColumnHeaders() {
+        return this.create().allByTag(Label.class, getTableService().locators().getHeaderTag());
+    }
+
+    public List<TableHeaderRow> getTableHeaderRows() {
+        return this.create().allByXpath(TableHeaderRow.class, "." + getTableService().locators().getHeadersXpath());
+    }
+
+    public List<TableRow> getRows() {
+        initializeRows();
+        return rows;
+    }
+
+    public TableRow getRow(int index) {
+        initializeRows();
+        return rows.get(index);
+    }
+
+    public void forEachRow(Consumer<TableCell> action) {
+        for (var row : getRows()) {
+            for (var rowCell : row.getCells()) {
+                action.accept(rowCell);
+            }
+        }
+    }
+
+    public void forEachHeader(Consumer<Label> action) {
+        for (var header : getColumnHeaders()) {
+            action.accept(header);
+        }
+    }
+
+    public List<TableCell> getColumn(int column) {
+        var tableCells = getRows().stream().map(row -> row.getCell(column)).toList();
+
+        int rowNumber = 0;
+        for (var tableCell : tableCells) {
+            tableCell.setColumn(column);
+            tableCell.setRow(rowNumber++);
+        }
+
+        return tableCells;
+    }
+
+    public List<TableCell> getColumn(String header) {
+        Integer position = getHeaderNamesService().getHeaderPosition(header, getColumnHeaderNames());
+        if (position == null) {
+            return new ArrayList<>();
+        }
+
+        return getColumn(position);
+    }
+
+    public TableCell getCell(String header, int row) {
+        Integer position = getHeaderNamesService().getHeaderPosition(header, getColumnHeaderNames());
+        if (position == null) return null;
+
+        return getCell(position, row);
+    }
+
+    public <TDto> TableCell getCell(Class<TDto> dtoClass, PropertyReference<TDto> expression, int row) {
+        String headerName = getHeaderNamesService().getHeaderNameByExpression(dtoClass, expression);
+        var position = getHeaderNamesService().getHeaderPosition(headerName, columnHeaderNames);
+        if (position == null) return null;
+
+        return getCell(position, row);
+    }
+
+    public TableCell getCell(int column, int row) {
+        var cell = getRow(row).getCell(column);
+        cell.setRow(row);
+        cell.setColumn(column);
+
+        return cell;
+    }
+
+    public List<TableCell> getCells(Predicate<TableCell> selector) {
+        var filteredCells = new ArrayList<TableCell>();
+        for (var tableRow : getRows()) {
+            var currentFilteredCells = tableRow.getCells(selector);
+            filteredCells.addAll(currentFilteredCells);
+        }
+
+        return filteredCells;
+    }
+
+    public TableCell getFirstCell(Predicate<TableCell> selector) {
+        return getCells(selector).get(0);
+    }
+
+    public List<TableRow> getRows(Predicate<TableCell> selector) {
+        return getRows()
+                .stream().filter(x -> !x.getCells(selector).isEmpty())
+                .findAny().stream().toList();
+    }
+
+    public TableRow getFirstOrDefaultRow(Predicate<TableCell> selector) {
+        return getRows(selector).stream().findFirst().orElse(null);
+    }
+
+    public <T> void assertTable(List<T> expectedEntities) {
+        assertTable(getRows(), expectedEntities);
+    }
+
+    public List<String> getHeaderNames() {
+        return getHeaderNamesService().getHeaderNames();
+    }
+
+    public <T> List<T> getItems(Class<T> clazz) {
+        return getItems(clazz, getRows());
+    }
+
+    @SuppressWarnings("unchecked")
+    public <T, TRow extends TableRow> void assertTable(List<TRow> rows, List<T> expectedEntities) {
+        var actualEntities = getItems((Class<T>)expectedEntities.get(0).getClass(), rows);
+        if (actualEntities.size() != expectedEntities.size()) {
+            throw new IllegalArgumentException(String.format("The current table rows count %d is different than the specified expected values %d.", actualEntities.size(), expectedEntities.size()));
+        }
+
+        for (int i = 0; i < expectedEntities.size(); i++) {
+            EntitiesAsserter.assertAreEqual(expectedEntities.get(i), actualEntities.get(i));
+        }
+    }
+
+    protected <T, TRow extends TableRow> List<T> getItems(Class<T> clazz, List<TRow> rows) {
+        return rows
+                .stream().filter(row -> !row.getCells().isEmpty())
+                .map(row -> castRow(clazz, row))
+                .toList();
+    }
+
+    <TDto> TDto castRow(Class<TDto> dtoClass, TableRow row) {
+        var fields = dtoClass.getDeclaredFields();
+        var castRow = InstanceFactory.create(dtoClass);
+
+        for (var field : fields) {
+            Predicate<Method> isSetterToField = (x) -> x.getName().toLowerCase().endsWith(field.getName().toLowerCase()) && x.getParameterCount() == 1;
+
+            if (Arrays.stream(dtoClass.getDeclaredMethods()).anyMatch(isSetterToField)) {
+                var headerName = getHeaderNamesService().getHeaderNameByField(field);
+                var headerPosition = getHeaderNamesService().getHeaderPosition(headerName, getColumnHeaderNames());
+
+                if (headerPosition != null) {
+                    var setter = Arrays.stream(dtoClass.getDeclaredMethods()).filter(isSetterToField).toList().get(0);
+                    var elementValue = row.getCells().get(headerPosition).getText();
+                    var parameterType = setter.getParameters()[0].getType();
+
+                    try {
+                        field.setAccessible(true);
+                        setter.invoke(castRow, TypeParser.parse(elementValue, parameterType));
+                    } catch (IllegalAccessException | InvocationTargetException e) {
+                        throw new RuntimeException(e);
+                    }
+                }
+            } else {
+                var exception = "\nCannot cast Table Row data to Java object. Most probably your class is missing setters.\n" +
+                        "Failed while going through field with name:" + field.getName() + "\n";
+                throw new IllegalArgumentException(exception);
+            }
+        }
+
+        return castRow;
+    }
+
+    private void initializeRows() {
+        if (rows == null || rows.isEmpty()) {
+            var rowTag = getTableService().locators().getRowTag();
+            var cellTag = getTableService().locators().getCellTag();
+            var bodyTag = getTableService().locators().getBodyTag();
+            rows = this.create().allByXpath(TableRow.class, String.format("./%s[descendant::%s]|./%s/%s[descendant::%s]", rowTag, cellTag, bodyTag, rowTag, cellTag));
+            int rowNumber = 0;
+            for (var row : rows) {
+                row.setParentTable(this);
+                row.setIndex(++rowNumber);
+            }
+        }
+    }
+
+    public Table setColumn(String headerName) {
+        if (this.getColumnHeaderNames() == null) {
+            (this).setColumnHeaderNames(new ArrayList<>());
+        }
+
+        this.getColumnHeaderNames().add(new HeaderInfo(headerName));
+        return this;
+    }
+
+    public Table setColumns(List<HeaderInfo> headerNames) {
+        if (this.getColumnHeaderNames() == null) {
+            (this).setColumnHeaderNames(new ArrayList<>());
+        }
+
+        this.getColumnHeaderNames().addAll(headerNames);
+        return this;
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableCell.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableCell.java
new file mode 100644
index 00000000..8bbc4f05
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableCell.java
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.contracts.ComponentHtml;
+import solutions.bellatrix.playwright.components.contracts.ComponentText;
+
+@Getter @Setter
+public class TableCell extends WebComponent implements ComponentHtml, ComponentText {
+    protected int row;
+    protected int column;
+
+    @Override
+    public String getText() {
+        return defaultGetText();
+    }
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableFooter.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableFooter.java
new file mode 100644
index 00000000..3df9a52b
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableFooter.java
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.advanced.services.FooterService;
+import solutions.bellatrix.playwright.components.advanced.services.HeaderNamesService;
+import solutions.bellatrix.playwright.components.contracts.ComponentHtml;
+
+public class TableFooter extends WebComponent implements ComponentHtml {
+    private Table parentTable;
+    private HeaderNamesService headerNamesService;
+    private FooterService footerService;
+
+    @Getter @Setter private int index;
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+
+    public void setParentTable(Table table) {
+        parentTable = table;
+        headerNamesService = new HeaderNamesService(parentTable.getTableService().getHeaderRows());
+        footerService = new FooterService(parentTable.getTableService().getFooter());
+    }
+
+    public TableRow getRowByPosition(int position) {
+        var footerRow = this.create().byXpath(TableRow.class, "." + HtmlService.getAbsoluteXpath(footerService.getFooterRowByPosition(position)));
+        footerRow.setParentTable(parentTable);
+        footerRow.setIndex(position);
+
+        return footerRow;
+    }
+
+    public TableRow getRowByName(String footerName) {
+        var node = footerService.getFooterRowByName(footerName);
+        int position = footerService.getRows().indexOf(node);
+        var footerRow = this.create().byXpath(TableRow.class, "." + HtmlService.getAbsoluteXpath(node));
+        footerRow.setParentTable(parentTable);
+        footerRow.setIndex(position);
+
+        return footerRow;
+    }
+
+    public TableCell getCell(String footerName, String headerName) {
+        var headerPosition = headerNamesService.getHeaderPosition(headerName, parentTable.getColumnHeaderNames());
+        if (headerPosition == null) return null;
+
+        var node = footerService.getFooterRowCellByName(footerName, headerPosition);
+        var footerCell = this.create().byXpath(TableCell.class, "." + HtmlService.getAbsoluteXpath(node));
+        footerCell.setRow(footerService.getRows().indexOf(node));
+        footerCell.setColumn(headerPosition);
+
+        return footerCell;
+    }
+
+    public TableCell getCell(int position, String headerName) {
+        var headerPosition = headerNamesService.getHeaderPosition(headerName, parentTable.getColumnHeaderNames());
+        if (headerPosition == null) return null;
+
+        var node = footerService.getFooterRowCellByPosition(position, headerPosition);
+        var footerCell = this.create().byXpath(TableCell.class, "." + HtmlService.getAbsoluteXpath(node));
+        footerCell.setRow(position);
+        footerCell.setColumn(headerPosition);
+
+        return footerCell;
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableHeaderRow.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableHeaderRow.java
new file mode 100644
index 00000000..295b1c88
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableHeaderRow.java
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced.table;
+
+import solutions.bellatrix.core.utilities.SingletonFactory;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.advanced.services.TableLocators;
+import solutions.bellatrix.playwright.components.contracts.ComponentHtml;
+
+import java.util.List;
+
+public class TableHeaderRow extends WebComponent implements ComponentHtml {
+    public List<TableCell> getHeaderCells() {
+        return this.createAllByTag(TableCell.class, locators().getHeaderTag());
+    }
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+
+    private TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableRow.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableRow.java
new file mode 100644
index 00000000..cdb2e31c
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/advanced/table/TableRow.java
@@ -0,0 +1,99 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.advanced.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.core.assertions.EntitiesAsserter;
+import solutions.bellatrix.core.utilities.PropertyReference;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.advanced.services.HeaderNamesService;
+import solutions.bellatrix.playwright.components.contracts.ComponentHtml;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.Predicate;
+
+public class TableRow extends WebComponent implements ComponentHtml {
+    private Table parentTable;
+    private HeaderNamesService headerNamesService;
+
+    @Getter @Setter private int index;
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+
+    public void setParentTable(Table table) {
+        parentTable = table;
+        headerNamesService = new HeaderNamesService(parentTable.getTableService().getHeaderRows());
+    }
+
+    public TableCell getCell(int column) {
+        if (getTableCells().size() <= column) return null;
+
+        var tableCell = getTableCells().get(column);
+        tableCell.setColumn(column);
+        tableCell.setRow(index);
+
+        return tableCell;
+    }
+
+    public TableCell getCell(String headerName) {
+        int position = headerNamesService.getHeaderPosition(headerName, parentTable.getColumnHeaderNames());
+
+        return getCell(position);
+    }
+
+    public <TDto> TableCell getCell(Class<TDto> dtoClass, PropertyReference<TDto> expression) {
+        var headerName = headerNamesService.getHeaderNameByExpression(dtoClass, expression);
+        return getCell(headerName);
+    }
+
+    public List<TableCell> getCells() {
+        int columnNumber = 0;
+        var tableCells = new ArrayList<TableCell>();
+        for (var tableCell : getTableCells()) {
+            tableCells.add(tableCell);
+            tableCell.setRow(index);
+            tableCell.setColumn(columnNumber++);
+        }
+
+        return tableCells;
+    }
+
+    public List<TableCell> getCells(Predicate<TableCell> selector) {
+        return getCells().stream().filter(selector).toList();
+    }
+
+    public TableCell getFirstOrDefault(Predicate<TableCell> selector) {
+        return getCells(selector).stream().findFirst().orElse(null);
+    }
+
+    public <T> T getItem(Class<T> clazz) {
+        return parentTable.castRow(clazz, this);
+    }
+
+    @SuppressWarnings("unchecked")
+    public <T> void assertRow(T expectedItem) {
+        T actualItem = getItem((Class<T>)expectedItem.getClass());
+
+        EntitiesAsserter.assertAreEqual(expectedItem, actualItem);
+    }
+
+    protected List<TableCell> getTableCells() {
+        return this.create().allByXpath(TableCell.class, "./" + parentTable.getTableService().locators().getCellTag());
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/create/RelativeCreateService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/create/RelativeCreateService.java
index 865e78ba..861ed6a4 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/create/RelativeCreateService.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/create/RelativeCreateService.java
@@ -14,20 +14,26 @@
 package solutions.bellatrix.playwright.components.common.create;
 
 import solutions.bellatrix.core.plugins.EventListener;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.playwright.components.shadowdom.ShadowDomService;
+import solutions.bellatrix.playwright.components.shadowdom.ShadowRoot;
 import solutions.bellatrix.playwright.components.WebComponent;
 import solutions.bellatrix.playwright.components.common.ComponentActionEventArgs;
+import solutions.bellatrix.playwright.components.common.webelement.WebElement;
 import solutions.bellatrix.playwright.components.contracts.Component;
 import solutions.bellatrix.playwright.findstrategies.FindStrategy;
+import solutions.bellatrix.playwright.findstrategies.ShadowXpathFindStrategy;
+import solutions.bellatrix.playwright.findstrategies.XpathFindStrategy;
 import solutions.bellatrix.playwright.services.ComponentCreateService;
 
 import java.util.ArrayList;
 import java.util.List;
 
 public class RelativeCreateService extends ComponentCreateService {
-    private final EventListener<ComponentActionEventArgs> CREATING;
-    private final EventListener<ComponentActionEventArgs> CREATED;
+    public final EventListener<ComponentActionEventArgs> CREATING;
+    public final EventListener<ComponentActionEventArgs> CREATED;
 
-    private final Component baseComponent;
+    protected final Component baseComponent;
 
     public RelativeCreateService(Component baseComponent, EventListener<ComponentActionEventArgs> creating, EventListener<ComponentActionEventArgs> created) {
         this.baseComponent = baseComponent;
@@ -41,10 +47,13 @@ public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TCo
 
         wrappedBrowser().getCurrentPage().waitForLoadState();
 
-        var element = findStrategy.convert(baseComponent.getWrappedElement()).first();
+        TComponent newComponent;
 
-        var newComponent = createInstance(componentClass, findStrategy, element);
-        newComponent.setParentComponent((WebComponent)baseComponent);
+        if (inShadowContext()) {
+            newComponent = ShadowDomService.createInShadowContext((WebComponent)baseComponent, componentClass, findStrategy);
+        } else {
+            newComponent = createFromParentComponent(componentClass, findStrategy);
+        }
 
         CREATED.broadcast(new ComponentActionEventArgs((WebComponent)baseComponent));
 
@@ -57,18 +66,48 @@ public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> Lis
 
         wrappedBrowser().getCurrentPage().waitForLoadState();
 
-        var elements = findStrategy.convert(baseComponent.getWrappedElement()).all();
         List<TComponent> componentList = new ArrayList<>();
 
-        for (var element : elements) {
-            var component = createInstance(componentClass, findStrategy, element);
-            component.setParentComponent((WebComponent)baseComponent);
+        if (inShadowContext()) {
+            componentList = ShadowDomService.createAllInShadowContext((WebComponent)baseComponent, componentClass, findStrategy);
+        } else {
+            var elements = findStrategy.convert(baseComponent.getWrappedElement()).all();
+
+            for (var element : elements) {
+                var component = createFromParentComponent(componentClass, findStrategy, element);
 
-            componentList.add(component);
+                componentList.add(component);
+            }
         }
 
         CREATED.broadcast(new ComponentActionEventArgs((WebComponent)baseComponent));
 
         return componentList;
     }
+
+    private boolean inShadowContext() {
+        var component = (WebComponent)baseComponent;
+
+        while (component != null) {
+            if (component instanceof ShadowRoot) return true;
+            component = component.getParentComponent();
+        }
+
+        return false;
+    }
+
+    protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent createFromParentComponent(Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        var element = findStrategy.convert(baseComponent.getWrappedElement()).first();
+        var newComponent = createInstance(componentClass, findStrategy, element);
+        newComponent.setParentComponent((WebComponent)baseComponent);
+
+        return newComponent;
+    }
+
+    protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent createFromParentComponent(Class<TComponent> componentClass, TFindStrategy findStrategy, WebElement element) {
+        var newComponent = createInstance(componentClass, findStrategy, element);
+        newComponent.setParentComponent((WebComponent)baseComponent);
+
+        return newComponent;
+    }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/datahandlers/ControlDataHandler.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/datahandlers/ControlDataHandler.java
new file mode 100644
index 00000000..5e11f6f6
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/datahandlers/ControlDataHandler.java
@@ -0,0 +1,135 @@
+package solutions.bellatrix.playwright.components.common.datahandlers;
+
+import lombok.experimental.UtilityClass;
+import solutions.bellatrix.core.utilities.parsing.TypeParser;
+import solutions.bellatrix.playwright.components.*;
+import solutions.bellatrix.playwright.components.WebComponent;
+
+import java.time.LocalDateTime;
+import java.time.temporal.WeekFields;
+import java.util.Locale;
+import java.util.Map;
+import java.util.function.BiConsumer;
+import java.util.function.Function;
+
+@UtilityClass
+@SuppressWarnings({"rawtypes", "unchecked"})
+public class ControlDataHandler {
+    public static <T extends WebComponent> void addReadOnlyControlDataHandler(Class<T> clazz, Function<T, ?> handler) {
+        READONLY_CONTROL_DATA_HANDLERS.put(clazz, handler);
+    }
+
+    public static <T extends WebComponent> void addEditableControlDataHandler(Class<T> clazz, BiConsumer<T, ?> handler) {
+        EDITABLE_CONTROL_DATA_HANDLERS.put(clazz, handler);
+    }
+
+    public static <T extends WebComponent> Object getData(T component) {
+        var dataHandler = READONLY_CONTROL_DATA_HANDLERS.get(component.getClass());
+        if (dataHandler == null) {
+            throw new IllegalArgumentException(String.format("Cannot find proper readonly control data handler for type: %s. Make sure it is registered!", component.getClass()));
+        }
+
+        return dataHandler.apply(component);
+    }
+
+    public static <T extends WebComponent> void setData(T component, Object data) {
+        var dataHandler = EDITABLE_CONTROL_DATA_HANDLERS.get(component.getClass());
+        if (dataHandler == null) {
+            throw new IllegalArgumentException(String.format("Cannot find proper edit control data handler for type: %s. Make sure it is registered!", component.getClass()));
+        }
+
+        dataHandler.accept(component, data);
+    }
+
+    private static Map<Class<? extends WebComponent>, Function> READONLY_CONTROL_DATA_HANDLERS = Map.ofEntries(
+            Map.entry(Anchor.class, (Function<Anchor, String>)(anchor) -> anchor.getText().trim()),
+            Map.entry(Button.class, (Function<Button, String>)(button) -> (!button.getText().trim().isBlank()) ? button.getText().trim() : button.getValue()),
+            Map.entry(CheckBox.class, (Function<CheckBox, Boolean>)CheckBox::isChecked),
+            Map.entry(ColorInput.class, (Function<ColorInput, String>)ColorInput::getColor),
+            Map.entry(DateInput.class, (Function<DateInput, String>)DateInput::getDate),
+            Map.entry(DateTimeInput.class, (Function<DateTimeInput, String>)DateTimeInput::getTime),
+            Map.entry(Div.class, (Function<Div, String>)(div) -> div.getText().trim()),
+            Map.entry(EmailInput.class, (Function<EmailInput, String>)EmailInput::getEmail),
+            Map.entry(Heading.class, (Function<Heading, String>)Heading::getText),
+            Map.entry(Image.class, (Function<Image, String>)Image::getSrc),
+            Map.entry(Label.class, (Function<Label, String>)(label) -> label.getText().trim()),
+            Map.entry(MonthInput.class, (Function<MonthInput, String>)MonthInput::getMonth),
+            Map.entry(NumberInput.class, (Function<NumberInput, Double>)NumberInput::getNumber),
+            Map.entry(Output.class, (Function<Output, String>)(output) -> output.getText().trim()),
+            Map.entry(PasswordInput.class, (Function<PasswordInput, String>)PasswordInput::getPassword),
+            Map.entry(PhoneInput.class, (Function<PhoneInput, String>)PhoneInput::getPhone),
+            Map.entry(RadioButton.class, (Function<RadioButton, Boolean>)RadioButton::isChecked),
+            Map.entry(Range.class, (Function<Range, Double>)Range::getRange),
+            Map.entry(Reset.class, (Function<Reset, String>)(reset) -> reset.getText().trim()),
+            Map.entry(SearchField.class, (Function<SearchField, String>)SearchField::getSearch),
+            Map.entry(Select.class, (Function<Select, String>)(select) -> select.getSelected().getText().trim()),
+            Map.entry(Span.class, (Function<Span, String>)(span) -> span.getText().trim()),
+            Map.entry(TextArea.class, (Function<TextArea, String>)(textArea) -> textArea.getText().trim()),
+            Map.entry(TextInput.class, (Function<TextInput, String>)(textInput) -> textInput.getValue().trim()),
+            Map.entry(TimeInput.class, (Function<TimeInput, String>)TimeInput::getTime),
+            Map.entry(UrlField.class, (Function<UrlField, String>)UrlField::getUrl),
+            Map.entry(WeekInput.class, (Function<WeekInput, String>)WeekInput::getWeek)
+    );
+
+    private static Map<Class<? extends WebComponent>, BiConsumer> EDITABLE_CONTROL_DATA_HANDLERS = Map.ofEntries(
+            Map.entry(CheckBox.class, (BiConsumer<CheckBox, Object>)(checkBox, data) -> {
+                try {
+                    boolean valueToSet = TypeParser.parse(data, Boolean.class);
+                    if (valueToSet) {
+                        if (!checkBox.isChecked()) {
+                            checkBox.check();
+                        }
+                    } else {
+                        if (checkBox.isChecked()) {
+                            checkBox.uncheck();
+                        }
+                    }
+                } catch (IllegalArgumentException exception) {
+                    throw new IllegalArgumentException(String.format("The input string '%s' was not recognized as valid boolean.", data));
+                }
+            }),
+            Map.entry(DateInput.class, (BiConsumer<DateInput, String>)(dateInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                dateInput.setDate(valueToSet.getYear(), valueToSet.getMonthValue(), valueToSet.getDayOfMonth());
+            }),
+            Map.entry(DateTimeInput.class, (BiConsumer<DateTimeInput, String>)(dateTimeInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                dateTimeInput.setTime(valueToSet);
+            }),
+            Map.entry(EmailInput.class, (BiConsumer<EmailInput, String>)EmailInput::setEmail),
+            Map.entry(MonthInput.class, (BiConsumer<MonthInput, String>)(monthInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                monthInput.setMonth(valueToSet.getYear(), valueToSet.getMonthValue());
+            }),
+            Map.entry(PasswordInput.class, (BiConsumer<PasswordInput, String>)PasswordInput::setPassword),
+            Map.entry(PhoneInput.class, (BiConsumer<PhoneInput, String>)PhoneInput::setPhone),
+            Map.entry(RadioButton.class, (BiConsumer<RadioButton, Object>)(radioButton, data) -> {
+                var valueToSet = TypeParser.parse(data, Boolean.class);
+                if (valueToSet) {
+                    if (!radioButton.isChecked()) radioButton.click();
+                } else {
+                    if (radioButton.isChecked()) radioButton.click();
+                }
+            }),
+            Map.entry(Range.class, (BiConsumer<Range, Object>)(range, data) -> {
+                var valueToSet = TypeParser.parse(data, Integer.class);
+                range.setRange(valueToSet);
+            }),
+            Map.entry(SearchField.class, (BiConsumer<SearchField, String>)SearchField::setSearch),
+            Map.entry(Select.class, (BiConsumer<Select, Object>)(select, data) -> {
+                if (data.getClass().equals(String.class)) select.selectByText((String)data);
+                else if (data.getClass().equals(Integer.class)) select.selectByIndex((Integer)data);
+            }),
+            Map.entry(TextArea.class, (BiConsumer<TextArea, String>)TextArea::setText),
+            Map.entry(TextInput.class, (BiConsumer<TextInput, String>)TextInput::setText),
+            Map.entry(TimeInput.class, (BiConsumer<TimeInput, String>)(timeInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                timeInput.setTime(valueToSet.getHour(), valueToSet.getMinute());
+            }),
+            Map.entry(UrlField.class, (BiConsumer<UrlField, String>)UrlField::setUrl),
+            Map.entry(WeekInput.class, (BiConsumer<WeekInput, String>)(weekInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                weekInput.setWeek(valueToSet.getYear(), valueToSet.get(WeekFields.of(Locale.getDefault()).weekOfWeekBasedYear()));
+            })
+    );
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/validate/ComponentValidator.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/validate/ComponentValidator.java
index bec5a47d..e6c9a489 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/validate/ComponentValidator.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/validate/ComponentValidator.java
@@ -17,7 +17,7 @@
 import solutions.bellatrix.core.plugins.EventListener;
 import solutions.bellatrix.playwright.components.WebComponent;
 import solutions.bellatrix.playwright.components.common.ComponentActionEventArgs;
-import solutions.bellatrix.playwright.utilities.functionalinterfaces.AssertionMethod;
+import solutions.bellatrix.playwright.utilities.functionalinterfaces.Assertable;
 
 import java.util.List;
 import java.util.function.BooleanSupplier;
@@ -45,7 +45,7 @@ public class ComponentValidator {
     public static void defaultValidateAttributeIsNull(WebComponent component, Supplier<Object> supplier, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, null, String.format("validating %s's %s is null", component.getComponentName(), attributeName)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> supplier.get() == null);
         };
         Validator.validate(assertion, component, attributeName, "null", supplier, "be");
@@ -56,7 +56,7 @@ public static void defaultValidateAttributeIsNull(WebComponent component, Suppli
     public static void defaultValidateAttributeNotNull(WebComponent component, Supplier<Object> supplier, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, null, String.format("validating %s's %s is NOT null", component.getComponentName(), attributeName)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> supplier.get() != null);
         };
         Validator.validate(assertion, component, attributeName, "not null", (Supplier<String>) () -> "null", "be");
@@ -67,7 +67,7 @@ public static void defaultValidateAttributeNotNull(WebComponent component, Suppl
     public static void defaultValidateAttributeIsSet(WebComponent component, Supplier<String> supplier, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, null, String.format("validating %s's %s is set", component.getComponentName(), attributeName)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> !supplier.get().isEmpty());
         };
         Validator.validate(assertion, component, attributeName, "set", supplier, "be");
@@ -78,7 +78,7 @@ public static void defaultValidateAttributeIsSet(WebComponent component, Supplie
     public static void defaultValidateAttributeNotSet(WebComponent component, Supplier<String> supplier, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, null, String.format("validating %s's %s is NOT set", component.getComponentName(), attributeName)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> supplier.get().isEmpty());
         };
         Validator.validate(assertion, component, attributeName, "not set", supplier, "be");
@@ -89,7 +89,7 @@ public static void defaultValidateAttributeNotSet(WebComponent component, Suppli
     public static void defaultValidateAttributeIs(WebComponent component, Supplier<String> supplier, String value, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, value, String.format("validating %s's %s is '%s'", component.getComponentName(), attributeName, value)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> supplier.get().equals(value));
         };
         Validator.validate(assertion, component, attributeName, value, supplier, "be");
@@ -100,7 +100,7 @@ public static void defaultValidateAttributeIs(WebComponent component, Supplier<S
     public void defaultValidateAttributeIs(WebComponent component, Supplier<Number> supplier, Number value, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, value.toString(), String.format("validating %s's %s is '%s'", component.getComponentName(), attributeName, value)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> supplier.get().equals(value));
         };
         Validator.validate(assertion, component, attributeName, value, supplier, "be");
@@ -111,7 +111,7 @@ public void defaultValidateAttributeIs(WebComponent component, Supplier<Number>
     public static void defaultValidateAttributeContains(WebComponent component, Supplier<String> supplier, String value, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, value, String.format("validating %s's %s contains '%s'", component.getComponentName(), attributeName, value)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> supplier.get().contains(value));
         };
         Validator.validate(assertion, component, attributeName, value, supplier, "contain");
@@ -122,7 +122,7 @@ public static void defaultValidateAttributeContains(WebComponent component, Supp
     public static void defaultValidateAttributeNotContains(WebComponent component, Supplier<String> supplier, String value, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, value, String.format("validating %s's %s doesn't contain '%s'", component.getComponentName(), attributeName, value)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> !supplier.get().contains(value));
         };
         Validator.validate(assertion, component, attributeName, value, supplier, "not contain");
@@ -133,7 +133,7 @@ public static void defaultValidateAttributeNotContains(WebComponent component, S
     public static void defaultValidateAttributeTrue(WebComponent component, BooleanSupplier supplier, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, null, String.format("validating %s is %s", component.getComponentName(), attributeName)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(supplier::getAsBoolean);
         };
         Validator.validate(assertion, component, attributeName, "true", () -> "false", "be");
@@ -144,7 +144,7 @@ public static void defaultValidateAttributeTrue(WebComponent component, BooleanS
     public static void defaultValidateAttributeFalse(WebComponent component, BooleanSupplier supplier, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, null, String.format("validating %s is not %s", component.getComponentName(), attributeName)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> !supplier.getAsBoolean());
         };
         Validator.validate(assertion, component, attributeName, "false", () -> "true", "be");
@@ -155,7 +155,7 @@ public static void defaultValidateAttributeFalse(WebComponent component, Boolean
     public static <Entity> void defaultValidateCollectionIs(WebComponent component, Supplier<List<Entity>> supplier, List<Entity> value, String attributeName) {
         VALIDATING_ATTRIBUTE.broadcast(new ComponentActionEventArgs(component, value.toString(), String.format("validating %s's %s is '%s'", component.getComponentName(), attributeName, value)));
 
-        AssertionMethod assertion = () -> {
+        Assertable assertion = () -> {
             Validator.validateCondition(() -> supplier.get().equals(value));
         };
         Validator.validate(assertion, component, attributeName, value, supplier, "be");
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/validate/Validator.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/validate/Validator.java
index cb0e15df..6d4ec68f 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/validate/Validator.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/validate/Validator.java
@@ -16,13 +16,13 @@
 import lombok.experimental.UtilityClass;
 import org.opentest4j.AssertionFailedError;
 import solutions.bellatrix.core.configuration.ConfigurationService;
+import solutions.bellatrix.core.utilities.Wait;
 import solutions.bellatrix.playwright.components.WebComponent;
 import solutions.bellatrix.playwright.configuration.TimeoutSettings;
 import solutions.bellatrix.playwright.configuration.WebSettings;
 import solutions.bellatrix.playwright.services.WebService;
 import solutions.bellatrix.playwright.utilities.DebugLogger;
-import solutions.bellatrix.playwright.utilities.functionalinterfaces.AssertionMethod;
-import solutions.bellatrix.playwright.utilities.functionalinterfaces.ComparatorMethod;
+import solutions.bellatrix.playwright.utilities.functionalinterfaces.Assertable;
 
 import java.util.function.Supplier;
 
@@ -30,54 +30,22 @@
 public class Validator extends WebService {
     private static final TimeoutSettings timeoutSettings = ConfigurationService.get(WebSettings.class).getTimeoutSettings();
 
-    public static void validateCondition(ComparatorMethod condition) {
-        boolean isConditionMet = false;
-
+    public static void validateCondition(Wait.Comparator condition) {
         long pollingInterval = timeoutSettings.inMilliseconds().getSleepInterval();
         long timeout = timeoutSettings.inMilliseconds().getValidationsTimeout();
 
-        long startTime = System.currentTimeMillis();
-
-        while (!isConditionMet && (System.currentTimeMillis() - startTime) <= timeout) {
-            try {
-                if (condition.evaluate()) {
-                    isConditionMet = true;
-                } else {
-                    Thread.sleep(pollingInterval);
-                }
-            } catch (Exception e) {
-                // ignore
-            }
-        }
-
-        if (!isConditionMet) {
+        if (!Wait.forConditionUntilTimeout(condition, timeout, pollingInterval)) {
             throw new AssertionFailedError(String.format("Assertion failed.\n%s", condition.toString()));
         }
     }
 
-    public static void validateCondition(ComparatorMethod condition, long timeoutInMilliseconds, long pollingIntervalInMilliseconds) {
-        boolean isConditionMet = false;
-
-        long startTime = System.currentTimeMillis();
-
-        while (!isConditionMet && (System.currentTimeMillis() - startTime) <= (timeoutInMilliseconds)) {
-            try {
-                if (condition.evaluate()) {
-                    isConditionMet = true;
-                } else {
-                    Thread.sleep(pollingIntervalInMilliseconds);
-                }
-            } catch (Exception e) {
-                // ignore
-            }
-        }
-
-        if (!isConditionMet) {
+    public static void validateCondition(Wait.Comparator condition, long timeoutInMilliseconds, long pollingIntervalInMilliseconds) {
+        if (!Wait.forConditionUntilTimeout(condition, timeoutInMilliseconds, pollingIntervalInMilliseconds)) {
             throw new AssertionFailedError(String.format("Assertion failed.\n%s", condition.toString()));
         }
     }
 
-    public static <T, V> void validate(AssertionMethod assertion, WebComponent component, String attributeName, V value, Supplier<T> supplier, String prefix) {
+    public static <T, V> void validate(Assertable assertion, WebComponent component, String attributeName, V value, Supplier<T> supplier, String prefix) {
         var error = String.format("The %s of %s (%s)%n" +
                         "  Should %s: \"%s\"%n" +
                         "  %" + prefix.length() + "sBut was: \"%s\"%n" +
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/webelement/FrameElement.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/webelement/FrameElement.java
index 2d2298d8..39fc8fae 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/webelement/FrameElement.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/webelement/FrameElement.java
@@ -8,18 +8,14 @@
 
 import java.util.regex.Pattern;
 
+/**
+ * Wrapper for Playwright FrameLocator.
+ */
 @Getter
 public class FrameElement extends WebElement {
     public FrameElement(Locator locator) {
         super(locator);
-        // Every FrameElement must contain a locator instance if the same html element, because
-        // as of Playwright v1.40, we cannot convert FrameLocator to Locator.
-        // Playwright v.1.43 has new methods:
-        // locator.contentFrame() (Converts Locator to FrameLocator)
-        // and
-        // frameLocator.owner() (Converts FrameLocator to Locator)
-        // Once we upgrade to v1.43, this logic will be removed altogether
-        this.wrappedFrameLocator = locator.frameLocator(":scope");
+        this.wrappedFrameLocator = locator.contentFrame();
     }
 
     public FrameElement(WebElement element) {
@@ -28,6 +24,10 @@ public FrameElement(WebElement element) {
 
     private final FrameLocator wrappedFrameLocator;
 
+    public WebElement owner() {
+        return new WebElement(wrappedFrameLocator.owner());
+    }
+
     @Override
     public WebElement getByAltText(String text, GetByAltTextOptions options) {
         return new WebElement(wrappedFrameLocator.getByAltText(text, options.convertTo(FrameLocator.GetByAltTextOptions.class)));
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/webelement/WebElement.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/webelement/WebElement.java
index 75543124..34109d6d 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/webelement/WebElement.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/common/webelement/WebElement.java
@@ -27,7 +27,7 @@
 import java.util.regex.Pattern;
 
 /**
- * Wrapper for Playwright Locator with internal logic for conversion between the two.
+ * Wrapper for Playwright Locator.
  */
 @Getter
 public class WebElement {
@@ -137,6 +137,10 @@ public FrameElement locateFrame(String selector) {
         return new FrameElement(locate(selector));
     }
 
+    public FrameElement locateFrame() {
+        return new FrameElement(this);
+    }
+
     public List<WebElement> all() {
         List<WebElement> elements = new ArrayList<>();
         List<Locator> locators = wrappedLocator.all();
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/contracts/ComponentText.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/contracts/ComponentText.java
index ea71db2a..bfa6df8d 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/contracts/ComponentText.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/contracts/ComponentText.java
@@ -17,21 +17,21 @@
 import solutions.bellatrix.playwright.components.common.validate.ComponentValidator;
 
 public interface ComponentText extends Component {
-    String getInnerText();
+    String getText();
 
-    default void validateInnerTextIs(String value) {
-        ComponentValidator.defaultValidateAttributeIs((WebComponent)this, this::getInnerText, value, "inner text");
+    default void validateTextIs(String value) {
+        ComponentValidator.defaultValidateAttributeIs((WebComponent)this, this::getText, value, "inner text");
     }
 
     default void validateTextContains(String value) {
-        ComponentValidator.defaultValidateAttributeContains((WebComponent)this, this::getInnerText, value, "inner text");
+        ComponentValidator.defaultValidateAttributeContains((WebComponent)this, this::getText, value, "inner text");
     }
 
     default void validateTextNotContains(String value) {
-        ComponentValidator.defaultValidateAttributeNotContains((WebComponent)this, this::getInnerText, value, "inner text");
+        ComponentValidator.defaultValidateAttributeNotContains((WebComponent)this, this::getText, value, "inner text");
     }
 
     default void validateTextIsSet() {
-        ComponentValidator.defaultValidateAttributeIsSet((WebComponent)this, this::getInnerText, "inner text");
+        ComponentValidator.defaultValidateAttributeIsSet((WebComponent)this, this::getText, "inner text");
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/shadowdom/ShadowDomService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/shadowdom/ShadowDomService.java
new file mode 100644
index 00000000..d2d04058
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/shadowdom/ShadowDomService.java
@@ -0,0 +1,278 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.shadowdom;
+
+import lombok.experimental.UtilityClass;
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Element;
+import org.jsoup.select.Elements;
+import org.openqa.selenium.By;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.InstanceFactory;
+import solutions.bellatrix.core.utilities.Ref;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.findstrategies.CssFindStrategy;
+import solutions.bellatrix.playwright.findstrategies.FindStrategy;
+import solutions.bellatrix.playwright.findstrategies.ShadowXpathFindStrategy;
+import solutions.bellatrix.playwright.findstrategies.XpathFindStrategy;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Stack;
+
+@UtilityClass
+public class ShadowDomService {
+    private static final String CHILD_COMBINATOR = " > ";
+    private static final String SHADOW_ROOT_TAG = "shadow-root";
+
+    public static String getShadowHtml(ShadowRoot shadowRoot) {
+        var function = String.format("""
+                el => {
+                           function clone(element, tag) {
+                               let cloneElement;
+                             	if (element instanceof ShadowRoot && !tag) {
+                                 cloneElement = new DocumentFragment();
+                               } else if (tag) {
+                                 cloneElement = document.createElement(tag);
+                               }
+                               else {
+                                 cloneElement = element.cloneNode(false);
+                                 if (element.firstChild && element.firstChild.nodeType === 3) {
+                                   cloneElement.appendChild(element.firstChild.cloneNode(false));
+                                 }
+                               }
+
+                               if (element.shadowRoot) {
+                                   cloneElement.appendChild(clone(element.shadowRoot, "%s"));
+                               }
+
+                               if (element.children) {
+                                   for (const child of element.children) {
+                                       cloneElement.appendChild(clone(child, undefined));
+                                   }
+                               }
+
+                               return cloneElement;
+                           }
+                       
+                        	var temporaryDiv = document.createElement("div");
+                         	temporaryDiv.appendChild(clone(el.shadowRoot, undefined));
+                           return temporaryDiv.innerHTML;
+                };
+                """, SHADOW_ROOT_TAG);
+
+        return (String)shadowRoot.evaluate(function);
+    }
+
+    public static <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent createInShadowContext(WebComponent parentComponent, Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        var shadowRoots = getShadowRootAncestors(parentComponent);
+
+        ShadowRoot initialShadowRoot = shadowRoots.pop();
+
+        var locatorBuilder = new StringBuilder();
+        while (!shadowRoots.isEmpty()) {
+            locatorBuilder.append(shadowRoots.pop().getFindStrategy().getValue()).append(CHILD_COMBINATOR + SHADOW_ROOT_TAG);
+        }
+        CssFindStrategy fullLocator = new CssFindStrategy(locatorBuilder.toString() + parentComponent.getFindStrategy().getValue());
+
+        var parentElement = getElement(initialShadowRoot, fullLocator);
+
+        var newElement = getElement(parentElement, findStrategy);
+
+        return createComponent(componentClass, initialShadowRoot, newElement, findStrategy);
+    }
+
+    public static <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> createAllInShadowContext(WebComponent parentComponent, Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        List<TComponent> componentList = new ArrayList<>();
+
+        var shadowRoots = getShadowRootAncestors(parentComponent);
+
+        ShadowRoot initialShadowRoot = shadowRoots.pop();
+
+        var locatorBuilder = new StringBuilder();
+        while (!shadowRoots.isEmpty()) {
+            locatorBuilder.append(shadowRoots.pop().getFindStrategy().getValue()).append(CHILD_COMBINATOR + SHADOW_ROOT_TAG);
+        }
+        CssFindStrategy fullLocator = new CssFindStrategy(locatorBuilder.toString() + parentComponent.getFindStrategy().getValue());
+
+        var parentElement = getElement(initialShadowRoot, fullLocator);
+
+        for (var element : getElements(parentElement, findStrategy)) {
+            componentList.add(createComponent(componentClass, initialShadowRoot, element, findStrategy));
+        }
+
+        return componentList;
+    }
+
+    public static <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent createFromShadowRoot(ShadowRoot shadowRoot, Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        return createComponent(componentClass, shadowRoot, getElement(shadowRoot, findStrategy), findStrategy);
+    }
+
+    public static <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> createAllFromShadowRoot(ShadowRoot shadowRoot, Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        List<TComponent> componentList = new ArrayList<>();
+
+        for (var element : getElements(shadowRoot, findStrategy)) {
+            componentList.add(createComponent(componentClass, shadowRoot, element, findStrategy));
+        }
+
+        return componentList;
+    }
+
+    private static <TComponent extends WebComponent> TComponent createComponent(Class<TComponent> clazz, ShadowRoot initialShadowRoot, Element jsoupNode, FindStrategy findStrategy) {
+        var component = InstanceFactory.create(clazz);
+
+        // passed as a reference, the inside value will change:
+        Ref<ShadowRoot> shadowRoot = new Ref<>(initialShadowRoot);
+
+        // create missing shadow roots between the element and the initial shadow root;
+        // chain them;
+        // return the element's css relative to the innermost shadow root
+        var jsoupNodeCss = buildMissingShadowRootsAndReturnElementRelativeCss(shadowRoot, jsoupNode);
+
+        if (findStrategy instanceof XpathFindStrategy) {
+            component.setFindStrategy(new ShadowXpathFindStrategy(findStrategy.getValue(), jsoupNodeCss));
+        } else {
+            component.setFindStrategy(new CssFindStrategy(jsoupNodeCss));
+        }
+
+        component.setParentComponent(shadowRoot.value);
+        component.setWrappedElement(component.getFindStrategy().convert(component.getParentComponent().getWrappedElement()).first());
+
+        return component;
+    }
+
+    private static String buildMissingShadowRootsAndReturnElementRelativeCss(Ref<ShadowRoot> shadowRoot, Element jsoupNode) {
+        var nestedShadowRootStack = new Stack<Element>();
+
+        // initial absolute xpath, relative to the outermost shadow root element
+        var jsoupNodeCss = HtmlService.convertAbsoluteXpathToCss(HtmlService.getAbsoluteXpath(jsoupNode)).split(CHILD_COMBINATOR);
+
+        // if there are <shadow-root> elements found between the outermost shadow root and the element
+        // populate the Stack<Element>
+        if (tryFindNestedShadowRoots(jsoupNode, nestedShadowRootStack)) {
+            String[] previousCss = null;
+
+            while (!nestedShadowRootStack.isEmpty()) {
+                var parent = nestedShadowRootStack.pop();
+                var css = HtmlService.convertAbsoluteXpathToCss(HtmlService.getAbsoluteXpath(parent)).split(CHILD_COMBINATOR);
+                if (previousCss != null) {
+                    css = removeRedundantSteps(css, previousCss);
+                }
+
+
+                shadowRoot.value = createNestedShadowRoot(shadowRoot.value, cleanFromShadowRootTags(css));
+
+                jsoupNodeCss = removeRedundantSteps(jsoupNodeCss, css);
+
+                previousCss = HtmlService.convertAbsoluteXpathToCss(HtmlService.getAbsoluteXpath(parent)).split(CHILD_COMBINATOR);
+            }
+        }
+
+        return String.join(CHILD_COMBINATOR, cleanFromShadowRootTags(jsoupNodeCss));
+    }
+
+    private static String[] removeRedundantSteps(String[] elementCss, String[] currentCss) {
+        return Arrays.stream(elementCss)
+                .skip(currentCss.length)
+                .toArray(String[]::new);
+    }
+
+    private static String[] cleanFromShadowRootTags(String[] css) {
+        return Arrays.stream(css)
+                .filter(x -> !x.contains(SHADOW_ROOT_TAG))
+                .toArray(String[]::new);
+    }
+
+    private static ShadowRoot createNestedShadowRoot(ShadowRoot parent, String[] locator) {
+        var finalLocator = String.join(CHILD_COMBINATOR, cleanFromShadowRootTags(locator));
+
+        ShadowRoot nestedShadowRoot = InstanceFactory.create(ShadowRoot.class);
+        nestedShadowRoot.setFindStrategy(new CssFindStrategy(finalLocator));
+        nestedShadowRoot.setParentComponent(parent);
+
+        return nestedShadowRoot;
+    }
+
+    private static boolean tryFindNestedShadowRoots(Element jsoupElement, Stack<Element> parentShadowRootStack) {
+        var parent = jsoupElement.parent();
+
+        while (parent != null) {
+            if (parent.tagName().equals(SHADOW_ROOT_TAG)) {
+                parentShadowRootStack.push(parent);
+            }
+
+            parent = parent.parent();
+        }
+
+        return !parentShadowRootStack.isEmpty();
+    }
+
+    /**
+     * Find from root element in shadow root's html.
+     */
+    private static Element getElement(ShadowRoot component, FindStrategy findStrategy) {
+        var doc = Jsoup.parse(component.getHtml());
+
+        return getElement(doc, findStrategy);
+    }
+
+    /**
+     * Find relatively from element.
+     */
+    private static Element getElement(Element element, FindStrategy findStrategy) {
+        return getElements(element, findStrategy).get(0);
+    }
+
+    /**
+     * Find from root element in shadow root's html.
+     */
+    private static List<Element> getElements(ShadowRoot component, FindStrategy findStrategy) {
+        var doc = Jsoup.parse(component.getHtml());
+
+        return getElements(doc, findStrategy);
+    }
+
+    /**
+     * Find relatively from element.
+     */
+    private static List<Element> getElements(Element element, FindStrategy findStrategy) {
+        Elements foundElements = null;
+        var strategyValue = findStrategy.getValue();
+
+        if (findStrategy instanceof CssFindStrategy) {
+            foundElements = element.select(strategyValue);
+        }
+        if (findStrategy instanceof XpathFindStrategy) {
+            foundElements = element.selectXpath(strategyValue);
+        }
+
+        return foundElements;
+    }
+
+    private static Stack<ShadowRoot> getShadowRootAncestors(WebComponent initialComponent) {
+        var component = initialComponent.getParentComponent();
+
+        var shadowRoots = new Stack<ShadowRoot>();
+
+        while (component != null) {
+            if (component instanceof ShadowRoot) {
+                shadowRoots.push((ShadowRoot)component);
+            }
+            component = component.getParentComponent();
+        }
+
+        return shadowRoots;
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/shadowdom/ShadowRoot.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/shadowdom/ShadowRoot.java
new file mode 100644
index 00000000..555cb04a
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/shadowdom/ShadowRoot.java
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.shadowdom;
+
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.common.webelement.WebElement;
+import solutions.bellatrix.playwright.components.contracts.ComponentHtml;
+import solutions.bellatrix.playwright.utilities.Settings;
+
+public class ShadowRoot extends WebComponent implements ComponentHtml {
+    public ShadowRoot() {
+        createService = new ShadowRootCreateService(this, CREATING, CREATED);
+        webSettings = Settings.web();
+    }
+
+    public ShadowRoot(WebElement element) {
+        this.wrappedElement = element;
+        createService = new ShadowRootCreateService(this, CREATING, CREATED);
+        webSettings = Settings.web();
+    }
+
+    @Override
+    public ShadowRootCreateService create() {
+        return (ShadowRootCreateService)createService;
+    }
+
+    /**
+     * Returns the innerHTML of the shadowRoot of the shadow host.
+     */
+    public String getHtml() {
+        return ShadowDomService.getShadowHtml(this);
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/shadowdom/ShadowRootCreateService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/shadowdom/ShadowRootCreateService.java
new file mode 100644
index 00000000..369ce7a3
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/components/shadowdom/ShadowRootCreateService.java
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.components.shadowdom;
+
+import solutions.bellatrix.core.plugins.EventListener;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.playwright.components.common.create.RelativeCreateService;
+import solutions.bellatrix.playwright.components.shadowdom.ShadowRoot;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.components.common.ComponentActionEventArgs;
+import solutions.bellatrix.playwright.findstrategies.FindStrategy;
+import solutions.bellatrix.playwright.findstrategies.ShadowXpathFindStrategy;
+import solutions.bellatrix.playwright.findstrategies.XpathFindStrategy;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class ShadowRootCreateService extends RelativeCreateService {
+    public ShadowRootCreateService(ShadowRoot baseComponent, EventListener<ComponentActionEventArgs> creating, EventListener<ComponentActionEventArgs> created) {
+        super(baseComponent, creating, created);
+    }
+
+    @Override
+    public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent by(Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        CREATING.broadcast(new ComponentActionEventArgs((WebComponent)baseComponent));
+
+        wrappedBrowser().getCurrentPage().waitForLoadState();
+
+        TComponent newComponent = ShadowDomService.createFromShadowRoot((ShadowRoot)baseComponent, componentClass, findStrategy);
+
+        CREATED.broadcast(new ComponentActionEventArgs((WebComponent)baseComponent));
+
+        return newComponent;
+    }
+
+    @Override
+    public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> allBy(Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        CREATING.broadcast(new ComponentActionEventArgs((WebComponent)baseComponent));
+
+        wrappedBrowser().getCurrentPage().waitForLoadState();
+
+        List<TComponent> componentList = ShadowDomService.createAllFromShadowRoot((ShadowRoot)baseComponent, componentClass, findStrategy);
+
+        CREATED.broadcast(new ComponentActionEventArgs((WebComponent)baseComponent));
+
+        return componentList;
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/CssFindStrategy.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/CssFindStrategy.java
index ae356fe0..60a95a91 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/CssFindStrategy.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/CssFindStrategy.java
@@ -27,12 +27,13 @@ public CssFindStrategy(String value) {
 
     @Override
     public WebElement convert(Page page) {
-        return get(page, By.LOCATOR, value);
-
+        if (!value.startsWith("css="))return get(page, By.LOCATOR, "css=" + value);
+        else return get(page, By.LOCATOR, value);
     }
 
     @Override
     public WebElement convert(WebElement webElement) {
-        return get(webElement, By.LOCATOR, value);
+        if (!value.startsWith("css="))return get(webElement, By.LOCATOR, "css=" + value);
+        else return get(webElement, By.LOCATOR, value);
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/InnerTextContainingFindStrategy.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/InnerTextContainingFindStrategy.java
new file mode 100644
index 00000000..5dfdd324
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/InnerTextContainingFindStrategy.java
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.findstrategies;
+
+import com.microsoft.playwright.Page;
+import lombok.Getter;
+import solutions.bellatrix.playwright.components.common.webelement.WebElement;
+import solutions.bellatrix.playwright.findstrategies.options.TextOptions;
+import solutions.bellatrix.playwright.findstrategies.utils.By;
+
+import java.util.regex.Pattern;
+
+@Getter
+public class InnerTextContainingFindStrategy extends XpathFindStrategy {
+    public InnerTextContainingFindStrategy(String text) {
+        super(String.format("//*contains(text(), '%s')", text));
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/ShadowXpathFindStrategy.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/ShadowXpathFindStrategy.java
new file mode 100644
index 00000000..2a853a73
--- /dev/null
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/ShadowXpathFindStrategy.java
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.playwright.findstrategies;
+
+import com.microsoft.playwright.Page;
+import lombok.Getter;
+import solutions.bellatrix.playwright.components.common.webelement.WebElement;
+import solutions.bellatrix.playwright.findstrategies.utils.By;
+
+/**
+ * Strategy that uses CSS to locate elements, but saves the original XPath for debugging purposes. <br>
+ */
+@Getter
+public class ShadowXpathFindStrategy extends CssFindStrategy {
+    private final String originalXpath;
+
+    public ShadowXpathFindStrategy(String xpath, String cssLocator) {
+        super(cssLocator);
+        originalXpath = xpath;
+    }
+
+    @Override
+    public String toString() {
+        return String.format("xpath = %s ; css = %s", originalXpath, getValue());
+    }
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/TextFindStrategy.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/TextFindStrategy.java
deleted file mode 100644
index d77920f0..00000000
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/TextFindStrategy.java
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * Copyright 2024 Automate The Planet Ltd.
- * Author: Miriam Kyoseva
- * Licensed under the Apache License, Version 2.0 (the "License");
- * You may not use this file except in compliance with the License.
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package solutions.bellatrix.playwright.findstrategies;
-
-import com.microsoft.playwright.Page;
-import lombok.Getter;
-import solutions.bellatrix.playwright.components.common.webelement.WebElement;
-import solutions.bellatrix.playwright.findstrategies.options.TextOptions;
-import solutions.bellatrix.playwright.findstrategies.utils.By;
-
-import java.util.regex.Pattern;
-
-@Getter
-public class TextFindStrategy extends PatternStrategy {
-    public TextFindStrategy(String text) {
-        this.text = text;
-    }
-
-    public TextFindStrategy(Pattern pattern) {
-        this.pattern = pattern;
-    }
-
-    public TextFindStrategy(String text, TextOptions options) {
-        this.text = text;
-        this.options = options;
-    }
-
-    public TextFindStrategy(Pattern pattern, TextOptions options) {
-        this.pattern = pattern;
-        this.options = options;
-    }
-
-    @Override
-    public WebElement convert(Page page) {
-        if (text != null) return get(page, By.TEXT, text, ((TextOptions)options).absolute());
-        if (pattern != null) return get(page, By.TEXT, pattern, ((TextOptions)options).absolute());
-        return null;
-    }
-
-    @Override
-    public WebElement convert(WebElement locator) {
-        if (text != null) return get(locator, By.TEXT, text, ((TextOptions)options).relative());
-        if (pattern != null) return get(locator, By.TEXT, pattern, ((TextOptions)options).relative());
-        return null;
-    }
-}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/XpathFindStrategy.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/XpathFindStrategy.java
index b4bc43fc..53b8c36f 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/XpathFindStrategy.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/findstrategies/XpathFindStrategy.java
@@ -27,12 +27,14 @@ public XpathFindStrategy(String value) {
 
     @Override
     public WebElement convert(Page page) {
-        return get(page, By.LOCATOR, value);
+        if (!value.startsWith("xpath=")) return get(page, By.LOCATOR, "xpath=" + value);
+        else return get(page, By.LOCATOR, value);
 
     }
 
     @Override
     public WebElement convert(WebElement webElement) {
-        return get(webElement, By.LOCATOR, value);
+        if (!value.startsWith("xpath=")) return get(webElement, By.LOCATOR, "xpath=" + value);
+        else return get(webElement, By.LOCATOR, value);
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/WrappedBrowser.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/WrappedBrowser.java
index 71872ea0..bbfa7877 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/WrappedBrowser.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/WrappedBrowser.java
@@ -21,11 +21,13 @@
 import lombok.Data;
 import lombok.Getter;
 import lombok.Setter;
+import solutions.bellatrix.core.utilities.SingletonFactory;
 
 @Data
 public class WrappedBrowser {
     public WrappedBrowser(Playwright playwright) {
         this.playwright = playwright;
+        SingletonFactory.register(this);
     }
 
     public WrappedBrowser(Playwright playwright, Browser browser, BrowserContext context, Page page) {
@@ -33,6 +35,7 @@ public WrappedBrowser(Playwright playwright, Browser browser, BrowserContext con
         this.browser = browser;
         currentContext = context;
         currentPage = page;
+        SingletonFactory.register(this);
     }
 
     @Getter(AccessLevel.PACKAGE) @Setter(AccessLevel.PACKAGE) private Playwright playwright;
@@ -42,18 +45,18 @@ public WrappedBrowser(Playwright playwright, Browser browser, BrowserContext con
     private String gridSessionId;
 
     public void close() {
-        // ToDo maybe only the playwright object needs to be explicitly closed
-        currentPage.close();
-        currentContext.close();
+        // Close everything manually
+        for (var page : currentContext.pages()) page.close();
+        for (var context : browser.contexts()) context.close();
         browser.close();
         playwright.close();
     }
 
     public void changeContext(BrowserContext context) {
-        currentPage.close();
+        for (var page : currentContext.pages()) page.close();
         currentContext.close();
 
         setCurrentContext(context);
-        setCurrentPage(currentContext.newPage());
+        setCurrentPage(context.newPage());
     }
 }
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/junit/WebTest.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/junit/WebTest.java
index d3132787..486d5396 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/junit/WebTest.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/junit/WebTest.java
@@ -16,6 +16,7 @@
 import org.junit.jupiter.api.extension.ExtendWith;
 import solutions.bellatrix.core.plugins.junit.BaseTest;
 import solutions.bellatrix.core.plugins.junit.TestResultWatcher;
+import solutions.bellatrix.core.utilities.SingletonFactory;
 import solutions.bellatrix.playwright.components.listeners.BddConsoleLogging;
 import solutions.bellatrix.playwright.components.listeners.BddToastNotificationsLogging;
 import solutions.bellatrix.playwright.components.listeners.HighlightElements;
@@ -28,7 +29,7 @@
 @ExtendWith(TestResultWatcher.class)
 public class WebTest extends BaseTest {
     public App app() {
-        return new App();
+        return SingletonFactory.getInstance(App.class);
     }
 
     @Override
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/testng/WebTest.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/testng/WebTest.java
index e2fc0cf6..d4571fb1 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/testng/WebTest.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/infrastructure/testng/WebTest.java
@@ -14,6 +14,7 @@
 package solutions.bellatrix.playwright.infrastructure.testng;
 
 import solutions.bellatrix.core.plugins.testng.BaseTest;
+import solutions.bellatrix.core.utilities.SingletonFactory;
 import solutions.bellatrix.playwright.components.listeners.BddConsoleLogging;
 import solutions.bellatrix.playwright.components.listeners.HighlightElements;
 import solutions.bellatrix.playwright.infrastructure.BrowserLifecyclePlugin;
@@ -24,7 +25,7 @@
 
 public class WebTest extends BaseTest {
     public App app() {
-        return new App();
+        return SingletonFactory.getInstance(App.class);
     }
 
     @Override
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/BrowserService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/BrowserService.java
index 133a73a3..40cae43b 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/BrowserService.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/BrowserService.java
@@ -23,12 +23,12 @@
 import org.apache.commons.text.StringEscapeUtils;
 import org.testng.Assert;
 import solutions.bellatrix.core.utilities.SingletonFactory;
+import solutions.bellatrix.core.utilities.Wait;
 import solutions.bellatrix.playwright.components.Frame;
 import solutions.bellatrix.playwright.components.common.validate.Validator;
 import solutions.bellatrix.playwright.utilities.DebugLogger;
 import solutions.bellatrix.playwright.utilities.Settings;
-import solutions.bellatrix.playwright.utilities.functionalinterfaces.AssertionMethod;
-import solutions.bellatrix.playwright.utilities.functionalinterfaces.ComparatorMethod;
+import solutions.bellatrix.playwright.utilities.functionalinterfaces.Assertable;
 
 import java.net.URI;
 import java.net.URISyntaxException;
@@ -298,11 +298,11 @@ public void waitForReactPageLoadsCompletely() {
         long waitUntilReadyTimeout = Settings.timeout().inMilliseconds().getWaitUntilReadyTimeout();
         long sleepInterval = Settings.timeout().inMilliseconds().getSleepInterval();
 
-        ComparatorMethod dataReactRootNotNull = () -> {
+        Wait.Comparator dataReactRootNotNull = () -> {
             return (boolean)page().evaluate("document.querySelector('data-reactroot') !== null");
         };
 
-        ComparatorMethod loadEventEndBiggerThanZero = () -> {
+        Wait.Comparator loadEventEndBiggerThanZero = () -> {
             return (boolean)page().evaluate("window.performance.timing.loadEventEnd > 0");
         };
 
@@ -314,7 +314,7 @@ public void waitForJavaScriptAnimations() {
         long waitForJavaScriptAnimationsTimeout = Settings.timeout().inMilliseconds().getWaitForJavaScriptAnimationsTimeout();
         long sleepInterval = Settings.timeout().inMilliseconds().getSleepInterval();
 
-        ComparatorMethod javaScriptAnimationsWait = () -> {
+        Wait.Comparator javaScriptAnimationsWait = () -> {
             return (boolean)page().evaluate("jQuery && jQuery(':animated').length === 0");
         };
 
@@ -362,7 +362,7 @@ public void waitForAjax() {
         long ajaxTimeout = Settings.timeout().inMilliseconds().getWaitForAjaxTimeout();
         long sleepInterval = Settings.timeout().inMilliseconds().getSleepInterval();
 
-        ComparatorMethod ajaxComplete = () -> {
+        Wait.Comparator ajaxComplete = () -> {
             var numberOfAjaxConnection = page().evaluate("!isNaN(window.openHTTPs) ? window.openHTTPs : null");
             if (Objects.nonNull(numberOfAjaxConnection)) {
                 int ajaxConnections = Integer.parseInt(numberOfAjaxConnection.toString());
@@ -405,7 +405,7 @@ public void waitForAjaxRequest(String requestPartialUrl, int additionalTimeoutIn
         long ajaxTimeout = Settings.timeout().inMilliseconds().getWaitForAjaxTimeout();
         long sleepInterval = Settings.timeout().inMilliseconds().getSleepInterval() + (additionalTimeoutInSeconds * 1000);
         String script = String.format("performance.getEntriesByType('resource').filter(item => item.initiatorType == 'xmlhttprequest' && item.name.toLowerCase().includes('%s'))[0] !== undefined;", requestPartialUrl);
-        ComparatorMethod ajaxReadyState = () -> {
+        Wait.Comparator ajaxReadyState = () -> {
             return (boolean)page().evaluate(script);
         };
 
@@ -419,7 +419,7 @@ public void waitForAjaxRequest(String requestPartialUrl) {
     public void waitUntilPageLoadsCompletely() {
         long waitUntilReadyTimeout = Settings.timeout().inMilliseconds().getWaitUntilReadyTimeout();
         long sleepInterval = Settings.timeout().inMilliseconds().getSleepInterval();
-        ComparatorMethod readyStateEqualsComplete = () -> {
+        Wait.Comparator readyStateEqualsComplete = () -> {
             return page().evaluate("document.readyState").equals("complete");
         };
 
@@ -439,7 +439,7 @@ public void validateLandedOnPage(String partialUrl, boolean shouldUrlEncode) {
         var timeout = Settings.timeout().getWaitForPartialUrl();
 
 
-        AssertionMethod assertion = () -> PlaywrightAssertions.assertThat(page()).hasURL(pattern, new PageAssertions.HasURLOptions().setTimeout(timeout));
+        Assertable assertion = () -> PlaywrightAssertions.assertThat(page()).hasURL(pattern, new PageAssertions.HasURLOptions().setTimeout(timeout));
         String log = String.format("The expected partialUrl: %s was not found in the page's url: %s", partialUrl, getUrl());
 
         DebugLogger.assertAndLogOnFail(assertion, log);
@@ -457,7 +457,7 @@ public void validateNotLandedOnPage(String partialUrl, boolean shouldUrlEncode)
         Pattern pattern = Pattern.compile(String.format(".*%s.*", partialUrl));
         var timeout = Settings.timeout().getWaitForPartialUrl();
 
-        AssertionMethod assertion = () -> PlaywrightAssertions.assertThat(page()).not().hasURL(pattern, new PageAssertions.HasURLOptions().setTimeout(timeout));
+        Assertable assertion = () -> PlaywrightAssertions.assertThat(page()).not().hasURL(pattern, new PageAssertions.HasURLOptions().setTimeout(timeout));
         String log = String.format("The expected partialUrl: %s was found in the page's url: %s", partialUrl, getUrl());
 
         DebugLogger.assertAndLogOnFail(assertion, log);
@@ -465,7 +465,7 @@ public void validateNotLandedOnPage(String partialUrl, boolean shouldUrlEncode)
 
     public void validateUrl(String fullUrl) {
         var timeout = Settings.timeout().getValidationsTimeout();
-        AssertionMethod assertion = () -> PlaywrightAssertions.assertThat(page()).hasURL(fullUrl, new PageAssertions.HasURLOptions().setTimeout(timeout));
+        Assertable assertion = () -> PlaywrightAssertions.assertThat(page()).hasURL(fullUrl, new PageAssertions.HasURLOptions().setTimeout(timeout));
         String log = String.format("Expected URL:\n%s\nIs different than the actual one:\n%s", fullUrl, getUrl());
 
         DebugLogger.assertAndLogOnFail(assertion, log);
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/ComponentCreateService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/ComponentCreateService.java
index 4f8a7f27..95af6be9 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/ComponentCreateService.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/ComponentCreateService.java
@@ -126,20 +126,12 @@ public <TComponent extends WebComponent> List<TComponent> allByAltText(Class<TCo
         return allByAltText(componentClass, pattern, null);
     }
 
-    public <TComponent extends WebComponent> TComponent byText(Class<TComponent> componentClass, String text) {
-        return byText(componentClass, text, null);
-    }
-
-    public <TComponent extends WebComponent> List<TComponent> allByText(Class<TComponent> componentClass, String text) {
-        return allByText(componentClass, text, null);
-    }
-
     public <TComponent extends WebComponent> TComponent byInnerTextContaining(Class<TComponent> componentClass, String text) {
-        return byText(componentClass, Pattern.compile(String.format(".*%s.*", text)), null);
+        return by(componentClass, new InnerTextContainingFindStrategy(text));
     }
 
     public <TComponent extends WebComponent> List<TComponent> allByInnerTextContaining(Class<TComponent> componentClass, String text) {
-        return allByText(componentClass, Pattern.compile(String.format(".*%s.*", text)), null);
+        return allBy(componentClass, new InnerTextContainingFindStrategy(text));
     }
 
     public <TComponent extends WebComponent> TComponent byTitle(Class<TComponent> componentClass, String text) {
@@ -264,26 +256,6 @@ public <TComponent extends WebComponent> List<TComponent> allByAltText(Class<TCo
         return allBy(componentClass, new AltTextFindStrategy(pattern, altTextOptions));
     }
 
-    public <TComponent extends WebComponent> TComponent byText(Class<TComponent> componentClass, String text, Function<Page.GetByTextOptions, Page.GetByTextOptions> options) {
-        var textOptions = TextOptions.createAbsolute(options);
-        return by(componentClass, new TextFindStrategy(text, textOptions));
-    }
-
-    public <TComponent extends WebComponent> List<TComponent> allByText(Class<TComponent> componentClass, String text, Function<Page.GetByTextOptions, Page.GetByTextOptions> options) {
-        var textOptions = TextOptions.createAbsolute(options);
-        return allBy(componentClass, new TextFindStrategy(text, textOptions));
-    }
-
-    public <TComponent extends WebComponent> TComponent byText(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByTextOptions, Page.GetByTextOptions> options) {
-        var textOptions = TextOptions.createAbsolute(options);
-        return by(componentClass, new TextFindStrategy(pattern, textOptions));
-    }
-
-    public <TComponent extends WebComponent> List<TComponent> allByText(Class<TComponent> componentClass, Pattern pattern, Function<Page.GetByTextOptions, Page.GetByTextOptions> options) {
-        var textOptions = TextOptions.createAbsolute(options);
-        return allBy(componentClass, new TextFindStrategy(pattern, textOptions));
-    }
-
     public <TComponent extends WebComponent> TComponent byTitle(Class<TComponent> componentClass, String text, Function<Page.GetByTitleOptions, Page.GetByTitleOptions> options) {
         var titleOptions = TitleOptions.createAbsolute(options);
         return by(componentClass, new TitleFindStrategy(text, titleOptions));
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/DialogService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/DialogService.java
index 2e679ba8..31c10fed 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/DialogService.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/DialogService.java
@@ -17,7 +17,6 @@
 import lombok.Getter;
 import solutions.bellatrix.playwright.components.common.validate.Validator;
 import solutions.bellatrix.playwright.utilities.Settings;
-import solutions.bellatrix.playwright.utilities.functionalinterfaces.Action;
 
 import java.util.concurrent.*;
 import java.util.function.Consumer;
@@ -26,7 +25,7 @@
 public class DialogService extends WebService {
     private Dialog dialog;
 
-    public Dialog runAndWaitForDialog(Action action) {
+    public Dialog runAndWaitForDialog(Runnable action) {
         listenForDialog();
 
         tryPerformAction(action, Settings.timeout().inMilliseconds().getActionTimeoutWhenHandlingDialogs());
@@ -36,7 +35,7 @@ public Dialog runAndWaitForDialog(Action action) {
         return dialog;
     }
 
-    public Dialog runAndWaitForDialog(Action action, long timeout) {
+    public Dialog runAndWaitForDialog(Runnable action, long timeout) {
         listenForDialog();
 
         tryPerformAction(action, timeout);
@@ -82,13 +81,13 @@ private void listenForDialog() {
         wrappedBrowser().getCurrentPage().onceDialog((dialog) -> this.dialog = dialog);
     }
 
-    private void tryPerformAction(Action action, long timeout) {
+    private void tryPerformAction(Runnable action, long timeout) {
         try (ExecutorService executor = Executors.newSingleThreadExecutor()) {
             try {
                 // Create a callable task representing the action to be executed
                 Callable<Void> callableTask = () -> {
                     // Perform the action here
-                    action.perform();
+                    action.run();
                     return null;
                 };
 
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/JavaScriptService.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/JavaScriptService.java
index 6b71a3f2..25a3a9d1 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/JavaScriptService.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/services/JavaScriptService.java
@@ -18,7 +18,7 @@
 import solutions.bellatrix.core.utilities.SingletonFactory;
 import solutions.bellatrix.playwright.components.Frame;
 import solutions.bellatrix.playwright.components.WebComponent;
-import solutions.bellatrix.playwright.utilities.functionalinterfaces.EvaluationMethod;
+import solutions.bellatrix.playwright.utilities.functionalinterfaces.Evaluable;
 
 
 @SuppressWarnings("resource")
@@ -48,7 +48,7 @@ public String execute(String script, Locator nativeLocator) {
         return (String) performEvaluation(() -> nativeLocator.evaluate(script));
     }
 
-    private Object performEvaluation(EvaluationMethod method) {
+    private Object performEvaluation(Evaluable method) {
         try {
             return method.evaluate();
         } catch (Exception ex) {
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/DebugLogger.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/DebugLogger.java
index fe6018fb..b37f0bcd 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/DebugLogger.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/DebugLogger.java
@@ -14,12 +14,12 @@
 package solutions.bellatrix.playwright.utilities;
 
 import lombok.experimental.UtilityClass;
-import solutions.bellatrix.playwright.utilities.functionalinterfaces.AssertionMethod;
+import solutions.bellatrix.playwright.utilities.functionalinterfaces.Assertable;
 
 // ToDo rename class and method or remove altogether
 @UtilityClass
 public class DebugLogger {
-    public void assertAndLogOnFail(AssertionMethod assertion, String infoLog) {
+    public void assertAndLogOnFail(Assertable assertion, String infoLog) {
         try {
             assertion.perform();
         } catch (Exception exception) {
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/Action.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/Assertable.java
similarity index 95%
rename from bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/Action.java
rename to bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/Assertable.java
index 16c814d7..c439d9b9 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/Action.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/Assertable.java
@@ -14,6 +14,6 @@
 package solutions.bellatrix.playwright.utilities.functionalinterfaces;
 
 @FunctionalInterface
-public interface Action {
+public interface Assertable {
     void perform();
-}
+}
\ No newline at end of file
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/EvaluationMethod.java b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/Evaluable.java
similarity index 95%
rename from bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/EvaluationMethod.java
rename to bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/Evaluable.java
index 03d7bb63..cda25c94 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/EvaluationMethod.java
+++ b/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/Evaluable.java
@@ -14,6 +14,6 @@
 package solutions.bellatrix.playwright.utilities.functionalinterfaces;
 
 @FunctionalInterface
-public interface EvaluationMethod {
+public interface Evaluable {
     Object evaluate();
 }
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/WebComponent.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/WebComponent.java
index 4e0b3afd..814839f4 100644
--- a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/WebComponent.java
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/WebComponent.java
@@ -31,6 +31,9 @@
 import solutions.bellatrix.web.components.contracts.Component;
 import solutions.bellatrix.web.components.contracts.ComponentStyle;
 import solutions.bellatrix.web.components.contracts.ComponentVisible;
+import solutions.bellatrix.web.components.shadowdom.ShadowHost;
+import solutions.bellatrix.web.components.shadowdom.ShadowRoot;
+import solutions.bellatrix.web.components.shadowdom.ShadowDomService;
 import solutions.bellatrix.web.components.enums.ScrollPosition;
 import solutions.bellatrix.web.configuration.WebSettings;
 import solutions.bellatrix.web.findstrategies.*;
@@ -69,6 +72,7 @@ public class WebComponent extends LayoutComponentValidationsBuilder implements C
     public final static EventListener<ComponentActionEventArgs> CREATED_ELEMENTS = new EventListener<>();
 
     @Setter(AccessLevel.PROTECTED) private WebElement wrappedElement;
+    @Getter @Setter protected WebComponent parentComponent;
     @Getter @Setter private SearchContext parentWrappedElement;
     @Getter @Setter private int elementIndex;
     @Getter @Setter private FindStrategy findStrategy;
@@ -90,6 +94,27 @@ public WebComponent() {
         wrappedDriver = DriverService.getWrappedDriver();
     }
 
+    /**
+     * Convert this component to another type of component.
+     *
+     * @param componentClass type of component
+     */
+    public <ComponentT extends WebComponent> ComponentT as(Class<ComponentT> componentClass) {
+        if (this.getClass() == componentClass) return (ComponentT)this;
+
+        var component = InstanceFactory.create(componentClass);
+
+        if (componentClass != ShadowRoot.class) {
+            component.setWrappedElement(this.wrappedElement);
+        }
+        component.setParentComponent(this.parentComponent);
+        component.setParentWrappedElement(this.parentWrappedElement);
+        component.setFindStrategy(this.findStrategy);
+        component.setElementIndex(this.elementIndex);
+
+        return component;
+    }
+
     public WebElement getWrappedElement() {
         try {
             wrappedElement.isDisplayed(); // checking if getting property throws exception
@@ -129,6 +154,16 @@ public SearchContext shadowRoot() {
         return getWrappedElement().getShadowRoot();
     }
 
+    /**
+     * Returns {@link ShadowRoot} from which you can safely create elements inside the shadow DOM
+     * even with XPath.
+     *
+     * @return {@link ShadowRoot}
+     */
+    public ShadowRoot getShadowRoot() {
+        return this.as(ShadowRoot.class);
+    }
+
     public void focus() {
         FOCUSING.broadcast(new ComponentActionEventArgs(this));
         javaScriptService.execute("window.focus();");
@@ -157,6 +192,10 @@ public Dimension getSize() {
         return new java.awt.Dimension(size.getWidth(), size.getHeight());
     }
 
+    public String getTagName() {
+        return getWrappedElement().getTagName();
+    }
+
     public String getTitle() {
         return getAttribute("title");
     }
@@ -423,137 +462,267 @@ public <TComponent extends WebComponent> List<TComponent> createAllByInnerTextCo
         return createAll(componentClass, new InnerTextContainingFindStrategy(innerText));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent shadowRootCreate(Class<TFindStrategy> findStrategyClass, Class<TComponent> componentClass, Object... args) {
         var findStrategy = InstanceFactory.create(findStrategyClass, args);
         return shadowRootCreate(componentClass, findStrategy);
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> shadowRootCreateAll(Class<TFindStrategy> findStrategyClass, Class<TComponent> componentClass, Object... args) {
         var findStrategy = InstanceFactory.create(findStrategyClass, args);
         return shadowRootCreateAll(componentClass, findStrategy);
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateById(Class<TComponent> componentClass, String id) {
         return shadowRootCreate(componentClass, new IdFindStrategy(id));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByAttributeContaining(Class<TComponent> componentClass, String attributeName, String value) {
         return shadowRootCreate(componentClass, new AttributeContainingWithFindStrategy(attributeName, value));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByIdEndingWith(Class<TComponent> componentClass, String idEnding) {
         return shadowRootCreate(componentClass, new IdEndingWithFindStrategy(idEnding));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByCss(Class<TComponent> componentClass, String css) {
         return shadowRootCreate(componentClass, new CssFindStrategy(css));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByClass(Class<TComponent> componentClass, String className) {
         return shadowRootCreate(componentClass, new ClassFindStrategy(className));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByName(Class<TComponent> componentClass, String name) {
         return shadowRootCreate(componentClass, new NameFindStrategy(name));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByNameEnding(Class<TComponent> componentClass, String nameEnding) {
         return shadowRootCreate(componentClass, new NameEndingWithFindStrategy(nameEnding));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByValueContaining(Class<TComponent> componentClass, String valueContaining) {
         return shadowRootCreate(componentClass, new ValueContainingWithFindStrategy(valueContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByClassContaining(Class<TComponent> componentClass, String classNameContaining) {
         return shadowRootCreate(componentClass, new ClassContainingFindStrategy(classNameContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByXPath(Class<TComponent> componentClass, String xpath) {
         return shadowRootCreate(componentClass, new XPathFindStrategy(xpath));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByLinkText(Class<TComponent> componentClass, String linkText) {
         return shadowRootCreate(componentClass, new LinkTextFindStrategy(linkText));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByLinkTextContaining(Class<TComponent> componentClass, String linkTextContaining) {
         return shadowRootCreate(componentClass, new LinkTextContainingFindStrategy(linkTextContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByTag(Class<TComponent> componentClass, String tag) {
         return shadowRootCreate(componentClass, new TagFindStrategy(tag));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByIdContaining(Class<TComponent> componentClass, String idContaining) {
         return shadowRootCreate(componentClass, new IdContainingFindStrategy(idContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> TComponent shadowRootCreateByInnerTextContaining(Class<TComponent> componentClass, String innerText) {
         return shadowRootCreate(componentClass, new InnerTextContainingFindStrategy(innerText));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllById(Class<TComponent> componentClass, String id) {
         return shadowRootCreateAll(componentClass, new IdFindStrategy(id));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByAttributeContaining(Class<TComponent> componentClass, String attributeName, String value) {
         return shadowRootCreateAll(componentClass, new AttributeContainingWithFindStrategy(attributeName, value));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByIdEndingWith(Class<TComponent> componentClass, String idEnding) {
         return shadowRootCreateAll(componentClass, new IdEndingWithFindStrategy(idEnding));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByCss(Class<TComponent> componentClass, String css) {
         return shadowRootCreateAll(componentClass, new CssFindStrategy(css));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByClass(Class<TComponent> componentClass, String className) {
         return shadowRootCreateAll(componentClass, new ClassFindStrategy(className));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByName(Class<TComponent> componentClass, String name) {
         return shadowRootCreateAll(componentClass, new NameFindStrategy(name));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByNameEnding(Class<TComponent> componentClass, String nameEnding) {
         return shadowRootCreateAll(componentClass, new NameEndingWithFindStrategy(nameEnding));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByValueContaining(Class<TComponent> componentClass, String valueContaining) {
         return shadowRootCreateAll(componentClass, new ValueContainingWithFindStrategy(valueContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByClassContaining(Class<TComponent> componentClass, String classNameContaining) {
         return shadowRootCreateAll(componentClass, new ClassContainingFindStrategy(classNameContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByXPath(Class<TComponent> componentClass, String xpath) {
         return shadowRootCreateAll(componentClass, new XPathFindStrategy(xpath));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByLinkText(Class<TComponent> componentClass, String linkText) {
         return shadowRootCreateAll(componentClass, new LinkTextFindStrategy(linkText));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByLinkTextContaining(Class<TComponent> componentClass, String linkTextContaining) {
         return shadowRootCreateAll(componentClass, new LinkTextContainingFindStrategy(linkTextContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByTag(Class<TComponent> componentClass, String tag) {
         return shadowRootCreateAll(componentClass, new TagFindStrategy(tag));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByIdContaining(Class<TComponent> componentClass, String idContaining) {
         return shadowRootCreateAll(componentClass, new IdContainingFindStrategy(idContaining));
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     public <TComponent extends WebComponent> List<TComponent> shadowRootCreateAllByInnerTextContaining(Class<TComponent> componentClass, String innerText) {
         return shadowRootCreateAll(componentClass, new InnerTextContainingFindStrategy(innerText));
     }
 
     public void highlight() {
+        if (this.getWrappedElement() instanceof ShadowHost) return;
+
         var currentBrowser = DriverService.getBrowserConfiguration().getBrowser();
         if (currentBrowser == Browser.CHROME_HEADLESS) return;
 
@@ -574,6 +743,10 @@ public void highlight() {
         }
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent shadowRootCreate(Class<TComponent> componentClass, TFindStrategy findStrategy) {
         CREATING_ELEMENT.broadcast(new ComponentActionEventArgs(this));
         findElement();
@@ -584,6 +757,10 @@ protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy>
         return component;
     }
 
+    /**
+     * Use {@link WebComponent#getShadowRoot() } instead
+     */
+    @Deprecated
     protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> shadowRootCreateAll(Class<TComponent> componentClass, TFindStrategy findStrategy) {
         CREATING_ELEMENTS.broadcast(new ComponentActionEventArgs(this));
         findElement();
@@ -605,9 +782,18 @@ protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy>
     protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent create(Class<TComponent> componentClass, TFindStrategy findStrategy) {
         CREATING_ELEMENT.broadcast(new ComponentActionEventArgs(this));
         findElement();
-        var component = InstanceFactory.create(componentClass);
-        component.setFindStrategy(findStrategy);
-        component.setParentWrappedElement(wrappedElement);
+
+        TComponent component;
+
+        if (inShadowContext()) {
+            component = ShadowDomService.createInShadowContext(this, componentClass, findStrategy);
+        } else {
+            component = InstanceFactory.create(componentClass);
+            component.setFindStrategy(findStrategy);
+            component.setParentComponent(this);
+            component.setParentWrappedElement(this.getWrappedElement());
+        }
+
         CREATED_ELEMENT.broadcast(new ComponentActionEventArgs(this));
         return component;
     }
@@ -615,20 +801,38 @@ protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy>
     protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> createAll(Class<TComponent> componentClass, TFindStrategy findStrategy) {
         CREATING_ELEMENTS.broadcast(new ComponentActionEventArgs(this));
         findElement();
-        var nativeElements = wrappedElement.findElements(findStrategy.convert());
+
         List<TComponent> componentList = new ArrayList<>();
-        for (int i = 0; i < nativeElements.size(); i++) {
-            var component = InstanceFactory.create(componentClass);
-            component.setFindStrategy(findStrategy);
-            component.setElementIndex(i);
-            component.setParentWrappedElement(wrappedElement);
-            componentList.add(component);
+
+        if (inShadowContext()) {
+            componentList = ShadowDomService.createAllInShadowContext(this, componentClass, findStrategy);
+        } else {
+            var nativeElements = wrappedElement.findElements(findStrategy.convert());
+
+            for (int i = 0; i < nativeElements.size(); i++) {
+                var component = InstanceFactory.create(componentClass);
+                component.setFindStrategy(findStrategy);
+                component.setElementIndex(i);
+                component.setParentWrappedElement(wrappedElement);
+                componentList.add(component);
+            }
         }
 
         CREATED_ELEMENTS.broadcast(new ComponentActionEventArgs(this));
         return componentList;
     }
 
+    private boolean inShadowContext() {
+        var component = this;
+
+        while (component != null) {
+            if (component instanceof ShadowRoot) return true;
+            component = component.getParentComponent();
+        }
+
+        return false;
+    }
+
     public WebElement findElement() {
         if (waitStrategies.size() == 0) {
             waitStrategies.add(Wait.to().exist(webSettings.getTimeoutSettings().getElementWaitTimeout(), webSettings.getTimeoutSettings().getSleepInterval()));
@@ -1050,7 +1254,6 @@ private void scrollToMakeElementVisible(WebElement wrappedElement) {
         }
     }
 
-
     private void scrollToVisible(WebElement wrappedElement, boolean shouldWait, ScrollPosition scrollPosition) {
         SCROLLING_TO_VISIBLE.broadcast(new ComponentActionEventArgs(this));
         try {
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/HeaderInfo.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/HeaderInfo.java
new file mode 100644
index 00000000..f827110f
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/HeaderInfo.java
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter @Setter
+public class HeaderInfo {
+    private String headerName;
+    private Integer order;
+
+    public HeaderInfo(String headerName) {
+        this.headerName = headerName;
+    }
+
+    public HeaderInfo(String headerName, Integer order) {
+        this(headerName);
+        this.order = order;
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/HeaderRowIndex.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/HeaderRowIndex.java
new file mode 100644
index 00000000..36ff603f
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/HeaderRowIndex.java
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter @Setter
+public class HeaderRowIndex {
+    public HeaderRowIndex(String headerName, int rowspan, int colspan, int rowIndex) {
+        this.headerName = headerName;
+        this.rowspan = rowspan;
+        this.colspan = colspan;
+        this.rowIndex = rowIndex;
+    }
+
+    private String headerName;
+    private int rowspan;
+    private int colspan;
+    private int rowIndex;
+}
diff --git a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/ComparatorMethod.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/TableHeader.java
similarity index 71%
rename from bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/ComparatorMethod.java
rename to bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/TableHeader.java
index 93658538..331abdb9 100644
--- a/bellatrix.playwright/src/main/java/solutions/bellatrix/playwright/utilities/functionalinterfaces/ComparatorMethod.java
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/TableHeader.java
@@ -11,9 +11,13 @@
  * limitations under the License.
  */
 
-package solutions.bellatrix.playwright.utilities.functionalinterfaces;
+package solutions.bellatrix.web.components.advanced;
 
-@FunctionalInterface
-public interface ComparatorMethod {
-    boolean evaluate();
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+
+@Retention(RetentionPolicy.RUNTIME)
+public @interface TableHeader {
+    String name();
+    int order() default 0;
 }
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/ControlColumnData.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/ControlColumnData.java
new file mode 100644
index 00000000..c68b7d81
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/ControlColumnData.java
@@ -0,0 +1,32 @@
+package solutions.bellatrix.web.components.advanced.grid;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.advanced.HeaderInfo;
+import solutions.bellatrix.web.findstrategies.FindStrategy;
+
+@Getter @Setter
+public class ControlColumnData extends HeaderInfo {
+    private FindStrategy findStrategy;
+    private Class<?> componentClass;
+
+    ControlColumnData(String headerName) {
+        super(headerName);
+    }
+    ControlColumnData(String headerName, Integer order) {
+        super(headerName, order);
+    }
+
+    <TComponent extends WebComponent> ControlColumnData(String headerName, FindStrategy by, Class<TComponent> componentClazz) {
+        super(headerName, null);
+        findStrategy = by;
+        componentClass = componentClazz;
+    }
+
+    <TComponent extends WebComponent, TFindStrategy extends FindStrategy> ControlColumnData(String headerName, TFindStrategy by, Class<TComponent> componentClazz, int order) {
+        super(headerName, order);
+        findStrategy = by;
+        componentClass = componentClazz;
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/Grid.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/Grid.java
new file mode 100644
index 00000000..a58e93ce
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/Grid.java
@@ -0,0 +1,541 @@
+package solutions.bellatrix.web.components.advanced.grid;
+
+import lombok.Getter;
+import lombok.Setter;
+import lombok.SneakyThrows;
+import org.apache.commons.text.StringEscapeUtils;
+import org.junit.jupiter.api.Assertions;
+import solutions.bellatrix.core.assertions.EntitiesAsserter;
+import solutions.bellatrix.core.utilities.*;
+import solutions.bellatrix.core.utilities.parsing.TypeParser;
+import solutions.bellatrix.web.components.Button;
+import solutions.bellatrix.web.components.Label;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.advanced.*;
+import solutions.bellatrix.web.components.advanced.services.FooterService;
+import solutions.bellatrix.web.components.advanced.services.HeaderNamesService;
+import solutions.bellatrix.web.components.advanced.services.TableLocators;
+import solutions.bellatrix.web.components.advanced.services.TableService;
+import solutions.bellatrix.web.components.advanced.table.TableCell;
+import solutions.bellatrix.web.components.advanced.table.TableHeaderRow;
+import solutions.bellatrix.web.components.datahandlers.ControlDataHandler;
+import solutions.bellatrix.web.findstrategies.FindStrategy;
+import solutions.bellatrix.web.findstrategies.XPathFindStrategy;
+
+import java.lang.reflect.Field;
+import java.lang.reflect.Method;
+import java.util.*;
+import java.util.function.Consumer;
+import java.util.function.Predicate;
+
+public class Grid extends WebComponent {
+    private TableService tableService;
+    @Getter @Setter private List<ControlColumnData> controlColumnDataCollection;
+
+    public TableService getTableService() {
+        if (tableService == null) {
+            waitUntilPopulated();
+            var innerHtml = defaultGetInnerHtmlAttribute();
+            tableService = new TableService(innerHtml);
+        }
+
+        return tableService;
+    }
+
+    private TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+
+    public HeaderNamesService getHeaderNamesService() {
+        return new HeaderNamesService(getTableService().getHeaderRows());
+    }
+
+    public FooterService getFooterService() {
+        return new FooterService(getTableService().getFooter());
+    }
+
+    public List<Button> getColumnHeaders() {
+        var list = new ArrayList<Button>();
+        for (var header : getTableService().getHeaders()) {
+            var element = this.createByXPath(Button.class, HtmlService.getAbsoluteXpath(header));
+            list.add(element);
+        }
+
+        return list;
+    }
+
+    public List<TableHeaderRow> getTableHeaderRows() {
+        var list = new ArrayList<TableHeaderRow>();
+        for (var headerRow : getTableService().getHeaderRows()) {
+            var element = this.createByXPath(TableHeaderRow.class, HtmlService.getAbsoluteXpath(headerRow));
+            list.add(element);
+        }
+
+        return list;
+    }
+
+    public void waitUntilPopulated() {
+        Wait.forConditionUntilTimeout(() -> {
+            var rows = this.createAllByXPath(Label.class, "." + locators().getRowsXpath());
+            return rows != null && !rows.isEmpty();
+        }, 3000, 500);
+    }
+
+    public List<String> getHeaderNames() {
+        return getHeaderNamesService().getHeaderNames();
+    }
+
+    public void forEachHeader(Consumer<Button> action) {
+        for (var header : getColumnHeaders()) {
+            action.accept(header);
+        }
+    }
+
+    public int rowsCount() {
+        return getTableService().getRows().size();
+    }
+
+    public GridRow getRow(int rowIndex) {
+        String xpath = HtmlService.getAbsoluteXpath(getTableService().getRow(rowIndex));
+        GridRow row = this.createByXPath(GridRow.class, "." + xpath);
+        row.setParentGrid(this);
+        row.setIndex(rowIndex);
+
+        return row;
+    }
+    
+    public List<GridRow> getRows() {
+        var rowsCount = getTableService().getRows().size();
+
+        var list = new ArrayList<GridRow>(rowsCount);
+
+        for (int rowIndex = 0; rowIndex < rowsCount; rowIndex++) {
+            list.add(getRow(rowIndex));
+        }
+
+        return list;
+    }
+
+    public <TComponent extends WebComponent> List<GridRow> getRows(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getRows().stream().filter(r -> !r.getCells(clazz, selector).isEmpty()).toList();
+    }
+
+    public <TComponent extends WebComponent> GridRow getFirstOrDefaultRow(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getRows(clazz, selector).stream().findFirst().orElse(null);
+    }
+
+    public void forEachRow(Consumer<GridRow> action) {
+        for (var gridRow : getTableService().getRows()) {
+            String xpath = HtmlService.getAbsoluteXpath(gridRow);
+            action.accept(this.createByXPath(GridRow.class, "." + xpath));
+        }
+    }
+
+    public GridCell getCell(int row, int column) {
+        String innerXpath = HtmlService.getAbsoluteXpath(getTableService().getCell(row, column));
+        if (innerXpath.startsWith(".")) innerXpath = innerXpath.substring(1);
+        String outerXpath = getCurrentElementXPath();
+
+        String fullXpath = Objects.requireNonNullElse(outerXpath, ".") + innerXpath;
+
+        GridCell cell = this.createByXPath(GridCell.class, fullXpath);
+        setCellMetaData(cell, row, column);
+
+        return cell;
+    }
+
+    public GridCell getCell(String header, int row) {
+        Integer position = getHeaderNamesService().getHeaderPosition(header, controlColumnDataCollection);
+        if (position == null) return null;
+
+        return getCell(row, position);
+    }
+
+    public <TDto> GridCell getCell(Class<TDto> clazz, PropertyReference<TDto> expression, int row) {
+        String headerName = getHeaderNamesService().getHeaderNameByExpression(clazz, expression);
+        Integer position = getHeaderNamesService().getHeaderPosition(headerName, controlColumnDataCollection);
+        if (position == null) return null;
+
+        return getCell(row, position);
+    }
+
+    public void forEachCell(Consumer<GridCell> action) {
+        var outerXpath = getCurrentElementXPath();
+        for (var gridCell : getTableService().getCells()) {
+            var fullXpath = outerXpath + HtmlService.getAbsoluteXpath(gridCell);
+            action.accept(this.createByXPath(GridCell.class, "." + fullXpath));
+        }
+    }
+
+    public <TComponent extends WebComponent> List<TComponent> getCells(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        var rows = getRows();
+
+        var filteredCells = new ArrayList<TComponent>(rows.size());
+
+        for (var gridRow : rows) {
+            var currentFilteredCells = gridRow.getCells(clazz, selector);
+            filteredCells.addAll(currentFilteredCells);
+        }
+
+        return filteredCells;
+    }
+
+    public int getFooterRowsCount() {
+        return getFooterService().getRows().size();
+    }
+
+    public GridRow getFooterByName(String footerName) {
+        int currentRowIndex = 0;
+        for (var footerRow : getFooterService().getRows()) {
+            if (Objects.equals((footerRow).selectXpath(".//").text(), footerName)) {
+                return getFooterByPosition(currentRowIndex);
+            }
+
+            currentRowIndex++;
+        }
+
+        throw new IllegalArgumentException(String.format("Footer row %s was not found.", footerName));
+    }
+
+    public GridRow getFooterByPosition(int position) {
+        String xpath = HtmlService.getAbsoluteXpath(getFooterService().getRows().get(position));
+        GridRow row = this.createByXPath(GridRow.class, "." + xpath);
+        row.setParentGrid(this);
+        row.setIndex(position);
+
+        return row;
+    }
+
+    public List<GridRow> getFooterRows() {
+        var list = new ArrayList<GridRow>(getFooterRowsCount());
+
+        for (int rowIndex = 0; rowIndex < getFooterRowsCount(); rowIndex++) {
+            GridRow row = getFooterByPosition(rowIndex);
+            list.add(row);
+        }
+
+        return list;
+    }
+
+    public <TComponent extends WebComponent> List<GridRow> getFooterRows(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getFooterRows().stream().filter(r -> !r.getCells(clazz, selector).isEmpty()).toList();
+    }
+
+    public <TComponent extends WebComponent> GridRow getFirstOrDefaultFooterRow(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getFooterRows(clazz, selector).stream().findFirst().orElse(null);
+    }
+
+    public void forEachFooterRow(Consumer<GridRow> action) {
+        for (var gridRow : getFooterService().getRows()) {
+            String xpath = HtmlService.getAbsoluteXpath(gridRow);
+            action.accept(this.createByXPath(GridRow.class, "." + xpath));
+        }
+    }
+
+    public <TComponent extends WebComponent> TComponent getFirstOrDefaultCell(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getCells(clazz, selector).stream().findFirst().orElse(null);
+    }
+
+    public <TComponent extends WebComponent> TComponent getLastOrDefaultCell(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        var cells = getCells(clazz, selector);
+        if (cells == null || cells.isEmpty()) return null;
+
+        return cells.get(cells.size() - 1);
+    }
+
+    public String getGridColumnNameByIndex(int index) {
+        return getHeaderNamesService().getHeaderNames().get(index);
+    }
+
+    public int getGridColumnIndexByName(String columnName) {
+        var coll = getHeaderNamesService().getHeaderNames();
+
+        return coll.indexOf(columnName);
+    }
+
+    public List<GridCell> getColumn(int column) {
+        var list = new ArrayList<GridCell>(rowsCount());
+
+        for (int row = 0; row < rowsCount(); row++) {
+            list.add(getCell(row, column));
+        }
+
+        return list;
+    }
+
+    public List<GridCell> getColumn(String header) {
+        return getColumn(header, null);
+    }
+
+    public List<GridCell> getColumn(String header, Integer order) {
+        Integer position = getHeaderNamesService().getHeaderPosition(header, controlColumnDataCollection, order);
+        if (position == null) return new ArrayList<>();
+
+        return getColumn(position);
+    }
+
+    public <TRowObject> void assertTable(Class<TRowObject> clazz, List<TRowObject> expectedEntities, String... fieldsNotToCompare) {
+        scrollToVisible();
+        Assertions.assertEquals(expectedEntities.size(), rowsCount(), String.format("Expected rows count %d but rows was %s", expectedEntities.size(), rowsCount()));
+
+        for (int i = 0; i < rowsCount(); i++) {
+            var entity = castRow(clazz, i, fieldsNotToCompare);
+            EntitiesAsserter.areEqual(expectedEntities.get(i), entity, fieldsNotToCompare);
+        }
+    }
+
+    @SneakyThrows
+    @SuppressWarnings({"unchecked"})
+    public <TRowObject> void assertTable(Class<TRowObject> clazz, List<TRowObject> expectedEntities) {
+        scrollToVisible();
+        Assertions.assertEquals(expectedEntities.size(), rowsCount(), String.format("Expected rows count %d but rows was %s", expectedEntities.size(), rowsCount()));
+
+        for (int i = 0; i < rowsCount(); i++) {
+            int finalI = i;
+            var propsNotToCompare = Arrays.stream(expectedEntities.get(i).getClass().getDeclaredFields())
+                    .filter(f -> {
+                        try {
+                            f.setAccessible(true);
+                            return f.get(expectedEntities.get(finalI)) == null;
+                        } catch (IllegalAccessException e) {
+                            throw new RuntimeException(e);
+                        }
+                    })
+                    .map(f -> getHeaderNamesService().getHeaderNameByField(f))
+                    .toArray(String[]::new);
+
+            TRowObject entity;
+            if (!clazz.equals(Object.class)) {
+                entity = castRow(clazz, i, propsNotToCompare);
+            } else {
+                Method method = this.getClass().getMethod("castRow", int.class, List.class);
+                entity = (TRowObject)method.invoke(this, i, Arrays.stream(propsNotToCompare).toList());
+            }
+            EntitiesAsserter.areEqual(expectedEntities.get(i), entity, propsNotToCompare);
+        }
+    }
+
+    public void assertIsEmpty() {
+        scrollToVisible();
+        Assertions.assertTrue(getTableService().getRows().isEmpty(), String.format("Grid should be empty, but has %d rows.", rowsCount()));
+    }
+
+    public void assertIsNotEmpty() {
+        scrollToVisible();
+        Assertions.assertFalse(getTableService().getRows().isEmpty(), "Grid has no rows.");
+    }
+
+    public void assertRowsCount(int expectedRowsCount) {
+        scrollToVisible();
+        Assertions.assertEquals(expectedRowsCount, rowsCount(), String.format("Grid should have %d rows, but has %d rows.", expectedRowsCount, rowsCount()));
+    }
+
+    public <TRowObject> List<TRowObject> getItems(Class<TRowObject> clazz) {
+        scrollToVisible();
+        return getItems(clazz, getRows());
+    }
+
+    @SneakyThrows
+    public <TRowObject> TRowObject castRow(Class<TRowObject> clazz, int rowIndex, String... fieldsToSkip) {
+        var cells = getTableService().getRowCells(rowIndex);
+
+        if(controlColumnDataCollection == null || controlColumnDataCollection.isEmpty()) {
+            throw new IllegalArgumentException("The grid does not have a column model set!");
+        }
+
+        if (cells.size() != controlColumnDataCollection.size()) {
+
+            // Compare headers to determine why the cells count is different
+            var actual = getHeaderNamesService().getHeaderNames();
+            var expected = controlColumnDataCollection.stream().map(HeaderInfo::getHeaderName).toList();
+
+            Assertions.assertIterableEquals(expected, actual, String.format("Expected: %s%sActual: %s", expected, System.lineSeparator(), actual));
+        }
+
+        var dto = InstanceFactory.create(clazz);
+        var fields = clazz.getFields();
+        for (var field : fields) {
+            var fieldType = field.getType();
+
+            var headerInfo = getHeaderNamesService().getHeaderInfoByField(field);
+
+            if (Arrays.stream(fieldsToSkip).anyMatch(f -> f.equals(headerInfo.getHeaderName()))) continue;
+
+            Integer headerPosition = getHeaderNamesService().getHeaderPosition(headerInfo.getHeaderName(), controlColumnDataCollection, headerInfo.getOrder());
+            if (headerPosition == null) continue;
+
+            var controlData = getControlDataByField(field);
+            if (controlData != null && controlData.getComponentClass() != null && WebComponent.class.isAssignableFrom(controlData.getComponentClass())) {
+                var xpath = HtmlService.getAbsoluteXpath(cells.get(headerPosition));
+                var tableCell = this.createByXPath(TableCell.class, "." + xpath);
+                Object elementValue;
+                if (controlData.getFindStrategy() == null) {
+                    controlData.setFindStrategy(new XPathFindStrategy(xpath));
+                    elementValue = getCellData(controlData, tableCell);
+                    controlData.setFindStrategy(null);
+                }
+                else {
+                    elementValue = getCellData(controlData, tableCell);
+                }
+
+                field.set(dto, TypeParser.parse(elementValue, fieldType));
+            } else {
+                String htmlNodeValue = StringEscapeUtils.unescapeHtml4((getTableService().getRowCells(rowIndex).get(headerPosition)).text().trim());
+                field.set(dto, TypeParser.parse(htmlNodeValue, fieldType));
+            }
+        }
+
+        return dto;
+    }
+
+    public void setCellMetaData(GridCell cell, int row, int column) {
+        cell.setRow(row);
+        cell.setColumn(column);
+
+        if (controlColumnDataCollection == null || controlColumnDataCollection.isEmpty()) {
+            throw new IllegalArgumentException("The grid does not have a column model set!");
+        }
+
+        var columnData = controlColumnDataCollection.get(column);
+        var headerName = columnData.getHeaderName();
+        var controlData = getControlColumnDataByHeaderName(controlColumnDataCollection, headerName);
+        cell.setCellControlFindStrategy(controlData.getFindStrategy());
+        cell.setCellControlComponentType(controlData.getComponentClass());
+    }
+
+    public <TRowObject, TRow extends GridRow> List<TRowObject> getItems(Class<TRowObject> clazz, List<TRow> rows) {
+        var list = new ArrayList<TRowObject>();
+        for (var row : rows) {
+            var obj = castRow(clazz, row.getIndex());
+            list.add(obj);
+        }
+
+        return list;
+    }
+
+    private ControlColumnData getControlDataByField(Field field) {
+        ControlColumnData headerInfo;
+
+        if (field.isAnnotationPresent(TableHeader.class)) {
+            var headerNameAttribute = field.getAnnotation(TableHeader.class);
+            headerInfo = controlColumnDataCollection.stream().filter(h -> Objects.equals(h.getHeaderName(), headerNameAttribute.name())).findFirst().orElse(null);
+        } else {
+            headerInfo = controlColumnDataCollection.stream().filter(h -> Objects.equals(h.getHeaderName(), field.getName())).findFirst().orElse(null);
+        }
+
+        return headerInfo;
+    }
+
+    @SneakyThrows
+    private Object getCellData(ControlColumnData controlData, TableCell tableCell) {
+        var createMethod = WebComponent.class.getDeclaredMethod("create", Class.class, FindStrategy.class);
+        createMethod.setAccessible(true);
+        var element = createMethod.invoke(tableCell, controlData.getComponentClass(), controlData.getFindStrategy());
+
+        return ControlDataHandler.getData((WebComponent)element);
+    }
+
+    protected String getCurrentElementXPath() {
+        String jsScriptText ="""
+                    (function(elm) {
+                      var allNodes = document.getElementsByTagName("*");
+                      for (var segs = []; elm && elm.nodeType === 1; elm = elm.parentNode) {
+                          if (elm.hasAttribute("id")) {
+                              var uniqueIdCount = 0;
+                              for (var n = 0; n < allNodes.length; n++) {
+                                  if (allNodes[n].hasAttribute("id") && allNodes[n].id === elm.id) uniqueIdCount++;
+                                  if (uniqueIdCount > 1) break;
+                              };
+                              if (uniqueIdCount === 1) {
+                                  segs.unshift(`//*[@id='${elm.getAttribute('id')}']`);
+                                  return segs.join('/');
+                              }
+                              else {
+                                  segs.unshift(`//${elm.localName.toLowerCase()}[@id='${elm.getAttribute('id')}']`);
+                              }
+                          }
+                          else {
+                              for (i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) {
+                                  if (sib.localName === elm.localName) i++;
+                              };
+                              segs.unshift(`${elm.localName.toLowerCase()}[${i}]`);
+                          };
+                      };
+                    
+                      if (segs.length) {
+                        let xpath = "/" + segs.join("/");
+                        if (xpath.startsWith("///")) xpath = xpath.substring(1);
+                        return xpath;
+                      }
+                      return null;
+                    })(arguments[0]);
+                    """;
+
+        return getJavaScriptService().execute(jsScriptText, this);
+    }
+
+    private ControlColumnData getControlColumnDataByHeaderName(List<? extends HeaderInfo> controlColumnDataCollection, String headerName) {
+        return (ControlColumnData)controlColumnDataCollection.stream().filter(x -> x.getHeaderName().equals(headerName)).findFirst().orElse(null);
+    }
+
+    private boolean anyControlColumnDataByHeaderName(List<? extends HeaderInfo> controlColumnDataCollection, String headerName) {
+        return controlColumnDataCollection.stream().anyMatch(x -> x.getHeaderName().equals(headerName));
+    }
+
+    public Grid setColumn(String headerName) {
+        if (controlColumnDataCollection == null) {
+            controlColumnDataCollection = new ArrayList<>();
+        }
+
+        controlColumnDataCollection.add(new ControlColumnData(headerName));
+
+        return this;
+    }
+
+    public Grid setColumns(List<String> headerNames) {
+        if (headerNames == null || headerNames.isEmpty()) {
+            return this;
+        }
+
+        if (controlColumnDataCollection == null) {
+            controlColumnDataCollection = new ArrayList<>();
+        }
+
+        for (var headerName : headerNames) {
+            controlColumnDataCollection.add(new ControlColumnData(headerName));
+        }
+
+        return this;
+    }
+
+    public <TComponent extends WebComponent> Grid setColumn(String headerName, Class<TComponent> type) {
+        if (controlColumnDataCollection == null) {
+            controlColumnDataCollection = new ArrayList<>();
+        }
+
+        controlColumnDataCollection.add(new ControlColumnData(headerName, null, type));
+
+        return this;
+    }
+
+    public <TComponent extends WebComponent, TFindStrategy extends FindStrategy> Grid setColumn(String headerName, Class<TComponent> type, TFindStrategy controlInnerLocator) {
+        if (controlColumnDataCollection == null) {
+            controlColumnDataCollection = new ArrayList<ControlColumnData>();
+        }
+
+        var column = new ControlColumnData(headerName, controlInnerLocator, type);
+        controlColumnDataCollection.add(column);
+
+        return this;
+    }
+
+    public <TGridModel> Grid setModelColumns(Class<TGridModel> clazz) {
+        controlColumnDataCollection = new ArrayList<>();
+        for (var field : clazz.getFields()) {
+            var headerName = field.isAnnotationPresent(TableHeader.class) ? field.getAnnotation(TableHeader.class).name() : field.getName();
+            controlColumnDataCollection.add(new ControlColumnData(headerName));
+        }
+
+        return this;
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/GridCell.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/GridCell.java
new file mode 100644
index 00000000..058023dd
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/GridCell.java
@@ -0,0 +1,35 @@
+package solutions.bellatrix.web.components.advanced.grid;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.core.plugins.EventListener;
+import solutions.bellatrix.web.components.ComponentActionEventArgs;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.advanced.table.TableCell;
+import solutions.bellatrix.web.components.contracts.ComponentHtml;
+import solutions.bellatrix.web.components.contracts.ComponentText;
+import solutions.bellatrix.web.findstrategies.FindStrategy;
+
+@Getter @Setter
+@SuppressWarnings("rawtypes")
+public class GridCell extends TableCell implements ComponentHtml, ComponentText {
+    public final static EventListener<ComponentActionEventArgs> CLICKING = new EventListener<>();
+    public final static EventListener<ComponentActionEventArgs> CLICKED = new EventListener<>();
+
+    public void click() {
+        defaultClick(CLICKING, CLICKED);
+    }
+
+    private Class cellControlComponentType;
+    private FindStrategy cellControlFindStrategy;
+
+    @Override
+    public <TComponent extends WebComponent> TComponent as(Class<TComponent> clazz) {
+        cellControlComponentType = clazz;
+        if (cellControlFindStrategy == null) {
+            return super.as(clazz);
+        } else {
+            return this.create(clazz, cellControlFindStrategy);
+        }
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/GridRow.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/GridRow.java
new file mode 100644
index 00000000..a67d2a9e
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/grid/GridRow.java
@@ -0,0 +1,116 @@
+package solutions.bellatrix.web.components.advanced.grid;
+
+import lombok.Getter;
+import lombok.Setter;
+import lombok.SneakyThrows;
+import solutions.bellatrix.core.assertions.EntitiesAsserter;
+import solutions.bellatrix.core.plugins.EventListener;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.PropertyReference;
+import solutions.bellatrix.web.components.ComponentActionEventArgs;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.contracts.ComponentHtml;
+import solutions.bellatrix.web.findstrategies.FindStrategy;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.function.Predicate;
+
+@Getter @Setter
+public class GridRow extends WebComponent implements ComponentHtml {
+    public final static EventListener<ComponentActionEventArgs> CLICKING = new EventListener<>();
+    public final static EventListener<ComponentActionEventArgs> CLICKED = new EventListener<>();
+
+    private Grid parentGrid;
+    private int index;
+
+    public void click() {
+        defaultClick(CLICKING, CLICKED);
+    }
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+
+    public GridCell getCell(int column) {
+        return parentGrid.getCell(index, column);
+    }
+
+    public GridCell getCell(String headerName) {
+        return parentGrid.getCell(headerName, index);
+    }
+
+    public <TDto> GridCell getCell(Class<TDto> dtoClass, PropertyReference<TDto> expression) {
+        return parentGrid.getCell(dtoClass, expression, index);
+    }
+
+    public List<GridCell> getCells() {
+        var listOfCells = new ArrayList<GridCell>();
+        var rowCells = parentGrid.getTableService().getRowCells(index);
+
+        for (int rowCellsIndex = 0; rowCellsIndex < rowCells.size(); rowCellsIndex++) {
+            var rowCellXPath = HtmlService.getAbsoluteXpath(rowCells.get(rowCellsIndex));
+            var cell = parentGrid.createByXPath(GridCell.class, "." + rowCellXPath);
+            parentGrid.setCellMetaData(cell, index, rowCellsIndex);
+            listOfCells.add(cell);
+        }
+
+        return listOfCells;
+    }
+
+    @SneakyThrows
+    @SuppressWarnings("unchecked")
+    public <TComponent extends WebComponent> List<TComponent> getCells(Class<TComponent> clazz) {
+        var listOfElements = new ArrayList<TComponent>();
+        var cells = getCells();
+        for (int columnIndex = 0; columnIndex < cells.size(); columnIndex++) {
+            var cell = cells.get(columnIndex);
+            if (cell.getCellControlComponentType() == null) {
+                listOfElements.add(cell.as(clazz));
+            } else {
+                var createMethod = WebComponent.class.getDeclaredMethod("create", Class.class, FindStrategy.class);
+                createMethod.setAccessible(true);
+                var element = (TComponent)createMethod.invoke(cell, cell.getCellControlComponentType(), cell.getCellControlFindStrategy());
+                listOfElements.add(element);
+            }
+        }
+
+        return listOfElements;
+    }
+
+    public <TComponent extends WebComponent> List<TComponent> getCells(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getCells(clazz).stream().filter((component) -> component.getClass().equals(clazz)).filter(selector).toList();
+    }
+
+    public <TComponent extends WebComponent> TComponent getFirstOrDefault(Class<TComponent> clazz, Predicate<TComponent> selector) {
+        return getCells(clazz, selector).stream().findFirst().orElse(null);
+    }
+
+    public <T> T getItem(Class<T> clazz, String... fieldsToSkip) {
+        return parentGrid.castRow(clazz, index, fieldsToSkip);
+    }
+
+    public <T> void assertRow(T expectedItem, String... fieldsNotToCompare) {
+        var clazz = expectedItem.getClass();
+        var actualItem = getItem(clazz, fieldsNotToCompare);
+
+        EntitiesAsserter.assertAreEqual(expectedItem, actualItem, fieldsNotToCompare);
+    }
+
+    public <T> void assertRow(T expectedItem) {
+        List<String> propsNotToCompare = Arrays.stream(expectedItem.getClass().getDeclaredFields())
+                .filter(field -> {
+                    field.setAccessible(true);
+                    try {
+                        return field.get(expectedItem) == null;
+                    } catch (IllegalAccessException e) {
+                        throw new RuntimeException(e);
+                    }
+                })
+                .map(field -> parentGrid.getHeaderNamesService().getHeaderNameByField(field))
+                .toList();
+
+        assertRow(expectedItem, propsNotToCompare.toArray(new String[0]));
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/FooterService.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/FooterService.java
new file mode 100644
index 00000000..892abaf3
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/FooterService.java
@@ -0,0 +1,154 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced.services;
+
+import org.apache.commons.text.StringEscapeUtils;
+import org.jsoup.nodes.Element;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.InstanceFactory;
+import solutions.bellatrix.core.utilities.Ref;
+import solutions.bellatrix.core.utilities.SingletonFactory;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Objects;
+
+public class FooterService {
+    private String xpathToNameElement;
+    private Element tableFooter;
+    private List<List<String>> tableFooterRowsValuesWithIndex;
+
+    public FooterService(Element tableFooter) {
+        this.tableFooter = tableFooter;
+    }
+
+    public FooterService(Element tableFooter, String xpathToNameElement) {
+        this(tableFooter);
+        this.xpathToNameElement = xpathToNameElement;
+    }
+
+    public TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+
+    public List<Element> getRows() {
+        return tableFooter.selectXpath(locators().getFooterRowsXpath()).stream()
+                .filter((a) -> a.attribute("style") == null || !Objects.equals(a.attribute("style").getValue(), "display:none"))
+                .toList();
+    }
+
+    public List<List<String>> getFooterRowsData() {
+        initializeFooterRows();
+
+        return tableFooterRowsValuesWithIndex;
+    }
+
+    public Element getFooterRowByName(String footerName) {
+        return getRows()
+                .stream().filter(row -> !row.selectXpath(String.format(".//%s[.='%s']", locators().getRowTag(), footerName)).isEmpty())
+                .findFirst().orElse(null);
+    }
+
+    public Element getFooterRowByPosition(int position) {
+        return getRows().get(position);
+    }
+
+    public Element getFooterRowCellByName(String footerName, int cellIndex) {
+        var row = getRows().stream()
+                .filter(a -> Objects.equals(a.text(), footerName))
+                .findFirst().orElse(null);
+
+        if (row == null) return null;
+
+        return row.selectXpath(locators().getCellXpath()).get(cellIndex);
+    }
+
+    public Element getFooterRowCellByPosition(int position, int cellIndex) {
+        return getFooterRowByPosition(position).selectXpath("." + locators().getCellXpath()).get(cellIndex);
+    }
+
+    public List<String> getFooterRowDataByName(String footerName) {
+        return getFooterRowsData()
+                .stream().filter(x -> Objects.equals(x.get(0), footerName))
+                .findFirst()
+                .orElseGet(() -> getFooterRowsData().stream().filter(x -> x.get(0).startsWith(footerName)).findFirst().orElse(null));
+    }
+
+    public List<String> getFooterRowDataByPosition(int position) {
+        return getFooterRowsData().get(position);
+    }
+
+    public String getFooterValueForIndex(int footerPosition, int index) {
+        return getFooterRowDataByPosition(footerPosition).get(index);
+    }
+
+    public String getFooterValueForIndex(String footerName, int index) {
+        return getFooterRowDataByName(footerName).get(index);
+    }
+
+    private void initializeFooterRows() {
+        if (tableFooterRowsValuesWithIndex != null) {
+            return;
+        }
+
+        tableFooterRowsValuesWithIndex = new ArrayList<>();
+        int rowIndex = 0;
+        for (var tableFooterRow : getRows()) {
+            var columnIndex = new Ref<Integer>(0);
+            var footerCellsCount = tableFooterRow.selectXpath("." + locators().getCellXpath()).size();
+            for (var currentCell : tableFooterRow.selectXpath("." + locators().getCellXpath())) {
+                String cellValue;
+                if (xpathToNameElement == null || xpathToNameElement.isBlank()) {
+                    cellValue = StringEscapeUtils.unescapeHtml4(currentCell.text());
+                } else {
+                    cellValue = StringEscapeUtils.unescapeHtml4(currentCell.selectXpath(xpathToNameElement).text());
+                }
+
+                int colSpan = getColSpan(currentCell);
+                addColumnIndex(rowIndex, colSpan, (Ref<Integer>)columnIndex, cellValue);
+            }
+
+            rowIndex++;
+        }
+    }
+
+    private void addColumnIndex(int currentRow, int colSpan, Ref<Integer> columnIndex, String cellValue) {
+        addFooterCellIndex(currentRow, cellValue);
+        if (colSpan == 0) columnIndex.value++;
+        else {
+            int initialIndex = columnIndex.value;
+            for (int i = 1; i < colSpan; i++) {
+                addFooterCellIndex(currentRow, "");
+                columnIndex.value++;
+            }
+
+            columnIndex.value++;
+        }
+    }
+
+    private void addFooterCellIndex(int currentRow, String cellValue) {
+        if (tableFooterRowsValuesWithIndex.size() > currentRow) {
+            tableFooterRowsValuesWithIndex.get(currentRow).add(cellValue);
+        } else {
+            var list = new ArrayList<String>();
+            list.add(cellValue);
+            tableFooterRowsValuesWithIndex.add(list);
+        }
+    }
+
+    private int getColSpan(Element headerCell) {
+        var attribute = HtmlService.getAttribute(headerCell, "colspan", Integer.class);
+        return attribute != null ? attribute : 0;
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/HeaderNamesService.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/HeaderNamesService.java
new file mode 100644
index 00000000..c3e106a0
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/HeaderNamesService.java
@@ -0,0 +1,230 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced.services;
+
+import lombok.Getter;
+import lombok.Setter;
+import lombok.SneakyThrows;
+import org.apache.commons.text.StringEscapeUtils;
+import org.jsoup.nodes.Element;
+import solutions.bellatrix.core.utilities.*;
+import solutions.bellatrix.web.components.advanced.HeaderInfo;
+import solutions.bellatrix.web.components.advanced.HeaderRowIndex;
+import solutions.bellatrix.web.components.advanced.TableHeader;
+
+import java.lang.reflect.Field;
+import java.util.*;
+
+public class HeaderNamesService {
+    private String xpathToNameElement;
+    private Map<Integer, String> headerNamesIndexes;
+    private List<Element> tableRowHeaders;
+
+    public HeaderNamesService(List<Element> tableRowHeaders) {
+        this.tableRowHeaders = tableRowHeaders;
+    }
+
+    public HeaderNamesService(List<Element> tableRowHeaders, String xpathToNameElement) {
+        this(tableRowHeaders);
+        this.xpathToNameElement = xpathToNameElement;
+    }
+
+    public TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+
+    @Getter @Setter private List<String> columnHeaderNames;
+
+    public void setHeaderNamesByIndex(int index, String value) {
+        headerNamesIndexes.put(index, value);
+    }
+    public List<String> getHeaderNames() {
+        initializeHeaderNames();
+
+        return headerNamesIndexes.values().stream().toList();
+    }
+
+    public String getNameByPosition(int position) {
+        return headerNamesIndexes.get(position);
+    }
+
+    public Integer getHeaderPosition(String header, List<? extends HeaderInfo> headerInfos) {
+        return  getHeaderPosition(header, headerInfos, null, null);
+    }
+
+    public Integer getHeaderPosition(String header, List<? extends HeaderInfo> headerInfos, Integer order) {
+        return getHeaderPosition(header, headerInfos, order, null);
+    }
+
+    public Integer getHeaderPosition(String header, List<? extends HeaderInfo> headerInfos, Integer order, Boolean throwException) {
+        setEmptyHeadersName(headerInfos);
+
+        if (headerNamesIndexes.values().stream().noneMatch(x -> x.endsWith(header))) {
+            if (throwException != null && throwException) {
+                throw new IllegalArgumentException(String.format("Header %s was not found.", header));
+            } else return null;
+        }
+
+        if (columnHeaderNames != null && columnHeaderNames.stream().noneMatch(x -> x.endsWith(header))) {
+            return null;
+        }
+
+        var allMatchingHeaders = headerNamesIndexes.entrySet().stream()
+                .filter(entry -> entry.getValue().endsWith(header))
+                .toList();
+
+        if (allMatchingHeaders.size() > 1) {
+            var exactMatchHeaders = headerNamesIndexes.entrySet().stream()
+                    .filter(entry -> Objects.equals(entry.getValue(), header))
+                    .toList();
+
+            if (exactMatchHeaders.size() != 1) {
+                if (order == null) {
+                    DebugInformation.debugInfo(String.format("More than one Header with name ending with '%s' was found. Returning the first one.", header));
+                    return allMatchingHeaders.get(0).getKey();
+                } else {
+                    return allMatchingHeaders.get(order).getKey();
+                }
+            }
+
+            return exactMatchHeaders.get(0).getKey();
+        } else if (!allMatchingHeaders.isEmpty()) {
+            return allMatchingHeaders.get(0).getKey();
+        }
+
+        return null;
+    }
+
+    public <T> String getHeaderNameByExpression(Class<T> dtoClass, PropertyReference<T> expression) {
+       return getHeaderNameByField(Objects.requireNonNull(PropertyReferenceNameResolver.getMember(dtoClass, expression)));
+    }
+
+    public String getHeaderNameByField(Field field) {
+        if (field.isAnnotationPresent(TableHeader.class)) {
+            return field.getAnnotation(TableHeader.class).name();
+        } else {
+            return field.getName();
+        }
+    }
+
+    public Integer getHeaderOrderByField(Field field) {
+        if (field.isAnnotationPresent(TableHeader.class)) {
+            return field.getAnnotation(TableHeader.class).order();
+        } else return null;
+    }
+
+    public HeaderInfo getHeaderInfoByField(Field field) {
+        var headerName = getHeaderNameByField(field);
+        var headerOrder = getHeaderOrderByField(field) != null ? getHeaderOrderByField(field) : null;
+
+        if (headerOrder == null) return new HeaderInfo(headerName);
+
+        else return new HeaderInfo(headerName, headerOrder);
+    }
+
+    private void setEmptyHeadersName(List<? extends HeaderInfo> headerInfos) {
+        var headerNameCollection = getHeaderNames();
+        var count = Math.min(headerInfos.size(), headerNameCollection.size());
+
+        for (int i = 0; i < count; i++) {
+            var headerName = headerInfos.get(i).getHeaderName();
+            var collectionName = headerNameCollection.get(i);
+
+            if (!Objects.equals(collectionName, headerName) && (collectionName == null || collectionName.isBlank())) {
+                setHeaderNamesByIndex(i, headerName);
+            }
+        }
+    }
+
+    private void initializeHeaderNames() {
+        if (headerNamesIndexes != null && !headerNamesIndexes.isEmpty()) {
+            return;
+        }
+
+        headerNamesIndexes = new HashMap<>();
+        var rowSpanPairs = new HashMap<Integer, HeaderRowIndex>();
+        int rowIndex = 0;
+        for (var tableRowHeader : tableRowHeaders) {
+            Ref<Integer> columnIndex = new Ref<>(0);
+            // UNUSED, REMOVE ME: var headerCellsCount = tableRowHeader.selectXpath(locators().getHeaderXpath()).size();
+
+            for (var currentHeader : tableRowHeader.selectXpath("." + locators().getHeaderXpath())) {
+                String headerName;
+                while (rowSpanPairs.containsKey(columnIndex.value) && rowIndex > rowSpanPairs.get(columnIndex.value).getRowIndex()) {
+                    headerName = rowSpanPairs.get(columnIndex.value).getHeaderName();
+                    rowSpanPairs.get(columnIndex.value).setRowspan(rowSpanPairs.get(columnIndex.value).getRowspan() -1);
+                    // UNUSED, REMOVE ME: int currentColSpan = rowSpanPairs.get(columnIndex.value).getColspan();
+
+                    if (rowSpanPairs.get(columnIndex.value).getRowspan() == 1) {
+                        rowSpanPairs.remove(columnIndex.value);
+                    }
+
+                    columnIndex.value++;
+                }
+
+                if (xpathToNameElement == null || xpathToNameElement.isBlank()) {
+                    headerName = currentHeader.text();
+                } else {
+                    headerName = StringEscapeUtils.unescapeHtml4(currentHeader.selectXpath(xpathToNameElement).text());
+                }
+
+                int colSpan = getColSpan(currentHeader);
+                int rowSpan = getRowSpan(currentHeader);
+
+                if (rowSpan > 1) {
+                    rowSpanPairs.put(columnIndex.value, new HeaderRowIndex(headerName, rowSpan, colSpan, rowIndex));
+                }
+
+                addColumnIndex(colSpan, (Ref<Integer>)columnIndex, headerName);
+            }
+
+            rowIndex++;
+        }
+    }
+
+    private void addColumnIndex(int colSpan, Ref<Integer> columnIndex, String headerName) {
+        if (colSpan == 0) {
+            addHeaderNameIndex(columnIndex.value, headerName);
+            columnIndex.value++;
+        } else {
+            int initialIndex = columnIndex.value;
+            for (int i = 0; i < colSpan; i++) {
+                addHeaderNameIndex(initialIndex + i, headerName);
+                columnIndex.value++;
+            }
+        }
+    }
+
+    private void addHeaderNameIndex(int operationalIndex, String headerName) {
+        if (headerNamesIndexes.containsKey(operationalIndex) && Objects.equals(headerNamesIndexes.get(operationalIndex), headerName)) {
+            return;
+        }
+
+        if (headerNamesIndexes.containsKey(operationalIndex)) {
+            headerNamesIndexes.put(operationalIndex, headerNamesIndexes.get(operationalIndex) + " " + headerName);
+        } else {
+            headerNamesIndexes.put(operationalIndex, headerName);
+        }
+    }
+
+    private int getColSpan(Element headerCell) {
+        var attribute = HtmlService.getAttribute(headerCell, "colspan", Integer.class);
+        return attribute != null ? attribute : 0;
+    }
+
+    private int getRowSpan(Element headerCell) {
+        var attribute = HtmlService.getAttribute(headerCell, "rowspan", Integer.class);
+        return attribute != null ? attribute : 0;
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/TableLocators.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/TableLocators.java
new file mode 100644
index 00000000..ca809931
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/TableLocators.java
@@ -0,0 +1,50 @@
+package solutions.bellatrix.web.components.advanced.services;
+
+import lombok.NoArgsConstructor;
+
+@NoArgsConstructor
+public class TableLocators {
+    public String getRowTag() {
+        return "tr";
+    }
+
+    public String getHeaderTag() {
+        return "th";
+    }
+
+    public String getCellTag() {
+        return "td";
+    }
+
+    public String getFooterTag() {
+        return "tfoot";
+    }
+
+    public String getBodyTag() {
+        return "tbody";
+    }
+
+    public String getHeaderXpath() {
+        return "//" + getHeaderTag();
+    }
+
+    public String getCellXpath() {
+        return "//" + getCellTag();
+    }
+
+    public String getRowsXpath() {
+        return String.format("//%s[descendant::%s]", getRowTag(), getCellTag());
+    }
+
+    public String getHeadersXpath() {
+        return String.format("//%s[descendant::%s]", getRowTag(), getHeaderTag());
+    }
+
+    public String getFooterRowsXpath() {
+        return String.format("//%s[ancestor::%s]", getRowTag(), getFooterTag());
+    }
+
+    public String getFooterXpath() {
+        return "//" + getFooterTag();
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/TableService.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/TableService.java
new file mode 100644
index 00000000..9018e4e4
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/services/TableService.java
@@ -0,0 +1,94 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced.services;
+
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.jsoup.nodes.Node;
+import org.jsoup.parser.Parser;
+import org.jsoup.select.Elements;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.InstanceFactory;
+import solutions.bellatrix.core.utilities.SingletonFactory;
+
+import java.util.List;
+import java.util.Objects;
+
+public class TableService {
+    protected String tableXpath;
+    private final Document htmlDoc;
+
+    public TableService(String html) {
+        htmlDoc = Jsoup.parse(html, Parser.xmlParser());
+    }
+
+    public TableService(String html, String tableXpath) {
+        this(html);
+        this.tableXpath = tableXpath;
+    }
+
+    public TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+
+    public Element getTable() {
+        if (tableXpath == null || tableXpath.isBlank()) {
+            return HtmlService.addRootElementIfNeeded(htmlDoc);
+        }
+
+        return htmlDoc.selectXpath(tableXpath).first();
+    }
+
+    public List<Element> getHeaders() {
+        return getTable().selectXpath("." + locators().getHeadersXpath());
+    }
+
+    public List<Element> getHeaderRows() {
+        return getTable().selectXpath("." + locators().getHeadersXpath()).stream()
+                .filter((a) -> a.attribute("style") == null || !Objects.equals(a.attribute("style").getValue(), "display:none"))
+                .toList();
+    }
+
+    public Element getRow(int index) {
+        return getRows().get(index);
+    }
+
+    public List<Element> getRows() {
+        var table = getTable();
+
+        return getTable().selectXpath("." + locators().getRowsXpath());
+    }
+
+    public Element getFooter() {
+        return getTable().selectXpath("." + locators().getFooterXpath()).first();
+    }
+
+    public Element getCell(int row, int column) {
+        return getRowCells(row).get(column);
+    }
+
+    public List<Element> getCells() {
+        var listOfNodes = new Elements();
+        for (int i = 0; i < getRows().size(); i++) {
+            listOfNodes.addAll(getRow(i).selectXpath("." + locators().getCellXpath()));
+        }
+
+        return listOfNodes;
+    }
+
+    public List<Element> getRowCells(int rowIndex) {
+        return getRow(rowIndex).selectXpath("." + locators().getCellXpath());
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/Table.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/Table.java
new file mode 100644
index 00000000..a50ac864
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/Table.java
@@ -0,0 +1,285 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.core.assertions.EntitiesAsserter;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.PropertyReference;
+import solutions.bellatrix.core.utilities.parsing.TypeParser;
+import solutions.bellatrix.core.utilities.InstanceFactory;
+import solutions.bellatrix.web.components.Label;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.advanced.*;
+import solutions.bellatrix.web.components.advanced.services.FooterService;
+import solutions.bellatrix.web.components.advanced.services.HeaderNamesService;
+import solutions.bellatrix.web.components.advanced.services.TableService;
+
+import java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Method;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.function.Consumer;
+import java.util.function.Predicate;
+
+public class Table extends WebComponent {
+    private HeaderNamesService headerNamesService;
+    private FooterService footerService;
+    private List<TableRow> rows;
+    private TableService tableService;
+
+    public Table() {
+    }
+
+    public TableService getTableService() {
+        if (this.tableService == null) {
+            this.tableService = new TableService(defaultGetInnerHtmlAttribute());
+        }
+        return this.tableService;
+    }
+
+    protected HeaderNamesService getHeaderNamesService() {
+        if (this.headerNamesService == null) {
+            this.headerNamesService = new HeaderNamesService(getTableService().getHeaderRows());
+        }
+        return this.headerNamesService;
+    }
+
+    protected FooterService getFooterService() {
+        if (this.footerService == null) {
+            this.footerService = new FooterService(getTableService().getFooter());
+        }
+        return this.footerService;
+    }
+
+    public TableFooter getFooter() {
+        return this.createByXPath(TableFooter.class, HtmlService.getAbsoluteXpath(getTableService().getFooter()));
+    }
+
+    public int getRowsCount() {
+        return getRows().size();
+    }
+
+    @Getter @Setter private List<HeaderInfo> columnHeaderNames;
+
+    public List<Label> getColumnHeaders() {
+        return this.createAllByTag(Label.class, getTableService().locators().getHeaderTag());
+    }
+
+    public List<TableHeaderRow> getTableHeaderRows() {
+        return this.createAllByXPath(TableHeaderRow.class, "." + getTableService().locators().getHeadersXpath());
+    }
+
+    public List<TableRow> getRows() {
+        initializeRows();
+        return rows;
+    }
+
+    public TableRow getRow(int index) {
+        initializeRows();
+        return rows.get(index);
+    }
+
+    public void forEachRow(Consumer<TableCell> action) {
+        for (var row : getRows()) {
+            for (var rowCell : row.getCells()) {
+                action.accept(rowCell);
+            }
+        }
+    }
+
+    public void forEachHeader(Consumer<Label> action) {
+        for (var header : getColumnHeaders()) {
+            action.accept(header);
+        }
+    }
+
+    public void forEachCell(Consumer<TableCell> action) {
+        for (var row : getRows()) {
+            for (var rowCell : row.getCells()) {
+                action.accept(rowCell);
+            }
+        }
+    }
+
+    public List<TableCell> getColumn(int column) {
+        var tableCells = getRows().stream().map(row -> row.getCell(column)).toList();
+
+        int rowNumber = 0;
+        for (var tableCell : tableCells) {
+            tableCell.setColumn(column);
+            tableCell.setRow(rowNumber++);
+        }
+
+        return tableCells;
+    }
+
+    public List<TableCell> getColumn(String header) {
+        Integer position = getHeaderNamesService().getHeaderPosition(header, getColumnHeaderNames());
+        if (position == null) {
+            return new ArrayList<>();
+        }
+
+        return getColumn(position);
+    }
+
+    public TableCell getCell(String header, int row) {
+        Integer position = getHeaderNamesService().getHeaderPosition(header, getColumnHeaderNames());
+        if (position == null) return null;
+
+        return getCell(position, row);
+    }
+
+    public <TDto> TableCell getCell(Class<TDto> dtoClass, PropertyReference<TDto> expression, int row) {
+        String headerName = getHeaderNamesService().getHeaderNameByExpression(dtoClass, expression);
+        var position = getHeaderNamesService().getHeaderPosition(headerName, columnHeaderNames);
+        if (position == null) return null;
+
+        return getCell(position, row);
+    }
+
+    public TableCell getCell(int column, int row) {
+        var cell = getRow(row).getCell(column);
+        cell.setRow(row);
+        cell.setColumn(column);
+
+        return cell;
+    }
+
+    public List<TableCell> getCells(Predicate<TableCell> selector) {
+        var filteredCells = new ArrayList<TableCell>();
+        for (var tableRow : getRows()) {
+            var currentFilteredCells = tableRow.getCells(selector);
+            filteredCells.addAll(currentFilteredCells);
+        }
+
+        return filteredCells;
+    }
+
+    public TableCell getFirstCell(Predicate<TableCell> selector) {
+        return getCells(selector).get(0);
+    }
+
+    public List<TableRow> getRows(Predicate<TableCell> selector) {
+        return getRows()
+                .stream().filter(x -> !x.getCells(selector).isEmpty())
+                .findAny().stream().toList();
+    }
+
+    public TableRow getFirstOrDefaultRow(Predicate<TableCell> selector) {
+        return getRows(selector).stream().findFirst().orElse(null);
+    }
+
+    public TableCell getFirstOrDefaultCell(Predicate<TableCell> selector) {
+        return getCells(selector).stream().findFirst().orElse(null);
+    }
+
+    public <T> void assertTable(List<T> expectedEntities) {
+        assertTable(getRows(), expectedEntities);
+    }
+
+    public List<String> getHeaderNames() {
+        return getHeaderNamesService().getHeaderNames();
+    }
+
+    public <T> List<T> getItems(Class<T> clazz) {
+        return getItems(clazz, getRows());
+    }
+
+    @SuppressWarnings("unchecked")
+    public <T, TRow extends TableRow> void assertTable(List<TRow> rows, List<T> expectedEntities) {
+        var actualEntities = getItems((Class<T>)expectedEntities.get(0).getClass(), rows);
+        if (actualEntities.size() != expectedEntities.size()) {
+            throw new IllegalArgumentException(String.format("The current table rows count %d is different than the specified expected values %d.", actualEntities.size(), expectedEntities.size()));
+        }
+
+        for (int i = 0; i < expectedEntities.size(); i++) {
+            EntitiesAsserter.assertAreEqual(expectedEntities.get(i), actualEntities.get(i));
+        }
+    }
+
+    protected <T, TRow extends TableRow> List<T> getItems(Class<T> clazz, List<TRow> rows) {
+        return rows
+                .stream().filter(row -> !row.getCells().isEmpty())
+                .map(row -> castRow(clazz, row))
+                .toList();
+    }
+
+    <TDto> TDto castRow(Class<TDto> dtoClass, TableRow row) {
+        var fields = dtoClass.getDeclaredFields();
+        var castRow = InstanceFactory.create(dtoClass);
+
+        for (var field : fields) {
+            Predicate<Method> isSetterToField = (x) -> x.getName().toLowerCase().endsWith(field.getName().toLowerCase()) && x.getParameterCount() == 1;
+
+            if (Arrays.stream(dtoClass.getDeclaredMethods()).anyMatch(isSetterToField)) {
+                var headerName = getHeaderNamesService().getHeaderNameByField(field);
+                var headerPosition = getHeaderNamesService().getHeaderPosition(headerName, getColumnHeaderNames());
+
+                if (headerPosition != null) {
+                    var setter = Arrays.stream(dtoClass.getDeclaredMethods()).filter(isSetterToField).toList().get(0);
+                    var elementValue = row.getCells().get(headerPosition).getText();
+                    var parameterType = setter.getParameters()[0].getType();
+
+                    try {
+                        field.setAccessible(true);
+                        setter.invoke(castRow, TypeParser.parse(elementValue, parameterType));
+                    } catch (IllegalAccessException | InvocationTargetException e) {
+                        throw new RuntimeException(e);
+                    }
+                }
+            } else {
+                var exception = "\nCannot cast Table Row data to Java object. Most probably your class is missing setters.\n" +
+                        "Failed while going through field with name:" + field.getName() + "\n";
+                throw new IllegalArgumentException(exception);
+            }
+        }
+
+        return castRow;
+    }
+
+    private void initializeRows() {
+        if (rows == null || rows.isEmpty()) {
+            var rowTag = getTableService().locators().getRowTag();
+            var cellTag = getTableService().locators().getCellTag();
+            var bodyTag = getTableService().locators().getBodyTag();
+            rows = this.createAllByXPath(TableRow.class, String.format("./%s[descendant::%s]|./%s/%s[descendant::%s]", rowTag, cellTag, bodyTag, rowTag, cellTag));
+            int rowNumber = 0;
+            for (var row : rows) {
+                row.setParentTable(this);
+                row.setIndex(++rowNumber);
+            }
+        }
+    }
+
+    public Table setColumn(String headerName) {
+        if (this.getColumnHeaderNames() == null) {
+            (this).setColumnHeaderNames(new ArrayList<>());
+        }
+
+        this.getColumnHeaderNames().add(new HeaderInfo(headerName));
+        return this;
+    }
+
+    public Table setColumns(List<HeaderInfo> headerNames) {
+        if (this.getColumnHeaderNames() == null) {
+            (this).setColumnHeaderNames(new ArrayList<>());
+        }
+
+        this.getColumnHeaderNames().addAll(headerNames);
+        return this;
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableCell.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableCell.java
new file mode 100644
index 00000000..5b3d3fa2
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableCell.java
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.contracts.ComponentHtml;
+import solutions.bellatrix.web.components.contracts.ComponentText;
+
+@Getter @Setter
+public class TableCell extends WebComponent implements ComponentHtml, ComponentText {
+    protected int row;
+    protected int column;
+
+    @Override
+    public String getText() {
+        return defaultGetText();
+    }
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableFooter.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableFooter.java
new file mode 100644
index 00000000..052c32cb
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableFooter.java
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.advanced.services.FooterService;
+import solutions.bellatrix.web.components.advanced.services.HeaderNamesService;
+import solutions.bellatrix.web.components.contracts.ComponentHtml;
+
+public class TableFooter extends WebComponent implements ComponentHtml {
+    private Table parentTable;
+    private HeaderNamesService headerNamesService;
+    private FooterService footerService;
+
+    @Getter @Setter private int index;
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+
+    public void setParentTable(Table table) {
+        parentTable = table;
+        headerNamesService = new HeaderNamesService(parentTable.getTableService().getHeaderRows());
+        footerService = new FooterService(parentTable.getTableService().getFooter());
+    }
+
+    public TableRow getRowByPosition(int position) {
+        var footerRow = this.createByXPath(TableRow.class, "." + HtmlService.getAbsoluteXpath(footerService.getFooterRowByPosition(position)));
+        footerRow.setParentTable(parentTable);
+        footerRow.setIndex(position);
+
+        return footerRow;
+    }
+
+    public TableRow getRowByName(String footerName) {
+        var node = footerService.getFooterRowByName(footerName);
+        int position = footerService.getRows().indexOf(node);
+        var footerRow = this.createByXPath(TableRow.class, "." + HtmlService.getAbsoluteXpath(node));
+        footerRow.setParentTable(parentTable);
+        footerRow.setIndex(position);
+
+        return footerRow;
+    }
+
+    public TableCell getCell(String footerName, String headerName) {
+        var headerPosition = headerNamesService.getHeaderPosition(headerName, parentTable.getColumnHeaderNames());
+        if (headerPosition == null) return null;
+
+        var node = footerService.getFooterRowCellByName(footerName, headerPosition);
+        var footerCell = this.createByXPath(TableCell.class, "." + HtmlService.getAbsoluteXpath(node));
+        footerCell.setRow(footerService.getRows().indexOf(node));
+        footerCell.setColumn(headerPosition);
+
+        return footerCell;
+    }
+
+    public TableCell getCell(int position, String headerName) {
+        var headerPosition = headerNamesService.getHeaderPosition(headerName, parentTable.getColumnHeaderNames());
+        if (headerPosition == null) return null;
+
+        var node = footerService.getFooterRowCellByPosition(position, headerPosition);
+        var footerCell = this.createByXPath(TableCell.class, "." + HtmlService.getAbsoluteXpath(node));
+        footerCell.setRow(position);
+        footerCell.setColumn(headerPosition);
+
+        return footerCell;
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableHeaderRow.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableHeaderRow.java
new file mode 100644
index 00000000..5bcf7f5b
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableHeaderRow.java
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced.table;
+
+import solutions.bellatrix.core.utilities.SingletonFactory;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.advanced.services.TableLocators;
+import solutions.bellatrix.web.components.contracts.ComponentHtml;
+
+import java.util.List;
+
+public class TableHeaderRow extends WebComponent implements ComponentHtml {
+    public List<TableCell> getHeaderCells() {
+        return this.createAllByTag(TableCell.class, locators().getHeaderTag());
+    }
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+
+    private TableLocators locators() {
+        return SingletonFactory.getInstance(TableLocators.class);
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableRow.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableRow.java
new file mode 100644
index 00000000..339b6ef6
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/advanced/table/TableRow.java
@@ -0,0 +1,100 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.advanced.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.core.assertions.EntitiesAsserter;
+import solutions.bellatrix.core.utilities.PropertyReference;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.advanced.services.HeaderNamesService;
+import solutions.bellatrix.web.components.advanced.services.TableLocators;
+import solutions.bellatrix.web.components.contracts.ComponentHtml;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.Predicate;
+
+public class TableRow extends WebComponent implements ComponentHtml {
+    private Table parentTable;
+    private HeaderNamesService headerNamesService;
+
+    @Getter @Setter private int index;
+
+    @Override
+    public String getHtml() {
+        return defaultGetInnerHtmlAttribute();
+    }
+
+    public void setParentTable(Table table) {
+        parentTable = table;
+        headerNamesService = new HeaderNamesService(parentTable.getTableService().getHeaderRows());
+    }
+
+    public TableCell getCell(int column) {
+        if (getTableCells().size() <= column) return null;
+
+        var tableCell = getTableCells().get(column);
+        tableCell.setColumn(column);
+        tableCell.setRow(index);
+
+        return tableCell;
+    }
+
+    public TableCell getCell(String headerName) {
+        int position = headerNamesService.getHeaderPosition(headerName, parentTable.getColumnHeaderNames());
+
+        return getCell(position);
+    }
+
+    public <TDto> TableCell getCell(Class<TDto> dtoClass, PropertyReference<TDto> expression) {
+        var headerName = headerNamesService.getHeaderNameByExpression(dtoClass, expression);
+        return getCell(headerName);
+    }
+
+    public List<TableCell> getCells() {
+        int columnNumber = 0;
+        var tableCells = new ArrayList<TableCell>();
+        for (var tableCell : getTableCells()) {
+            tableCells.add(tableCell);
+            tableCell.setRow(index);
+            tableCell.setColumn(columnNumber++);
+        }
+
+        return tableCells;
+    }
+
+    public List<TableCell> getCells(Predicate<TableCell> selector) {
+        return getCells().stream().filter(selector).toList();
+    }
+
+    public TableCell getFirstOrDefault(Predicate<TableCell> selector) {
+        return getCells(selector).stream().findFirst().orElse(null);
+    }
+
+    public <T> T getItem(Class<T> clazz) {
+        return parentTable.castRow(clazz, this);
+    }
+
+    @SuppressWarnings("unchecked")
+    public <T> void assertRow(T expectedItem) {
+        T actualItem = getItem((Class<T>)expectedItem.getClass());
+
+        EntitiesAsserter.assertAreEqual(expectedItem, actualItem);
+    }
+
+    protected List<TableCell> getTableCells() {
+        return this.createAllByXPath(TableCell.class, "./" + parentTable.getTableService().locators().getCellTag());
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/contracts/ComponentValue.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/contracts/ComponentValue.java
index 866b2620..4e63c19b 100644
--- a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/contracts/ComponentValue.java
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/contracts/ComponentValue.java
@@ -14,29 +14,24 @@
 package solutions.bellatrix.web.components.contracts;
 
 import lombok.SneakyThrows;
-import solutions.bellatrix.core.utilities.SingletonFactory;
 import solutions.bellatrix.web.components.WebComponent;
 import solutions.bellatrix.web.validations.ComponentValidator;
 
-import java.lang.reflect.InvocationTargetException;
-import java.lang.reflect.Method;
-import java.util.function.Supplier;
-
 public interface ComponentValue extends Component {
     String getValue();
 
     @SneakyThrows
-    default void validateTargetIs(String value) {
+    default void validateValueIs(String value) {
         ComponentValidator.defaultValidateAttributeIs((WebComponent)this, this::getValue, value, "value");
     }
 
     @SneakyThrows
-    default void validateTargetIsContains(String value) {
+    default void validateValueContains(String value) {
         ComponentValidator.defaultValidateAttributeContains((WebComponent)this, this::getValue, value, "value");
     }
 
     @SneakyThrows
-    default void validateTargetNotContains(String value) {
+    default void validateValueNotContains(String value) {
         ComponentValidator.defaultValidateAttributeNotContains((WebComponent)this, this::getValue, value, "value");
     }
 }
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/datahandlers/ControlDataHandler.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/datahandlers/ControlDataHandler.java
new file mode 100644
index 00000000..8b064dff
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/datahandlers/ControlDataHandler.java
@@ -0,0 +1,134 @@
+package solutions.bellatrix.web.components.datahandlers;
+
+import lombok.experimental.UtilityClass;
+import solutions.bellatrix.core.utilities.parsing.TypeParser;
+import solutions.bellatrix.web.components.*;
+
+import java.time.LocalDateTime;
+import java.time.temporal.WeekFields;
+import java.util.Locale;
+import java.util.Map;
+import java.util.function.BiConsumer;
+import java.util.function.Function;
+
+@UtilityClass
+@SuppressWarnings({"rawtypes", "unchecked"})
+public class ControlDataHandler {
+    public static <T extends WebComponent> void addReadOnlyControlDataHandler(Class<T> clazz, Function<T, ?> handler) {
+        READONLY_CONTROL_DATA_HANDLERS.put(clazz, handler);
+    }
+
+    public static <T extends WebComponent> void addEditableControlDataHandler(Class<T> clazz, BiConsumer<T, ?> handler) {
+        EDITABLE_CONTROL_DATA_HANDLERS.put(clazz, handler);
+    }
+
+    public static <T extends WebComponent> Object getData(T component) {
+        var dataHandler = READONLY_CONTROL_DATA_HANDLERS.get(component.getClass());
+        if (dataHandler == null) {
+            throw new IllegalArgumentException(String.format("Cannot find proper readonly control data handler for type: %s. Make sure it is registered!", component.getClass()));
+        }
+
+        return dataHandler.apply(component);
+    }
+
+    public static <T extends WebComponent> void setData(T component, Object data) {
+        var dataHandler = EDITABLE_CONTROL_DATA_HANDLERS.get(component.getClass());
+        if (dataHandler == null) {
+            throw new IllegalArgumentException(String.format("Cannot find proper edit control data handler for type: %s. Make sure it is registered!", component.getClass()));
+        }
+
+        dataHandler.accept(component, data);
+    }
+
+    private static Map<Class<? extends WebComponent>, Function> READONLY_CONTROL_DATA_HANDLERS = Map.ofEntries(
+            Map.entry(Anchor.class, (Function<Anchor, String>)(anchor) -> anchor.getText().trim()),
+            Map.entry(Button.class, (Function<Button, String>)(button) -> (!button.getText().trim().isBlank()) ? button.getText().trim() : button.getValue()),
+            Map.entry(CheckBox.class, (Function<CheckBox, Boolean>)CheckBox::isChecked),
+            Map.entry(ColorInput.class, (Function<ColorInput, String>)ColorInput::getColor),
+            Map.entry(DateInput.class, (Function<DateInput, String>)DateInput::getDate),
+            Map.entry(DateTimeInput.class, (Function<DateTimeInput, String>)DateTimeInput::getTime),
+            Map.entry(Div.class, (Function<Div, String>)(div) -> div.getText().trim()),
+            Map.entry(EmailInput.class, (Function<EmailInput, String>)EmailInput::getEmail),
+            Map.entry(Heading.class, (Function<Heading, String>)Heading::getText),
+            Map.entry(Image.class, (Function<Image, String>)Image::getSrc),
+            Map.entry(Label.class, (Function<Label, String>)(label) -> label.getText().trim()),
+            Map.entry(MonthInput.class, (Function<MonthInput, String>)MonthInput::getMonth),
+            Map.entry(NumberInput.class, (Function<NumberInput, Double>)NumberInput::getNumber),
+            Map.entry(Output.class, (Function<Output, String>)(output) -> output.getText().trim()),
+            Map.entry(PasswordInput.class, (Function<PasswordInput, String>)PasswordInput::getPassword),
+            Map.entry(PhoneInput.class, (Function<PhoneInput, String>)PhoneInput::getPhone),
+            Map.entry(RadioButton.class, (Function<RadioButton, Boolean>)RadioButton::isChecked),
+            Map.entry(Range.class, (Function<Range, Double>)Range::getRange),
+            Map.entry(Reset.class, (Function<Reset, String>)(reset) -> reset.getText().trim()),
+            Map.entry(SearchField.class, (Function<SearchField, String>)SearchField::getSearch),
+            Map.entry(Select.class, (Function<Select, String>)(select) -> select.getSelected().getText().trim()),
+            Map.entry(Span.class, (Function<Span, String>)(span) -> span.getText().trim()),
+            Map.entry(TextArea.class, (Function<TextArea, String>)(textArea) -> textArea.getText().trim()),
+            Map.entry(TextInput.class, (Function<TextInput, String>)(textInput) -> textInput.getValue().trim()),
+            Map.entry(TimeInput.class, (Function<TimeInput, String>)TimeInput::getTime),
+            Map.entry(UrlField.class, (Function<UrlField, String>)UrlField::getUrl),
+            Map.entry(WeekInput.class, (Function<WeekInput, String>)WeekInput::getWeek)
+    );
+
+    private static Map<Class<? extends WebComponent>, BiConsumer> EDITABLE_CONTROL_DATA_HANDLERS = Map.ofEntries(
+            Map.entry(CheckBox.class, (BiConsumer<CheckBox, Object>)(checkBox, data) -> {
+                try {
+                    boolean valueToSet = TypeParser.parse(data, Boolean.class);
+                    if (valueToSet) {
+                        if (!checkBox.isChecked()) {
+                            checkBox.check();
+                        }
+                    } else {
+                        if (checkBox.isChecked()) {
+                            checkBox.uncheck();
+                        }
+                    }
+                } catch (IllegalArgumentException exception) {
+                    throw new IllegalArgumentException(String.format("The input string '%s' was not recognized as valid boolean.", data));
+                }
+            }),
+            Map.entry(DateInput.class, (BiConsumer<DateInput, String>)(dateInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                dateInput.setDate(valueToSet.getYear(), valueToSet.getMonthValue(), valueToSet.getDayOfMonth());
+            }),
+            Map.entry(DateTimeInput.class, (BiConsumer<DateTimeInput, String>)(dateTimeInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                dateTimeInput.setTime(valueToSet);
+            }),
+            Map.entry(EmailInput.class, (BiConsumer<EmailInput, String>)EmailInput::setEmail),
+            Map.entry(MonthInput.class, (BiConsumer<MonthInput, String>)(monthInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                monthInput.setMonth(valueToSet.getYear(), valueToSet.getMonthValue());
+            }),
+            Map.entry(PasswordInput.class, (BiConsumer<PasswordInput, String>)PasswordInput::setPassword),
+            Map.entry(PhoneInput.class, (BiConsumer<PhoneInput, String>)PhoneInput::setPhone),
+            Map.entry(RadioButton.class, (BiConsumer<RadioButton, Object>)(radioButton, data) -> {
+                var valueToSet = TypeParser.parse(data, Boolean.class);
+                if (valueToSet) {
+                    if (!radioButton.isChecked()) radioButton.click();
+                } else {
+                    if (radioButton.isChecked()) radioButton.click();
+                }
+            }),
+            Map.entry(Range.class, (BiConsumer<Range, Object>)(range, data) -> {
+                var valueToSet = TypeParser.parse(data, Integer.class);
+                range.setRange(valueToSet);
+            }),
+            Map.entry(SearchField.class, (BiConsumer<SearchField, String>)SearchField::setSearch),
+            Map.entry(Select.class, (BiConsumer<Select, Object>)(select, data) -> {
+                if (data.getClass().equals(String.class)) select.selectByText((String)data);
+                else if (data.getClass().equals(Integer.class)) select.selectByIndex((Integer)data);
+            }),
+            Map.entry(TextArea.class, (BiConsumer<TextArea, String>)TextArea::setText),
+            Map.entry(TextInput.class, (BiConsumer<TextInput, String>)TextInput::setText),
+            Map.entry(TimeInput.class, (BiConsumer<TimeInput, String>)(timeInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                timeInput.setTime(valueToSet.getHour(), valueToSet.getMinute());
+            }),
+            Map.entry(UrlField.class, (BiConsumer<UrlField, String>)UrlField::setUrl),
+            Map.entry(WeekInput.class, (BiConsumer<WeekInput, String>)(weekInput, data) -> {
+                var valueToSet = TypeParser.parse(data, LocalDateTime.class);
+                weekInput.setWeek(valueToSet.getYear(), valueToSet.get(WeekFields.of(Locale.getDefault()).weekOfWeekBasedYear()));
+            })
+    );
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/shadowdom/ShadowDomService.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/shadowdom/ShadowDomService.java
new file mode 100644
index 00000000..4d33ba48
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/shadowdom/ShadowDomService.java
@@ -0,0 +1,298 @@
+/*
+ * Copyright 2024 Automate The Planet Ltd.
+ * Author: Miriam Kyoseva
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.shadowdom;
+
+import lombok.experimental.UtilityClass;
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Element;
+import org.jsoup.select.Elements;
+import org.openqa.selenium.By;
+import solutions.bellatrix.core.utilities.HtmlService;
+import solutions.bellatrix.core.utilities.InstanceFactory;
+import solutions.bellatrix.core.utilities.Ref;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.findstrategies.CssFindStrategy;
+import solutions.bellatrix.web.findstrategies.FindStrategy;
+import solutions.bellatrix.web.findstrategies.ShadowXPathFindStrategy;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Stack;
+import java.util.stream.Collectors;
+
+@UtilityClass
+public class ShadowDomService {
+    private static final String CHILD_COMBINATOR = " > ";
+    private static final String SHADOW_ROOT_TAG = "shadow-root";
+
+    public static String getShadowHtml(ShadowRoot shadowRoot) {
+        var function = String.format("""
+                return (function(element) {
+                           function clone(element, tag) {
+                               let cloneElement;
+                             	if (element instanceof ShadowRoot && !tag) {
+                                 cloneElement = new DocumentFragment();
+                               } else if (tag) {
+                                 cloneElement = document.createElement(tag);
+                               }
+                               else {
+                                 cloneElement = element.cloneNode();
+                                 if (element.firstChild && element.firstChild.nodeType === 3) {
+                                   cloneElement.appendChild(element.firstChild.cloneNode());
+                                 }
+                               }
+
+                               if (element.shadowRoot) {
+                                   cloneElement.appendChild(clone(element.shadowRoot, "%s"));
+                               }
+
+                               if (element.children) {
+                                   for (const child of element.children) {
+                                       cloneElement.appendChild(clone(child));
+                                   }
+                               }
+
+                               return cloneElement;
+                           }
+                       
+                        		var temporaryDiv = document.createElement("div");
+                         	temporaryDiv.appendChild(clone(element.shadowRoot, undefined));
+                           return temporaryDiv.innerHTML;
+                       })(arguments[0]);
+                """, SHADOW_ROOT_TAG);
+
+        return shadowRoot.getJavaScriptService().execute(function, shadowRoot);
+    }
+
+    public static <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent createInShadowContext(WebComponent parentComponent, Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        var shadowRoots = getShadowRootAncestors(parentComponent);
+
+        ShadowRoot initialShadowRoot = shadowRoots.pop();
+
+        var locatorBuilder = new StringBuilder();
+        while (!shadowRoots.isEmpty()) {
+            locatorBuilder.append(shadowRoots.pop().getFindStrategy().getValue()).append(CHILD_COMBINATOR + SHADOW_ROOT_TAG);
+        }
+        CssFindStrategy fullLocator = new CssFindStrategy(locatorBuilder.toString() + parentComponent.getFindStrategy().getValue());
+
+        var parentElement = getElement(initialShadowRoot, fullLocator);
+
+        var newElement = getElement(parentElement, findStrategy);
+
+        return createComponent(componentClass, initialShadowRoot, newElement, findStrategy);
+    }
+
+    public static <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> createAllInShadowContext(WebComponent parentComponent, Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        List<TComponent> componentList = new ArrayList<>();
+
+        var shadowRoots = getShadowRootAncestors(parentComponent);
+
+        ShadowRoot initialShadowRoot = shadowRoots.pop();
+
+        var locatorBuilder = new StringBuilder();
+        while (!shadowRoots.isEmpty()) {
+            locatorBuilder.append(shadowRoots.pop().getFindStrategy().getValue()).append(CHILD_COMBINATOR + SHADOW_ROOT_TAG);
+        }
+        CssFindStrategy fullLocator = new CssFindStrategy(locatorBuilder.toString() + parentComponent.getFindStrategy().getValue());
+
+        var parentElement = getElement(initialShadowRoot, fullLocator);
+
+        for (var element : getElements(parentElement, findStrategy)) {
+            componentList.add(createComponent(componentClass, initialShadowRoot, element, findStrategy));
+        }
+
+        return componentList;
+    }
+
+    public static <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent createFromShadowRoot(ShadowRoot shadowRoot, Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        return createComponent(componentClass, shadowRoot, getElement(shadowRoot, findStrategy), findStrategy);
+    }
+
+    public static <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> createAllFromShadowRoot(ShadowRoot shadowRoot, Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        List<TComponent> componentList = new ArrayList<>();
+
+        for (var element : getElements(shadowRoot, findStrategy)) {
+            componentList.add(createComponent(componentClass, shadowRoot, element, findStrategy));
+        }
+
+        return componentList;
+    }
+
+    private static <TComponent extends WebComponent> TComponent createComponent(Class<TComponent> clazz, ShadowRoot initialShadowRoot, Element jsoupNode, FindStrategy findStrategy) {
+        var component = InstanceFactory.create(clazz);
+
+        // passed as a reference, the inside value will change:
+        Ref<ShadowRoot> shadowRoot = new Ref<>(initialShadowRoot);
+
+        // create missing shadow roots between the element and the initial shadow root;
+        // chain them;
+        // return the element's css relative to the innermost shadow root
+        var jsoupNodeCss = buildMissingShadowRootsAndReturnElementRelativeCss(shadowRoot, jsoupNode);
+
+        if (findStrategy.convert() instanceof By.ByXPath) {
+            component.setFindStrategy(new ShadowXPathFindStrategy(findStrategy.getValue(), jsoupNodeCss));
+        } else {
+            component.setFindStrategy(new CssFindStrategy(jsoupNodeCss));
+        }
+
+        component.setParentComponent(shadowRoot.value);
+        component.setParentWrappedElement(shadowRoot.value.getWrappedElement());
+
+        return component;
+    }
+
+    private static String buildMissingShadowRootsAndReturnElementRelativeCss(Ref<ShadowRoot> shadowRoot, Element jsoupNode) {
+        var nestedShadowRootStack = new Stack<Element>();
+
+        // initial absolute css, relative to the outermost shadow root element
+        var jsoupNodeCss = HtmlService.convertAbsoluteXpathToCss(HtmlService.getAbsoluteXpath(jsoupNode)).split(CHILD_COMBINATOR);
+
+        // if there are <shadow-root> elements found between the outermost shadow root and the element
+        // populate the Stack<Element>
+        if (tryFindNestedShadowRoots(jsoupNode, nestedShadowRootStack)) {
+            String[] previousCss = null;
+
+            while (!nestedShadowRootStack.isEmpty()) {
+                var parent = nestedShadowRootStack.pop();
+                var css = HtmlService.convertAbsoluteXpathToCss(HtmlService.getAbsoluteXpath(parent)).split(CHILD_COMBINATOR);
+                if (previousCss != null) {
+                    css = removeRedundantSteps(css, previousCss);
+                }
+
+
+                shadowRoot.value = createNestedShadowRoot(shadowRoot.value, cleanFromShadowRootTags(css));
+
+                jsoupNodeCss = removeRedundantSteps(jsoupNodeCss, css);
+
+                previousCss = HtmlService.convertAbsoluteXpathToCss(HtmlService.getAbsoluteXpath(parent)).split(CHILD_COMBINATOR);
+            }
+        }
+
+        return String.join(CHILD_COMBINATOR, cleanFromShadowRootTags(jsoupNodeCss));
+    }
+
+    private static String[] removeRedundantSteps(String[] elementCss, String[] currentCss) {
+        return Arrays.stream(elementCss)
+                .skip(currentCss.length)
+                .toArray(String[]::new);
+    }
+
+    private static String[] cleanFromShadowRootTags(String[] css) {
+        return Arrays.stream(css)
+                .filter(x -> !x.contains(SHADOW_ROOT_TAG))
+                .toArray(String[]::new);
+    }
+
+    private static ShadowRoot createNestedShadowRoot(ShadowRoot parent, String[] locator) {
+        var finalLocator = String.join(CHILD_COMBINATOR, cleanFromShadowRootTags(locator));
+
+        ShadowRoot nestedShadowRoot = InstanceFactory.create(ShadowRoot.class);
+        nestedShadowRoot.setFindStrategy(new CssFindStrategy(finalLocator));
+        nestedShadowRoot.setParentComponent(parent);
+        nestedShadowRoot.setParentWrappedElement(parent.shadowRoot());
+
+        return nestedShadowRoot;
+    }
+
+    private static boolean tryFindNestedShadowRoots(Element jsoupElement, Stack<Element> parentShadowRootStack) {
+        var parent = jsoupElement.parent();
+
+        while (parent != null) {
+            if (parent.tagName().equals(SHADOW_ROOT_TAG)) {
+                parentShadowRootStack.push(parent);
+            }
+
+            parent = parent.parent();
+        }
+
+        return !parentShadowRootStack.isEmpty();
+    }
+
+    /**
+     * Find from root element in shadow root's html.
+     */
+    private static Element getElement(ShadowRoot component, FindStrategy findStrategy) {
+        var doc = Jsoup.parse(component.getHtml());
+
+        return getElement(doc, findStrategy);
+    }
+
+    /**
+     * Find relatively from element.
+     */
+    private static Element getElement(Element element, FindStrategy findStrategy) {
+        return getElements(element, findStrategy).get(0);
+    }
+
+    /**
+     * Find from root element in shadow root's html.
+     */
+    private static List<Element> getElements(ShadowRoot component, FindStrategy findStrategy) {
+        var doc = Jsoup.parse(component.getHtml());
+
+        return getElements(doc, findStrategy);
+    }
+
+    /**
+     * Find relatively from element.
+     */
+    private static List<Element> getElements(Element element, FindStrategy findStrategy) {
+        Elements foundElements = null;
+        var strategyType = findStrategy.convert();
+        var strategyValue = findStrategy.getValue();
+
+        if (strategyType instanceof By.ByCssSelector) {
+            foundElements = element.select(strategyValue);
+        }
+        if (findStrategy.convert() instanceof By.ByXPath) {
+            foundElements = element.selectXpath(strategyValue);
+        }
+        if (findStrategy.convert() instanceof By.ById) {
+            foundElements = element.select(String.format("[id='%s']", strategyValue));
+        }
+        if (strategyType instanceof By.ByName) {
+            foundElements = element.select(String.format("[name='%s']", strategyValue));
+        }
+        if (strategyType instanceof By.ByClassName) {
+            foundElements = element.select(String.format("[class='%s']", strategyValue));
+        }
+        if (strategyType instanceof By.ByLinkText) {
+            foundElements = element.selectXpath(String.format("//a[text()='%s']", strategyValue));
+        }
+        if (strategyType instanceof By.ByTagName) {
+            foundElements = element.select(strategyValue);
+        }
+        if (strategyType instanceof By.ByPartialLinkText) {
+            foundElements = element.selectXpath(String.format("//a[contains(text(), '%s')]", strategyValue));
+        }
+
+        return foundElements;
+    }
+
+    private static Stack<ShadowRoot> getShadowRootAncestors(WebComponent initialComponent) {
+        var component = initialComponent.getParentComponent();
+
+        var shadowRoots = new Stack<ShadowRoot>();
+
+        while (component != null) {
+            if (component instanceof ShadowRoot) {
+                shadowRoots.push((ShadowRoot)component);
+            }
+            component = component.getParentComponent();
+        }
+
+        return shadowRoots;
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/shadowdom/ShadowHost.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/shadowdom/ShadowHost.java
new file mode 100644
index 00000000..c3b0912f
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/shadowdom/ShadowHost.java
@@ -0,0 +1,16 @@
+package solutions.bellatrix.web.components.shadowdom;
+
+import org.openqa.selenium.*;
+import org.openqa.selenium.remote.RemoteWebElement;
+
+import java.util.List;
+
+public class ShadowHost extends RemoteWebElement {
+    public List<WebElement> findElements(By by) {
+        return this.getShadowRoot().findElements(by);
+    }
+
+    public WebElement findElement(By by) {
+        return this.getShadowRoot().findElement(by);
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/components/shadowdom/ShadowRoot.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/shadowdom/ShadowRoot.java
new file mode 100644
index 00000000..38286f0b
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/components/shadowdom/ShadowRoot.java
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required createBy applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.components.shadowdom;
+
+import org.openqa.selenium.NoSuchElementException;
+import org.openqa.selenium.StaleElementReferenceException;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.remote.RemoteWebElement;
+import solutions.bellatrix.core.utilities.ConverterService;
+import solutions.bellatrix.web.components.ComponentActionEventArgs;
+import solutions.bellatrix.web.components.WebComponent;
+import solutions.bellatrix.web.components.contracts.ComponentHtml;
+import solutions.bellatrix.web.findstrategies.FindStrategy;
+
+import java.util.List;
+
+public class ShadowRoot extends WebComponent implements ComponentHtml {
+    /**
+     * Returns the innerHTML of the shadowRoot of the shadow host.
+     */
+    public String getHtml() {
+        return ShadowDomService.getShadowHtml(this);
+    }
+
+    @Override
+    protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy> TComponent create(Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        CREATING_ELEMENT.broadcast(new ComponentActionEventArgs(this));
+        findElement();
+        var component = ShadowDomService.createFromShadowRoot(this, componentClass, findStrategy);
+        CREATED_ELEMENT.broadcast(new ComponentActionEventArgs(this));
+        return component;
+    }
+
+    @Override
+    protected <TComponent extends WebComponent, TFindStrategy extends FindStrategy> List<TComponent> createAll(Class<TComponent> componentClass, TFindStrategy findStrategy) {
+        CREATING_ELEMENTS.broadcast(new ComponentActionEventArgs(this));
+        findElement();
+        List<TComponent> componentList = ShadowDomService.createAllFromShadowRoot(this, componentClass, findStrategy);
+        CREATED_ELEMENTS.broadcast(new ComponentActionEventArgs(this));
+        return componentList;
+    }
+
+    public ShadowHost getWrappedElement() {
+        return ConverterService.convertToClass(super.getWrappedElement(), ShadowHost.class);
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/findstrategies/ShadowXPathFindStrategy.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/findstrategies/ShadowXPathFindStrategy.java
new file mode 100644
index 00000000..13f41591
--- /dev/null
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/findstrategies/ShadowXPathFindStrategy.java
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package solutions.bellatrix.web.findstrategies;
+
+import lombok.Getter;
+import org.openqa.selenium.By;
+
+
+/**
+ * Strategy that uses CSS to locate elements, but saves the original XPath for debugging purposes. <br>
+ */
+@Getter
+public class ShadowXPathFindStrategy extends FindStrategy {
+    String originalXpath;
+    public ShadowXPathFindStrategy(String xpath, String css) {
+        super(css);
+        originalXpath = xpath;
+    }
+
+    @Override
+    public By convert() {
+        return By.cssSelector(getValue());
+    }
+
+    @Override
+    public String toString() {
+        return String.format("xpath = %s ; css = %s", originalXpath, getValue());
+    }
+}
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/infrastructure/junit/WebTest.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/infrastructure/junit/WebTest.java
index a8849929..efbaa2b8 100644
--- a/bellatrix.web/src/main/java/solutions/bellatrix/web/infrastructure/junit/WebTest.java
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/infrastructure/junit/WebTest.java
@@ -16,6 +16,7 @@
 import org.junit.jupiter.api.extension.ExtendWith;
 import solutions.bellatrix.core.plugins.junit.BaseTest;
 import solutions.bellatrix.core.plugins.junit.TestResultWatcher;
+import solutions.bellatrix.core.utilities.SingletonFactory;
 import solutions.bellatrix.web.components.listeners.BddConsoleLogging;
 import solutions.bellatrix.web.components.listeners.BddToastNotificationsLogging;
 import solutions.bellatrix.web.components.listeners.HighlightElements;
@@ -29,7 +30,7 @@
 public class WebTest extends BaseTest {
 
     public App app() {
-        return new App();
+        return SingletonFactory.getInstance(App.class);
     }
 
     @Override
diff --git a/bellatrix.web/src/main/java/solutions/bellatrix/web/infrastructure/testng/WebTest.java b/bellatrix.web/src/main/java/solutions/bellatrix/web/infrastructure/testng/WebTest.java
index 1d6d82e6..4655c95b 100644
--- a/bellatrix.web/src/main/java/solutions/bellatrix/web/infrastructure/testng/WebTest.java
+++ b/bellatrix.web/src/main/java/solutions/bellatrix/web/infrastructure/testng/WebTest.java
@@ -14,6 +14,7 @@
 package solutions.bellatrix.web.infrastructure.testng;
 
 import solutions.bellatrix.core.plugins.testng.BaseTest;
+import solutions.bellatrix.core.utilities.SingletonFactory;
 import solutions.bellatrix.web.components.listeners.BddConsoleLogging;
 import solutions.bellatrix.web.components.listeners.HighlightElements;
 import solutions.bellatrix.web.infrastructure.BrowserLifecyclePlugin;
@@ -25,7 +26,7 @@
 public class WebTest extends BaseTest {
 
     public App app() {
-        return new App();
+        return SingletonFactory.getInstance(App.class);
     }
 
     @Override
diff --git a/bellatrix.android.tests/pom.xml b/framework-tests/bellatrix.android.tests/pom.xml
similarity index 96%
rename from bellatrix.android.tests/pom.xml
rename to framework-tests/bellatrix.android.tests/pom.xml
index 5d91e43c..8bb08ad4 100644
--- a/bellatrix.android.tests/pom.xml
+++ b/framework-tests/bellatrix.android.tests/pom.xml
@@ -18,6 +18,7 @@
         <artifactId>bellatrix</artifactId>
         <groupId>solutions.bellatrix</groupId>
         <version>1.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
     </parent>
 
     <artifactId>bellatrix.android.tests</artifactId>
diff --git a/bellatrix.android.tests/src/main/resources/application.properties b/framework-tests/bellatrix.android.tests/src/main/resources/application.properties
similarity index 100%
rename from bellatrix.android.tests/src/main/resources/application.properties
rename to framework-tests/bellatrix.android.tests/src/main/resources/application.properties
diff --git a/bellatrix.android.tests/src/main/resources/testFrameworkSettings.dev.json b/framework-tests/bellatrix.android.tests/src/main/resources/testFrameworkSettings.dev.json
similarity index 100%
rename from bellatrix.android.tests/src/main/resources/testFrameworkSettings.dev.json
rename to framework-tests/bellatrix.android.tests/src/main/resources/testFrameworkSettings.dev.json
diff --git a/bellatrix.android.tests/src/main/resources/testFrameworkSettings.qa.json b/framework-tests/bellatrix.android.tests/src/main/resources/testFrameworkSettings.qa.json
similarity index 100%
rename from bellatrix.android.tests/src/main/resources/testFrameworkSettings.qa.json
rename to framework-tests/bellatrix.android.tests/src/main/resources/testFrameworkSettings.qa.json
diff --git a/bellatrix.android.tests/src/test/java/junit/ProductPurchaseTests.java b/framework-tests/bellatrix.android.tests/src/test/java/junit/ProductPurchaseTests.java
similarity index 100%
rename from bellatrix.android.tests/src/test/java/junit/ProductPurchaseTests.java
rename to framework-tests/bellatrix.android.tests/src/test/java/junit/ProductPurchaseTests.java
diff --git a/bellatrix.android.tests/src/test/java/testng/ProductPurchaseTests.java b/framework-tests/bellatrix.android.tests/src/test/java/testng/ProductPurchaseTests.java
similarity index 100%
rename from bellatrix.android.tests/src/test/java/testng/ProductPurchaseTests.java
rename to framework-tests/bellatrix.android.tests/src/test/java/testng/ProductPurchaseTests.java
diff --git a/bellatrix.desktop.tests/pom.xml b/framework-tests/bellatrix.desktop.tests/pom.xml
similarity index 96%
rename from bellatrix.desktop.tests/pom.xml
rename to framework-tests/bellatrix.desktop.tests/pom.xml
index 4d00e5c2..54ccde8e 100644
--- a/bellatrix.desktop.tests/pom.xml
+++ b/framework-tests/bellatrix.desktop.tests/pom.xml
@@ -18,6 +18,7 @@
         <artifactId>bellatrix</artifactId>
         <groupId>solutions.bellatrix</groupId>
         <version>1.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
     </parent>
 
     <artifactId>bellatrix.desktop.tests</artifactId>
diff --git a/bellatrix.desktop.tests/src/main/resources/application.properties b/framework-tests/bellatrix.desktop.tests/src/main/resources/application.properties
similarity index 100%
rename from bellatrix.desktop.tests/src/main/resources/application.properties
rename to framework-tests/bellatrix.desktop.tests/src/main/resources/application.properties
diff --git a/bellatrix.desktop.tests/src/main/resources/testFrameworkSettings.dev.json b/framework-tests/bellatrix.desktop.tests/src/main/resources/testFrameworkSettings.dev.json
similarity index 100%
rename from bellatrix.desktop.tests/src/main/resources/testFrameworkSettings.dev.json
rename to framework-tests/bellatrix.desktop.tests/src/main/resources/testFrameworkSettings.dev.json
diff --git a/bellatrix.desktop.tests/src/main/resources/testFrameworkSettings.qa.json b/framework-tests/bellatrix.desktop.tests/src/main/resources/testFrameworkSettings.qa.json
similarity index 100%
rename from bellatrix.desktop.tests/src/main/resources/testFrameworkSettings.qa.json
rename to framework-tests/bellatrix.desktop.tests/src/main/resources/testFrameworkSettings.qa.json
diff --git a/bellatrix.desktop.tests/src/test/java/junit/CalculatorTests.java b/framework-tests/bellatrix.desktop.tests/src/test/java/junit/CalculatorTests.java
similarity index 100%
rename from bellatrix.desktop.tests/src/test/java/junit/CalculatorTests.java
rename to framework-tests/bellatrix.desktop.tests/src/test/java/junit/CalculatorTests.java
diff --git a/bellatrix.desktop.tests/src/test/java/testng/CalculatorTests.java b/framework-tests/bellatrix.desktop.tests/src/test/java/testng/CalculatorTests.java
similarity index 100%
rename from bellatrix.desktop.tests/src/test/java/testng/CalculatorTests.java
rename to framework-tests/bellatrix.desktop.tests/src/test/java/testng/CalculatorTests.java
diff --git a/bellatrix.ios.tests/pom.xml b/framework-tests/bellatrix.ios.tests/pom.xml
similarity index 96%
rename from bellatrix.ios.tests/pom.xml
rename to framework-tests/bellatrix.ios.tests/pom.xml
index 29906462..784cabb2 100644
--- a/bellatrix.ios.tests/pom.xml
+++ b/framework-tests/bellatrix.ios.tests/pom.xml
@@ -18,6 +18,7 @@
         <artifactId>bellatrix</artifactId>
         <groupId>solutions.bellatrix</groupId>
         <version>1.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
     </parent>
 
     <artifactId>bellatrix.ios.tests</artifactId>
diff --git a/bellatrix.ios.tests/src/main/resources/application.properties b/framework-tests/bellatrix.ios.tests/src/main/resources/application.properties
similarity index 100%
rename from bellatrix.ios.tests/src/main/resources/application.properties
rename to framework-tests/bellatrix.ios.tests/src/main/resources/application.properties
diff --git a/bellatrix.ios.tests/src/main/resources/testFrameworkSettings.dev.json b/framework-tests/bellatrix.ios.tests/src/main/resources/testFrameworkSettings.dev.json
similarity index 100%
rename from bellatrix.ios.tests/src/main/resources/testFrameworkSettings.dev.json
rename to framework-tests/bellatrix.ios.tests/src/main/resources/testFrameworkSettings.dev.json
diff --git a/bellatrix.ios.tests/src/main/resources/testFrameworkSettings.qa.json b/framework-tests/bellatrix.ios.tests/src/main/resources/testFrameworkSettings.qa.json
similarity index 100%
rename from bellatrix.ios.tests/src/main/resources/testFrameworkSettings.qa.json
rename to framework-tests/bellatrix.ios.tests/src/main/resources/testFrameworkSettings.qa.json
diff --git a/bellatrix.ios.tests/src/test/java/junit/ProductPurchaseTests.java b/framework-tests/bellatrix.ios.tests/src/test/java/junit/ProductPurchaseTests.java
similarity index 100%
rename from bellatrix.ios.tests/src/test/java/junit/ProductPurchaseTests.java
rename to framework-tests/bellatrix.ios.tests/src/test/java/junit/ProductPurchaseTests.java
diff --git a/bellatrix.ios.tests/src/test/java/testng/ProductPurchaseTests.java b/framework-tests/bellatrix.ios.tests/src/test/java/testng/ProductPurchaseTests.java
similarity index 100%
rename from bellatrix.ios.tests/src/test/java/testng/ProductPurchaseTests.java
rename to framework-tests/bellatrix.ios.tests/src/test/java/testng/ProductPurchaseTests.java
diff --git a/framework-tests/bellatrix.playwright.tests/pom.xml b/framework-tests/bellatrix.playwright.tests/pom.xml
new file mode 100644
index 00000000..ffb5a46e
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/pom.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>solutions.bellatrix</groupId>
+        <artifactId>bellatrix</artifactId>
+        <version>1.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
+    </parent>
+
+    <groupId>org.example</groupId>
+    <artifactId>bellatrix.playwright.tests</artifactId>
+
+    <dependencies>
+        <dependency>
+            <groupId>solutions.bellatrix</groupId>
+            <artifactId>bellatrix.playwright</artifactId>
+            <version>1.0-SNAPSHOT</version>
+            <scope>compile</scope>
+        </dependency>
+    </dependencies>
+
+</project>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/breadcrumbsection/Asserts.java b/framework-tests/bellatrix.playwright.tests/src/main/java/breadcrumbsection/Asserts.java
new file mode 100644
index 00000000..6b60b853
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/breadcrumbsection/Asserts.java
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package breadcrumbsection;
+
+import solutions.bellatrix.playwright.pages.PageAsserts;
+
+public class Asserts extends PageAsserts<Map> {
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/breadcrumbsection/BreadcrumbSection.java b/framework-tests/bellatrix.playwright.tests/src/main/java/breadcrumbsection/BreadcrumbSection.java
new file mode 100644
index 00000000..2c6f1f01
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/breadcrumbsection/BreadcrumbSection.java
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package breadcrumbsection;
+
+import solutions.bellatrix.playwright.components.Anchor;
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.pages.WebSection;
+
+public class BreadcrumbSection extends WebSection<Map, Asserts> {
+
+    private WebComponent breadcrumb() {
+        return create().byCss(WebComponent.class, "woocommerce-breadcrumb");
+    }
+
+    // TODO: add create methods to component
+    public void openBreadcrumbItem(String itemToOpen) {
+        breadcrumb().create().byLinkText(Anchor.class, itemToOpen).click();
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/breadcrumbsection/Map.java b/framework-tests/bellatrix.playwright.tests/src/main/java/breadcrumbsection/Map.java
new file mode 100644
index 00000000..b3ef12cd
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/breadcrumbsection/Map.java
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package breadcrumbsection;
+
+import solutions.bellatrix.playwright.components.WebComponent;
+import solutions.bellatrix.playwright.pages.PageMap;
+
+public class Map extends PageMap {
+    public WebComponent breadcrumb() {
+        return create().byCss(WebComponent.class, "woocommerce-breadcrumb");
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/cartinfosection/Asserts.java b/framework-tests/bellatrix.playwright.tests/src/main/java/cartinfosection/Asserts.java
new file mode 100644
index 00000000..0bd2fd3d
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/cartinfosection/Asserts.java
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package cartinfosection;
+
+import solutions.bellatrix.playwright.pages.PageAsserts;
+
+public class Asserts extends PageAsserts<Map> {
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/cartinfosection/CartInfoSection.java b/framework-tests/bellatrix.playwright.tests/src/main/java/cartinfosection/CartInfoSection.java
new file mode 100644
index 00000000..db8aba25
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/cartinfosection/CartInfoSection.java
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package cartinfosection;
+
+import solutions.bellatrix.playwright.pages.WebSection;
+
+public class CartInfoSection extends WebSection<Map, Asserts> {
+    public String getCurrentAmount() {
+        return map().cartAmount().getText();
+    }
+
+    public void openCart() {
+        map().cartIcon().click();
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/cartinfosection/Map.java b/framework-tests/bellatrix.playwright.tests/src/main/java/cartinfosection/Map.java
new file mode 100644
index 00000000..5c99529f
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/cartinfosection/Map.java
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package cartinfosection;
+
+import solutions.bellatrix.playwright.components.Anchor;
+import solutions.bellatrix.playwright.components.Span;
+import solutions.bellatrix.playwright.pages.PageMap;
+
+public class Map extends PageMap {
+    public Anchor cartIcon() {
+        return create().byClass(Anchor.class, "cart-contents");
+    }
+
+    public Span cartAmount() {
+        return create().byClass(Span.class, "amount");
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/cartpage/Asserts.java b/framework-tests/bellatrix.playwright.tests/src/main/java/cartpage/Asserts.java
new file mode 100644
index 00000000..8557d4e9
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/cartpage/Asserts.java
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package cartpage;
+
+import solutions.bellatrix.playwright.pages.PageAsserts;
+
+public class Asserts extends PageAsserts<Map> {
+    public void couponAppliedSuccessfully() {
+        map().messageAlert().validateTextIs("Coupon code applied successfully.");
+    }
+
+    public void totalPrice(String expectedPrice) {
+        map().totalSpan().validateTextIs(expectedPrice);
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/cartpage/CartPage.java b/framework-tests/bellatrix.playwright.tests/src/main/java/cartpage/CartPage.java
new file mode 100644
index 00000000..7a1c4cab
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/cartpage/CartPage.java
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package cartpage;
+
+import solutions.bellatrix.playwright.pages.WebPage;
+
+public class CartPage extends WebPage<Map, Asserts> {
+    @Override
+    protected String getUrl() {
+        return "http://demos.bellatrix.solutions/cart/";
+    }
+
+    @Override
+    protected void waitForPageLoad() {
+        map().couponCodeTextField().toExist().waitToBe();
+    }
+
+    public void applyCoupon(String coupon) {
+        map().couponCodeTextField().setText(coupon);
+        map().applyCouponButton().click();
+        browser().waitForAjax();
+    }
+
+    public void increaseProductQuantity(int newQuantity) {
+        map().quantityBox().setText(String.valueOf(newQuantity));
+        map().updateCart().click();
+        browser().waitForAjax();
+    }
+
+    public void clickProceedToCheckout() {
+        map().proceedToCheckout().click();
+        browser().waitUntilPageLoadsCompletely();
+    }
+
+    public String getTotal() {
+        return map().totalSpan().getText();
+    }
+
+    public String getMessageNotification() {
+        return map().messageAlert().getText();
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/cartpage/Map.java b/framework-tests/bellatrix.playwright.tests/src/main/java/cartpage/Map.java
new file mode 100644
index 00000000..dbe45dfc
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/cartpage/Map.java
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package cartpage;
+
+import solutions.bellatrix.playwright.components.Button;
+import solutions.bellatrix.playwright.components.Div;
+import solutions.bellatrix.playwright.components.Span;
+import solutions.bellatrix.playwright.components.TextInput;
+import solutions.bellatrix.playwright.pages.PageMap;
+
+public class Map extends PageMap {
+    public TextInput couponCodeTextField() {
+        return create().byId(TextInput.class, "coupon_code");
+    }
+
+    public Button applyCouponButton() {
+        return create().byCss(Button.class, "[value*='Apply coupon']");
+    }
+
+    public TextInput quantityBox() {
+        return create().byCss(TextInput.class, "[class*='input-text qty text']");
+    }
+
+    public Button updateCart() {
+        return create().byCss(Button.class, "[value*='Update cart']");
+    }
+
+    public Div messageAlert() {
+        return create().byCss(Div.class, "[class*='woocommerce-message']");
+    }
+
+    public Span totalSpan() {
+        return create().byXpath(Span.class, "//*[@class='order-total']//span");
+    }
+
+    public Button proceedToCheckout() {
+        return create().byCss(Button.class, "[class*='checkout-button button alt wc-forward']");
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/Asserts.java b/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/Asserts.java
new file mode 100644
index 00000000..0a4445a1
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/Asserts.java
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package checkoutpage;
+
+import solutions.bellatrix.playwright.pages.PageAsserts;
+
+public class Asserts extends PageAsserts<Map> {
+    public void orderReceived() {
+        map().receivedMessage().validateTextIs("Order received");
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/CheckoutPage.java b/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/CheckoutPage.java
new file mode 100644
index 00000000..c96eacea
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/CheckoutPage.java
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package checkoutpage;
+
+import solutions.bellatrix.playwright.pages.WebPage;
+
+public class CheckoutPage extends WebPage<Map, Asserts> {
+    @Override
+    protected String getUrl() {
+        return "http://demos.bellatrix.solutions/checkout/";
+    }
+
+    public void fillBillingInfo(PurchaseInfo purchaseInfo) {
+        map().billingFirstName().setText(purchaseInfo.getFirstName());
+        map().billingLastName().setText(purchaseInfo.getLastName());
+        map().billingCompany().setText(purchaseInfo.getCompany());
+        map().billingCountryWrapper().click();
+        map().billingCountryFilter().setText(purchaseInfo.getCountry());
+        map().getCountryOptionByName(purchaseInfo.getCountry()).click();
+        map().billingAddress1().setText(purchaseInfo.getAddress1());
+        map().billingAddress2().setText(purchaseInfo.getAddress2());
+        map().billingCity().setText(purchaseInfo.getCity());
+        map().billingZip().setText(purchaseInfo.getZip());
+        map().billingPhone().setText(purchaseInfo.getPhone());
+        map().billingEmail().setText(purchaseInfo.getEmail());
+        if (purchaseInfo.getShouldCreateAccount()) {
+            map().createAccountCheckBox().check();
+        }
+
+        if (purchaseInfo.getShouldCheckPayment()) {
+            map().checkPaymentsRadioButton().click();
+        }
+
+        map().placeOrderButton().click();
+        browser().waitForAjax();
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/Map.java b/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/Map.java
new file mode 100644
index 00000000..7c37ac5f
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/Map.java
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package checkoutpage;
+
+import solutions.bellatrix.playwright.components.*;
+import solutions.bellatrix.playwright.pages.PageMap;
+
+public class Map extends PageMap {
+    public TextInput billingFirstName() {
+        return create().byId(TextInput.class, "billing_first_name");
+    }
+
+    public TextInput billingLastName() {
+        return create().byId(TextInput.class, "billing_last_name");
+    }
+
+    public TextInput billingCompany() {
+        return create().byId(TextInput.class, "billing_company");
+    }
+
+    public Button billingCountryWrapper() {
+        return create().byId(Button.class, "select2-billing_country-container");
+    }
+
+    public TextInput billingCountryFilter() {
+        return create().byClass(TextInput.class, "select2-search__field");
+    }
+
+    public TextInput billingAddress1() {
+        return create().byId(TextInput.class, "billing_address_1");
+    }
+
+    public TextInput billingAddress2() {
+        return create().byId(TextInput.class, "billing_address_2");
+    }
+
+    public TextInput billingCity() {
+        return create().byId(TextInput.class, "billing_city");
+    }
+
+    public TextInput billingZip() {
+        return create().byId(TextInput.class, "billing_postcode");
+    }
+
+    public TextInput billingPhone() {
+        return create().byId(TextInput.class, "billing_phone");
+    }
+
+    public TextInput billingEmail() {
+        return create().byId(TextInput.class, "billing_email");
+    }
+
+    public CheckBox createAccountCheckBox() {
+        return create().byId(CheckBox.class, "createaccount");
+    }
+
+    public RadioButton checkPaymentsRadioButton() {
+        return create().byCss(RadioButton.class, "[for*='payment_method_cheque']");
+    }
+
+    public Button placeOrderButton() {
+        return create().byId(Button.class, "place_order");
+    }
+
+    public Heading receivedMessage() {
+        return create().byXpath(Heading.class, "//h1");
+    }
+
+    public Button getCountryOptionByName(String countryName) {
+        return create().byXpath(Button.class, String.format("//li[contains(text(),'%s')]", countryName));
+    }
+}
diff --git a/bellatrix.web.tests/src/main/java/checkoutpage/PurchaseInfo.java b/framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/PurchaseInfo.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/checkoutpage/PurchaseInfo.java
rename to framework-tests/bellatrix.playwright.tests/src/main/java/checkoutpage/PurchaseInfo.java
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/configuration/TestPagesSettings.java b/framework-tests/bellatrix.playwright.tests/src/main/java/configuration/TestPagesSettings.java
new file mode 100644
index 00000000..74856b91
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/configuration/TestPagesSettings.java
@@ -0,0 +1,41 @@
+package configuration;
+
+import lombok.Data;
+
+@Data
+public class TestPagesSettings {
+    private String anchorLocalPage;
+    private String buttonLocalPage;
+    private String checkBoxLocalPage;
+    private String colorLocalPage;
+    private String dateLocalPage;
+    private String dateTimeLocalLocalPage;
+    private String gridLocalPage;
+    private String divLocalPage;
+    private String elementLocalPage;
+    private String emailLocalPage;
+    private String headingLocalPage;
+    private String imageLocalPage;
+    private String labelLocalPage;
+    private String monthLocalPage;
+    private String numberLocalPage;
+    private String optionLocalPage;
+    private String outputLocalPage;
+    private String passwordLocalPage;
+    private String phoneLocalPage;
+    private String progressLocalPage;
+    private String radioLocalPage;
+    private String rangeLocalPage;
+    private String resetLocalPage;
+    private String searchLocalPage;
+    private String selectLocalPage;
+    private String spanLocalPage;
+    private String textAreaLocalPage;
+    private String textFieldLocalPage;
+    private String timeLocalPage;
+    private String urlLocalPage;
+    private String weekLocalPage;
+    private String tableLocalPage;
+    private String layoutPricingPage;
+    private String shadowDomPage;
+}
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/mainmenusection/Asserts.java b/framework-tests/bellatrix.playwright.tests/src/main/java/mainmenusection/Asserts.java
new file mode 100644
index 00000000..b8173aee
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/mainmenusection/Asserts.java
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package mainmenusection;
+
+import solutions.bellatrix.playwright.pages.PageAsserts;
+
+public class Asserts extends PageAsserts<Map> {
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/mainmenusection/MainMenuSection.java b/framework-tests/bellatrix.playwright.tests/src/main/java/mainmenusection/MainMenuSection.java
new file mode 100644
index 00000000..1c1b5e0f
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/mainmenusection/MainMenuSection.java
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package mainmenusection;
+
+import solutions.bellatrix.playwright.pages.WebSection;
+
+public class MainMenuSection extends WebSection<Map, Asserts> {
+    public void openHomePage() {
+        map().homeLink().click();
+    }
+
+    public void openBlogPage() {
+        map().blogLink().click();
+    }
+
+    public void openMyAccountPage() {
+        map().myAccountLink().click();
+    }
+
+    public void openPromotionsPage() {
+        map().promotionsLink().click();
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/mainmenusection/Map.java b/framework-tests/bellatrix.playwright.tests/src/main/java/mainmenusection/Map.java
new file mode 100644
index 00000000..3e5fd7ae
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/mainmenusection/Map.java
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package mainmenusection;
+
+import solutions.bellatrix.playwright.components.Anchor;
+import solutions.bellatrix.playwright.pages.PageMap;
+
+public class Map extends PageMap {
+
+    public Anchor homeLink() {
+        return create().byLinkText(Anchor.class, "Home");
+    }
+
+    public Anchor blogLink() {
+        return create().byLinkText(Anchor.class, "Blog");
+    }
+
+    public Anchor cartLink() {
+        return create().byLinkText(Anchor.class, "Cart");
+    }
+
+    public Anchor checkoutLink() {
+        return create().byLinkText(Anchor.class, "Checkout");
+    }
+
+    public Anchor myAccountLink() {
+        return create().byLinkText(Anchor.class, "My Account");
+    }
+
+    public Anchor promotionsLink() {
+        return create().byLinkText(Anchor.class, "Promotions");
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/mainpage/Asserts.java b/framework-tests/bellatrix.playwright.tests/src/main/java/mainpage/Asserts.java
new file mode 100644
index 00000000..d3a497a0
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/mainpage/Asserts.java
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package mainpage;
+
+import solutions.bellatrix.playwright.pages.PageAsserts;
+
+public class Asserts extends PageAsserts<Map> {
+    public void productBoxLink(String name, String expectedLink) {
+        map().getProductBoxByName(name).validateHrefIs(expectedLink);
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/mainpage/MainPage.java b/framework-tests/bellatrix.playwright.tests/src/main/java/mainpage/MainPage.java
new file mode 100644
index 00000000..8a01c7ff
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/mainpage/MainPage.java
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package mainpage;
+
+import solutions.bellatrix.playwright.pages.WebPage;
+
+public class MainPage extends WebPage<Map, Asserts> {
+
+    @Override
+    protected String getUrl() {
+        return "http://demos.bellatrix.solutions/";
+    }
+
+    @Override
+    protected void waitForPageLoad() {
+//        map().addToCartFalcon9().toExist().waitToBe();
+    }
+
+    public void addRocketToShoppingCart(String rocketName) {
+        open();
+        map().getProductAddToCartButtonByName(rocketName).click();
+        map().viewCartButton().click();
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/mainpage/Map.java b/framework-tests/bellatrix.playwright.tests/src/main/java/mainpage/Map.java
new file mode 100644
index 00000000..de35e718
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/mainpage/Map.java
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package mainpage;
+
+import solutions.bellatrix.playwright.components.Anchor;
+import solutions.bellatrix.playwright.components.Button;
+import solutions.bellatrix.playwright.pages.PageMap;
+
+public class Map extends PageMap {
+
+    public Anchor addToCartFalcon9() {
+        return create().byCss(Anchor.class, "[data-product_id*='28']");
+    }
+
+    public Button viewCartButton() {
+        return create().byCss(Button.class, "[class*='added_to_cart wc-forward']");
+    }
+
+    public Anchor getProductBoxByName(String name) {
+        return create().byXpath(Anchor.class, String.format("//h2[text()='%s']/parent::a[1]", name));
+    }
+
+    public Button getProductAddToCartButtonByName(String name) {
+        return create().byXpath(Button.class, String.format("//h2[text()='%s']/parent::a[1]/following-sibling::a[1]", name));
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/searchsection/Asserts.java b/framework-tests/bellatrix.playwright.tests/src/main/java/searchsection/Asserts.java
new file mode 100644
index 00000000..1cd607a3
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/searchsection/Asserts.java
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package searchsection;
+
+import solutions.bellatrix.playwright.pages.PageAsserts;
+
+public class Asserts extends PageAsserts<Map> {
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/searchsection/Map.java b/framework-tests/bellatrix.playwright.tests/src/main/java/searchsection/Map.java
new file mode 100644
index 00000000..21d6236c
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/searchsection/Map.java
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package searchsection;
+
+import solutions.bellatrix.playwright.components.TextInput;
+import solutions.bellatrix.playwright.pages.PageMap;
+
+public class Map extends PageMap {
+    public TextInput searchField() {
+        return create().byId(TextInput.class, "woocommerce-product-search-field-0");
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/java/searchsection/SearchSection.java b/framework-tests/bellatrix.playwright.tests/src/main/java/searchsection/SearchSection.java
new file mode 100644
index 00000000..6b0494d7
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/java/searchsection/SearchSection.java
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package searchsection;
+
+import solutions.bellatrix.playwright.pages.WebSection;
+
+public class SearchSection extends WebSection<Map, Asserts> {
+    public void searchForItem(String searchText) {
+        map().searchField().setText(searchText);
+    }
+}
diff --git a/bellatrix.web.tests/src/main/resources/application.properties b/framework-tests/bellatrix.playwright.tests/src/main/resources/application.properties
similarity index 100%
rename from bellatrix.web.tests/src/main/resources/application.properties
rename to framework-tests/bellatrix.playwright.tests/src/main/resources/application.properties
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testFrameworkSettings.dev.json b/framework-tests/bellatrix.playwright.tests/src/main/resources/testFrameworkSettings.dev.json
new file mode 100644
index 00000000..1ab43a8b
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testFrameworkSettings.dev.json
@@ -0,0 +1,149 @@
+{
+  "troubleshootingSettings": {
+    "debugInformationEnabled": "true"
+  },
+  "webSettings": {
+    "baseUrl": "http://demos.bellatrix.solutions/",
+    "executionType": "regular",
+    "defaultBrowser": "chrome",
+    "defaultLifeCycle": "restart everytime time",
+    "artificialDelayBeforeAction": "0",
+    "automaticallyScrollToVisible": "false",
+    "waitUntilReadyOnElementFound": "false",
+    "waitForAngular": "false",
+    "shouldHighlightElements": "true",
+    "shouldCaptureHttpTraffic": "false",
+    "toastNotificationBddLogging": "true",
+    "screenshotsOnFailEnabled": "false",
+    "screenshotsSaveLocation": "${user.home}/BELLATRIX/Screenshots",
+    "videosOnFailEnabled": "false",
+    "videosSaveLocation": "${user.home}/BELLATRIX/Videos",
+    "notificationToastTimeout": "3000",
+    "timeoutSettings": {
+      "elementWaitTimeout": "30",
+      "pageLoadTimeout": "30",
+      "scriptTimeout": "1",
+      "waitForAjaxTimeout": "30",
+      "sleepInterval": "1",
+      "waitUntilReadyTimeout": "30",
+      "waitForJavaScriptAnimationsTimeout": "30",
+      "waitForAngularTimeout": "30",
+      "waitForPartialUrl": "30",
+      "validationsTimeout": "30",
+      "elementToBeVisibleTimeout": "30",
+      "elementToExistTimeout": "30",
+      "elementToNotExistTimeout": "30",
+      "elementToBeClickableTimeout": "30",
+      "elementNotToBeVisibleTimeout": "30",
+      "elementToHaveContentTimeout": "15"
+    },
+    "gridSettings": [
+      {
+        "providerName": "saucelabs",
+        "url": "http://ondemand.saucelabs.com:80/wd/hub",
+        "arguments": [
+          {
+            "screenResolution": "1280x800",
+            "recordVideo": "true",
+            "recordScreenshots": "true",
+            "username": "myUserName",
+            "accessKey": "myPass",
+            "name": "bellatrix_run"
+          }
+        ]
+      },
+      {
+        "providerName": "browserstack",
+        "url": "http://hub-cloud.browserstack.com/wd/hub/",
+        "arguments": [
+          {
+            "resolution": "1280x800",
+            "browserstack.video": "true",
+            "browserstack.networkLogs": "true",
+            "browserstack.debug": "true",
+            "browserstack.console": "errors",
+            "browserstack.user": "myUserName",
+            "browserstack.key": "myPass",
+            "build": "bellatrix_run"
+          }
+        ]
+      },
+      {
+        "providerName": "crossbrowsertesting",
+        "url": "http://hub.crossbrowsertesting.com:80/wd/hub",
+        "arguments": [
+          {
+            "screen_resolution": "1280x800",
+            "record_video": "true",
+            "record_network": "true",
+            "username": "myUserName",
+            "password": "myPass",
+            "name": "bellatrix_run"
+          }
+        ]
+      },
+      {
+        "providerName": "selenoid",
+        "url": "http://127.0.0.1:4444/wd/hub",
+        "arguments": [
+          {
+            "screenResolution": "1280x800",
+            "enableVNC": "true",
+            "enableVideo": "true",
+            "enableLog": "true",
+            "name": "bellatrix_run"
+          }
+        ]
+      },
+      {
+        "providerName": "grid",
+        "url": "http://127.0.0.1:4444/wd/hub",
+        "arguments": [
+          {
+            "name": "bellatrix_run"
+          }
+        ]
+      }
+    ]
+  },
+  "urlSettings": {
+    "shopUrl": "http://demos.bellatrix.solutions/cart/",
+    "accountUrl": "http://demos.bellatrix.solutions/account/"
+  },
+  "testPagesSettings": {
+    "anchorLocalPage": "testpages/anchor/anchor.html",
+    "buttonLocalPage": "testpages/button/button.html",
+    "checkBoxLocalPage": "testpages/checkbox/checkBox.html",
+    "colorLocalPage": "testpages/color/color.html",
+    "dateLocalPage": "testpages/date/date.html",
+    "dateTimeLocalLocalPage": "testpages/datetimelocal/dateTimeLocal.html",
+    "divLocalPage": "testpages/div/div.html",
+    "elementLocalPage": "testpages/url/url.html",
+    "emailLocalPage": "testpages/email/email.html",
+    "headingLocalPage": "testpages/heading/heading.html",
+    "imageLocalPage": "testpages/image/image.html",
+    "labelLocalPage": "testpages/label/label.html",
+    "monthLocalPage": "testpages/month/month.html",
+    "numberLocalPage": "testpages/number/number.html",
+    "optionLocalPage": "testpages/select/select.html",
+    "outputLocalPage": "testpages/output/output.html",
+    "passwordLocalPage": "testpages/password/password.html",
+    "phoneLocalPage": "testpages/phone/phone.html",
+    "progressLocalPage": "testpages/progress/progress.html",
+    "radioLocalPage": "testpages/radio/radio.html",
+    "rangeLocalPage": "testpages/range/range.html",
+    "resetLocalPage": "testpages/reset/reset.html",
+    "searchLocalPage": "testpages/search/search.html",
+    "selectLocalPage": "testpages/select/select.html",
+    "spanLocalPage": "testpages/span/span.html",
+    "textAreaLocalPage": "testpages/textarea/textArea.html",
+    "textFieldLocalPage": "testpages/text/text.html",
+    "timeLocalPage": "testpages/time/time.html",
+    "urlLocalPage": "testpages/url/url.html",
+    "weekLocalPage": "testpages/week/week.html",
+    "tableLocalPage": "testpages/table/table.html",
+    "layoutPricingPage": "testpages/layout/pricing.html",
+    "gridLocalPage": "testpages/grid/grid.html",
+    "shadowDomPage": "testpages/shadowdom/shadowdom.html"
+  }
+}
\ No newline at end of file
diff --git a/bellatrix.web.tests/src/main/resources/testFrameworkSettings.qa.json b/framework-tests/bellatrix.playwright.tests/src/main/resources/testFrameworkSettings.qa.json
similarity index 65%
rename from bellatrix.web.tests/src/main/resources/testFrameworkSettings.qa.json
rename to framework-tests/bellatrix.playwright.tests/src/main/resources/testFrameworkSettings.qa.json
index af33dffd..2c46b262 100644
--- a/bellatrix.web.tests/src/main/resources/testFrameworkSettings.qa.json
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testFrameworkSettings.qa.json
@@ -109,5 +109,40 @@
   "urlSettings": {
     "shopUrl": "http://demos.bellatrix.solutions/cart/",
     "accountUrl": "http://demos.bellatrix.solutions/account/"
+  },
+  "testPagesSettings": {
+    "anchorLocalPage": "testpages/anchor/anchor.html",
+    "buttonLocalPage": "testpages/button/button.html",
+    "checkBoxLocalPage": "testpages/checkbox/checkBox.html",
+    "colorLocalPage": "testpages/color/color.html",
+    "dateLocalPage": "testpages/date/date.html",
+    "dateTimeLocalLocalPage": "testpages/datetimelocal/dateTimeLocal.html",
+    "divLocalPage": "testpages/div/div.html",
+    "elementLocalPage": "testpages/url/url.html",
+    "emailLocalPage": "testpages/email/email.html",
+    "headingLocalPage": "testpages/heading/heading.html",
+    "imageLocalPage": "testpages/image/image.html",
+    "labelLocalPage": "testpages/label/label.html",
+    "monthLocalPage": "testpages/month/month.html",
+    "numberLocalPage": "testpages/number/number.html",
+    "optionLocalPage": "testpages/select/select.html",
+    "outputLocalPage": "testpages/output/output.html",
+    "passwordLocalPage": "testpages/password/password.html",
+    "phoneLocalPage": "testpages/phone/phone.html",
+    "progressLocalPage": "testpages/progress/progress.html",
+    "radioLocalPage": "testpages/radio/radio.html",
+    "rangeLocalPage": "testpages/range/range.html",
+    "resetLocalPage": "testpages/reset/reset.html",
+    "searchLocalPage": "testpages/search/search.html",
+    "selectLocalPage": "testpages/select/select.html",
+    "spanLocalPage": "testpages/span/span.html",
+    "textAreaLocalPage": "testpages/textarea/textArea.html",
+    "textFieldLocalPage": "testpages/text/text.html",
+    "timeLocalPage": "testpages/time/time.html",
+    "urlLocalPage": "testpages/url/url.html",
+    "weekLocalPage": "testpages/week/week.html",
+    "tableLocalPage": "testpages/table/table.html",
+    "layoutPricingPage": "testpages/layout/pricing.html",
+    "gridLocalPage": "testpages/grid/grid.html"
   }
 }
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/anchor/anchor.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/anchor/anchor.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/anchor/anchor.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/anchor/anchor.html
new file mode 100644
index 00000000..75f07f91
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/anchor/anchor.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="anchor.css">
+</head>
+<body>
+    <label for="myAnchor">Click</label>
+    <a id="myAnchor" href="https://automatetheplanet.com" target="_self">Automate The Planet</a>
+
+    <br>
+    <br>
+    <label for="myAnchor1">Hover</label>
+    <a id="myAnchor1" href="automatetheplanet.com" onmouseover="this.style.color='red';">Automate The Planet</a>
+
+    <br>
+    <br>
+    <label for="myAnchor2">Focus</label>
+    <a id="myAnchor2" href="automatetheplanet.com" onfocus="this.style.color='blue';">Automate The Planet</a>
+
+    <br>
+    <br>
+    <label for="myAnchor4">Inner HTML</label>
+    <a id="myAnchor4" href="automatetheplanet.com"><button name="button">Click me</button></a>
+
+    <br>
+    <br>
+    <label for="myAnchor5">Rel</label>
+    <a id="myAnchor5" rel="canonical">Automate The Planet</a>
+
+    <br>
+    <br>
+    <label for="myAnchor6">No Text</label>
+    <a id="myAnchor6" rel="canonical"></a>
+
+
+    <script type="text/javascript" src="anchor.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/anchor/anchor.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/anchor/anchor.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/button/button.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/button/button.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/button/button.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/button/button.html
new file mode 100644
index 00000000..61853a1e
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/button/button.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="button.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="myButton">Providing default options Input Button</label>
+    <input type="button" id="myButton" name="start" value="Start">
+
+    <br>
+    <br>
+    <label for="myButton1">Test Hover Input Button</label>
+    <input type="button" id="myButton1" name="start" value="Start" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myButton2">Test Focus Input Button</label>
+    <input type="button" id="myButton2" name="start" value="Start" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myButton3">Test IsDisabled Input Button</label>
+    <input type="button" id="myButton3" name="start" value="Start" disabled>
+
+
+    <br>
+    <br>
+    <label for="myButton4">Providing default options Input Submit</label>
+    <input type="submit" id="myButton4" name="start" value="Start">
+
+    <br>
+    <br>
+    <label for="myButton5">Test Hover Input Submit</label>
+    <input type="submit" id="myButton5" name="start" value="Start" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myButton6">Test Focus Input Submit</label>
+    <input type="submit" id="myButton6" name="start" value="Start" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myButton7">Test IsDisabled Input Submit</label>
+    <input type="submit" id="myButton7" name="start" value="Start" disabled>
+
+    <br>
+    <br>
+    <label for="myButton8">Providing default options Button</label>
+    <button type="button" id="myButton8" name="start" value="Start">Start</button>
+
+    <br>
+    <br>
+    <label for="myButton9">Test Hover Input Submit</label>
+    <button type="button" id="myButton9" name="start" value="Start" onmouseover="this.style.color='red';">Start</button>
+
+    <br>
+    <br>
+    <label for="myButton10">Test Focus Input Submit</label>
+    <button type="button" id="myButton10" name="start" value="Start" onfocus="this.style.color='blue';">Start</button>
+
+    <br>
+    <br>
+    <label for="myButton11">Test IsDisabled Input Submit</label>
+    <button type="button" id="myButton11" name="start" value="Start" disabled>Start</button>
+
+
+
+    <script type="text/javascript" src="button.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/button/button.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/button/button.js
new file mode 100644
index 00000000..91b2d45b
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/button/button.js
@@ -0,0 +1,25 @@
+var buttons = document.querySelectorAll('input');
+for (var i = 0; i < buttons.length; i++) {
+    var self = buttons[i];
+
+    self.addEventListener('click', function (event) {
+        if (this.value === 'Start') {
+            this.value = 'Stop';
+        } else {
+            this.value = 'Start';
+        }
+    }, false);
+}
+
+var buttons1 = document.querySelectorAll('button');
+for (var i = 0; i < buttons1.length; i++) {
+    var self = buttons1[i];
+
+    self.addEventListener('click', function (event) {
+        if (this.innerHTML === 'Start') {
+            this.innerHTML = 'Stop';
+        } else {
+            this.innerHTML = 'Start';
+        }
+    }, false);
+}
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/checkbox/checkBox.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/checkbox/checkBox.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/checkbox/checkBox.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/checkbox/checkBox.html
new file mode 100644
index 00000000..e537ec44
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/checkbox/checkBox.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="checkBox.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="myCheckbox">Providing default options</label>
+    <input type="checkbox" id="myCheckbox" name="subscribe" value="newsletter" checked>
+
+    <br>
+    <br>
+    <label for="myCheckbox1">Test Hover</label>
+    <input type="checkbox" id="myCheckbox1" checked onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myCheckbox2">Test Focus</label>
+    <input type="checkbox" id="myCheckbox2" name="subscribe" value="newsletter" checked onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myCheckbox3">Test IsDisabled</label>
+    <input type="checkbox" id="myCheckbox3" name="subscribe" value="newsletter" disabled>
+
+    <script type="text/javascript" src="checkBox.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/checkbox/checkBox.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/checkbox/checkBox.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/checkbox/checkBox.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/color/color.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/color/color.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/color/color.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/color/color.html
new file mode 100644
index 00000000..4356f368
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/color/color.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="color.css">
+</head>
+<body>
+    <label for="myColor">Default</label>
+    <input id="myColor" name="myColor" type="color" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myColor2">Default Value</label>
+    <input id="myColor2" name="myColor2" type="color" value="#f00030">
+
+    <br>
+    <br>
+    <label for="myColor3">Autocomplete= ON</label>
+    <input id="myColor3" name="myColor3" type="color" value="#ff0000" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myColor4">Autocomplete= OFF</label>
+    <input id="myColor4" name="myColor4" type="color" value="#ff0000" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myColor6">Required Set</label>
+    <input id="myColor6" name="myColor6" type="color" value="#ff0000" required>
+
+    <br>
+    <br>
+    <label for="myColor7">Test Hover</label>
+    <input id="myColor7" name="myColor7" type="color" value="#ff0000" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myColor8">Test Focus</label>
+    <input id="myColor8" name="myColor8" type="color" value="#ff0000" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myColor9">Disabled Set</label>
+    <input id="myColor9" name="myColor9" type="color" value="#ff0000" disabled>
+
+    <br>
+    <br>
+    <label for="myColor10">List</label>
+    <input id="myColor10" name="myColor10" type="color" value="#ff0000" list="tickmarks">
+
+    <script type="text/javascript" src="color.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/color/color.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/color/color.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/color/color.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/date/date.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/date/date.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/date/date.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/date/date.html
new file mode 100644
index 00000000..8da304e1
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/date/date.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="date.css">
+</head>
+<body>
+    <label for="myDate">Default</label>
+    <input id="myDate" name="myDate" type="date" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myDate1">Test Max Min Step</label>
+    <input id="myDate1" name="myDate1" type="date" step="2" min="1900-01-01" max="2032-12-01">
+
+    <br>
+    <br>
+    <label for="myDate2">Default Value</label>
+    <input id="myDate2" name="myDate2" type="date" step="2" min="1900-01-01" max="2032-12-01" value="2017-08-07">
+
+    <br>
+    <br>
+    <label for="myDate3">Autocomplete= ON</label>
+    <input id="myDate3" name="myDate3" type="date" step="2" min="1900-01-01" max="2032-12-01" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myDate4">Autocomplete= OFF</label>
+    <input id="myDate4" name="myDate4" type="date" step="2" min="1900-01-01" max="2032-12-01" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myDate5">Readonly Set</label>
+    <input id="myDate5" name="myDate5" type="date" step="2" min="1900-01-01" max="2032-12-01" readonly>
+
+    <br>
+    <br>
+    <label for="myDate6">Required Set</label>
+    <input id="myDate6" name="myDate6" type="date" step="2" min="1900-01-01" max="2032-12-01" required>
+
+    <br>
+    <br>
+    <label for="myDate7">Test Hover</label>
+    <input id="myDate7" name="myDate7" type="date" step="2" min="1900-01-01" max="2032-12-01" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myDate8">Test Focus</label>
+    <input id="myDate8" name="myDate8" type="date" step="2" min="1900-01-01" max="2032-12-01" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myDate9">Disabled Set</label>
+    <input id="myDate9" name="myDate9" type="date" step="2" min="1900-01-01" max="2032-12-01" disabled>
+
+    <script type="text/javascript" src="date.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/date/date.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/date/date.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/date/date.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.html
new file mode 100644
index 00000000..33453388
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="dateTimeLocal.css">
+</head>
+<body>
+    <label for="myTime">Default</label>
+    <input id="myTime" name="myTime" type="datetime-local" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myTime1">Test Max Min Step</label>
+    <input id="myTime1" name="myTime1" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30">
+
+    <br>
+    <br>
+    <label for="myTime2">Default Value</label>
+    <input id="myTime2" name="myTime2" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" value="2017-06-01T08:30">
+
+    <br>
+    <br>
+    <label for="myTime3">Autocomplete= ON</label>
+    <input id="myTime3" name="myTime3" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myTime4">Autocomplete= OFF</label>
+    <input id="myTime4" name="myTime4" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myTime5">Readonly Set</label>
+    <input id="myTime5" name="myTime5" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" readonly>
+
+    <br>
+    <br>
+    <label for="myTime6">Required Set</label>
+    <input id="myTime6" name="myTime6" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" required>
+
+    <br>
+    <br>
+    <label for="myTime7">Test Hover</label>
+    <input id="myTime7" name="myTime7" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myTime8">Test Focus</label>
+    <input id="myTime8" name="myTime8" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myTime9">Disabled Set</label>
+    <input id="myTime9" name="myTime9" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:302017-06-01T08:30" disabled>
+
+    <script type="text/javascript" src="dateTimeLocal.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/div/div.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/div/div.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/div/div.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/div/div.html
new file mode 100644
index 00000000..06d1abcc
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/div/div.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="div.css">
+</head>
+<body>
+    <label for="myDiv">Hover</label>
+    <div id="myDiv" onmouseover="this.style.color='red';">Bellatrix</div>
+
+    <br>
+    <br>
+    <label for="myDiv1">InnerText</label>
+    <div id="myDiv1" onmouseover="this.style.color='red';">Automate The Planet</div>
+
+    <br>
+    <br>
+    <label for="myDiv2">InnerHtml</label>
+    <div id="myDiv2" onmouseover="this.style.color='red';"><button name="button">Click me</button></div>
+
+    <br>
+    <br>
+    <label for="myDiv3">No Content</label>
+    <div id="myDiv3" onmouseover="this.style.color='red';"></div>
+
+
+    <script type="text/javascript" src="div.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/div/div.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/div/div.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/email/email.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/email/email.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/email/email.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/email/email.html
new file mode 100644
index 00000000..ddb63f08
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/email/email.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="email.css">
+</head>
+<body>
+    <label for="myEmail">Placeholders</label>
+    <input id="myEmail" name="myEmail" type="email" placeholder="your email term goes here" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myEmail1">Physical input element size</label>
+    <input id="myEmail1" name="myEmail" type="email" size="30">
+
+    <br>
+    <br>
+    <label for="myEmail2">Element value length</label>
+    <input id="myEmail2" name="myEmail" type="email" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myEmail3">Providing default options</label>
+    <input id="myEmail3" name="myEmail" type="email" value="aangelov@bellatrix.solutions">
+
+    <br>
+    <br>
+    <label for="myEmail4">Autocomplete= ON</label>
+    <input id="myEmail4" name="myEmail" type="email" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myEmail5">Autocomplete= OFF</label>
+    <input id="myEmail5" name="myEmail" type="email" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myEmail6">Readonly Set</label>
+    <input id="myEmail6" name="myEmail" type="email" readonly>
+
+    <br>
+    <br>
+    <label for="myEmail7">Required Set</label>
+    <input id="myEmail7" name="myEmail" type="email" required>
+
+    <br>
+    <br>
+    <label for="myEmail8">Test Hover</label>
+    <input id="myEmail8" name="myEmail" type="email" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myEmail9">Test Focus</label>
+    <input id="myEmail9" name="myEmail" type="email" onfocus="this.style.color='blue';">
+
+    <div id="myEmail10Wrapper">
+        <br>
+        <br>
+        <label for="myEmail10">Test Disabled</label>
+        <input id="myEmail10" name="myEmail" type="email" disabled>
+    </div>
+
+    <script type="text/javascript" src="email.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/email/email.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/email/email.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/email/email.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/grid/Grid.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/grid/Grid.html
new file mode 100644
index 00000000..14af3c9f
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/grid/Grid.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Grid Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <style>
+        .grid th {
+            text-align: center;
+            vertical-align: central;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <h2>Grid Example</h2>
+        <h4>In the case of data displayed in a grid, we not onlly have to verify data in cells, but to perform actions in specific cells that contain buttons, inputs or other types of controls.</h4>
+        <p>The .table-hover class enables a hover state on table rows:</p>
+        
+        <div class="grid" id="sampleGrid">
+            <table class="table table-hover table-bordered">
+                <thead>
+                    <tr>
+                        <th scope="col" rowspan="2">Order</th>
+                        <th scope="col" rowspan="2">Firstname</th>
+                        <th scope="col" rowspan="2">Lastname</th>
+                        <th scope="col" colspan="2">Email</th>
+                        <th scope="col" rowspan="2">Actions</th>
+                    </tr>
+                    <tr>
+                        <th scope="col">Personal</th>
+                        <th scope="col">Business</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr scope="row">
+                        <td><input type="text" value="0" /></td>
+                        <td><b>John</b></td>
+                        <td>Doe</td>
+                        <td>john.doe@gmail.com</td>
+                        <td>jdoe@corp.com</td>
+                        <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
+                    </tr>
+                    <tr scope="row">
+                        <td><input type="text" value="1" /></td>
+                        <td>Mary</td>
+                        <td>Moe</td>
+                        <td>mary@hotmail.com</td>
+                        <td></td>
+                        <td><input type="button" value="Delete" onclick="deleteRow(this)" /></td>
+                    </tr>
+                    <tr scope="row">
+                        <td><input type="text" value="2" /></td>
+                        <td>July</td>
+                        <td>Dooley</td>
+                        <td></td>
+                        <td>july@mscorp.com</td>
+                        <td><input type="button" value="Delete" onclick="deleteRow(this)" /></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <script>
+        const inputs = document.querySelectorAll('input');
+
+        inputs.forEach(input => {
+          input.addEventListener('input', function(event) {
+            input.setAttribute('value', event.target.value);
+          });
+        });
+    </script>
+</body>
+</html>
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/heading/heading.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/heading/heading.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/heading/heading.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/heading/heading.html
new file mode 100644
index 00000000..71e9a11e
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/heading/heading.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="heading.css">
+</head>
+<body>
+    <label for="myHeading">Hover</label>
+    <h1 id="myHeading" onmouseover="this.style.color='red';">Automate The Planet</h1>
+
+    <br>
+    <br>
+    <label for="myHeading2">Focus</label>
+    <h1 id="myHeading2" onfocus="this.style.color='blue';">Automate The Planet</h1>
+
+    <br>
+    <br>
+    <label for="myHeading3">Inner HTML</label>
+    <h1 id="myHeading3"><button name="button">Click me</button></h1>
+
+    <br>
+    <br>
+    <label for="myHeading4">No Text</label>
+    <h1 id="myHeading4"></h1>
+
+    <script type="text/javascript" src="heading.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/heading/heading.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/heading/heading.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/image/image.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/image/image.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/image/image.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/image/image.html
new file mode 100644
index 00000000..f1c64411
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/image/image.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="image.css">
+</head>
+<body>
+    <label for="myImage">Alternative Text</label>
+    <img id="myImage" src="https://bellatrix.solutions/assets/uploads/2017/09/logo.png" alt="MDN">
+
+    <br>
+    <br>
+    <label for="myImage1">SrcSet List</label>
+    <img id="myImage1" src="https://bellatrix.solutions/assets/uploads/2017/09/logo.png" alt="MDN" srcset="mdn-logo-HD.png 2x">
+
+    <br>
+    <br>
+    <label for="myImage2">Sizes List</label>
+    <img id="myImage2" src="clock-demo-thumb-200.png" alt="Clock" srcset="clock-demo-thumb-200.png 200w,clock-demo-thumb-400.png 400w" sizes="(min-width: 600px) 200px, 50vw">
+
+    <br>
+    <br>
+    <label for="myImage3">Width Height LongDesc</label>
+    <img id="myImage3" src="https://bellatrix.solutions/assets/uploads/2017/09/logo.png" alt="MDN" longdesc="Bellatrix is so cool like a rocket." height="20" width="200">
+
+    <br>
+    <br>
+    <label for="myImage4">Hover</label>
+    <img id="myImage4" src="https://bellatrix.solutions/assets/uploads/2017/09/logo.png" onmouseover="this.className= 'hovered';">
+    <script type="text/javascript" src="image.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/image/image.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/image/image.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/label/label.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/label/label.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/label/label.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/label/label.html
new file mode 100644
index 00000000..14b5492f
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/label/label.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="label.css">
+</head>
+<body>
+    <label for="myLabel" id="myLabel" onmouseover="this.style.color='red';">Hover</label>
+
+    <br>
+    <br>
+    <label id="myLabel1"><button name="button">Click me</button></label>
+
+    <br>
+    <br>
+    <label id="myLabel2"></label>
+
+    <script type="text/javascript" src="label.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/label/laberl.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/label/laberl.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/bootstrap-solid.svg b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/bootstrap-solid.svg
new file mode 100644
index 00000000..b624a024
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/bootstrap-solid.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
+  <g sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+    <path fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
+    <path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
+  </g>
+</svg>
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/bootstrap.min.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/bootstrap.min.css
new file mode 100644
index 00000000..6561b6f4
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/bootstrap.min.css
@@ -0,0 +1,7 @@
+/*!
+ * Bootstrap v4.0.0 (https://getbootstrap.com)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote-footer{display:block;font-size:80%;color:#6c757d}.blockquote-footer::before{content:"\2014 \00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#6c757d}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}code{font-size:87.5%;color:#e83e8c;word-break:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#212529}pre code{font-size:inherit;color:inherit;word-break:normal}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-sm-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-sm-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-sm-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-sm-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-sm-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-sm-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-sm-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-sm-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-sm-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-sm-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-sm-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-sm-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-sm-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-sm-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-sm-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-md-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-md-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-md-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-md-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-md-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-md-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-md-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-md-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-md-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-md-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-md-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-md-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-md-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-md-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-md-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-lg-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-lg-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-lg-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-lg-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-lg-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-lg-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-lg-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-lg-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-lg-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-lg-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-lg-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-lg-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-lg-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-lg-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-lg-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-xl-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-xl-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-xl-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-xl-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-xl-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-xl-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-xl-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-xl-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-xl-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-xl-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-xl-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-xl-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-xl-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-xl-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-xl-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}.table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table tbody+tbody{border-top:2px solid #dee2e6}.table .table{background-color:#fff}.table-sm td,.table-sm th{padding:.3rem}.table-bordered{border:1px solid #dee2e6}.table-bordered td,.table-bordered th{border:1px solid #dee2e6}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#b8daff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#d6d8db}.table-hover .table-secondary:hover{background-color:#c8cbcf}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#c8cbcf}.table-success,.table-success>td,.table-success>th{background-color:#c3e6cb}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>td,.table-info>th{background-color:#bee5eb}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>td,.table-warning>th{background-color:#ffeeba}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>td,.table-danger>th{background-color:#f5c6cb}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>td,.table-light>th{background-color:#fdfdfe}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>td,.table-dark>th{background-color:#c6c8ca}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.table .thead-dark th{color:#fff;background-color:#212529;border-color:#32383e}.table .thead-light th{color:#495057;background-color:#e9ecef;border-color:#dee2e6}.table-dark{color:#fff;background-color:#212529}.table-dark td,.table-dark th,.table-dark thead th{border-color:#32383e}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{background-color:rgba(255,255,255,.075)}@media (max-width:575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-sm>.table-bordered{border:0}}@media (max-width:767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-md>.table-bordered{border:0}}@media (max-width:991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-lg>.table-bordered{border:0}}@media (max-width:1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control:-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}select.form-control:not([size]):not([multiple]){height:calc(2.25rem + 2px)}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block;width:100%}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem;line-height:1.5}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem;line-height:1.5}.form-control-plaintext{display:block;width:100%;padding-top:.375rem;padding-bottom:.375rem;margin-bottom:0;line-height:1.5;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm,.input-group-lg>.form-control-plaintext.form-control,.input-group-lg>.input-group-append>.form-control-plaintext.btn,.input-group-lg>.input-group-append>.form-control-plaintext.input-group-text,.input-group-lg>.input-group-prepend>.form-control-plaintext.btn,.input-group-lg>.input-group-prepend>.form-control-plaintext.input-group-text,.input-group-sm>.form-control-plaintext.form-control,.input-group-sm>.input-group-append>.form-control-plaintext.btn,.input-group-sm>.input-group-append>.form-control-plaintext.input-group-text,.input-group-sm>.input-group-prepend>.form-control-plaintext.btn,.input-group-sm>.input-group-prepend>.form-control-plaintext.input-group-text{padding-right:0;padding-left:0}.form-control-sm,.input-group-sm>.form-control,.input-group-sm>.input-group-append>.btn,.input-group-sm>.input-group-append>.input-group-text,.input-group-sm>.input-group-prepend>.btn,.input-group-sm>.input-group-prepend>.input-group-text{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.input-group-sm>.input-group-append>select.btn:not([size]):not([multiple]),.input-group-sm>.input-group-append>select.input-group-text:not([size]):not([multiple]),.input-group-sm>.input-group-prepend>select.btn:not([size]):not([multiple]),.input-group-sm>.input-group-prepend>select.input-group-text:not([size]):not([multiple]),.input-group-sm>select.form-control:not([size]):not([multiple]),select.form-control-sm:not([size]):not([multiple]){height:calc(1.8125rem + 2px)}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.input-group-lg>.input-group-append>select.btn:not([size]):not([multiple]),.input-group-lg>.input-group-append>select.input-group-text:not([size]):not([multiple]),.input-group-lg>.input-group-prepend>select.btn:not([size]):not([multiple]),.input-group-lg>.input-group-prepend>select.input-group-text:not([size]):not([multiple]),.input-group-lg>select.form-control:not([size]):not([multiple]),select.form-control-lg:not([size]):not([multiple]){height:calc(2.875rem + 2px)}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem}.form-row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.form-check{position:relative;display:block;padding-left:1.25rem}.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}.form-check-input:disabled~.form-check-label{color:#6c757d}.form-check-label{margin-bottom:0}.form-check-inline{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:0;margin-right:.75rem}.form-check-inline .form-check-input{position:static;margin-top:0;margin-right:.3125rem;margin-left:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#28a745}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.5rem;margin-top:.1rem;font-size:.875rem;line-height:1;color:#fff;background-color:rgba(40,167,69,.8);border-radius:.2rem}.custom-select.is-valid,.form-control.is-valid,.was-validated .custom-select:valid,.was-validated .form-control:valid{border-color:#28a745}.custom-select.is-valid:focus,.form-control.is-valid:focus,.was-validated .custom-select:valid:focus,.was-validated .form-control:valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-select.is-valid~.valid-feedback,.custom-select.is-valid~.valid-tooltip,.form-control.is-valid~.valid-feedback,.form-control.is-valid~.valid-tooltip,.was-validated .custom-select:valid~.valid-feedback,.was-validated .custom-select:valid~.valid-tooltip,.was-validated .form-control:valid~.valid-feedback,.was-validated .form-control:valid~.valid-tooltip{display:block}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#28a745}.form-check-input.is-valid~.valid-feedback,.form-check-input.is-valid~.valid-tooltip,.was-validated .form-check-input:valid~.valid-feedback,.was-validated .form-check-input:valid~.valid-tooltip{display:block}.custom-control-input.is-valid~.custom-control-label,.was-validated .custom-control-input:valid~.custom-control-label{color:#28a745}.custom-control-input.is-valid~.custom-control-label::before,.was-validated .custom-control-input:valid~.custom-control-label::before{background-color:#71dd8a}.custom-control-input.is-valid~.valid-feedback,.custom-control-input.is-valid~.valid-tooltip,.was-validated .custom-control-input:valid~.valid-feedback,.was-validated .custom-control-input:valid~.valid-tooltip{display:block}.custom-control-input.is-valid:checked~.custom-control-label::before,.was-validated .custom-control-input:valid:checked~.custom-control-label::before{background-color:#34ce57}.custom-control-input.is-valid:focus~.custom-control-label::before,.was-validated .custom-control-input:valid:focus~.custom-control-label::before{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(40,167,69,.25)}.custom-file-input.is-valid~.custom-file-label,.was-validated .custom-file-input:valid~.custom-file-label{border-color:#28a745}.custom-file-input.is-valid~.custom-file-label::before,.was-validated .custom-file-input:valid~.custom-file-label::before{border-color:inherit}.custom-file-input.is-valid~.valid-feedback,.custom-file-input.is-valid~.valid-tooltip,.was-validated .custom-file-input:valid~.valid-feedback,.was-validated .custom-file-input:valid~.valid-tooltip{display:block}.custom-file-input.is-valid:focus~.custom-file-label,.was-validated .custom-file-input:valid:focus~.custom-file-label{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.5rem;margin-top:.1rem;font-size:.875rem;line-height:1;color:#fff;background-color:rgba(220,53,69,.8);border-radius:.2rem}.custom-select.is-invalid,.form-control.is-invalid,.was-validated .custom-select:invalid,.was-validated .form-control:invalid{border-color:#dc3545}.custom-select.is-invalid:focus,.form-control.is-invalid:focus,.was-validated .custom-select:invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.custom-select.is-invalid~.invalid-feedback,.custom-select.is-invalid~.invalid-tooltip,.form-control.is-invalid~.invalid-feedback,.form-control.is-invalid~.invalid-tooltip,.was-validated .custom-select:invalid~.invalid-feedback,.was-validated .custom-select:invalid~.invalid-tooltip,.was-validated .form-control:invalid~.invalid-feedback,.was-validated .form-control:invalid~.invalid-tooltip{display:block}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545}.form-check-input.is-invalid~.invalid-feedback,.form-check-input.is-invalid~.invalid-tooltip,.was-validated .form-check-input:invalid~.invalid-feedback,.was-validated .form-check-input:invalid~.invalid-tooltip{display:block}.custom-control-input.is-invalid~.custom-control-label,.was-validated .custom-control-input:invalid~.custom-control-label{color:#dc3545}.custom-control-input.is-invalid~.custom-control-label::before,.was-validated .custom-control-input:invalid~.custom-control-label::before{background-color:#efa2a9}.custom-control-input.is-invalid~.invalid-feedback,.custom-control-input.is-invalid~.invalid-tooltip,.was-validated .custom-control-input:invalid~.invalid-feedback,.was-validated .custom-control-input:invalid~.invalid-tooltip{display:block}.custom-control-input.is-invalid:checked~.custom-control-label::before,.was-validated .custom-control-input:invalid:checked~.custom-control-label::before{background-color:#e4606d}.custom-control-input.is-invalid:focus~.custom-control-label::before,.was-validated .custom-control-input:invalid:focus~.custom-control-label::before{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(220,53,69,.25)}.custom-file-input.is-invalid~.custom-file-label,.was-validated .custom-file-input:invalid~.custom-file-label{border-color:#dc3545}.custom-file-input.is-invalid~.custom-file-label::before,.was-validated .custom-file-input:invalid~.custom-file-label::before{border-color:inherit}.custom-file-input.is-invalid~.invalid-feedback,.custom-file-input.is-invalid~.invalid-tooltip,.was-validated .custom-file-input:invalid~.invalid-feedback,.was-validated .custom-file-input:invalid~.invalid-tooltip{display:block}.custom-file-input.is-invalid:focus~.custom-file-label,.was-validated .custom-file-input:invalid:focus~.custom-file-label{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-inline{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.form-inline .form-check{width:100%}@media (min-width:576px){.form-inline label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}.form-inline .form-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:0}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-plaintext{display:inline-block}.form-inline .input-group{width:auto}.form-inline .form-check{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-left:0}.form-inline .form-check-input{position:relative;margin-top:0;margin-right:.25rem;margin-left:0}.form-inline .custom-control{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.form-inline .custom-control-label{margin-bottom:0}}.btn{display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn:focus,.btn:hover{text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}.btn:not(:disabled):not(.disabled).active,.btn:not(:disabled):not(.disabled):active{background-image:none}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5a6268;border-color:#545b62}.btn-secondary.focus,.btn-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#545b62;border-color:#4e555b}.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}.btn-success.focus,.btn-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#1e7e34;border-color:#1c7430}.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info.focus,.btn-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-warning{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#212529;background-color:#e0a800;border-color:#d39e00}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle{color:#212529;background-color:#d39e00;border-color:#c69500}.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#bd2130;border-color:#b21f2d}.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-light{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#212529;background-color:#e2e6ea;border-color:#dae0e5}.btn-light.focus,.btn-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-light.disabled,.btn-light:disabled{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark.focus,.btn-dark:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1d2124;border-color:#171a1d}.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-primary{color:#007bff;background-color:transparent;background-image:none;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-secondary{color:#6c757d;background-color:transparent;background-image:none;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-success{color:#28a745;background-color:transparent;background-image:none;border-color:#28a745}.btn-outline-success:hover{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#28a745;background-color:transparent}.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-info{color:#17a2b8;background-color:transparent;background-image:none;border-color:#17a2b8}.btn-outline-info:hover{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#17a2b8;background-color:transparent}.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-warning{color:#ffc107;background-color:transparent;background-image:none;border-color:#ffc107}.btn-outline-warning:hover{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-danger{color:#dc3545;background-color:transparent;background-image:none;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-light{color:#f8f9fa;background-color:transparent;background-image:none;border-color:#f8f9fa}.btn-outline-light:hover{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-dark{color:#343a40;background-color:transparent;background-image:none;border-color:#343a40}.btn-outline-dark:hover{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#343a40;background-color:transparent}.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-link{font-weight:400;color:#007bff;background-color:transparent}.btn-link:hover{color:#0056b3;text-decoration:underline;background-color:transparent;border-color:transparent}.btn-link.focus,.btn-link:focus{text-decoration:underline;border-color:transparent;box-shadow:none}.btn-link.disabled,.btn-link:disabled{color:#6c757d}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;transition:opacity .15s linear}.fade.show{opacity:1}.collapse{display:none}.collapse.show{display:block}tr.collapse.show{display:table-row}tbody.collapse.show{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}.dropdown,.dropup{position:relative}.dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropup .dropdown-menu{margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-menu{margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:""}.dropleft .dropdown-toggle::after{display:none}.dropleft .dropdown-toggle::before{display:inline-block;width:0;height:0;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty::after{margin-left:0}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#6c757d;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.btn-group,.btn-group-vertical{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.btn-group-vertical>.btn:hover,.btn-group>.btn:hover{z-index:1}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:1}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group,.btn-group-vertical .btn+.btn,.btn-group-vertical .btn+.btn-group,.btn-group-vertical .btn-group+.btn,.btn-group-vertical .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after{margin-left:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btn-group-vertical .btn,.btn-group-vertical .btn-group{width:100%}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%}.input-group>.custom-file,.input-group>.custom-select,.input-group>.form-control{position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}.input-group>.custom-file:focus,.input-group>.custom-select:focus,.input-group>.form-control:focus{z-index:3}.input-group>.custom-file+.custom-file,.input-group>.custom-file+.custom-select,.input-group>.custom-file+.form-control,.input-group>.custom-select+.custom-file,.input-group>.custom-select+.custom-select,.input-group>.custom-select+.form-control,.input-group>.form-control+.custom-file,.input-group>.form-control+.custom-select,.input-group>.form-control+.form-control{margin-left:-1px}.input-group>.custom-select:not(:last-child),.input-group>.form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-select:not(:first-child),.input-group>.form-control:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.custom-file{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.input-group>.custom-file:not(:last-child) .custom-file-label,.input-group>.custom-file:not(:last-child) .custom-file-label::before{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-file:not(:first-child) .custom-file-label,.input-group>.custom-file:not(:first-child) .custom-file-label::before{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-append,.input-group-prepend{display:-webkit-box;display:-ms-flexbox;display:flex}.input-group-append .btn,.input-group-prepend .btn{position:relative;z-index:2}.input-group-append .btn+.btn,.input-group-append .btn+.input-group-text,.input-group-append .input-group-text+.btn,.input-group-append .input-group-text+.input-group-text,.input-group-prepend .btn+.btn,.input-group-prepend .btn+.input-group-text,.input-group-prepend .input-group-text+.btn,.input-group-prepend .input-group-text+.input-group-text{margin-left:-1px}.input-group-prepend{margin-right:-1px}.input-group-append{margin-left:-1px}.input-group-text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.25rem}.input-group-text input[type=checkbox],.input-group-text input[type=radio]{margin-top:0}.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),.input-group>.input-group-append:not(:last-child)>.btn,.input-group>.input-group-append:not(:last-child)>.input-group-text,.input-group>.input-group-prepend>.btn,.input-group>.input-group-prepend>.input-group-text{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text{border-top-left-radius:0;border-bottom-left-radius:0}.custom-control{position:relative;display:block;min-height:1.5rem;padding-left:1.5rem}.custom-control-inline{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-right:1rem}.custom-control-input{position:absolute;z-index:-1;opacity:0}.custom-control-input:checked~.custom-control-label::before{color:#fff;background-color:#007bff}.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-control-input:active~.custom-control-label::before{color:#fff;background-color:#b3d7ff}.custom-control-input:disabled~.custom-control-label{color:#6c757d}.custom-control-input:disabled~.custom-control-label::before{background-color:#e9ecef}.custom-control-label{margin-bottom:0}.custom-control-label::before{position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;pointer-events:none;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#dee2e6}.custom-control-label::after{position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;content:"";background-repeat:no-repeat;background-position:center center;background-size:50% 50%}.custom-checkbox .custom-control-label::before{border-radius:.25rem}.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color:#007bff}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E")}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before{background-color:#007bff}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E")}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-radio .custom-control-label::before{border-radius:50%}.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color:#007bff}.custom-radio .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")}.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-select{display:inline-block;width:100%;height:calc(2.25rem + 2px);padding:.375rem 1.75rem .375rem .75rem;line-height:1.5;color:#495057;vertical-align:middle;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;background-size:8px 10px;border:1px solid #ced4da;border-radius:.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(128,189,255,.5)}.custom-select:focus::-ms-value{color:#495057;background-color:#fff}.custom-select[multiple],.custom-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.custom-select:disabled{color:#6c757d;background-color:#e9ecef}.custom-select::-ms-expand{opacity:0}.custom-select-sm{height:calc(1.8125rem + 2px);padding-top:.375rem;padding-bottom:.375rem;font-size:75%}.custom-select-lg{height:calc(2.875rem + 2px);padding-top:.375rem;padding-bottom:.375rem;font-size:125%}.custom-file{position:relative;display:inline-block;width:100%;height:calc(2.25rem + 2px);margin-bottom:0}.custom-file-input{position:relative;z-index:2;width:100%;height:calc(2.25rem + 2px);margin:0;opacity:0}.custom-file-input:focus~.custom-file-control{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-file-input:focus~.custom-file-control::before{border-color:#80bdff}.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"}.custom-file-label{position:absolute;top:0;right:0;left:0;z-index:1;height:calc(2.25rem + 2px);padding:.375rem .75rem;line-height:1.5;color:#495057;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem}.custom-file-label::after{position:absolute;top:0;right:0;bottom:0;z-index:3;display:block;height:calc(calc(2.25rem + 2px) - 1px * 2);padding:.375rem .75rem;line-height:1.5;color:#495057;content:"Browse";background-color:#e9ecef;border-left:1px solid #ced4da;border-radius:0 .25rem .25rem 0}.nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:focus,.nav-link:hover{text-decoration:none}.nav-link.disabled{color:#6c757d}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-item{margin-bottom:-1px}.nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #dee2e6}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#007bff}.nav-fill .nav-item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;text-align:center}.nav-justified .nav-item{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}.navbar>.container,.navbar>.container-fluid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static;float:none}.navbar-text{display:inline-block;padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}.navbar-toggler:not(:disabled):not(.disabled){cursor:pointer}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:no-repeat center center;background-size:100% 100%}@media (max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .dropup .dropdown-menu{top:auto;bottom:100%}}@media (max-width:767.98px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:768px){.navbar-expand-md{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-md .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-md .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .dropup .dropdown-menu{top:auto;bottom:100%}}@media (max-width:991.98px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:992px){.navbar-expand-lg{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-lg .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .dropup .dropdown-menu{top:auto;bottom:100%}}@media (max-width:1199.98px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1200px){.navbar-expand-xl{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-xl .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-xl .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .dropup .dropdown-menu{top:auto;bottom:100%}}.navbar-expand{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}.navbar-expand .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand>.container,.navbar-expand>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .dropup .dropdown-menu{top:auto;bottom:100%}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-light .navbar-text a{color:rgba(0,0,0,.9)}.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-dark .navbar-text{color:rgba(255,255,255,.5)}.navbar-dark .navbar-text a{color:#fff}.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-header+.list-group .list-group-item:first-child{border-top:0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img{width:100%;border-radius:calc(.25rem - 1px)}.card-img-top{width:100%;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img-bottom{width:100%;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-deck{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.card-deck .card{margin-bottom:15px}@media (min-width:576px){.card-deck{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:15px;margin-bottom:0;margin-left:15px}}.card-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.card-group>.card{margin-bottom:15px}@media (min-width:576px){.card-group{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.card-group>.card{-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:first-child .card-header,.card-group>.card:first-child .card-img-top{border-top-right-radius:0}.card-group>.card:first-child .card-footer,.card-group>.card:first-child .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:last-child .card-header,.card-group>.card:last-child .card-img-top{border-top-left-radius:0}.card-group>.card:last-child .card-footer,.card-group>.card:last-child .card-img-bottom{border-bottom-left-radius:0}.card-group>.card:only-child{border-radius:.25rem}.card-group>.card:only-child .card-header,.card-group>.card:only-child .card-img-top{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card-group>.card:only-child .card-footer,.card-group>.card:only-child .card-img-bottom{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-group>.card:not(:first-child):not(:last-child):not(:only-child){border-radius:0}.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-footer,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-header,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top{border-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}.card-columns .card{display:inline-block;width:100%}}.breadcrumb{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;padding-left:.5rem;color:#6c757d;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}.breadcrumb-item.active{color:#6c757d}.pagination{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.page-link:hover{color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:2;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.page-link:not(:disabled):not(.disabled){cursor:pointer}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:1;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-primary{color:#fff;background-color:#007bff}.badge-primary[href]:focus,.badge-primary[href]:hover{color:#fff;text-decoration:none;background-color:#0062cc}.badge-secondary{color:#fff;background-color:#6c757d}.badge-secondary[href]:focus,.badge-secondary[href]:hover{color:#fff;text-decoration:none;background-color:#545b62}.badge-success{color:#fff;background-color:#28a745}.badge-success[href]:focus,.badge-success[href]:hover{color:#fff;text-decoration:none;background-color:#1e7e34}.badge-info{color:#fff;background-color:#17a2b8}.badge-info[href]:focus,.badge-info[href]:hover{color:#fff;text-decoration:none;background-color:#117a8b}.badge-warning{color:#212529;background-color:#ffc107}.badge-warning[href]:focus,.badge-warning[href]:hover{color:#212529;text-decoration:none;background-color:#d39e00}.badge-danger{color:#fff;background-color:#dc3545}.badge-danger[href]:focus,.badge-danger[href]:hover{color:#fff;text-decoration:none;background-color:#bd2130}.badge-light{color:#212529;background-color:#f8f9fa}.badge-light[href]:focus,.badge-light[href]:hover{color:#212529;text-decoration:none;background-color:#dae0e5}.badge-dark{color:#fff;background-color:#343a40}.badge-dark[href]:focus,.badge-dark[href]:hover{color:#fff;text-decoration:none;background-color:#1d2124}.jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:#e9ecef;border-radius:.3rem}@media (min-width:576px){.jumbotron{padding:4rem 2rem}}.jumbotron-fluid{padding-right:0;padding-left:0;border-radius:0}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}.alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:-webkit-box;display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.progress-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;text-align:center;background-color:#007bff;transition:width .6s ease}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}.media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.media-body{-webkit-box-flex:1;-ms-flex:1;flex:1}.list-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.list-group-item:focus,.list-group-item:hover{z-index:1;text-decoration:none}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.list-group-flush .list-group-item{border-right:0;border-left:0;border-radius:0}.list-group-flush:first-child .list-group-item:first-child{border-top:0}.list-group-flush:last-child .list-group-item:last-child{border-bottom:0}.list-group-item-primary{color:#004085;background-color:#b8daff}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#004085;background-color:#9fcdff}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#004085;border-color:#004085}.list-group-item-secondary{color:#383d41;background-color:#d6d8db}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#383d41;background-color:#c8cbcf}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#383d41;border-color:#383d41}.list-group-item-success{color:#155724;background-color:#c3e6cb}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#155724;background-color:#b1dfbb}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#155724;border-color:#155724}.list-group-item-info{color:#0c5460;background-color:#bee5eb}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#0c5460;background-color:#abdde5}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#0c5460;border-color:#0c5460}.list-group-item-warning{color:#856404;background-color:#ffeeba}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#856404;background-color:#ffe8a1}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#856404;border-color:#856404}.list-group-item-danger{color:#721c24;background-color:#f5c6cb}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#721c24;background-color:#f1b0b7}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#721c24;border-color:#721c24}.list-group-item-light{color:#818182;background-color:#fdfdfe}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#818182;background-color:#ececf6}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#818182;border-color:#818182}.list-group-item-dark{color:#1b1e21;background-color:#c6c8ca}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#1b1e21;background-color:#b9bbbe}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#1b1e21;border-color:#1b1e21}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:focus,.close:hover{color:#000;text-decoration:none;opacity:.75}.close:not(:disabled):not(.disabled){cursor:pointer}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.show .modal-dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}.modal-dialog-centered{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:calc(100% - (.5rem * 2))}.modal-content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1rem;border-bottom:1px solid #e9ecef;border-top-left-radius:.3rem;border-top-right-radius:.3rem}.modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.modal-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #e9ecef}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-centered{min-height:calc(100% - (1.75rem * 2))}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg{max-width:800px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow{top:0}.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{padding:0 .4rem}.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .arrow::after,.popover .arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top] .arrow,.bs-popover-top .arrow{bottom:calc((.5rem + 1px) * -1)}.bs-popover-auto[x-placement^=top] .arrow::after,.bs-popover-auto[x-placement^=top] .arrow::before,.bs-popover-top .arrow::after,.bs-popover-top .arrow::before{border-width:.5rem .5rem 0}.bs-popover-auto[x-placement^=top] .arrow::before,.bs-popover-top .arrow::before{bottom:0;border-top-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=top] .arrow::after,.bs-popover-top .arrow::after{bottom:1px;border-top-color:#fff}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right] .arrow,.bs-popover-right .arrow{left:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=right] .arrow::after,.bs-popover-auto[x-placement^=right] .arrow::before,.bs-popover-right .arrow::after,.bs-popover-right .arrow::before{border-width:.5rem .5rem .5rem 0}.bs-popover-auto[x-placement^=right] .arrow::before,.bs-popover-right .arrow::before{left:0;border-right-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=right] .arrow::after,.bs-popover-right .arrow::after{left:1px;border-right-color:#fff}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom] .arrow,.bs-popover-bottom .arrow{top:calc((.5rem + 1px) * -1)}.bs-popover-auto[x-placement^=bottom] .arrow::after,.bs-popover-auto[x-placement^=bottom] .arrow::before,.bs-popover-bottom .arrow::after,.bs-popover-bottom .arrow::before{border-width:0 .5rem .5rem .5rem}.bs-popover-auto[x-placement^=bottom] .arrow::before,.bs-popover-bottom .arrow::before{top:0;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=bottom] .arrow::after,.bs-popover-bottom .arrow::after{top:1px;border-bottom-color:#fff}.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left] .arrow,.bs-popover-left .arrow{right:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=left] .arrow::after,.bs-popover-auto[x-placement^=left] .arrow::before,.bs-popover-left .arrow::after,.bs-popover-left .arrow::before{border-width:.5rem 0 .5rem .5rem}.bs-popover-auto[x-placement^=left] .arrow::before,.bs-popover-left .arrow::before{right:0;border-left-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=left] .arrow::after,.bs-popover-left .arrow::after{right:1px;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;color:inherit;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#212529}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-item{position:relative;display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.carousel-item-next,.carousel-item-prev{position:absolute;top:0}.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translateX(0);transform:translateX(0)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.active.carousel-item-right,.carousel-item-next{-webkit-transform:translateX(100%);transform:translateX(100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-right,.carousel-item-next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:transparent no-repeat center center;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.carousel-control-next-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{position:relative;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;background-color:rgba(255,255,255,.5)}.carousel-indicators li::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators li::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.bg-primary{background-color:#007bff!important}a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:hover{background-color:#0062cc!important}.bg-secondary{background-color:#6c757d!important}a.bg-secondary:focus,a.bg-secondary:hover,button.bg-secondary:focus,button.bg-secondary:hover{background-color:#545b62!important}.bg-success{background-color:#28a745!important}a.bg-success:focus,a.bg-success:hover,button.bg-success:focus,button.bg-success:hover{background-color:#1e7e34!important}.bg-info{background-color:#17a2b8!important}a.bg-info:focus,a.bg-info:hover,button.bg-info:focus,button.bg-info:hover{background-color:#117a8b!important}.bg-warning{background-color:#ffc107!important}a.bg-warning:focus,a.bg-warning:hover,button.bg-warning:focus,button.bg-warning:hover{background-color:#d39e00!important}.bg-danger{background-color:#dc3545!important}a.bg-danger:focus,a.bg-danger:hover,button.bg-danger:focus,button.bg-danger:hover{background-color:#bd2130!important}.bg-light{background-color:#f8f9fa!important}a.bg-light:focus,a.bg-light:hover,button.bg-light:focus,button.bg-light:hover{background-color:#dae0e5!important}.bg-dark{background-color:#343a40!important}a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover{background-color:#1d2124!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.border{border:1px solid #dee2e6!important}.border-top{border-top:1px solid #dee2e6!important}.border-right{border-right:1px solid #dee2e6!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-left{border-left:1px solid #dee2e6!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-primary{border-color:#007bff!important}.border-secondary{border-color:#6c757d!important}.border-success{border-color:#28a745!important}.border-info{border-color:#17a2b8!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#343a40!important}.border-white{border-color:#fff!important}.rounded{border-radius:.25rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-circle{border-radius:50%!important}.rounded-0{border-radius:0!important}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-print-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.857143%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.flex-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}@media (min-width:576px){.flex-sm-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-sm-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-sm-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-sm-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-sm-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-sm-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-sm-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-sm-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-sm-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-sm-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-sm-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-sm-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-sm-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-sm-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-sm-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-sm-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-sm-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-sm-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-sm-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-sm-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-sm-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-sm-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-sm-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-sm-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-sm-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-sm-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-sm-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-sm-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-sm-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:768px){.flex-md-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-md-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-md-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-md-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-md-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-md-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-md-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-md-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-md-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-md-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-md-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-md-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-md-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-md-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-md-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-md-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-md-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-md-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-md-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-md-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-md-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-md-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-md-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-md-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-md-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-md-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-md-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-md-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-md-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:992px){.flex-lg-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-lg-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-lg-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-lg-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-lg-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-lg-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-lg-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-lg-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-lg-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-lg-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-lg-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-lg-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-lg-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-lg-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-lg-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-lg-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-lg-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-lg-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-lg-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-lg-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-lg-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-lg-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-lg-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-lg-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-lg-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-lg-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-lg-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-lg-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-lg-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:1200px){.flex-xl-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-xl-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-xl-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-xl-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-xl-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-xl-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-xl-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-xl-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-xl-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-xl-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-xl-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-xl-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-xl-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-xl-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-xl-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-xl-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-xl-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-xl-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-xl-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-xl-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-xl-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-xl-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-xl-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-xl-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-xl-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-xl-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-xl-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-xl-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-xl-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}@media (min-width:576px){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}}@media (min-width:768px){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}}@media (min-width:992px){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}}@media (min-width:1200px){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;-webkit-clip-path:inset(50%);clip-path:inset(50%);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;-webkit-clip-path:none;clip-path:none}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}@media (min-width:576px){.m-sm-0{margin:0!important}.mt-sm-0,.my-sm-0{margin-top:0!important}.mr-sm-0,.mx-sm-0{margin-right:0!important}.mb-sm-0,.my-sm-0{margin-bottom:0!important}.ml-sm-0,.mx-sm-0{margin-left:0!important}.m-sm-1{margin:.25rem!important}.mt-sm-1,.my-sm-1{margin-top:.25rem!important}.mr-sm-1,.mx-sm-1{margin-right:.25rem!important}.mb-sm-1,.my-sm-1{margin-bottom:.25rem!important}.ml-sm-1,.mx-sm-1{margin-left:.25rem!important}.m-sm-2{margin:.5rem!important}.mt-sm-2,.my-sm-2{margin-top:.5rem!important}.mr-sm-2,.mx-sm-2{margin-right:.5rem!important}.mb-sm-2,.my-sm-2{margin-bottom:.5rem!important}.ml-sm-2,.mx-sm-2{margin-left:.5rem!important}.m-sm-3{margin:1rem!important}.mt-sm-3,.my-sm-3{margin-top:1rem!important}.mr-sm-3,.mx-sm-3{margin-right:1rem!important}.mb-sm-3,.my-sm-3{margin-bottom:1rem!important}.ml-sm-3,.mx-sm-3{margin-left:1rem!important}.m-sm-4{margin:1.5rem!important}.mt-sm-4,.my-sm-4{margin-top:1.5rem!important}.mr-sm-4,.mx-sm-4{margin-right:1.5rem!important}.mb-sm-4,.my-sm-4{margin-bottom:1.5rem!important}.ml-sm-4,.mx-sm-4{margin-left:1.5rem!important}.m-sm-5{margin:3rem!important}.mt-sm-5,.my-sm-5{margin-top:3rem!important}.mr-sm-5,.mx-sm-5{margin-right:3rem!important}.mb-sm-5,.my-sm-5{margin-bottom:3rem!important}.ml-sm-5,.mx-sm-5{margin-left:3rem!important}.p-sm-0{padding:0!important}.pt-sm-0,.py-sm-0{padding-top:0!important}.pr-sm-0,.px-sm-0{padding-right:0!important}.pb-sm-0,.py-sm-0{padding-bottom:0!important}.pl-sm-0,.px-sm-0{padding-left:0!important}.p-sm-1{padding:.25rem!important}.pt-sm-1,.py-sm-1{padding-top:.25rem!important}.pr-sm-1,.px-sm-1{padding-right:.25rem!important}.pb-sm-1,.py-sm-1{padding-bottom:.25rem!important}.pl-sm-1,.px-sm-1{padding-left:.25rem!important}.p-sm-2{padding:.5rem!important}.pt-sm-2,.py-sm-2{padding-top:.5rem!important}.pr-sm-2,.px-sm-2{padding-right:.5rem!important}.pb-sm-2,.py-sm-2{padding-bottom:.5rem!important}.pl-sm-2,.px-sm-2{padding-left:.5rem!important}.p-sm-3{padding:1rem!important}.pt-sm-3,.py-sm-3{padding-top:1rem!important}.pr-sm-3,.px-sm-3{padding-right:1rem!important}.pb-sm-3,.py-sm-3{padding-bottom:1rem!important}.pl-sm-3,.px-sm-3{padding-left:1rem!important}.p-sm-4{padding:1.5rem!important}.pt-sm-4,.py-sm-4{padding-top:1.5rem!important}.pr-sm-4,.px-sm-4{padding-right:1.5rem!important}.pb-sm-4,.py-sm-4{padding-bottom:1.5rem!important}.pl-sm-4,.px-sm-4{padding-left:1.5rem!important}.p-sm-5{padding:3rem!important}.pt-sm-5,.py-sm-5{padding-top:3rem!important}.pr-sm-5,.px-sm-5{padding-right:3rem!important}.pb-sm-5,.py-sm-5{padding-bottom:3rem!important}.pl-sm-5,.px-sm-5{padding-left:3rem!important}.m-sm-auto{margin:auto!important}.mt-sm-auto,.my-sm-auto{margin-top:auto!important}.mr-sm-auto,.mx-sm-auto{margin-right:auto!important}.mb-sm-auto,.my-sm-auto{margin-bottom:auto!important}.ml-sm-auto,.mx-sm-auto{margin-left:auto!important}}@media (min-width:768px){.m-md-0{margin:0!important}.mt-md-0,.my-md-0{margin-top:0!important}.mr-md-0,.mx-md-0{margin-right:0!important}.mb-md-0,.my-md-0{margin-bottom:0!important}.ml-md-0,.mx-md-0{margin-left:0!important}.m-md-1{margin:.25rem!important}.mt-md-1,.my-md-1{margin-top:.25rem!important}.mr-md-1,.mx-md-1{margin-right:.25rem!important}.mb-md-1,.my-md-1{margin-bottom:.25rem!important}.ml-md-1,.mx-md-1{margin-left:.25rem!important}.m-md-2{margin:.5rem!important}.mt-md-2,.my-md-2{margin-top:.5rem!important}.mr-md-2,.mx-md-2{margin-right:.5rem!important}.mb-md-2,.my-md-2{margin-bottom:.5rem!important}.ml-md-2,.mx-md-2{margin-left:.5rem!important}.m-md-3{margin:1rem!important}.mt-md-3,.my-md-3{margin-top:1rem!important}.mr-md-3,.mx-md-3{margin-right:1rem!important}.mb-md-3,.my-md-3{margin-bottom:1rem!important}.ml-md-3,.mx-md-3{margin-left:1rem!important}.m-md-4{margin:1.5rem!important}.mt-md-4,.my-md-4{margin-top:1.5rem!important}.mr-md-4,.mx-md-4{margin-right:1.5rem!important}.mb-md-4,.my-md-4{margin-bottom:1.5rem!important}.ml-md-4,.mx-md-4{margin-left:1.5rem!important}.m-md-5{margin:3rem!important}.mt-md-5,.my-md-5{margin-top:3rem!important}.mr-md-5,.mx-md-5{margin-right:3rem!important}.mb-md-5,.my-md-5{margin-bottom:3rem!important}.ml-md-5,.mx-md-5{margin-left:3rem!important}.p-md-0{padding:0!important}.pt-md-0,.py-md-0{padding-top:0!important}.pr-md-0,.px-md-0{padding-right:0!important}.pb-md-0,.py-md-0{padding-bottom:0!important}.pl-md-0,.px-md-0{padding-left:0!important}.p-md-1{padding:.25rem!important}.pt-md-1,.py-md-1{padding-top:.25rem!important}.pr-md-1,.px-md-1{padding-right:.25rem!important}.pb-md-1,.py-md-1{padding-bottom:.25rem!important}.pl-md-1,.px-md-1{padding-left:.25rem!important}.p-md-2{padding:.5rem!important}.pt-md-2,.py-md-2{padding-top:.5rem!important}.pr-md-2,.px-md-2{padding-right:.5rem!important}.pb-md-2,.py-md-2{padding-bottom:.5rem!important}.pl-md-2,.px-md-2{padding-left:.5rem!important}.p-md-3{padding:1rem!important}.pt-md-3,.py-md-3{padding-top:1rem!important}.pr-md-3,.px-md-3{padding-right:1rem!important}.pb-md-3,.py-md-3{padding-bottom:1rem!important}.pl-md-3,.px-md-3{padding-left:1rem!important}.p-md-4{padding:1.5rem!important}.pt-md-4,.py-md-4{padding-top:1.5rem!important}.pr-md-4,.px-md-4{padding-right:1.5rem!important}.pb-md-4,.py-md-4{padding-bottom:1.5rem!important}.pl-md-4,.px-md-4{padding-left:1.5rem!important}.p-md-5{padding:3rem!important}.pt-md-5,.py-md-5{padding-top:3rem!important}.pr-md-5,.px-md-5{padding-right:3rem!important}.pb-md-5,.py-md-5{padding-bottom:3rem!important}.pl-md-5,.px-md-5{padding-left:3rem!important}.m-md-auto{margin:auto!important}.mt-md-auto,.my-md-auto{margin-top:auto!important}.mr-md-auto,.mx-md-auto{margin-right:auto!important}.mb-md-auto,.my-md-auto{margin-bottom:auto!important}.ml-md-auto,.mx-md-auto{margin-left:auto!important}}@media (min-width:992px){.m-lg-0{margin:0!important}.mt-lg-0,.my-lg-0{margin-top:0!important}.mr-lg-0,.mx-lg-0{margin-right:0!important}.mb-lg-0,.my-lg-0{margin-bottom:0!important}.ml-lg-0,.mx-lg-0{margin-left:0!important}.m-lg-1{margin:.25rem!important}.mt-lg-1,.my-lg-1{margin-top:.25rem!important}.mr-lg-1,.mx-lg-1{margin-right:.25rem!important}.mb-lg-1,.my-lg-1{margin-bottom:.25rem!important}.ml-lg-1,.mx-lg-1{margin-left:.25rem!important}.m-lg-2{margin:.5rem!important}.mt-lg-2,.my-lg-2{margin-top:.5rem!important}.mr-lg-2,.mx-lg-2{margin-right:.5rem!important}.mb-lg-2,.my-lg-2{margin-bottom:.5rem!important}.ml-lg-2,.mx-lg-2{margin-left:.5rem!important}.m-lg-3{margin:1rem!important}.mt-lg-3,.my-lg-3{margin-top:1rem!important}.mr-lg-3,.mx-lg-3{margin-right:1rem!important}.mb-lg-3,.my-lg-3{margin-bottom:1rem!important}.ml-lg-3,.mx-lg-3{margin-left:1rem!important}.m-lg-4{margin:1.5rem!important}.mt-lg-4,.my-lg-4{margin-top:1.5rem!important}.mr-lg-4,.mx-lg-4{margin-right:1.5rem!important}.mb-lg-4,.my-lg-4{margin-bottom:1.5rem!important}.ml-lg-4,.mx-lg-4{margin-left:1.5rem!important}.m-lg-5{margin:3rem!important}.mt-lg-5,.my-lg-5{margin-top:3rem!important}.mr-lg-5,.mx-lg-5{margin-right:3rem!important}.mb-lg-5,.my-lg-5{margin-bottom:3rem!important}.ml-lg-5,.mx-lg-5{margin-left:3rem!important}.p-lg-0{padding:0!important}.pt-lg-0,.py-lg-0{padding-top:0!important}.pr-lg-0,.px-lg-0{padding-right:0!important}.pb-lg-0,.py-lg-0{padding-bottom:0!important}.pl-lg-0,.px-lg-0{padding-left:0!important}.p-lg-1{padding:.25rem!important}.pt-lg-1,.py-lg-1{padding-top:.25rem!important}.pr-lg-1,.px-lg-1{padding-right:.25rem!important}.pb-lg-1,.py-lg-1{padding-bottom:.25rem!important}.pl-lg-1,.px-lg-1{padding-left:.25rem!important}.p-lg-2{padding:.5rem!important}.pt-lg-2,.py-lg-2{padding-top:.5rem!important}.pr-lg-2,.px-lg-2{padding-right:.5rem!important}.pb-lg-2,.py-lg-2{padding-bottom:.5rem!important}.pl-lg-2,.px-lg-2{padding-left:.5rem!important}.p-lg-3{padding:1rem!important}.pt-lg-3,.py-lg-3{padding-top:1rem!important}.pr-lg-3,.px-lg-3{padding-right:1rem!important}.pb-lg-3,.py-lg-3{padding-bottom:1rem!important}.pl-lg-3,.px-lg-3{padding-left:1rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4,.py-lg-4{padding-top:1.5rem!important}.pr-lg-4,.px-lg-4{padding-right:1.5rem!important}.pb-lg-4,.py-lg-4{padding-bottom:1.5rem!important}.pl-lg-4,.px-lg-4{padding-left:1.5rem!important}.p-lg-5{padding:3rem!important}.pt-lg-5,.py-lg-5{padding-top:3rem!important}.pr-lg-5,.px-lg-5{padding-right:3rem!important}.pb-lg-5,.py-lg-5{padding-bottom:3rem!important}.pl-lg-5,.px-lg-5{padding-left:3rem!important}.m-lg-auto{margin:auto!important}.mt-lg-auto,.my-lg-auto{margin-top:auto!important}.mr-lg-auto,.mx-lg-auto{margin-right:auto!important}.mb-lg-auto,.my-lg-auto{margin-bottom:auto!important}.ml-lg-auto,.mx-lg-auto{margin-left:auto!important}}@media (min-width:1200px){.m-xl-0{margin:0!important}.mt-xl-0,.my-xl-0{margin-top:0!important}.mr-xl-0,.mx-xl-0{margin-right:0!important}.mb-xl-0,.my-xl-0{margin-bottom:0!important}.ml-xl-0,.mx-xl-0{margin-left:0!important}.m-xl-1{margin:.25rem!important}.mt-xl-1,.my-xl-1{margin-top:.25rem!important}.mr-xl-1,.mx-xl-1{margin-right:.25rem!important}.mb-xl-1,.my-xl-1{margin-bottom:.25rem!important}.ml-xl-1,.mx-xl-1{margin-left:.25rem!important}.m-xl-2{margin:.5rem!important}.mt-xl-2,.my-xl-2{margin-top:.5rem!important}.mr-xl-2,.mx-xl-2{margin-right:.5rem!important}.mb-xl-2,.my-xl-2{margin-bottom:.5rem!important}.ml-xl-2,.mx-xl-2{margin-left:.5rem!important}.m-xl-3{margin:1rem!important}.mt-xl-3,.my-xl-3{margin-top:1rem!important}.mr-xl-3,.mx-xl-3{margin-right:1rem!important}.mb-xl-3,.my-xl-3{margin-bottom:1rem!important}.ml-xl-3,.mx-xl-3{margin-left:1rem!important}.m-xl-4{margin:1.5rem!important}.mt-xl-4,.my-xl-4{margin-top:1.5rem!important}.mr-xl-4,.mx-xl-4{margin-right:1.5rem!important}.mb-xl-4,.my-xl-4{margin-bottom:1.5rem!important}.ml-xl-4,.mx-xl-4{margin-left:1.5rem!important}.m-xl-5{margin:3rem!important}.mt-xl-5,.my-xl-5{margin-top:3rem!important}.mr-xl-5,.mx-xl-5{margin-right:3rem!important}.mb-xl-5,.my-xl-5{margin-bottom:3rem!important}.ml-xl-5,.mx-xl-5{margin-left:3rem!important}.p-xl-0{padding:0!important}.pt-xl-0,.py-xl-0{padding-top:0!important}.pr-xl-0,.px-xl-0{padding-right:0!important}.pb-xl-0,.py-xl-0{padding-bottom:0!important}.pl-xl-0,.px-xl-0{padding-left:0!important}.p-xl-1{padding:.25rem!important}.pt-xl-1,.py-xl-1{padding-top:.25rem!important}.pr-xl-1,.px-xl-1{padding-right:.25rem!important}.pb-xl-1,.py-xl-1{padding-bottom:.25rem!important}.pl-xl-1,.px-xl-1{padding-left:.25rem!important}.p-xl-2{padding:.5rem!important}.pt-xl-2,.py-xl-2{padding-top:.5rem!important}.pr-xl-2,.px-xl-2{padding-right:.5rem!important}.pb-xl-2,.py-xl-2{padding-bottom:.5rem!important}.pl-xl-2,.px-xl-2{padding-left:.5rem!important}.p-xl-3{padding:1rem!important}.pt-xl-3,.py-xl-3{padding-top:1rem!important}.pr-xl-3,.px-xl-3{padding-right:1rem!important}.pb-xl-3,.py-xl-3{padding-bottom:1rem!important}.pl-xl-3,.px-xl-3{padding-left:1rem!important}.p-xl-4{padding:1.5rem!important}.pt-xl-4,.py-xl-4{padding-top:1.5rem!important}.pr-xl-4,.px-xl-4{padding-right:1.5rem!important}.pb-xl-4,.py-xl-4{padding-bottom:1.5rem!important}.pl-xl-4,.px-xl-4{padding-left:1.5rem!important}.p-xl-5{padding:3rem!important}.pt-xl-5,.py-xl-5{padding-top:3rem!important}.pr-xl-5,.px-xl-5{padding-right:3rem!important}.pb-xl-5,.py-xl-5{padding-bottom:3rem!important}.pl-xl-5,.px-xl-5{padding-left:3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto,.my-xl-auto{margin-top:auto!important}.mr-xl-auto,.mx-xl-auto{margin-right:auto!important}.mb-xl-auto,.my-xl-auto{margin-bottom:auto!important}.ml-xl-auto,.mx-xl-auto{margin-left:auto!important}}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-light{font-weight:300!important}.font-weight-normal{font-weight:400!important}.font-weight-bold{font-weight:700!important}.font-italic{font-style:italic!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0062cc!important}.text-secondary{color:#6c757d!important}a.text-secondary:focus,a.text-secondary:hover{color:#545b62!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#1e7e34!important}.text-info{color:#17a2b8!important}a.text-info:focus,a.text-info:hover{color:#117a8b!important}.text-warning{color:#ffc107!important}a.text-warning:focus,a.text-warning:hover{color:#d39e00!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#bd2130!important}.text-light{color:#f8f9fa!important}a.text-light:focus,a.text-light:hover{color:#dae0e5!important}.text-dark{color:#343a40!important}a.text-dark:focus,a.text-dark:hover{color:#1d2124!important}.text-muted{color:#6c757d!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}
+/*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/bootstrap.min.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/bootstrap.min.js
new file mode 100644
index 00000000..534d5334
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/bootstrap.min.js
@@ -0,0 +1,7 @@
+/*!
+  * Bootstrap v4.0.0 (https://getbootstrap.com)
+  * Copyright 2011-2018 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+  */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("jquery"),require("popper.js")):"function"==typeof define&&define.amd?define(["exports","jquery","popper.js"],e):e(t.bootstrap={},t.jQuery,t.Popper)}(this,function(t,e,n){"use strict";function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function s(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}e=e&&e.hasOwnProperty("default")?e.default:e,n=n&&n.hasOwnProperty("default")?n.default:n;var o,a,l,h,c,u,f,d,_,g,p,m,v,E,T,y,C,I,A,b,D,S,w,N,O,k,P=function(t){var e=!1;function n(e){var n=this,s=!1;return t(this).one(i.TRANSITION_END,function(){s=!0}),setTimeout(function(){s||i.triggerTransitionEnd(n)},e),this}var i={TRANSITION_END:"bsTransitionEnd",getUID:function(t){do{t+=~~(1e6*Math.random())}while(document.getElementById(t));return t},getSelectorFromElement:function(e){var n,i=e.getAttribute("data-target");i&&"#"!==i||(i=e.getAttribute("href")||""),"#"===i.charAt(0)&&(n=i,i=n="function"==typeof t.escapeSelector?t.escapeSelector(n).substr(1):n.replace(/(:|\.|\[|\]|,|=|@)/g,"\\$1"));try{return t(document).find(i).length>0?i:null}catch(t){return null}},reflow:function(t){return t.offsetHeight},triggerTransitionEnd:function(n){t(n).trigger(e.end)},supportsTransitionEnd:function(){return Boolean(e)},isElement:function(t){return(t[0]||t).nodeType},typeCheckConfig:function(t,e,n){for(var s in n)if(Object.prototype.hasOwnProperty.call(n,s)){var r=n[s],o=e[s],a=o&&i.isElement(o)?"element":(l=o,{}.toString.call(l).match(/\s([a-zA-Z]+)/)[1].toLowerCase());if(!new RegExp(r).test(a))throw new Error(t.toUpperCase()+': Option "'+s+'" provided type "'+a+'" but expected type "'+r+'".')}var l}};return e=("undefined"==typeof window||!window.QUnit)&&{end:"transitionend"},t.fn.emulateTransitionEnd=n,i.supportsTransitionEnd()&&(t.event.special[i.TRANSITION_END]={bindType:e.end,delegateType:e.end,handle:function(e){if(t(e.target).is(this))return e.handleObj.handler.apply(this,arguments)}}),i}(e),L=(a="alert",h="."+(l="bs.alert"),c=(o=e).fn[a],u={CLOSE:"close"+h,CLOSED:"closed"+h,CLICK_DATA_API:"click"+h+".data-api"},f="alert",d="fade",_="show",g=function(){function t(t){this._element=t}var e=t.prototype;return e.close=function(t){t=t||this._element;var e=this._getRootElement(t);this._triggerCloseEvent(e).isDefaultPrevented()||this._removeElement(e)},e.dispose=function(){o.removeData(this._element,l),this._element=null},e._getRootElement=function(t){var e=P.getSelectorFromElement(t),n=!1;return e&&(n=o(e)[0]),n||(n=o(t).closest("."+f)[0]),n},e._triggerCloseEvent=function(t){var e=o.Event(u.CLOSE);return o(t).trigger(e),e},e._removeElement=function(t){var e=this;o(t).removeClass(_),P.supportsTransitionEnd()&&o(t).hasClass(d)?o(t).one(P.TRANSITION_END,function(n){return e._destroyElement(t,n)}).emulateTransitionEnd(150):this._destroyElement(t)},e._destroyElement=function(t){o(t).detach().trigger(u.CLOSED).remove()},t._jQueryInterface=function(e){return this.each(function(){var n=o(this),i=n.data(l);i||(i=new t(this),n.data(l,i)),"close"===e&&i[e](this)})},t._handleDismiss=function(t){return function(e){e&&e.preventDefault(),t.close(this)}},s(t,null,[{key:"VERSION",get:function(){return"4.0.0"}}]),t}(),o(document).on(u.CLICK_DATA_API,'[data-dismiss="alert"]',g._handleDismiss(new g)),o.fn[a]=g._jQueryInterface,o.fn[a].Constructor=g,o.fn[a].noConflict=function(){return o.fn[a]=c,g._jQueryInterface},g),R=(m="button",E="."+(v="bs.button"),T=".data-api",y=(p=e).fn[m],C="active",I="btn",A="focus",b='[data-toggle^="button"]',D='[data-toggle="buttons"]',S="input",w=".active",N=".btn",O={CLICK_DATA_API:"click"+E+T,FOCUS_BLUR_DATA_API:"focus"+E+T+" blur"+E+T},k=function(){function t(t){this._element=t}var e=t.prototype;return e.toggle=function(){var t=!0,e=!0,n=p(this._element).closest(D)[0];if(n){var i=p(this._element).find(S)[0];if(i){if("radio"===i.type)if(i.checked&&p(this._element).hasClass(C))t=!1;else{var s=p(n).find(w)[0];s&&p(s).removeClass(C)}if(t){if(i.hasAttribute("disabled")||n.hasAttribute("disabled")||i.classList.contains("disabled")||n.classList.contains("disabled"))return;i.checked=!p(this._element).hasClass(C),p(i).trigger("change")}i.focus(),e=!1}}e&&this._element.setAttribute("aria-pressed",!p(this._element).hasClass(C)),t&&p(this._element).toggleClass(C)},e.dispose=function(){p.removeData(this._element,v),this._element=null},t._jQueryInterface=function(e){return this.each(function(){var n=p(this).data(v);n||(n=new t(this),p(this).data(v,n)),"toggle"===e&&n[e]()})},s(t,null,[{key:"VERSION",get:function(){return"4.0.0"}}]),t}(),p(document).on(O.CLICK_DATA_API,b,function(t){t.preventDefault();var e=t.target;p(e).hasClass(I)||(e=p(e).closest(N)),k._jQueryInterface.call(p(e),"toggle")}).on(O.FOCUS_BLUR_DATA_API,b,function(t){var e=p(t.target).closest(N)[0];p(e).toggleClass(A,/^focus(in)?$/.test(t.type))}),p.fn[m]=k._jQueryInterface,p.fn[m].Constructor=k,p.fn[m].noConflict=function(){return p.fn[m]=y,k._jQueryInterface},k),j=function(t){var e="carousel",n="bs.carousel",i="."+n,o=t.fn[e],a={interval:5e3,keyboard:!0,slide:!1,pause:"hover",wrap:!0},l={interval:"(number|boolean)",keyboard:"boolean",slide:"(boolean|string)",pause:"(string|boolean)",wrap:"boolean"},h="next",c="prev",u="left",f="right",d={SLIDE:"slide"+i,SLID:"slid"+i,KEYDOWN:"keydown"+i,MOUSEENTER:"mouseenter"+i,MOUSELEAVE:"mouseleave"+i,TOUCHEND:"touchend"+i,LOAD_DATA_API:"load"+i+".data-api",CLICK_DATA_API:"click"+i+".data-api"},_="carousel",g="active",p="slide",m="carousel-item-right",v="carousel-item-left",E="carousel-item-next",T="carousel-item-prev",y={ACTIVE:".active",ACTIVE_ITEM:".active.carousel-item",ITEM:".carousel-item",NEXT_PREV:".carousel-item-next, .carousel-item-prev",INDICATORS:".carousel-indicators",DATA_SLIDE:"[data-slide], [data-slide-to]",DATA_RIDE:'[data-ride="carousel"]'},C=function(){function o(e,n){this._items=null,this._interval=null,this._activeElement=null,this._isPaused=!1,this._isSliding=!1,this.touchTimeout=null,this._config=this._getConfig(n),this._element=t(e)[0],this._indicatorsElement=t(this._element).find(y.INDICATORS)[0],this._addEventListeners()}var C=o.prototype;return C.next=function(){this._isSliding||this._slide(h)},C.nextWhenVisible=function(){!document.hidden&&t(this._element).is(":visible")&&"hidden"!==t(this._element).css("visibility")&&this.next()},C.prev=function(){this._isSliding||this._slide(c)},C.pause=function(e){e||(this._isPaused=!0),t(this._element).find(y.NEXT_PREV)[0]&&P.supportsTransitionEnd()&&(P.triggerTransitionEnd(this._element),this.cycle(!0)),clearInterval(this._interval),this._interval=null},C.cycle=function(t){t||(this._isPaused=!1),this._interval&&(clearInterval(this._interval),this._interval=null),this._config.interval&&!this._isPaused&&(this._interval=setInterval((document.visibilityState?this.nextWhenVisible:this.next).bind(this),this._config.interval))},C.to=function(e){var n=this;this._activeElement=t(this._element).find(y.ACTIVE_ITEM)[0];var i=this._getItemIndex(this._activeElement);if(!(e>this._items.length-1||e<0))if(this._isSliding)t(this._element).one(d.SLID,function(){return n.to(e)});else{if(i===e)return this.pause(),void this.cycle();var s=e>i?h:c;this._slide(s,this._items[e])}},C.dispose=function(){t(this._element).off(i),t.removeData(this._element,n),this._items=null,this._config=null,this._element=null,this._interval=null,this._isPaused=null,this._isSliding=null,this._activeElement=null,this._indicatorsElement=null},C._getConfig=function(t){return t=r({},a,t),P.typeCheckConfig(e,t,l),t},C._addEventListeners=function(){var e=this;this._config.keyboard&&t(this._element).on(d.KEYDOWN,function(t){return e._keydown(t)}),"hover"===this._config.pause&&(t(this._element).on(d.MOUSEENTER,function(t){return e.pause(t)}).on(d.MOUSELEAVE,function(t){return e.cycle(t)}),"ontouchstart"in document.documentElement&&t(this._element).on(d.TOUCHEND,function(){e.pause(),e.touchTimeout&&clearTimeout(e.touchTimeout),e.touchTimeout=setTimeout(function(t){return e.cycle(t)},500+e._config.interval)}))},C._keydown=function(t){if(!/input|textarea/i.test(t.target.tagName))switch(t.which){case 37:t.preventDefault(),this.prev();break;case 39:t.preventDefault(),this.next()}},C._getItemIndex=function(e){return this._items=t.makeArray(t(e).parent().find(y.ITEM)),this._items.indexOf(e)},C._getItemByDirection=function(t,e){var n=t===h,i=t===c,s=this._getItemIndex(e),r=this._items.length-1;if((i&&0===s||n&&s===r)&&!this._config.wrap)return e;var o=(s+(t===c?-1:1))%this._items.length;return-1===o?this._items[this._items.length-1]:this._items[o]},C._triggerSlideEvent=function(e,n){var i=this._getItemIndex(e),s=this._getItemIndex(t(this._element).find(y.ACTIVE_ITEM)[0]),r=t.Event(d.SLIDE,{relatedTarget:e,direction:n,from:s,to:i});return t(this._element).trigger(r),r},C._setActiveIndicatorElement=function(e){if(this._indicatorsElement){t(this._indicatorsElement).find(y.ACTIVE).removeClass(g);var n=this._indicatorsElement.children[this._getItemIndex(e)];n&&t(n).addClass(g)}},C._slide=function(e,n){var i,s,r,o=this,a=t(this._element).find(y.ACTIVE_ITEM)[0],l=this._getItemIndex(a),c=n||a&&this._getItemByDirection(e,a),_=this._getItemIndex(c),C=Boolean(this._interval);if(e===h?(i=v,s=E,r=u):(i=m,s=T,r=f),c&&t(c).hasClass(g))this._isSliding=!1;else if(!this._triggerSlideEvent(c,r).isDefaultPrevented()&&a&&c){this._isSliding=!0,C&&this.pause(),this._setActiveIndicatorElement(c);var I=t.Event(d.SLID,{relatedTarget:c,direction:r,from:l,to:_});P.supportsTransitionEnd()&&t(this._element).hasClass(p)?(t(c).addClass(s),P.reflow(c),t(a).addClass(i),t(c).addClass(i),t(a).one(P.TRANSITION_END,function(){t(c).removeClass(i+" "+s).addClass(g),t(a).removeClass(g+" "+s+" "+i),o._isSliding=!1,setTimeout(function(){return t(o._element).trigger(I)},0)}).emulateTransitionEnd(600)):(t(a).removeClass(g),t(c).addClass(g),this._isSliding=!1,t(this._element).trigger(I)),C&&this.cycle()}},o._jQueryInterface=function(e){return this.each(function(){var i=t(this).data(n),s=r({},a,t(this).data());"object"==typeof e&&(s=r({},s,e));var l="string"==typeof e?e:s.slide;if(i||(i=new o(this,s),t(this).data(n,i)),"number"==typeof e)i.to(e);else if("string"==typeof l){if("undefined"==typeof i[l])throw new TypeError('No method named "'+l+'"');i[l]()}else s.interval&&(i.pause(),i.cycle())})},o._dataApiClickHandler=function(e){var i=P.getSelectorFromElement(this);if(i){var s=t(i)[0];if(s&&t(s).hasClass(_)){var a=r({},t(s).data(),t(this).data()),l=this.getAttribute("data-slide-to");l&&(a.interval=!1),o._jQueryInterface.call(t(s),a),l&&t(s).data(n).to(l),e.preventDefault()}}},s(o,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return a}}]),o}();return t(document).on(d.CLICK_DATA_API,y.DATA_SLIDE,C._dataApiClickHandler),t(window).on(d.LOAD_DATA_API,function(){t(y.DATA_RIDE).each(function(){var e=t(this);C._jQueryInterface.call(e,e.data())})}),t.fn[e]=C._jQueryInterface,t.fn[e].Constructor=C,t.fn[e].noConflict=function(){return t.fn[e]=o,C._jQueryInterface},C}(e),H=function(t){var e="collapse",n="bs.collapse",i="."+n,o=t.fn[e],a={toggle:!0,parent:""},l={toggle:"boolean",parent:"(string|element)"},h={SHOW:"show"+i,SHOWN:"shown"+i,HIDE:"hide"+i,HIDDEN:"hidden"+i,CLICK_DATA_API:"click"+i+".data-api"},c="show",u="collapse",f="collapsing",d="collapsed",_="width",g="height",p={ACTIVES:".show, .collapsing",DATA_TOGGLE:'[data-toggle="collapse"]'},m=function(){function i(e,n){this._isTransitioning=!1,this._element=e,this._config=this._getConfig(n),this._triggerArray=t.makeArray(t('[data-toggle="collapse"][href="#'+e.id+'"],[data-toggle="collapse"][data-target="#'+e.id+'"]'));for(var i=t(p.DATA_TOGGLE),s=0;s<i.length;s++){var r=i[s],o=P.getSelectorFromElement(r);null!==o&&t(o).filter(e).length>0&&(this._selector=o,this._triggerArray.push(r))}this._parent=this._config.parent?this._getParent():null,this._config.parent||this._addAriaAndCollapsedClass(this._element,this._triggerArray),this._config.toggle&&this.toggle()}var o=i.prototype;return o.toggle=function(){t(this._element).hasClass(c)?this.hide():this.show()},o.show=function(){var e,s,r=this;if(!this._isTransitioning&&!t(this._element).hasClass(c)&&(this._parent&&0===(e=t.makeArray(t(this._parent).find(p.ACTIVES).filter('[data-parent="'+this._config.parent+'"]'))).length&&(e=null),!(e&&(s=t(e).not(this._selector).data(n))&&s._isTransitioning))){var o=t.Event(h.SHOW);if(t(this._element).trigger(o),!o.isDefaultPrevented()){e&&(i._jQueryInterface.call(t(e).not(this._selector),"hide"),s||t(e).data(n,null));var a=this._getDimension();t(this._element).removeClass(u).addClass(f),this._element.style[a]=0,this._triggerArray.length>0&&t(this._triggerArray).removeClass(d).attr("aria-expanded",!0),this.setTransitioning(!0);var l=function(){t(r._element).removeClass(f).addClass(u).addClass(c),r._element.style[a]="",r.setTransitioning(!1),t(r._element).trigger(h.SHOWN)};if(P.supportsTransitionEnd()){var _="scroll"+(a[0].toUpperCase()+a.slice(1));t(this._element).one(P.TRANSITION_END,l).emulateTransitionEnd(600),this._element.style[a]=this._element[_]+"px"}else l()}}},o.hide=function(){var e=this;if(!this._isTransitioning&&t(this._element).hasClass(c)){var n=t.Event(h.HIDE);if(t(this._element).trigger(n),!n.isDefaultPrevented()){var i=this._getDimension();if(this._element.style[i]=this._element.getBoundingClientRect()[i]+"px",P.reflow(this._element),t(this._element).addClass(f).removeClass(u).removeClass(c),this._triggerArray.length>0)for(var s=0;s<this._triggerArray.length;s++){var r=this._triggerArray[s],o=P.getSelectorFromElement(r);if(null!==o)t(o).hasClass(c)||t(r).addClass(d).attr("aria-expanded",!1)}this.setTransitioning(!0);var a=function(){e.setTransitioning(!1),t(e._element).removeClass(f).addClass(u).trigger(h.HIDDEN)};this._element.style[i]="",P.supportsTransitionEnd()?t(this._element).one(P.TRANSITION_END,a).emulateTransitionEnd(600):a()}}},o.setTransitioning=function(t){this._isTransitioning=t},o.dispose=function(){t.removeData(this._element,n),this._config=null,this._parent=null,this._element=null,this._triggerArray=null,this._isTransitioning=null},o._getConfig=function(t){return(t=r({},a,t)).toggle=Boolean(t.toggle),P.typeCheckConfig(e,t,l),t},o._getDimension=function(){return t(this._element).hasClass(_)?_:g},o._getParent=function(){var e=this,n=null;P.isElement(this._config.parent)?(n=this._config.parent,"undefined"!=typeof this._config.parent.jquery&&(n=this._config.parent[0])):n=t(this._config.parent)[0];var s='[data-toggle="collapse"][data-parent="'+this._config.parent+'"]';return t(n).find(s).each(function(t,n){e._addAriaAndCollapsedClass(i._getTargetFromElement(n),[n])}),n},o._addAriaAndCollapsedClass=function(e,n){if(e){var i=t(e).hasClass(c);n.length>0&&t(n).toggleClass(d,!i).attr("aria-expanded",i)}},i._getTargetFromElement=function(e){var n=P.getSelectorFromElement(e);return n?t(n)[0]:null},i._jQueryInterface=function(e){return this.each(function(){var s=t(this),o=s.data(n),l=r({},a,s.data(),"object"==typeof e&&e);if(!o&&l.toggle&&/show|hide/.test(e)&&(l.toggle=!1),o||(o=new i(this,l),s.data(n,o)),"string"==typeof e){if("undefined"==typeof o[e])throw new TypeError('No method named "'+e+'"');o[e]()}})},s(i,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return a}}]),i}();return t(document).on(h.CLICK_DATA_API,p.DATA_TOGGLE,function(e){"A"===e.currentTarget.tagName&&e.preventDefault();var i=t(this),s=P.getSelectorFromElement(this);t(s).each(function(){var e=t(this),s=e.data(n)?"toggle":i.data();m._jQueryInterface.call(e,s)})}),t.fn[e]=m._jQueryInterface,t.fn[e].Constructor=m,t.fn[e].noConflict=function(){return t.fn[e]=o,m._jQueryInterface},m}(e),W=function(t){var e="dropdown",i="bs.dropdown",o="."+i,a=".data-api",l=t.fn[e],h=new RegExp("38|40|27"),c={HIDE:"hide"+o,HIDDEN:"hidden"+o,SHOW:"show"+o,SHOWN:"shown"+o,CLICK:"click"+o,CLICK_DATA_API:"click"+o+a,KEYDOWN_DATA_API:"keydown"+o+a,KEYUP_DATA_API:"keyup"+o+a},u="disabled",f="show",d="dropup",_="dropright",g="dropleft",p="dropdown-menu-right",m="dropdown-menu-left",v="position-static",E='[data-toggle="dropdown"]',T=".dropdown form",y=".dropdown-menu",C=".navbar-nav",I=".dropdown-menu .dropdown-item:not(.disabled)",A="top-start",b="top-end",D="bottom-start",S="bottom-end",w="right-start",N="left-start",O={offset:0,flip:!0,boundary:"scrollParent"},k={offset:"(number|string|function)",flip:"boolean",boundary:"(string|element)"},L=function(){function a(t,e){this._element=t,this._popper=null,this._config=this._getConfig(e),this._menu=this._getMenuElement(),this._inNavbar=this._detectNavbar(),this._addEventListeners()}var l=a.prototype;return l.toggle=function(){if(!this._element.disabled&&!t(this._element).hasClass(u)){var e=a._getParentFromElement(this._element),i=t(this._menu).hasClass(f);if(a._clearMenus(),!i){var s={relatedTarget:this._element},r=t.Event(c.SHOW,s);if(t(e).trigger(r),!r.isDefaultPrevented()){if(!this._inNavbar){if("undefined"==typeof n)throw new TypeError("Bootstrap dropdown require Popper.js (https://popper.js.org)");var o=this._element;t(e).hasClass(d)&&(t(this._menu).hasClass(m)||t(this._menu).hasClass(p))&&(o=e),"scrollParent"!==this._config.boundary&&t(e).addClass(v),this._popper=new n(o,this._menu,this._getPopperConfig())}"ontouchstart"in document.documentElement&&0===t(e).closest(C).length&&t("body").children().on("mouseover",null,t.noop),this._element.focus(),this._element.setAttribute("aria-expanded",!0),t(this._menu).toggleClass(f),t(e).toggleClass(f).trigger(t.Event(c.SHOWN,s))}}}},l.dispose=function(){t.removeData(this._element,i),t(this._element).off(o),this._element=null,this._menu=null,null!==this._popper&&(this._popper.destroy(),this._popper=null)},l.update=function(){this._inNavbar=this._detectNavbar(),null!==this._popper&&this._popper.scheduleUpdate()},l._addEventListeners=function(){var e=this;t(this._element).on(c.CLICK,function(t){t.preventDefault(),t.stopPropagation(),e.toggle()})},l._getConfig=function(n){return n=r({},this.constructor.Default,t(this._element).data(),n),P.typeCheckConfig(e,n,this.constructor.DefaultType),n},l._getMenuElement=function(){if(!this._menu){var e=a._getParentFromElement(this._element);this._menu=t(e).find(y)[0]}return this._menu},l._getPlacement=function(){var e=t(this._element).parent(),n=D;return e.hasClass(d)?(n=A,t(this._menu).hasClass(p)&&(n=b)):e.hasClass(_)?n=w:e.hasClass(g)?n=N:t(this._menu).hasClass(p)&&(n=S),n},l._detectNavbar=function(){return t(this._element).closest(".navbar").length>0},l._getPopperConfig=function(){var t=this,e={};return"function"==typeof this._config.offset?e.fn=function(e){return e.offsets=r({},e.offsets,t._config.offset(e.offsets)||{}),e}:e.offset=this._config.offset,{placement:this._getPlacement(),modifiers:{offset:e,flip:{enabled:this._config.flip},preventOverflow:{boundariesElement:this._config.boundary}}}},a._jQueryInterface=function(e){return this.each(function(){var n=t(this).data(i);if(n||(n=new a(this,"object"==typeof e?e:null),t(this).data(i,n)),"string"==typeof e){if("undefined"==typeof n[e])throw new TypeError('No method named "'+e+'"');n[e]()}})},a._clearMenus=function(e){if(!e||3!==e.which&&("keyup"!==e.type||9===e.which))for(var n=t.makeArray(t(E)),s=0;s<n.length;s++){var r=a._getParentFromElement(n[s]),o=t(n[s]).data(i),l={relatedTarget:n[s]};if(o){var h=o._menu;if(t(r).hasClass(f)&&!(e&&("click"===e.type&&/input|textarea/i.test(e.target.tagName)||"keyup"===e.type&&9===e.which)&&t.contains(r,e.target))){var u=t.Event(c.HIDE,l);t(r).trigger(u),u.isDefaultPrevented()||("ontouchstart"in document.documentElement&&t("body").children().off("mouseover",null,t.noop),n[s].setAttribute("aria-expanded","false"),t(h).removeClass(f),t(r).removeClass(f).trigger(t.Event(c.HIDDEN,l)))}}}},a._getParentFromElement=function(e){var n,i=P.getSelectorFromElement(e);return i&&(n=t(i)[0]),n||e.parentNode},a._dataApiKeydownHandler=function(e){if((/input|textarea/i.test(e.target.tagName)?!(32===e.which||27!==e.which&&(40!==e.which&&38!==e.which||t(e.target).closest(y).length)):h.test(e.which))&&(e.preventDefault(),e.stopPropagation(),!this.disabled&&!t(this).hasClass(u))){var n=a._getParentFromElement(this),i=t(n).hasClass(f);if((i||27===e.which&&32===e.which)&&(!i||27!==e.which&&32!==e.which)){var s=t(n).find(I).get();if(0!==s.length){var r=s.indexOf(e.target);38===e.which&&r>0&&r--,40===e.which&&r<s.length-1&&r++,r<0&&(r=0),s[r].focus()}}else{if(27===e.which){var o=t(n).find(E)[0];t(o).trigger("focus")}t(this).trigger("click")}}},s(a,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return O}},{key:"DefaultType",get:function(){return k}}]),a}();return t(document).on(c.KEYDOWN_DATA_API,E,L._dataApiKeydownHandler).on(c.KEYDOWN_DATA_API,y,L._dataApiKeydownHandler).on(c.CLICK_DATA_API+" "+c.KEYUP_DATA_API,L._clearMenus).on(c.CLICK_DATA_API,E,function(e){e.preventDefault(),e.stopPropagation(),L._jQueryInterface.call(t(this),"toggle")}).on(c.CLICK_DATA_API,T,function(t){t.stopPropagation()}),t.fn[e]=L._jQueryInterface,t.fn[e].Constructor=L,t.fn[e].noConflict=function(){return t.fn[e]=l,L._jQueryInterface},L}(e),M=function(t){var e="modal",n="bs.modal",i="."+n,o=t.fn.modal,a={backdrop:!0,keyboard:!0,focus:!0,show:!0},l={backdrop:"(boolean|string)",keyboard:"boolean",focus:"boolean",show:"boolean"},h={HIDE:"hide"+i,HIDDEN:"hidden"+i,SHOW:"show"+i,SHOWN:"shown"+i,FOCUSIN:"focusin"+i,RESIZE:"resize"+i,CLICK_DISMISS:"click.dismiss"+i,KEYDOWN_DISMISS:"keydown.dismiss"+i,MOUSEUP_DISMISS:"mouseup.dismiss"+i,MOUSEDOWN_DISMISS:"mousedown.dismiss"+i,CLICK_DATA_API:"click"+i+".data-api"},c="modal-scrollbar-measure",u="modal-backdrop",f="modal-open",d="fade",_="show",g={DIALOG:".modal-dialog",DATA_TOGGLE:'[data-toggle="modal"]',DATA_DISMISS:'[data-dismiss="modal"]',FIXED_CONTENT:".fixed-top, .fixed-bottom, .is-fixed, .sticky-top",STICKY_CONTENT:".sticky-top",NAVBAR_TOGGLER:".navbar-toggler"},p=function(){function o(e,n){this._config=this._getConfig(n),this._element=e,this._dialog=t(e).find(g.DIALOG)[0],this._backdrop=null,this._isShown=!1,this._isBodyOverflowing=!1,this._ignoreBackdropClick=!1,this._originalBodyPadding=0,this._scrollbarWidth=0}var p=o.prototype;return p.toggle=function(t){return this._isShown?this.hide():this.show(t)},p.show=function(e){var n=this;if(!this._isTransitioning&&!this._isShown){P.supportsTransitionEnd()&&t(this._element).hasClass(d)&&(this._isTransitioning=!0);var i=t.Event(h.SHOW,{relatedTarget:e});t(this._element).trigger(i),this._isShown||i.isDefaultPrevented()||(this._isShown=!0,this._checkScrollbar(),this._setScrollbar(),this._adjustDialog(),t(document.body).addClass(f),this._setEscapeEvent(),this._setResizeEvent(),t(this._element).on(h.CLICK_DISMISS,g.DATA_DISMISS,function(t){return n.hide(t)}),t(this._dialog).on(h.MOUSEDOWN_DISMISS,function(){t(n._element).one(h.MOUSEUP_DISMISS,function(e){t(e.target).is(n._element)&&(n._ignoreBackdropClick=!0)})}),this._showBackdrop(function(){return n._showElement(e)}))}},p.hide=function(e){var n=this;if(e&&e.preventDefault(),!this._isTransitioning&&this._isShown){var i=t.Event(h.HIDE);if(t(this._element).trigger(i),this._isShown&&!i.isDefaultPrevented()){this._isShown=!1;var s=P.supportsTransitionEnd()&&t(this._element).hasClass(d);s&&(this._isTransitioning=!0),this._setEscapeEvent(),this._setResizeEvent(),t(document).off(h.FOCUSIN),t(this._element).removeClass(_),t(this._element).off(h.CLICK_DISMISS),t(this._dialog).off(h.MOUSEDOWN_DISMISS),s?t(this._element).one(P.TRANSITION_END,function(t){return n._hideModal(t)}).emulateTransitionEnd(300):this._hideModal()}}},p.dispose=function(){t.removeData(this._element,n),t(window,document,this._element,this._backdrop).off(i),this._config=null,this._element=null,this._dialog=null,this._backdrop=null,this._isShown=null,this._isBodyOverflowing=null,this._ignoreBackdropClick=null,this._scrollbarWidth=null},p.handleUpdate=function(){this._adjustDialog()},p._getConfig=function(t){return t=r({},a,t),P.typeCheckConfig(e,t,l),t},p._showElement=function(e){var n=this,i=P.supportsTransitionEnd()&&t(this._element).hasClass(d);this._element.parentNode&&this._element.parentNode.nodeType===Node.ELEMENT_NODE||document.body.appendChild(this._element),this._element.style.display="block",this._element.removeAttribute("aria-hidden"),this._element.scrollTop=0,i&&P.reflow(this._element),t(this._element).addClass(_),this._config.focus&&this._enforceFocus();var s=t.Event(h.SHOWN,{relatedTarget:e}),r=function(){n._config.focus&&n._element.focus(),n._isTransitioning=!1,t(n._element).trigger(s)};i?t(this._dialog).one(P.TRANSITION_END,r).emulateTransitionEnd(300):r()},p._enforceFocus=function(){var e=this;t(document).off(h.FOCUSIN).on(h.FOCUSIN,function(n){document!==n.target&&e._element!==n.target&&0===t(e._element).has(n.target).length&&e._element.focus()})},p._setEscapeEvent=function(){var e=this;this._isShown&&this._config.keyboard?t(this._element).on(h.KEYDOWN_DISMISS,function(t){27===t.which&&(t.preventDefault(),e.hide())}):this._isShown||t(this._element).off(h.KEYDOWN_DISMISS)},p._setResizeEvent=function(){var e=this;this._isShown?t(window).on(h.RESIZE,function(t){return e.handleUpdate(t)}):t(window).off(h.RESIZE)},p._hideModal=function(){var e=this;this._element.style.display="none",this._element.setAttribute("aria-hidden",!0),this._isTransitioning=!1,this._showBackdrop(function(){t(document.body).removeClass(f),e._resetAdjustments(),e._resetScrollbar(),t(e._element).trigger(h.HIDDEN)})},p._removeBackdrop=function(){this._backdrop&&(t(this._backdrop).remove(),this._backdrop=null)},p._showBackdrop=function(e){var n=this,i=t(this._element).hasClass(d)?d:"";if(this._isShown&&this._config.backdrop){var s=P.supportsTransitionEnd()&&i;if(this._backdrop=document.createElement("div"),this._backdrop.className=u,i&&t(this._backdrop).addClass(i),t(this._backdrop).appendTo(document.body),t(this._element).on(h.CLICK_DISMISS,function(t){n._ignoreBackdropClick?n._ignoreBackdropClick=!1:t.target===t.currentTarget&&("static"===n._config.backdrop?n._element.focus():n.hide())}),s&&P.reflow(this._backdrop),t(this._backdrop).addClass(_),!e)return;if(!s)return void e();t(this._backdrop).one(P.TRANSITION_END,e).emulateTransitionEnd(150)}else if(!this._isShown&&this._backdrop){t(this._backdrop).removeClass(_);var r=function(){n._removeBackdrop(),e&&e()};P.supportsTransitionEnd()&&t(this._element).hasClass(d)?t(this._backdrop).one(P.TRANSITION_END,r).emulateTransitionEnd(150):r()}else e&&e()},p._adjustDialog=function(){var t=this._element.scrollHeight>document.documentElement.clientHeight;!this._isBodyOverflowing&&t&&(this._element.style.paddingLeft=this._scrollbarWidth+"px"),this._isBodyOverflowing&&!t&&(this._element.style.paddingRight=this._scrollbarWidth+"px")},p._resetAdjustments=function(){this._element.style.paddingLeft="",this._element.style.paddingRight=""},p._checkScrollbar=function(){var t=document.body.getBoundingClientRect();this._isBodyOverflowing=t.left+t.right<window.innerWidth,this._scrollbarWidth=this._getScrollbarWidth()},p._setScrollbar=function(){var e=this;if(this._isBodyOverflowing){t(g.FIXED_CONTENT).each(function(n,i){var s=t(i)[0].style.paddingRight,r=t(i).css("padding-right");t(i).data("padding-right",s).css("padding-right",parseFloat(r)+e._scrollbarWidth+"px")}),t(g.STICKY_CONTENT).each(function(n,i){var s=t(i)[0].style.marginRight,r=t(i).css("margin-right");t(i).data("margin-right",s).css("margin-right",parseFloat(r)-e._scrollbarWidth+"px")}),t(g.NAVBAR_TOGGLER).each(function(n,i){var s=t(i)[0].style.marginRight,r=t(i).css("margin-right");t(i).data("margin-right",s).css("margin-right",parseFloat(r)+e._scrollbarWidth+"px")});var n=document.body.style.paddingRight,i=t("body").css("padding-right");t("body").data("padding-right",n).css("padding-right",parseFloat(i)+this._scrollbarWidth+"px")}},p._resetScrollbar=function(){t(g.FIXED_CONTENT).each(function(e,n){var i=t(n).data("padding-right");"undefined"!=typeof i&&t(n).css("padding-right",i).removeData("padding-right")}),t(g.STICKY_CONTENT+", "+g.NAVBAR_TOGGLER).each(function(e,n){var i=t(n).data("margin-right");"undefined"!=typeof i&&t(n).css("margin-right",i).removeData("margin-right")});var e=t("body").data("padding-right");"undefined"!=typeof e&&t("body").css("padding-right",e).removeData("padding-right")},p._getScrollbarWidth=function(){var t=document.createElement("div");t.className=c,document.body.appendChild(t);var e=t.getBoundingClientRect().width-t.clientWidth;return document.body.removeChild(t),e},o._jQueryInterface=function(e,i){return this.each(function(){var s=t(this).data(n),a=r({},o.Default,t(this).data(),"object"==typeof e&&e);if(s||(s=new o(this,a),t(this).data(n,s)),"string"==typeof e){if("undefined"==typeof s[e])throw new TypeError('No method named "'+e+'"');s[e](i)}else a.show&&s.show(i)})},s(o,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return a}}]),o}();return t(document).on(h.CLICK_DATA_API,g.DATA_TOGGLE,function(e){var i,s=this,o=P.getSelectorFromElement(this);o&&(i=t(o)[0]);var a=t(i).data(n)?"toggle":r({},t(i).data(),t(this).data());"A"!==this.tagName&&"AREA"!==this.tagName||e.preventDefault();var l=t(i).one(h.SHOW,function(e){e.isDefaultPrevented()||l.one(h.HIDDEN,function(){t(s).is(":visible")&&s.focus()})});p._jQueryInterface.call(t(i),a,this)}),t.fn.modal=p._jQueryInterface,t.fn.modal.Constructor=p,t.fn.modal.noConflict=function(){return t.fn.modal=o,p._jQueryInterface},p}(e),U=function(t){var e="tooltip",i="bs.tooltip",o="."+i,a=t.fn[e],l=new RegExp("(^|\\s)bs-tooltip\\S+","g"),h={animation:"boolean",template:"string",title:"(string|element|function)",trigger:"string",delay:"(number|object)",html:"boolean",selector:"(string|boolean)",placement:"(string|function)",offset:"(number|string)",container:"(string|element|boolean)",fallbackPlacement:"(string|array)",boundary:"(string|element)"},c={AUTO:"auto",TOP:"top",RIGHT:"right",BOTTOM:"bottom",LEFT:"left"},u={animation:!0,template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,selector:!1,placement:"top",offset:0,container:!1,fallbackPlacement:"flip",boundary:"scrollParent"},f="show",d="out",_={HIDE:"hide"+o,HIDDEN:"hidden"+o,SHOW:"show"+o,SHOWN:"shown"+o,INSERTED:"inserted"+o,CLICK:"click"+o,FOCUSIN:"focusin"+o,FOCUSOUT:"focusout"+o,MOUSEENTER:"mouseenter"+o,MOUSELEAVE:"mouseleave"+o},g="fade",p="show",m=".tooltip-inner",v=".arrow",E="hover",T="focus",y="click",C="manual",I=function(){function a(t,e){if("undefined"==typeof n)throw new TypeError("Bootstrap tooltips require Popper.js (https://popper.js.org)");this._isEnabled=!0,this._timeout=0,this._hoverState="",this._activeTrigger={},this._popper=null,this.element=t,this.config=this._getConfig(e),this.tip=null,this._setListeners()}var I=a.prototype;return I.enable=function(){this._isEnabled=!0},I.disable=function(){this._isEnabled=!1},I.toggleEnabled=function(){this._isEnabled=!this._isEnabled},I.toggle=function(e){if(this._isEnabled)if(e){var n=this.constructor.DATA_KEY,i=t(e.currentTarget).data(n);i||(i=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(n,i)),i._activeTrigger.click=!i._activeTrigger.click,i._isWithActiveTrigger()?i._enter(null,i):i._leave(null,i)}else{if(t(this.getTipElement()).hasClass(p))return void this._leave(null,this);this._enter(null,this)}},I.dispose=function(){clearTimeout(this._timeout),t.removeData(this.element,this.constructor.DATA_KEY),t(this.element).off(this.constructor.EVENT_KEY),t(this.element).closest(".modal").off("hide.bs.modal"),this.tip&&t(this.tip).remove(),this._isEnabled=null,this._timeout=null,this._hoverState=null,this._activeTrigger=null,null!==this._popper&&this._popper.destroy(),this._popper=null,this.element=null,this.config=null,this.tip=null},I.show=function(){var e=this;if("none"===t(this.element).css("display"))throw new Error("Please use show on visible elements");var i=t.Event(this.constructor.Event.SHOW);if(this.isWithContent()&&this._isEnabled){t(this.element).trigger(i);var s=t.contains(this.element.ownerDocument.documentElement,this.element);if(i.isDefaultPrevented()||!s)return;var r=this.getTipElement(),o=P.getUID(this.constructor.NAME);r.setAttribute("id",o),this.element.setAttribute("aria-describedby",o),this.setContent(),this.config.animation&&t(r).addClass(g);var l="function"==typeof this.config.placement?this.config.placement.call(this,r,this.element):this.config.placement,h=this._getAttachment(l);this.addAttachmentClass(h);var c=!1===this.config.container?document.body:t(this.config.container);t(r).data(this.constructor.DATA_KEY,this),t.contains(this.element.ownerDocument.documentElement,this.tip)||t(r).appendTo(c),t(this.element).trigger(this.constructor.Event.INSERTED),this._popper=new n(this.element,r,{placement:h,modifiers:{offset:{offset:this.config.offset},flip:{behavior:this.config.fallbackPlacement},arrow:{element:v},preventOverflow:{boundariesElement:this.config.boundary}},onCreate:function(t){t.originalPlacement!==t.placement&&e._handlePopperPlacementChange(t)},onUpdate:function(t){e._handlePopperPlacementChange(t)}}),t(r).addClass(p),"ontouchstart"in document.documentElement&&t("body").children().on("mouseover",null,t.noop);var u=function(){e.config.animation&&e._fixTransition();var n=e._hoverState;e._hoverState=null,t(e.element).trigger(e.constructor.Event.SHOWN),n===d&&e._leave(null,e)};P.supportsTransitionEnd()&&t(this.tip).hasClass(g)?t(this.tip).one(P.TRANSITION_END,u).emulateTransitionEnd(a._TRANSITION_DURATION):u()}},I.hide=function(e){var n=this,i=this.getTipElement(),s=t.Event(this.constructor.Event.HIDE),r=function(){n._hoverState!==f&&i.parentNode&&i.parentNode.removeChild(i),n._cleanTipClass(),n.element.removeAttribute("aria-describedby"),t(n.element).trigger(n.constructor.Event.HIDDEN),null!==n._popper&&n._popper.destroy(),e&&e()};t(this.element).trigger(s),s.isDefaultPrevented()||(t(i).removeClass(p),"ontouchstart"in document.documentElement&&t("body").children().off("mouseover",null,t.noop),this._activeTrigger[y]=!1,this._activeTrigger[T]=!1,this._activeTrigger[E]=!1,P.supportsTransitionEnd()&&t(this.tip).hasClass(g)?t(i).one(P.TRANSITION_END,r).emulateTransitionEnd(150):r(),this._hoverState="")},I.update=function(){null!==this._popper&&this._popper.scheduleUpdate()},I.isWithContent=function(){return Boolean(this.getTitle())},I.addAttachmentClass=function(e){t(this.getTipElement()).addClass("bs-tooltip-"+e)},I.getTipElement=function(){return this.tip=this.tip||t(this.config.template)[0],this.tip},I.setContent=function(){var e=t(this.getTipElement());this.setElementContent(e.find(m),this.getTitle()),e.removeClass(g+" "+p)},I.setElementContent=function(e,n){var i=this.config.html;"object"==typeof n&&(n.nodeType||n.jquery)?i?t(n).parent().is(e)||e.empty().append(n):e.text(t(n).text()):e[i?"html":"text"](n)},I.getTitle=function(){var t=this.element.getAttribute("data-original-title");return t||(t="function"==typeof this.config.title?this.config.title.call(this.element):this.config.title),t},I._getAttachment=function(t){return c[t.toUpperCase()]},I._setListeners=function(){var e=this;this.config.trigger.split(" ").forEach(function(n){if("click"===n)t(e.element).on(e.constructor.Event.CLICK,e.config.selector,function(t){return e.toggle(t)});else if(n!==C){var i=n===E?e.constructor.Event.MOUSEENTER:e.constructor.Event.FOCUSIN,s=n===E?e.constructor.Event.MOUSELEAVE:e.constructor.Event.FOCUSOUT;t(e.element).on(i,e.config.selector,function(t){return e._enter(t)}).on(s,e.config.selector,function(t){return e._leave(t)})}t(e.element).closest(".modal").on("hide.bs.modal",function(){return e.hide()})}),this.config.selector?this.config=r({},this.config,{trigger:"manual",selector:""}):this._fixTitle()},I._fixTitle=function(){var t=typeof this.element.getAttribute("data-original-title");(this.element.getAttribute("title")||"string"!==t)&&(this.element.setAttribute("data-original-title",this.element.getAttribute("title")||""),this.element.setAttribute("title",""))},I._enter=function(e,n){var i=this.constructor.DATA_KEY;(n=n||t(e.currentTarget).data(i))||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(i,n)),e&&(n._activeTrigger["focusin"===e.type?T:E]=!0),t(n.getTipElement()).hasClass(p)||n._hoverState===f?n._hoverState=f:(clearTimeout(n._timeout),n._hoverState=f,n.config.delay&&n.config.delay.show?n._timeout=setTimeout(function(){n._hoverState===f&&n.show()},n.config.delay.show):n.show())},I._leave=function(e,n){var i=this.constructor.DATA_KEY;(n=n||t(e.currentTarget).data(i))||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(i,n)),e&&(n._activeTrigger["focusout"===e.type?T:E]=!1),n._isWithActiveTrigger()||(clearTimeout(n._timeout),n._hoverState=d,n.config.delay&&n.config.delay.hide?n._timeout=setTimeout(function(){n._hoverState===d&&n.hide()},n.config.delay.hide):n.hide())},I._isWithActiveTrigger=function(){for(var t in this._activeTrigger)if(this._activeTrigger[t])return!0;return!1},I._getConfig=function(n){return"number"==typeof(n=r({},this.constructor.Default,t(this.element).data(),n)).delay&&(n.delay={show:n.delay,hide:n.delay}),"number"==typeof n.title&&(n.title=n.title.toString()),"number"==typeof n.content&&(n.content=n.content.toString()),P.typeCheckConfig(e,n,this.constructor.DefaultType),n},I._getDelegateConfig=function(){var t={};if(this.config)for(var e in this.config)this.constructor.Default[e]!==this.config[e]&&(t[e]=this.config[e]);return t},I._cleanTipClass=function(){var e=t(this.getTipElement()),n=e.attr("class").match(l);null!==n&&n.length>0&&e.removeClass(n.join(""))},I._handlePopperPlacementChange=function(t){this._cleanTipClass(),this.addAttachmentClass(this._getAttachment(t.placement))},I._fixTransition=function(){var e=this.getTipElement(),n=this.config.animation;null===e.getAttribute("x-placement")&&(t(e).removeClass(g),this.config.animation=!1,this.hide(),this.show(),this.config.animation=n)},a._jQueryInterface=function(e){return this.each(function(){var n=t(this).data(i),s="object"==typeof e&&e;if((n||!/dispose|hide/.test(e))&&(n||(n=new a(this,s),t(this).data(i,n)),"string"==typeof e)){if("undefined"==typeof n[e])throw new TypeError('No method named "'+e+'"');n[e]()}})},s(a,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return u}},{key:"NAME",get:function(){return e}},{key:"DATA_KEY",get:function(){return i}},{key:"Event",get:function(){return _}},{key:"EVENT_KEY",get:function(){return o}},{key:"DefaultType",get:function(){return h}}]),a}();return t.fn[e]=I._jQueryInterface,t.fn[e].Constructor=I,t.fn[e].noConflict=function(){return t.fn[e]=a,I._jQueryInterface},I}(e),x=function(t){var e="popover",n="bs.popover",i="."+n,o=t.fn[e],a=new RegExp("(^|\\s)bs-popover\\S+","g"),l=r({},U.Default,{placement:"right",trigger:"click",content:"",template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'}),h=r({},U.DefaultType,{content:"(string|element|function)"}),c="fade",u="show",f=".popover-header",d=".popover-body",_={HIDE:"hide"+i,HIDDEN:"hidden"+i,SHOW:"show"+i,SHOWN:"shown"+i,INSERTED:"inserted"+i,CLICK:"click"+i,FOCUSIN:"focusin"+i,FOCUSOUT:"focusout"+i,MOUSEENTER:"mouseenter"+i,MOUSELEAVE:"mouseleave"+i},g=function(r){var o,g;function p(){return r.apply(this,arguments)||this}g=r,(o=p).prototype=Object.create(g.prototype),o.prototype.constructor=o,o.__proto__=g;var m=p.prototype;return m.isWithContent=function(){return this.getTitle()||this._getContent()},m.addAttachmentClass=function(e){t(this.getTipElement()).addClass("bs-popover-"+e)},m.getTipElement=function(){return this.tip=this.tip||t(this.config.template)[0],this.tip},m.setContent=function(){var e=t(this.getTipElement());this.setElementContent(e.find(f),this.getTitle());var n=this._getContent();"function"==typeof n&&(n=n.call(this.element)),this.setElementContent(e.find(d),n),e.removeClass(c+" "+u)},m._getContent=function(){return this.element.getAttribute("data-content")||this.config.content},m._cleanTipClass=function(){var e=t(this.getTipElement()),n=e.attr("class").match(a);null!==n&&n.length>0&&e.removeClass(n.join(""))},p._jQueryInterface=function(e){return this.each(function(){var i=t(this).data(n),s="object"==typeof e?e:null;if((i||!/destroy|hide/.test(e))&&(i||(i=new p(this,s),t(this).data(n,i)),"string"==typeof e)){if("undefined"==typeof i[e])throw new TypeError('No method named "'+e+'"');i[e]()}})},s(p,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return l}},{key:"NAME",get:function(){return e}},{key:"DATA_KEY",get:function(){return n}},{key:"Event",get:function(){return _}},{key:"EVENT_KEY",get:function(){return i}},{key:"DefaultType",get:function(){return h}}]),p}(U);return t.fn[e]=g._jQueryInterface,t.fn[e].Constructor=g,t.fn[e].noConflict=function(){return t.fn[e]=o,g._jQueryInterface},g}(e),K=function(t){var e="scrollspy",n="bs.scrollspy",i="."+n,o=t.fn[e],a={offset:10,method:"auto",target:""},l={offset:"number",method:"string",target:"(string|element)"},h={ACTIVATE:"activate"+i,SCROLL:"scroll"+i,LOAD_DATA_API:"load"+i+".data-api"},c="dropdown-item",u="active",f={DATA_SPY:'[data-spy="scroll"]',ACTIVE:".active",NAV_LIST_GROUP:".nav, .list-group",NAV_LINKS:".nav-link",NAV_ITEMS:".nav-item",LIST_ITEMS:".list-group-item",DROPDOWN:".dropdown",DROPDOWN_ITEMS:".dropdown-item",DROPDOWN_TOGGLE:".dropdown-toggle"},d="offset",_="position",g=function(){function o(e,n){var i=this;this._element=e,this._scrollElement="BODY"===e.tagName?window:e,this._config=this._getConfig(n),this._selector=this._config.target+" "+f.NAV_LINKS+","+this._config.target+" "+f.LIST_ITEMS+","+this._config.target+" "+f.DROPDOWN_ITEMS,this._offsets=[],this._targets=[],this._activeTarget=null,this._scrollHeight=0,t(this._scrollElement).on(h.SCROLL,function(t){return i._process(t)}),this.refresh(),this._process()}var g=o.prototype;return g.refresh=function(){var e=this,n=this._scrollElement===this._scrollElement.window?d:_,i="auto"===this._config.method?n:this._config.method,s=i===_?this._getScrollTop():0;this._offsets=[],this._targets=[],this._scrollHeight=this._getScrollHeight(),t.makeArray(t(this._selector)).map(function(e){var n,r=P.getSelectorFromElement(e);if(r&&(n=t(r)[0]),n){var o=n.getBoundingClientRect();if(o.width||o.height)return[t(n)[i]().top+s,r]}return null}).filter(function(t){return t}).sort(function(t,e){return t[0]-e[0]}).forEach(function(t){e._offsets.push(t[0]),e._targets.push(t[1])})},g.dispose=function(){t.removeData(this._element,n),t(this._scrollElement).off(i),this._element=null,this._scrollElement=null,this._config=null,this._selector=null,this._offsets=null,this._targets=null,this._activeTarget=null,this._scrollHeight=null},g._getConfig=function(n){if("string"!=typeof(n=r({},a,n)).target){var i=t(n.target).attr("id");i||(i=P.getUID(e),t(n.target).attr("id",i)),n.target="#"+i}return P.typeCheckConfig(e,n,l),n},g._getScrollTop=function(){return this._scrollElement===window?this._scrollElement.pageYOffset:this._scrollElement.scrollTop},g._getScrollHeight=function(){return this._scrollElement.scrollHeight||Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)},g._getOffsetHeight=function(){return this._scrollElement===window?window.innerHeight:this._scrollElement.getBoundingClientRect().height},g._process=function(){var t=this._getScrollTop()+this._config.offset,e=this._getScrollHeight(),n=this._config.offset+e-this._getOffsetHeight();if(this._scrollHeight!==e&&this.refresh(),t>=n){var i=this._targets[this._targets.length-1];this._activeTarget!==i&&this._activate(i)}else{if(this._activeTarget&&t<this._offsets[0]&&this._offsets[0]>0)return this._activeTarget=null,void this._clear();for(var s=this._offsets.length;s--;){this._activeTarget!==this._targets[s]&&t>=this._offsets[s]&&("undefined"==typeof this._offsets[s+1]||t<this._offsets[s+1])&&this._activate(this._targets[s])}}},g._activate=function(e){this._activeTarget=e,this._clear();var n=this._selector.split(",");n=n.map(function(t){return t+'[data-target="'+e+'"],'+t+'[href="'+e+'"]'});var i=t(n.join(","));i.hasClass(c)?(i.closest(f.DROPDOWN).find(f.DROPDOWN_TOGGLE).addClass(u),i.addClass(u)):(i.addClass(u),i.parents(f.NAV_LIST_GROUP).prev(f.NAV_LINKS+", "+f.LIST_ITEMS).addClass(u),i.parents(f.NAV_LIST_GROUP).prev(f.NAV_ITEMS).children(f.NAV_LINKS).addClass(u)),t(this._scrollElement).trigger(h.ACTIVATE,{relatedTarget:e})},g._clear=function(){t(this._selector).filter(f.ACTIVE).removeClass(u)},o._jQueryInterface=function(e){return this.each(function(){var i=t(this).data(n);if(i||(i=new o(this,"object"==typeof e&&e),t(this).data(n,i)),"string"==typeof e){if("undefined"==typeof i[e])throw new TypeError('No method named "'+e+'"');i[e]()}})},s(o,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return a}}]),o}();return t(window).on(h.LOAD_DATA_API,function(){for(var e=t.makeArray(t(f.DATA_SPY)),n=e.length;n--;){var i=t(e[n]);g._jQueryInterface.call(i,i.data())}}),t.fn[e]=g._jQueryInterface,t.fn[e].Constructor=g,t.fn[e].noConflict=function(){return t.fn[e]=o,g._jQueryInterface},g}(e),V=function(t){var e="bs.tab",n="."+e,i=t.fn.tab,r={HIDE:"hide"+n,HIDDEN:"hidden"+n,SHOW:"show"+n,SHOWN:"shown"+n,CLICK_DATA_API:"click.bs.tab.data-api"},o="dropdown-menu",a="active",l="disabled",h="fade",c="show",u=".dropdown",f=".nav, .list-group",d=".active",_="> li > .active",g='[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',p=".dropdown-toggle",m="> .dropdown-menu .active",v=function(){function n(t){this._element=t}var i=n.prototype;return i.show=function(){var e=this;if(!(this._element.parentNode&&this._element.parentNode.nodeType===Node.ELEMENT_NODE&&t(this._element).hasClass(a)||t(this._element).hasClass(l))){var n,i,s=t(this._element).closest(f)[0],o=P.getSelectorFromElement(this._element);if(s){var h="UL"===s.nodeName?_:d;i=(i=t.makeArray(t(s).find(h)))[i.length-1]}var c=t.Event(r.HIDE,{relatedTarget:this._element}),u=t.Event(r.SHOW,{relatedTarget:i});if(i&&t(i).trigger(c),t(this._element).trigger(u),!u.isDefaultPrevented()&&!c.isDefaultPrevented()){o&&(n=t(o)[0]),this._activate(this._element,s);var g=function(){var n=t.Event(r.HIDDEN,{relatedTarget:e._element}),s=t.Event(r.SHOWN,{relatedTarget:i});t(i).trigger(n),t(e._element).trigger(s)};n?this._activate(n,n.parentNode,g):g()}}},i.dispose=function(){t.removeData(this._element,e),this._element=null},i._activate=function(e,n,i){var s=this,r=("UL"===n.nodeName?t(n).find(_):t(n).children(d))[0],o=i&&P.supportsTransitionEnd()&&r&&t(r).hasClass(h),a=function(){return s._transitionComplete(e,r,i)};r&&o?t(r).one(P.TRANSITION_END,a).emulateTransitionEnd(150):a()},i._transitionComplete=function(e,n,i){if(n){t(n).removeClass(c+" "+a);var s=t(n.parentNode).find(m)[0];s&&t(s).removeClass(a),"tab"===n.getAttribute("role")&&n.setAttribute("aria-selected",!1)}if(t(e).addClass(a),"tab"===e.getAttribute("role")&&e.setAttribute("aria-selected",!0),P.reflow(e),t(e).addClass(c),e.parentNode&&t(e.parentNode).hasClass(o)){var r=t(e).closest(u)[0];r&&t(r).find(p).addClass(a),e.setAttribute("aria-expanded",!0)}i&&i()},n._jQueryInterface=function(i){return this.each(function(){var s=t(this),r=s.data(e);if(r||(r=new n(this),s.data(e,r)),"string"==typeof i){if("undefined"==typeof r[i])throw new TypeError('No method named "'+i+'"');r[i]()}})},s(n,null,[{key:"VERSION",get:function(){return"4.0.0"}}]),n}();return t(document).on(r.CLICK_DATA_API,g,function(e){e.preventDefault(),v._jQueryInterface.call(t(this),"show")}),t.fn.tab=v._jQueryInterface,t.fn.tab.Constructor=v,t.fn.tab.noConflict=function(){return t.fn.tab=i,v._jQueryInterface},v}(e);!function(t){if("undefined"==typeof t)throw new TypeError("Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.");var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1===e[0]&&9===e[1]&&e[2]<1||e[0]>=4)throw new Error("Bootstrap's JavaScript requires at least jQuery v1.9.1 but less than v4.0.0")}(e),t.Util=P,t.Alert=L,t.Button=R,t.Carousel=j,t.Collapse=H,t.Dropdown=W,t.Modal=M,t.Popover=x,t.Scrollspy=K,t.Tab=V,t.Tooltip=U,Object.defineProperty(t,"__esModule",{value:!0})});
+//# sourceMappingURL=bootstrap.min.js.map
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/favicon.ico b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/favicon.ico
new file mode 100644
index 00000000..b48b3442
Binary files /dev/null and b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/favicon.ico differ
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/holder.min.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/holder.min.js
new file mode 100644
index 00000000..62255af4
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/holder.min.js
@@ -0,0 +1,13 @@
+/*!
+
+Holder - client side image placeholders
+Version 2.9.4+cabil
+© 2016 Ivan Malopinsky - http://imsky.co
+
+Site:     http://holderjs.com
+Issues:   https://github.com/imsky/holder/issues
+License:  MIT
+
+*/
+!function(e){if(e.document){var t=e.document;t.querySelectorAll||(t.querySelectorAll=function(n){var r,i=t.createElement("style"),o=[];for(t.documentElement.firstChild.appendChild(i),t._qsa=[],i.styleSheet.cssText=n+"{x-qsa:expression(document._qsa && document._qsa.push(this))}",e.scrollBy(0,0),i.parentNode.removeChild(i);t._qsa.length;)r=t._qsa.shift(),r.style.removeAttribute("x-qsa"),o.push(r);return t._qsa=null,o}),t.querySelector||(t.querySelector=function(e){var n=t.querySelectorAll(e);return n.length?n[0]:null}),t.getElementsByClassName||(t.getElementsByClassName=function(e){return e=String(e).replace(/^|\s+/g,"."),t.querySelectorAll(e)}),Object.keys||(Object.keys=function(e){if(e!==Object(e))throw TypeError("Object.keys called on non-object");var t,n=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.push(t);return n}),Array.prototype.forEach||(Array.prototype.forEach=function(e){if(void 0===this||null===this)throw TypeError();var t=Object(this),n=t.length>>>0;if("function"!=typeof e)throw TypeError();var r,i=arguments[1];for(r=0;r<n;r++)r in t&&e.call(i,t[r],r,t)}),function(e){var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";e.atob=e.atob||function(e){e=String(e);var n,r=0,i=[],o=0,a=0;if(e=e.replace(/\s/g,""),e.length%4===0&&(e=e.replace(/=+$/,"")),e.length%4===1)throw Error("InvalidCharacterError");if(/[^+\/0-9A-Za-z]/.test(e))throw Error("InvalidCharacterError");for(;r<e.length;)n=t.indexOf(e.charAt(r)),o=o<<6|n,a+=6,24===a&&(i.push(String.fromCharCode(o>>16&255)),i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o)),a=0,o=0),r+=1;return 12===a?(o>>=4,i.push(String.fromCharCode(255&o))):18===a&&(o>>=2,i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o))),i.join("")},e.btoa=e.btoa||function(e){e=String(e);var n,r,i,o,a,s,l,h=0,u=[];if(/[^\x00-\xFF]/.test(e))throw Error("InvalidCharacterError");for(;h<e.length;)n=e.charCodeAt(h++),r=e.charCodeAt(h++),i=e.charCodeAt(h++),o=n>>2,a=(3&n)<<4|r>>4,s=(15&r)<<2|i>>6,l=63&i,h===e.length+2?(s=64,l=64):h===e.length+1&&(l=64),u.push(t.charAt(o),t.charAt(a),t.charAt(s),t.charAt(l));return u.join("")}}(e),Object.prototype.hasOwnProperty||(Object.prototype.hasOwnProperty=function(e){var t=this.__proto__||this.constructor.prototype;return e in this&&(!(e in t)||t[e]!==this[e])}),function(){if("performance"in e==!1&&(e.performance={}),Date.now=Date.now||function(){return(new Date).getTime()},"now"in e.performance==!1){var t=Date.now();performance.timing&&performance.timing.navigationStart&&(t=performance.timing.navigationStart),e.performance.now=function(){return Date.now()-t}}}(),e.requestAnimationFrame||(e.webkitRequestAnimationFrame&&e.webkitCancelAnimationFrame?!function(e){e.requestAnimationFrame=function(t){return webkitRequestAnimationFrame(function(){t(e.performance.now())})},e.cancelAnimationFrame=e.webkitCancelAnimationFrame}(e):e.mozRequestAnimationFrame&&e.mozCancelAnimationFrame?!function(e){e.requestAnimationFrame=function(t){return mozRequestAnimationFrame(function(){t(e.performance.now())})},e.cancelAnimationFrame=e.mozCancelAnimationFrame}(e):!function(e){e.requestAnimationFrame=function(t){return e.setTimeout(t,1e3/60)},e.cancelAnimationFrame=e.clearTimeout}(e))}}(this),function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Holder=t():e.Holder=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){(function(t){function r(e,t,n,r){var a=i(n.substr(n.lastIndexOf(e.domain)),e);a&&o({mode:null,el:r,flags:a,engineSettings:t})}function i(e,t){var n={theme:k(O.settings.themes.gray,null),stylesheets:t.stylesheets,instanceOptions:t},r=e.indexOf("?"),i=[e];r!==-1&&(i=[e.slice(0,r),e.slice(r+1)]);var o=i[0].split("/");n.holderURL=e;var a=o[1],s=a.match(/([\d]+p?)x([\d]+p?)/);if(!s)return!1;if(n.fluid=a.indexOf("p")!==-1,n.dimensions={width:s[1].replace("p","%"),height:s[2].replace("p","%")},2===i.length){var l=v.parse(i[1]);if(w.truthy(l.ratio)){n.fluid=!0;var h=parseFloat(n.dimensions.width.replace("%","")),u=parseFloat(n.dimensions.height.replace("%",""));u=Math.floor(100*(u/h)),h=100,n.dimensions.width=h+"%",n.dimensions.height=u+"%"}if(n.auto=w.truthy(l.auto),l.bg&&(n.theme.bg=w.parseColor(l.bg)),l.fg&&(n.theme.fg=w.parseColor(l.fg)),l.bg&&!l.fg&&(n.autoFg=!0),l.theme&&n.instanceOptions.themes.hasOwnProperty(l.theme)&&(n.theme=k(n.instanceOptions.themes[l.theme],null)),l.text&&(n.text=l.text),l.textmode&&(n.textmode=l.textmode),l.size&&(n.size=l.size),l.font&&(n.font=l.font),l.align&&(n.align=l.align),l.lineWrap&&(n.lineWrap=l.lineWrap),n.nowrap=w.truthy(l.nowrap),n.outline=w.truthy(l.outline),w.truthy(l.random)){O.vars.cache.themeKeys=O.vars.cache.themeKeys||Object.keys(n.instanceOptions.themes);var c=O.vars.cache.themeKeys[0|Math.random()*O.vars.cache.themeKeys.length];n.theme=k(n.instanceOptions.themes[c],null)}}return n}function o(e){var t=e.mode,n=e.el,r=e.flags,i=e.engineSettings,o=r.dimensions,s=r.theme,l=o.width+"x"+o.height;t=null==t?r.fluid?"fluid":"image":t;var c=/holder_([a-z]+)/g,d=!1;if(null!=r.text&&(s.text=r.text,"object"===n.nodeName.toLowerCase())){for(var f=s.text.split("\\n"),p=0;p<f.length;p++)f[p]=w.encodeHtmlEntity(f[p]);s.text=f.join("\\n")}if(s.text){var g=s.text.match(c);null!==g&&g.forEach(function(e){"holder_dimensions"===e&&(s.text=s.text.replace(e,l))})}var m=r.holderURL,v=k(i,null);if(r.font&&(s.font=r.font,!v.noFontFallback&&"img"===n.nodeName.toLowerCase()&&O.setup.supportsCanvas&&"svg"===v.renderer&&(v=k(v,{renderer:"canvas"}))),r.font&&"canvas"==v.renderer&&(v.reRender=!0),"background"==t)null==n.getAttribute("data-background-src")&&x.setAttr(n,{"data-background-src":m});else{var y={};y[O.vars.dataAttr]=m,x.setAttr(n,y)}r.theme=s,n.holderData={flags:r,engineSettings:v},"image"!=t&&"fluid"!=t||x.setAttr(n,{alt:s.text?d?s.text:s.text+" ["+l+"]":l});var b={mode:t,el:n,holderSettings:{dimensions:o,theme:s,flags:r},engineSettings:v};"image"==t?(r.auto||(n.style.width=o.width+"px",n.style.height=o.height+"px"),"html"==v.renderer?n.style.backgroundColor=s.bg:(a(b),"exact"==r.textmode&&(n.holderData.resizeUpdate=!0,O.vars.resizableImages.push(n),h(n)))):"background"==t&&"html"!=v.renderer?a(b):"fluid"==t&&(n.holderData.resizeUpdate=!0,"%"==o.height.slice(-1)?n.style.height=o.height:null!=r.auto&&r.auto||(n.style.height=o.height+"px"),"%"==o.width.slice(-1)?n.style.width=o.width:null!=r.auto&&r.auto||(n.style.width=o.width+"px"),"inline"!=n.style.display&&""!==n.style.display&&"none"!=n.style.display||(n.style.display="block"),u(n),"html"==v.renderer?n.style.backgroundColor=s.bg:(O.vars.resizableImages.push(n),h(n)))}function a(e){function n(){var t=null;switch(l.renderer){case"canvas":t=E(u,e);break;case"svg":t=C(u,e);break;default:throw"Holder: invalid renderer: "+l.renderer}return t}var r=null,i=e.mode,o=e.el,a=e.holderSettings,l=e.engineSettings;switch(l.renderer){case"svg":if(!O.setup.supportsSVG)return;break;case"canvas":if(!O.setup.supportsCanvas)return;break;default:return}var h={width:a.dimensions.width,height:a.dimensions.height,theme:a.theme,flags:a.flags},u=s(h);if(r=n(),null==r)throw"Holder: couldn't render placeholder";"background"==i?(o.style.backgroundImage="url("+r+")",l.noBackgroundSize||(o.style.backgroundSize=h.width+"px "+h.height+"px")):("img"===o.nodeName.toLowerCase()?x.setAttr(o,{src:r}):"object"===o.nodeName.toLowerCase()&&x.setAttr(o,{data:r,type:"image/svg+xml"}),l.reRender&&t.setTimeout(function(){var e=n();if(null==e)throw"Holder: couldn't render placeholder";"img"===o.nodeName.toLowerCase()?x.setAttr(o,{src:e}):"object"===o.nodeName.toLowerCase()&&x.setAttr(o,{data:e,type:"image/svg+xml"})},150)),x.setAttr(o,{"data-holder-rendered":!0})}function s(e){function t(e,t,n,r){t.width=n,t.height=r,e.width=Math.max(e.width,t.width),e.height+=t.height}var n=O.defaults.size;switch(parseFloat(e.theme.size)?n=e.theme.size:parseFloat(e.flags.size)&&(n=e.flags.size),e.font={family:e.theme.font?e.theme.font:"Arial, Helvetica, Open Sans, sans-serif",size:l(e.width,e.height,n,O.defaults.scale),units:e.theme.units?e.theme.units:O.defaults.units,weight:e.theme.fontweight?e.theme.fontweight:"bold"},e.text=e.theme.text||Math.floor(e.width)+"x"+Math.floor(e.height),e.noWrap=e.theme.nowrap||e.flags.nowrap,e.align=e.theme.align||e.flags.align||"center",e.flags.textmode){case"literal":e.text=e.flags.dimensions.width+"x"+e.flags.dimensions.height;break;case"exact":if(!e.flags.exactDimensions)break;e.text=Math.floor(e.flags.exactDimensions.width)+"x"+Math.floor(e.flags.exactDimensions.height)}var r=e.flags.lineWrap||O.setup.lineWrapRatio,i=e.width*r,o=i,a=new y({width:e.width,height:e.height}),s=a.Shape,h=new s.Rect("holderBg",{fill:e.theme.bg});if(h.resize(e.width,e.height),a.root.add(h),e.flags.outline){var u=new S(h.properties.fill);u=u.lighten(u.lighterThan("7f7f7f")?-.1:.1),h.properties.outline={fill:u.toHex(!0),width:2}}var c=e.theme.fg;if(e.flags.autoFg){var d=new S(h.properties.fill),f=new S("fff"),p=new S("000",{alpha:.285714});c=d.blendAlpha(d.lighterThan("7f7f7f")?p:f).toHex(!0)}var g=new s.Group("holderTextGroup",{text:e.text,align:e.align,font:e.font,fill:c});g.moveTo(null,null,1),a.root.add(g);var m=g.textPositionData=z(a);if(!m)throw"Holder: staging fallback not supported yet.";g.properties.leading=m.boundingBox.height;var v=null,w=null;if(m.lineCount>1){var b,x=0,A=0,C=0;w=new s.Group("line"+C),"left"!==e.align&&"right"!==e.align||(o=e.width*(1-2*(1-r)));for(var E=0;E<m.words.length;E++){var k=m.words[E];v=new s.Text(k.text);var T="\\n"==k.text;!e.noWrap&&(x+k.width>=o||T===!0)&&(t(g,w,x,g.properties.leading),g.add(w),x=0,A+=g.properties.leading,C+=1,w=new s.Group("line"+C),w.y=A),T!==!0&&(v.moveTo(x,0),x+=m.spaceWidth+k.width,w.add(v))}if(t(g,w,x,g.properties.leading),g.add(w),"left"===e.align)g.moveTo(e.width-i,null,null);else if("right"===e.align){for(b in g.children)w=g.children[b],w.moveTo(e.width-w.width,null,null);g.moveTo(0-(e.width-i),null,null)}else{for(b in g.children)w=g.children[b],w.moveTo((g.width-w.width)/2,null,null);g.moveTo((e.width-g.width)/2,null,null)}g.moveTo(null,(e.height-g.height)/2,null),(e.height-g.height)/2<0&&g.moveTo(null,0,null)}else v=new s.Text(e.text),w=new s.Group("line0"),w.add(v),g.add(w),"left"===e.align?g.moveTo(e.width-i,null,null):"right"===e.align?g.moveTo(0-(e.width-i),null,null):g.moveTo((e.width-m.boundingBox.width)/2,null,null),g.moveTo(null,(e.height-m.boundingBox.height)/2,null);return a}function l(e,t,n,r){var i=parseInt(e,10),o=parseInt(t,10),a=Math.max(i,o),s=Math.min(i,o),l=.8*Math.min(s,a*r);return Math.round(Math.max(n,l))}function h(e){var t;t=null==e||null==e.nodeType?O.vars.resizableImages:[e];for(var n=0,r=t.length;n<r;n++){var i=t[n];if(i.holderData){var o=i.holderData.flags,s=T(i);if(s){if(!i.holderData.resizeUpdate)continue;if(o.fluid&&o.auto){var l=i.holderData.fluidConfig;switch(l.mode){case"width":s.height=s.width/l.ratio;break;case"height":s.width=s.height*l.ratio}}var h={mode:"image",holderSettings:{dimensions:s,theme:o.theme,flags:o},el:i,engineSettings:i.holderData.engineSettings};"exact"==o.textmode&&(o.exactDimensions=s,h.holderSettings.dimensions=o.dimensions),a(h)}else f(i)}}}function u(e){if(e.holderData){var t=T(e);if(t){var n=e.holderData.flags,r={fluidHeight:"%"==n.dimensions.height.slice(-1),fluidWidth:"%"==n.dimensions.width.slice(-1),mode:null,initialDimensions:t};r.fluidWidth&&!r.fluidHeight?(r.mode="width",r.ratio=r.initialDimensions.width/parseFloat(n.dimensions.height)):!r.fluidWidth&&r.fluidHeight&&(r.mode="height",r.ratio=parseFloat(n.dimensions.width)/r.initialDimensions.height),e.holderData.fluidConfig=r}else f(e)}}function c(){var e,n=[],r=Object.keys(O.vars.invisibleImages);r.forEach(function(t){e=O.vars.invisibleImages[t],T(e)&&"img"==e.nodeName.toLowerCase()&&(n.push(e),delete O.vars.invisibleImages[t])}),n.length&&F.run({images:n}),setTimeout(function(){t.requestAnimationFrame(c)},10)}function d(){O.vars.visibilityCheckStarted||(t.requestAnimationFrame(c),O.vars.visibilityCheckStarted=!0)}function f(e){e.holderData.invisibleId||(O.vars.invisibleId+=1,O.vars.invisibleImages["i"+O.vars.invisibleId]=e,e.holderData.invisibleId=O.vars.invisibleId)}function p(e){O.vars.debounceTimer||e.call(this),O.vars.debounceTimer&&t.clearTimeout(O.vars.debounceTimer),O.vars.debounceTimer=t.setTimeout(function(){O.vars.debounceTimer=null,e.call(this)},O.setup.debounce)}function g(){p(function(){h(null)})}var m=n(2),v=n(3),y=n(6),w=n(7),b=n(8),x=n(9),S=n(10),A=n(11),C=n(12),E=n(15),k=w.extend,T=w.dimensionCheck,j=A.svg_ns,F={version:A.version,addTheme:function(e,t){return null!=e&&null!=t&&(O.settings.themes[e]=t),delete O.vars.cache.themeKeys,this},addImage:function(e,t){var n=x.getNodeArray(t);return n.forEach(function(t){var n=x.newEl("img"),r={};r[O.setup.dataAttr]=e,x.setAttr(n,r),t.appendChild(n)}),this},setResizeUpdate:function(e,t){e.holderData&&(e.holderData.resizeUpdate=!!t,e.holderData.resizeUpdate&&h(e))},run:function(e){e=e||{};var n={},a=k(O.settings,e);O.vars.preempted=!0,O.vars.dataAttr=a.dataAttr||O.setup.dataAttr,n.renderer=a.renderer?a.renderer:O.setup.renderer,O.setup.renderers.join(",").indexOf(n.renderer)===-1&&(n.renderer=O.setup.supportsSVG?"svg":O.setup.supportsCanvas?"canvas":"html");var s=x.getNodeArray(a.images),l=x.getNodeArray(a.bgnodes),h=x.getNodeArray(a.stylenodes),u=x.getNodeArray(a.objects);return n.stylesheets=[],n.svgXMLStylesheet=!0,n.noFontFallback=!!a.noFontFallback,n.noBackgroundSize=!!a.noBackgroundSize,h.forEach(function(e){if(e.attributes.rel&&e.attributes.href&&"stylesheet"==e.attributes.rel.value){var t=e.attributes.href.value,r=x.newEl("a");r.href=t;var i=r.protocol+"//"+r.host+r.pathname+r.search;n.stylesheets.push(i)}}),l.forEach(function(e){if(t.getComputedStyle){var r=t.getComputedStyle(e,null).getPropertyValue("background-image"),s=e.getAttribute("data-background-src"),l=s||r,h=null,u=a.domain+"/",c=l.indexOf(u);if(0===c)h=l;else if(1===c&&"?"===l[0])h=l.slice(1);else{var d=l.substr(c).match(/([^\"]*)"?\)/);if(null!==d)h=d[1];else if(0===l.indexOf("url("))throw"Holder: unable to parse background URL: "+l}if(h){var f=i(h,a);f&&o({mode:"background",el:e,flags:f,engineSettings:n})}}}),u.forEach(function(e){var t={};try{t.data=e.getAttribute("data"),t.dataSrc=e.getAttribute(O.vars.dataAttr)}catch(i){}var o=null!=t.data&&0===t.data.indexOf(a.domain),s=null!=t.dataSrc&&0===t.dataSrc.indexOf(a.domain);o?r(a,n,t.data,e):s&&r(a,n,t.dataSrc,e)}),s.forEach(function(e){var t={};try{t.src=e.getAttribute("src"),t.dataSrc=e.getAttribute(O.vars.dataAttr),t.rendered=e.getAttribute("data-holder-rendered")}catch(i){}var o=null!=t.src,s=null!=t.dataSrc&&0===t.dataSrc.indexOf(a.domain),l=null!=t.rendered&&"true"==t.rendered;o?0===t.src.indexOf(a.domain)?r(a,n,t.src,e):s&&(l?r(a,n,t.dataSrc,e):!function(e,t,n,i,o){w.imageExists(e,function(e){e||r(t,n,i,o)})}(t.src,a,n,t.dataSrc,e)):s&&r(a,n,t.dataSrc,e)}),this}},O={settings:{domain:"holder.js",images:"img",objects:"object",bgnodes:"body .holderjs",stylenodes:"head link.holderjs",themes:{gray:{bg:"#EEEEEE",fg:"#AAAAAA"},social:{bg:"#3a5a97",fg:"#FFFFFF"},industrial:{bg:"#434A52",fg:"#C2F200"},sky:{bg:"#0D8FDB",fg:"#FFFFFF"},vine:{bg:"#39DBAC",fg:"#1E292C"},lava:{bg:"#F8591A",fg:"#1C2846"}}},defaults:{size:10,units:"pt",scale:1/16}},z=function(){var e=null,t=null,n=null;return function(r){var i=r.root;if(O.setup.supportsSVG){var o=!1,a=function(e){return document.createTextNode(e)};null!=e&&e.parentNode===document.body||(o=!0),e=b.initSVG(e,i.properties.width,i.properties.height),e.style.display="block",o&&(t=x.newEl("text",j),n=a(null),x.setAttr(t,{x:0}),t.appendChild(n),e.appendChild(t),document.body.appendChild(e),e.style.visibility="hidden",e.style.position="absolute",e.style.top="-100%",e.style.left="-100%");var s=i.children.holderTextGroup,l=s.properties;x.setAttr(t,{y:l.font.size,style:w.cssProps({"font-weight":l.font.weight,"font-size":l.font.size+l.font.units,"font-family":l.font.family})}),n.nodeValue=l.text;var h=t.getBBox(),u=Math.ceil(h.width/i.properties.width),c=l.text.split(" "),d=l.text.match(/\\n/g);u+=null==d?0:d.length,n.nodeValue=l.text.replace(/[ ]+/g,"");var f=t.getComputedTextLength(),p=h.width-f,g=Math.round(p/Math.max(1,c.length-1)),m=[];if(u>1){n.nodeValue="";for(var v=0;v<c.length;v++)if(0!==c[v].length){n.nodeValue=w.decodeHtmlEntity(c[v]);var y=t.getBBox();m.push({text:c[v],width:y.width})}}return e.style.display="none",{spaceWidth:g,lineCount:u,boundingBox:h,words:m}}return!1}}();for(var D in O.flags)O.flags.hasOwnProperty(D)&&(O.flags[D].match=function(e){return e.match(this.regex)});O.setup={renderer:"html",debounce:100,ratio:1,supportsCanvas:!1,supportsSVG:!1,lineWrapRatio:.9,dataAttr:"data-src",renderers:["html","canvas","svg"]},O.vars={preempted:!1,resizableImages:[],invisibleImages:{},invisibleId:0,visibilityCheckStarted:!1,debounceTimer:null,cache:{}},function(){var e=x.newEl("canvas");e.getContext&&e.toDataURL("image/png").indexOf("data:image/png")!=-1&&(O.setup.renderer="canvas",O.setup.supportsCanvas=!0),document.createElementNS&&document.createElementNS(j,"svg").createSVGRect&&(O.setup.renderer="svg",O.setup.supportsSVG=!0)}(),d(),m&&m(function(){O.vars.preempted||F.run(),t.addEventListener?(t.addEventListener("resize",g,!1),t.addEventListener("orientationchange",g,!1)):t.attachEvent("onresize",g),"object"==typeof t.Turbolinks&&t.document.addEventListener("page:change",function(){F.run()})}),e.exports=F}).call(t,function(){return this}())},function(e,t){function n(e){function t(e){if(!x){if(!a.body)return i(t);for(x=!0;e=S.shift();)i(e)}}function n(e){(w||e.type===l||a[d]===c)&&(r(),t())}function r(){w?(a[y](m,n,h),e[y](l,n,h)):(a[p](v,n),e[p](u,n))}function i(e,t){setTimeout(e,+t>=0?t:1)}function o(e){x?i(e):S.push(e)}null==document.readyState&&document.addEventListener&&(document.addEventListener("DOMContentLoaded",function C(){document.removeEventListener("DOMContentLoaded",C,!1),document.readyState="complete"},!1),document.readyState="loading");var a=e.document,s=a.documentElement,l="load",h=!1,u="on"+l,c="complete",d="readyState",f="attachEvent",p="detachEvent",g="addEventListener",m="DOMContentLoaded",v="onreadystatechange",y="removeEventListener",w=g in a,b=h,x=h,S=[];if(a[d]===c)i(t);else if(w)a[g](m,n,h),e[g](l,n,h);else{a[f](v,n),e[f](u,n);try{b=null==e.frameElement&&s}catch(A){}b&&b.doScroll&&!function E(){if(!x){try{b.doScroll("left")}catch(e){return i(E,50)}r(),t()}}()}return o.version="1.4.0",o.isReady=function(){return x},o}e.exports="undefined"!=typeof window&&n(window)},function(e,t,n){var r=encodeURIComponent,i=decodeURIComponent,o=n(4),a=n(5),s=/(\w+)\[(\d+)\]/,l=/\w+\.\w+/;t.parse=function(e){if("string"!=typeof e)return{};if(e=o(e),""===e)return{};"?"===e.charAt(0)&&(e=e.slice(1));for(var t={},n=e.split("&"),r=0;r<n.length;r++){var a,h,u,c=n[r].split("="),d=i(c[0]);if(a=s.exec(d))t[a[1]]=t[a[1]]||[],t[a[1]][a[2]]=i(c[1]);else if(a=l.test(d)){for(a=d.split("."),h=t;a.length;)if(u=a.shift(),u.length){if(h[u]){if(h[u]&&"object"!=typeof h[u])break}else h[u]={};a.length||(h[u]=i(c[1])),h=h[u]}}else t[c[0]]=null==c[1]?"":i(c[1])}return t},t.stringify=function(e){if(!e)return"";var t=[];for(var n in e){var i=e[n];if("array"!=a(i))t.push(r(n)+"="+r(e[n]));else for(var o=0;o<i.length;++o)t.push(r(n+"["+o+"]")+"="+r(i[o]))}return t.join("&")}},function(e,t){function n(e){return e.replace(/^\s*|\s*$/g,"")}t=e.exports=n,t.left=function(e){return e.replace(/^\s*/,"")},t.right=function(e){return e.replace(/\s*$/,"")}},function(e,t){function n(e){return!(null==e||!(e._isBuffer||e.constructor&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)))}var r=Object.prototype.toString;e.exports=function(e){switch(r.call(e)){case"[object Date]":return"date";case"[object RegExp]":return"regexp";case"[object Arguments]":return"arguments";case"[object Array]":return"array";case"[object Error]":return"error"}return null===e?"null":void 0===e?"undefined":e!==e?"nan":e&&1===e.nodeType?"element":n(e)?"buffer":(e=e.valueOf?e.valueOf():Object.prototype.valueOf.apply(e),typeof e)}},function(e,t){var n=function(e){function t(e,t){for(var n in t)e[n]=t[n];return e}var n=1,r=function(e){n++,this.parent=null,this.children={},this.id=n,this.name="n"+n,"undefined"!=typeof e&&(this.name=e),this.x=this.y=this.z=0,this.width=this.height=0};r.prototype.resize=function(e,t){null!=e&&(this.width=e),null!=t&&(this.height=t)},r.prototype.moveTo=function(e,t,n){this.x=null!=e?e:this.x,this.y=null!=t?t:this.y,this.z=null!=n?n:this.z},r.prototype.add=function(e){var t=e.name;if("undefined"!=typeof this.children[t])throw"SceneGraph: child already exists: "+t;this.children[t]=e,e.parent=this};var i=function(){r.call(this,"root"),this.properties=e};i.prototype=new r;var o=function(e,n){if(r.call(this,e),this.properties={fill:"#000000"},"undefined"!=typeof n)t(this.properties,n);else if("undefined"!=typeof e&&"string"!=typeof e)throw"SceneGraph: invalid node name"};o.prototype=new r;var a=function(){o.apply(this,arguments),this.type="group"};a.prototype=new o;var s=function(){o.apply(this,arguments),this.type="rect"};s.prototype=new o;var l=function(e){o.call(this),this.type="text",this.properties.text=e};l.prototype=new o;var h=new i;return this.Shape={Rect:s,Text:l,Group:a},this.root=h,this};e.exports=n},function(e,t){(function(e){t.extend=function(e,t){var n={};for(var r in e)e.hasOwnProperty(r)&&(n[r]=e[r]);if(null!=t)for(var i in t)t.hasOwnProperty(i)&&(n[i]=t[i]);return n},t.cssProps=function(e){var t=[];for(var n in e)e.hasOwnProperty(n)&&t.push(n+":"+e[n]);return t.join(";")},t.encodeHtmlEntity=function(e){for(var t=[],n=0,r=e.length-1;r>=0;r--)n=e.charCodeAt(r),n>128?t.unshift(["&#",n,";"].join("")):t.unshift(e[r]);return t.join("")},t.imageExists=function(e,t){var n=new Image;n.onerror=function(){t.call(this,!1)},n.onload=function(){t.call(this,!0)},n.src=e},t.decodeHtmlEntity=function(e){return e.replace(/&#(\d+);/g,function(e,t){return String.fromCharCode(t)})},t.dimensionCheck=function(e){var t={height:e.clientHeight,width:e.clientWidth};return!(!t.height||!t.width)&&t},t.truthy=function(e){return"string"==typeof e?"true"===e||"yes"===e||"1"===e||"on"===e||"✓"===e:!!e},t.parseColor=function(e){var t,n=/(^(?:#?)[0-9a-f]{6}$)|(^(?:#?)[0-9a-f]{3}$)/i,r=/^rgb\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/,i=/^rgba\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0\.\d{1,}|1)\)$/,o=e.match(n);return null!==o?(t=o[1]||o[2],"#"!==t[0]?"#"+t:t):(o=e.match(r),null!==o?t="rgb("+o.slice(1).join(",")+")":(o=e.match(i),null!==o?t="rgba("+o.slice(1).join(",")+")":null))},t.canvasRatio=function(){var t=1,n=1;if(e.document){var r=e.document.createElement("canvas");if(r.getContext){var i=r.getContext("2d");t=e.devicePixelRatio||1,n=i.webkitBackingStorePixelRatio||i.mozBackingStorePixelRatio||i.msBackingStorePixelRatio||i.oBackingStorePixelRatio||i.backingStorePixelRatio||1}}return t/n}}).call(t,function(){return this}())},function(e,t,n){(function(e){var r=n(9),i="http://www.w3.org/2000/svg",o=8;t.initSVG=function(e,t,n){var a,s,l=!1;e&&e.querySelector?(s=e.querySelector("style"),null===s&&(l=!0)):(e=r.newEl("svg",i),l=!0),l&&(a=r.newEl("defs",i),s=r.newEl("style",i),r.setAttr(s,{type:"text/css"}),a.appendChild(s),e.appendChild(a)),e.webkitMatchesSelector&&e.setAttribute("xmlns",i);for(var h=0;h<e.childNodes.length;h++)e.childNodes[h].nodeType===o&&e.removeChild(e.childNodes[h]);for(;s.childNodes.length;)s.removeChild(s.childNodes[0]);return r.setAttr(e,{width:t,height:n,viewBox:"0 0 "+t+" "+n,preserveAspectRatio:"none"}),e},t.svgStringToDataURI=function(){var t="data:image/svg+xml;charset=UTF-8,",n="data:image/svg+xml;charset=UTF-8;base64,";return function(r,i){return i?n+btoa(e.unescape(encodeURIComponent(r))):t+encodeURIComponent(r)}}(),t.serializeSVG=function(t,n){if(e.XMLSerializer){var i=new XMLSerializer,o="",a=n.stylesheets;if(n.svgXMLStylesheet){for(var s=r.createXML(),l=a.length-1;l>=0;l--){var h=s.createProcessingInstruction("xml-stylesheet",'href="'+a[l]+'" rel="stylesheet"');s.insertBefore(h,s.firstChild)}s.removeChild(s.documentElement),o=i.serializeToString(s)}var u=i.serializeToString(t);return u=u.replace(/\&amp;(\#[0-9]{2,}\;)/g,"&$1"),o+u}}}).call(t,function(){return this}())},function(e,t){(function(e){t.newEl=function(t,n){if(e.document)return null==n?e.document.createElement(t):e.document.createElementNS(n,t)},t.setAttr=function(e,t){for(var n in t)e.setAttribute(n,t[n])},t.createXML=function(){if(e.DOMParser)return(new DOMParser).parseFromString("<xml />","application/xml")},t.getNodeArray=function(t){var n=null;return"string"==typeof t?n=document.querySelectorAll(t):e.NodeList&&t instanceof e.NodeList?n=t:e.Node&&t instanceof e.Node?n=[t]:e.HTMLCollection&&t instanceof e.HTMLCollection?n=t:t instanceof Array?n=t:null===t&&(n=[]),n=Array.prototype.slice.call(n)}}).call(t,function(){return this}())},function(e,t){var n=function(e,t){"string"==typeof e&&(this.original=e,"#"===e.charAt(0)&&(e=e.slice(1)),/[^a-f0-9]+/i.test(e)||(3===e.length&&(e=e.replace(/./g,"$&$&")),6===e.length&&(this.alpha=1,t&&t.alpha&&(this.alpha=t.alpha),this.set(parseInt(e,16)))))};n.rgb2hex=function(e,t,n){function r(e){var t=(0|e).toString(16);return e<16&&(t="0"+t),t}return[e,t,n].map(r).join("")},n.hsl2rgb=function(e,t,n){var r=e/60,i=(1-Math.abs(2*n-1))*t,o=i*(1-Math.abs(parseInt(r)%2-1)),a=n-i/2,s=0,l=0,h=0;return r>=0&&r<1?(s=i,l=o):r>=1&&r<2?(s=o,l=i):r>=2&&r<3?(l=i,h=o):r>=3&&r<4?(l=o,h=i):r>=4&&r<5?(s=o,h=i):r>=5&&r<6&&(s=i,h=o),s+=a,l+=a,h+=a,s=parseInt(255*s),l=parseInt(255*l),h=parseInt(255*h),[s,l,h]},n.prototype.set=function(e){this.raw=e;var t=(16711680&this.raw)>>16,n=(65280&this.raw)>>8,r=255&this.raw,i=.2126*t+.7152*n+.0722*r,o=-.09991*t-.33609*n+.436*r,a=.615*t-.55861*n-.05639*r;return this.rgb={r:t,g:n,b:r},this.yuv={y:i,u:o,v:a},this},n.prototype.lighten=function(e){var t=Math.min(1,Math.max(0,Math.abs(e)))*(e<0?-1:1),r=255*t|0,i=Math.min(255,Math.max(0,this.rgb.r+r)),o=Math.min(255,Math.max(0,this.rgb.g+r)),a=Math.min(255,Math.max(0,this.rgb.b+r)),s=n.rgb2hex(i,o,a);return new n(s)},n.prototype.toHex=function(e){return(e?"#":"")+this.raw.toString(16)},n.prototype.lighterThan=function(e){return e instanceof n||(e=new n(e)),this.yuv.y>e.yuv.y},n.prototype.blendAlpha=function(e){e instanceof n||(e=new n(e));var t=e,r=this,i=t.alpha*t.rgb.r+(1-t.alpha)*r.rgb.r,o=t.alpha*t.rgb.g+(1-t.alpha)*r.rgb.g,a=t.alpha*t.rgb.b+(1-t.alpha)*r.rgb.b;return new n(n.rgb2hex(i,o,a))},e.exports=n},function(e,t){e.exports={version:"2.9.4",svg_ns:"http://www.w3.org/2000/svg"}},function(e,t,n){function r(e,t){return c.element({tag:t,width:e.width,height:e.height,fill:e.properties.fill})}function i(e){return h.cssProps({fill:e.fill,"font-weight":e.font.weight,"font-family":e.font.family+", monospace","font-size":e.font.size+e.font.units})}function o(e,t,n){var r=n/2;return["M",r,r,"H",e-r,"V",t-r,"H",r,"V",0,"M",0,r,"L",e,t-r,"M",0,t-r,"L",e,r].join(" ")}var a=n(13),s=n(8),l=n(11),h=n(7),u=l.svg_ns,c={element:function(e){var t=e.tag,n=e.content||"";return delete e.tag,delete e.content,[t,n,e]}};e.exports=function(e,t){var n=t.engineSettings,l=n.stylesheets,h=l.map(function(e){return'<?xml-stylesheet rel="stylesheet" href="'+e+'"?>'}).join("\n"),d="holder_"+Number(new Date).toString(16),f=e.root,p=f.children.holderTextGroup,g="#"+d+" text { "+i(p.properties)+" } ";p.y+=.8*p.textPositionData.boundingBox.height;var m=[];Object.keys(p.children).forEach(function(e){var t=p.children[e];Object.keys(t.children).forEach(function(e){var n=t.children[e],r=p.x+t.x+n.x,i=p.y+t.y+n.y,o=c.element({tag:"text",content:n.properties.text,x:r,y:i});m.push(o)})});var v=c.element({tag:"g",content:m}),y=null;if(f.children.holderBg.properties.outline){var w=f.children.holderBg.properties.outline;y=c.element({tag:"path",d:o(f.children.holderBg.width,f.children.holderBg.height,w.width),"stroke-width":w.width,stroke:w.fill,fill:"none"})}var b=r(f.children.holderBg,"rect"),x=[];x.push(b),w&&x.push(y),x.push(v);var S=c.element({tag:"g",id:d,content:x}),A=c.element({tag:"style",content:g,type:"text/css"}),C=c.element({tag:"defs",content:A}),E=c.element({tag:"svg",content:[C,S],width:f.properties.width,height:f.properties.height,xmlns:u,viewBox:[0,0,f.properties.width,f.properties.height].join(" "),preserveAspectRatio:"none"}),k=a(E);k=h+k[0];var T=s.svgStringToDataURI(k,"background"===t.mode);return T}},function(e,t,n){n(14);e.exports=function r(e,t,n){"use strict";function i(e){var t=e.match(/^[\w-]+/),r={tag:t?t[0]:"div",attr:{},children:[]},i=e.match(/#([\w-]+)/),o=e.match(/\$([\w-]+)/),a=e.match(/\.[\w-]+/g);return i&&(r.attr.id=i[1],n[i[1]]=r),o&&(n[o[1]]=r),a&&(r.attr["class"]=a.join(" ").replace(/\./g,"")),e.match(/&$/g)&&(f=!1),r}function o(e,t){if(null!==t&&t!==!1&&void 0!==t)return"string"!=typeof t&&"object"!=typeof t?String(t):t}function a(e){return e||0===e?String(e).replace(/&/g,"&amp;").replace(/"/g,"&quot;"):""}function s(e){return String(e).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&apos;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var l,h,u,c,d=1,f=!0;if(n=n||{},"string"==typeof e[0])e[0]=i(e[0]);else{if(!Array.isArray(e[0]))throw new Error("First element of array must be a string, or an array and not "+JSON.stringify(e[0]));d=0}for(;d<e.length;d++){if(e[d]===!1||null===e[d]){e[0]=!1;break}if(void 0!==e[d]&&e[d]!==!0)if("string"==typeof e[d])f&&(e[d]=s(e[d])),e[0].children.push(e[d]);else if("number"==typeof e[d])e[0].children.push(e[d]);else if(Array.isArray(e[d])){if(Array.isArray(e[d][0])){if(e[d].reverse().forEach(function(t){e.splice(d+1,0,t)}),0!==d)continue;d++}r(e[d],t,n),e[d][0]&&e[0].children.push(e[d][0])}else if("function"==typeof e[d])u=e[d];else{if("object"!=typeof e[d])throw new TypeError('"'+e[d]+'" is not allowed as a value.');for(h in e[d])e[d].hasOwnProperty(h)&&null!==e[d][h]&&e[d][h]!==!1&&("style"===h&&"object"==typeof e[d][h]?e[0].attr[h]=JSON.stringify(e[d][h],o).slice(2,-2).replace(/","/g,";").replace(/":"/g,":").replace(/\\"/g,"'"):e[0].attr[h]=e[d][h])}}if(e[0]!==!1){l="<"+e[0].tag;for(c in e[0].attr)e[0].attr.hasOwnProperty(c)&&(l+=" "+c+'="'+a(e[0].attr[c])+'"');l+=">",e[0].children.forEach(function(e){l+=e}),l+="</"+e[0].tag+">",e[0]=l}return n[0]=e[0],u&&u(e[0]),n}},function(e,t){"use strict";function n(e){var t=""+e,n=r.exec(t);if(!n)return t;var i,o="",a=0,s=0;for(a=n.index;a<t.length;a++){switch(t.charCodeAt(a)){case 34:i="&quot;";break;case 38:i="&amp;";break;case 39:i="&#39;";break;case 60:i="&lt;";break;case 62:i="&gt;";break;default:continue}s!==a&&(o+=t.substring(s,a)),s=a+1,o+=i}return s!==a?o+t.substring(s,a):o}var r=/["'&<>]/;e.exports=n},function(e,t,n){var r=n(9),i=n(7);e.exports=function(){var e=r.newEl("canvas"),t=null;return function(n){null==t&&(t=e.getContext("2d"));var r=i.canvasRatio(),o=n.root;e.width=r*o.properties.width,e.height=r*o.properties.height,t.textBaseline="middle";var a=o.children.holderBg,s=r*a.width,l=r*a.height,h=2,u=h/2;t.fillStyle=a.properties.fill,t.fillRect(0,0,s,l),a.properties.outline&&(t.strokeStyle=a.properties.outline.fill,t.lineWidth=a.properties.outline.width,t.moveTo(u,u),t.lineTo(s-u,u),t.lineTo(s-u,l-u),t.lineTo(u,l-u),t.lineTo(u,u),t.moveTo(0,u),t.lineTo(s,l-u),t.moveTo(0,l-u),t.lineTo(s,u),t.stroke());var c=o.children.holderTextGroup;t.font=c.properties.font.weight+" "+r*c.properties.font.size+c.properties.font.units+" "+c.properties.font.family+", monospace",t.fillStyle=c.properties.fill;for(var d in c.children){var f=c.children[d];for(var p in f.children){var g=f.children[p],m=r*(c.x+f.x+g.x),v=r*(c.y+f.y+g.y+c.properties.leading/2);t.fillText(g.properties.text,m,v)}}return e.toDataURL("image/png")}}()}])}),function(e,t){t&&(Holder=e.Holder);
+}(this,"undefined"!=typeof Meteor&&"undefined"!=typeof Package);
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/jquery-3.2.1.slim.min.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/jquery-3.2.1.slim.min.js
new file mode 100644
index 00000000..196710ef
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/jquery-3.2.1.slim.min.js
@@ -0,0 +1,4 @@
+/*! jQuery v3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */
+!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null==a?f.call(this):a<0?this[a+this.length]:this[a]},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(a<0?b:0);return this.pushStack(c>=0&&c<b?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:h,sort:c.sort,splice:c.splice},r.extend=r.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);h<i;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(r.isPlainObject(d)||(e=Array.isArray(d)))?(e?(e=!1,f=c&&Array.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===r.type(a)},isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=r.type(a);return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))},isPlainObject:function(a){var b,c;return!(!a||"[object Object]"!==k.call(a))&&(!(b=e(a))||(c=l.call(b,"constructor")&&b.constructor,"function"==typeof c&&m.call(c)===n))},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a},globalEval:function(a){p(a)},camelCase:function(a){return a.replace(t,"ms-").replace(u,v)},each:function(a,b){var c,d=0;if(w(a)){for(c=a.length;d<c;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(s,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(w(Object(a))?r.merge(c,"string"==typeof a?[a]:a):h.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:i.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;d<c;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;f<g;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,f=0,h=[];if(w(a))for(d=a.length;f<d;f++)e=b(a[f],f,c),null!=e&&h.push(e);else for(f in a)e=b(a[f],f,c),null!=e&&h.push(e);return g.apply([],h)},guid:1,proxy:function(a,b){var c,d,e;if("string"==typeof b&&(c=a[b],b=a,a=c),r.isFunction(a))return d=f.call(arguments,2),e=function(){return a.apply(b||this,d.concat(f.call(arguments)))},e.guid=a.guid=a.guid||r.guid++,e},now:Date.now,support:o}),"function"==typeof Symbol&&(r.fn[Symbol.iterator]=c[Symbol.iterator]),r.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){j["[object "+b+"]"]=b.toLowerCase()});function w(a){var b=!!a&&"length"in a&&a.length,c=r.type(a);return"function"!==c&&!r.isWindow(a)&&("array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a)}var x=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ha(),z=ha(),A=ha(),B=function(a,b){return a===b&&(l=!0),0},C={}.hasOwnProperty,D=[],E=D.pop,F=D.push,G=D.push,H=D.slice,I=function(a,b){for(var c=0,d=a.length;c<d;c++)if(a[c]===b)return c;return-1},J="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",K="[\\x20\\t\\r\\n\\f]",L="(?:\\\\.|[\\w-]|[^\0-\\xa0])+",M="\\["+K+"*("+L+")(?:"+K+"*([*^$|!~]?=)"+K+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+L+"))|)"+K+"*\\]",N=":("+L+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",O=new RegExp(K+"+","g"),P=new RegExp("^"+K+"+|((?:^|[^\\\\])(?:\\\\.)*)"+K+"+$","g"),Q=new RegExp("^"+K+"*,"+K+"*"),R=new RegExp("^"+K+"*([>+~]|"+K+")"+K+"*"),S=new RegExp("="+K+"*([^\\]'\"]*?)"+K+"*\\]","g"),T=new RegExp(N),U=new RegExp("^"+L+"$"),V={ID:new RegExp("^#("+L+")"),CLASS:new RegExp("^\\.("+L+")"),TAG:new RegExp("^("+L+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+N),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+K+"*(even|odd|(([+-]|)(\\d*)n|)"+K+"*(?:([+-]|)"+K+"*(\\d+)|))"+K+"*\\)|)","i"),bool:new RegExp("^(?:"+J+")$","i"),needsContext:new RegExp("^"+K+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+K+"*((?:-\\d)?\\d*)"+K+"*\\)|)(?=[^-]|$)","i")},W=/^(?:input|select|textarea|button)$/i,X=/^h\d$/i,Y=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,$=/[+~]/,_=new RegExp("\\\\([\\da-f]{1,6}"+K+"?|("+K+")|.)","ig"),aa=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:d<0?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},ba=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ca=function(a,b){return b?"\0"===a?"\ufffd":a.slice(0,-1)+"\\"+a.charCodeAt(a.length-1).toString(16)+" ":"\\"+a},da=function(){m()},ea=ta(function(a){return a.disabled===!0&&("form"in a||"label"in a)},{dir:"parentNode",next:"legend"});try{G.apply(D=H.call(v.childNodes),v.childNodes),D[v.childNodes.length].nodeType}catch(fa){G={apply:D.length?function(a,b){F.apply(a,H.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function ga(a,b,d,e){var f,h,j,k,l,o,r,s=b&&b.ownerDocument,w=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==w&&9!==w&&11!==w)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==w&&(l=Z.exec(a)))if(f=l[1]){if(9===w){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(s&&(j=s.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(l[2])return G.apply(d,b.getElementsByTagName(a)),d;if((f=l[3])&&c.getElementsByClassName&&b.getElementsByClassName)return G.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==w)s=b,r=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(ba,ca):b.setAttribute("id",k=u),o=g(a),h=o.length;while(h--)o[h]="#"+k+" "+sa(o[h]);r=o.join(","),s=$.test(a)&&qa(b.parentNode)||b}if(r)try{return G.apply(d,s.querySelectorAll(r)),d}catch(x){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(P,"$1"),b,d,e)}function ha(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ia(a){return a[u]=!0,a}function ja(a){var b=n.createElement("fieldset");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ka(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function la(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&a.sourceIndex-b.sourceIndex;if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function na(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function oa(a){return function(b){return"form"in b?b.parentNode&&b.disabled===!1?"label"in b?"label"in b.parentNode?b.parentNode.disabled===a:b.disabled===a:b.isDisabled===a||b.isDisabled!==!a&&ea(b)===a:b.disabled===a:"label"in b&&b.disabled===a}}function pa(a){return ia(function(b){return b=+b,ia(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function qa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=ga.support={},f=ga.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return!!b&&"HTML"!==b.nodeName},m=ga.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),v!==n&&(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ja(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ja(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Y.test(n.getElementsByClassName),c.getById=ja(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){return a.getAttribute("id")===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}}):(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c,d,e,f=b.getElementById(a);if(f){if(c=f.getAttributeNode("id"),c&&c.value===a)return[f];e=b.getElementsByName(a),d=0;while(f=e[d++])if(c=f.getAttributeNode("id"),c&&c.value===a)return[f]}return[]}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){if("undefined"!=typeof b.getElementsByClassName&&p)return b.getElementsByClassName(a)},r=[],q=[],(c.qsa=Y.test(n.querySelectorAll))&&(ja(function(a){o.appendChild(a).innerHTML="<a id='"+u+"'></a><select id='"+u+"-\r\\' msallowcapture=''><option selected=''></option></select>",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+K+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+K+"*(?:value|"+J+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ja(function(a){a.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+K+"*[*^$|!~]?="),2!==a.querySelectorAll(":enabled").length&&q.push(":enabled",":disabled"),o.appendChild(a).disabled=!0,2!==a.querySelectorAll(":disabled").length&&q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Y.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ja(function(a){c.disconnectedMatch=s.call(a,"*"),s.call(a,"[s!='']:x"),r.push("!=",N)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Y.test(o.compareDocumentPosition),t=b||Y.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?I(k,a)-I(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?I(k,a)-I(k,b):0;if(e===f)return la(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?la(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},ga.matches=function(a,b){return ga(a,null,null,b)},ga.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(S,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return ga(b,n,null,[a]).length>0},ga.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},ga.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&C.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},ga.escape=function(a){return(a+"").replace(ba,ca)},ga.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},ga.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=ga.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=ga.selectors={cacheLength:50,createPseudo:ia,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(_,aa),a[3]=(a[3]||a[4]||a[5]||"").replace(_,aa),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||ga.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&ga.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return V.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&T.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(_,aa).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+K+")"+a+"("+K+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=ga.attr(d,a);return null==e?"!="===b:!b||(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(O," ")+" ").indexOf(c)>-1:"|="===b&&(e===c||e.slice(0,c.length+1)===c+"-"))}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||ga.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ia(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=I(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ia(function(a){var b=[],c=[],d=h(a.replace(P,"$1"));return d[u]?ia(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ia(function(a){return function(b){return ga(a,b).length>0}}),contains:ia(function(a){return a=a.replace(_,aa),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ia(function(a){return U.test(a||"")||ga.error("unsupported lang: "+a),a=a.replace(_,aa).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:oa(!1),disabled:oa(!0),checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return X.test(a.nodeName)},input:function(a){return W.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:pa(function(){return[0]}),last:pa(function(a,b){return[b-1]}),eq:pa(function(a,b,c){return[c<0?c+b:c]}),even:pa(function(a,b){for(var c=0;c<b;c+=2)a.push(c);return a}),odd:pa(function(a,b){for(var c=1;c<b;c+=2)a.push(c);return a}),lt:pa(function(a,b,c){for(var d=c<0?c+b:c;--d>=0;)a.push(d);return a}),gt:pa(function(a,b,c){for(var d=c<0?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=ma(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=na(b);function ra(){}ra.prototype=d.filters=d.pseudos,d.setFilters=new ra,g=ga.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){c&&!(e=Q.exec(h))||(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=R.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(P," ")}),h=h.slice(c.length));for(g in d.filter)!(e=V[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?ga.error(a):z(a,i).slice(0)};function sa(a){for(var b=0,c=a.length,d="";b<c;b++)d+=a[b].value;return d}function ta(a,b,c){var d=b.dir,e=b.next,f=e||d,g=c&&"parentNode"===f,h=x++;return b.first?function(b,c,e){while(b=b[d])if(1===b.nodeType||g)return a(b,c,e);return!1}:function(b,c,i){var j,k,l,m=[w,h];if(i){while(b=b[d])if((1===b.nodeType||g)&&a(b,c,i))return!0}else while(b=b[d])if(1===b.nodeType||g)if(l=b[u]||(b[u]={}),k=l[b.uniqueID]||(l[b.uniqueID]={}),e&&e===b.nodeName.toLowerCase())b=b[d]||b;else{if((j=k[f])&&j[0]===w&&j[1]===h)return m[2]=j[2];if(k[f]=m,m[2]=a(b,c,i))return!0}return!1}}function ua(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function va(a,b,c){for(var d=0,e=b.length;d<e;d++)ga(a,b[d],c);return c}function wa(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;h<i;h++)(f=a[h])&&(c&&!c(f,d,e)||(g.push(f),j&&b.push(h)));return g}function xa(a,b,c,d,e,f){return d&&!d[u]&&(d=xa(d)),e&&!e[u]&&(e=xa(e,f)),ia(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||va(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:wa(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=wa(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?I(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=wa(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):G.apply(g,r)})}function ya(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ta(function(a){return a===b},h,!0),l=ta(function(a){return I(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];i<f;i++)if(c=d.relative[a[i].type])m=[ta(ua(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;e<f;e++)if(d.relative[a[e].type])break;return xa(i>1&&ua(m),i>1&&sa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(P,"$1"),c,i<e&&ya(a.slice(i,e)),e<f&&ya(a=a.slice(e)),e<f&&sa(a))}m.push(c)}return ua(m)}function za(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=E.call(i));u=wa(u)}G.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&ga.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ia(f):f}return h=ga.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=ya(b[c]),f[u]?d.push(f):e.push(f);f=A(a,za(e,d)),f.selector=a}return f},i=ga.select=function(a,b,c,e){var f,i,j,k,l,m="function"==typeof a&&a,n=!e&&g(a=m.selector||a);if(c=c||[],1===n.length){if(i=n[0]=n[0].slice(0),i.length>2&&"ID"===(j=i[0]).type&&9===b.nodeType&&p&&d.relative[i[1].type]){if(b=(d.find.ID(j.matches[0].replace(_,aa),b)||[])[0],!b)return c;m&&(b=b.parentNode),a=a.slice(i.shift().value.length)}f=V.needsContext.test(a)?0:i.length;while(f--){if(j=i[f],d.relative[k=j.type])break;if((l=d.find[k])&&(e=l(j.matches[0].replace(_,aa),$.test(i[0].type)&&qa(b.parentNode)||b))){if(i.splice(f,1),a=e.length&&sa(i),!a)return G.apply(c,e),c;break}}}return(m||h(a,n))(e,b,!p,c,!b||$.test(a)&&qa(b.parentNode)||b),c},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ja(function(a){return 1&a.compareDocumentPosition(n.createElement("fieldset"))}),ja(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||ka("type|href|height|width",function(a,b,c){if(!c)return a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ja(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ka("value",function(a,b,c){if(!c&&"input"===a.nodeName.toLowerCase())return a.defaultValue}),ja(function(a){return null==a.getAttribute("disabled")})||ka(J,function(a,b,c){var d;if(!c)return a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),ga}(a);r.find=x,r.expr=x.selectors,r.expr[":"]=r.expr.pseudos,r.uniqueSort=r.unique=x.uniqueSort,r.text=x.getText,r.isXMLDoc=x.isXML,r.contains=x.contains,r.escapeSelector=x.escape;var y=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&r(a).is(c))break;d.push(a)}return d},z=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},A=r.expr.match.needsContext;function B(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()}var C=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i,D=/^.[^:#\[\.,]*$/;function E(a,b,c){return r.isFunction(b)?r.grep(a,function(a,d){return!!b.call(a,d,a)!==c}):b.nodeType?r.grep(a,function(a){return a===b!==c}):"string"!=typeof b?r.grep(a,function(a){return i.call(b,a)>-1!==c}):D.test(b)?r.filter(b,a,c):(b=r.filter(b,a),r.grep(a,function(a){return i.call(b,a)>-1!==c&&1===a.nodeType}))}r.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?r.find.matchesSelector(d,a)?[d]:[]:r.find.matches(a,r.grep(b,function(a){return 1===a.nodeType}))},r.fn.extend({find:function(a){var b,c,d=this.length,e=this;if("string"!=typeof a)return this.pushStack(r(a).filter(function(){for(b=0;b<d;b++)if(r.contains(e[b],this))return!0}));for(c=this.pushStack([]),b=0;b<d;b++)r.find(a,e[b],c);return d>1?r.uniqueSort(c):c},filter:function(a){return this.pushStack(E(this,a||[],!1))},not:function(a){return this.pushStack(E(this,a||[],!0))},is:function(a){return!!E(this,"string"==typeof a&&A.test(a)?r(a):a||[],!1).length}});var F,G=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,H=r.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||F,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:G.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof r?b[0]:b,r.merge(this,r.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),C.test(e[1])&&r.isPlainObject(b))for(e in b)r.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&(this[0]=f,this.length=1),this}return a.nodeType?(this[0]=a,this.length=1,this):r.isFunction(a)?void 0!==c.ready?c.ready(a):a(r):r.makeArray(a,this)};H.prototype=r.fn,F=r(d);var I=/^(?:parents|prev(?:Until|All))/,J={children:!0,contents:!0,next:!0,prev:!0};r.fn.extend({has:function(a){var b=r(a,this),c=b.length;return this.filter(function(){for(var a=0;a<c;a++)if(r.contains(this,b[a]))return!0})},closest:function(a,b){var c,d=0,e=this.length,f=[],g="string"!=typeof a&&r(a);if(!A.test(a))for(;d<e;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&r.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?r.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?i.call(r(a),this[0]):i.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(r.uniqueSort(r.merge(this.get(),r(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function K(a,b){while((a=a[b])&&1!==a.nodeType);return a}r.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return y(a,"parentNode")},parentsUntil:function(a,b,c){return y(a,"parentNode",c)},next:function(a){return K(a,"nextSibling")},prev:function(a){return K(a,"previousSibling")},nextAll:function(a){return y(a,"nextSibling")},prevAll:function(a){return y(a,"previousSibling")},nextUntil:function(a,b,c){return y(a,"nextSibling",c)},prevUntil:function(a,b,c){return y(a,"previousSibling",c)},siblings:function(a){return z((a.parentNode||{}).firstChild,a)},children:function(a){return z(a.firstChild)},contents:function(a){return B(a,"iframe")?a.contentDocument:(B(a,"template")&&(a=a.content||a),r.merge([],a.childNodes))}},function(a,b){r.fn[a]=function(c,d){var e=r.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=r.filter(d,e)),this.length>1&&(J[a]||r.uniqueSort(e),I.test(a)&&e.reverse()),this.pushStack(e)}});var L=/[^\x20\t\r\n\f]+/g;function M(a){var b={};return r.each(a.match(L)||[],function(a,c){b[c]=!0}),b}r.Callbacks=function(a){a="string"==typeof a?M(a):r.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=e||a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h<f.length)f[h].apply(c[0],c[1])===!1&&a.stopOnFalse&&(h=f.length,c=!1)}a.memory||(c=!1),b=!1,e&&(f=c?[]:"")},j={add:function(){return f&&(c&&!b&&(h=f.length-1,g.push(c)),function d(b){r.each(b,function(b,c){r.isFunction(c)?a.unique&&j.has(c)||f.push(c):c&&c.length&&"string"!==r.type(c)&&d(c)})}(arguments),c&&!b&&i()),this},remove:function(){return r.each(arguments,function(a,b){var c;while((c=r.inArray(b,f,c))>-1)f.splice(c,1),c<=h&&h--}),this},has:function(a){return a?r.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||b||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j};function N(a){return a}function O(a){throw a}function P(a,b,c,d){var e;try{a&&r.isFunction(e=a.promise)?e.call(a).done(b).fail(c):a&&r.isFunction(e=a.then)?e.call(a,b,c):b.apply(void 0,[a].slice(d))}catch(a){c.apply(void 0,[a])}}r.extend({Deferred:function(b){var c=[["notify","progress",r.Callbacks("memory"),r.Callbacks("memory"),2],["resolve","done",r.Callbacks("once memory"),r.Callbacks("once memory"),0,"resolved"],["reject","fail",r.Callbacks("once memory"),r.Callbacks("once memory"),1,"rejected"]],d="pending",e={state:function(){return d},always:function(){return f.done(arguments).fail(arguments),this},"catch":function(a){return e.then(null,a)},pipe:function(){var a=arguments;return r.Deferred(function(b){r.each(c,function(c,d){var e=r.isFunction(a[d[4]])&&a[d[4]];f[d[1]](function(){var a=e&&e.apply(this,arguments);a&&r.isFunction(a.promise)?a.promise().progress(b.notify).done(b.resolve).fail(b.reject):b[d[0]+"With"](this,e?[a]:arguments)})}),a=null}).promise()},then:function(b,d,e){var f=0;function g(b,c,d,e){return function(){var h=this,i=arguments,j=function(){var a,j;if(!(b<f)){if(a=d.apply(h,i),a===c.promise())throw new TypeError("Thenable self-resolution");j=a&&("object"==typeof a||"function"==typeof a)&&a.then,r.isFunction(j)?e?j.call(a,g(f,c,N,e),g(f,c,O,e)):(f++,j.call(a,g(f,c,N,e),g(f,c,O,e),g(f,c,N,c.notifyWith))):(d!==N&&(h=void 0,i=[a]),(e||c.resolveWith)(h,i))}},k=e?j:function(){try{j()}catch(a){r.Deferred.exceptionHook&&r.Deferred.exceptionHook(a,k.stackTrace),b+1>=f&&(d!==O&&(h=void 0,i=[a]),c.rejectWith(h,i))}};b?k():(r.Deferred.getStackHook&&(k.stackTrace=r.Deferred.getStackHook()),a.setTimeout(k))}}return r.Deferred(function(a){c[0][3].add(g(0,a,r.isFunction(e)?e:N,a.notifyWith)),c[1][3].add(g(0,a,r.isFunction(b)?b:N)),c[2][3].add(g(0,a,r.isFunction(d)?d:O))}).promise()},promise:function(a){return null!=a?r.extend(a,e):e}},f={};return r.each(c,function(a,b){var g=b[2],h=b[5];e[b[1]]=g.add,h&&g.add(function(){d=h},c[3-a][2].disable,c[0][2].lock),g.add(b[3].fire),f[b[0]]=function(){return f[b[0]+"With"](this===f?void 0:this,arguments),this},f[b[0]+"With"]=g.fireWith}),e.promise(f),b&&b.call(f,f),f},when:function(a){var b=arguments.length,c=b,d=Array(c),e=f.call(arguments),g=r.Deferred(),h=function(a){return function(c){d[a]=this,e[a]=arguments.length>1?f.call(arguments):c,--b||g.resolveWith(d,e)}};if(b<=1&&(P(a,g.done(h(c)).resolve,g.reject,!b),"pending"===g.state()||r.isFunction(e[c]&&e[c].then)))return g.then();while(c--)P(e[c],h(c),g.reject);return g.promise()}});var Q=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;r.Deferred.exceptionHook=function(b,c){a.console&&a.console.warn&&b&&Q.test(b.name)&&a.console.warn("jQuery.Deferred exception: "+b.message,b.stack,c)},r.readyException=function(b){a.setTimeout(function(){throw b})};var R=r.Deferred();r.fn.ready=function(a){return R.then(a)["catch"](function(a){r.readyException(a);
+}),this},r.extend({isReady:!1,readyWait:1,ready:function(a){(a===!0?--r.readyWait:r.isReady)||(r.isReady=!0,a!==!0&&--r.readyWait>0||R.resolveWith(d,[r]))}}),r.ready.then=R.then;function S(){d.removeEventListener("DOMContentLoaded",S),a.removeEventListener("load",S),r.ready()}"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(r.ready):(d.addEventListener("DOMContentLoaded",S),a.addEventListener("load",S));var T=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===r.type(c)){e=!0;for(h in c)T(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,r.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(r(a),c)})),b))for(;h<i;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},U=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function V(){this.expando=r.expando+V.uid++}V.uid=1,V.prototype={cache:function(a){var b=a[this.expando];return b||(b={},U(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[r.camelCase(b)]=c;else for(d in b)e[r.camelCase(d)]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][r.camelCase(b)]},access:function(a,b,c){return void 0===b||b&&"string"==typeof b&&void 0===c?this.get(a,b):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d=a[this.expando];if(void 0!==d){if(void 0!==b){Array.isArray(b)?b=b.map(r.camelCase):(b=r.camelCase(b),b=b in d?[b]:b.match(L)||[]),c=b.length;while(c--)delete d[b[c]]}(void 0===b||r.isEmptyObject(d))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!r.isEmptyObject(b)}};var W=new V,X=new V,Y=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Z=/[A-Z]/g;function $(a){return"true"===a||"false"!==a&&("null"===a?null:a===+a+""?+a:Y.test(a)?JSON.parse(a):a)}function _(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Z,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c=$(c)}catch(e){}X.set(a,b,c)}else c=void 0;return c}r.extend({hasData:function(a){return X.hasData(a)||W.hasData(a)},data:function(a,b,c){return X.access(a,b,c)},removeData:function(a,b){X.remove(a,b)},_data:function(a,b,c){return W.access(a,b,c)},_removeData:function(a,b){W.remove(a,b)}}),r.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=X.get(f),1===f.nodeType&&!W.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=r.camelCase(d.slice(5)),_(f,d,e[d])));W.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){X.set(this,a)}):T(this,function(b){var c;if(f&&void 0===b){if(c=X.get(f,a),void 0!==c)return c;if(c=_(f,a),void 0!==c)return c}else this.each(function(){X.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){X.remove(this,a)})}}),r.extend({queue:function(a,b,c){var d;if(a)return b=(b||"fx")+"queue",d=W.get(a,b),c&&(!d||Array.isArray(c)?d=W.access(a,b,r.makeArray(c)):d.push(c)),d||[]},dequeue:function(a,b){b=b||"fx";var c=r.queue(a,b),d=c.length,e=c.shift(),f=r._queueHooks(a,b),g=function(){r.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return W.get(a,c)||W.access(a,c,{empty:r.Callbacks("once memory").add(function(){W.remove(a,[b+"queue",c])})})}}),r.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?r.queue(this[0],a):void 0===b?this:this.each(function(){var c=r.queue(this,a,b);r._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&r.dequeue(this,a)})},dequeue:function(a){return this.each(function(){r.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=r.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=W.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var aa=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,ba=new RegExp("^(?:([+-])=|)("+aa+")([a-z%]*)$","i"),ca=["Top","Right","Bottom","Left"],da=function(a,b){return a=b||a,"none"===a.style.display||""===a.style.display&&r.contains(a.ownerDocument,a)&&"none"===r.css(a,"display")},ea=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};function fa(a,b,c,d){var e,f=1,g=20,h=d?function(){return d.cur()}:function(){return r.css(a,b,"")},i=h(),j=c&&c[3]||(r.cssNumber[b]?"":"px"),k=(r.cssNumber[b]||"px"!==j&&+i)&&ba.exec(r.css(a,b));if(k&&k[3]!==j){j=j||k[3],c=c||[],k=+i||1;do f=f||".5",k/=f,r.style(a,b,k+j);while(f!==(f=h()/i)&&1!==f&&--g)}return c&&(k=+k||+i||0,e=c[1]?k+(c[1]+1)*c[2]:+c[2],d&&(d.unit=j,d.start=k,d.end=e)),e}var ga={};function ha(a){var b,c=a.ownerDocument,d=a.nodeName,e=ga[d];return e?e:(b=c.body.appendChild(c.createElement(d)),e=r.css(b,"display"),b.parentNode.removeChild(b),"none"===e&&(e="block"),ga[d]=e,e)}function ia(a,b){for(var c,d,e=[],f=0,g=a.length;f<g;f++)d=a[f],d.style&&(c=d.style.display,b?("none"===c&&(e[f]=W.get(d,"display")||null,e[f]||(d.style.display="")),""===d.style.display&&da(d)&&(e[f]=ha(d))):"none"!==c&&(e[f]="none",W.set(d,"display",c)));for(f=0;f<g;f++)null!=e[f]&&(a[f].style.display=e[f]);return a}r.fn.extend({show:function(){return ia(this,!0)},hide:function(){return ia(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){da(this)?r(this).show():r(this).hide()})}});var ja=/^(?:checkbox|radio)$/i,ka=/<([a-z][^\/\0>\x20\t\r\n\f]+)/i,la=/^$|\/(?:java|ecma)script/i,ma={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};ma.optgroup=ma.option,ma.tbody=ma.tfoot=ma.colgroup=ma.caption=ma.thead,ma.th=ma.td;function na(a,b){var c;return c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[],void 0===b||b&&B(a,b)?r.merge([a],c):c}function oa(a,b){for(var c=0,d=a.length;c<d;c++)W.set(a[c],"globalEval",!b||W.get(b[c],"globalEval"))}var pa=/<|&#?\w+;/;function qa(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],n=0,o=a.length;n<o;n++)if(f=a[n],f||0===f)if("object"===r.type(f))r.merge(m,f.nodeType?[f]:f);else if(pa.test(f)){g=g||l.appendChild(b.createElement("div")),h=(ka.exec(f)||["",""])[1].toLowerCase(),i=ma[h]||ma._default,g.innerHTML=i[1]+r.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;r.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",n=0;while(f=m[n++])if(d&&r.inArray(f,d)>-1)e&&e.push(f);else if(j=r.contains(f.ownerDocument,f),g=na(l.appendChild(f),"script"),j&&oa(g),c){k=0;while(f=g[k++])la.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),o.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",o.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var ra=d.documentElement,sa=/^key/,ta=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,ua=/^([^.]*)(?:\.(.+)|)/;function va(){return!0}function wa(){return!1}function xa(){try{return d.activeElement}catch(a){}}function ya(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)ya(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=wa;else if(!e)return a;return 1===f&&(g=e,e=function(a){return r().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=r.guid++)),a.each(function(){r.event.add(this,b,e,d,c)})}r.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=W.get(a);if(q){c.handler&&(f=c,c=f.handler,e=f.selector),e&&r.find.matchesSelector(ra,e),c.guid||(c.guid=r.guid++),(i=q.events)||(i=q.events={}),(g=q.handle)||(g=q.handle=function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(L)||[""],j=b.length;while(j--)h=ua.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n&&(l=r.event.special[n]||{},n=(e?l.delegateType:l.bindType)||n,l=r.event.special[n]||{},k=r.extend({type:n,origType:p,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&r.expr.match.needsContext.test(e),namespace:o.join(".")},f),(m=i[n])||(m=i[n]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,o,g)!==!1||a.addEventListener&&a.addEventListener(n,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),r.event.global[n]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=W.hasData(a)&&W.get(a);if(q&&(i=q.events)){b=(b||"").match(L)||[""],j=b.length;while(j--)if(h=ua.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n){l=r.event.special[n]||{},n=(d?l.delegateType:l.bindType)||n,m=i[n]||[],h=h[2]&&new RegExp("(^|\\.)"+o.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&p!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,o,q.handle)!==!1||r.removeEvent(a,n,q.handle),delete i[n])}else for(n in i)r.event.remove(a,n+b[j],c,d,!0);r.isEmptyObject(i)&&W.remove(a,"handle events")}},dispatch:function(a){var b=r.event.fix(a),c,d,e,f,g,h,i=new Array(arguments.length),j=(W.get(this,"events")||{})[b.type]||[],k=r.event.special[b.type]||{};for(i[0]=b,c=1;c<arguments.length;c++)i[c]=arguments[c];if(b.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,b)!==!1){h=r.event.handlers.call(this,b,j),c=0;while((f=h[c++])&&!b.isPropagationStopped()){b.currentTarget=f.elem,d=0;while((g=f.handlers[d++])&&!b.isImmediatePropagationStopped())b.rnamespace&&!b.rnamespace.test(g.namespace)||(b.handleObj=g,b.data=g.data,e=((r.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(b.result=e)===!1&&(b.preventDefault(),b.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,b),b.result}},handlers:function(a,b){var c,d,e,f,g,h=[],i=b.delegateCount,j=a.target;if(i&&j.nodeType&&!("click"===a.type&&a.button>=1))for(;j!==this;j=j.parentNode||this)if(1===j.nodeType&&("click"!==a.type||j.disabled!==!0)){for(f=[],g={},c=0;c<i;c++)d=b[c],e=d.selector+" ",void 0===g[e]&&(g[e]=d.needsContext?r(e,this).index(j)>-1:r.find(e,this,null,[j]).length),g[e]&&f.push(d);f.length&&h.push({elem:j,handlers:f})}return j=this,i<b.length&&h.push({elem:j,handlers:b.slice(i)}),h},addProp:function(a,b){Object.defineProperty(r.Event.prototype,a,{enumerable:!0,configurable:!0,get:r.isFunction(b)?function(){if(this.originalEvent)return b(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[a]},set:function(b){Object.defineProperty(this,a,{enumerable:!0,configurable:!0,writable:!0,value:b})}})},fix:function(a){return a[r.expando]?a:new r.Event(a)},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!==xa()&&this.focus)return this.focus(),!1},delegateType:"focusin"},blur:{trigger:function(){if(this===xa()&&this.blur)return this.blur(),!1},delegateType:"focusout"},click:{trigger:function(){if("checkbox"===this.type&&this.click&&B(this,"input"))return this.click(),!1},_default:function(a){return B(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}}},r.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c)},r.Event=function(a,b){return this instanceof r.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?va:wa,this.target=a.target&&3===a.target.nodeType?a.target.parentNode:a.target,this.currentTarget=a.currentTarget,this.relatedTarget=a.relatedTarget):this.type=a,b&&r.extend(this,b),this.timeStamp=a&&a.timeStamp||r.now(),void(this[r.expando]=!0)):new r.Event(a,b)},r.Event.prototype={constructor:r.Event,isDefaultPrevented:wa,isPropagationStopped:wa,isImmediatePropagationStopped:wa,isSimulated:!1,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=va,a&&!this.isSimulated&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=va,a&&!this.isSimulated&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=va,a&&!this.isSimulated&&a.stopImmediatePropagation(),this.stopPropagation()}},r.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:function(a){var b=a.button;return null==a.which&&sa.test(a.type)?null!=a.charCode?a.charCode:a.keyCode:!a.which&&void 0!==b&&ta.test(a.type)?1&b?1:2&b?3:4&b?2:0:a.which}},r.event.addProp),r.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){r.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return e&&(e===d||r.contains(d,e))||(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),r.fn.extend({on:function(a,b,c,d){return ya(this,a,b,c,d)},one:function(a,b,c,d){return ya(this,a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,r(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return b!==!1&&"function"!=typeof b||(c=b,b=void 0),c===!1&&(c=wa),this.each(function(){r.event.remove(this,a,c,b)})}});var za=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,Aa=/<script|<style|<link/i,Ba=/checked\s*(?:[^=]|=\s*.checked.)/i,Ca=/^true\/(.*)/,Da=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function Ea(a,b){return B(a,"table")&&B(11!==b.nodeType?b:b.firstChild,"tr")?r(">tbody",a)[0]||a:a}function Fa(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function Ga(a){var b=Ca.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Ha(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(W.hasData(a)&&(f=W.access(a),g=W.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;c<d;c++)r.event.add(b,e,j[e][c])}X.hasData(a)&&(h=X.access(a),i=r.extend({},h),X.set(b,i))}}function Ia(a,b){var c=b.nodeName.toLowerCase();"input"===c&&ja.test(a.type)?b.checked=a.checked:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}function Ja(a,b,c,d){b=g.apply([],b);var e,f,h,i,j,k,l=0,m=a.length,n=m-1,q=b[0],s=r.isFunction(q);if(s||m>1&&"string"==typeof q&&!o.checkClone&&Ba.test(q))return a.each(function(e){var f=a.eq(e);s&&(b[0]=q.call(this,e,f.html())),Ja(f,b,c,d)});if(m&&(e=qa(b,a[0].ownerDocument,!1,a,d),f=e.firstChild,1===e.childNodes.length&&(e=f),f||d)){for(h=r.map(na(e,"script"),Fa),i=h.length;l<m;l++)j=e,l!==n&&(j=r.clone(j,!0,!0),i&&r.merge(h,na(j,"script"))),c.call(a[l],j,l);if(i)for(k=h[h.length-1].ownerDocument,r.map(h,Ga),l=0;l<i;l++)j=h[l],la.test(j.type||"")&&!W.access(j,"globalEval")&&r.contains(k,j)&&(j.src?r._evalUrl&&r._evalUrl(j.src):p(j.textContent.replace(Da,""),k))}return a}function Ka(a,b,c){for(var d,e=b?r.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||r.cleanData(na(d)),d.parentNode&&(c&&r.contains(d.ownerDocument,d)&&oa(na(d,"script")),d.parentNode.removeChild(d));return a}r.extend({htmlPrefilter:function(a){return a.replace(za,"<$1></$2>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=r.contains(a.ownerDocument,a);if(!(o.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||r.isXMLDoc(a)))for(g=na(h),f=na(a),d=0,e=f.length;d<e;d++)Ia(f[d],g[d]);if(b)if(c)for(f=f||na(a),g=g||na(h),d=0,e=f.length;d<e;d++)Ha(f[d],g[d]);else Ha(a,h);return g=na(h,"script"),g.length>0&&oa(g,!i&&na(a,"script")),h},cleanData:function(a){for(var b,c,d,e=r.event.special,f=0;void 0!==(c=a[f]);f++)if(U(c)){if(b=c[W.expando]){if(b.events)for(d in b.events)e[d]?r.event.remove(c,d):r.removeEvent(c,d,b.handle);c[W.expando]=void 0}c[X.expando]&&(c[X.expando]=void 0)}}}),r.fn.extend({detach:function(a){return Ka(this,a,!0)},remove:function(a){return Ka(this,a)},text:function(a){return T(this,function(a){return void 0===a?r.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)},append:function(){return Ja(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ea(this,a);b.appendChild(a)}})},prepend:function(){return Ja(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ea(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ja(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ja(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(r.cleanData(na(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null!=a&&a,b=null==b?a:b,this.map(function(){return r.clone(this,a,b)})},html:function(a){return T(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!Aa.test(a)&&!ma[(ka.exec(a)||["",""])[1].toLowerCase()]){a=r.htmlPrefilter(a);try{for(;c<d;c++)b=this[c]||{},1===b.nodeType&&(r.cleanData(na(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return Ja(this,arguments,function(b){var c=this.parentNode;r.inArray(this,a)<0&&(r.cleanData(na(this)),c&&c.replaceChild(b,this))},a)}}),r.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){r.fn[a]=function(a){for(var c,d=[],e=r(a),f=e.length-1,g=0;g<=f;g++)c=g===f?this:this.clone(!0),r(e[g])[b](c),h.apply(d,c.get());return this.pushStack(d)}});var La=/^margin/,Ma=new RegExp("^("+aa+")(?!px)[a-z%]+$","i"),Na=function(b){var c=b.ownerDocument.defaultView;return c&&c.opener||(c=a),c.getComputedStyle(b)};!function(){function b(){if(i){i.style.cssText="box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%",i.innerHTML="",ra.appendChild(h);var b=a.getComputedStyle(i);c="1%"!==b.top,g="2px"===b.marginLeft,e="4px"===b.width,i.style.marginRight="50%",f="4px"===b.marginRight,ra.removeChild(h),i=null}}var c,e,f,g,h=d.createElement("div"),i=d.createElement("div");i.style&&(i.style.backgroundClip="content-box",i.cloneNode(!0).style.backgroundClip="",o.clearCloneStyle="content-box"===i.style.backgroundClip,h.style.cssText="border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute",h.appendChild(i),r.extend(o,{pixelPosition:function(){return b(),c},boxSizingReliable:function(){return b(),e},pixelMarginRight:function(){return b(),f},reliableMarginLeft:function(){return b(),g}}))}();function Oa(a,b,c){var d,e,f,g,h=a.style;return c=c||Na(a),c&&(g=c.getPropertyValue(b)||c[b],""!==g||r.contains(a.ownerDocument,a)||(g=r.style(a,b)),!o.pixelMarginRight()&&Ma.test(g)&&La.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function Pa(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}var Qa=/^(none|table(?!-c[ea]).+)/,Ra=/^--/,Sa={position:"absolute",visibility:"hidden",display:"block"},Ta={letterSpacing:"0",fontWeight:"400"},Ua=["Webkit","Moz","ms"],Va=d.createElement("div").style;function Wa(a){if(a in Va)return a;var b=a[0].toUpperCase()+a.slice(1),c=Ua.length;while(c--)if(a=Ua[c]+b,a in Va)return a}function Xa(a){var b=r.cssProps[a];return b||(b=r.cssProps[a]=Wa(a)||a),b}function Ya(a,b,c){var d=ba.exec(b);return d?Math.max(0,d[2]-(c||0))+(d[3]||"px"):b}function Za(a,b,c,d,e){var f,g=0;for(f=c===(d?"border":"content")?4:"width"===b?1:0;f<4;f+=2)"margin"===c&&(g+=r.css(a,c+ca[f],!0,e)),d?("content"===c&&(g-=r.css(a,"padding"+ca[f],!0,e)),"margin"!==c&&(g-=r.css(a,"border"+ca[f]+"Width",!0,e))):(g+=r.css(a,"padding"+ca[f],!0,e),"padding"!==c&&(g+=r.css(a,"border"+ca[f]+"Width",!0,e)));return g}function $a(a,b,c){var d,e=Na(a),f=Oa(a,b,e),g="border-box"===r.css(a,"boxSizing",!1,e);return Ma.test(f)?f:(d=g&&(o.boxSizingReliable()||f===a.style[b]),"auto"===f&&(f=a["offset"+b[0].toUpperCase()+b.slice(1)]),f=parseFloat(f)||0,f+Za(a,b,c||(g?"border":"content"),d,e)+"px")}r.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Oa(a,"opacity");return""===c?"1":c}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=r.camelCase(b),i=Ra.test(b),j=a.style;return i||(b=Xa(h)),g=r.cssHooks[b]||r.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:j[b]:(f=typeof c,"string"===f&&(e=ba.exec(c))&&e[1]&&(c=fa(a,b,e),f="number"),null!=c&&c===c&&("number"===f&&(c+=e&&e[3]||(r.cssNumber[h]?"":"px")),o.clearCloneStyle||""!==c||0!==b.indexOf("background")||(j[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i?j.setProperty(b,c):j[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=r.camelCase(b),i=Ra.test(b);return i||(b=Xa(h)),g=r.cssHooks[b]||r.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=Oa(a,b,d)),"normal"===e&&b in Ta&&(e=Ta[b]),""===c||c?(f=parseFloat(e),c===!0||isFinite(f)?f||0:e):e}}),r.each(["height","width"],function(a,b){r.cssHooks[b]={get:function(a,c,d){if(c)return!Qa.test(r.css(a,"display"))||a.getClientRects().length&&a.getBoundingClientRect().width?$a(a,b,d):ea(a,Sa,function(){return $a(a,b,d)})},set:function(a,c,d){var e,f=d&&Na(a),g=d&&Za(a,b,d,"border-box"===r.css(a,"boxSizing",!1,f),f);return g&&(e=ba.exec(c))&&"px"!==(e[3]||"px")&&(a.style[b]=c,c=r.css(a,b)),Ya(a,c,g)}}}),r.cssHooks.marginLeft=Pa(o.reliableMarginLeft,function(a,b){if(b)return(parseFloat(Oa(a,"marginLeft"))||a.getBoundingClientRect().left-ea(a,{marginLeft:0},function(){return a.getBoundingClientRect().left}))+"px"}),r.each({margin:"",padding:"",border:"Width"},function(a,b){r.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];d<4;d++)e[a+ca[d]+b]=f[d]||f[d-2]||f[0];return e}},La.test(a)||(r.cssHooks[a+b].set=Ya)}),r.fn.extend({css:function(a,b){return T(this,function(a,b,c){var d,e,f={},g=0;if(Array.isArray(b)){for(d=Na(a),e=b.length;g<e;g++)f[b[g]]=r.css(a,b[g],!1,d);return f}return void 0!==c?r.style(a,b,c):r.css(a,b)},a,b,arguments.length>1)}}),r.fn.delay=function(b,c){return b=r.fx?r.fx.speeds[b]||b:b,c=c||"fx",this.queue(c,function(c,d){var e=a.setTimeout(c,b);d.stop=function(){a.clearTimeout(e)}})},function(){var a=d.createElement("input"),b=d.createElement("select"),c=b.appendChild(d.createElement("option"));a.type="checkbox",o.checkOn=""!==a.value,o.optSelected=c.selected,a=d.createElement("input"),a.value="t",a.type="radio",o.radioValue="t"===a.value}();var _a,ab=r.expr.attrHandle;r.fn.extend({attr:function(a,b){return T(this,r.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){r.removeAttr(this,a)})}}),r.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?r.prop(a,b,c):(1===f&&r.isXMLDoc(a)||(e=r.attrHooks[b.toLowerCase()]||(r.expr.match.bool.test(b)?_a:void 0)),void 0!==c?null===c?void r.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=r.find.attr(a,b),null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!o.radioValue&&"radio"===b&&B(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d=0,e=b&&b.match(L);if(e&&1===a.nodeType)while(c=e[d++])a.removeAttribute(c)}}),_a={set:function(a,b,c){return b===!1?r.removeAttr(a,c):a.setAttribute(c,c),c}},r.each(r.expr.match.bool.source.match(/\w+/g),function(a,b){var c=ab[b]||r.find.attr;ab[b]=function(a,b,d){var e,f,g=b.toLowerCase();return d||(f=ab[g],ab[g]=e,e=null!=c(a,b,d)?g:null,ab[g]=f),e}});var bb=/^(?:input|select|textarea|button)$/i,cb=/^(?:a|area)$/i;r.fn.extend({prop:function(a,b){return T(this,r.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[r.propFix[a]||a]})}}),r.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&r.isXMLDoc(a)||(b=r.propFix[b]||b,e=r.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=r.find.attr(a,"tabindex");return b?parseInt(b,10):bb.test(a.nodeName)||cb.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),o.optSelected||(r.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null},set:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}}),r.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){r.propFix[this.toLowerCase()]=this});function db(a){var b=a.match(L)||[];return b.join(" ")}function eb(a){return a.getAttribute&&a.getAttribute("class")||""}r.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).addClass(a.call(this,b,eb(this)))});if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=eb(c),d=1===c.nodeType&&" "+db(e)+" "){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=db(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).removeClass(a.call(this,b,eb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=eb(c),d=1===c.nodeType&&" "+db(e)+" "){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=db(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):r.isFunction(a)?this.each(function(c){r(this).toggleClass(a.call(this,c,eb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=r(this),f=a.match(L)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else void 0!==a&&"boolean"!==c||(b=eb(this),b&&W.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":W.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+db(eb(c))+" ").indexOf(b)>-1)return!0;return!1}});var fb=/\r/g;r.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=r.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,r(this).val()):a,null==e?e="":"number"==typeof e?e+="":Array.isArray(e)&&(e=r.map(e,function(a){return null==a?"":a+""})),b=r.valHooks[this.type]||r.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=r.valHooks[e.type]||r.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(fb,""):null==c?"":c)}}}),r.extend({valHooks:{option:{get:function(a){var b=r.find.attr(a,"value");return null!=b?b:db(r.text(a))}},select:{get:function(a){var b,c,d,e=a.options,f=a.selectedIndex,g="select-one"===a.type,h=g?null:[],i=g?f+1:e.length;for(d=f<0?i:g?f:0;d<i;d++)if(c=e[d],(c.selected||d===f)&&!c.disabled&&(!c.parentNode.disabled||!B(c.parentNode,"optgroup"))){if(b=r(c).val(),g)return b;h.push(b)}return h},set:function(a,b){var c,d,e=a.options,f=r.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=r.inArray(r.valHooks.option.get(d),f)>-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),r.each(["radio","checkbox"],function(){r.valHooks[this]={set:function(a,b){if(Array.isArray(b))return a.checked=r.inArray(r(a).val(),b)>-1}},o.checkOn||(r.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var gb=/^(?:focusinfocus|focusoutblur)$/;r.extend(r.event,{trigger:function(b,c,e,f){var g,h,i,j,k,m,n,o=[e||d],p=l.call(b,"type")?b.type:b,q=l.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!gb.test(p+r.event.triggered)&&(p.indexOf(".")>-1&&(q=p.split("."),p=q.shift(),q.sort()),k=p.indexOf(":")<0&&"on"+p,b=b[r.expando]?b:new r.Event(p,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=q.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+q.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:r.makeArray(c,[b]),n=r.event.special[p]||{},f||!n.trigger||n.trigger.apply(e,c)!==!1)){if(!f&&!n.noBubble&&!r.isWindow(e)){for(j=n.delegateType||p,gb.test(j+p)||(h=h.parentNode);h;h=h.parentNode)o.push(h),i=h;i===(e.ownerDocument||d)&&o.push(i.defaultView||i.parentWindow||a)}g=0;while((h=o[g++])&&!b.isPropagationStopped())b.type=g>1?j:n.bindType||p,m=(W.get(h,"events")||{})[b.type]&&W.get(h,"handle"),m&&m.apply(h,c),m=k&&h[k],m&&m.apply&&U(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=p,f||b.isDefaultPrevented()||n._default&&n._default.apply(o.pop(),c)!==!1||!U(e)||k&&r.isFunction(e[p])&&!r.isWindow(e)&&(i=e[k],i&&(e[k]=null),r.event.triggered=p,e[p](),r.event.triggered=void 0,i&&(e[k]=i)),b.result}},simulate:function(a,b,c){var d=r.extend(new r.Event,c,{type:a,isSimulated:!0});r.event.trigger(d,null,b)}}),r.fn.extend({trigger:function(a,b){return this.each(function(){r.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];if(c)return r.event.trigger(a,b,c,!0)}}),r.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(a,b){r.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),r.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),o.focusin="onfocusin"in a,o.focusin||r.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){r.event.simulate(b,a.target,r.event.fix(a))};r.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=W.access(d,b);e||d.addEventListener(a,c,!0),W.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=W.access(d,b)-1;e?W.access(d,b,e):(d.removeEventListener(a,c,!0),W.remove(d,b))}}});var hb=/\[\]$/,ib=/\r?\n/g,jb=/^(?:submit|button|image|reset|file)$/i,kb=/^(?:input|select|textarea|keygen)/i;function lb(a,b,c,d){var e;if(Array.isArray(b))r.each(b,function(b,e){c||hb.test(a)?d(a,e):lb(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d);
+});else if(c||"object"!==r.type(b))d(a,b);else for(e in b)lb(a+"["+e+"]",b[e],c,d)}r.param=function(a,b){var c,d=[],e=function(a,b){var c=r.isFunction(b)?b():b;d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(null==c?"":c)};if(Array.isArray(a)||a.jquery&&!r.isPlainObject(a))r.each(a,function(){e(this.name,this.value)});else for(c in a)lb(c,a[c],b,e);return d.join("&")},r.fn.extend({serialize:function(){return r.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=r.prop(this,"elements");return a?r.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!r(this).is(":disabled")&&kb.test(this.nodeName)&&!jb.test(a)&&(this.checked||!ja.test(a))}).map(function(a,b){var c=r(this).val();return null==c?null:Array.isArray(c)?r.map(c,function(a){return{name:b.name,value:a.replace(ib,"\r\n")}}):{name:b.name,value:c.replace(ib,"\r\n")}}).get()}}),r.fn.extend({wrapAll:function(a){var b;return this[0]&&(r.isFunction(a)&&(a=a.call(this[0])),b=r(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this},wrapInner:function(a){return r.isFunction(a)?this.each(function(b){r(this).wrapInner(a.call(this,b))}):this.each(function(){var b=r(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=r.isFunction(a);return this.each(function(c){r(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(a){return this.parent(a).not("body").each(function(){r(this).replaceWith(this.childNodes)}),this}}),r.expr.pseudos.hidden=function(a){return!r.expr.pseudos.visible(a)},r.expr.pseudos.visible=function(a){return!!(a.offsetWidth||a.offsetHeight||a.getClientRects().length)},o.createHTMLDocument=function(){var a=d.implementation.createHTMLDocument("").body;return a.innerHTML="<form></form><form></form>",2===a.childNodes.length}(),r.parseHTML=function(a,b,c){if("string"!=typeof a)return[];"boolean"==typeof b&&(c=b,b=!1);var e,f,g;return b||(o.createHTMLDocument?(b=d.implementation.createHTMLDocument(""),e=b.createElement("base"),e.href=d.location.href,b.head.appendChild(e)):b=d),f=C.exec(a),g=!c&&[],f?[b.createElement(f[1])]:(f=qa([a],b,g),g&&g.length&&r(g).remove(),r.merge([],f.childNodes))},r.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=r.css(a,"position"),l=r(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=r.css(a,"top"),i=r.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),r.isFunction(b)&&(b=b.call(a,c,r.extend({},h))),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},r.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){r.offset.setOffset(this,a,b)});var b,c,d,e,f=this[0];if(f)return f.getClientRects().length?(d=f.getBoundingClientRect(),b=f.ownerDocument,c=b.documentElement,e=b.defaultView,{top:d.top+e.pageYOffset-c.clientTop,left:d.left+e.pageXOffset-c.clientLeft}):{top:0,left:0}},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===r.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),B(a[0],"html")||(d=a.offset()),d={top:d.top+r.css(a[0],"borderTopWidth",!0),left:d.left+r.css(a[0],"borderLeftWidth",!0)}),{top:b.top-d.top-r.css(c,"marginTop",!0),left:b.left-d.left-r.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent;while(a&&"static"===r.css(a,"position"))a=a.offsetParent;return a||ra})}}),r.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c="pageYOffset"===b;r.fn[a]=function(d){return T(this,function(a,d,e){var f;return r.isWindow(a)?f=a:9===a.nodeType&&(f=a.defaultView),void 0===e?f?f[b]:a[d]:void(f?f.scrollTo(c?f.pageXOffset:e,c?e:f.pageYOffset):a[d]=e)},a,d,arguments.length)}}),r.each(["top","left"],function(a,b){r.cssHooks[b]=Pa(o.pixelPosition,function(a,c){if(c)return c=Oa(a,b),Ma.test(c)?r(a).position()[b]+"px":c})}),r.each({Height:"height",Width:"width"},function(a,b){r.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){r.fn[d]=function(e,f){var g=arguments.length&&(c||"boolean"!=typeof e),h=c||(e===!0||f===!0?"margin":"border");return T(this,function(b,c,e){var f;return r.isWindow(b)?0===d.indexOf("outer")?b["inner"+a]:b.document.documentElement["client"+a]:9===b.nodeType?(f=b.documentElement,Math.max(b.body["scroll"+a],f["scroll"+a],b.body["offset"+a],f["offset"+a],f["client"+a])):void 0===e?r.css(b,c,h):r.style(b,c,e,h)},b,g?e:void 0,g)}})}),r.fn.extend({bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}}),r.holdReady=function(a){a?r.readyWait++:r.ready(!0)},r.isArray=Array.isArray,r.parseJSON=JSON.parse,r.nodeName=B,"function"==typeof define&&define.amd&&define("jquery",[],function(){return r});var mb=a.jQuery,nb=a.$;return r.noConflict=function(b){return a.$===r&&(a.$=nb),b&&a.jQuery===r&&(a.jQuery=mb),r},b||(a.jQuery=a.$=r),r});
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/popper.min.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/popper.min.js
new file mode 100644
index 00000000..0f20d2a8
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/popper.min.js
@@ -0,0 +1,5 @@
+/*
+ Copyright (C) Federico Zivolo 2017
+ Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT).
+ */(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.Popper=t()})(this,function(){'use strict';function e(e){return e&&'[object Function]'==={}.toString.call(e)}function t(e,t){if(1!==e.nodeType)return[];var o=getComputedStyle(e,null);return t?o[t]:o}function o(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function n(e){if(!e)return document.body;switch(e.nodeName){case'HTML':case'BODY':return e.ownerDocument.body;case'#document':return e.body;}var i=t(e),r=i.overflow,p=i.overflowX,s=i.overflowY;return /(auto|scroll)/.test(r+s+p)?e:n(o(e))}function r(e){var o=e&&e.offsetParent,i=o&&o.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(o.nodeName)&&'static'===t(o,'position')?r(o):o:e?e.ownerDocument.documentElement:document.documentElement}function p(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||r(e.firstElementChild)===e)}function s(e){return null===e.parentNode?e:s(e.parentNode)}function d(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,i=o?e:t,n=o?t:e,a=document.createRange();a.setStart(i,0),a.setEnd(n,0);var l=a.commonAncestorContainer;if(e!==l&&t!==l||i.contains(n))return p(l)?l:r(l);var f=s(e);return f.host?d(f.host,t):d(e,s(t).host)}function a(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:'top',o='top'===t?'scrollTop':'scrollLeft',i=e.nodeName;if('BODY'===i||'HTML'===i){var n=e.ownerDocument.documentElement,r=e.ownerDocument.scrollingElement||n;return r[o]}return e[o]}function l(e,t){var o=2<arguments.length&&void 0!==arguments[2]&&arguments[2],i=a(t,'top'),n=a(t,'left'),r=o?-1:1;return e.top+=i*r,e.bottom+=i*r,e.left+=n*r,e.right+=n*r,e}function f(e,t){var o='x'===t?'Left':'Top',i='Left'==o?'Right':'Bottom';return parseFloat(e['border'+o+'Width'],10)+parseFloat(e['border'+i+'Width'],10)}function m(e,t,o,i){return J(t['offset'+e],t['scroll'+e],o['client'+e],o['offset'+e],o['scroll'+e],ie()?o['offset'+e]+i['margin'+('Height'===e?'Top':'Left')]+i['margin'+('Height'===e?'Bottom':'Right')]:0)}function h(){var e=document.body,t=document.documentElement,o=ie()&&getComputedStyle(t);return{height:m('Height',e,t,o),width:m('Width',e,t,o)}}function c(e){return se({},e,{right:e.left+e.width,bottom:e.top+e.height})}function g(e){var o={};if(ie())try{o=e.getBoundingClientRect();var i=a(e,'top'),n=a(e,'left');o.top+=i,o.left+=n,o.bottom+=i,o.right+=n}catch(e){}else o=e.getBoundingClientRect();var r={left:o.left,top:o.top,width:o.right-o.left,height:o.bottom-o.top},p='HTML'===e.nodeName?h():{},s=p.width||e.clientWidth||r.right-r.left,d=p.height||e.clientHeight||r.bottom-r.top,l=e.offsetWidth-s,m=e.offsetHeight-d;if(l||m){var g=t(e);l-=f(g,'x'),m-=f(g,'y'),r.width-=l,r.height-=m}return c(r)}function u(e,o){var i=ie(),r='HTML'===o.nodeName,p=g(e),s=g(o),d=n(e),a=t(o),f=parseFloat(a.borderTopWidth,10),m=parseFloat(a.borderLeftWidth,10),h=c({top:p.top-s.top-f,left:p.left-s.left-m,width:p.width,height:p.height});if(h.marginTop=0,h.marginLeft=0,!i&&r){var u=parseFloat(a.marginTop,10),b=parseFloat(a.marginLeft,10);h.top-=f-u,h.bottom-=f-u,h.left-=m-b,h.right-=m-b,h.marginTop=u,h.marginLeft=b}return(i?o.contains(d):o===d&&'BODY'!==d.nodeName)&&(h=l(h,o)),h}function b(e){var t=e.ownerDocument.documentElement,o=u(e,t),i=J(t.clientWidth,window.innerWidth||0),n=J(t.clientHeight,window.innerHeight||0),r=a(t),p=a(t,'left'),s={top:r-o.top+o.marginTop,left:p-o.left+o.marginLeft,width:i,height:n};return c(s)}function w(e){var i=e.nodeName;return'BODY'===i||'HTML'===i?!1:'fixed'===t(e,'position')||w(o(e))}function y(e,t,i,r){var p={top:0,left:0},s=d(e,t);if('viewport'===r)p=b(s);else{var a;'scrollParent'===r?(a=n(o(t)),'BODY'===a.nodeName&&(a=e.ownerDocument.documentElement)):'window'===r?a=e.ownerDocument.documentElement:a=r;var l=u(a,s);if('HTML'===a.nodeName&&!w(s)){var f=h(),m=f.height,c=f.width;p.top+=l.top-l.marginTop,p.bottom=m+l.top,p.left+=l.left-l.marginLeft,p.right=c+l.left}else p=l}return p.left+=i,p.top+=i,p.right-=i,p.bottom-=i,p}function E(e){var t=e.width,o=e.height;return t*o}function v(e,t,o,i,n){var r=5<arguments.length&&void 0!==arguments[5]?arguments[5]:0;if(-1===e.indexOf('auto'))return e;var p=y(o,i,r,n),s={top:{width:p.width,height:t.top-p.top},right:{width:p.right-t.right,height:p.height},bottom:{width:p.width,height:p.bottom-t.bottom},left:{width:t.left-p.left,height:p.height}},d=Object.keys(s).map(function(e){return se({key:e},s[e],{area:E(s[e])})}).sort(function(e,t){return t.area-e.area}),a=d.filter(function(e){var t=e.width,i=e.height;return t>=o.clientWidth&&i>=o.clientHeight}),l=0<a.length?a[0].key:d[0].key,f=e.split('-')[1];return l+(f?'-'+f:'')}function O(e,t,o){var i=d(t,o);return u(o,i)}function L(e){var t=getComputedStyle(e),o=parseFloat(t.marginTop)+parseFloat(t.marginBottom),i=parseFloat(t.marginLeft)+parseFloat(t.marginRight),n={width:e.offsetWidth+i,height:e.offsetHeight+o};return n}function x(e){var t={left:'right',right:'left',bottom:'top',top:'bottom'};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function S(e,t,o){o=o.split('-')[0];var i=L(e),n={width:i.width,height:i.height},r=-1!==['right','left'].indexOf(o),p=r?'top':'left',s=r?'left':'top',d=r?'height':'width',a=r?'width':'height';return n[p]=t[p]+t[d]/2-i[d]/2,n[s]=o===s?t[s]-i[a]:t[x(s)],n}function T(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function D(e,t,o){if(Array.prototype.findIndex)return e.findIndex(function(e){return e[t]===o});var i=T(e,function(e){return e[t]===o});return e.indexOf(i)}function C(t,o,i){var n=void 0===i?t:t.slice(0,D(t,'name',i));return n.forEach(function(t){t['function']&&console.warn('`modifier.function` is deprecated, use `modifier.fn`!');var i=t['function']||t.fn;t.enabled&&e(i)&&(o.offsets.popper=c(o.offsets.popper),o.offsets.reference=c(o.offsets.reference),o=i(o,t))}),o}function N(){if(!this.state.isDestroyed){var e={instance:this,styles:{},arrowStyles:{},attributes:{},flipped:!1,offsets:{}};e.offsets.reference=O(this.state,this.popper,this.reference),e.placement=v(this.options.placement,e.offsets.reference,this.popper,this.reference,this.options.modifiers.flip.boundariesElement,this.options.modifiers.flip.padding),e.originalPlacement=e.placement,e.offsets.popper=S(this.popper,e.offsets.reference,e.placement),e.offsets.popper.position='absolute',e=C(this.modifiers,e),this.state.isCreated?this.options.onUpdate(e):(this.state.isCreated=!0,this.options.onCreate(e))}}function k(e,t){return e.some(function(e){var o=e.name,i=e.enabled;return i&&o===t})}function W(e){for(var t=[!1,'ms','Webkit','Moz','O'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length-1;n++){var i=t[n],r=i?''+i+o:e;if('undefined'!=typeof document.body.style[r])return r}return null}function P(){return this.state.isDestroyed=!0,k(this.modifiers,'applyStyle')&&(this.popper.removeAttribute('x-placement'),this.popper.style.left='',this.popper.style.position='',this.popper.style.top='',this.popper.style[W('transform')]=''),this.disableEventListeners(),this.options.removeOnDestroy&&this.popper.parentNode.removeChild(this.popper),this}function B(e){var t=e.ownerDocument;return t?t.defaultView:window}function H(e,t,o,i){var r='BODY'===e.nodeName,p=r?e.ownerDocument.defaultView:e;p.addEventListener(t,o,{passive:!0}),r||H(n(p.parentNode),t,o,i),i.push(p)}function A(e,t,o,i){o.updateBound=i,B(e).addEventListener('resize',o.updateBound,{passive:!0});var r=n(e);return H(r,'scroll',o.updateBound,o.scrollParents),o.scrollElement=r,o.eventsEnabled=!0,o}function I(){this.state.eventsEnabled||(this.state=A(this.reference,this.options,this.state,this.scheduleUpdate))}function M(e,t){return B(e).removeEventListener('resize',t.updateBound),t.scrollParents.forEach(function(e){e.removeEventListener('scroll',t.updateBound)}),t.updateBound=null,t.scrollParents=[],t.scrollElement=null,t.eventsEnabled=!1,t}function R(){this.state.eventsEnabled&&(cancelAnimationFrame(this.scheduleUpdate),this.state=M(this.reference,this.state))}function U(e){return''!==e&&!isNaN(parseFloat(e))&&isFinite(e)}function Y(e,t){Object.keys(t).forEach(function(o){var i='';-1!==['width','height','top','right','bottom','left'].indexOf(o)&&U(t[o])&&(i='px'),e.style[o]=t[o]+i})}function j(e,t){Object.keys(t).forEach(function(o){var i=t[o];!1===i?e.removeAttribute(o):e.setAttribute(o,t[o])})}function F(e,t,o){var i=T(e,function(e){var o=e.name;return o===t}),n=!!i&&e.some(function(e){return e.name===o&&e.enabled&&e.order<i.order});if(!n){var r='`'+t+'`';console.warn('`'+o+'`'+' modifier is required by '+r+' modifier in order to work, be sure to include it before '+r+'!')}return n}function K(e){return'end'===e?'start':'start'===e?'end':e}function q(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=ae.indexOf(e),i=ae.slice(o+1).concat(ae.slice(0,o));return t?i.reverse():i}function V(e,t,o,i){var n=e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),r=+n[1],p=n[2];if(!r)return e;if(0===p.indexOf('%')){var s;switch(p){case'%p':s=o;break;case'%':case'%r':default:s=i;}var d=c(s);return d[t]/100*r}if('vh'===p||'vw'===p){var a;return a='vh'===p?J(document.documentElement.clientHeight,window.innerHeight||0):J(document.documentElement.clientWidth,window.innerWidth||0),a/100*r}return r}function z(e,t,o,i){var n=[0,0],r=-1!==['right','left'].indexOf(i),p=e.split(/(\+|\-)/).map(function(e){return e.trim()}),s=p.indexOf(T(p,function(e){return-1!==e.search(/,|\s/)}));p[s]&&-1===p[s].indexOf(',')&&console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');var d=/\s*,\s*|\s+/,a=-1===s?[p]:[p.slice(0,s).concat([p[s].split(d)[0]]),[p[s].split(d)[1]].concat(p.slice(s+1))];return a=a.map(function(e,i){var n=(1===i?!r:r)?'height':'width',p=!1;return e.reduce(function(e,t){return''===e[e.length-1]&&-1!==['+','-'].indexOf(t)?(e[e.length-1]=t,p=!0,e):p?(e[e.length-1]+=t,p=!1,e):e.concat(t)},[]).map(function(e){return V(e,n,t,o)})}),a.forEach(function(e,t){e.forEach(function(o,i){U(o)&&(n[t]+=o*('-'===e[i-1]?-1:1))})}),n}function G(e,t){var o,i=t.offset,n=e.placement,r=e.offsets,p=r.popper,s=r.reference,d=n.split('-')[0];return o=U(+i)?[+i,0]:z(i,p,s,d),'left'===d?(p.top+=o[0],p.left-=o[1]):'right'===d?(p.top+=o[0],p.left+=o[1]):'top'===d?(p.left+=o[0],p.top-=o[1]):'bottom'===d&&(p.left+=o[0],p.top+=o[1]),e.popper=p,e}for(var _=Math.min,X=Math.floor,J=Math.max,Q='undefined'!=typeof window&&'undefined'!=typeof document,Z=['Edge','Trident','Firefox'],$=0,ee=0;ee<Z.length;ee+=1)if(Q&&0<=navigator.userAgent.indexOf(Z[ee])){$=1;break}var i,te=Q&&window.Promise,oe=te?function(e){var t=!1;return function(){t||(t=!0,window.Promise.resolve().then(function(){t=!1,e()}))}}:function(e){var t=!1;return function(){t||(t=!0,setTimeout(function(){t=!1,e()},$))}},ie=function(){return void 0==i&&(i=-1!==navigator.appVersion.indexOf('MSIE 10')),i},ne=function(e,t){if(!(e instanceof t))throw new TypeError('Cannot call a class as a function')},re=function(){function e(e,t){for(var o,n=0;n<t.length;n++)o=t[n],o.enumerable=o.enumerable||!1,o.configurable=!0,'value'in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}return function(t,o,i){return o&&e(t.prototype,o),i&&e(t,i),t}}(),pe=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e},se=Object.assign||function(e){for(var t,o=1;o<arguments.length;o++)for(var i in t=arguments[o],t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},de=['auto-start','auto','auto-end','top-start','top','top-end','right-start','right','right-end','bottom-end','bottom','bottom-start','left-end','left','left-start'],ae=de.slice(3),le={FLIP:'flip',CLOCKWISE:'clockwise',COUNTERCLOCKWISE:'counterclockwise'},fe=function(){function t(o,i){var n=this,r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};ne(this,t),this.scheduleUpdate=function(){return requestAnimationFrame(n.update)},this.update=oe(this.update.bind(this)),this.options=se({},t.Defaults,r),this.state={isDestroyed:!1,isCreated:!1,scrollParents:[]},this.reference=o&&o.jquery?o[0]:o,this.popper=i&&i.jquery?i[0]:i,this.options.modifiers={},Object.keys(se({},t.Defaults.modifiers,r.modifiers)).forEach(function(e){n.options.modifiers[e]=se({},t.Defaults.modifiers[e]||{},r.modifiers?r.modifiers[e]:{})}),this.modifiers=Object.keys(this.options.modifiers).map(function(e){return se({name:e},n.options.modifiers[e])}).sort(function(e,t){return e.order-t.order}),this.modifiers.forEach(function(t){t.enabled&&e(t.onLoad)&&t.onLoad(n.reference,n.popper,n.options,t,n.state)}),this.update();var p=this.options.eventsEnabled;p&&this.enableEventListeners(),this.state.eventsEnabled=p}return re(t,[{key:'update',value:function(){return N.call(this)}},{key:'destroy',value:function(){return P.call(this)}},{key:'enableEventListeners',value:function(){return I.call(this)}},{key:'disableEventListeners',value:function(){return R.call(this)}}]),t}();return fe.Utils=('undefined'==typeof window?global:window).PopperUtils,fe.placements=de,fe.Defaults={placement:'bottom',eventsEnabled:!0,removeOnDestroy:!1,onCreate:function(){},onUpdate:function(){},modifiers:{shift:{order:100,enabled:!0,fn:function(e){var t=e.placement,o=t.split('-')[0],i=t.split('-')[1];if(i){var n=e.offsets,r=n.reference,p=n.popper,s=-1!==['bottom','top'].indexOf(o),d=s?'left':'top',a=s?'width':'height',l={start:pe({},d,r[d]),end:pe({},d,r[d]+r[a]-p[a])};e.offsets.popper=se({},p,l[i])}return e}},offset:{order:200,enabled:!0,fn:G,offset:0},preventOverflow:{order:300,enabled:!0,fn:function(e,t){var o=t.boundariesElement||r(e.instance.popper);e.instance.reference===o&&(o=r(o));var i=y(e.instance.popper,e.instance.reference,t.padding,o);t.boundaries=i;var n=t.priority,p=e.offsets.popper,s={primary:function(e){var o=p[e];return p[e]<i[e]&&!t.escapeWithReference&&(o=J(p[e],i[e])),pe({},e,o)},secondary:function(e){var o='right'===e?'left':'top',n=p[o];return p[e]>i[e]&&!t.escapeWithReference&&(n=_(p[o],i[e]-('right'===e?p.width:p.height))),pe({},o,n)}};return n.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';p=se({},p,s[t](e))}),e.offsets.popper=p,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,o=t.popper,i=t.reference,n=e.placement.split('-')[0],r=X,p=-1!==['top','bottom'].indexOf(n),s=p?'right':'bottom',d=p?'left':'top',a=p?'width':'height';return o[s]<r(i[d])&&(e.offsets.popper[d]=r(i[d])-o[a]),o[d]>r(i[s])&&(e.offsets.popper[d]=r(i[s])),e}},arrow:{order:500,enabled:!0,fn:function(e,o){var i;if(!F(e.instance.modifiers,'arrow','keepTogether'))return e;var n=o.element;if('string'==typeof n){if(n=e.instance.popper.querySelector(n),!n)return e;}else if(!e.instance.popper.contains(n))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var r=e.placement.split('-')[0],p=e.offsets,s=p.popper,d=p.reference,a=-1!==['left','right'].indexOf(r),l=a?'height':'width',f=a?'Top':'Left',m=f.toLowerCase(),h=a?'left':'top',g=a?'bottom':'right',u=L(n)[l];d[g]-u<s[m]&&(e.offsets.popper[m]-=s[m]-(d[g]-u)),d[m]+u>s[g]&&(e.offsets.popper[m]+=d[m]+u-s[g]),e.offsets.popper=c(e.offsets.popper);var b=d[m]+d[l]/2-u/2,w=t(e.instance.popper),y=parseFloat(w['margin'+f],10),E=parseFloat(w['border'+f+'Width'],10),v=b-e.offsets.popper[m]-y-E;return v=J(_(s[l]-u,v),0),e.arrowElement=n,e.offsets.arrow=(i={},pe(i,m,Math.round(v)),pe(i,h,''),i),e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(k(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var o=y(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement),i=e.placement.split('-')[0],n=x(i),r=e.placement.split('-')[1]||'',p=[];switch(t.behavior){case le.FLIP:p=[i,n];break;case le.CLOCKWISE:p=q(i);break;case le.COUNTERCLOCKWISE:p=q(i,!0);break;default:p=t.behavior;}return p.forEach(function(s,d){if(i!==s||p.length===d+1)return e;i=e.placement.split('-')[0],n=x(i);var a=e.offsets.popper,l=e.offsets.reference,f=X,m='left'===i&&f(a.right)>f(l.left)||'right'===i&&f(a.left)<f(l.right)||'top'===i&&f(a.bottom)>f(l.top)||'bottom'===i&&f(a.top)<f(l.bottom),h=f(a.left)<f(o.left),c=f(a.right)>f(o.right),g=f(a.top)<f(o.top),u=f(a.bottom)>f(o.bottom),b='left'===i&&h||'right'===i&&c||'top'===i&&g||'bottom'===i&&u,w=-1!==['top','bottom'].indexOf(i),y=!!t.flipVariations&&(w&&'start'===r&&h||w&&'end'===r&&c||!w&&'start'===r&&g||!w&&'end'===r&&u);(m||b||y)&&(e.flipped=!0,(m||b)&&(i=p[d+1]),y&&(r=K(r)),e.placement=i+(r?'-'+r:''),e.offsets.popper=se({},e.offsets.popper,S(e.instance.popper,e.offsets.reference,e.placement)),e=C(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,o=t.split('-')[0],i=e.offsets,n=i.popper,r=i.reference,p=-1!==['left','right'].indexOf(o),s=-1===['top','left'].indexOf(o);return n[p?'left':'top']=r[o]-(s?n[p?'width':'height']:0),e.placement=x(t),e.offsets.popper=c(n),e}},hide:{order:800,enabled:!0,fn:function(e){if(!F(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,o=T(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottom<o.top||t.left>o.right||t.top>o.bottom||t.right<o.left){if(!0===e.hide)return e;e.hide=!0,e.attributes['x-out-of-boundaries']=''}else{if(!1===e.hide)return e;e.hide=!1,e.attributes['x-out-of-boundaries']=!1}return e}},computeStyle:{order:850,enabled:!0,fn:function(e,t){var o=t.x,i=t.y,n=e.offsets.popper,p=T(e.instance.modifiers,function(e){return'applyStyle'===e.name}).gpuAcceleration;void 0!==p&&console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');var s,d,a=void 0===p?t.gpuAcceleration:p,l=r(e.instance.popper),f=g(l),m={position:n.position},h={left:X(n.left),top:X(n.top),bottom:X(n.bottom),right:X(n.right)},c='bottom'===o?'top':'bottom',u='right'===i?'left':'right',b=W('transform');if(d='bottom'==c?-f.height+h.bottom:h.top,s='right'==u?-f.width+h.right:h.left,a&&b)m[b]='translate3d('+s+'px, '+d+'px, 0)',m[c]=0,m[u]=0,m.willChange='transform';else{var w='bottom'==c?-1:1,y='right'==u?-1:1;m[c]=d*w,m[u]=s*y,m.willChange=c+', '+u}var E={"x-placement":e.placement};return e.attributes=se({},E,e.attributes),e.styles=se({},m,e.styles),e.arrowStyles=se({},e.offsets.arrow,e.arrowStyles),e},gpuAcceleration:!0,x:'bottom',y:'right'},applyStyle:{order:900,enabled:!0,fn:function(e){return Y(e.instance.popper,e.styles),j(e.instance.popper,e.attributes),e.arrowElement&&Object.keys(e.arrowStyles).length&&Y(e.arrowElement,e.arrowStyles),e},onLoad:function(e,t,o,i,n){var r=O(n,t,e),p=v(o.placement,r,t,e,o.modifiers.flip.boundariesElement,o.modifiers.flip.padding);return t.setAttribute('x-placement',p),Y(t,{position:'absolute'}),o},gpuAcceleration:void 0}}},fe});
+//# sourceMappingURL=popper.min.js.map
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/pricing.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/pricing.css
new file mode 100644
index 00000000..1b52205c
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/pricing.css
@@ -0,0 +1,25 @@
+html {
+  font-size: 14px;
+}
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+.container {
+  max-width: 960px;
+}
+
+.pricing-header {
+  max-width: 700px;
+}
+
+.card-deck .card {
+  min-width: 220px;
+}
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/pricing.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/pricing.html
new file mode 100644
index 00000000..974eda2a
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/layout/pricing.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="Anton Angelov">
+
+    <title>Pricing example for Bellatrix</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="pricing.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
+      <h5 class="my-0 mr-md-auto font-weight-normal">Automate The Planet</h5>
+      <nav class="my-2 my-md-0 mr-md-3">
+        <a class="p-2 text-dark" href="#">Features</a>
+        <a class="p-2 text-dark" href="#">Enterprise</a>
+        <a class="p-2 text-dark" href="#">Support</a>
+        <a class="p-2 text-dark" href="#">Pricing</a>
+      </nav>
+      <a class="btn btn-outline-primary" href="#">Sign up</a>
+    </div>
+
+    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
+      <h1 class="display-4">Pricing</h1>
+      <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
+    </div>
+
+    <div class="container">
+      <div class="card-deck mb-3 text-center">
+        <div class="card mb-4 box-shadow">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Free</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>10 users included</li>
+              <li>2 GB of storage</li>
+              <li>Email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
+          </div>
+        </div>
+        <div class="card mb-4 box-shadow">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Pro</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>20 users included</li>
+              <li>10 GB of storage</li>
+              <li>Priority email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
+          </div>
+        </div>
+        <div class="card mb-4 box-shadow">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Enterprise</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>30 users included</li>
+              <li>15 GB of storage</li>
+              <li>Phone and email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
+          </div>
+        </div>
+      </div>
+
+      <footer class="pt-4 my-md-5 pt-md-5 border-top">
+        <div class="row">
+          <div class="col-12 col-md">
+            <img class="mb-2" src="bootstrap-solid.svg" alt="" width="24" height="24">
+            <small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
+          </div>
+          <div class="col-6 col-md">
+            <h5>Features</h5>
+            <ul class="list-unstyled text-small">
+              <li><a class="text-muted" href="#">Cool stuff</a></li>
+              <li><a class="text-muted" href="#">Random feature</a></li>
+              <li><a class="text-muted" href="#">Team feature</a></li>
+              <li><a class="text-muted" href="#">Stuff for developers</a></li>
+              <li><a class="text-muted" href="#">Another one</a></li>
+              <li><a class="text-muted" href="#">Last time</a></li>
+            </ul>
+          </div>
+          <div class="col-6 col-md">
+            <h5>Resources</h5>
+            <ul class="list-unstyled text-small">
+              <li><a class="text-muted" href="#">Resource</a></li>
+              <li><a class="text-muted" href="#">Resource name</a></li>
+              <li><a class="text-muted" href="#">Another resource</a></li>
+              <li><a class="text-muted" href="#">Final resource</a></li>
+            </ul>
+          </div>
+          <div class="col-6 col-md">
+            <h5>About</h5>
+            <ul class="list-unstyled text-small">
+              <li><a class="text-muted" href="#">Team</a></li>
+              <li><a class="text-muted" href="#">Locations</a></li>
+              <li><a class="text-muted" href="#">Privacy</a></li>
+              <li><a class="text-muted" href="#">Terms</a></li>
+            </ul>
+          </div>
+        </div>
+      </footer>
+    </div>
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="jquery-3.2.1.slim.min.js"></script>
+    <script>window.jQuery || document.write('<script src="jquery-slim.min.js"><\/script>')</script>
+    <script src="popper.min.js"></script>
+    <script src="bootstrap.min.js"></script>
+    <script src="holder.min.js"></script>
+    <script>
+      Holder.addTheme('thumb', {
+        bg: '#55595c',
+        fg: '#eceeef',
+        text: 'Thumbnail'
+      });
+    </script>
+  </body>
+</html>
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/month/month.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/month/month.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/month/month.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/month/month.html
new file mode 100644
index 00000000..b27b81da
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/month/month.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="month.css">
+</head>
+<body>
+    <label for="myMonth">Default</label>
+    <input id="myMonth" name="myMonth" type="month" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myMonth1">Test Max Min Step</label>
+    <input id="myMonth1" name="myMonth1" type="month" step="2" min="1900-01" max="2032-12">
+
+    <br>
+    <br>
+    <label for="myMonth2">Default Value</label>
+    <input id="myMonth2" name="myMonth2" type="month" step="2" min="1900-01" max="2032-12" value="2017-08">
+
+    <br>
+    <br>
+    <label for="myMonth3">Autocomplete= ON</label>
+    <input id="myMonth3" name="myMonth3" type="month" step="2" min="1900-01" max="2032-12" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myMonth4">Autocomplete= OFF</label>
+    <input id="myMonth4" name="myMonth4" type="month" step="2" min="1900-01" max="2032-12" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myMonth5">Readonly Set</label>
+    <input id="myMonth5" name="myMonth5" type="month" step="2" min="1900-01" max="2032-12" readonly>
+
+    <br>
+    <br>
+    <label for="myMonth6">Required Set</label>
+    <input id="myMonth6" name="myMonth6" type="month" step="2" min="1900-01" max="2032-12" required>
+
+    <br>
+    <br>
+    <label for="myMonth7">Test Hover</label>
+    <input id="myMonth7" name="myMonth7" type="month" step="2" min="1900-01" max="2032-12" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myMonth8">Test Focus</label>
+    <input id="myMonth8" name="myMonth8" type="month" step="2" min="1900-01" max="2032-12" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myMonth9">Disabled Set</label>
+    <input id="myMonth9" name="myMonth9" type="month" step="2" min="1900-01" max="2032-12" disabled>
+
+    <script type="text/javascript" src="month.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/month/month.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/month/month.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/month/month.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/number/number.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/number/number.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/number/number.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/number/number.html
new file mode 100644
index 00000000..82e2897e
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/number/number.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="number.css">
+</head>
+<body>
+    <label for="myNumber">Test Placeholders</label>
+    <input id="myNumber" name="myNumber" type="number" placeholder="Multiple of 10" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myNumber1">Test Max Min Step</label>
+    <input id="myNumber1" name="myNumber1" type="number" step="2" min="10" max="20">
+
+    <br>
+    <br>
+    <label for="myNumber2">Default Value</label>
+    <input id="myNumber2" name="myNumber2" type="number" step="2" min="10" max="20" value="4">
+
+    <br>
+    <br>
+    <label for="myNumber3">Autocomplete= ON</label>
+    <input id="myNumber3" name="myNumber3" type="number" step="2" min="10" max="20" value="4" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myNumber4">Autocomplete= OFF</label>
+    <input id="myNumber4" name="myNumber4" type="number" step="2" min="10" max="20" value="4" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myNumber5">Readonly Set</label>
+    <input id="myNumber5" name="myNumber5" type="number" step="2" min="10" max="20" value="4" readonly>
+
+    <br>
+    <br>
+    <label for="myNumber6">Required Set</label>
+    <input id="myNumber6" name="myNumber6" type="number" step="2" min="10" max="20" value="4" required>
+
+    <br>
+    <br>
+    <label for="myNumber7">Test Hover</label>
+    <input id="myNumber7" name="myNumber7" type="number" step="2" min="10" max="20" value="4" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myNumber8">Test Focus</label>
+    <input id="myNumber8" name="myNumber8" type="number" step="2" min="10" max="20" value="4" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myNumber9">Disabled Set</label>
+    <input id="myNumber9" name="myNumber6" type="number" step="2" min="10" max="20" value="4" disabled>
+
+
+    <script type="text/javascript" src="number.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/number/number.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/number/number.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/number/number.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/output/output.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/output/output.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/output/output.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/output/output.html
new file mode 100644
index 00000000..c35434e2
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/output/output.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="output.css">
+</head>
+<body>
+    <label for="myOutput">Hover</label>
+    <output for="myOutput" id="myOutput" onmouseover="this.style.color='red';">10</output>
+
+    <br>
+    <br>
+    <label for="myOutput1">Inner Html</label>
+    <output id="myOutput1"><button name="button">Click me</button></output>
+
+    <br>
+    <br>
+    <label for="myOutput2">No InnerText</label>
+    <output id="myOutput2"></output>
+
+
+    <script type="text/javascript" src="output.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/output/output.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/output/output.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/password/password.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/password/password.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/password/password.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/password/password.html
new file mode 100644
index 00000000..2d757ffd
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/password/password.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="password.css">
+</head>
+<body>
+    <label for="myPassword">Placeholders</label>
+    <input id="myPassword" name="myPassword" type="password" placeholder="your password term goes here" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myPassword1">Physical input element size</label>
+    <input id="myPassword1" name="myPassword" type="password" size="30">
+
+    <br>
+    <br>
+    <label for="myPassword2">Element value length</label>
+    <input id="myPassword2" name="myPassword" type="password" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myPassword3">Providing default options</label>
+    <input id="myPassword3" name="myPassword" type="password" value="password for stars">
+
+    <br>
+    <br>
+    <label for="myPassword4">Autocomplete= ON</label>
+    <input id="myPassword4" name="myPassword" type="password" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myPassword5">Autocomplete= OFF</label>
+    <input id="myPassword5" name="myPassword" type="password" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myPassword6">Readonly Set</label>
+    <input id="myPassword6" name="myPassword" type="password" readonly>
+
+    <br>
+    <br>
+    <label for="myPassword7">Required Set</label>
+    <input id="myPassword7" name="myPassword" type="password" required>
+
+    <br>
+    <br>
+    <label for="myPassword8">Test Hover</label>
+    <input id="myPassword8" name="myPassword" type="password" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myPassword9">Test Focus</label>
+    <input id="myPassword9" name="myPassword" type="password" onfocus="this.style.color='blue';">
+
+    <div id="myPassword10Wrapper">
+        <br>
+        <br>
+        <label for="myPassword10">Test Disabled</label>
+        <input id="myPassword10" name="myPassword" type="password" disabled>
+    </div>
+
+    <script type="text/javascript" src="password.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/password/password.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/password/password.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/password/password.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/phone/phone.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/phone/phone.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/phone/phone.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/phone/phone.html
new file mode 100644
index 00000000..90738ef0
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/phone/phone.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="phone.css">
+</head>
+<body>
+    <label for="myPhone">Placeholders</label>
+    <input id="myPhone" name="myPhone" type="tel" placeholder="123-4567-8901" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myPhone1">Physical input element size</label>
+    <input id="myPhone1" name="myPhone" type="tel" size="30">
+
+    <br>
+    <br>
+    <label for="myPhone2">Element value length</label>
+    <input id="myPhone2" name="myPhone" type="tel" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myPhone3">Providing default options</label>
+    <input id="myPhone3" name="myPhone" type="tel" value="123-4567-8901">
+
+    <br>
+    <br>
+    <label for="myPhone4">Autocomplete= ON</label>
+    <input id="myPhone4" name="myPhone" type="tel" value="00359866547465" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myPhone5">Autocomplete= OFF</label>
+    <input id="myPhone5" name="myPhone" type="tel" value="00359866547465" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myPhone6">Readonly Set</label>
+    <input id="myPhone6" name="myPhone" type="tel" value="00359866547465" readonly>
+
+    <br>
+    <br>
+    <label for="myPhone7">Required Set</label>
+    <input id="myPhone7" name="myPhone" type="tel" value="00359866547465" required>
+
+    <br>
+    <br>
+    <label for="myPhone8">Test Hover</label>
+    <input id="myPhone8" name="myPhone" type="tel" value="00359866547465" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myPhone9">Test Focus</label>
+    <input id="myPhone9" name="myPhone" type="tel" value="00359866547465" onfocus="this.style.color='blue';">
+
+    <div id="myPhone10Wrapper">
+        <br>
+        <br>
+        <label for="myPhone10">Test Disabled</label>
+        <input id="myPhone10" name="myPhone" type="tel" value="00359866547465" disabled>
+    </div>
+
+    <br>
+    <br>
+    <label for="myPhone11">Test Hidden</label>
+    <input id="myPhone11" name="myPhone" type="tel" value="00359866547465" hidden>
+
+    <script type="text/javascript" src="phone.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/phone/phone.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/phone/phone.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/phone/phone.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/progress/progress.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/progress/progress.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/progress/progress.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/progress/progress.html
new file mode 100644
index 00000000..807e199c
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/progress/progress.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="progress.css">
+</head>
+<body>
+    <label for="myProgress">Default</label>
+    <progress value="70" max="100" id="myProgress">70 %</progress>
+
+    <br>
+    <br>
+    <label for="myProgress1">No Max</label>
+    <progress value="70" id="myProgress1">70 %</progress>
+
+    <br>
+    <br>
+    <label for="myProgress2">No Value</label>
+    <progress id="myProgress2">70 %</progress>
+
+    <br>
+    <br>
+    <label for="myProgress3">No Text</label>
+    <progress id="myProgress3"></progress>
+
+
+    <script type="text/javascript" src="progress.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/progress/progress.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/progress/progress.js
new file mode 100644
index 00000000..83e56e3b
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/progress/progress.js
@@ -0,0 +1,25 @@
+var buttons = document.querySelectorAll('input');
+for (var i = 0; i < buttons.length; i++) {
+    var self = buttons[i];
+
+    self.addEventListener('click', function (event) {  
+        if (this.value === 'Start') {
+            this.value = 'Stop';
+        } else {
+            this.value = 'Start';
+        }
+    }, false);
+}
+
+var buttons1 = document.querySelectorAll('button');
+for (var i = 0; i < buttons1.length; i++) {
+    var self = buttons1[i];
+
+    self.addEventListener('click', function (event) {  
+        if (this.innerHTML === 'Start') {
+            this.innerHTML = 'Stop';
+        } else {
+            this.innerHTML = 'Start';
+        }
+    }, false);
+}
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/radio/radio.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/radio/radio.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/radio/radio.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/radio/radio.html
new file mode 100644
index 00000000..e5f63035
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/radio/radio.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="radio.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="myRadio">Providing default options</label>
+    <input type="radio" id="myRadio" name="subscribe" value="newsletter" checked>
+
+    <br>
+    <br>
+    <label for="myRadio1">Test Hover</label>
+    <input type="radio" id="myRadio1" checked onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myRadio2">Test Focus</label>
+    <input type="radio" id="myRadio2" name="subscribe" value="newsletter" checked onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myRadio3">Test IsDisabled</label>
+    <input type="radio" id="myRadio3" name="subscribe" value="newsletter" disabled>
+
+
+    <script type="text/javascript" src="radio.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/radio/radio.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/radio/radio.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/radio/radio.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/range/range.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/range/range.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/range/range.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/range/range.html
new file mode 100644
index 00000000..f74c12b6
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/range/range.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="range.css">
+</head>
+<body>
+    <label for="myRange">Default</label>
+    <input id="myRange" name="myRange" type="range" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myRange1">Test Max Min Step</label>
+    <input id="myRange1" name="myRange1" type="range" step="2" min="2" max="10">
+
+    <br>
+    <br>
+    <label for="myRange2">Default Value</label>
+    <input id="myRange2" name="myRange2" type="range" step="2" min="-2" max="10" value="7">
+
+    <br>
+    <br>
+    <label for="myRange3">Autocomplete= ON</label>
+    <input id="myRange3" name="myRange3" type="range" step="2" min="-2" max="10" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myRange4">Autocomplete= OFF</label>
+    <input id="myRange4" name="myRange4" type="range" step="2" min="-2" max="10" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myRange5">Readonly Set</label>
+    <input id="myRange5" name="myRange5" type="range" step="2" min="-2" max="10" readonly>
+
+    <br>
+    <br>
+    <label for="myRange6">Required Set</label>
+    <input id="myRange6" name="myRange6" type="range" step="2" min="-2" max="10" required>
+
+    <br>
+    <br>
+    <label for="myRange7">Test Hover</label>
+    <input id="myRange7" name="myRange7" type="range" step="2" min="-2" max="10" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myRange8">Test Focus</label>
+    <input id="myRange8" name="myRange8" type="range" step="2" min="-2" max="10" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myRange9">Disabled Set</label>
+    <input id="myRange9" name="myRange9" type="range" step="2" min="-2" max="10" disabled>
+
+    <br>
+    <br>
+    <label for="myRange10">List</label>
+    <input id="myRange10" name="myRange10" type="range" step="2" min="-2" max="200" list="tickmarks">
+
+    <datalist id="tickmarks">
+        <option value="0">
+        <option value="10">
+        <option value="20">
+        <option value="30">
+        <option value="40">
+        <option value="50">
+        <option value="60">
+        <option value="70">
+        <option value="80">
+        <option value="90">
+        <option value="100">
+    </datalist>
+
+    <script type="text/javascript" src="range.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/range/range.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/range/range.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/range/range.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/reset/reset.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/reset/reset.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/reset/reset.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/reset/reset.html
new file mode 100644
index 00000000..4372387e
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/reset/reset.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="reset.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="myButton">Providing default options Input Reset</label>
+    <input type="reset" id="myButton" name="start" value="Start">
+
+    <br>
+    <br>
+    <label for="myButton1">Test Hover Input Reset</label>
+    <input type="reset" id="myButton1" name="start" value="Start" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myButton2">Test Focus Input Reset</label>
+    <input type="reset" id="myButton2" name="start" value="Start" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myButton3">Test IsDisabled Input Reset</label>
+    <input type="reset" id="myButton3" name="start" value="Start" disabled>
+
+    <script type="text/javascript" src="reset.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/reset/reset.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/reset/reset.js
new file mode 100644
index 00000000..83e56e3b
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/reset/reset.js
@@ -0,0 +1,25 @@
+var buttons = document.querySelectorAll('input');
+for (var i = 0; i < buttons.length; i++) {
+    var self = buttons[i];
+
+    self.addEventListener('click', function (event) {  
+        if (this.value === 'Start') {
+            this.value = 'Stop';
+        } else {
+            this.value = 'Start';
+        }
+    }, false);
+}
+
+var buttons1 = document.querySelectorAll('button');
+for (var i = 0; i < buttons1.length; i++) {
+    var self = buttons1[i];
+
+    self.addEventListener('click', function (event) {  
+        if (this.innerHTML === 'Start') {
+            this.innerHTML = 'Stop';
+        } else {
+            this.innerHTML = 'Start';
+        }
+    }, false);
+}
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/search/search.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/search/search.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/search/search.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/search/search.html
new file mode 100644
index 00000000..4f736af7
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/search/search.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="search.css">
+</head>
+<body>
+    <label for="mySearch">Placeholders</label>
+    <input id="mySearch" name="mySearch" type="search" placeholder="your search term goes here" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="mySearch1">Physical input element size</label>
+    <input id="mySearch1" name="mySearch" type="search" size="30">
+
+    <br>
+    <br>
+    <label for="mySearch2">Element value length</label>
+    <input id="mySearch2" name="mySearch" type="search" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="mySearch3">Providing default options</label>
+    <input id="mySearch3" name="mySearch" type="search" value="search for stars">
+
+    <br>
+    <br>
+    <label for="mySearch4">Autocomplete= ON</label>
+    <input id="mySearch4" name="mySearch" type="search" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="mySearch5">Autocomplete= OFF</label>
+    <input id="mySearch5" name="mySearch" type="search" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="mySearch6">Readonly Set</label>
+    <input id="mySearch6" name="mySearch" type="search" readonly>
+
+    <br>
+    <br>
+    <label for="mySearch7">Required Set</label>
+    <input id="mySearch7" name="mySearch" type="search" required>
+
+    <br>
+    <br>
+    <label for="mySearch8">Test Hover</label>
+    <input id="mySearch8" name="mySearch" type="search" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="mySearch9">Test Focus</label>
+    <input id="mySearch9" name="mySearch" type="search" onfocus="this.style.color='blue';">
+
+    <div id="mySearch10Wrapper">
+        <br>
+        <br>
+        <label for="mySearch10">Test Disabled</label>
+        <input id="mySearch10" name="mySearch" type="search" disabled>
+    </div>
+
+    <script type="text/javascript" src="search.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/search/search.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/search/search.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/search/search.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/select/select.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/select/select.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/select/select.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/select/select.html
new file mode 100644
index 00000000..3d4d087d
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/select/select.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="select.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="mySelect">Providing default options</label>
+    <select name="select" id="mySelect">
+        <option value="bella" selected>Bellatrix</option>
+        <option value="bella1">Is</option>
+        <option value="bella2">Awesome</option>
+    </select>
+
+    <br>
+    <br>
+    <label for="mySelect1">Test Hover</label>
+    <select name="select" id="mySelect1" onmouseover="this.style.color='red';">
+        <option value="bella">Bellatrix</option>
+        <option value="bella1" selected>Is</option>
+        <option value="bella2">Awesome</option>
+    </select>
+
+    <br>
+    <br>
+    <label for="mySelect2">Test Focus</label>
+    <select name="select" id="mySelect2" onfocus="this.style.color='blue';">
+        <option value="bella">Bellatrix</option>
+        <option value="bella1">Is</option>
+        <option value="bella2" selected>Awesome</option>
+    </select>
+
+    <br>
+    <br>
+    <label for="mySelect3">Test IsDisabled</label>
+    <select name="select" id="mySelect3" disabled>
+        <option value="bella">Bellatrix</option>
+        <option value="bella1">Is</option>
+        <option value="bella2" selected>Awesome</option>
+    </select>
+
+    <br>
+    <br>
+    <label for="mySelect4">Test Required</label>
+    <select name="select" id="mySelect4" required>
+        <option value="bella">Bellatrix</option>
+        <option value="bella1" disabled>Is</option>
+        <option value="bella2" selected>Awesome</option>
+    </select>
+
+    <script type="text/javascript" src="select.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/select/select.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/select/select.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/shadowdom/shadowdom.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/shadowdom/shadowdom.html
new file mode 100644
index 00000000..4ebfca0e
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/shadowdom/shadowdom.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <title>Shadow DOM Demo</title>
+</head>
+<body>
+    <div id="content">
+        <div id="header">
+            <h1>This is a Shadow DOM Testing Page.</h1>
+        </div>
+        <h2>The following shadow root is basic - it contains only one element and no nested shadow roots are present.</h2>
+        <div id="basicShadowHost"></div>
+        <h2>The next shadow root is more complex - it contains more elements and nested shadow roots.
+        </h2>
+        <div id="complexShadowHost"></div>
+    </div>
+    <script type="text/javascript" src="shadowdom.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/shadowdom/shadowdom.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/shadowdom/shadowdom.js
new file mode 100644
index 00000000..c6eed92d
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/shadowdom/shadowdom.js
@@ -0,0 +1,102 @@
+// BASIC SHADOW DOM EXAMPLE
+const basicShadowDOMHost = document.querySelector("#basicShadowHost");
+const basicShadowRoot = basicShadowDOMHost.attachShadow({ mode: "open" });
+
+// SELECT ELEMENT
+const selectLabel = document.createElement("label");
+selectLabel.setAttribute("for", "shadowSelect");
+selectLabel.innerText = "Select element inside the shadow root.";
+const select = document.createElement("select");
+select.setAttribute("name", "select");
+select.setAttribute("id", "shadowSelect");
+const option1 = document.createElement("option");
+option1.setAttribute("value", "bella1");
+option1.innerText = "Bellatrix";
+const option2 = document.createElement("option");
+option2.setAttribute("value", "bella2");
+option2.innerText = "Is";
+const option3 = document.createElement("option");
+option3.setAttribute("value", "bella3");
+option3.innerText = "Awesome";
+select.appendChild(option1);
+select.appendChild(option2);
+select.appendChild(option3);
+
+basicShadowRoot.appendChild(selectLabel);
+basicShadowRoot.appendChild(select);
+
+// COMPLEX SHADOW DOM EXAMPLE
+const complexShadowDOMHost = document.querySelector("#complexShadowHost");
+const complexShadowRoot = complexShadowDOMHost.attachShadow({ mode: "open" });
+
+// Function to create the table and append it to a shadow root
+function createTableAndAppendToShadowRoot(shadowRoot) {
+    // Create the table element
+    const table = document.createElement('table');
+    table.id = 'shadowTable';
+    table.className = 'tablesorter';
+
+    // Create the thead element
+    const thead = document.createElement('thead');
+    const theadRow = document.createElement('tr');
+    const headers = ['Last Name', 'First Name', 'Email', 'Due', 'Web Site', 'Action'];
+
+    headers.forEach(headerText => {
+        const th = document.createElement('th');
+        const span = document.createElement('span');
+        span.textContent = headerText;
+        th.appendChild(span);
+        theadRow.appendChild(th);
+    });
+
+    thead.appendChild(theadRow);
+    table.appendChild(thead);
+
+    // Create the tbody element
+    const tbody = document.createElement('tbody');
+    const rows = [
+        ['Smith', 'John', 'jsmith@gmail.com', '$50.00', 'http://www.jsmith.com'],
+        ['Bach', 'Frank', 'fbach@yahoo.com', '$51.00', 'http://www.frank.com'],
+        ['Doe', 'Jason', 'jdoe@hotmail.com', '$100.00', 'http://www.jdoe.com'],
+        ['Conway', 'Tim', 'tconway@earthlink.net', '$50.00', 'http://www.timconway.com']
+    ];
+
+    rows.forEach(rowData => {
+        const tr = document.createElement('tr');
+
+        rowData.forEach(cellData => {
+            const td = document.createElement('td');
+            td.textContent = cellData;
+            tr.appendChild(td);
+        });
+
+        const actionTd = document.createElement('td');
+        const shadowHost = document.createElement("div");
+        createActionAnchorsInsideShadowDOM(shadowHost);
+        actionTd.appendChild(shadowHost);
+
+        tr.appendChild(actionTd);
+
+        tbody.appendChild(tr);
+    });
+
+    table.appendChild(tbody);
+
+    shadowRoot.appendChild(table);
+}
+
+function createActionAnchorsInsideShadowDOM(element) {
+    const shadow = element.attachShadow({ mode: "open" });
+
+    const editLink = document.createElement('a');
+    editLink.href = '#edit';
+    editLink.textContent = 'edit';
+    shadow.appendChild(editLink);
+
+    const deleteLink = document.createElement('a');
+    deleteLink.href = '#delete';
+    deleteLink.textContent = 'delete';
+    shadow.appendChild(deleteLink);
+}
+
+createTableAndAppendToShadowRoot(complexShadowRoot);
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/span/span.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/span/span.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/span/span.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/span/span.html
new file mode 100644
index 00000000..18760f4d
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/span/span.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="span.css">
+</head>
+<body>
+    <label for="mySpan">Hover</label>
+    <span id="mySpan" onmouseover="this.style.color='red';">Bellatrix</span>
+
+    <br>
+    <br>
+    <label for="mySpan1">InnerText</label>
+    <span id="mySpan1" onmouseover="this.style.color='red';">Automate The Planet</span>
+
+    <br>
+    <br>
+    <label for="mySpan2">InnerHtml</label>
+    <span id="mySpan2" onmouseover="this.style.color='red';"><button name="button">Click me</button></span>
+
+    <br>
+    <br>
+    <label for="mySpan3">No Content</label>
+    <span id="mySpan3" onmouseover="this.style.color='red';"></span>
+
+    <script type="text/javascript" src="span.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/span/span.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/span/span.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/table/table.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/table/table.css
new file mode 100644
index 00000000..c80dfa11
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/table/table.css
@@ -0,0 +1,23 @@
+span {
+    padding-right: 20px;
+    background-repeat: no-repeat;
+    background-position: 100% 100%;
+}
+
+.tablesorter-headerAsc span {
+    background-image: url('img/down-arrow.png');
+}
+
+.tablesorter-headerDesc span {
+    background-image: url('img/up-arrow.png');
+}
+
+th span {
+    font-family: "Helvetica, Arial, sans-serif";
+    font-size: 14px;
+}
+
+td {
+    font-family: "Helvetica, Arial, sans-serif";
+    font-size: 14px;
+}
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/table/table.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/table/table.html
new file mode 100644
index 00000000..43e190a8
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/table/table.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Table HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="table.css">
+</head>
+<body>
+    <div class="example">
+        <h3>Data Tables</h3>
+        <p>Often times when you see a table it contains data which is sortable -- sometimes with actions that can be taken within each row (e.g. edit, delete). And it can be challenging to automate interaction with sets of data in a table depending on how it is constructed.</p>
+
+        <h4>Example 1</h4>
+        <p>No Class or ID attributes to signify groupings of rows and columns</p>
+        <table id="table1" class="tablesorter">
+            <thead>
+                <tr>
+                    <th><span>Last Name</span></th>
+                    <th><span>First Name</span></th>
+                    <th><span>Email</span></th>
+                    <th><span>Due</span></th>
+                    <th><span>Web Site</span></th>
+                    <th><span>Action</span></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Smith</td>
+                    <td>John</td>
+                    <td>jsmith@gmail.com</td>
+                    <td>$50.00</td>
+                    <td>http://www.jsmith.com</td>
+                    <td>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Bach</td>
+                    <td>Frank</td>
+                    <td>fbach@yahoo.com</td>
+                    <td>$51.00</td>
+                    <td>http://www.frank.com</td>
+                    <td>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Doe</td>
+                    <td>Jason</td>
+                    <td>jdoe@hotmail.com</td>
+                    <td>$100.00</td>
+                    <td>http://www.jdoe.com</td>
+                    <td>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Conway</td>
+                    <td>Tim</td>
+                    <td>tconway@earthlink.net</td>
+                    <td>$50.00</td>
+                    <td>http://www.timconway.com</td>
+                    <td>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <h4>Example 2</h4>
+        <p>Class and ID attributes to signify groupings of rows and columns</p>
+        <table id="table2" class="tablesorter">
+            <thead>
+                <tr>
+                    <th><span class='last-name'>Last Name</span></th>
+                    <th><span class='first-name'>First Name</span></th>
+                    <th><span class='email'>Email</span></th>
+                    <th><span class='dues'>Due</span></th>
+                    <th><span class='web-site'>Web Site</span></th>
+                    <th><span class='action'>Action</span></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class='last-name'>Smith</td>
+                    <td class='first-name'>John</td>
+                    <td class='email'>jsmith@gmail.com</td>
+                    <td class='dues'>$50.00</td>
+                    <td class='web-site'>http://www.jsmith.com</td>
+                    <td class='action'>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td class='last-name'>Bach</td>
+                    <td class='first-name'>Frank</td>
+                    <td class='email'>fbach@yahoo.com</td>
+                    <td class='dues'>$51.00</td>
+                    <td class='web-site'>http://www.frank.com</td>
+                    <td class='action'>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td class='last-name'>Doe</td>
+                    <td class='first-name'>Jason</td>
+                    <td class='email'>jdoe@hotmail.com</td>
+                    <td class='dues'>$100.00</td>
+                    <td class='web-site'>http://www.jdoe.com</td>
+                    <td class='action'>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td class='last-name'>Conway</td>
+                    <td class='first-name'>Tim</td>
+                    <td class='email'>tconway@earthlink.net</td>
+                    <td class='dues'>$50.00</td>
+                    <td class='web-site'>http://www.timconway.com</td>
+                    <td class='action'>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="example">
+        <h3>Basic Tables</h3>
+        <p>Some tables dont have the HTML elements thead, tbody or tfoot. While designing locators this should be taken into consideration.</p>
+
+        <h4>Example 1</h4>
+        <p>Simple table with *tr* and *td* elements only</p>
+        <table id="simpleTable">
+            <tr>
+                <td>Smith</td>
+                <td>John</td>
+                <td>$50.00</td>
+                <td>http://www.jsmith.com</td>
+            </tr>
+            <tr>
+                <td>Bach</td>
+                <td>Frank</td>
+                <td>$51.00</td>
+                <td>http://www.frank.com</td>
+            </tr>
+            <tr>
+                <td>Doe</td>
+                <td>Jason</td>
+                <td>$100.00</td>
+                <td>http://www.jdoe.com</td>
+            </tr>
+            <tr>
+                <td>Conway</td>
+                <td>Tim</td>
+                <td>$50.00</td>
+                <td>http://www.timconway.com</td>
+            </tr>
+        </table>
+    </div>
+    <div class="example">
+        <h3>Nested Tables</h3>
+        <p>Some tables have nested tables in one or more of the table cells. This causes difficulties when trying to iterate over the table cells of a row, since only the direct children of the row have to be located.</p>
+
+        <h4>Example 1</h4>
+        <p>Single Inline table in table cell</p>
+        <table id="nestedTable">
+            <thead>
+                <tr>
+                    <th><span>Last Name</span></th>
+                    <th><span>First Name</span></th>
+                    <th><span>Email</span></th>
+                    <th><span>Due</span></th>
+                    <th><span>Web Site</span></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Smith</td>
+                    <td>John</td>
+                    <td>
+                        <table>
+                            <tr><td><b>Business</b></td><td>jsmith@corp.com</td></tr>
+                            <tr><td><b>Personal</b></td><td>jsmith@gmail.com</td></tr>
+                        </table>
+                    </td>
+                    <td>$50.00</td>
+                    <td>http://www.jsmith.com</td>
+                </tr>
+                <tr>
+                    <td>Bach</td>
+                    <td>Frank</td>
+                    <td>
+                        <table>
+                            <tr><td><b>Business</b></td><td>fbach@someway.com</td></tr>
+                            <tr><td><b>Personal</b></td><td>fbach@yahoo.com</td></tr>
+                        </table>
+                    </td>
+                    <td>$51.00</td>
+                    <td>http://www.frank.com</td>
+                </tr>
+                <tr>
+                    <td>Doe</td>
+                    <td>Jason</td>
+                    <td>
+                        <table>
+                            <tr><td><b>Business</b></td><td></td></tr>
+                            <tr><td><b>Personal</b></td><td>jdoe@hotmail.com</td></tr>
+                        </table>
+                    </td>
+                    <td>$100.00</td>
+                    <td>http://www.jdoe.com</td>
+                </tr>
+                <tr>
+                    <td>Conway</td>
+                    <td>Tim</td>
+                    <td>
+                        <table>
+                            <tr><td><b>Business</b></td><td>tconway@earthlink.net</td></tr>
+                            <tr><td><b>Personal</b></td><td></td></tr>
+                        </table>
+                    </td>
+                    <td>$50.00</td>
+                    <td>http://www.timconway.com</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <script type="text/javascript" src="table.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/table/table.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/table/table.js
new file mode 100644
index 00000000..e194759d
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/table/table.js
@@ -0,0 +1,4 @@
+$(function () {
+    $("#table1").tablesorter();
+    $("#table2").tablesorter();
+});
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/text/text.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/text/text.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/text/text.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/text/text.html
new file mode 100644
index 00000000..eab377fe
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/text/text.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="text.css">
+</head>
+<body>
+    <label for="myText">Placeholders</label>
+    <input id="myText" name="myText" type="Text" placeholder="your Text term goes here" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myText1">Physical input element size</label>
+    <input id="myText1" name="myText" type="Text" size="30">
+
+    <br>
+    <br>
+    <label for="myText2">Element value length</label>
+    <input id="myText2" name="myText" type="Text" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myText4">Autocomplete= ON</label>
+    <input id="myText4" name="myText" type="Text" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myText5">Autocomplete= OFF</label>
+    <input id="myText5" name="myText" type="Text" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myText6">Readonly Set</label>
+    <input id="myText6" name="myText" type="Text" readonly>
+
+    <br>
+    <br>
+    <label for="myText7">Required Set</label>
+    <input id="myText7" name="myText" type="Text" required>
+
+    <br>
+    <br>
+    <label for="myText8">Test Hover</label>
+    <input id="myText8" name="myText" type="Text" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myText9">Test Focus</label>
+    <input id="myText9" name="myText" type="Text" onfocus="this.style.color='blue';">
+
+    <div id="myText10Wrapper">
+        <br>
+        <br>
+        <label for="myText10">Test Disabled</label>
+        <input id="myText10" name="myText" type="Text" disabled>
+    </div>
+
+
+    <script type="text/javascript" src="text.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/text/text.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/text/text.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/text/text.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/textarea/textArea.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/textarea/textArea.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/textarea/textArea.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/textarea/textArea.html
new file mode 100644
index 00000000..b49f138a
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/textarea/textArea.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="textArea.css">
+</head>
+<body>
+    <label for="myTextArea">Placeholders</label>
+<textarea id="myTextArea" name="myTextArea" placeholder="your Text term goes here" class="myTestClass"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea1">Physical input element size</label>
+<textarea id="myTextArea1" name="myTextArea" size="30"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea2">Element value length</label>
+<textarea id="myTextArea2" name="myTextArea" size="30" minlength="10" maxlength="80"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea3">Providing default options</label>
+<textarea id="myTextArea3" name="myTextArea">aangelov@bellatrix.solutions</textarea>
+    <br>
+    <br>
+    <label for="myTextArea4">Autocomplete= ON</label>
+<textarea id="myTextArea4" name="myTextArea" autocomplete="on"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea5">Autocomplete= OFF</label>
+<textarea id="myTextArea5" name="myTextArea" autocomplete="off"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea6">Readonly Set</label>
+<textarea id="myTextArea6" name="myTextArea" readonly></textarea>
+    <br>
+    <br>
+    <label for="myTextArea7">Required Set</label>
+<textarea id="myTextArea7" name="myTextArea" required></textarea>
+    <br>
+    <br>
+    <label for="myTextArea8">Test Hover</label>
+<textarea id="myTextArea8" name="myTextArea" onmouseover="this.style.color='red';"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea9">Test Focus</label>
+<textarea id="myTextArea9" name="myTextArea" onfocus="this.style.color='blue';"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea10">Test Disabled</label>
+<textarea id="myTextArea10" name="myTextArea" disabled></textarea>
+    <br>
+    <br>
+    <label for="myTextArea11">Rows and Cols Set</label>
+<textarea id="myTextArea11" name="myTextArea" rows="5" cols="50"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea12">SpellCheck</label>
+<textarea id="myTextArea12" name="myTextArea" spellcheck></textarea>
+    <br>
+    <br>
+    <label for="myTextArea13">Wrap</label>
+<textarea id="myTextArea13" name="myTextArea" wrap="hard"></textarea>
+
+    <script type="text/javascript" src="textArea.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/textarea/textArea.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/textarea/textArea.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/textarea/textArea.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/time/time.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/time/time.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/time/time.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/time/time.html
new file mode 100644
index 00000000..9fc61467
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/time/time.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="time.css">
+</head>
+<body>
+    <label for="myTime">Default</label>
+    <input id="myTime" name="myTime" type="time" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myTime1">Test Max Min Step</label>
+    <input id="myTime1" name="myTime1" type="time" step="10" min="00:01" max="11:11">
+
+    <br>
+    <br>
+    <label for="myTime2">Default Value</label>
+    <input id="myTime2" name="myTime2" type="time" step="10" min="00:01" max="11:11" value="12:11">
+
+    <br>
+    <br>
+    <label for="myTime3">Autocomplete= ON</label>
+    <input id="myTime3" name="myTime3" type="time" step="10" min="00:01" max="11:11" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myTime4">Autocomplete= OFF</label>
+    <input id="myTime4" name="myTime4" type="time" step="10" min="00:01" max="11:11" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myTime5">Readonly Set</label>
+    <input id="myTime5" name="myTime5" type="time" step="10" min="00:01" max="11:11" readonly>
+
+    <br>
+    <br>
+    <label for="myTime6">Required Set</label>
+    <input id="myTime6" name="myTime6" type="time" step="10" min="00:01" max="11:11" required>
+
+    <br>
+    <br>
+    <label for="myTime7">Test Hover</label>
+    <input id="myTime7" name="myTime7" type="time" step="10" min="00:01" max="11:11" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myTime8">Test Focus</label>
+    <input id="myTime8" name="myTime8" type="time" step="10" min="00:01" max="11:11" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myTime9">Disabled Set</label>
+    <input id="myTime9" name="myTime9" type="time" step="10" min="00:01" max="11:11" disabled>
+
+    <script type="text/javascript" src="time.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/time/time.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/time/time.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/time/time.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/url/url.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/url/url.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/url/url.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/url/url.html
new file mode 100644
index 00000000..83b17d86
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/url/url.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="url.css">
+</head>
+<body>
+    <label for="myURL">Placeholders</label>
+    <input id="myURL" name="myURL" type="url" placeholder="http://www.example.com" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myURL1">Physical input element size</label>
+    <input id="myURL1" name="myURL" type="url" size="30">
+
+    <br>
+    <br>
+    <label for="myURL2">Element value length</label>
+    <input id="myURL2" name="myURL" type="url" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myURL3">Providing default options</label>
+    <input id="myURL3" name="myURL" type="url" value="http://www.example.com">
+
+    <br>
+    <br>
+    <label for="myURL4">Autocomplete= ON</label>
+    <input id="myURL4" name="myURL" type="url" value="http://www.example.com" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myURL5">Autocomplete= OFF</label>
+    <input id="myURL5" name="myURL" type="url" value="http://www.example.com" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myURL6">Readonly Set</label>
+    <input id="myURL6" name="myURL" type="url" value="http://www.example.com" readonly>
+
+    <br>
+    <br>
+    <label for="myURL7">Required Set</label>
+    <input id="myURL7" name="myURL" type="url" value="http://www.example.com" required>
+
+    <br>
+    <br>
+    <label for="myURL8">Test Hover</label>
+    <input id="myURL8" name="myURL" type="url" value="http://www.example.com" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myURL9">Test Focus</label>
+    <input id="myURL9" name="myURL" type="url" value="http://www.example.com" onfocus="this.style.color='blue';">
+
+    <div id="myURL10Wrapper">
+        <br>
+        <br>
+        <label for="myURL10">Test Disabled</label>
+        <input id="myURL10" name="myURL" type="url" value="http://www.example.com" disabled>
+    </div>
+
+    <br>
+    <br>
+    <label for="myURL11">Test Hidden</label>
+    <input id="myURL11" name="myURL" type="url" value="http://www.example.com" hidden>
+
+    <br>
+    <br>
+    <label for="myURL13">Test Title</label>
+    <input id="myURL13" name="myURL" type="url" value="bellatrix.com" title="bellatrix.solutions">
+
+    <br>
+    <br>
+    <label for="myURL14">Test TabIndex</label>
+    <input id="myURL14" name="myURL" type="url" value="bellatrix.solutions" tabindex="1">
+
+    <br>
+    <br>
+    <label for="myURL15">Test AccessKey</label>
+    <input id="myURL15" name="myURL" type="url" value="bellatrix.solutions" accesskey="a">
+
+    <br>
+    <br>
+    <label for="myURL16">Test Style</label>
+    <input id="myURL16" name="myURL" type="url" value="bellatrix.solutions" style="color: green;">
+
+    <br>
+    <br>
+    <label for="myURL17">Test Translate Yes</label>
+    <input id="myURL17" name="myURL" type="url" value="bellatrix.solutions" translate="yes">
+
+    <br>
+    <br>
+    <label for="myURL18">Test Translate No</label>
+    <input id="myURL18" name="myURL" type="url" value="bellatrix.solutions" translate="no">
+
+    <br>
+    <br>
+    <label for="myURL19">Test Dir</label>
+    <input id="myURL19" name="myURL" type="url" value="bellatrix.solutions" dir="rtl">
+
+    <br>
+    <br>
+    <label for="myURL20">Test Lang</label>
+    <input id="myURL20" name="myURL" type="url" value="bellatrix.solutions" lang="en">
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <label for="myURL12">Test ScrollToVisible</label>
+    <input id="myURL12" name="myURL" type="url" value="http://www.example.com" disabled>
+
+
+    <script type="text/javascript" src="url.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/url/url.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/url/url.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/url/url.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/week/week.css b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/week/week.css
new file mode 100644
index 00000000..5f282702
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/week/week.css
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/week/week.html b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/week/week.html
new file mode 100644
index 00000000..364c8c33
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/week/week.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="time.css">
+</head>
+<body>
+    <label for="myWeek">Default</label>
+    <input id="myWeek" name="myWeek" type="week" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myWeek1">Test Max Min Step</label>
+    <input id="myWeek1" name="myWeek1" type="week" step="10" min="2017-W01" max="2017-W52">
+
+    <br>
+    <br>
+    <label for="myWeek2">Default Value</label>
+    <input id="myWeek2" name="myWeek2" type="week" step="10" min="2017-W01" max="2017-W52" value="2017-W07">
+
+    <br>
+    <br>
+    <label for="myWeek3">Autocomplete= ON</label>
+    <input id="myWeek3" name="myWeek3" type="week" step="10" min="2017-W01" max="2017-W52" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myWeek4">Autocomplete= OFF</label>
+    <input id="myWeek4" name="myWeek4" type="week" step="10" min="2017-W01" max="2017-W52" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myWeek5">Readonly Set</label>
+    <input id="myWeek5" name="myWeek5" type="week" step="10" min="2017-W01" max="2017-W52" readonly>
+
+    <br>
+    <br>
+    <label for="myWeek6">Required Set</label>
+    <input id="myWeek6" name="myWeek6" type="week" step="10" min="2017-W01" max="2017-W52" required>
+
+    <br>
+    <br>
+    <label for="myWeek7">Test Hover</label>
+    <input id="myWeek7" name="myWeek7" type="week" step="10" min="2017-W01" max="2017-W52" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myWeek8">Test Focus</label>
+    <input id="myWeek8" name="myWeek8" type="week" step="10" min="2017-W01" max="2017-W52" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myWeek9">Disabled Set</label>
+    <input id="myWeek9" name="myWeek9" type="week" step="10" min="2017-W01" max="2017-W52" disabled>
+
+    <script type="text/javascript" src="time.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/week/week.js b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/week/week.js
new file mode 100644
index 00000000..5f282702
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/main/resources/testpages/week/week.js
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/framework-tests/bellatrix.playwright.tests/src/test/java/controls/grid/GridControlTests.java b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/grid/GridControlTests.java
new file mode 100644
index 00000000..e1fd9e02
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/grid/GridControlTests.java
@@ -0,0 +1,215 @@
+package controls.grid;
+
+import configuration.TestPagesSettings;
+import controls.grid.data.Employee;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import solutions.bellatrix.core.configuration.ConfigurationService;
+import solutions.bellatrix.playwright.components.Button;
+import solutions.bellatrix.playwright.components.TextInput;
+import solutions.bellatrix.playwright.components.advanced.grid.Grid;
+import solutions.bellatrix.playwright.components.advanced.grid.GridRow;
+import solutions.bellatrix.playwright.components.advanced.table.TableCell;
+import solutions.bellatrix.playwright.findstrategies.TagFindStrategy;
+import solutions.bellatrix.playwright.findstrategies.XpathFindStrategy;
+import solutions.bellatrix.playwright.infrastructure.BrowserTypes;
+import solutions.bellatrix.playwright.infrastructure.ExecutionBrowser;
+import solutions.bellatrix.playwright.infrastructure.Lifecycle;
+import solutions.bellatrix.playwright.infrastructure.junit.WebTest;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@ExecutionBrowser(browser = BrowserTypes.CHROME, lifecycle = Lifecycle.REUSE_IF_STARTED)
+public class GridControlTests extends WebTest {
+    private Grid testGrid;
+    private List<Employee> expectedItems;
+
+    @BeforeEach
+    public void testInit() {
+        app().navigate().toLocalPage(ConfigurationService.get(TestPagesSettings.class).getGridLocalPage());
+        testGrid = app().create().byId(Grid.class, "sampleGrid")
+                .setColumn("Order", TextInput.class, new TagFindStrategy("input"))
+                .setColumn("Firstname")
+                .setColumn("Lastname")
+                .setColumn("Email Personal")
+                .setColumn("Email Business")
+                .setColumn("Actions", Button.class, new XpathFindStrategy("./input[@type='button']"));
+
+        expectedItems = new ArrayList<>();
+        expectedItems.add(new Employee("0", "John", "Doe", "jdoe@corp.com", "john.doe@gmail.com"));
+        expectedItems.add(new Employee("1", "Mary", "Moe", "", "mary@hotmail.com"));
+        expectedItems.add(new Employee("2", "July", "Dooley", "jily@mscorp.com", ""));
+
+    }
+
+    @Test
+    public void returnProperCell_When_GetCell_WithIntForColumn() {
+        var cell = testGrid.getCell(0, 1);
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(1, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetCell_WithStringForColumn() {
+        var cell = testGrid.getCell("Firstname", 1);
+
+        Assertions.assertEquals(1, cell.getRow());
+        Assertions.assertEquals(1, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetCell_WithExpressionGorColumn() {
+        var cell = testGrid.getCell(Employee.class, Employee::getPersonalEmail, 1);
+
+        Assertions.assertEquals(1, cell.getRow());
+        Assertions.assertEquals(3, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetCell_WithSplitColumn() {
+        var cell = testGrid.getCell("Email Business", 0);
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(4, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetRow_Then_GetCell_WithStringColumn() {
+        var cell = testGrid.getRow(0).getCell("Firstname");
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(1, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetRow_Then_GetCell_WithIntColumn() {
+        var cell = testGrid.getRow(0).getCell(1);
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(1, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetRow_Then_GetCell_WithSplitColumn() {
+        var cell = testGrid.getRow(0).getCell("Email Business");
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(4, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetRow_Then_GetCell_WithExpressionForColumn() {
+        var cell = testGrid.getRow(1).getCell(Employee.class, Employee::getPersonalEmail);
+
+        Assertions.assertEquals(1, cell.getRow());
+        Assertions.assertEquals(3, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperObject_When_GetCell_As() {
+        TextInput cell = testGrid.getCell(0, 0).as(TextInput.class);
+
+        cell.setText("test");
+
+        Assertions.assertEquals("test", cell.getValue());
+    }
+
+    @Test
+    public void returnProperCells_When_GetCells_WithExpressionForColumn() {
+        var matchingCells = testGrid.getCells(TableCell.class, tableCell -> tableCell.getText().startsWith("J"));
+
+        Assertions.assertEquals(2, matchingCells.size());
+    }
+
+    @Test
+    public void returnProperCell_When_GetFirstOrDefaultCell() {
+        var cell = testGrid.getFirstOrDefaultCell(TableCell.class, tableCell -> tableCell.getText().startsWith("J"));
+
+        Assertions.assertEquals("John", cell.getText());
+    }
+
+    @Test
+    public void returnProperCell_When_GetLastOrDefaultCell() {
+        var cell = testGrid.getLastOrDefaultCell(TableCell.class, tableCell -> tableCell.getText().startsWith("J"));
+
+        Assertions.assertEquals("July", cell.getText());
+    }
+
+    @Test
+    public void assertRow() {
+        testGrid.getRow(0).assertRow(Employee.class, expectedItems.get(0));
+    }
+
+    @Test
+    public void returnRow_When_GetRowByIndex() {
+        var row = testGrid.getRow(0);
+
+        Assertions.assertEquals(0, row.getIndex());
+    }
+
+    @Test
+    public void returnRows_When_GetRows() {
+        var rows = testGrid.getRows();
+
+        Assertions.assertEquals(3, rows.size());
+    }
+
+    @Test
+    public void verifyRowElement_When_ForEachRow() {
+        testGrid.forEachRow(row -> row.create().byXpath(Button.class, ".//input[@type='button']").validateIsVisible());
+    }
+
+    @Test
+    public void returnRow_When_GetRowByExpression() {
+        var row = testGrid.getFirstOrDefaultRow(GridRow.class, r -> r.getHtml().contains("July"));
+
+        Assertions.assertEquals(2, row.getIndex());
+    }
+
+    @Test
+    public void returnColumnIndex_When_GetByName() {
+        var index = testGrid.getGridColumnIndexByName("Firstname");
+
+        Assertions.assertEquals(1, index);
+    }
+
+    @Test
+    public void returnColumnName_When_GetByIndex() {
+        var name = testGrid.getGridColumnNameByIndex(1);
+
+        Assertions.assertEquals("Firstname", name);
+    }
+
+    @Test
+    public void returnProperNames_When_GetHeaderNames() {
+        var expectedHeaderNames = new ArrayList<String>();
+        expectedHeaderNames.add("Order");
+        expectedHeaderNames.add("Firstname");
+        expectedHeaderNames.add("Lastname");
+        expectedHeaderNames.add("Email Personal");
+        expectedHeaderNames.add("Email Business");
+        expectedHeaderNames.add("Actions");
+
+        var headerNames = testGrid.getHeaderNames();
+
+        Assertions.assertArrayEquals(expectedHeaderNames.toArray(String[]::new), headerNames.toArray(String[]::new));
+    }
+
+    @Test
+    public void returnColumnCells_When_GetColumnByIndex() {
+        var column = testGrid.getColumn(0);
+
+        Assertions.assertEquals(3, column.size());
+        Assertions.assertTrue(column.stream().anyMatch(c -> c.getColumn() == 0));
+    }
+
+    @Test
+    public void returnProperColumn_When_GetColumnByIndex() {
+        var column = testGrid.getColumn(0);
+
+        Assertions.assertTrue(column.stream().anyMatch(c -> c.getColumn() == 0));
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/test/java/controls/grid/data/Employee.java b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/grid/data/Employee.java
new file mode 100644
index 00000000..282bf281
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/grid/data/Employee.java
@@ -0,0 +1,21 @@
+package controls.grid.data;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import solutions.bellatrix.playwright.components.advanced.TableHeader;
+
+@Getter @Setter @AllArgsConstructor @NoArgsConstructor
+public class Employee {
+    @TableHeader(name = "Order")
+    public String order;
+    @TableHeader(name = "Firstname")
+    public String firstName;
+    @TableHeader(name = "Lastname")
+    public String lastName;
+    @TableHeader(name = "Email Business")
+    public String businessEmail;
+    @TableHeader(name = "Email Personal")
+    public String personalEmail;
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/test/java/controls/grid/data/User.java b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/grid/data/User.java
new file mode 100644
index 00000000..6fcd18f5
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/grid/data/User.java
@@ -0,0 +1,19 @@
+package controls.grid.data;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import solutions.bellatrix.playwright.components.advanced.TableHeader;
+
+@Getter @Setter @AllArgsConstructor @NoArgsConstructor
+public class User {
+    @TableHeader(name = "Last Name")
+    public String lastName;
+    @TableHeader(name = "First Name")
+    public String firstName;
+    @TableHeader(name = "Due")
+    public String due;
+    @TableHeader(name = "Web Site")
+    public String website;
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/test/java/controls/table/DataTableExampleOne.java b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/table/DataTableExampleOne.java
new file mode 100644
index 00000000..ae22dd21
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/table/DataTableExampleOne.java
@@ -0,0 +1,19 @@
+package controls.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.playwright.components.advanced.TableHeader;
+
+@Getter @Setter
+public class DataTableExampleOne {
+    @TableHeader(name = "Last Name")
+    public String lastName;
+    @TableHeader(name = "First Name")
+    public String firstName;
+    @TableHeader(name = "Email")
+    public String email;
+    @TableHeader(name = "Due")
+    public String due;
+    @TableHeader(name = "Web Site")
+    public String website;
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/test/java/controls/table/TableControlTests.java b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/table/TableControlTests.java
new file mode 100644
index 00000000..bbf4c2a9
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/test/java/controls/table/TableControlTests.java
@@ -0,0 +1,87 @@
+package controls.table;
+
+import configuration.TestPagesSettings;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import solutions.bellatrix.core.configuration.ConfigurationService;
+import solutions.bellatrix.playwright.components.advanced.table.Table;
+import solutions.bellatrix.playwright.infrastructure.BrowserTypes;
+import solutions.bellatrix.playwright.infrastructure.ExecutionBrowser;
+import solutions.bellatrix.playwright.infrastructure.Lifecycle;
+import solutions.bellatrix.playwright.infrastructure.junit.WebTest;
+
+@ExecutionBrowser(browser = BrowserTypes.CHROME, lifecycle = Lifecycle.REUSE_IF_STARTED)
+public class TableControlTests extends WebTest {
+    @BeforeEach
+    public void testInit() {
+        var url = ConfigurationService.get(TestPagesSettings.class).getTableLocalPage();
+        app().navigate().toLocalPage(url);
+    }
+
+    @Test
+    public void tableGetItems() {
+        var table = app().create().byId(Table.class, "table1");
+        table.setColumn("Last Name").setColumn("First Name").setColumn("Email").setColumn("Due").setColumn("Web Site").setColumn("Action");
+
+        var dataTableExampleOnes = table.getItems(DataTableExampleOne.class);
+
+        Assertions.assertEquals("Smith", dataTableExampleOnes.get(0).lastName);
+        Assertions.assertEquals("John", dataTableExampleOnes.get(0).firstName);
+        Assertions.assertEquals("http://www.timconway.com", dataTableExampleOnes.get(dataTableExampleOnes.size() - 1).website);
+    }
+
+    @Test
+    public void basicTableHasHeader() {
+        var table = app().create().byId(Table.class, "table1");
+
+        var headerNames = table.getHeaderNames();
+        var tableCell = table.getCell(3, 1);
+
+        Assertions.assertTrue(headerNames.contains("Due"));
+        Assertions.assertEquals("$51.00", tableCell.getText());
+    }
+
+    @Test
+    public void tableWithHeaderReturnsValue() {
+        var table = app().create().byId(Table.class, "table1");
+        table.setColumn("Last Name").setColumn("First Name").setColumn("Email").setColumn("Due").setColumn("Web Site").setColumn("Action");
+
+        var tableCell = table.getCell("Email", 1);
+
+        Assertions.assertEquals("fbach@yahoo.com", tableCell.getText());
+    }
+
+    @Test
+    public void simpleTableReturnsAllRowsAndCells() {
+        var table = app().create().byId(Table.class, "simpleTable");
+        var firstRowCellsCount = table.getRow(0).getCells().size();
+        var secondRowCellsCount = table.getRow(1).getCells().size();
+
+        Assertions.assertEquals(firstRowCellsCount, secondRowCellsCount);
+        Assertions.assertEquals(4, firstRowCellsCount);
+    }
+
+    @Test
+    public void nestedTablesReturnsTableCellsCountEqualToTableHeadersCount() {
+        var table = app().create().byId(Table.class, "nestedTable");
+        table.setColumn("Last Name").setColumn("First Name").setColumn("Email").setColumn("Due").setColumn("Web Site");
+
+        var tableHeadersCount = table.getHeaderNames().size();
+        var tableCellsCount = table.getRow(0).getCells().size();
+
+        Assertions.assertEquals(tableHeadersCount, tableCellsCount);
+    }
+
+    @Test
+    public void nestedTablesReturnsTableCellsCountEqualBetweenRows() {
+        var table = app().create().byId(Table.class, "nestedTable");
+        table.setColumn("Last Name").setColumn("First Name").setColumn("Email").setColumn("Due").setColumn("Web Site");
+
+        var firstRowCellsCount = table.getRow(0).getCells().size();
+        var secondRowCellsCount = table.getRow(1).getCells().size();
+
+        Assertions.assertEquals(firstRowCellsCount, secondRowCellsCount);
+
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/test/java/junit/ProductPurchaseTests.java b/framework-tests/bellatrix.playwright.tests/src/test/java/junit/ProductPurchaseTests.java
new file mode 100644
index 00000000..75494dcf
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/test/java/junit/ProductPurchaseTests.java
@@ -0,0 +1,122 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package junit;
+
+import cartpage.CartPage;
+import checkoutpage.CheckoutPage;
+import checkoutpage.PurchaseInfo;
+import mainpage.MainPage;
+import org.junit.jupiter.api.Test;
+import solutions.bellatrix.playwright.components.Anchor;
+import solutions.bellatrix.playwright.infrastructure.BrowserTypes;
+import solutions.bellatrix.playwright.infrastructure.ExecutionBrowser;
+import solutions.bellatrix.playwright.infrastructure.Lifecycle;
+import solutions.bellatrix.playwright.infrastructure.junit.WebTest;
+
+@ExecutionBrowser(browser = BrowserTypes.CHROME, lifecycle = Lifecycle.RESTART_EVERY_TIME)
+public class ProductPurchaseTests extends WebTest {
+    @Override
+    protected void afterEach() {
+        app().cookies().deleteAllCookies();
+    }
+
+    @Test
+    public void completePurchaseSuccessfully_first() {
+        app().navigate().to("http://demos.bellatrix.solutions/");
+        var addToCartFalcon9 = app().create().byCss(Anchor.class, "[data-product_id*='28']");
+        var blogLink = app().create().byInnerTextContaining(Anchor.class, "Blog");
+        addToCartFalcon9.click();
+        blogLink.above(addToCartFalcon9).validate();
+        new MainPage().asserts().productBoxLink("Falcon 9", "https://demos.bellatrix.solutions/product/falcon-9/");
+    }
+
+    @Test
+    public void completePurchaseSuccessfully_second() {
+        app().navigate().to("https://demos.bellatrix.solutions/");
+        var addToCartFalcon9 = app().create().byCss(Anchor.class, "[data-product_id*='28']");
+        addToCartFalcon9.click();
+    }
+
+    @Test
+    public void falcon9LinkAddsCorrectProduct() {
+        var mainPage = app().goTo(MainPage.class);
+
+        mainPage.asserts().productBoxLink("Falcon 9", "https://demos.bellatrix.solutions/product/falcon-9/");
+    }
+
+    @Test
+    public void saturnVLinkAddsCorrectProduct() {
+        var mainPage = app().goTo(MainPage.class);
+
+        mainPage.asserts().productBoxLink("Saturn V", "https://demos.bellatrix.solutions/product/saturn-v/");
+    }
+
+    @Test
+    public void purchaseFalcon9WithoutFacade() {
+        var mainPage = app().goTo(MainPage.class);
+        mainPage.addRocketToShoppingCart("Falcon 9");
+
+        var cartPage = app().createPage(CartPage.class);
+        cartPage.applyCoupon("happybirthday");
+        cartPage.asserts().couponAppliedSuccessfully();
+        cartPage.increaseProductQuantity(2);
+        cartPage.asserts().totalPrice("114.00€");
+        cartPage.clickProceedToCheckout();
+
+        var purchaseInfo = new PurchaseInfo();
+//        purchaseInfo.setEmail("info@berlinspaceflowers.com");
+//        purchaseInfo.setFirstName("Anton");
+//        purchaseInfo.setLastName("Angelov");
+//        purchaseInfo.setCompany("Space Flowers");
+//        purchaseInfo.setCountry("Germany");
+//        purchaseInfo.setAddress1("1 Willi Brandt Avenue Tiergarten");
+//        purchaseInfo.setAddress2("Lützowplatz 17");
+//        purchaseInfo.setCity("Berlin");
+//        purchaseInfo.setZip("10115");
+//        purchaseInfo.setPhone("+498888999281");
+
+        var checkoutPage = app().createPage(CheckoutPage.class);
+        checkoutPage.fillBillingInfo(purchaseInfo);
+        checkoutPage.asserts().orderReceived();
+    }
+
+    @Test
+    public void purchaseSaturnVWithoutFacade() {
+        var mainPage = app().goTo(MainPage.class);
+        mainPage.addRocketToShoppingCart("Saturn V");
+
+        var cartPage = app().createPage(CartPage.class);
+        cartPage.applyCoupon("happybirthday");
+        cartPage.asserts().couponAppliedSuccessfully();
+        cartPage.increaseProductQuantity(3);
+        cartPage.asserts().totalPrice("355.00€");
+        cartPage.clickProceedToCheckout();
+
+        var purchaseInfo = new PurchaseInfo();
+//        purchaseInfo.setEmail("info@berlinspaceflowers.com");
+//        purchaseInfo.setFirstName("Anton");
+//        purchaseInfo.setLastName("Angelov");
+//        purchaseInfo.setCompany("Space Flowers");
+//        purchaseInfo.setCountry("Germany");
+//        purchaseInfo.setAddress1("1 Willi Brandt Avenue Tiergarten");
+//        purchaseInfo.setAddress2("Lützowplatz 17");
+//        purchaseInfo.setCity("Berlin");
+//        purchaseInfo.setZip("10115");
+//        purchaseInfo.setPhone("+498888999281");
+
+        var checkoutPage = app().createPage(CheckoutPage.class);
+        checkoutPage.fillBillingInfo(purchaseInfo);
+        checkoutPage.asserts().orderReceived();
+    }
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/test/java/shadowdom/ShadowDomTests.java b/framework-tests/bellatrix.playwright.tests/src/test/java/shadowdom/ShadowDomTests.java
new file mode 100644
index 00000000..a0901ca6
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/test/java/shadowdom/ShadowDomTests.java
@@ -0,0 +1,111 @@
+package shadowdom;
+
+import configuration.TestPagesSettings;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import solutions.bellatrix.core.configuration.ConfigurationService;
+import solutions.bellatrix.playwright.components.Anchor;
+import solutions.bellatrix.playwright.components.Div;
+import solutions.bellatrix.playwright.components.Select;
+import solutions.bellatrix.playwright.components.advanced.grid.Grid;
+import solutions.bellatrix.playwright.components.advanced.grid.GridCell;
+import solutions.bellatrix.playwright.components.shadowdom.ShadowRoot;
+import solutions.bellatrix.playwright.infrastructure.BrowserTypes;
+import solutions.bellatrix.playwright.infrastructure.ExecutionBrowser;
+import solutions.bellatrix.playwright.infrastructure.Lifecycle;
+import solutions.bellatrix.playwright.infrastructure.junit.WebTest;
+
+@ExecutionBrowser(browser = BrowserTypes.CHROME, lifecycle = Lifecycle.REUSE_IF_STARTED)
+public class ShadowDomTests extends WebTest {
+    @BeforeEach
+    public void init() {
+        var url = ConfigurationService.get(TestPagesSettings.class).getShadowDomPage();
+        app().navigate().toLocalPage(url);
+    }
+
+    @Test
+    public void creatingShadowRoot() {
+        var shadowRoot = app().create().byId(ShadowRoot.class, "basicShadowHost");
+        Assertions.assertTrue(shadowRoot.getHtml() != null && !shadowRoot.getHtml().isBlank());
+    }
+
+    @Test
+    public void creatingComponentFromWhichShadowRootIsCreated() {
+        var shadowHost = app().create().byId(Div.class, "basicShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+        Assertions.assertTrue(shadowRoot.getHtml() != null && !shadowRoot.getHtml().isBlank());
+    }
+
+    @Test
+    public void findingElementWithCss_basic() {
+        var shadowHost = app().create().byId(Div.class, "basicShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var select = shadowRoot.create().byCss(Select.class, "[name='select']");
+
+        select.selectByText("Is");
+        Assertions.assertEquals("Is", select.getSelected().getText());
+    }
+
+    @Test
+    public void findingElementWithXpath_basic() {
+        var shadowHost = app().create().byId(Div.class, "basicShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var select = shadowRoot.create().byXpath(Select.class, "//select[@name='select']");
+
+        select.selectByText("Is");
+        Assertions.assertEquals("Is", select.getSelected().getText());
+    }
+
+    @Test
+    public void findingElementInNestedShadowRoot_withXpath() {
+        var shadowHost = app().create().byId(Div.class, "complexShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var firstEditAnchor = shadowRoot.create().byXpath(Anchor.class, "//a[@href='#edit']");
+        Assertions.assertEquals("edit", firstEditAnchor.getText());
+    }
+
+    @Test
+    public void findingElementInNestedShadowRoot_withCss() {
+        var shadowHost = app().create().byId(Div.class, "complexShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var firstEditAnchor = shadowRoot.create().byCss(Anchor.class, "a[href='#edit']");
+        Assertions.assertEquals("edit", firstEditAnchor.getText());
+    }
+
+    @Test
+    public void findingElementByAnotherElementInNestedShadowRoot_withXpath() {
+        var shadowHost = app().create().byId(Div.class, "complexShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var table = shadowRoot.create().byXpath(Grid.class, ".//table[@id='shadowTable']")
+                .setModelColumns(TableData.class)
+                .setColumn("Action");
+
+        var row = table.getFirstOrDefaultRow(GridCell.class, cell -> cell.getText().equals("jsmith@gmail.com"));
+
+        var edit = table.getColumn("Action").get(row.getIndex()).create().byXpath(Anchor.class, ".//a[@href='#edit']");
+        Assertions.assertEquals("edit", edit.getText());
+    }
+
+    @Test
+    public void findingElementByAnotherElementInNestedShadowRoot_withCss() {
+        var shadowHost = app().create().byId(Div.class, "complexShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var table = shadowRoot.createById(Grid.class, "shadowTable")
+                .setModelColumns(TableData.class)
+                .setColumn("Action");
+
+        var row = table.getFirstOrDefaultRow(GridCell.class, cell -> cell.getText().equals("jsmith@gmail.com"));
+
+        var edit = table.getColumn("Action").get(row.getIndex()).create().byCss(Anchor.class, "[href='#edit']");
+        Assertions.assertEquals("edit", edit.getText());
+    }
+
+    // TODO: Test Relative Finding of Elements
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/test/java/shadowdom/TableData.java b/framework-tests/bellatrix.playwright.tests/src/test/java/shadowdom/TableData.java
new file mode 100644
index 00000000..4f4d7dc7
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/test/java/shadowdom/TableData.java
@@ -0,0 +1,19 @@
+package shadowdom;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.playwright.components.advanced.TableHeader;
+
+@Getter @Setter
+public class TableData {
+    @TableHeader(name = "Last Name")
+    public String lastName;
+    @TableHeader(name = "First Name")
+    public String firstName;
+    @TableHeader(name = "Email")
+    public String email;
+    @TableHeader(name = "Due")
+    public String due;
+    @TableHeader(name = "Web Site")
+    public String website;
+}
diff --git a/framework-tests/bellatrix.playwright.tests/src/test/java/testng/ProductPurchaseTests.java b/framework-tests/bellatrix.playwright.tests/src/test/java/testng/ProductPurchaseTests.java
new file mode 100644
index 00000000..311b0a9b
--- /dev/null
+++ b/framework-tests/bellatrix.playwright.tests/src/test/java/testng/ProductPurchaseTests.java
@@ -0,0 +1,122 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package testng;
+
+import cartpage.CartPage;
+import checkoutpage.CheckoutPage;
+import checkoutpage.PurchaseInfo;
+import mainpage.MainPage;
+import org.testng.annotations.Test;
+import solutions.bellatrix.playwright.components.Anchor;
+import solutions.bellatrix.playwright.infrastructure.BrowserTypes;
+import solutions.bellatrix.playwright.infrastructure.ExecutionBrowser;
+import solutions.bellatrix.playwright.infrastructure.Lifecycle;
+import solutions.bellatrix.playwright.infrastructure.testng.WebTest;
+
+@ExecutionBrowser(browser = BrowserTypes.CHROME, lifecycle = Lifecycle.RESTART_ON_FAIL)
+public class ProductPurchaseTests extends WebTest {
+    @Override
+    protected void afterEach() {
+        app().cookies().deleteAllCookies();
+    }
+
+    @Test
+    public void completePurchaseSuccessfully_first() {
+        app().navigate().to("https://demos.bellatrix.solutions/");
+        var addToCartFalcon9 = app().create().byCss(Anchor.class, "[data-product_id*='28']");
+        var blogLink = app().create().byInnerTextContaining(Anchor.class, "Blog");
+        addToCartFalcon9.click();
+        blogLink.above(addToCartFalcon9);
+        new MainPage().asserts().productBoxLink("Falcon 9", "https://demos.bellatrix.solutions/product/falcon-9/");
+    }
+
+    @Test
+    public void completePurchaseSuccessfully_second() {
+        app().navigate().to("https://demos.bellatrix.solutions/");
+        var addToCartFalcon9 = app().create().byCss(Anchor.class, "[data-product_id*='28']");
+        addToCartFalcon9.click();
+    }
+
+    @Test
+    public void falcon9LinkAddsCorrectProduct() {
+        var mainPage = app().goTo(MainPage.class);
+
+        mainPage.asserts().productBoxLink("Falcon 9", "https://demos.bellatrix.solutions/product/falcon-9/");
+    }
+
+    @Test
+    public void saturnVLinkAddsCorrectProduct() {
+        var mainPage = app().goTo(MainPage.class);
+
+        mainPage.asserts().productBoxLink("Saturn V", "https://demos.bellatrix.solutions/product/saturn-v/");
+    }
+
+    @Test
+    public void purchaseFalcon9WithoutFacade() {
+        var mainPage = app().goTo(MainPage.class);
+        mainPage.addRocketToShoppingCart("Falcon 9");
+
+        var cartPage = app().createPage(CartPage.class);
+        cartPage.applyCoupon("happybirthday");
+        cartPage.asserts().couponAppliedSuccessfully();
+        cartPage.increaseProductQuantity(2);
+        cartPage.asserts().totalPrice("114.00€");
+        cartPage.clickProceedToCheckout();
+
+        var purchaseInfo = new PurchaseInfo();
+        purchaseInfo.setEmail("info@berlinspaceflowers.com");
+        purchaseInfo.setFirstName("Anton");
+        purchaseInfo.setLastName("Angelov");
+        purchaseInfo.setCompany("Space Flowers");
+        purchaseInfo.setCountry("Germany");
+        purchaseInfo.setAddress1("1 Willi Brandt Avenue Tiergarten");
+        purchaseInfo.setAddress2("Lützowplatz 17");
+        purchaseInfo.setCity("Berlin");
+        purchaseInfo.setZip("10115");
+        purchaseInfo.setPhone("+498888999281");
+
+        var checkoutPage = app().createPage(CheckoutPage.class);
+        checkoutPage.fillBillingInfo(purchaseInfo);
+        checkoutPage.asserts().orderReceived();
+    }
+
+    @Test
+    public void purchaseSaturnVWithoutFacade() {
+        var mainPage = app().goTo(MainPage.class);
+        mainPage.addRocketToShoppingCart("Saturn V");
+
+        var cartPage = app().createPage(CartPage.class);
+        cartPage.applyCoupon("happybirthday");
+        cartPage.asserts().couponAppliedSuccessfully();
+        cartPage.increaseProductQuantity(3);
+        cartPage.asserts().totalPrice("355.00€");
+        cartPage.clickProceedToCheckout();
+
+        var purchaseInfo = new PurchaseInfo();
+        purchaseInfo.setEmail("info@berlinspaceflowers.com");
+        purchaseInfo.setFirstName("Anton");
+        purchaseInfo.setLastName("Angelov");
+        purchaseInfo.setCompany("Space Flowers");
+        purchaseInfo.setCountry("Germany");
+        purchaseInfo.setAddress1("1 Willi Brandt Avenue Tiergarten");
+        purchaseInfo.setAddress2("Lützowplatz 17");
+        purchaseInfo.setCity("Berlin");
+        purchaseInfo.setZip("10115");
+        purchaseInfo.setPhone("+498888999281");
+
+        var checkoutPage = app().createPage(CheckoutPage.class);
+        checkoutPage.fillBillingInfo(purchaseInfo);
+        checkoutPage.asserts().orderReceived();
+    }
+}
diff --git a/bellatrix.web.tests/src/test/resources/junit-platform.properties b/framework-tests/bellatrix.playwright.tests/src/test/resources/junit-platform.properties
similarity index 100%
rename from bellatrix.web.tests/src/test/resources/junit-platform.properties
rename to framework-tests/bellatrix.playwright.tests/src/test/resources/junit-platform.properties
diff --git a/bellatrix.web.tests/pom.xml b/framework-tests/bellatrix.web.tests/pom.xml
similarity index 96%
rename from bellatrix.web.tests/pom.xml
rename to framework-tests/bellatrix.web.tests/pom.xml
index 8dc4b723..60718d05 100644
--- a/bellatrix.web.tests/pom.xml
+++ b/framework-tests/bellatrix.web.tests/pom.xml
@@ -6,6 +6,7 @@
         <artifactId>bellatrix</artifactId>
         <groupId>solutions.bellatrix</groupId>
         <version>1.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
     </parent>
 
     <artifactId>bellatrix.web.tests</artifactId>
diff --git a/bellatrix.web.tests/src/main/java/breadcrumbsection/Asserts.java b/framework-tests/bellatrix.web.tests/src/main/java/breadcrumbsection/Asserts.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/breadcrumbsection/Asserts.java
rename to framework-tests/bellatrix.web.tests/src/main/java/breadcrumbsection/Asserts.java
diff --git a/bellatrix.web.tests/src/main/java/breadcrumbsection/BreadcrumbSection.java b/framework-tests/bellatrix.web.tests/src/main/java/breadcrumbsection/BreadcrumbSection.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/breadcrumbsection/BreadcrumbSection.java
rename to framework-tests/bellatrix.web.tests/src/main/java/breadcrumbsection/BreadcrumbSection.java
diff --git a/bellatrix.web.tests/src/main/java/breadcrumbsection/Map.java b/framework-tests/bellatrix.web.tests/src/main/java/breadcrumbsection/Map.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/breadcrumbsection/Map.java
rename to framework-tests/bellatrix.web.tests/src/main/java/breadcrumbsection/Map.java
diff --git a/bellatrix.web.tests/src/main/java/cartinfosection/Asserts.java b/framework-tests/bellatrix.web.tests/src/main/java/cartinfosection/Asserts.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/cartinfosection/Asserts.java
rename to framework-tests/bellatrix.web.tests/src/main/java/cartinfosection/Asserts.java
diff --git a/bellatrix.web.tests/src/main/java/cartinfosection/CartInfoSection.java b/framework-tests/bellatrix.web.tests/src/main/java/cartinfosection/CartInfoSection.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/cartinfosection/CartInfoSection.java
rename to framework-tests/bellatrix.web.tests/src/main/java/cartinfosection/CartInfoSection.java
diff --git a/bellatrix.web.tests/src/main/java/cartinfosection/Map.java b/framework-tests/bellatrix.web.tests/src/main/java/cartinfosection/Map.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/cartinfosection/Map.java
rename to framework-tests/bellatrix.web.tests/src/main/java/cartinfosection/Map.java
diff --git a/bellatrix.web.tests/src/main/java/cartpage/Asserts.java b/framework-tests/bellatrix.web.tests/src/main/java/cartpage/Asserts.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/cartpage/Asserts.java
rename to framework-tests/bellatrix.web.tests/src/main/java/cartpage/Asserts.java
diff --git a/bellatrix.web.tests/src/main/java/cartpage/CartPage.java b/framework-tests/bellatrix.web.tests/src/main/java/cartpage/CartPage.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/cartpage/CartPage.java
rename to framework-tests/bellatrix.web.tests/src/main/java/cartpage/CartPage.java
diff --git a/bellatrix.web.tests/src/main/java/cartpage/Map.java b/framework-tests/bellatrix.web.tests/src/main/java/cartpage/Map.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/cartpage/Map.java
rename to framework-tests/bellatrix.web.tests/src/main/java/cartpage/Map.java
diff --git a/bellatrix.web.tests/src/main/java/checkoutpage/Asserts.java b/framework-tests/bellatrix.web.tests/src/main/java/checkoutpage/Asserts.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/checkoutpage/Asserts.java
rename to framework-tests/bellatrix.web.tests/src/main/java/checkoutpage/Asserts.java
diff --git a/bellatrix.web.tests/src/main/java/checkoutpage/CheckoutPage.java b/framework-tests/bellatrix.web.tests/src/main/java/checkoutpage/CheckoutPage.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/checkoutpage/CheckoutPage.java
rename to framework-tests/bellatrix.web.tests/src/main/java/checkoutpage/CheckoutPage.java
diff --git a/bellatrix.web.tests/src/main/java/checkoutpage/Map.java b/framework-tests/bellatrix.web.tests/src/main/java/checkoutpage/Map.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/checkoutpage/Map.java
rename to framework-tests/bellatrix.web.tests/src/main/java/checkoutpage/Map.java
diff --git a/framework-tests/bellatrix.web.tests/src/main/java/checkoutpage/PurchaseInfo.java b/framework-tests/bellatrix.web.tests/src/main/java/checkoutpage/PurchaseInfo.java
new file mode 100644
index 00000000..a92f83bc
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/java/checkoutpage/PurchaseInfo.java
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2022 Automate The Planet Ltd.
+ * Author: Anton Angelov
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * You may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package checkoutpage;
+
+import lombok.Getter;
+import lombok.Setter;
+
+// TODO: can be converted to record?
+public class PurchaseInfo {
+    @Getter @Setter private String firstName;
+    @Getter @Setter private String lastName;
+    @Getter @Setter private String company;
+    @Getter @Setter private String country;
+    @Getter @Setter private String address1;
+    @Getter @Setter private String address2;
+    @Getter @Setter private String city;
+    @Getter @Setter private String zip;
+    @Getter @Setter private String phone;
+    @Getter @Setter private String email;
+    @Getter @Setter private Boolean shouldCreateAccount = false;
+    @Getter @Setter private Boolean shouldCheckPayment = false;
+}
diff --git a/framework-tests/bellatrix.web.tests/src/main/java/common/configuration/TestPagesSettings.java b/framework-tests/bellatrix.web.tests/src/main/java/common/configuration/TestPagesSettings.java
new file mode 100644
index 00000000..15fb0465
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/java/common/configuration/TestPagesSettings.java
@@ -0,0 +1,41 @@
+package common.configuration;
+
+import lombok.Data;
+
+@Data
+public class TestPagesSettings {
+    private String anchorLocalPage;
+    private String buttonLocalPage;
+    private String checkBoxLocalPage;
+    private String colorLocalPage;
+    private String dateLocalPage;
+    private String dateTimeLocalLocalPage;
+    private String gridLocalPage;
+    private String divLocalPage;
+    private String elementLocalPage;
+    private String emailLocalPage;
+    private String headingLocalPage;
+    private String imageLocalPage;
+    private String labelLocalPage;
+    private String monthLocalPage;
+    private String numberLocalPage;
+    private String optionLocalPage;
+    private String outputLocalPage;
+    private String passwordLocalPage;
+    private String phoneLocalPage;
+    private String progressLocalPage;
+    private String radioLocalPage;
+    private String rangeLocalPage;
+    private String resetLocalPage;
+    private String searchLocalPage;
+    private String selectLocalPage;
+    private String spanLocalPage;
+    private String textAreaLocalPage;
+    private String textFieldLocalPage;
+    private String timeLocalPage;
+    private String urlLocalPage;
+    private String weekLocalPage;
+    private String tableLocalPage;
+    private String layoutPricingPage;
+    private String shadowDomPage;
+}
\ No newline at end of file
diff --git a/bellatrix.web.tests/src/main/java/mainmenusection/Asserts.java b/framework-tests/bellatrix.web.tests/src/main/java/mainmenusection/Asserts.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/mainmenusection/Asserts.java
rename to framework-tests/bellatrix.web.tests/src/main/java/mainmenusection/Asserts.java
diff --git a/bellatrix.web.tests/src/main/java/mainmenusection/MainMenuSection.java b/framework-tests/bellatrix.web.tests/src/main/java/mainmenusection/MainMenuSection.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/mainmenusection/MainMenuSection.java
rename to framework-tests/bellatrix.web.tests/src/main/java/mainmenusection/MainMenuSection.java
diff --git a/bellatrix.web.tests/src/main/java/mainmenusection/Map.java b/framework-tests/bellatrix.web.tests/src/main/java/mainmenusection/Map.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/mainmenusection/Map.java
rename to framework-tests/bellatrix.web.tests/src/main/java/mainmenusection/Map.java
diff --git a/bellatrix.web.tests/src/main/java/mainpage/Asserts.java b/framework-tests/bellatrix.web.tests/src/main/java/mainpage/Asserts.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/mainpage/Asserts.java
rename to framework-tests/bellatrix.web.tests/src/main/java/mainpage/Asserts.java
diff --git a/bellatrix.web.tests/src/main/java/mainpage/MainPage.java b/framework-tests/bellatrix.web.tests/src/main/java/mainpage/MainPage.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/mainpage/MainPage.java
rename to framework-tests/bellatrix.web.tests/src/main/java/mainpage/MainPage.java
diff --git a/bellatrix.web.tests/src/main/java/mainpage/Map.java b/framework-tests/bellatrix.web.tests/src/main/java/mainpage/Map.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/mainpage/Map.java
rename to framework-tests/bellatrix.web.tests/src/main/java/mainpage/Map.java
diff --git a/bellatrix.web.tests/src/main/java/searchsection/Asserts.java b/framework-tests/bellatrix.web.tests/src/main/java/searchsection/Asserts.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/searchsection/Asserts.java
rename to framework-tests/bellatrix.web.tests/src/main/java/searchsection/Asserts.java
diff --git a/bellatrix.web.tests/src/main/java/searchsection/Map.java b/framework-tests/bellatrix.web.tests/src/main/java/searchsection/Map.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/searchsection/Map.java
rename to framework-tests/bellatrix.web.tests/src/main/java/searchsection/Map.java
diff --git a/bellatrix.web.tests/src/main/java/searchsection/SearchSection.java b/framework-tests/bellatrix.web.tests/src/main/java/searchsection/SearchSection.java
similarity index 100%
rename from bellatrix.web.tests/src/main/java/searchsection/SearchSection.java
rename to framework-tests/bellatrix.web.tests/src/main/java/searchsection/SearchSection.java
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/application.properties b/framework-tests/bellatrix.web.tests/src/main/resources/application.properties
new file mode 100644
index 00000000..3bc65368
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/application.properties
@@ -0,0 +1,14 @@
+#
+# Copyright 2022 Automate The Planet Ltd.
+# Author: Anton Angelov
+# Licensed under the Apache License, Version 2.0 (the "License");
+# You may not use this file except in compliance with the License.
+# You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+environment=dev
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testFrameworkSettings.dev.json b/framework-tests/bellatrix.web.tests/src/main/resources/testFrameworkSettings.dev.json
new file mode 100644
index 00000000..1ab43a8b
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testFrameworkSettings.dev.json
@@ -0,0 +1,149 @@
+{
+  "troubleshootingSettings": {
+    "debugInformationEnabled": "true"
+  },
+  "webSettings": {
+    "baseUrl": "http://demos.bellatrix.solutions/",
+    "executionType": "regular",
+    "defaultBrowser": "chrome",
+    "defaultLifeCycle": "restart everytime time",
+    "artificialDelayBeforeAction": "0",
+    "automaticallyScrollToVisible": "false",
+    "waitUntilReadyOnElementFound": "false",
+    "waitForAngular": "false",
+    "shouldHighlightElements": "true",
+    "shouldCaptureHttpTraffic": "false",
+    "toastNotificationBddLogging": "true",
+    "screenshotsOnFailEnabled": "false",
+    "screenshotsSaveLocation": "${user.home}/BELLATRIX/Screenshots",
+    "videosOnFailEnabled": "false",
+    "videosSaveLocation": "${user.home}/BELLATRIX/Videos",
+    "notificationToastTimeout": "3000",
+    "timeoutSettings": {
+      "elementWaitTimeout": "30",
+      "pageLoadTimeout": "30",
+      "scriptTimeout": "1",
+      "waitForAjaxTimeout": "30",
+      "sleepInterval": "1",
+      "waitUntilReadyTimeout": "30",
+      "waitForJavaScriptAnimationsTimeout": "30",
+      "waitForAngularTimeout": "30",
+      "waitForPartialUrl": "30",
+      "validationsTimeout": "30",
+      "elementToBeVisibleTimeout": "30",
+      "elementToExistTimeout": "30",
+      "elementToNotExistTimeout": "30",
+      "elementToBeClickableTimeout": "30",
+      "elementNotToBeVisibleTimeout": "30",
+      "elementToHaveContentTimeout": "15"
+    },
+    "gridSettings": [
+      {
+        "providerName": "saucelabs",
+        "url": "http://ondemand.saucelabs.com:80/wd/hub",
+        "arguments": [
+          {
+            "screenResolution": "1280x800",
+            "recordVideo": "true",
+            "recordScreenshots": "true",
+            "username": "myUserName",
+            "accessKey": "myPass",
+            "name": "bellatrix_run"
+          }
+        ]
+      },
+      {
+        "providerName": "browserstack",
+        "url": "http://hub-cloud.browserstack.com/wd/hub/",
+        "arguments": [
+          {
+            "resolution": "1280x800",
+            "browserstack.video": "true",
+            "browserstack.networkLogs": "true",
+            "browserstack.debug": "true",
+            "browserstack.console": "errors",
+            "browserstack.user": "myUserName",
+            "browserstack.key": "myPass",
+            "build": "bellatrix_run"
+          }
+        ]
+      },
+      {
+        "providerName": "crossbrowsertesting",
+        "url": "http://hub.crossbrowsertesting.com:80/wd/hub",
+        "arguments": [
+          {
+            "screen_resolution": "1280x800",
+            "record_video": "true",
+            "record_network": "true",
+            "username": "myUserName",
+            "password": "myPass",
+            "name": "bellatrix_run"
+          }
+        ]
+      },
+      {
+        "providerName": "selenoid",
+        "url": "http://127.0.0.1:4444/wd/hub",
+        "arguments": [
+          {
+            "screenResolution": "1280x800",
+            "enableVNC": "true",
+            "enableVideo": "true",
+            "enableLog": "true",
+            "name": "bellatrix_run"
+          }
+        ]
+      },
+      {
+        "providerName": "grid",
+        "url": "http://127.0.0.1:4444/wd/hub",
+        "arguments": [
+          {
+            "name": "bellatrix_run"
+          }
+        ]
+      }
+    ]
+  },
+  "urlSettings": {
+    "shopUrl": "http://demos.bellatrix.solutions/cart/",
+    "accountUrl": "http://demos.bellatrix.solutions/account/"
+  },
+  "testPagesSettings": {
+    "anchorLocalPage": "testpages/anchor/anchor.html",
+    "buttonLocalPage": "testpages/button/button.html",
+    "checkBoxLocalPage": "testpages/checkbox/checkBox.html",
+    "colorLocalPage": "testpages/color/color.html",
+    "dateLocalPage": "testpages/date/date.html",
+    "dateTimeLocalLocalPage": "testpages/datetimelocal/dateTimeLocal.html",
+    "divLocalPage": "testpages/div/div.html",
+    "elementLocalPage": "testpages/url/url.html",
+    "emailLocalPage": "testpages/email/email.html",
+    "headingLocalPage": "testpages/heading/heading.html",
+    "imageLocalPage": "testpages/image/image.html",
+    "labelLocalPage": "testpages/label/label.html",
+    "monthLocalPage": "testpages/month/month.html",
+    "numberLocalPage": "testpages/number/number.html",
+    "optionLocalPage": "testpages/select/select.html",
+    "outputLocalPage": "testpages/output/output.html",
+    "passwordLocalPage": "testpages/password/password.html",
+    "phoneLocalPage": "testpages/phone/phone.html",
+    "progressLocalPage": "testpages/progress/progress.html",
+    "radioLocalPage": "testpages/radio/radio.html",
+    "rangeLocalPage": "testpages/range/range.html",
+    "resetLocalPage": "testpages/reset/reset.html",
+    "searchLocalPage": "testpages/search/search.html",
+    "selectLocalPage": "testpages/select/select.html",
+    "spanLocalPage": "testpages/span/span.html",
+    "textAreaLocalPage": "testpages/textarea/textArea.html",
+    "textFieldLocalPage": "testpages/text/text.html",
+    "timeLocalPage": "testpages/time/time.html",
+    "urlLocalPage": "testpages/url/url.html",
+    "weekLocalPage": "testpages/week/week.html",
+    "tableLocalPage": "testpages/table/table.html",
+    "layoutPricingPage": "testpages/layout/pricing.html",
+    "gridLocalPage": "testpages/grid/grid.html",
+    "shadowDomPage": "testpages/shadowdom/shadowdom.html"
+  }
+}
\ No newline at end of file
diff --git a/bellatrix.web.tests/src/main/resources/testFrameworkSettings.dev.json b/framework-tests/bellatrix.web.tests/src/main/resources/testFrameworkSettings.qa.json
similarity index 65%
rename from bellatrix.web.tests/src/main/resources/testFrameworkSettings.dev.json
rename to framework-tests/bellatrix.web.tests/src/main/resources/testFrameworkSettings.qa.json
index af33dffd..2c46b262 100644
--- a/bellatrix.web.tests/src/main/resources/testFrameworkSettings.dev.json
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testFrameworkSettings.qa.json
@@ -109,5 +109,40 @@
   "urlSettings": {
     "shopUrl": "http://demos.bellatrix.solutions/cart/",
     "accountUrl": "http://demos.bellatrix.solutions/account/"
+  },
+  "testPagesSettings": {
+    "anchorLocalPage": "testpages/anchor/anchor.html",
+    "buttonLocalPage": "testpages/button/button.html",
+    "checkBoxLocalPage": "testpages/checkbox/checkBox.html",
+    "colorLocalPage": "testpages/color/color.html",
+    "dateLocalPage": "testpages/date/date.html",
+    "dateTimeLocalLocalPage": "testpages/datetimelocal/dateTimeLocal.html",
+    "divLocalPage": "testpages/div/div.html",
+    "elementLocalPage": "testpages/url/url.html",
+    "emailLocalPage": "testpages/email/email.html",
+    "headingLocalPage": "testpages/heading/heading.html",
+    "imageLocalPage": "testpages/image/image.html",
+    "labelLocalPage": "testpages/label/label.html",
+    "monthLocalPage": "testpages/month/month.html",
+    "numberLocalPage": "testpages/number/number.html",
+    "optionLocalPage": "testpages/select/select.html",
+    "outputLocalPage": "testpages/output/output.html",
+    "passwordLocalPage": "testpages/password/password.html",
+    "phoneLocalPage": "testpages/phone/phone.html",
+    "progressLocalPage": "testpages/progress/progress.html",
+    "radioLocalPage": "testpages/radio/radio.html",
+    "rangeLocalPage": "testpages/range/range.html",
+    "resetLocalPage": "testpages/reset/reset.html",
+    "searchLocalPage": "testpages/search/search.html",
+    "selectLocalPage": "testpages/select/select.html",
+    "spanLocalPage": "testpages/span/span.html",
+    "textAreaLocalPage": "testpages/textarea/textArea.html",
+    "textFieldLocalPage": "testpages/text/text.html",
+    "timeLocalPage": "testpages/time/time.html",
+    "urlLocalPage": "testpages/url/url.html",
+    "weekLocalPage": "testpages/week/week.html",
+    "tableLocalPage": "testpages/table/table.html",
+    "layoutPricingPage": "testpages/layout/pricing.html",
+    "gridLocalPage": "testpages/grid/grid.html"
   }
 }
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/anchor/anchor.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/anchor/anchor.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/anchor/anchor.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/anchor/anchor.html
new file mode 100644
index 00000000..75f07f91
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/anchor/anchor.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="anchor.css">
+</head>
+<body>
+    <label for="myAnchor">Click</label>
+    <a id="myAnchor" href="https://automatetheplanet.com" target="_self">Automate The Planet</a>
+
+    <br>
+    <br>
+    <label for="myAnchor1">Hover</label>
+    <a id="myAnchor1" href="automatetheplanet.com" onmouseover="this.style.color='red';">Automate The Planet</a>
+
+    <br>
+    <br>
+    <label for="myAnchor2">Focus</label>
+    <a id="myAnchor2" href="automatetheplanet.com" onfocus="this.style.color='blue';">Automate The Planet</a>
+
+    <br>
+    <br>
+    <label for="myAnchor4">Inner HTML</label>
+    <a id="myAnchor4" href="automatetheplanet.com"><button name="button">Click me</button></a>
+
+    <br>
+    <br>
+    <label for="myAnchor5">Rel</label>
+    <a id="myAnchor5" rel="canonical">Automate The Planet</a>
+
+    <br>
+    <br>
+    <label for="myAnchor6">No Text</label>
+    <a id="myAnchor6" rel="canonical"></a>
+
+
+    <script type="text/javascript" src="anchor.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/anchor/anchor.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/anchor/anchor.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/button/button.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/button/button.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/button/button.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/button/button.html
new file mode 100644
index 00000000..61853a1e
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/button/button.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="button.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="myButton">Providing default options Input Button</label>
+    <input type="button" id="myButton" name="start" value="Start">
+
+    <br>
+    <br>
+    <label for="myButton1">Test Hover Input Button</label>
+    <input type="button" id="myButton1" name="start" value="Start" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myButton2">Test Focus Input Button</label>
+    <input type="button" id="myButton2" name="start" value="Start" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myButton3">Test IsDisabled Input Button</label>
+    <input type="button" id="myButton3" name="start" value="Start" disabled>
+
+
+    <br>
+    <br>
+    <label for="myButton4">Providing default options Input Submit</label>
+    <input type="submit" id="myButton4" name="start" value="Start">
+
+    <br>
+    <br>
+    <label for="myButton5">Test Hover Input Submit</label>
+    <input type="submit" id="myButton5" name="start" value="Start" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myButton6">Test Focus Input Submit</label>
+    <input type="submit" id="myButton6" name="start" value="Start" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myButton7">Test IsDisabled Input Submit</label>
+    <input type="submit" id="myButton7" name="start" value="Start" disabled>
+
+    <br>
+    <br>
+    <label for="myButton8">Providing default options Button</label>
+    <button type="button" id="myButton8" name="start" value="Start">Start</button>
+
+    <br>
+    <br>
+    <label for="myButton9">Test Hover Input Submit</label>
+    <button type="button" id="myButton9" name="start" value="Start" onmouseover="this.style.color='red';">Start</button>
+
+    <br>
+    <br>
+    <label for="myButton10">Test Focus Input Submit</label>
+    <button type="button" id="myButton10" name="start" value="Start" onfocus="this.style.color='blue';">Start</button>
+
+    <br>
+    <br>
+    <label for="myButton11">Test IsDisabled Input Submit</label>
+    <button type="button" id="myButton11" name="start" value="Start" disabled>Start</button>
+
+
+
+    <script type="text/javascript" src="button.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/button/button.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/button/button.js
new file mode 100644
index 00000000..91b2d45b
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/button/button.js
@@ -0,0 +1,25 @@
+var buttons = document.querySelectorAll('input');
+for (var i = 0; i < buttons.length; i++) {
+    var self = buttons[i];
+
+    self.addEventListener('click', function (event) {
+        if (this.value === 'Start') {
+            this.value = 'Stop';
+        } else {
+            this.value = 'Start';
+        }
+    }, false);
+}
+
+var buttons1 = document.querySelectorAll('button');
+for (var i = 0; i < buttons1.length; i++) {
+    var self = buttons1[i];
+
+    self.addEventListener('click', function (event) {
+        if (this.innerHTML === 'Start') {
+            this.innerHTML = 'Stop';
+        } else {
+            this.innerHTML = 'Start';
+        }
+    }, false);
+}
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/checkbox/checkBox.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/checkbox/checkBox.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/checkbox/checkBox.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/checkbox/checkBox.html
new file mode 100644
index 00000000..e537ec44
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/checkbox/checkBox.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="checkBox.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="myCheckbox">Providing default options</label>
+    <input type="checkbox" id="myCheckbox" name="subscribe" value="newsletter" checked>
+
+    <br>
+    <br>
+    <label for="myCheckbox1">Test Hover</label>
+    <input type="checkbox" id="myCheckbox1" checked onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myCheckbox2">Test Focus</label>
+    <input type="checkbox" id="myCheckbox2" name="subscribe" value="newsletter" checked onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myCheckbox3">Test IsDisabled</label>
+    <input type="checkbox" id="myCheckbox3" name="subscribe" value="newsletter" disabled>
+
+    <script type="text/javascript" src="checkBox.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/checkbox/checkBox.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/checkbox/checkBox.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/checkbox/checkBox.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/color/color.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/color/color.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/color/color.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/color/color.html
new file mode 100644
index 00000000..4356f368
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/color/color.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="color.css">
+</head>
+<body>
+    <label for="myColor">Default</label>
+    <input id="myColor" name="myColor" type="color" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myColor2">Default Value</label>
+    <input id="myColor2" name="myColor2" type="color" value="#f00030">
+
+    <br>
+    <br>
+    <label for="myColor3">Autocomplete= ON</label>
+    <input id="myColor3" name="myColor3" type="color" value="#ff0000" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myColor4">Autocomplete= OFF</label>
+    <input id="myColor4" name="myColor4" type="color" value="#ff0000" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myColor6">Required Set</label>
+    <input id="myColor6" name="myColor6" type="color" value="#ff0000" required>
+
+    <br>
+    <br>
+    <label for="myColor7">Test Hover</label>
+    <input id="myColor7" name="myColor7" type="color" value="#ff0000" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myColor8">Test Focus</label>
+    <input id="myColor8" name="myColor8" type="color" value="#ff0000" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myColor9">Disabled Set</label>
+    <input id="myColor9" name="myColor9" type="color" value="#ff0000" disabled>
+
+    <br>
+    <br>
+    <label for="myColor10">List</label>
+    <input id="myColor10" name="myColor10" type="color" value="#ff0000" list="tickmarks">
+
+    <script type="text/javascript" src="color.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/color/color.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/color/color.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/color/color.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/date/date.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/date/date.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/date/date.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/date/date.html
new file mode 100644
index 00000000..8da304e1
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/date/date.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="date.css">
+</head>
+<body>
+    <label for="myDate">Default</label>
+    <input id="myDate" name="myDate" type="date" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myDate1">Test Max Min Step</label>
+    <input id="myDate1" name="myDate1" type="date" step="2" min="1900-01-01" max="2032-12-01">
+
+    <br>
+    <br>
+    <label for="myDate2">Default Value</label>
+    <input id="myDate2" name="myDate2" type="date" step="2" min="1900-01-01" max="2032-12-01" value="2017-08-07">
+
+    <br>
+    <br>
+    <label for="myDate3">Autocomplete= ON</label>
+    <input id="myDate3" name="myDate3" type="date" step="2" min="1900-01-01" max="2032-12-01" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myDate4">Autocomplete= OFF</label>
+    <input id="myDate4" name="myDate4" type="date" step="2" min="1900-01-01" max="2032-12-01" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myDate5">Readonly Set</label>
+    <input id="myDate5" name="myDate5" type="date" step="2" min="1900-01-01" max="2032-12-01" readonly>
+
+    <br>
+    <br>
+    <label for="myDate6">Required Set</label>
+    <input id="myDate6" name="myDate6" type="date" step="2" min="1900-01-01" max="2032-12-01" required>
+
+    <br>
+    <br>
+    <label for="myDate7">Test Hover</label>
+    <input id="myDate7" name="myDate7" type="date" step="2" min="1900-01-01" max="2032-12-01" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myDate8">Test Focus</label>
+    <input id="myDate8" name="myDate8" type="date" step="2" min="1900-01-01" max="2032-12-01" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myDate9">Disabled Set</label>
+    <input id="myDate9" name="myDate9" type="date" step="2" min="1900-01-01" max="2032-12-01" disabled>
+
+    <script type="text/javascript" src="date.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/date/date.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/date/date.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/date/date.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.html
new file mode 100644
index 00000000..33453388
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="dateTimeLocal.css">
+</head>
+<body>
+    <label for="myTime">Default</label>
+    <input id="myTime" name="myTime" type="datetime-local" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myTime1">Test Max Min Step</label>
+    <input id="myTime1" name="myTime1" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30">
+
+    <br>
+    <br>
+    <label for="myTime2">Default Value</label>
+    <input id="myTime2" name="myTime2" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" value="2017-06-01T08:30">
+
+    <br>
+    <br>
+    <label for="myTime3">Autocomplete= ON</label>
+    <input id="myTime3" name="myTime3" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myTime4">Autocomplete= OFF</label>
+    <input id="myTime4" name="myTime4" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myTime5">Readonly Set</label>
+    <input id="myTime5" name="myTime5" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" readonly>
+
+    <br>
+    <br>
+    <label for="myTime6">Required Set</label>
+    <input id="myTime6" name="myTime6" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" required>
+
+    <br>
+    <br>
+    <label for="myTime7">Test Hover</label>
+    <input id="myTime7" name="myTime7" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myTime8">Test Focus</label>
+    <input id="myTime8" name="myTime8" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:30" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myTime9">Disabled Set</label>
+    <input id="myTime9" name="myTime9" type="datetime-local" step="10" min="2017-06-01T08:30" max="2017-06-30T16:302017-06-01T08:30" disabled>
+
+    <script type="text/javascript" src="dateTimeLocal.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/datetimelocal/dateTimeLocal.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/div/div.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/div/div.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/div/div.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/div/div.html
new file mode 100644
index 00000000..06d1abcc
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/div/div.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="div.css">
+</head>
+<body>
+    <label for="myDiv">Hover</label>
+    <div id="myDiv" onmouseover="this.style.color='red';">Bellatrix</div>
+
+    <br>
+    <br>
+    <label for="myDiv1">InnerText</label>
+    <div id="myDiv1" onmouseover="this.style.color='red';">Automate The Planet</div>
+
+    <br>
+    <br>
+    <label for="myDiv2">InnerHtml</label>
+    <div id="myDiv2" onmouseover="this.style.color='red';"><button name="button">Click me</button></div>
+
+    <br>
+    <br>
+    <label for="myDiv3">No Content</label>
+    <div id="myDiv3" onmouseover="this.style.color='red';"></div>
+
+
+    <script type="text/javascript" src="div.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/div/div.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/div/div.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/email/email.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/email/email.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/email/email.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/email/email.html
new file mode 100644
index 00000000..ddb63f08
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/email/email.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="email.css">
+</head>
+<body>
+    <label for="myEmail">Placeholders</label>
+    <input id="myEmail" name="myEmail" type="email" placeholder="your email term goes here" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myEmail1">Physical input element size</label>
+    <input id="myEmail1" name="myEmail" type="email" size="30">
+
+    <br>
+    <br>
+    <label for="myEmail2">Element value length</label>
+    <input id="myEmail2" name="myEmail" type="email" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myEmail3">Providing default options</label>
+    <input id="myEmail3" name="myEmail" type="email" value="aangelov@bellatrix.solutions">
+
+    <br>
+    <br>
+    <label for="myEmail4">Autocomplete= ON</label>
+    <input id="myEmail4" name="myEmail" type="email" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myEmail5">Autocomplete= OFF</label>
+    <input id="myEmail5" name="myEmail" type="email" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myEmail6">Readonly Set</label>
+    <input id="myEmail6" name="myEmail" type="email" readonly>
+
+    <br>
+    <br>
+    <label for="myEmail7">Required Set</label>
+    <input id="myEmail7" name="myEmail" type="email" required>
+
+    <br>
+    <br>
+    <label for="myEmail8">Test Hover</label>
+    <input id="myEmail8" name="myEmail" type="email" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myEmail9">Test Focus</label>
+    <input id="myEmail9" name="myEmail" type="email" onfocus="this.style.color='blue';">
+
+    <div id="myEmail10Wrapper">
+        <br>
+        <br>
+        <label for="myEmail10">Test Disabled</label>
+        <input id="myEmail10" name="myEmail" type="email" disabled>
+    </div>
+
+    <script type="text/javascript" src="email.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/email/email.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/email/email.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/email/email.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/grid/Grid.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/grid/Grid.html
new file mode 100644
index 00000000..7ec524ef
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/grid/Grid.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Grid Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <style>
+        .grid th {
+            text-align: center;
+            vertical-align: central;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <h2>Grid Example</h2>
+        <h4>In the case of data displayed in a grid, we not onlly have to verify data in cells, but to perform actions in specific cells that contain buttons, inputs or other types of controls.</h4>
+        <p>The .table-hover class enables a hover state on table rows:</p>
+        
+        <div class="grid" id="sampleGrid">
+            <table class="table table-hover table-bordered">
+                <thead>
+                    <tr>
+                        <th scope="col" rowspan="2">Order</th>
+                        <th scope="col" rowspan="2">Firstname</th>
+                        <th scope="col" rowspan="2">Lastname</th>
+                        <th scope="col" colspan="2">Email</th>
+                        <th scope="col" rowspan="2">Actions</th>
+                    </tr>
+                    <tr>
+                        <th scope="col">Personal</th>
+                        <th scope="col">Business</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr scope="row">
+                        <td><input type="text" value="0"/></td>
+                        <td><b>John</b></td>
+                        <td>Doe</td>
+                        <td>john.doe@gmail.com</td>
+                        <td>jdoe@corp.com</td>
+                        <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
+                    </tr>
+                    <tr scope="row">
+                        <td><input type="text" value="1" /></td>
+                        <td>Mary</td>
+                        <td>Moe</td>
+                        <td>mary@hotmail.com</td>
+                        <td></td>
+                        <td><input type="button" value="Delete" onclick="deleteRow(this)" /></td>
+                    </tr>
+                    <tr scope="row">
+                        <td><input type="text" value="2" /></td>
+                        <td>July</td>
+                        <td>Dooley</td>
+                        <td></td>
+                        <td>july@mscorp.com</td>
+                        <td><input type="button" value="Delete" onclick="deleteRow(this)" /></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <script>
+        function deleteRow(e) {
+            debugger;
+            e.parentNode.parentNode.remove();
+        }
+    </script>
+</body>
+</html>
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/heading/heading.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/heading/heading.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/heading/heading.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/heading/heading.html
new file mode 100644
index 00000000..71e9a11e
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/heading/heading.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="heading.css">
+</head>
+<body>
+    <label for="myHeading">Hover</label>
+    <h1 id="myHeading" onmouseover="this.style.color='red';">Automate The Planet</h1>
+
+    <br>
+    <br>
+    <label for="myHeading2">Focus</label>
+    <h1 id="myHeading2" onfocus="this.style.color='blue';">Automate The Planet</h1>
+
+    <br>
+    <br>
+    <label for="myHeading3">Inner HTML</label>
+    <h1 id="myHeading3"><button name="button">Click me</button></h1>
+
+    <br>
+    <br>
+    <label for="myHeading4">No Text</label>
+    <h1 id="myHeading4"></h1>
+
+    <script type="text/javascript" src="heading.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/heading/heading.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/heading/heading.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/image/image.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/image/image.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/image/image.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/image/image.html
new file mode 100644
index 00000000..f1c64411
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/image/image.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="image.css">
+</head>
+<body>
+    <label for="myImage">Alternative Text</label>
+    <img id="myImage" src="https://bellatrix.solutions/assets/uploads/2017/09/logo.png" alt="MDN">
+
+    <br>
+    <br>
+    <label for="myImage1">SrcSet List</label>
+    <img id="myImage1" src="https://bellatrix.solutions/assets/uploads/2017/09/logo.png" alt="MDN" srcset="mdn-logo-HD.png 2x">
+
+    <br>
+    <br>
+    <label for="myImage2">Sizes List</label>
+    <img id="myImage2" src="clock-demo-thumb-200.png" alt="Clock" srcset="clock-demo-thumb-200.png 200w,clock-demo-thumb-400.png 400w" sizes="(min-width: 600px) 200px, 50vw">
+
+    <br>
+    <br>
+    <label for="myImage3">Width Height LongDesc</label>
+    <img id="myImage3" src="https://bellatrix.solutions/assets/uploads/2017/09/logo.png" alt="MDN" longdesc="Bellatrix is so cool like a rocket." height="20" width="200">
+
+    <br>
+    <br>
+    <label for="myImage4">Hover</label>
+    <img id="myImage4" src="https://bellatrix.solutions/assets/uploads/2017/09/logo.png" onmouseover="this.className= 'hovered';">
+    <script type="text/javascript" src="image.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/image/image.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/image/image.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/label/label.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/label/label.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/label/label.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/label/label.html
new file mode 100644
index 00000000..14b5492f
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/label/label.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="label.css">
+</head>
+<body>
+    <label for="myLabel" id="myLabel" onmouseover="this.style.color='red';">Hover</label>
+
+    <br>
+    <br>
+    <label id="myLabel1"><button name="button">Click me</button></label>
+
+    <br>
+    <br>
+    <label id="myLabel2"></label>
+
+    <script type="text/javascript" src="label.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/label/laberl.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/label/laberl.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/bootstrap-solid.svg b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/bootstrap-solid.svg
new file mode 100644
index 00000000..b624a024
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/bootstrap-solid.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
+  <g sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+    <path fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
+    <path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
+  </g>
+</svg>
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/bootstrap.min.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/bootstrap.min.css
new file mode 100644
index 00000000..6561b6f4
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/bootstrap.min.css
@@ -0,0 +1,7 @@
+/*!
+ * Bootstrap v4.0.0 (https://getbootstrap.com)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote-footer{display:block;font-size:80%;color:#6c757d}.blockquote-footer::before{content:"\2014 \00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#6c757d}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}code{font-size:87.5%;color:#e83e8c;word-break:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#212529}pre code{font-size:inherit;color:inherit;word-break:normal}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-sm-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-sm-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-sm-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-sm-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-sm-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-sm-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-sm-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-sm-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-sm-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-sm-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-sm-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-sm-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-sm-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-sm-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-sm-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-md-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-md-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-md-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-md-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-md-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-md-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-md-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-md-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-md-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-md-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-md-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-md-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-md-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-md-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-md-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-lg-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-lg-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-lg-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-lg-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-lg-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-lg-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-lg-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-lg-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-lg-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-lg-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-lg-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-lg-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-lg-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-lg-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-lg-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-xl-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.order-xl-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.order-xl-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-xl-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-xl-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-xl-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-xl-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-xl-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-xl-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-xl-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-xl-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-xl-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-xl-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-xl-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-xl-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}.table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table tbody+tbody{border-top:2px solid #dee2e6}.table .table{background-color:#fff}.table-sm td,.table-sm th{padding:.3rem}.table-bordered{border:1px solid #dee2e6}.table-bordered td,.table-bordered th{border:1px solid #dee2e6}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#b8daff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#d6d8db}.table-hover .table-secondary:hover{background-color:#c8cbcf}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#c8cbcf}.table-success,.table-success>td,.table-success>th{background-color:#c3e6cb}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>td,.table-info>th{background-color:#bee5eb}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>td,.table-warning>th{background-color:#ffeeba}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>td,.table-danger>th{background-color:#f5c6cb}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>td,.table-light>th{background-color:#fdfdfe}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>td,.table-dark>th{background-color:#c6c8ca}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.table .thead-dark th{color:#fff;background-color:#212529;border-color:#32383e}.table .thead-light th{color:#495057;background-color:#e9ecef;border-color:#dee2e6}.table-dark{color:#fff;background-color:#212529}.table-dark td,.table-dark th,.table-dark thead th{border-color:#32383e}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{background-color:rgba(255,255,255,.075)}@media (max-width:575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-sm>.table-bordered{border:0}}@media (max-width:767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-md>.table-bordered{border:0}}@media (max-width:991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-lg>.table-bordered{border:0}}@media (max-width:1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control:-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}select.form-control:not([size]):not([multiple]){height:calc(2.25rem + 2px)}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block;width:100%}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem;line-height:1.5}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem;line-height:1.5}.form-control-plaintext{display:block;width:100%;padding-top:.375rem;padding-bottom:.375rem;margin-bottom:0;line-height:1.5;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm,.input-group-lg>.form-control-plaintext.form-control,.input-group-lg>.input-group-append>.form-control-plaintext.btn,.input-group-lg>.input-group-append>.form-control-plaintext.input-group-text,.input-group-lg>.input-group-prepend>.form-control-plaintext.btn,.input-group-lg>.input-group-prepend>.form-control-plaintext.input-group-text,.input-group-sm>.form-control-plaintext.form-control,.input-group-sm>.input-group-append>.form-control-plaintext.btn,.input-group-sm>.input-group-append>.form-control-plaintext.input-group-text,.input-group-sm>.input-group-prepend>.form-control-plaintext.btn,.input-group-sm>.input-group-prepend>.form-control-plaintext.input-group-text{padding-right:0;padding-left:0}.form-control-sm,.input-group-sm>.form-control,.input-group-sm>.input-group-append>.btn,.input-group-sm>.input-group-append>.input-group-text,.input-group-sm>.input-group-prepend>.btn,.input-group-sm>.input-group-prepend>.input-group-text{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.input-group-sm>.input-group-append>select.btn:not([size]):not([multiple]),.input-group-sm>.input-group-append>select.input-group-text:not([size]):not([multiple]),.input-group-sm>.input-group-prepend>select.btn:not([size]):not([multiple]),.input-group-sm>.input-group-prepend>select.input-group-text:not([size]):not([multiple]),.input-group-sm>select.form-control:not([size]):not([multiple]),select.form-control-sm:not([size]):not([multiple]){height:calc(1.8125rem + 2px)}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.input-group-lg>.input-group-append>select.btn:not([size]):not([multiple]),.input-group-lg>.input-group-append>select.input-group-text:not([size]):not([multiple]),.input-group-lg>.input-group-prepend>select.btn:not([size]):not([multiple]),.input-group-lg>.input-group-prepend>select.input-group-text:not([size]):not([multiple]),.input-group-lg>select.form-control:not([size]):not([multiple]),select.form-control-lg:not([size]):not([multiple]){height:calc(2.875rem + 2px)}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem}.form-row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.form-check{position:relative;display:block;padding-left:1.25rem}.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}.form-check-input:disabled~.form-check-label{color:#6c757d}.form-check-label{margin-bottom:0}.form-check-inline{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:0;margin-right:.75rem}.form-check-inline .form-check-input{position:static;margin-top:0;margin-right:.3125rem;margin-left:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#28a745}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.5rem;margin-top:.1rem;font-size:.875rem;line-height:1;color:#fff;background-color:rgba(40,167,69,.8);border-radius:.2rem}.custom-select.is-valid,.form-control.is-valid,.was-validated .custom-select:valid,.was-validated .form-control:valid{border-color:#28a745}.custom-select.is-valid:focus,.form-control.is-valid:focus,.was-validated .custom-select:valid:focus,.was-validated .form-control:valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-select.is-valid~.valid-feedback,.custom-select.is-valid~.valid-tooltip,.form-control.is-valid~.valid-feedback,.form-control.is-valid~.valid-tooltip,.was-validated .custom-select:valid~.valid-feedback,.was-validated .custom-select:valid~.valid-tooltip,.was-validated .form-control:valid~.valid-feedback,.was-validated .form-control:valid~.valid-tooltip{display:block}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#28a745}.form-check-input.is-valid~.valid-feedback,.form-check-input.is-valid~.valid-tooltip,.was-validated .form-check-input:valid~.valid-feedback,.was-validated .form-check-input:valid~.valid-tooltip{display:block}.custom-control-input.is-valid~.custom-control-label,.was-validated .custom-control-input:valid~.custom-control-label{color:#28a745}.custom-control-input.is-valid~.custom-control-label::before,.was-validated .custom-control-input:valid~.custom-control-label::before{background-color:#71dd8a}.custom-control-input.is-valid~.valid-feedback,.custom-control-input.is-valid~.valid-tooltip,.was-validated .custom-control-input:valid~.valid-feedback,.was-validated .custom-control-input:valid~.valid-tooltip{display:block}.custom-control-input.is-valid:checked~.custom-control-label::before,.was-validated .custom-control-input:valid:checked~.custom-control-label::before{background-color:#34ce57}.custom-control-input.is-valid:focus~.custom-control-label::before,.was-validated .custom-control-input:valid:focus~.custom-control-label::before{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(40,167,69,.25)}.custom-file-input.is-valid~.custom-file-label,.was-validated .custom-file-input:valid~.custom-file-label{border-color:#28a745}.custom-file-input.is-valid~.custom-file-label::before,.was-validated .custom-file-input:valid~.custom-file-label::before{border-color:inherit}.custom-file-input.is-valid~.valid-feedback,.custom-file-input.is-valid~.valid-tooltip,.was-validated .custom-file-input:valid~.valid-feedback,.was-validated .custom-file-input:valid~.valid-tooltip{display:block}.custom-file-input.is-valid:focus~.custom-file-label,.was-validated .custom-file-input:valid:focus~.custom-file-label{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.5rem;margin-top:.1rem;font-size:.875rem;line-height:1;color:#fff;background-color:rgba(220,53,69,.8);border-radius:.2rem}.custom-select.is-invalid,.form-control.is-invalid,.was-validated .custom-select:invalid,.was-validated .form-control:invalid{border-color:#dc3545}.custom-select.is-invalid:focus,.form-control.is-invalid:focus,.was-validated .custom-select:invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.custom-select.is-invalid~.invalid-feedback,.custom-select.is-invalid~.invalid-tooltip,.form-control.is-invalid~.invalid-feedback,.form-control.is-invalid~.invalid-tooltip,.was-validated .custom-select:invalid~.invalid-feedback,.was-validated .custom-select:invalid~.invalid-tooltip,.was-validated .form-control:invalid~.invalid-feedback,.was-validated .form-control:invalid~.invalid-tooltip{display:block}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545}.form-check-input.is-invalid~.invalid-feedback,.form-check-input.is-invalid~.invalid-tooltip,.was-validated .form-check-input:invalid~.invalid-feedback,.was-validated .form-check-input:invalid~.invalid-tooltip{display:block}.custom-control-input.is-invalid~.custom-control-label,.was-validated .custom-control-input:invalid~.custom-control-label{color:#dc3545}.custom-control-input.is-invalid~.custom-control-label::before,.was-validated .custom-control-input:invalid~.custom-control-label::before{background-color:#efa2a9}.custom-control-input.is-invalid~.invalid-feedback,.custom-control-input.is-invalid~.invalid-tooltip,.was-validated .custom-control-input:invalid~.invalid-feedback,.was-validated .custom-control-input:invalid~.invalid-tooltip{display:block}.custom-control-input.is-invalid:checked~.custom-control-label::before,.was-validated .custom-control-input:invalid:checked~.custom-control-label::before{background-color:#e4606d}.custom-control-input.is-invalid:focus~.custom-control-label::before,.was-validated .custom-control-input:invalid:focus~.custom-control-label::before{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(220,53,69,.25)}.custom-file-input.is-invalid~.custom-file-label,.was-validated .custom-file-input:invalid~.custom-file-label{border-color:#dc3545}.custom-file-input.is-invalid~.custom-file-label::before,.was-validated .custom-file-input:invalid~.custom-file-label::before{border-color:inherit}.custom-file-input.is-invalid~.invalid-feedback,.custom-file-input.is-invalid~.invalid-tooltip,.was-validated .custom-file-input:invalid~.invalid-feedback,.was-validated .custom-file-input:invalid~.invalid-tooltip{display:block}.custom-file-input.is-invalid:focus~.custom-file-label,.was-validated .custom-file-input:invalid:focus~.custom-file-label{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-inline{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.form-inline .form-check{width:100%}@media (min-width:576px){.form-inline label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}.form-inline .form-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:0}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-plaintext{display:inline-block}.form-inline .input-group{width:auto}.form-inline .form-check{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-left:0}.form-inline .form-check-input{position:relative;margin-top:0;margin-right:.25rem;margin-left:0}.form-inline .custom-control{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.form-inline .custom-control-label{margin-bottom:0}}.btn{display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn:focus,.btn:hover{text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}.btn:not(:disabled):not(.disabled).active,.btn:not(:disabled):not(.disabled):active{background-image:none}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5a6268;border-color:#545b62}.btn-secondary.focus,.btn-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#545b62;border-color:#4e555b}.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}.btn-success.focus,.btn-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#1e7e34;border-color:#1c7430}.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info.focus,.btn-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-warning{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#212529;background-color:#e0a800;border-color:#d39e00}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle{color:#212529;background-color:#d39e00;border-color:#c69500}.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#bd2130;border-color:#b21f2d}.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-light{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#212529;background-color:#e2e6ea;border-color:#dae0e5}.btn-light.focus,.btn-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-light.disabled,.btn-light:disabled{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark.focus,.btn-dark:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1d2124;border-color:#171a1d}.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-primary{color:#007bff;background-color:transparent;background-image:none;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-secondary{color:#6c757d;background-color:transparent;background-image:none;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-success{color:#28a745;background-color:transparent;background-image:none;border-color:#28a745}.btn-outline-success:hover{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#28a745;background-color:transparent}.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-info{color:#17a2b8;background-color:transparent;background-image:none;border-color:#17a2b8}.btn-outline-info:hover{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#17a2b8;background-color:transparent}.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-warning{color:#ffc107;background-color:transparent;background-image:none;border-color:#ffc107}.btn-outline-warning:hover{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-danger{color:#dc3545;background-color:transparent;background-image:none;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-light{color:#f8f9fa;background-color:transparent;background-image:none;border-color:#f8f9fa}.btn-outline-light:hover{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-dark{color:#343a40;background-color:transparent;background-image:none;border-color:#343a40}.btn-outline-dark:hover{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#343a40;background-color:transparent}.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-link{font-weight:400;color:#007bff;background-color:transparent}.btn-link:hover{color:#0056b3;text-decoration:underline;background-color:transparent;border-color:transparent}.btn-link.focus,.btn-link:focus{text-decoration:underline;border-color:transparent;box-shadow:none}.btn-link.disabled,.btn-link:disabled{color:#6c757d}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;transition:opacity .15s linear}.fade.show{opacity:1}.collapse{display:none}.collapse.show{display:block}tr.collapse.show{display:table-row}tbody.collapse.show{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}.dropdown,.dropup{position:relative}.dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropup .dropdown-menu{margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-menu{margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:""}.dropleft .dropdown-toggle::after{display:none}.dropleft .dropdown-toggle::before{display:inline-block;width:0;height:0;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty::after{margin-left:0}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#6c757d;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.btn-group,.btn-group-vertical{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.btn-group-vertical>.btn:hover,.btn-group>.btn:hover{z-index:1}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:1}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group,.btn-group-vertical .btn+.btn,.btn-group-vertical .btn+.btn-group,.btn-group-vertical .btn-group+.btn,.btn-group-vertical .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after{margin-left:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btn-group-vertical .btn,.btn-group-vertical .btn-group{width:100%}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%}.input-group>.custom-file,.input-group>.custom-select,.input-group>.form-control{position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}.input-group>.custom-file:focus,.input-group>.custom-select:focus,.input-group>.form-control:focus{z-index:3}.input-group>.custom-file+.custom-file,.input-group>.custom-file+.custom-select,.input-group>.custom-file+.form-control,.input-group>.custom-select+.custom-file,.input-group>.custom-select+.custom-select,.input-group>.custom-select+.form-control,.input-group>.form-control+.custom-file,.input-group>.form-control+.custom-select,.input-group>.form-control+.form-control{margin-left:-1px}.input-group>.custom-select:not(:last-child),.input-group>.form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-select:not(:first-child),.input-group>.form-control:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.custom-file{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.input-group>.custom-file:not(:last-child) .custom-file-label,.input-group>.custom-file:not(:last-child) .custom-file-label::before{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-file:not(:first-child) .custom-file-label,.input-group>.custom-file:not(:first-child) .custom-file-label::before{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-append,.input-group-prepend{display:-webkit-box;display:-ms-flexbox;display:flex}.input-group-append .btn,.input-group-prepend .btn{position:relative;z-index:2}.input-group-append .btn+.btn,.input-group-append .btn+.input-group-text,.input-group-append .input-group-text+.btn,.input-group-append .input-group-text+.input-group-text,.input-group-prepend .btn+.btn,.input-group-prepend .btn+.input-group-text,.input-group-prepend .input-group-text+.btn,.input-group-prepend .input-group-text+.input-group-text{margin-left:-1px}.input-group-prepend{margin-right:-1px}.input-group-append{margin-left:-1px}.input-group-text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.25rem}.input-group-text input[type=checkbox],.input-group-text input[type=radio]{margin-top:0}.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),.input-group>.input-group-append:not(:last-child)>.btn,.input-group>.input-group-append:not(:last-child)>.input-group-text,.input-group>.input-group-prepend>.btn,.input-group>.input-group-prepend>.input-group-text{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text{border-top-left-radius:0;border-bottom-left-radius:0}.custom-control{position:relative;display:block;min-height:1.5rem;padding-left:1.5rem}.custom-control-inline{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-right:1rem}.custom-control-input{position:absolute;z-index:-1;opacity:0}.custom-control-input:checked~.custom-control-label::before{color:#fff;background-color:#007bff}.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-control-input:active~.custom-control-label::before{color:#fff;background-color:#b3d7ff}.custom-control-input:disabled~.custom-control-label{color:#6c757d}.custom-control-input:disabled~.custom-control-label::before{background-color:#e9ecef}.custom-control-label{margin-bottom:0}.custom-control-label::before{position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;pointer-events:none;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#dee2e6}.custom-control-label::after{position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;content:"";background-repeat:no-repeat;background-position:center center;background-size:50% 50%}.custom-checkbox .custom-control-label::before{border-radius:.25rem}.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color:#007bff}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E")}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before{background-color:#007bff}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E")}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-radio .custom-control-label::before{border-radius:50%}.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color:#007bff}.custom-radio .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")}.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-select{display:inline-block;width:100%;height:calc(2.25rem + 2px);padding:.375rem 1.75rem .375rem .75rem;line-height:1.5;color:#495057;vertical-align:middle;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;background-size:8px 10px;border:1px solid #ced4da;border-radius:.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(128,189,255,.5)}.custom-select:focus::-ms-value{color:#495057;background-color:#fff}.custom-select[multiple],.custom-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.custom-select:disabled{color:#6c757d;background-color:#e9ecef}.custom-select::-ms-expand{opacity:0}.custom-select-sm{height:calc(1.8125rem + 2px);padding-top:.375rem;padding-bottom:.375rem;font-size:75%}.custom-select-lg{height:calc(2.875rem + 2px);padding-top:.375rem;padding-bottom:.375rem;font-size:125%}.custom-file{position:relative;display:inline-block;width:100%;height:calc(2.25rem + 2px);margin-bottom:0}.custom-file-input{position:relative;z-index:2;width:100%;height:calc(2.25rem + 2px);margin:0;opacity:0}.custom-file-input:focus~.custom-file-control{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-file-input:focus~.custom-file-control::before{border-color:#80bdff}.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"}.custom-file-label{position:absolute;top:0;right:0;left:0;z-index:1;height:calc(2.25rem + 2px);padding:.375rem .75rem;line-height:1.5;color:#495057;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem}.custom-file-label::after{position:absolute;top:0;right:0;bottom:0;z-index:3;display:block;height:calc(calc(2.25rem + 2px) - 1px * 2);padding:.375rem .75rem;line-height:1.5;color:#495057;content:"Browse";background-color:#e9ecef;border-left:1px solid #ced4da;border-radius:0 .25rem .25rem 0}.nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:focus,.nav-link:hover{text-decoration:none}.nav-link.disabled{color:#6c757d}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-item{margin-bottom:-1px}.nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #dee2e6}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#007bff}.nav-fill .nav-item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;text-align:center}.nav-justified .nav-item{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}.navbar>.container,.navbar>.container-fluid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static;float:none}.navbar-text{display:inline-block;padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}.navbar-toggler:not(:disabled):not(.disabled){cursor:pointer}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:no-repeat center center;background-size:100% 100%}@media (max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .dropup .dropdown-menu{top:auto;bottom:100%}}@media (max-width:767.98px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:768px){.navbar-expand-md{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-md .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-md .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .dropup .dropdown-menu{top:auto;bottom:100%}}@media (max-width:991.98px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:992px){.navbar-expand-lg{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-lg .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .dropup .dropdown-menu{top:auto;bottom:100%}}@media (max-width:1199.98px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1200px){.navbar-expand-xl{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-xl .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-xl .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .dropup .dropdown-menu{top:auto;bottom:100%}}.navbar-expand{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}.navbar-expand .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand>.container,.navbar-expand>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .dropup .dropdown-menu{top:auto;bottom:100%}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-light .navbar-text a{color:rgba(0,0,0,.9)}.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-dark .navbar-text{color:rgba(255,255,255,.5)}.navbar-dark .navbar-text a{color:#fff}.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-header+.list-group .list-group-item:first-child{border-top:0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img{width:100%;border-radius:calc(.25rem - 1px)}.card-img-top{width:100%;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img-bottom{width:100%;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-deck{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.card-deck .card{margin-bottom:15px}@media (min-width:576px){.card-deck{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:15px;margin-bottom:0;margin-left:15px}}.card-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.card-group>.card{margin-bottom:15px}@media (min-width:576px){.card-group{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.card-group>.card{-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:first-child .card-header,.card-group>.card:first-child .card-img-top{border-top-right-radius:0}.card-group>.card:first-child .card-footer,.card-group>.card:first-child .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:last-child .card-header,.card-group>.card:last-child .card-img-top{border-top-left-radius:0}.card-group>.card:last-child .card-footer,.card-group>.card:last-child .card-img-bottom{border-bottom-left-radius:0}.card-group>.card:only-child{border-radius:.25rem}.card-group>.card:only-child .card-header,.card-group>.card:only-child .card-img-top{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card-group>.card:only-child .card-footer,.card-group>.card:only-child .card-img-bottom{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-group>.card:not(:first-child):not(:last-child):not(:only-child){border-radius:0}.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-footer,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-header,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top{border-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}.card-columns .card{display:inline-block;width:100%}}.breadcrumb{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;padding-left:.5rem;color:#6c757d;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}.breadcrumb-item.active{color:#6c757d}.pagination{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.page-link:hover{color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:2;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.page-link:not(:disabled):not(.disabled){cursor:pointer}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:1;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-primary{color:#fff;background-color:#007bff}.badge-primary[href]:focus,.badge-primary[href]:hover{color:#fff;text-decoration:none;background-color:#0062cc}.badge-secondary{color:#fff;background-color:#6c757d}.badge-secondary[href]:focus,.badge-secondary[href]:hover{color:#fff;text-decoration:none;background-color:#545b62}.badge-success{color:#fff;background-color:#28a745}.badge-success[href]:focus,.badge-success[href]:hover{color:#fff;text-decoration:none;background-color:#1e7e34}.badge-info{color:#fff;background-color:#17a2b8}.badge-info[href]:focus,.badge-info[href]:hover{color:#fff;text-decoration:none;background-color:#117a8b}.badge-warning{color:#212529;background-color:#ffc107}.badge-warning[href]:focus,.badge-warning[href]:hover{color:#212529;text-decoration:none;background-color:#d39e00}.badge-danger{color:#fff;background-color:#dc3545}.badge-danger[href]:focus,.badge-danger[href]:hover{color:#fff;text-decoration:none;background-color:#bd2130}.badge-light{color:#212529;background-color:#f8f9fa}.badge-light[href]:focus,.badge-light[href]:hover{color:#212529;text-decoration:none;background-color:#dae0e5}.badge-dark{color:#fff;background-color:#343a40}.badge-dark[href]:focus,.badge-dark[href]:hover{color:#fff;text-decoration:none;background-color:#1d2124}.jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:#e9ecef;border-radius:.3rem}@media (min-width:576px){.jumbotron{padding:4rem 2rem}}.jumbotron-fluid{padding-right:0;padding-left:0;border-radius:0}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}.alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:-webkit-box;display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.progress-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;text-align:center;background-color:#007bff;transition:width .6s ease}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}.media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.media-body{-webkit-box-flex:1;-ms-flex:1;flex:1}.list-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.list-group-item:focus,.list-group-item:hover{z-index:1;text-decoration:none}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.list-group-flush .list-group-item{border-right:0;border-left:0;border-radius:0}.list-group-flush:first-child .list-group-item:first-child{border-top:0}.list-group-flush:last-child .list-group-item:last-child{border-bottom:0}.list-group-item-primary{color:#004085;background-color:#b8daff}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#004085;background-color:#9fcdff}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#004085;border-color:#004085}.list-group-item-secondary{color:#383d41;background-color:#d6d8db}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#383d41;background-color:#c8cbcf}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#383d41;border-color:#383d41}.list-group-item-success{color:#155724;background-color:#c3e6cb}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#155724;background-color:#b1dfbb}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#155724;border-color:#155724}.list-group-item-info{color:#0c5460;background-color:#bee5eb}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#0c5460;background-color:#abdde5}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#0c5460;border-color:#0c5460}.list-group-item-warning{color:#856404;background-color:#ffeeba}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#856404;background-color:#ffe8a1}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#856404;border-color:#856404}.list-group-item-danger{color:#721c24;background-color:#f5c6cb}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#721c24;background-color:#f1b0b7}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#721c24;border-color:#721c24}.list-group-item-light{color:#818182;background-color:#fdfdfe}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#818182;background-color:#ececf6}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#818182;border-color:#818182}.list-group-item-dark{color:#1b1e21;background-color:#c6c8ca}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#1b1e21;background-color:#b9bbbe}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#1b1e21;border-color:#1b1e21}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:focus,.close:hover{color:#000;text-decoration:none;opacity:.75}.close:not(:disabled):not(.disabled){cursor:pointer}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.show .modal-dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}.modal-dialog-centered{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:calc(100% - (.5rem * 2))}.modal-content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1rem;border-bottom:1px solid #e9ecef;border-top-left-radius:.3rem;border-top-right-radius:.3rem}.modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.modal-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #e9ecef}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-centered{min-height:calc(100% - (1.75rem * 2))}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg{max-width:800px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow{top:0}.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{padding:0 .4rem}.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .arrow::after,.popover .arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top] .arrow,.bs-popover-top .arrow{bottom:calc((.5rem + 1px) * -1)}.bs-popover-auto[x-placement^=top] .arrow::after,.bs-popover-auto[x-placement^=top] .arrow::before,.bs-popover-top .arrow::after,.bs-popover-top .arrow::before{border-width:.5rem .5rem 0}.bs-popover-auto[x-placement^=top] .arrow::before,.bs-popover-top .arrow::before{bottom:0;border-top-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=top] .arrow::after,.bs-popover-top .arrow::after{bottom:1px;border-top-color:#fff}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right] .arrow,.bs-popover-right .arrow{left:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=right] .arrow::after,.bs-popover-auto[x-placement^=right] .arrow::before,.bs-popover-right .arrow::after,.bs-popover-right .arrow::before{border-width:.5rem .5rem .5rem 0}.bs-popover-auto[x-placement^=right] .arrow::before,.bs-popover-right .arrow::before{left:0;border-right-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=right] .arrow::after,.bs-popover-right .arrow::after{left:1px;border-right-color:#fff}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom] .arrow,.bs-popover-bottom .arrow{top:calc((.5rem + 1px) * -1)}.bs-popover-auto[x-placement^=bottom] .arrow::after,.bs-popover-auto[x-placement^=bottom] .arrow::before,.bs-popover-bottom .arrow::after,.bs-popover-bottom .arrow::before{border-width:0 .5rem .5rem .5rem}.bs-popover-auto[x-placement^=bottom] .arrow::before,.bs-popover-bottom .arrow::before{top:0;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=bottom] .arrow::after,.bs-popover-bottom .arrow::after{top:1px;border-bottom-color:#fff}.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left] .arrow,.bs-popover-left .arrow{right:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=left] .arrow::after,.bs-popover-auto[x-placement^=left] .arrow::before,.bs-popover-left .arrow::after,.bs-popover-left .arrow::before{border-width:.5rem 0 .5rem .5rem}.bs-popover-auto[x-placement^=left] .arrow::before,.bs-popover-left .arrow::before{right:0;border-left-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=left] .arrow::after,.bs-popover-left .arrow::after{right:1px;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;color:inherit;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#212529}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-item{position:relative;display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.carousel-item-next,.carousel-item-prev{position:absolute;top:0}.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translateX(0);transform:translateX(0)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.active.carousel-item-right,.carousel-item-next{-webkit-transform:translateX(100%);transform:translateX(100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-right,.carousel-item-next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:transparent no-repeat center center;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.carousel-control-next-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{position:relative;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;background-color:rgba(255,255,255,.5)}.carousel-indicators li::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators li::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.bg-primary{background-color:#007bff!important}a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:hover{background-color:#0062cc!important}.bg-secondary{background-color:#6c757d!important}a.bg-secondary:focus,a.bg-secondary:hover,button.bg-secondary:focus,button.bg-secondary:hover{background-color:#545b62!important}.bg-success{background-color:#28a745!important}a.bg-success:focus,a.bg-success:hover,button.bg-success:focus,button.bg-success:hover{background-color:#1e7e34!important}.bg-info{background-color:#17a2b8!important}a.bg-info:focus,a.bg-info:hover,button.bg-info:focus,button.bg-info:hover{background-color:#117a8b!important}.bg-warning{background-color:#ffc107!important}a.bg-warning:focus,a.bg-warning:hover,button.bg-warning:focus,button.bg-warning:hover{background-color:#d39e00!important}.bg-danger{background-color:#dc3545!important}a.bg-danger:focus,a.bg-danger:hover,button.bg-danger:focus,button.bg-danger:hover{background-color:#bd2130!important}.bg-light{background-color:#f8f9fa!important}a.bg-light:focus,a.bg-light:hover,button.bg-light:focus,button.bg-light:hover{background-color:#dae0e5!important}.bg-dark{background-color:#343a40!important}a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover{background-color:#1d2124!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.border{border:1px solid #dee2e6!important}.border-top{border-top:1px solid #dee2e6!important}.border-right{border-right:1px solid #dee2e6!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-left{border-left:1px solid #dee2e6!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-primary{border-color:#007bff!important}.border-secondary{border-color:#6c757d!important}.border-success{border-color:#28a745!important}.border-info{border-color:#17a2b8!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#343a40!important}.border-white{border-color:#fff!important}.rounded{border-radius:.25rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-circle{border-radius:50%!important}.rounded-0{border-radius:0!important}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-print-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.857143%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.flex-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}@media (min-width:576px){.flex-sm-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-sm-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-sm-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-sm-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-sm-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-sm-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-sm-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-sm-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-sm-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-sm-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-sm-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-sm-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-sm-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-sm-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-sm-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-sm-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-sm-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-sm-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-sm-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-sm-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-sm-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-sm-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-sm-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-sm-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-sm-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-sm-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-sm-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-sm-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-sm-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:768px){.flex-md-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-md-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-md-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-md-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-md-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-md-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-md-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-md-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-md-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-md-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-md-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-md-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-md-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-md-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-md-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-md-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-md-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-md-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-md-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-md-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-md-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-md-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-md-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-md-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-md-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-md-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-md-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-md-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-md-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:992px){.flex-lg-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-lg-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-lg-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-lg-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-lg-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-lg-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-lg-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-lg-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-lg-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-lg-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-lg-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-lg-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-lg-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-lg-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-lg-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-lg-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-lg-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-lg-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-lg-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-lg-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-lg-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-lg-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-lg-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-lg-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-lg-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-lg-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-lg-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-lg-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-lg-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:1200px){.flex-xl-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-xl-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-xl-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-xl-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-xl-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-xl-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-xl-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-xl-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-xl-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-xl-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-xl-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-xl-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-xl-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-xl-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-xl-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-xl-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-xl-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-xl-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-xl-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-xl-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-xl-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-xl-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-xl-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-xl-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-xl-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-xl-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-xl-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-xl-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-xl-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}@media (min-width:576px){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}}@media (min-width:768px){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}}@media (min-width:992px){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}}@media (min-width:1200px){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;-webkit-clip-path:inset(50%);clip-path:inset(50%);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;-webkit-clip-path:none;clip-path:none}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}@media (min-width:576px){.m-sm-0{margin:0!important}.mt-sm-0,.my-sm-0{margin-top:0!important}.mr-sm-0,.mx-sm-0{margin-right:0!important}.mb-sm-0,.my-sm-0{margin-bottom:0!important}.ml-sm-0,.mx-sm-0{margin-left:0!important}.m-sm-1{margin:.25rem!important}.mt-sm-1,.my-sm-1{margin-top:.25rem!important}.mr-sm-1,.mx-sm-1{margin-right:.25rem!important}.mb-sm-1,.my-sm-1{margin-bottom:.25rem!important}.ml-sm-1,.mx-sm-1{margin-left:.25rem!important}.m-sm-2{margin:.5rem!important}.mt-sm-2,.my-sm-2{margin-top:.5rem!important}.mr-sm-2,.mx-sm-2{margin-right:.5rem!important}.mb-sm-2,.my-sm-2{margin-bottom:.5rem!important}.ml-sm-2,.mx-sm-2{margin-left:.5rem!important}.m-sm-3{margin:1rem!important}.mt-sm-3,.my-sm-3{margin-top:1rem!important}.mr-sm-3,.mx-sm-3{margin-right:1rem!important}.mb-sm-3,.my-sm-3{margin-bottom:1rem!important}.ml-sm-3,.mx-sm-3{margin-left:1rem!important}.m-sm-4{margin:1.5rem!important}.mt-sm-4,.my-sm-4{margin-top:1.5rem!important}.mr-sm-4,.mx-sm-4{margin-right:1.5rem!important}.mb-sm-4,.my-sm-4{margin-bottom:1.5rem!important}.ml-sm-4,.mx-sm-4{margin-left:1.5rem!important}.m-sm-5{margin:3rem!important}.mt-sm-5,.my-sm-5{margin-top:3rem!important}.mr-sm-5,.mx-sm-5{margin-right:3rem!important}.mb-sm-5,.my-sm-5{margin-bottom:3rem!important}.ml-sm-5,.mx-sm-5{margin-left:3rem!important}.p-sm-0{padding:0!important}.pt-sm-0,.py-sm-0{padding-top:0!important}.pr-sm-0,.px-sm-0{padding-right:0!important}.pb-sm-0,.py-sm-0{padding-bottom:0!important}.pl-sm-0,.px-sm-0{padding-left:0!important}.p-sm-1{padding:.25rem!important}.pt-sm-1,.py-sm-1{padding-top:.25rem!important}.pr-sm-1,.px-sm-1{padding-right:.25rem!important}.pb-sm-1,.py-sm-1{padding-bottom:.25rem!important}.pl-sm-1,.px-sm-1{padding-left:.25rem!important}.p-sm-2{padding:.5rem!important}.pt-sm-2,.py-sm-2{padding-top:.5rem!important}.pr-sm-2,.px-sm-2{padding-right:.5rem!important}.pb-sm-2,.py-sm-2{padding-bottom:.5rem!important}.pl-sm-2,.px-sm-2{padding-left:.5rem!important}.p-sm-3{padding:1rem!important}.pt-sm-3,.py-sm-3{padding-top:1rem!important}.pr-sm-3,.px-sm-3{padding-right:1rem!important}.pb-sm-3,.py-sm-3{padding-bottom:1rem!important}.pl-sm-3,.px-sm-3{padding-left:1rem!important}.p-sm-4{padding:1.5rem!important}.pt-sm-4,.py-sm-4{padding-top:1.5rem!important}.pr-sm-4,.px-sm-4{padding-right:1.5rem!important}.pb-sm-4,.py-sm-4{padding-bottom:1.5rem!important}.pl-sm-4,.px-sm-4{padding-left:1.5rem!important}.p-sm-5{padding:3rem!important}.pt-sm-5,.py-sm-5{padding-top:3rem!important}.pr-sm-5,.px-sm-5{padding-right:3rem!important}.pb-sm-5,.py-sm-5{padding-bottom:3rem!important}.pl-sm-5,.px-sm-5{padding-left:3rem!important}.m-sm-auto{margin:auto!important}.mt-sm-auto,.my-sm-auto{margin-top:auto!important}.mr-sm-auto,.mx-sm-auto{margin-right:auto!important}.mb-sm-auto,.my-sm-auto{margin-bottom:auto!important}.ml-sm-auto,.mx-sm-auto{margin-left:auto!important}}@media (min-width:768px){.m-md-0{margin:0!important}.mt-md-0,.my-md-0{margin-top:0!important}.mr-md-0,.mx-md-0{margin-right:0!important}.mb-md-0,.my-md-0{margin-bottom:0!important}.ml-md-0,.mx-md-0{margin-left:0!important}.m-md-1{margin:.25rem!important}.mt-md-1,.my-md-1{margin-top:.25rem!important}.mr-md-1,.mx-md-1{margin-right:.25rem!important}.mb-md-1,.my-md-1{margin-bottom:.25rem!important}.ml-md-1,.mx-md-1{margin-left:.25rem!important}.m-md-2{margin:.5rem!important}.mt-md-2,.my-md-2{margin-top:.5rem!important}.mr-md-2,.mx-md-2{margin-right:.5rem!important}.mb-md-2,.my-md-2{margin-bottom:.5rem!important}.ml-md-2,.mx-md-2{margin-left:.5rem!important}.m-md-3{margin:1rem!important}.mt-md-3,.my-md-3{margin-top:1rem!important}.mr-md-3,.mx-md-3{margin-right:1rem!important}.mb-md-3,.my-md-3{margin-bottom:1rem!important}.ml-md-3,.mx-md-3{margin-left:1rem!important}.m-md-4{margin:1.5rem!important}.mt-md-4,.my-md-4{margin-top:1.5rem!important}.mr-md-4,.mx-md-4{margin-right:1.5rem!important}.mb-md-4,.my-md-4{margin-bottom:1.5rem!important}.ml-md-4,.mx-md-4{margin-left:1.5rem!important}.m-md-5{margin:3rem!important}.mt-md-5,.my-md-5{margin-top:3rem!important}.mr-md-5,.mx-md-5{margin-right:3rem!important}.mb-md-5,.my-md-5{margin-bottom:3rem!important}.ml-md-5,.mx-md-5{margin-left:3rem!important}.p-md-0{padding:0!important}.pt-md-0,.py-md-0{padding-top:0!important}.pr-md-0,.px-md-0{padding-right:0!important}.pb-md-0,.py-md-0{padding-bottom:0!important}.pl-md-0,.px-md-0{padding-left:0!important}.p-md-1{padding:.25rem!important}.pt-md-1,.py-md-1{padding-top:.25rem!important}.pr-md-1,.px-md-1{padding-right:.25rem!important}.pb-md-1,.py-md-1{padding-bottom:.25rem!important}.pl-md-1,.px-md-1{padding-left:.25rem!important}.p-md-2{padding:.5rem!important}.pt-md-2,.py-md-2{padding-top:.5rem!important}.pr-md-2,.px-md-2{padding-right:.5rem!important}.pb-md-2,.py-md-2{padding-bottom:.5rem!important}.pl-md-2,.px-md-2{padding-left:.5rem!important}.p-md-3{padding:1rem!important}.pt-md-3,.py-md-3{padding-top:1rem!important}.pr-md-3,.px-md-3{padding-right:1rem!important}.pb-md-3,.py-md-3{padding-bottom:1rem!important}.pl-md-3,.px-md-3{padding-left:1rem!important}.p-md-4{padding:1.5rem!important}.pt-md-4,.py-md-4{padding-top:1.5rem!important}.pr-md-4,.px-md-4{padding-right:1.5rem!important}.pb-md-4,.py-md-4{padding-bottom:1.5rem!important}.pl-md-4,.px-md-4{padding-left:1.5rem!important}.p-md-5{padding:3rem!important}.pt-md-5,.py-md-5{padding-top:3rem!important}.pr-md-5,.px-md-5{padding-right:3rem!important}.pb-md-5,.py-md-5{padding-bottom:3rem!important}.pl-md-5,.px-md-5{padding-left:3rem!important}.m-md-auto{margin:auto!important}.mt-md-auto,.my-md-auto{margin-top:auto!important}.mr-md-auto,.mx-md-auto{margin-right:auto!important}.mb-md-auto,.my-md-auto{margin-bottom:auto!important}.ml-md-auto,.mx-md-auto{margin-left:auto!important}}@media (min-width:992px){.m-lg-0{margin:0!important}.mt-lg-0,.my-lg-0{margin-top:0!important}.mr-lg-0,.mx-lg-0{margin-right:0!important}.mb-lg-0,.my-lg-0{margin-bottom:0!important}.ml-lg-0,.mx-lg-0{margin-left:0!important}.m-lg-1{margin:.25rem!important}.mt-lg-1,.my-lg-1{margin-top:.25rem!important}.mr-lg-1,.mx-lg-1{margin-right:.25rem!important}.mb-lg-1,.my-lg-1{margin-bottom:.25rem!important}.ml-lg-1,.mx-lg-1{margin-left:.25rem!important}.m-lg-2{margin:.5rem!important}.mt-lg-2,.my-lg-2{margin-top:.5rem!important}.mr-lg-2,.mx-lg-2{margin-right:.5rem!important}.mb-lg-2,.my-lg-2{margin-bottom:.5rem!important}.ml-lg-2,.mx-lg-2{margin-left:.5rem!important}.m-lg-3{margin:1rem!important}.mt-lg-3,.my-lg-3{margin-top:1rem!important}.mr-lg-3,.mx-lg-3{margin-right:1rem!important}.mb-lg-3,.my-lg-3{margin-bottom:1rem!important}.ml-lg-3,.mx-lg-3{margin-left:1rem!important}.m-lg-4{margin:1.5rem!important}.mt-lg-4,.my-lg-4{margin-top:1.5rem!important}.mr-lg-4,.mx-lg-4{margin-right:1.5rem!important}.mb-lg-4,.my-lg-4{margin-bottom:1.5rem!important}.ml-lg-4,.mx-lg-4{margin-left:1.5rem!important}.m-lg-5{margin:3rem!important}.mt-lg-5,.my-lg-5{margin-top:3rem!important}.mr-lg-5,.mx-lg-5{margin-right:3rem!important}.mb-lg-5,.my-lg-5{margin-bottom:3rem!important}.ml-lg-5,.mx-lg-5{margin-left:3rem!important}.p-lg-0{padding:0!important}.pt-lg-0,.py-lg-0{padding-top:0!important}.pr-lg-0,.px-lg-0{padding-right:0!important}.pb-lg-0,.py-lg-0{padding-bottom:0!important}.pl-lg-0,.px-lg-0{padding-left:0!important}.p-lg-1{padding:.25rem!important}.pt-lg-1,.py-lg-1{padding-top:.25rem!important}.pr-lg-1,.px-lg-1{padding-right:.25rem!important}.pb-lg-1,.py-lg-1{padding-bottom:.25rem!important}.pl-lg-1,.px-lg-1{padding-left:.25rem!important}.p-lg-2{padding:.5rem!important}.pt-lg-2,.py-lg-2{padding-top:.5rem!important}.pr-lg-2,.px-lg-2{padding-right:.5rem!important}.pb-lg-2,.py-lg-2{padding-bottom:.5rem!important}.pl-lg-2,.px-lg-2{padding-left:.5rem!important}.p-lg-3{padding:1rem!important}.pt-lg-3,.py-lg-3{padding-top:1rem!important}.pr-lg-3,.px-lg-3{padding-right:1rem!important}.pb-lg-3,.py-lg-3{padding-bottom:1rem!important}.pl-lg-3,.px-lg-3{padding-left:1rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4,.py-lg-4{padding-top:1.5rem!important}.pr-lg-4,.px-lg-4{padding-right:1.5rem!important}.pb-lg-4,.py-lg-4{padding-bottom:1.5rem!important}.pl-lg-4,.px-lg-4{padding-left:1.5rem!important}.p-lg-5{padding:3rem!important}.pt-lg-5,.py-lg-5{padding-top:3rem!important}.pr-lg-5,.px-lg-5{padding-right:3rem!important}.pb-lg-5,.py-lg-5{padding-bottom:3rem!important}.pl-lg-5,.px-lg-5{padding-left:3rem!important}.m-lg-auto{margin:auto!important}.mt-lg-auto,.my-lg-auto{margin-top:auto!important}.mr-lg-auto,.mx-lg-auto{margin-right:auto!important}.mb-lg-auto,.my-lg-auto{margin-bottom:auto!important}.ml-lg-auto,.mx-lg-auto{margin-left:auto!important}}@media (min-width:1200px){.m-xl-0{margin:0!important}.mt-xl-0,.my-xl-0{margin-top:0!important}.mr-xl-0,.mx-xl-0{margin-right:0!important}.mb-xl-0,.my-xl-0{margin-bottom:0!important}.ml-xl-0,.mx-xl-0{margin-left:0!important}.m-xl-1{margin:.25rem!important}.mt-xl-1,.my-xl-1{margin-top:.25rem!important}.mr-xl-1,.mx-xl-1{margin-right:.25rem!important}.mb-xl-1,.my-xl-1{margin-bottom:.25rem!important}.ml-xl-1,.mx-xl-1{margin-left:.25rem!important}.m-xl-2{margin:.5rem!important}.mt-xl-2,.my-xl-2{margin-top:.5rem!important}.mr-xl-2,.mx-xl-2{margin-right:.5rem!important}.mb-xl-2,.my-xl-2{margin-bottom:.5rem!important}.ml-xl-2,.mx-xl-2{margin-left:.5rem!important}.m-xl-3{margin:1rem!important}.mt-xl-3,.my-xl-3{margin-top:1rem!important}.mr-xl-3,.mx-xl-3{margin-right:1rem!important}.mb-xl-3,.my-xl-3{margin-bottom:1rem!important}.ml-xl-3,.mx-xl-3{margin-left:1rem!important}.m-xl-4{margin:1.5rem!important}.mt-xl-4,.my-xl-4{margin-top:1.5rem!important}.mr-xl-4,.mx-xl-4{margin-right:1.5rem!important}.mb-xl-4,.my-xl-4{margin-bottom:1.5rem!important}.ml-xl-4,.mx-xl-4{margin-left:1.5rem!important}.m-xl-5{margin:3rem!important}.mt-xl-5,.my-xl-5{margin-top:3rem!important}.mr-xl-5,.mx-xl-5{margin-right:3rem!important}.mb-xl-5,.my-xl-5{margin-bottom:3rem!important}.ml-xl-5,.mx-xl-5{margin-left:3rem!important}.p-xl-0{padding:0!important}.pt-xl-0,.py-xl-0{padding-top:0!important}.pr-xl-0,.px-xl-0{padding-right:0!important}.pb-xl-0,.py-xl-0{padding-bottom:0!important}.pl-xl-0,.px-xl-0{padding-left:0!important}.p-xl-1{padding:.25rem!important}.pt-xl-1,.py-xl-1{padding-top:.25rem!important}.pr-xl-1,.px-xl-1{padding-right:.25rem!important}.pb-xl-1,.py-xl-1{padding-bottom:.25rem!important}.pl-xl-1,.px-xl-1{padding-left:.25rem!important}.p-xl-2{padding:.5rem!important}.pt-xl-2,.py-xl-2{padding-top:.5rem!important}.pr-xl-2,.px-xl-2{padding-right:.5rem!important}.pb-xl-2,.py-xl-2{padding-bottom:.5rem!important}.pl-xl-2,.px-xl-2{padding-left:.5rem!important}.p-xl-3{padding:1rem!important}.pt-xl-3,.py-xl-3{padding-top:1rem!important}.pr-xl-3,.px-xl-3{padding-right:1rem!important}.pb-xl-3,.py-xl-3{padding-bottom:1rem!important}.pl-xl-3,.px-xl-3{padding-left:1rem!important}.p-xl-4{padding:1.5rem!important}.pt-xl-4,.py-xl-4{padding-top:1.5rem!important}.pr-xl-4,.px-xl-4{padding-right:1.5rem!important}.pb-xl-4,.py-xl-4{padding-bottom:1.5rem!important}.pl-xl-4,.px-xl-4{padding-left:1.5rem!important}.p-xl-5{padding:3rem!important}.pt-xl-5,.py-xl-5{padding-top:3rem!important}.pr-xl-5,.px-xl-5{padding-right:3rem!important}.pb-xl-5,.py-xl-5{padding-bottom:3rem!important}.pl-xl-5,.px-xl-5{padding-left:3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto,.my-xl-auto{margin-top:auto!important}.mr-xl-auto,.mx-xl-auto{margin-right:auto!important}.mb-xl-auto,.my-xl-auto{margin-bottom:auto!important}.ml-xl-auto,.mx-xl-auto{margin-left:auto!important}}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-light{font-weight:300!important}.font-weight-normal{font-weight:400!important}.font-weight-bold{font-weight:700!important}.font-italic{font-style:italic!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0062cc!important}.text-secondary{color:#6c757d!important}a.text-secondary:focus,a.text-secondary:hover{color:#545b62!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#1e7e34!important}.text-info{color:#17a2b8!important}a.text-info:focus,a.text-info:hover{color:#117a8b!important}.text-warning{color:#ffc107!important}a.text-warning:focus,a.text-warning:hover{color:#d39e00!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#bd2130!important}.text-light{color:#f8f9fa!important}a.text-light:focus,a.text-light:hover{color:#dae0e5!important}.text-dark{color:#343a40!important}a.text-dark:focus,a.text-dark:hover{color:#1d2124!important}.text-muted{color:#6c757d!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}
+/*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/bootstrap.min.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/bootstrap.min.js
new file mode 100644
index 00000000..534d5334
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/bootstrap.min.js
@@ -0,0 +1,7 @@
+/*!
+  * Bootstrap v4.0.0 (https://getbootstrap.com)
+  * Copyright 2011-2018 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+  */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("jquery"),require("popper.js")):"function"==typeof define&&define.amd?define(["exports","jquery","popper.js"],e):e(t.bootstrap={},t.jQuery,t.Popper)}(this,function(t,e,n){"use strict";function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function s(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}e=e&&e.hasOwnProperty("default")?e.default:e,n=n&&n.hasOwnProperty("default")?n.default:n;var o,a,l,h,c,u,f,d,_,g,p,m,v,E,T,y,C,I,A,b,D,S,w,N,O,k,P=function(t){var e=!1;function n(e){var n=this,s=!1;return t(this).one(i.TRANSITION_END,function(){s=!0}),setTimeout(function(){s||i.triggerTransitionEnd(n)},e),this}var i={TRANSITION_END:"bsTransitionEnd",getUID:function(t){do{t+=~~(1e6*Math.random())}while(document.getElementById(t));return t},getSelectorFromElement:function(e){var n,i=e.getAttribute("data-target");i&&"#"!==i||(i=e.getAttribute("href")||""),"#"===i.charAt(0)&&(n=i,i=n="function"==typeof t.escapeSelector?t.escapeSelector(n).substr(1):n.replace(/(:|\.|\[|\]|,|=|@)/g,"\\$1"));try{return t(document).find(i).length>0?i:null}catch(t){return null}},reflow:function(t){return t.offsetHeight},triggerTransitionEnd:function(n){t(n).trigger(e.end)},supportsTransitionEnd:function(){return Boolean(e)},isElement:function(t){return(t[0]||t).nodeType},typeCheckConfig:function(t,e,n){for(var s in n)if(Object.prototype.hasOwnProperty.call(n,s)){var r=n[s],o=e[s],a=o&&i.isElement(o)?"element":(l=o,{}.toString.call(l).match(/\s([a-zA-Z]+)/)[1].toLowerCase());if(!new RegExp(r).test(a))throw new Error(t.toUpperCase()+': Option "'+s+'" provided type "'+a+'" but expected type "'+r+'".')}var l}};return e=("undefined"==typeof window||!window.QUnit)&&{end:"transitionend"},t.fn.emulateTransitionEnd=n,i.supportsTransitionEnd()&&(t.event.special[i.TRANSITION_END]={bindType:e.end,delegateType:e.end,handle:function(e){if(t(e.target).is(this))return e.handleObj.handler.apply(this,arguments)}}),i}(e),L=(a="alert",h="."+(l="bs.alert"),c=(o=e).fn[a],u={CLOSE:"close"+h,CLOSED:"closed"+h,CLICK_DATA_API:"click"+h+".data-api"},f="alert",d="fade",_="show",g=function(){function t(t){this._element=t}var e=t.prototype;return e.close=function(t){t=t||this._element;var e=this._getRootElement(t);this._triggerCloseEvent(e).isDefaultPrevented()||this._removeElement(e)},e.dispose=function(){o.removeData(this._element,l),this._element=null},e._getRootElement=function(t){var e=P.getSelectorFromElement(t),n=!1;return e&&(n=o(e)[0]),n||(n=o(t).closest("."+f)[0]),n},e._triggerCloseEvent=function(t){var e=o.Event(u.CLOSE);return o(t).trigger(e),e},e._removeElement=function(t){var e=this;o(t).removeClass(_),P.supportsTransitionEnd()&&o(t).hasClass(d)?o(t).one(P.TRANSITION_END,function(n){return e._destroyElement(t,n)}).emulateTransitionEnd(150):this._destroyElement(t)},e._destroyElement=function(t){o(t).detach().trigger(u.CLOSED).remove()},t._jQueryInterface=function(e){return this.each(function(){var n=o(this),i=n.data(l);i||(i=new t(this),n.data(l,i)),"close"===e&&i[e](this)})},t._handleDismiss=function(t){return function(e){e&&e.preventDefault(),t.close(this)}},s(t,null,[{key:"VERSION",get:function(){return"4.0.0"}}]),t}(),o(document).on(u.CLICK_DATA_API,'[data-dismiss="alert"]',g._handleDismiss(new g)),o.fn[a]=g._jQueryInterface,o.fn[a].Constructor=g,o.fn[a].noConflict=function(){return o.fn[a]=c,g._jQueryInterface},g),R=(m="button",E="."+(v="bs.button"),T=".data-api",y=(p=e).fn[m],C="active",I="btn",A="focus",b='[data-toggle^="button"]',D='[data-toggle="buttons"]',S="input",w=".active",N=".btn",O={CLICK_DATA_API:"click"+E+T,FOCUS_BLUR_DATA_API:"focus"+E+T+" blur"+E+T},k=function(){function t(t){this._element=t}var e=t.prototype;return e.toggle=function(){var t=!0,e=!0,n=p(this._element).closest(D)[0];if(n){var i=p(this._element).find(S)[0];if(i){if("radio"===i.type)if(i.checked&&p(this._element).hasClass(C))t=!1;else{var s=p(n).find(w)[0];s&&p(s).removeClass(C)}if(t){if(i.hasAttribute("disabled")||n.hasAttribute("disabled")||i.classList.contains("disabled")||n.classList.contains("disabled"))return;i.checked=!p(this._element).hasClass(C),p(i).trigger("change")}i.focus(),e=!1}}e&&this._element.setAttribute("aria-pressed",!p(this._element).hasClass(C)),t&&p(this._element).toggleClass(C)},e.dispose=function(){p.removeData(this._element,v),this._element=null},t._jQueryInterface=function(e){return this.each(function(){var n=p(this).data(v);n||(n=new t(this),p(this).data(v,n)),"toggle"===e&&n[e]()})},s(t,null,[{key:"VERSION",get:function(){return"4.0.0"}}]),t}(),p(document).on(O.CLICK_DATA_API,b,function(t){t.preventDefault();var e=t.target;p(e).hasClass(I)||(e=p(e).closest(N)),k._jQueryInterface.call(p(e),"toggle")}).on(O.FOCUS_BLUR_DATA_API,b,function(t){var e=p(t.target).closest(N)[0];p(e).toggleClass(A,/^focus(in)?$/.test(t.type))}),p.fn[m]=k._jQueryInterface,p.fn[m].Constructor=k,p.fn[m].noConflict=function(){return p.fn[m]=y,k._jQueryInterface},k),j=function(t){var e="carousel",n="bs.carousel",i="."+n,o=t.fn[e],a={interval:5e3,keyboard:!0,slide:!1,pause:"hover",wrap:!0},l={interval:"(number|boolean)",keyboard:"boolean",slide:"(boolean|string)",pause:"(string|boolean)",wrap:"boolean"},h="next",c="prev",u="left",f="right",d={SLIDE:"slide"+i,SLID:"slid"+i,KEYDOWN:"keydown"+i,MOUSEENTER:"mouseenter"+i,MOUSELEAVE:"mouseleave"+i,TOUCHEND:"touchend"+i,LOAD_DATA_API:"load"+i+".data-api",CLICK_DATA_API:"click"+i+".data-api"},_="carousel",g="active",p="slide",m="carousel-item-right",v="carousel-item-left",E="carousel-item-next",T="carousel-item-prev",y={ACTIVE:".active",ACTIVE_ITEM:".active.carousel-item",ITEM:".carousel-item",NEXT_PREV:".carousel-item-next, .carousel-item-prev",INDICATORS:".carousel-indicators",DATA_SLIDE:"[data-slide], [data-slide-to]",DATA_RIDE:'[data-ride="carousel"]'},C=function(){function o(e,n){this._items=null,this._interval=null,this._activeElement=null,this._isPaused=!1,this._isSliding=!1,this.touchTimeout=null,this._config=this._getConfig(n),this._element=t(e)[0],this._indicatorsElement=t(this._element).find(y.INDICATORS)[0],this._addEventListeners()}var C=o.prototype;return C.next=function(){this._isSliding||this._slide(h)},C.nextWhenVisible=function(){!document.hidden&&t(this._element).is(":visible")&&"hidden"!==t(this._element).css("visibility")&&this.next()},C.prev=function(){this._isSliding||this._slide(c)},C.pause=function(e){e||(this._isPaused=!0),t(this._element).find(y.NEXT_PREV)[0]&&P.supportsTransitionEnd()&&(P.triggerTransitionEnd(this._element),this.cycle(!0)),clearInterval(this._interval),this._interval=null},C.cycle=function(t){t||(this._isPaused=!1),this._interval&&(clearInterval(this._interval),this._interval=null),this._config.interval&&!this._isPaused&&(this._interval=setInterval((document.visibilityState?this.nextWhenVisible:this.next).bind(this),this._config.interval))},C.to=function(e){var n=this;this._activeElement=t(this._element).find(y.ACTIVE_ITEM)[0];var i=this._getItemIndex(this._activeElement);if(!(e>this._items.length-1||e<0))if(this._isSliding)t(this._element).one(d.SLID,function(){return n.to(e)});else{if(i===e)return this.pause(),void this.cycle();var s=e>i?h:c;this._slide(s,this._items[e])}},C.dispose=function(){t(this._element).off(i),t.removeData(this._element,n),this._items=null,this._config=null,this._element=null,this._interval=null,this._isPaused=null,this._isSliding=null,this._activeElement=null,this._indicatorsElement=null},C._getConfig=function(t){return t=r({},a,t),P.typeCheckConfig(e,t,l),t},C._addEventListeners=function(){var e=this;this._config.keyboard&&t(this._element).on(d.KEYDOWN,function(t){return e._keydown(t)}),"hover"===this._config.pause&&(t(this._element).on(d.MOUSEENTER,function(t){return e.pause(t)}).on(d.MOUSELEAVE,function(t){return e.cycle(t)}),"ontouchstart"in document.documentElement&&t(this._element).on(d.TOUCHEND,function(){e.pause(),e.touchTimeout&&clearTimeout(e.touchTimeout),e.touchTimeout=setTimeout(function(t){return e.cycle(t)},500+e._config.interval)}))},C._keydown=function(t){if(!/input|textarea/i.test(t.target.tagName))switch(t.which){case 37:t.preventDefault(),this.prev();break;case 39:t.preventDefault(),this.next()}},C._getItemIndex=function(e){return this._items=t.makeArray(t(e).parent().find(y.ITEM)),this._items.indexOf(e)},C._getItemByDirection=function(t,e){var n=t===h,i=t===c,s=this._getItemIndex(e),r=this._items.length-1;if((i&&0===s||n&&s===r)&&!this._config.wrap)return e;var o=(s+(t===c?-1:1))%this._items.length;return-1===o?this._items[this._items.length-1]:this._items[o]},C._triggerSlideEvent=function(e,n){var i=this._getItemIndex(e),s=this._getItemIndex(t(this._element).find(y.ACTIVE_ITEM)[0]),r=t.Event(d.SLIDE,{relatedTarget:e,direction:n,from:s,to:i});return t(this._element).trigger(r),r},C._setActiveIndicatorElement=function(e){if(this._indicatorsElement){t(this._indicatorsElement).find(y.ACTIVE).removeClass(g);var n=this._indicatorsElement.children[this._getItemIndex(e)];n&&t(n).addClass(g)}},C._slide=function(e,n){var i,s,r,o=this,a=t(this._element).find(y.ACTIVE_ITEM)[0],l=this._getItemIndex(a),c=n||a&&this._getItemByDirection(e,a),_=this._getItemIndex(c),C=Boolean(this._interval);if(e===h?(i=v,s=E,r=u):(i=m,s=T,r=f),c&&t(c).hasClass(g))this._isSliding=!1;else if(!this._triggerSlideEvent(c,r).isDefaultPrevented()&&a&&c){this._isSliding=!0,C&&this.pause(),this._setActiveIndicatorElement(c);var I=t.Event(d.SLID,{relatedTarget:c,direction:r,from:l,to:_});P.supportsTransitionEnd()&&t(this._element).hasClass(p)?(t(c).addClass(s),P.reflow(c),t(a).addClass(i),t(c).addClass(i),t(a).one(P.TRANSITION_END,function(){t(c).removeClass(i+" "+s).addClass(g),t(a).removeClass(g+" "+s+" "+i),o._isSliding=!1,setTimeout(function(){return t(o._element).trigger(I)},0)}).emulateTransitionEnd(600)):(t(a).removeClass(g),t(c).addClass(g),this._isSliding=!1,t(this._element).trigger(I)),C&&this.cycle()}},o._jQueryInterface=function(e){return this.each(function(){var i=t(this).data(n),s=r({},a,t(this).data());"object"==typeof e&&(s=r({},s,e));var l="string"==typeof e?e:s.slide;if(i||(i=new o(this,s),t(this).data(n,i)),"number"==typeof e)i.to(e);else if("string"==typeof l){if("undefined"==typeof i[l])throw new TypeError('No method named "'+l+'"');i[l]()}else s.interval&&(i.pause(),i.cycle())})},o._dataApiClickHandler=function(e){var i=P.getSelectorFromElement(this);if(i){var s=t(i)[0];if(s&&t(s).hasClass(_)){var a=r({},t(s).data(),t(this).data()),l=this.getAttribute("data-slide-to");l&&(a.interval=!1),o._jQueryInterface.call(t(s),a),l&&t(s).data(n).to(l),e.preventDefault()}}},s(o,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return a}}]),o}();return t(document).on(d.CLICK_DATA_API,y.DATA_SLIDE,C._dataApiClickHandler),t(window).on(d.LOAD_DATA_API,function(){t(y.DATA_RIDE).each(function(){var e=t(this);C._jQueryInterface.call(e,e.data())})}),t.fn[e]=C._jQueryInterface,t.fn[e].Constructor=C,t.fn[e].noConflict=function(){return t.fn[e]=o,C._jQueryInterface},C}(e),H=function(t){var e="collapse",n="bs.collapse",i="."+n,o=t.fn[e],a={toggle:!0,parent:""},l={toggle:"boolean",parent:"(string|element)"},h={SHOW:"show"+i,SHOWN:"shown"+i,HIDE:"hide"+i,HIDDEN:"hidden"+i,CLICK_DATA_API:"click"+i+".data-api"},c="show",u="collapse",f="collapsing",d="collapsed",_="width",g="height",p={ACTIVES:".show, .collapsing",DATA_TOGGLE:'[data-toggle="collapse"]'},m=function(){function i(e,n){this._isTransitioning=!1,this._element=e,this._config=this._getConfig(n),this._triggerArray=t.makeArray(t('[data-toggle="collapse"][href="#'+e.id+'"],[data-toggle="collapse"][data-target="#'+e.id+'"]'));for(var i=t(p.DATA_TOGGLE),s=0;s<i.length;s++){var r=i[s],o=P.getSelectorFromElement(r);null!==o&&t(o).filter(e).length>0&&(this._selector=o,this._triggerArray.push(r))}this._parent=this._config.parent?this._getParent():null,this._config.parent||this._addAriaAndCollapsedClass(this._element,this._triggerArray),this._config.toggle&&this.toggle()}var o=i.prototype;return o.toggle=function(){t(this._element).hasClass(c)?this.hide():this.show()},o.show=function(){var e,s,r=this;if(!this._isTransitioning&&!t(this._element).hasClass(c)&&(this._parent&&0===(e=t.makeArray(t(this._parent).find(p.ACTIVES).filter('[data-parent="'+this._config.parent+'"]'))).length&&(e=null),!(e&&(s=t(e).not(this._selector).data(n))&&s._isTransitioning))){var o=t.Event(h.SHOW);if(t(this._element).trigger(o),!o.isDefaultPrevented()){e&&(i._jQueryInterface.call(t(e).not(this._selector),"hide"),s||t(e).data(n,null));var a=this._getDimension();t(this._element).removeClass(u).addClass(f),this._element.style[a]=0,this._triggerArray.length>0&&t(this._triggerArray).removeClass(d).attr("aria-expanded",!0),this.setTransitioning(!0);var l=function(){t(r._element).removeClass(f).addClass(u).addClass(c),r._element.style[a]="",r.setTransitioning(!1),t(r._element).trigger(h.SHOWN)};if(P.supportsTransitionEnd()){var _="scroll"+(a[0].toUpperCase()+a.slice(1));t(this._element).one(P.TRANSITION_END,l).emulateTransitionEnd(600),this._element.style[a]=this._element[_]+"px"}else l()}}},o.hide=function(){var e=this;if(!this._isTransitioning&&t(this._element).hasClass(c)){var n=t.Event(h.HIDE);if(t(this._element).trigger(n),!n.isDefaultPrevented()){var i=this._getDimension();if(this._element.style[i]=this._element.getBoundingClientRect()[i]+"px",P.reflow(this._element),t(this._element).addClass(f).removeClass(u).removeClass(c),this._triggerArray.length>0)for(var s=0;s<this._triggerArray.length;s++){var r=this._triggerArray[s],o=P.getSelectorFromElement(r);if(null!==o)t(o).hasClass(c)||t(r).addClass(d).attr("aria-expanded",!1)}this.setTransitioning(!0);var a=function(){e.setTransitioning(!1),t(e._element).removeClass(f).addClass(u).trigger(h.HIDDEN)};this._element.style[i]="",P.supportsTransitionEnd()?t(this._element).one(P.TRANSITION_END,a).emulateTransitionEnd(600):a()}}},o.setTransitioning=function(t){this._isTransitioning=t},o.dispose=function(){t.removeData(this._element,n),this._config=null,this._parent=null,this._element=null,this._triggerArray=null,this._isTransitioning=null},o._getConfig=function(t){return(t=r({},a,t)).toggle=Boolean(t.toggle),P.typeCheckConfig(e,t,l),t},o._getDimension=function(){return t(this._element).hasClass(_)?_:g},o._getParent=function(){var e=this,n=null;P.isElement(this._config.parent)?(n=this._config.parent,"undefined"!=typeof this._config.parent.jquery&&(n=this._config.parent[0])):n=t(this._config.parent)[0];var s='[data-toggle="collapse"][data-parent="'+this._config.parent+'"]';return t(n).find(s).each(function(t,n){e._addAriaAndCollapsedClass(i._getTargetFromElement(n),[n])}),n},o._addAriaAndCollapsedClass=function(e,n){if(e){var i=t(e).hasClass(c);n.length>0&&t(n).toggleClass(d,!i).attr("aria-expanded",i)}},i._getTargetFromElement=function(e){var n=P.getSelectorFromElement(e);return n?t(n)[0]:null},i._jQueryInterface=function(e){return this.each(function(){var s=t(this),o=s.data(n),l=r({},a,s.data(),"object"==typeof e&&e);if(!o&&l.toggle&&/show|hide/.test(e)&&(l.toggle=!1),o||(o=new i(this,l),s.data(n,o)),"string"==typeof e){if("undefined"==typeof o[e])throw new TypeError('No method named "'+e+'"');o[e]()}})},s(i,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return a}}]),i}();return t(document).on(h.CLICK_DATA_API,p.DATA_TOGGLE,function(e){"A"===e.currentTarget.tagName&&e.preventDefault();var i=t(this),s=P.getSelectorFromElement(this);t(s).each(function(){var e=t(this),s=e.data(n)?"toggle":i.data();m._jQueryInterface.call(e,s)})}),t.fn[e]=m._jQueryInterface,t.fn[e].Constructor=m,t.fn[e].noConflict=function(){return t.fn[e]=o,m._jQueryInterface},m}(e),W=function(t){var e="dropdown",i="bs.dropdown",o="."+i,a=".data-api",l=t.fn[e],h=new RegExp("38|40|27"),c={HIDE:"hide"+o,HIDDEN:"hidden"+o,SHOW:"show"+o,SHOWN:"shown"+o,CLICK:"click"+o,CLICK_DATA_API:"click"+o+a,KEYDOWN_DATA_API:"keydown"+o+a,KEYUP_DATA_API:"keyup"+o+a},u="disabled",f="show",d="dropup",_="dropright",g="dropleft",p="dropdown-menu-right",m="dropdown-menu-left",v="position-static",E='[data-toggle="dropdown"]',T=".dropdown form",y=".dropdown-menu",C=".navbar-nav",I=".dropdown-menu .dropdown-item:not(.disabled)",A="top-start",b="top-end",D="bottom-start",S="bottom-end",w="right-start",N="left-start",O={offset:0,flip:!0,boundary:"scrollParent"},k={offset:"(number|string|function)",flip:"boolean",boundary:"(string|element)"},L=function(){function a(t,e){this._element=t,this._popper=null,this._config=this._getConfig(e),this._menu=this._getMenuElement(),this._inNavbar=this._detectNavbar(),this._addEventListeners()}var l=a.prototype;return l.toggle=function(){if(!this._element.disabled&&!t(this._element).hasClass(u)){var e=a._getParentFromElement(this._element),i=t(this._menu).hasClass(f);if(a._clearMenus(),!i){var s={relatedTarget:this._element},r=t.Event(c.SHOW,s);if(t(e).trigger(r),!r.isDefaultPrevented()){if(!this._inNavbar){if("undefined"==typeof n)throw new TypeError("Bootstrap dropdown require Popper.js (https://popper.js.org)");var o=this._element;t(e).hasClass(d)&&(t(this._menu).hasClass(m)||t(this._menu).hasClass(p))&&(o=e),"scrollParent"!==this._config.boundary&&t(e).addClass(v),this._popper=new n(o,this._menu,this._getPopperConfig())}"ontouchstart"in document.documentElement&&0===t(e).closest(C).length&&t("body").children().on("mouseover",null,t.noop),this._element.focus(),this._element.setAttribute("aria-expanded",!0),t(this._menu).toggleClass(f),t(e).toggleClass(f).trigger(t.Event(c.SHOWN,s))}}}},l.dispose=function(){t.removeData(this._element,i),t(this._element).off(o),this._element=null,this._menu=null,null!==this._popper&&(this._popper.destroy(),this._popper=null)},l.update=function(){this._inNavbar=this._detectNavbar(),null!==this._popper&&this._popper.scheduleUpdate()},l._addEventListeners=function(){var e=this;t(this._element).on(c.CLICK,function(t){t.preventDefault(),t.stopPropagation(),e.toggle()})},l._getConfig=function(n){return n=r({},this.constructor.Default,t(this._element).data(),n),P.typeCheckConfig(e,n,this.constructor.DefaultType),n},l._getMenuElement=function(){if(!this._menu){var e=a._getParentFromElement(this._element);this._menu=t(e).find(y)[0]}return this._menu},l._getPlacement=function(){var e=t(this._element).parent(),n=D;return e.hasClass(d)?(n=A,t(this._menu).hasClass(p)&&(n=b)):e.hasClass(_)?n=w:e.hasClass(g)?n=N:t(this._menu).hasClass(p)&&(n=S),n},l._detectNavbar=function(){return t(this._element).closest(".navbar").length>0},l._getPopperConfig=function(){var t=this,e={};return"function"==typeof this._config.offset?e.fn=function(e){return e.offsets=r({},e.offsets,t._config.offset(e.offsets)||{}),e}:e.offset=this._config.offset,{placement:this._getPlacement(),modifiers:{offset:e,flip:{enabled:this._config.flip},preventOverflow:{boundariesElement:this._config.boundary}}}},a._jQueryInterface=function(e){return this.each(function(){var n=t(this).data(i);if(n||(n=new a(this,"object"==typeof e?e:null),t(this).data(i,n)),"string"==typeof e){if("undefined"==typeof n[e])throw new TypeError('No method named "'+e+'"');n[e]()}})},a._clearMenus=function(e){if(!e||3!==e.which&&("keyup"!==e.type||9===e.which))for(var n=t.makeArray(t(E)),s=0;s<n.length;s++){var r=a._getParentFromElement(n[s]),o=t(n[s]).data(i),l={relatedTarget:n[s]};if(o){var h=o._menu;if(t(r).hasClass(f)&&!(e&&("click"===e.type&&/input|textarea/i.test(e.target.tagName)||"keyup"===e.type&&9===e.which)&&t.contains(r,e.target))){var u=t.Event(c.HIDE,l);t(r).trigger(u),u.isDefaultPrevented()||("ontouchstart"in document.documentElement&&t("body").children().off("mouseover",null,t.noop),n[s].setAttribute("aria-expanded","false"),t(h).removeClass(f),t(r).removeClass(f).trigger(t.Event(c.HIDDEN,l)))}}}},a._getParentFromElement=function(e){var n,i=P.getSelectorFromElement(e);return i&&(n=t(i)[0]),n||e.parentNode},a._dataApiKeydownHandler=function(e){if((/input|textarea/i.test(e.target.tagName)?!(32===e.which||27!==e.which&&(40!==e.which&&38!==e.which||t(e.target).closest(y).length)):h.test(e.which))&&(e.preventDefault(),e.stopPropagation(),!this.disabled&&!t(this).hasClass(u))){var n=a._getParentFromElement(this),i=t(n).hasClass(f);if((i||27===e.which&&32===e.which)&&(!i||27!==e.which&&32!==e.which)){var s=t(n).find(I).get();if(0!==s.length){var r=s.indexOf(e.target);38===e.which&&r>0&&r--,40===e.which&&r<s.length-1&&r++,r<0&&(r=0),s[r].focus()}}else{if(27===e.which){var o=t(n).find(E)[0];t(o).trigger("focus")}t(this).trigger("click")}}},s(a,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return O}},{key:"DefaultType",get:function(){return k}}]),a}();return t(document).on(c.KEYDOWN_DATA_API,E,L._dataApiKeydownHandler).on(c.KEYDOWN_DATA_API,y,L._dataApiKeydownHandler).on(c.CLICK_DATA_API+" "+c.KEYUP_DATA_API,L._clearMenus).on(c.CLICK_DATA_API,E,function(e){e.preventDefault(),e.stopPropagation(),L._jQueryInterface.call(t(this),"toggle")}).on(c.CLICK_DATA_API,T,function(t){t.stopPropagation()}),t.fn[e]=L._jQueryInterface,t.fn[e].Constructor=L,t.fn[e].noConflict=function(){return t.fn[e]=l,L._jQueryInterface},L}(e),M=function(t){var e="modal",n="bs.modal",i="."+n,o=t.fn.modal,a={backdrop:!0,keyboard:!0,focus:!0,show:!0},l={backdrop:"(boolean|string)",keyboard:"boolean",focus:"boolean",show:"boolean"},h={HIDE:"hide"+i,HIDDEN:"hidden"+i,SHOW:"show"+i,SHOWN:"shown"+i,FOCUSIN:"focusin"+i,RESIZE:"resize"+i,CLICK_DISMISS:"click.dismiss"+i,KEYDOWN_DISMISS:"keydown.dismiss"+i,MOUSEUP_DISMISS:"mouseup.dismiss"+i,MOUSEDOWN_DISMISS:"mousedown.dismiss"+i,CLICK_DATA_API:"click"+i+".data-api"},c="modal-scrollbar-measure",u="modal-backdrop",f="modal-open",d="fade",_="show",g={DIALOG:".modal-dialog",DATA_TOGGLE:'[data-toggle="modal"]',DATA_DISMISS:'[data-dismiss="modal"]',FIXED_CONTENT:".fixed-top, .fixed-bottom, .is-fixed, .sticky-top",STICKY_CONTENT:".sticky-top",NAVBAR_TOGGLER:".navbar-toggler"},p=function(){function o(e,n){this._config=this._getConfig(n),this._element=e,this._dialog=t(e).find(g.DIALOG)[0],this._backdrop=null,this._isShown=!1,this._isBodyOverflowing=!1,this._ignoreBackdropClick=!1,this._originalBodyPadding=0,this._scrollbarWidth=0}var p=o.prototype;return p.toggle=function(t){return this._isShown?this.hide():this.show(t)},p.show=function(e){var n=this;if(!this._isTransitioning&&!this._isShown){P.supportsTransitionEnd()&&t(this._element).hasClass(d)&&(this._isTransitioning=!0);var i=t.Event(h.SHOW,{relatedTarget:e});t(this._element).trigger(i),this._isShown||i.isDefaultPrevented()||(this._isShown=!0,this._checkScrollbar(),this._setScrollbar(),this._adjustDialog(),t(document.body).addClass(f),this._setEscapeEvent(),this._setResizeEvent(),t(this._element).on(h.CLICK_DISMISS,g.DATA_DISMISS,function(t){return n.hide(t)}),t(this._dialog).on(h.MOUSEDOWN_DISMISS,function(){t(n._element).one(h.MOUSEUP_DISMISS,function(e){t(e.target).is(n._element)&&(n._ignoreBackdropClick=!0)})}),this._showBackdrop(function(){return n._showElement(e)}))}},p.hide=function(e){var n=this;if(e&&e.preventDefault(),!this._isTransitioning&&this._isShown){var i=t.Event(h.HIDE);if(t(this._element).trigger(i),this._isShown&&!i.isDefaultPrevented()){this._isShown=!1;var s=P.supportsTransitionEnd()&&t(this._element).hasClass(d);s&&(this._isTransitioning=!0),this._setEscapeEvent(),this._setResizeEvent(),t(document).off(h.FOCUSIN),t(this._element).removeClass(_),t(this._element).off(h.CLICK_DISMISS),t(this._dialog).off(h.MOUSEDOWN_DISMISS),s?t(this._element).one(P.TRANSITION_END,function(t){return n._hideModal(t)}).emulateTransitionEnd(300):this._hideModal()}}},p.dispose=function(){t.removeData(this._element,n),t(window,document,this._element,this._backdrop).off(i),this._config=null,this._element=null,this._dialog=null,this._backdrop=null,this._isShown=null,this._isBodyOverflowing=null,this._ignoreBackdropClick=null,this._scrollbarWidth=null},p.handleUpdate=function(){this._adjustDialog()},p._getConfig=function(t){return t=r({},a,t),P.typeCheckConfig(e,t,l),t},p._showElement=function(e){var n=this,i=P.supportsTransitionEnd()&&t(this._element).hasClass(d);this._element.parentNode&&this._element.parentNode.nodeType===Node.ELEMENT_NODE||document.body.appendChild(this._element),this._element.style.display="block",this._element.removeAttribute("aria-hidden"),this._element.scrollTop=0,i&&P.reflow(this._element),t(this._element).addClass(_),this._config.focus&&this._enforceFocus();var s=t.Event(h.SHOWN,{relatedTarget:e}),r=function(){n._config.focus&&n._element.focus(),n._isTransitioning=!1,t(n._element).trigger(s)};i?t(this._dialog).one(P.TRANSITION_END,r).emulateTransitionEnd(300):r()},p._enforceFocus=function(){var e=this;t(document).off(h.FOCUSIN).on(h.FOCUSIN,function(n){document!==n.target&&e._element!==n.target&&0===t(e._element).has(n.target).length&&e._element.focus()})},p._setEscapeEvent=function(){var e=this;this._isShown&&this._config.keyboard?t(this._element).on(h.KEYDOWN_DISMISS,function(t){27===t.which&&(t.preventDefault(),e.hide())}):this._isShown||t(this._element).off(h.KEYDOWN_DISMISS)},p._setResizeEvent=function(){var e=this;this._isShown?t(window).on(h.RESIZE,function(t){return e.handleUpdate(t)}):t(window).off(h.RESIZE)},p._hideModal=function(){var e=this;this._element.style.display="none",this._element.setAttribute("aria-hidden",!0),this._isTransitioning=!1,this._showBackdrop(function(){t(document.body).removeClass(f),e._resetAdjustments(),e._resetScrollbar(),t(e._element).trigger(h.HIDDEN)})},p._removeBackdrop=function(){this._backdrop&&(t(this._backdrop).remove(),this._backdrop=null)},p._showBackdrop=function(e){var n=this,i=t(this._element).hasClass(d)?d:"";if(this._isShown&&this._config.backdrop){var s=P.supportsTransitionEnd()&&i;if(this._backdrop=document.createElement("div"),this._backdrop.className=u,i&&t(this._backdrop).addClass(i),t(this._backdrop).appendTo(document.body),t(this._element).on(h.CLICK_DISMISS,function(t){n._ignoreBackdropClick?n._ignoreBackdropClick=!1:t.target===t.currentTarget&&("static"===n._config.backdrop?n._element.focus():n.hide())}),s&&P.reflow(this._backdrop),t(this._backdrop).addClass(_),!e)return;if(!s)return void e();t(this._backdrop).one(P.TRANSITION_END,e).emulateTransitionEnd(150)}else if(!this._isShown&&this._backdrop){t(this._backdrop).removeClass(_);var r=function(){n._removeBackdrop(),e&&e()};P.supportsTransitionEnd()&&t(this._element).hasClass(d)?t(this._backdrop).one(P.TRANSITION_END,r).emulateTransitionEnd(150):r()}else e&&e()},p._adjustDialog=function(){var t=this._element.scrollHeight>document.documentElement.clientHeight;!this._isBodyOverflowing&&t&&(this._element.style.paddingLeft=this._scrollbarWidth+"px"),this._isBodyOverflowing&&!t&&(this._element.style.paddingRight=this._scrollbarWidth+"px")},p._resetAdjustments=function(){this._element.style.paddingLeft="",this._element.style.paddingRight=""},p._checkScrollbar=function(){var t=document.body.getBoundingClientRect();this._isBodyOverflowing=t.left+t.right<window.innerWidth,this._scrollbarWidth=this._getScrollbarWidth()},p._setScrollbar=function(){var e=this;if(this._isBodyOverflowing){t(g.FIXED_CONTENT).each(function(n,i){var s=t(i)[0].style.paddingRight,r=t(i).css("padding-right");t(i).data("padding-right",s).css("padding-right",parseFloat(r)+e._scrollbarWidth+"px")}),t(g.STICKY_CONTENT).each(function(n,i){var s=t(i)[0].style.marginRight,r=t(i).css("margin-right");t(i).data("margin-right",s).css("margin-right",parseFloat(r)-e._scrollbarWidth+"px")}),t(g.NAVBAR_TOGGLER).each(function(n,i){var s=t(i)[0].style.marginRight,r=t(i).css("margin-right");t(i).data("margin-right",s).css("margin-right",parseFloat(r)+e._scrollbarWidth+"px")});var n=document.body.style.paddingRight,i=t("body").css("padding-right");t("body").data("padding-right",n).css("padding-right",parseFloat(i)+this._scrollbarWidth+"px")}},p._resetScrollbar=function(){t(g.FIXED_CONTENT).each(function(e,n){var i=t(n).data("padding-right");"undefined"!=typeof i&&t(n).css("padding-right",i).removeData("padding-right")}),t(g.STICKY_CONTENT+", "+g.NAVBAR_TOGGLER).each(function(e,n){var i=t(n).data("margin-right");"undefined"!=typeof i&&t(n).css("margin-right",i).removeData("margin-right")});var e=t("body").data("padding-right");"undefined"!=typeof e&&t("body").css("padding-right",e).removeData("padding-right")},p._getScrollbarWidth=function(){var t=document.createElement("div");t.className=c,document.body.appendChild(t);var e=t.getBoundingClientRect().width-t.clientWidth;return document.body.removeChild(t),e},o._jQueryInterface=function(e,i){return this.each(function(){var s=t(this).data(n),a=r({},o.Default,t(this).data(),"object"==typeof e&&e);if(s||(s=new o(this,a),t(this).data(n,s)),"string"==typeof e){if("undefined"==typeof s[e])throw new TypeError('No method named "'+e+'"');s[e](i)}else a.show&&s.show(i)})},s(o,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return a}}]),o}();return t(document).on(h.CLICK_DATA_API,g.DATA_TOGGLE,function(e){var i,s=this,o=P.getSelectorFromElement(this);o&&(i=t(o)[0]);var a=t(i).data(n)?"toggle":r({},t(i).data(),t(this).data());"A"!==this.tagName&&"AREA"!==this.tagName||e.preventDefault();var l=t(i).one(h.SHOW,function(e){e.isDefaultPrevented()||l.one(h.HIDDEN,function(){t(s).is(":visible")&&s.focus()})});p._jQueryInterface.call(t(i),a,this)}),t.fn.modal=p._jQueryInterface,t.fn.modal.Constructor=p,t.fn.modal.noConflict=function(){return t.fn.modal=o,p._jQueryInterface},p}(e),U=function(t){var e="tooltip",i="bs.tooltip",o="."+i,a=t.fn[e],l=new RegExp("(^|\\s)bs-tooltip\\S+","g"),h={animation:"boolean",template:"string",title:"(string|element|function)",trigger:"string",delay:"(number|object)",html:"boolean",selector:"(string|boolean)",placement:"(string|function)",offset:"(number|string)",container:"(string|element|boolean)",fallbackPlacement:"(string|array)",boundary:"(string|element)"},c={AUTO:"auto",TOP:"top",RIGHT:"right",BOTTOM:"bottom",LEFT:"left"},u={animation:!0,template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,selector:!1,placement:"top",offset:0,container:!1,fallbackPlacement:"flip",boundary:"scrollParent"},f="show",d="out",_={HIDE:"hide"+o,HIDDEN:"hidden"+o,SHOW:"show"+o,SHOWN:"shown"+o,INSERTED:"inserted"+o,CLICK:"click"+o,FOCUSIN:"focusin"+o,FOCUSOUT:"focusout"+o,MOUSEENTER:"mouseenter"+o,MOUSELEAVE:"mouseleave"+o},g="fade",p="show",m=".tooltip-inner",v=".arrow",E="hover",T="focus",y="click",C="manual",I=function(){function a(t,e){if("undefined"==typeof n)throw new TypeError("Bootstrap tooltips require Popper.js (https://popper.js.org)");this._isEnabled=!0,this._timeout=0,this._hoverState="",this._activeTrigger={},this._popper=null,this.element=t,this.config=this._getConfig(e),this.tip=null,this._setListeners()}var I=a.prototype;return I.enable=function(){this._isEnabled=!0},I.disable=function(){this._isEnabled=!1},I.toggleEnabled=function(){this._isEnabled=!this._isEnabled},I.toggle=function(e){if(this._isEnabled)if(e){var n=this.constructor.DATA_KEY,i=t(e.currentTarget).data(n);i||(i=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(n,i)),i._activeTrigger.click=!i._activeTrigger.click,i._isWithActiveTrigger()?i._enter(null,i):i._leave(null,i)}else{if(t(this.getTipElement()).hasClass(p))return void this._leave(null,this);this._enter(null,this)}},I.dispose=function(){clearTimeout(this._timeout),t.removeData(this.element,this.constructor.DATA_KEY),t(this.element).off(this.constructor.EVENT_KEY),t(this.element).closest(".modal").off("hide.bs.modal"),this.tip&&t(this.tip).remove(),this._isEnabled=null,this._timeout=null,this._hoverState=null,this._activeTrigger=null,null!==this._popper&&this._popper.destroy(),this._popper=null,this.element=null,this.config=null,this.tip=null},I.show=function(){var e=this;if("none"===t(this.element).css("display"))throw new Error("Please use show on visible elements");var i=t.Event(this.constructor.Event.SHOW);if(this.isWithContent()&&this._isEnabled){t(this.element).trigger(i);var s=t.contains(this.element.ownerDocument.documentElement,this.element);if(i.isDefaultPrevented()||!s)return;var r=this.getTipElement(),o=P.getUID(this.constructor.NAME);r.setAttribute("id",o),this.element.setAttribute("aria-describedby",o),this.setContent(),this.config.animation&&t(r).addClass(g);var l="function"==typeof this.config.placement?this.config.placement.call(this,r,this.element):this.config.placement,h=this._getAttachment(l);this.addAttachmentClass(h);var c=!1===this.config.container?document.body:t(this.config.container);t(r).data(this.constructor.DATA_KEY,this),t.contains(this.element.ownerDocument.documentElement,this.tip)||t(r).appendTo(c),t(this.element).trigger(this.constructor.Event.INSERTED),this._popper=new n(this.element,r,{placement:h,modifiers:{offset:{offset:this.config.offset},flip:{behavior:this.config.fallbackPlacement},arrow:{element:v},preventOverflow:{boundariesElement:this.config.boundary}},onCreate:function(t){t.originalPlacement!==t.placement&&e._handlePopperPlacementChange(t)},onUpdate:function(t){e._handlePopperPlacementChange(t)}}),t(r).addClass(p),"ontouchstart"in document.documentElement&&t("body").children().on("mouseover",null,t.noop);var u=function(){e.config.animation&&e._fixTransition();var n=e._hoverState;e._hoverState=null,t(e.element).trigger(e.constructor.Event.SHOWN),n===d&&e._leave(null,e)};P.supportsTransitionEnd()&&t(this.tip).hasClass(g)?t(this.tip).one(P.TRANSITION_END,u).emulateTransitionEnd(a._TRANSITION_DURATION):u()}},I.hide=function(e){var n=this,i=this.getTipElement(),s=t.Event(this.constructor.Event.HIDE),r=function(){n._hoverState!==f&&i.parentNode&&i.parentNode.removeChild(i),n._cleanTipClass(),n.element.removeAttribute("aria-describedby"),t(n.element).trigger(n.constructor.Event.HIDDEN),null!==n._popper&&n._popper.destroy(),e&&e()};t(this.element).trigger(s),s.isDefaultPrevented()||(t(i).removeClass(p),"ontouchstart"in document.documentElement&&t("body").children().off("mouseover",null,t.noop),this._activeTrigger[y]=!1,this._activeTrigger[T]=!1,this._activeTrigger[E]=!1,P.supportsTransitionEnd()&&t(this.tip).hasClass(g)?t(i).one(P.TRANSITION_END,r).emulateTransitionEnd(150):r(),this._hoverState="")},I.update=function(){null!==this._popper&&this._popper.scheduleUpdate()},I.isWithContent=function(){return Boolean(this.getTitle())},I.addAttachmentClass=function(e){t(this.getTipElement()).addClass("bs-tooltip-"+e)},I.getTipElement=function(){return this.tip=this.tip||t(this.config.template)[0],this.tip},I.setContent=function(){var e=t(this.getTipElement());this.setElementContent(e.find(m),this.getTitle()),e.removeClass(g+" "+p)},I.setElementContent=function(e,n){var i=this.config.html;"object"==typeof n&&(n.nodeType||n.jquery)?i?t(n).parent().is(e)||e.empty().append(n):e.text(t(n).text()):e[i?"html":"text"](n)},I.getTitle=function(){var t=this.element.getAttribute("data-original-title");return t||(t="function"==typeof this.config.title?this.config.title.call(this.element):this.config.title),t},I._getAttachment=function(t){return c[t.toUpperCase()]},I._setListeners=function(){var e=this;this.config.trigger.split(" ").forEach(function(n){if("click"===n)t(e.element).on(e.constructor.Event.CLICK,e.config.selector,function(t){return e.toggle(t)});else if(n!==C){var i=n===E?e.constructor.Event.MOUSEENTER:e.constructor.Event.FOCUSIN,s=n===E?e.constructor.Event.MOUSELEAVE:e.constructor.Event.FOCUSOUT;t(e.element).on(i,e.config.selector,function(t){return e._enter(t)}).on(s,e.config.selector,function(t){return e._leave(t)})}t(e.element).closest(".modal").on("hide.bs.modal",function(){return e.hide()})}),this.config.selector?this.config=r({},this.config,{trigger:"manual",selector:""}):this._fixTitle()},I._fixTitle=function(){var t=typeof this.element.getAttribute("data-original-title");(this.element.getAttribute("title")||"string"!==t)&&(this.element.setAttribute("data-original-title",this.element.getAttribute("title")||""),this.element.setAttribute("title",""))},I._enter=function(e,n){var i=this.constructor.DATA_KEY;(n=n||t(e.currentTarget).data(i))||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(i,n)),e&&(n._activeTrigger["focusin"===e.type?T:E]=!0),t(n.getTipElement()).hasClass(p)||n._hoverState===f?n._hoverState=f:(clearTimeout(n._timeout),n._hoverState=f,n.config.delay&&n.config.delay.show?n._timeout=setTimeout(function(){n._hoverState===f&&n.show()},n.config.delay.show):n.show())},I._leave=function(e,n){var i=this.constructor.DATA_KEY;(n=n||t(e.currentTarget).data(i))||(n=new this.constructor(e.currentTarget,this._getDelegateConfig()),t(e.currentTarget).data(i,n)),e&&(n._activeTrigger["focusout"===e.type?T:E]=!1),n._isWithActiveTrigger()||(clearTimeout(n._timeout),n._hoverState=d,n.config.delay&&n.config.delay.hide?n._timeout=setTimeout(function(){n._hoverState===d&&n.hide()},n.config.delay.hide):n.hide())},I._isWithActiveTrigger=function(){for(var t in this._activeTrigger)if(this._activeTrigger[t])return!0;return!1},I._getConfig=function(n){return"number"==typeof(n=r({},this.constructor.Default,t(this.element).data(),n)).delay&&(n.delay={show:n.delay,hide:n.delay}),"number"==typeof n.title&&(n.title=n.title.toString()),"number"==typeof n.content&&(n.content=n.content.toString()),P.typeCheckConfig(e,n,this.constructor.DefaultType),n},I._getDelegateConfig=function(){var t={};if(this.config)for(var e in this.config)this.constructor.Default[e]!==this.config[e]&&(t[e]=this.config[e]);return t},I._cleanTipClass=function(){var e=t(this.getTipElement()),n=e.attr("class").match(l);null!==n&&n.length>0&&e.removeClass(n.join(""))},I._handlePopperPlacementChange=function(t){this._cleanTipClass(),this.addAttachmentClass(this._getAttachment(t.placement))},I._fixTransition=function(){var e=this.getTipElement(),n=this.config.animation;null===e.getAttribute("x-placement")&&(t(e).removeClass(g),this.config.animation=!1,this.hide(),this.show(),this.config.animation=n)},a._jQueryInterface=function(e){return this.each(function(){var n=t(this).data(i),s="object"==typeof e&&e;if((n||!/dispose|hide/.test(e))&&(n||(n=new a(this,s),t(this).data(i,n)),"string"==typeof e)){if("undefined"==typeof n[e])throw new TypeError('No method named "'+e+'"');n[e]()}})},s(a,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return u}},{key:"NAME",get:function(){return e}},{key:"DATA_KEY",get:function(){return i}},{key:"Event",get:function(){return _}},{key:"EVENT_KEY",get:function(){return o}},{key:"DefaultType",get:function(){return h}}]),a}();return t.fn[e]=I._jQueryInterface,t.fn[e].Constructor=I,t.fn[e].noConflict=function(){return t.fn[e]=a,I._jQueryInterface},I}(e),x=function(t){var e="popover",n="bs.popover",i="."+n,o=t.fn[e],a=new RegExp("(^|\\s)bs-popover\\S+","g"),l=r({},U.Default,{placement:"right",trigger:"click",content:"",template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'}),h=r({},U.DefaultType,{content:"(string|element|function)"}),c="fade",u="show",f=".popover-header",d=".popover-body",_={HIDE:"hide"+i,HIDDEN:"hidden"+i,SHOW:"show"+i,SHOWN:"shown"+i,INSERTED:"inserted"+i,CLICK:"click"+i,FOCUSIN:"focusin"+i,FOCUSOUT:"focusout"+i,MOUSEENTER:"mouseenter"+i,MOUSELEAVE:"mouseleave"+i},g=function(r){var o,g;function p(){return r.apply(this,arguments)||this}g=r,(o=p).prototype=Object.create(g.prototype),o.prototype.constructor=o,o.__proto__=g;var m=p.prototype;return m.isWithContent=function(){return this.getTitle()||this._getContent()},m.addAttachmentClass=function(e){t(this.getTipElement()).addClass("bs-popover-"+e)},m.getTipElement=function(){return this.tip=this.tip||t(this.config.template)[0],this.tip},m.setContent=function(){var e=t(this.getTipElement());this.setElementContent(e.find(f),this.getTitle());var n=this._getContent();"function"==typeof n&&(n=n.call(this.element)),this.setElementContent(e.find(d),n),e.removeClass(c+" "+u)},m._getContent=function(){return this.element.getAttribute("data-content")||this.config.content},m._cleanTipClass=function(){var e=t(this.getTipElement()),n=e.attr("class").match(a);null!==n&&n.length>0&&e.removeClass(n.join(""))},p._jQueryInterface=function(e){return this.each(function(){var i=t(this).data(n),s="object"==typeof e?e:null;if((i||!/destroy|hide/.test(e))&&(i||(i=new p(this,s),t(this).data(n,i)),"string"==typeof e)){if("undefined"==typeof i[e])throw new TypeError('No method named "'+e+'"');i[e]()}})},s(p,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return l}},{key:"NAME",get:function(){return e}},{key:"DATA_KEY",get:function(){return n}},{key:"Event",get:function(){return _}},{key:"EVENT_KEY",get:function(){return i}},{key:"DefaultType",get:function(){return h}}]),p}(U);return t.fn[e]=g._jQueryInterface,t.fn[e].Constructor=g,t.fn[e].noConflict=function(){return t.fn[e]=o,g._jQueryInterface},g}(e),K=function(t){var e="scrollspy",n="bs.scrollspy",i="."+n,o=t.fn[e],a={offset:10,method:"auto",target:""},l={offset:"number",method:"string",target:"(string|element)"},h={ACTIVATE:"activate"+i,SCROLL:"scroll"+i,LOAD_DATA_API:"load"+i+".data-api"},c="dropdown-item",u="active",f={DATA_SPY:'[data-spy="scroll"]',ACTIVE:".active",NAV_LIST_GROUP:".nav, .list-group",NAV_LINKS:".nav-link",NAV_ITEMS:".nav-item",LIST_ITEMS:".list-group-item",DROPDOWN:".dropdown",DROPDOWN_ITEMS:".dropdown-item",DROPDOWN_TOGGLE:".dropdown-toggle"},d="offset",_="position",g=function(){function o(e,n){var i=this;this._element=e,this._scrollElement="BODY"===e.tagName?window:e,this._config=this._getConfig(n),this._selector=this._config.target+" "+f.NAV_LINKS+","+this._config.target+" "+f.LIST_ITEMS+","+this._config.target+" "+f.DROPDOWN_ITEMS,this._offsets=[],this._targets=[],this._activeTarget=null,this._scrollHeight=0,t(this._scrollElement).on(h.SCROLL,function(t){return i._process(t)}),this.refresh(),this._process()}var g=o.prototype;return g.refresh=function(){var e=this,n=this._scrollElement===this._scrollElement.window?d:_,i="auto"===this._config.method?n:this._config.method,s=i===_?this._getScrollTop():0;this._offsets=[],this._targets=[],this._scrollHeight=this._getScrollHeight(),t.makeArray(t(this._selector)).map(function(e){var n,r=P.getSelectorFromElement(e);if(r&&(n=t(r)[0]),n){var o=n.getBoundingClientRect();if(o.width||o.height)return[t(n)[i]().top+s,r]}return null}).filter(function(t){return t}).sort(function(t,e){return t[0]-e[0]}).forEach(function(t){e._offsets.push(t[0]),e._targets.push(t[1])})},g.dispose=function(){t.removeData(this._element,n),t(this._scrollElement).off(i),this._element=null,this._scrollElement=null,this._config=null,this._selector=null,this._offsets=null,this._targets=null,this._activeTarget=null,this._scrollHeight=null},g._getConfig=function(n){if("string"!=typeof(n=r({},a,n)).target){var i=t(n.target).attr("id");i||(i=P.getUID(e),t(n.target).attr("id",i)),n.target="#"+i}return P.typeCheckConfig(e,n,l),n},g._getScrollTop=function(){return this._scrollElement===window?this._scrollElement.pageYOffset:this._scrollElement.scrollTop},g._getScrollHeight=function(){return this._scrollElement.scrollHeight||Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)},g._getOffsetHeight=function(){return this._scrollElement===window?window.innerHeight:this._scrollElement.getBoundingClientRect().height},g._process=function(){var t=this._getScrollTop()+this._config.offset,e=this._getScrollHeight(),n=this._config.offset+e-this._getOffsetHeight();if(this._scrollHeight!==e&&this.refresh(),t>=n){var i=this._targets[this._targets.length-1];this._activeTarget!==i&&this._activate(i)}else{if(this._activeTarget&&t<this._offsets[0]&&this._offsets[0]>0)return this._activeTarget=null,void this._clear();for(var s=this._offsets.length;s--;){this._activeTarget!==this._targets[s]&&t>=this._offsets[s]&&("undefined"==typeof this._offsets[s+1]||t<this._offsets[s+1])&&this._activate(this._targets[s])}}},g._activate=function(e){this._activeTarget=e,this._clear();var n=this._selector.split(",");n=n.map(function(t){return t+'[data-target="'+e+'"],'+t+'[href="'+e+'"]'});var i=t(n.join(","));i.hasClass(c)?(i.closest(f.DROPDOWN).find(f.DROPDOWN_TOGGLE).addClass(u),i.addClass(u)):(i.addClass(u),i.parents(f.NAV_LIST_GROUP).prev(f.NAV_LINKS+", "+f.LIST_ITEMS).addClass(u),i.parents(f.NAV_LIST_GROUP).prev(f.NAV_ITEMS).children(f.NAV_LINKS).addClass(u)),t(this._scrollElement).trigger(h.ACTIVATE,{relatedTarget:e})},g._clear=function(){t(this._selector).filter(f.ACTIVE).removeClass(u)},o._jQueryInterface=function(e){return this.each(function(){var i=t(this).data(n);if(i||(i=new o(this,"object"==typeof e&&e),t(this).data(n,i)),"string"==typeof e){if("undefined"==typeof i[e])throw new TypeError('No method named "'+e+'"');i[e]()}})},s(o,null,[{key:"VERSION",get:function(){return"4.0.0"}},{key:"Default",get:function(){return a}}]),o}();return t(window).on(h.LOAD_DATA_API,function(){for(var e=t.makeArray(t(f.DATA_SPY)),n=e.length;n--;){var i=t(e[n]);g._jQueryInterface.call(i,i.data())}}),t.fn[e]=g._jQueryInterface,t.fn[e].Constructor=g,t.fn[e].noConflict=function(){return t.fn[e]=o,g._jQueryInterface},g}(e),V=function(t){var e="bs.tab",n="."+e,i=t.fn.tab,r={HIDE:"hide"+n,HIDDEN:"hidden"+n,SHOW:"show"+n,SHOWN:"shown"+n,CLICK_DATA_API:"click.bs.tab.data-api"},o="dropdown-menu",a="active",l="disabled",h="fade",c="show",u=".dropdown",f=".nav, .list-group",d=".active",_="> li > .active",g='[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',p=".dropdown-toggle",m="> .dropdown-menu .active",v=function(){function n(t){this._element=t}var i=n.prototype;return i.show=function(){var e=this;if(!(this._element.parentNode&&this._element.parentNode.nodeType===Node.ELEMENT_NODE&&t(this._element).hasClass(a)||t(this._element).hasClass(l))){var n,i,s=t(this._element).closest(f)[0],o=P.getSelectorFromElement(this._element);if(s){var h="UL"===s.nodeName?_:d;i=(i=t.makeArray(t(s).find(h)))[i.length-1]}var c=t.Event(r.HIDE,{relatedTarget:this._element}),u=t.Event(r.SHOW,{relatedTarget:i});if(i&&t(i).trigger(c),t(this._element).trigger(u),!u.isDefaultPrevented()&&!c.isDefaultPrevented()){o&&(n=t(o)[0]),this._activate(this._element,s);var g=function(){var n=t.Event(r.HIDDEN,{relatedTarget:e._element}),s=t.Event(r.SHOWN,{relatedTarget:i});t(i).trigger(n),t(e._element).trigger(s)};n?this._activate(n,n.parentNode,g):g()}}},i.dispose=function(){t.removeData(this._element,e),this._element=null},i._activate=function(e,n,i){var s=this,r=("UL"===n.nodeName?t(n).find(_):t(n).children(d))[0],o=i&&P.supportsTransitionEnd()&&r&&t(r).hasClass(h),a=function(){return s._transitionComplete(e,r,i)};r&&o?t(r).one(P.TRANSITION_END,a).emulateTransitionEnd(150):a()},i._transitionComplete=function(e,n,i){if(n){t(n).removeClass(c+" "+a);var s=t(n.parentNode).find(m)[0];s&&t(s).removeClass(a),"tab"===n.getAttribute("role")&&n.setAttribute("aria-selected",!1)}if(t(e).addClass(a),"tab"===e.getAttribute("role")&&e.setAttribute("aria-selected",!0),P.reflow(e),t(e).addClass(c),e.parentNode&&t(e.parentNode).hasClass(o)){var r=t(e).closest(u)[0];r&&t(r).find(p).addClass(a),e.setAttribute("aria-expanded",!0)}i&&i()},n._jQueryInterface=function(i){return this.each(function(){var s=t(this),r=s.data(e);if(r||(r=new n(this),s.data(e,r)),"string"==typeof i){if("undefined"==typeof r[i])throw new TypeError('No method named "'+i+'"');r[i]()}})},s(n,null,[{key:"VERSION",get:function(){return"4.0.0"}}]),n}();return t(document).on(r.CLICK_DATA_API,g,function(e){e.preventDefault(),v._jQueryInterface.call(t(this),"show")}),t.fn.tab=v._jQueryInterface,t.fn.tab.Constructor=v,t.fn.tab.noConflict=function(){return t.fn.tab=i,v._jQueryInterface},v}(e);!function(t){if("undefined"==typeof t)throw new TypeError("Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.");var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1===e[0]&&9===e[1]&&e[2]<1||e[0]>=4)throw new Error("Bootstrap's JavaScript requires at least jQuery v1.9.1 but less than v4.0.0")}(e),t.Util=P,t.Alert=L,t.Button=R,t.Carousel=j,t.Collapse=H,t.Dropdown=W,t.Modal=M,t.Popover=x,t.Scrollspy=K,t.Tab=V,t.Tooltip=U,Object.defineProperty(t,"__esModule",{value:!0})});
+//# sourceMappingURL=bootstrap.min.js.map
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/favicon.ico b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/favicon.ico
new file mode 100644
index 00000000..b48b3442
Binary files /dev/null and b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/favicon.ico differ
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/holder.min.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/holder.min.js
new file mode 100644
index 00000000..62255af4
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/holder.min.js
@@ -0,0 +1,13 @@
+/*!
+
+Holder - client side image placeholders
+Version 2.9.4+cabil
+© 2016 Ivan Malopinsky - http://imsky.co
+
+Site:     http://holderjs.com
+Issues:   https://github.com/imsky/holder/issues
+License:  MIT
+
+*/
+!function(e){if(e.document){var t=e.document;t.querySelectorAll||(t.querySelectorAll=function(n){var r,i=t.createElement("style"),o=[];for(t.documentElement.firstChild.appendChild(i),t._qsa=[],i.styleSheet.cssText=n+"{x-qsa:expression(document._qsa && document._qsa.push(this))}",e.scrollBy(0,0),i.parentNode.removeChild(i);t._qsa.length;)r=t._qsa.shift(),r.style.removeAttribute("x-qsa"),o.push(r);return t._qsa=null,o}),t.querySelector||(t.querySelector=function(e){var n=t.querySelectorAll(e);return n.length?n[0]:null}),t.getElementsByClassName||(t.getElementsByClassName=function(e){return e=String(e).replace(/^|\s+/g,"."),t.querySelectorAll(e)}),Object.keys||(Object.keys=function(e){if(e!==Object(e))throw TypeError("Object.keys called on non-object");var t,n=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.push(t);return n}),Array.prototype.forEach||(Array.prototype.forEach=function(e){if(void 0===this||null===this)throw TypeError();var t=Object(this),n=t.length>>>0;if("function"!=typeof e)throw TypeError();var r,i=arguments[1];for(r=0;r<n;r++)r in t&&e.call(i,t[r],r,t)}),function(e){var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";e.atob=e.atob||function(e){e=String(e);var n,r=0,i=[],o=0,a=0;if(e=e.replace(/\s/g,""),e.length%4===0&&(e=e.replace(/=+$/,"")),e.length%4===1)throw Error("InvalidCharacterError");if(/[^+\/0-9A-Za-z]/.test(e))throw Error("InvalidCharacterError");for(;r<e.length;)n=t.indexOf(e.charAt(r)),o=o<<6|n,a+=6,24===a&&(i.push(String.fromCharCode(o>>16&255)),i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o)),a=0,o=0),r+=1;return 12===a?(o>>=4,i.push(String.fromCharCode(255&o))):18===a&&(o>>=2,i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o))),i.join("")},e.btoa=e.btoa||function(e){e=String(e);var n,r,i,o,a,s,l,h=0,u=[];if(/[^\x00-\xFF]/.test(e))throw Error("InvalidCharacterError");for(;h<e.length;)n=e.charCodeAt(h++),r=e.charCodeAt(h++),i=e.charCodeAt(h++),o=n>>2,a=(3&n)<<4|r>>4,s=(15&r)<<2|i>>6,l=63&i,h===e.length+2?(s=64,l=64):h===e.length+1&&(l=64),u.push(t.charAt(o),t.charAt(a),t.charAt(s),t.charAt(l));return u.join("")}}(e),Object.prototype.hasOwnProperty||(Object.prototype.hasOwnProperty=function(e){var t=this.__proto__||this.constructor.prototype;return e in this&&(!(e in t)||t[e]!==this[e])}),function(){if("performance"in e==!1&&(e.performance={}),Date.now=Date.now||function(){return(new Date).getTime()},"now"in e.performance==!1){var t=Date.now();performance.timing&&performance.timing.navigationStart&&(t=performance.timing.navigationStart),e.performance.now=function(){return Date.now()-t}}}(),e.requestAnimationFrame||(e.webkitRequestAnimationFrame&&e.webkitCancelAnimationFrame?!function(e){e.requestAnimationFrame=function(t){return webkitRequestAnimationFrame(function(){t(e.performance.now())})},e.cancelAnimationFrame=e.webkitCancelAnimationFrame}(e):e.mozRequestAnimationFrame&&e.mozCancelAnimationFrame?!function(e){e.requestAnimationFrame=function(t){return mozRequestAnimationFrame(function(){t(e.performance.now())})},e.cancelAnimationFrame=e.mozCancelAnimationFrame}(e):!function(e){e.requestAnimationFrame=function(t){return e.setTimeout(t,1e3/60)},e.cancelAnimationFrame=e.clearTimeout}(e))}}(this),function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Holder=t():e.Holder=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){(function(t){function r(e,t,n,r){var a=i(n.substr(n.lastIndexOf(e.domain)),e);a&&o({mode:null,el:r,flags:a,engineSettings:t})}function i(e,t){var n={theme:k(O.settings.themes.gray,null),stylesheets:t.stylesheets,instanceOptions:t},r=e.indexOf("?"),i=[e];r!==-1&&(i=[e.slice(0,r),e.slice(r+1)]);var o=i[0].split("/");n.holderURL=e;var a=o[1],s=a.match(/([\d]+p?)x([\d]+p?)/);if(!s)return!1;if(n.fluid=a.indexOf("p")!==-1,n.dimensions={width:s[1].replace("p","%"),height:s[2].replace("p","%")},2===i.length){var l=v.parse(i[1]);if(w.truthy(l.ratio)){n.fluid=!0;var h=parseFloat(n.dimensions.width.replace("%","")),u=parseFloat(n.dimensions.height.replace("%",""));u=Math.floor(100*(u/h)),h=100,n.dimensions.width=h+"%",n.dimensions.height=u+"%"}if(n.auto=w.truthy(l.auto),l.bg&&(n.theme.bg=w.parseColor(l.bg)),l.fg&&(n.theme.fg=w.parseColor(l.fg)),l.bg&&!l.fg&&(n.autoFg=!0),l.theme&&n.instanceOptions.themes.hasOwnProperty(l.theme)&&(n.theme=k(n.instanceOptions.themes[l.theme],null)),l.text&&(n.text=l.text),l.textmode&&(n.textmode=l.textmode),l.size&&(n.size=l.size),l.font&&(n.font=l.font),l.align&&(n.align=l.align),l.lineWrap&&(n.lineWrap=l.lineWrap),n.nowrap=w.truthy(l.nowrap),n.outline=w.truthy(l.outline),w.truthy(l.random)){O.vars.cache.themeKeys=O.vars.cache.themeKeys||Object.keys(n.instanceOptions.themes);var c=O.vars.cache.themeKeys[0|Math.random()*O.vars.cache.themeKeys.length];n.theme=k(n.instanceOptions.themes[c],null)}}return n}function o(e){var t=e.mode,n=e.el,r=e.flags,i=e.engineSettings,o=r.dimensions,s=r.theme,l=o.width+"x"+o.height;t=null==t?r.fluid?"fluid":"image":t;var c=/holder_([a-z]+)/g,d=!1;if(null!=r.text&&(s.text=r.text,"object"===n.nodeName.toLowerCase())){for(var f=s.text.split("\\n"),p=0;p<f.length;p++)f[p]=w.encodeHtmlEntity(f[p]);s.text=f.join("\\n")}if(s.text){var g=s.text.match(c);null!==g&&g.forEach(function(e){"holder_dimensions"===e&&(s.text=s.text.replace(e,l))})}var m=r.holderURL,v=k(i,null);if(r.font&&(s.font=r.font,!v.noFontFallback&&"img"===n.nodeName.toLowerCase()&&O.setup.supportsCanvas&&"svg"===v.renderer&&(v=k(v,{renderer:"canvas"}))),r.font&&"canvas"==v.renderer&&(v.reRender=!0),"background"==t)null==n.getAttribute("data-background-src")&&x.setAttr(n,{"data-background-src":m});else{var y={};y[O.vars.dataAttr]=m,x.setAttr(n,y)}r.theme=s,n.holderData={flags:r,engineSettings:v},"image"!=t&&"fluid"!=t||x.setAttr(n,{alt:s.text?d?s.text:s.text+" ["+l+"]":l});var b={mode:t,el:n,holderSettings:{dimensions:o,theme:s,flags:r},engineSettings:v};"image"==t?(r.auto||(n.style.width=o.width+"px",n.style.height=o.height+"px"),"html"==v.renderer?n.style.backgroundColor=s.bg:(a(b),"exact"==r.textmode&&(n.holderData.resizeUpdate=!0,O.vars.resizableImages.push(n),h(n)))):"background"==t&&"html"!=v.renderer?a(b):"fluid"==t&&(n.holderData.resizeUpdate=!0,"%"==o.height.slice(-1)?n.style.height=o.height:null!=r.auto&&r.auto||(n.style.height=o.height+"px"),"%"==o.width.slice(-1)?n.style.width=o.width:null!=r.auto&&r.auto||(n.style.width=o.width+"px"),"inline"!=n.style.display&&""!==n.style.display&&"none"!=n.style.display||(n.style.display="block"),u(n),"html"==v.renderer?n.style.backgroundColor=s.bg:(O.vars.resizableImages.push(n),h(n)))}function a(e){function n(){var t=null;switch(l.renderer){case"canvas":t=E(u,e);break;case"svg":t=C(u,e);break;default:throw"Holder: invalid renderer: "+l.renderer}return t}var r=null,i=e.mode,o=e.el,a=e.holderSettings,l=e.engineSettings;switch(l.renderer){case"svg":if(!O.setup.supportsSVG)return;break;case"canvas":if(!O.setup.supportsCanvas)return;break;default:return}var h={width:a.dimensions.width,height:a.dimensions.height,theme:a.theme,flags:a.flags},u=s(h);if(r=n(),null==r)throw"Holder: couldn't render placeholder";"background"==i?(o.style.backgroundImage="url("+r+")",l.noBackgroundSize||(o.style.backgroundSize=h.width+"px "+h.height+"px")):("img"===o.nodeName.toLowerCase()?x.setAttr(o,{src:r}):"object"===o.nodeName.toLowerCase()&&x.setAttr(o,{data:r,type:"image/svg+xml"}),l.reRender&&t.setTimeout(function(){var e=n();if(null==e)throw"Holder: couldn't render placeholder";"img"===o.nodeName.toLowerCase()?x.setAttr(o,{src:e}):"object"===o.nodeName.toLowerCase()&&x.setAttr(o,{data:e,type:"image/svg+xml"})},150)),x.setAttr(o,{"data-holder-rendered":!0})}function s(e){function t(e,t,n,r){t.width=n,t.height=r,e.width=Math.max(e.width,t.width),e.height+=t.height}var n=O.defaults.size;switch(parseFloat(e.theme.size)?n=e.theme.size:parseFloat(e.flags.size)&&(n=e.flags.size),e.font={family:e.theme.font?e.theme.font:"Arial, Helvetica, Open Sans, sans-serif",size:l(e.width,e.height,n,O.defaults.scale),units:e.theme.units?e.theme.units:O.defaults.units,weight:e.theme.fontweight?e.theme.fontweight:"bold"},e.text=e.theme.text||Math.floor(e.width)+"x"+Math.floor(e.height),e.noWrap=e.theme.nowrap||e.flags.nowrap,e.align=e.theme.align||e.flags.align||"center",e.flags.textmode){case"literal":e.text=e.flags.dimensions.width+"x"+e.flags.dimensions.height;break;case"exact":if(!e.flags.exactDimensions)break;e.text=Math.floor(e.flags.exactDimensions.width)+"x"+Math.floor(e.flags.exactDimensions.height)}var r=e.flags.lineWrap||O.setup.lineWrapRatio,i=e.width*r,o=i,a=new y({width:e.width,height:e.height}),s=a.Shape,h=new s.Rect("holderBg",{fill:e.theme.bg});if(h.resize(e.width,e.height),a.root.add(h),e.flags.outline){var u=new S(h.properties.fill);u=u.lighten(u.lighterThan("7f7f7f")?-.1:.1),h.properties.outline={fill:u.toHex(!0),width:2}}var c=e.theme.fg;if(e.flags.autoFg){var d=new S(h.properties.fill),f=new S("fff"),p=new S("000",{alpha:.285714});c=d.blendAlpha(d.lighterThan("7f7f7f")?p:f).toHex(!0)}var g=new s.Group("holderTextGroup",{text:e.text,align:e.align,font:e.font,fill:c});g.moveTo(null,null,1),a.root.add(g);var m=g.textPositionData=z(a);if(!m)throw"Holder: staging fallback not supported yet.";g.properties.leading=m.boundingBox.height;var v=null,w=null;if(m.lineCount>1){var b,x=0,A=0,C=0;w=new s.Group("line"+C),"left"!==e.align&&"right"!==e.align||(o=e.width*(1-2*(1-r)));for(var E=0;E<m.words.length;E++){var k=m.words[E];v=new s.Text(k.text);var T="\\n"==k.text;!e.noWrap&&(x+k.width>=o||T===!0)&&(t(g,w,x,g.properties.leading),g.add(w),x=0,A+=g.properties.leading,C+=1,w=new s.Group("line"+C),w.y=A),T!==!0&&(v.moveTo(x,0),x+=m.spaceWidth+k.width,w.add(v))}if(t(g,w,x,g.properties.leading),g.add(w),"left"===e.align)g.moveTo(e.width-i,null,null);else if("right"===e.align){for(b in g.children)w=g.children[b],w.moveTo(e.width-w.width,null,null);g.moveTo(0-(e.width-i),null,null)}else{for(b in g.children)w=g.children[b],w.moveTo((g.width-w.width)/2,null,null);g.moveTo((e.width-g.width)/2,null,null)}g.moveTo(null,(e.height-g.height)/2,null),(e.height-g.height)/2<0&&g.moveTo(null,0,null)}else v=new s.Text(e.text),w=new s.Group("line0"),w.add(v),g.add(w),"left"===e.align?g.moveTo(e.width-i,null,null):"right"===e.align?g.moveTo(0-(e.width-i),null,null):g.moveTo((e.width-m.boundingBox.width)/2,null,null),g.moveTo(null,(e.height-m.boundingBox.height)/2,null);return a}function l(e,t,n,r){var i=parseInt(e,10),o=parseInt(t,10),a=Math.max(i,o),s=Math.min(i,o),l=.8*Math.min(s,a*r);return Math.round(Math.max(n,l))}function h(e){var t;t=null==e||null==e.nodeType?O.vars.resizableImages:[e];for(var n=0,r=t.length;n<r;n++){var i=t[n];if(i.holderData){var o=i.holderData.flags,s=T(i);if(s){if(!i.holderData.resizeUpdate)continue;if(o.fluid&&o.auto){var l=i.holderData.fluidConfig;switch(l.mode){case"width":s.height=s.width/l.ratio;break;case"height":s.width=s.height*l.ratio}}var h={mode:"image",holderSettings:{dimensions:s,theme:o.theme,flags:o},el:i,engineSettings:i.holderData.engineSettings};"exact"==o.textmode&&(o.exactDimensions=s,h.holderSettings.dimensions=o.dimensions),a(h)}else f(i)}}}function u(e){if(e.holderData){var t=T(e);if(t){var n=e.holderData.flags,r={fluidHeight:"%"==n.dimensions.height.slice(-1),fluidWidth:"%"==n.dimensions.width.slice(-1),mode:null,initialDimensions:t};r.fluidWidth&&!r.fluidHeight?(r.mode="width",r.ratio=r.initialDimensions.width/parseFloat(n.dimensions.height)):!r.fluidWidth&&r.fluidHeight&&(r.mode="height",r.ratio=parseFloat(n.dimensions.width)/r.initialDimensions.height),e.holderData.fluidConfig=r}else f(e)}}function c(){var e,n=[],r=Object.keys(O.vars.invisibleImages);r.forEach(function(t){e=O.vars.invisibleImages[t],T(e)&&"img"==e.nodeName.toLowerCase()&&(n.push(e),delete O.vars.invisibleImages[t])}),n.length&&F.run({images:n}),setTimeout(function(){t.requestAnimationFrame(c)},10)}function d(){O.vars.visibilityCheckStarted||(t.requestAnimationFrame(c),O.vars.visibilityCheckStarted=!0)}function f(e){e.holderData.invisibleId||(O.vars.invisibleId+=1,O.vars.invisibleImages["i"+O.vars.invisibleId]=e,e.holderData.invisibleId=O.vars.invisibleId)}function p(e){O.vars.debounceTimer||e.call(this),O.vars.debounceTimer&&t.clearTimeout(O.vars.debounceTimer),O.vars.debounceTimer=t.setTimeout(function(){O.vars.debounceTimer=null,e.call(this)},O.setup.debounce)}function g(){p(function(){h(null)})}var m=n(2),v=n(3),y=n(6),w=n(7),b=n(8),x=n(9),S=n(10),A=n(11),C=n(12),E=n(15),k=w.extend,T=w.dimensionCheck,j=A.svg_ns,F={version:A.version,addTheme:function(e,t){return null!=e&&null!=t&&(O.settings.themes[e]=t),delete O.vars.cache.themeKeys,this},addImage:function(e,t){var n=x.getNodeArray(t);return n.forEach(function(t){var n=x.newEl("img"),r={};r[O.setup.dataAttr]=e,x.setAttr(n,r),t.appendChild(n)}),this},setResizeUpdate:function(e,t){e.holderData&&(e.holderData.resizeUpdate=!!t,e.holderData.resizeUpdate&&h(e))},run:function(e){e=e||{};var n={},a=k(O.settings,e);O.vars.preempted=!0,O.vars.dataAttr=a.dataAttr||O.setup.dataAttr,n.renderer=a.renderer?a.renderer:O.setup.renderer,O.setup.renderers.join(",").indexOf(n.renderer)===-1&&(n.renderer=O.setup.supportsSVG?"svg":O.setup.supportsCanvas?"canvas":"html");var s=x.getNodeArray(a.images),l=x.getNodeArray(a.bgnodes),h=x.getNodeArray(a.stylenodes),u=x.getNodeArray(a.objects);return n.stylesheets=[],n.svgXMLStylesheet=!0,n.noFontFallback=!!a.noFontFallback,n.noBackgroundSize=!!a.noBackgroundSize,h.forEach(function(e){if(e.attributes.rel&&e.attributes.href&&"stylesheet"==e.attributes.rel.value){var t=e.attributes.href.value,r=x.newEl("a");r.href=t;var i=r.protocol+"//"+r.host+r.pathname+r.search;n.stylesheets.push(i)}}),l.forEach(function(e){if(t.getComputedStyle){var r=t.getComputedStyle(e,null).getPropertyValue("background-image"),s=e.getAttribute("data-background-src"),l=s||r,h=null,u=a.domain+"/",c=l.indexOf(u);if(0===c)h=l;else if(1===c&&"?"===l[0])h=l.slice(1);else{var d=l.substr(c).match(/([^\"]*)"?\)/);if(null!==d)h=d[1];else if(0===l.indexOf("url("))throw"Holder: unable to parse background URL: "+l}if(h){var f=i(h,a);f&&o({mode:"background",el:e,flags:f,engineSettings:n})}}}),u.forEach(function(e){var t={};try{t.data=e.getAttribute("data"),t.dataSrc=e.getAttribute(O.vars.dataAttr)}catch(i){}var o=null!=t.data&&0===t.data.indexOf(a.domain),s=null!=t.dataSrc&&0===t.dataSrc.indexOf(a.domain);o?r(a,n,t.data,e):s&&r(a,n,t.dataSrc,e)}),s.forEach(function(e){var t={};try{t.src=e.getAttribute("src"),t.dataSrc=e.getAttribute(O.vars.dataAttr),t.rendered=e.getAttribute("data-holder-rendered")}catch(i){}var o=null!=t.src,s=null!=t.dataSrc&&0===t.dataSrc.indexOf(a.domain),l=null!=t.rendered&&"true"==t.rendered;o?0===t.src.indexOf(a.domain)?r(a,n,t.src,e):s&&(l?r(a,n,t.dataSrc,e):!function(e,t,n,i,o){w.imageExists(e,function(e){e||r(t,n,i,o)})}(t.src,a,n,t.dataSrc,e)):s&&r(a,n,t.dataSrc,e)}),this}},O={settings:{domain:"holder.js",images:"img",objects:"object",bgnodes:"body .holderjs",stylenodes:"head link.holderjs",themes:{gray:{bg:"#EEEEEE",fg:"#AAAAAA"},social:{bg:"#3a5a97",fg:"#FFFFFF"},industrial:{bg:"#434A52",fg:"#C2F200"},sky:{bg:"#0D8FDB",fg:"#FFFFFF"},vine:{bg:"#39DBAC",fg:"#1E292C"},lava:{bg:"#F8591A",fg:"#1C2846"}}},defaults:{size:10,units:"pt",scale:1/16}},z=function(){var e=null,t=null,n=null;return function(r){var i=r.root;if(O.setup.supportsSVG){var o=!1,a=function(e){return document.createTextNode(e)};null!=e&&e.parentNode===document.body||(o=!0),e=b.initSVG(e,i.properties.width,i.properties.height),e.style.display="block",o&&(t=x.newEl("text",j),n=a(null),x.setAttr(t,{x:0}),t.appendChild(n),e.appendChild(t),document.body.appendChild(e),e.style.visibility="hidden",e.style.position="absolute",e.style.top="-100%",e.style.left="-100%");var s=i.children.holderTextGroup,l=s.properties;x.setAttr(t,{y:l.font.size,style:w.cssProps({"font-weight":l.font.weight,"font-size":l.font.size+l.font.units,"font-family":l.font.family})}),n.nodeValue=l.text;var h=t.getBBox(),u=Math.ceil(h.width/i.properties.width),c=l.text.split(" "),d=l.text.match(/\\n/g);u+=null==d?0:d.length,n.nodeValue=l.text.replace(/[ ]+/g,"");var f=t.getComputedTextLength(),p=h.width-f,g=Math.round(p/Math.max(1,c.length-1)),m=[];if(u>1){n.nodeValue="";for(var v=0;v<c.length;v++)if(0!==c[v].length){n.nodeValue=w.decodeHtmlEntity(c[v]);var y=t.getBBox();m.push({text:c[v],width:y.width})}}return e.style.display="none",{spaceWidth:g,lineCount:u,boundingBox:h,words:m}}return!1}}();for(var D in O.flags)O.flags.hasOwnProperty(D)&&(O.flags[D].match=function(e){return e.match(this.regex)});O.setup={renderer:"html",debounce:100,ratio:1,supportsCanvas:!1,supportsSVG:!1,lineWrapRatio:.9,dataAttr:"data-src",renderers:["html","canvas","svg"]},O.vars={preempted:!1,resizableImages:[],invisibleImages:{},invisibleId:0,visibilityCheckStarted:!1,debounceTimer:null,cache:{}},function(){var e=x.newEl("canvas");e.getContext&&e.toDataURL("image/png").indexOf("data:image/png")!=-1&&(O.setup.renderer="canvas",O.setup.supportsCanvas=!0),document.createElementNS&&document.createElementNS(j,"svg").createSVGRect&&(O.setup.renderer="svg",O.setup.supportsSVG=!0)}(),d(),m&&m(function(){O.vars.preempted||F.run(),t.addEventListener?(t.addEventListener("resize",g,!1),t.addEventListener("orientationchange",g,!1)):t.attachEvent("onresize",g),"object"==typeof t.Turbolinks&&t.document.addEventListener("page:change",function(){F.run()})}),e.exports=F}).call(t,function(){return this}())},function(e,t){function n(e){function t(e){if(!x){if(!a.body)return i(t);for(x=!0;e=S.shift();)i(e)}}function n(e){(w||e.type===l||a[d]===c)&&(r(),t())}function r(){w?(a[y](m,n,h),e[y](l,n,h)):(a[p](v,n),e[p](u,n))}function i(e,t){setTimeout(e,+t>=0?t:1)}function o(e){x?i(e):S.push(e)}null==document.readyState&&document.addEventListener&&(document.addEventListener("DOMContentLoaded",function C(){document.removeEventListener("DOMContentLoaded",C,!1),document.readyState="complete"},!1),document.readyState="loading");var a=e.document,s=a.documentElement,l="load",h=!1,u="on"+l,c="complete",d="readyState",f="attachEvent",p="detachEvent",g="addEventListener",m="DOMContentLoaded",v="onreadystatechange",y="removeEventListener",w=g in a,b=h,x=h,S=[];if(a[d]===c)i(t);else if(w)a[g](m,n,h),e[g](l,n,h);else{a[f](v,n),e[f](u,n);try{b=null==e.frameElement&&s}catch(A){}b&&b.doScroll&&!function E(){if(!x){try{b.doScroll("left")}catch(e){return i(E,50)}r(),t()}}()}return o.version="1.4.0",o.isReady=function(){return x},o}e.exports="undefined"!=typeof window&&n(window)},function(e,t,n){var r=encodeURIComponent,i=decodeURIComponent,o=n(4),a=n(5),s=/(\w+)\[(\d+)\]/,l=/\w+\.\w+/;t.parse=function(e){if("string"!=typeof e)return{};if(e=o(e),""===e)return{};"?"===e.charAt(0)&&(e=e.slice(1));for(var t={},n=e.split("&"),r=0;r<n.length;r++){var a,h,u,c=n[r].split("="),d=i(c[0]);if(a=s.exec(d))t[a[1]]=t[a[1]]||[],t[a[1]][a[2]]=i(c[1]);else if(a=l.test(d)){for(a=d.split("."),h=t;a.length;)if(u=a.shift(),u.length){if(h[u]){if(h[u]&&"object"!=typeof h[u])break}else h[u]={};a.length||(h[u]=i(c[1])),h=h[u]}}else t[c[0]]=null==c[1]?"":i(c[1])}return t},t.stringify=function(e){if(!e)return"";var t=[];for(var n in e){var i=e[n];if("array"!=a(i))t.push(r(n)+"="+r(e[n]));else for(var o=0;o<i.length;++o)t.push(r(n+"["+o+"]")+"="+r(i[o]))}return t.join("&")}},function(e,t){function n(e){return e.replace(/^\s*|\s*$/g,"")}t=e.exports=n,t.left=function(e){return e.replace(/^\s*/,"")},t.right=function(e){return e.replace(/\s*$/,"")}},function(e,t){function n(e){return!(null==e||!(e._isBuffer||e.constructor&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)))}var r=Object.prototype.toString;e.exports=function(e){switch(r.call(e)){case"[object Date]":return"date";case"[object RegExp]":return"regexp";case"[object Arguments]":return"arguments";case"[object Array]":return"array";case"[object Error]":return"error"}return null===e?"null":void 0===e?"undefined":e!==e?"nan":e&&1===e.nodeType?"element":n(e)?"buffer":(e=e.valueOf?e.valueOf():Object.prototype.valueOf.apply(e),typeof e)}},function(e,t){var n=function(e){function t(e,t){for(var n in t)e[n]=t[n];return e}var n=1,r=function(e){n++,this.parent=null,this.children={},this.id=n,this.name="n"+n,"undefined"!=typeof e&&(this.name=e),this.x=this.y=this.z=0,this.width=this.height=0};r.prototype.resize=function(e,t){null!=e&&(this.width=e),null!=t&&(this.height=t)},r.prototype.moveTo=function(e,t,n){this.x=null!=e?e:this.x,this.y=null!=t?t:this.y,this.z=null!=n?n:this.z},r.prototype.add=function(e){var t=e.name;if("undefined"!=typeof this.children[t])throw"SceneGraph: child already exists: "+t;this.children[t]=e,e.parent=this};var i=function(){r.call(this,"root"),this.properties=e};i.prototype=new r;var o=function(e,n){if(r.call(this,e),this.properties={fill:"#000000"},"undefined"!=typeof n)t(this.properties,n);else if("undefined"!=typeof e&&"string"!=typeof e)throw"SceneGraph: invalid node name"};o.prototype=new r;var a=function(){o.apply(this,arguments),this.type="group"};a.prototype=new o;var s=function(){o.apply(this,arguments),this.type="rect"};s.prototype=new o;var l=function(e){o.call(this),this.type="text",this.properties.text=e};l.prototype=new o;var h=new i;return this.Shape={Rect:s,Text:l,Group:a},this.root=h,this};e.exports=n},function(e,t){(function(e){t.extend=function(e,t){var n={};for(var r in e)e.hasOwnProperty(r)&&(n[r]=e[r]);if(null!=t)for(var i in t)t.hasOwnProperty(i)&&(n[i]=t[i]);return n},t.cssProps=function(e){var t=[];for(var n in e)e.hasOwnProperty(n)&&t.push(n+":"+e[n]);return t.join(";")},t.encodeHtmlEntity=function(e){for(var t=[],n=0,r=e.length-1;r>=0;r--)n=e.charCodeAt(r),n>128?t.unshift(["&#",n,";"].join("")):t.unshift(e[r]);return t.join("")},t.imageExists=function(e,t){var n=new Image;n.onerror=function(){t.call(this,!1)},n.onload=function(){t.call(this,!0)},n.src=e},t.decodeHtmlEntity=function(e){return e.replace(/&#(\d+);/g,function(e,t){return String.fromCharCode(t)})},t.dimensionCheck=function(e){var t={height:e.clientHeight,width:e.clientWidth};return!(!t.height||!t.width)&&t},t.truthy=function(e){return"string"==typeof e?"true"===e||"yes"===e||"1"===e||"on"===e||"✓"===e:!!e},t.parseColor=function(e){var t,n=/(^(?:#?)[0-9a-f]{6}$)|(^(?:#?)[0-9a-f]{3}$)/i,r=/^rgb\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/,i=/^rgba\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0\.\d{1,}|1)\)$/,o=e.match(n);return null!==o?(t=o[1]||o[2],"#"!==t[0]?"#"+t:t):(o=e.match(r),null!==o?t="rgb("+o.slice(1).join(",")+")":(o=e.match(i),null!==o?t="rgba("+o.slice(1).join(",")+")":null))},t.canvasRatio=function(){var t=1,n=1;if(e.document){var r=e.document.createElement("canvas");if(r.getContext){var i=r.getContext("2d");t=e.devicePixelRatio||1,n=i.webkitBackingStorePixelRatio||i.mozBackingStorePixelRatio||i.msBackingStorePixelRatio||i.oBackingStorePixelRatio||i.backingStorePixelRatio||1}}return t/n}}).call(t,function(){return this}())},function(e,t,n){(function(e){var r=n(9),i="http://www.w3.org/2000/svg",o=8;t.initSVG=function(e,t,n){var a,s,l=!1;e&&e.querySelector?(s=e.querySelector("style"),null===s&&(l=!0)):(e=r.newEl("svg",i),l=!0),l&&(a=r.newEl("defs",i),s=r.newEl("style",i),r.setAttr(s,{type:"text/css"}),a.appendChild(s),e.appendChild(a)),e.webkitMatchesSelector&&e.setAttribute("xmlns",i);for(var h=0;h<e.childNodes.length;h++)e.childNodes[h].nodeType===o&&e.removeChild(e.childNodes[h]);for(;s.childNodes.length;)s.removeChild(s.childNodes[0]);return r.setAttr(e,{width:t,height:n,viewBox:"0 0 "+t+" "+n,preserveAspectRatio:"none"}),e},t.svgStringToDataURI=function(){var t="data:image/svg+xml;charset=UTF-8,",n="data:image/svg+xml;charset=UTF-8;base64,";return function(r,i){return i?n+btoa(e.unescape(encodeURIComponent(r))):t+encodeURIComponent(r)}}(),t.serializeSVG=function(t,n){if(e.XMLSerializer){var i=new XMLSerializer,o="",a=n.stylesheets;if(n.svgXMLStylesheet){for(var s=r.createXML(),l=a.length-1;l>=0;l--){var h=s.createProcessingInstruction("xml-stylesheet",'href="'+a[l]+'" rel="stylesheet"');s.insertBefore(h,s.firstChild)}s.removeChild(s.documentElement),o=i.serializeToString(s)}var u=i.serializeToString(t);return u=u.replace(/\&amp;(\#[0-9]{2,}\;)/g,"&$1"),o+u}}}).call(t,function(){return this}())},function(e,t){(function(e){t.newEl=function(t,n){if(e.document)return null==n?e.document.createElement(t):e.document.createElementNS(n,t)},t.setAttr=function(e,t){for(var n in t)e.setAttribute(n,t[n])},t.createXML=function(){if(e.DOMParser)return(new DOMParser).parseFromString("<xml />","application/xml")},t.getNodeArray=function(t){var n=null;return"string"==typeof t?n=document.querySelectorAll(t):e.NodeList&&t instanceof e.NodeList?n=t:e.Node&&t instanceof e.Node?n=[t]:e.HTMLCollection&&t instanceof e.HTMLCollection?n=t:t instanceof Array?n=t:null===t&&(n=[]),n=Array.prototype.slice.call(n)}}).call(t,function(){return this}())},function(e,t){var n=function(e,t){"string"==typeof e&&(this.original=e,"#"===e.charAt(0)&&(e=e.slice(1)),/[^a-f0-9]+/i.test(e)||(3===e.length&&(e=e.replace(/./g,"$&$&")),6===e.length&&(this.alpha=1,t&&t.alpha&&(this.alpha=t.alpha),this.set(parseInt(e,16)))))};n.rgb2hex=function(e,t,n){function r(e){var t=(0|e).toString(16);return e<16&&(t="0"+t),t}return[e,t,n].map(r).join("")},n.hsl2rgb=function(e,t,n){var r=e/60,i=(1-Math.abs(2*n-1))*t,o=i*(1-Math.abs(parseInt(r)%2-1)),a=n-i/2,s=0,l=0,h=0;return r>=0&&r<1?(s=i,l=o):r>=1&&r<2?(s=o,l=i):r>=2&&r<3?(l=i,h=o):r>=3&&r<4?(l=o,h=i):r>=4&&r<5?(s=o,h=i):r>=5&&r<6&&(s=i,h=o),s+=a,l+=a,h+=a,s=parseInt(255*s),l=parseInt(255*l),h=parseInt(255*h),[s,l,h]},n.prototype.set=function(e){this.raw=e;var t=(16711680&this.raw)>>16,n=(65280&this.raw)>>8,r=255&this.raw,i=.2126*t+.7152*n+.0722*r,o=-.09991*t-.33609*n+.436*r,a=.615*t-.55861*n-.05639*r;return this.rgb={r:t,g:n,b:r},this.yuv={y:i,u:o,v:a},this},n.prototype.lighten=function(e){var t=Math.min(1,Math.max(0,Math.abs(e)))*(e<0?-1:1),r=255*t|0,i=Math.min(255,Math.max(0,this.rgb.r+r)),o=Math.min(255,Math.max(0,this.rgb.g+r)),a=Math.min(255,Math.max(0,this.rgb.b+r)),s=n.rgb2hex(i,o,a);return new n(s)},n.prototype.toHex=function(e){return(e?"#":"")+this.raw.toString(16)},n.prototype.lighterThan=function(e){return e instanceof n||(e=new n(e)),this.yuv.y>e.yuv.y},n.prototype.blendAlpha=function(e){e instanceof n||(e=new n(e));var t=e,r=this,i=t.alpha*t.rgb.r+(1-t.alpha)*r.rgb.r,o=t.alpha*t.rgb.g+(1-t.alpha)*r.rgb.g,a=t.alpha*t.rgb.b+(1-t.alpha)*r.rgb.b;return new n(n.rgb2hex(i,o,a))},e.exports=n},function(e,t){e.exports={version:"2.9.4",svg_ns:"http://www.w3.org/2000/svg"}},function(e,t,n){function r(e,t){return c.element({tag:t,width:e.width,height:e.height,fill:e.properties.fill})}function i(e){return h.cssProps({fill:e.fill,"font-weight":e.font.weight,"font-family":e.font.family+", monospace","font-size":e.font.size+e.font.units})}function o(e,t,n){var r=n/2;return["M",r,r,"H",e-r,"V",t-r,"H",r,"V",0,"M",0,r,"L",e,t-r,"M",0,t-r,"L",e,r].join(" ")}var a=n(13),s=n(8),l=n(11),h=n(7),u=l.svg_ns,c={element:function(e){var t=e.tag,n=e.content||"";return delete e.tag,delete e.content,[t,n,e]}};e.exports=function(e,t){var n=t.engineSettings,l=n.stylesheets,h=l.map(function(e){return'<?xml-stylesheet rel="stylesheet" href="'+e+'"?>'}).join("\n"),d="holder_"+Number(new Date).toString(16),f=e.root,p=f.children.holderTextGroup,g="#"+d+" text { "+i(p.properties)+" } ";p.y+=.8*p.textPositionData.boundingBox.height;var m=[];Object.keys(p.children).forEach(function(e){var t=p.children[e];Object.keys(t.children).forEach(function(e){var n=t.children[e],r=p.x+t.x+n.x,i=p.y+t.y+n.y,o=c.element({tag:"text",content:n.properties.text,x:r,y:i});m.push(o)})});var v=c.element({tag:"g",content:m}),y=null;if(f.children.holderBg.properties.outline){var w=f.children.holderBg.properties.outline;y=c.element({tag:"path",d:o(f.children.holderBg.width,f.children.holderBg.height,w.width),"stroke-width":w.width,stroke:w.fill,fill:"none"})}var b=r(f.children.holderBg,"rect"),x=[];x.push(b),w&&x.push(y),x.push(v);var S=c.element({tag:"g",id:d,content:x}),A=c.element({tag:"style",content:g,type:"text/css"}),C=c.element({tag:"defs",content:A}),E=c.element({tag:"svg",content:[C,S],width:f.properties.width,height:f.properties.height,xmlns:u,viewBox:[0,0,f.properties.width,f.properties.height].join(" "),preserveAspectRatio:"none"}),k=a(E);k=h+k[0];var T=s.svgStringToDataURI(k,"background"===t.mode);return T}},function(e,t,n){n(14);e.exports=function r(e,t,n){"use strict";function i(e){var t=e.match(/^[\w-]+/),r={tag:t?t[0]:"div",attr:{},children:[]},i=e.match(/#([\w-]+)/),o=e.match(/\$([\w-]+)/),a=e.match(/\.[\w-]+/g);return i&&(r.attr.id=i[1],n[i[1]]=r),o&&(n[o[1]]=r),a&&(r.attr["class"]=a.join(" ").replace(/\./g,"")),e.match(/&$/g)&&(f=!1),r}function o(e,t){if(null!==t&&t!==!1&&void 0!==t)return"string"!=typeof t&&"object"!=typeof t?String(t):t}function a(e){return e||0===e?String(e).replace(/&/g,"&amp;").replace(/"/g,"&quot;"):""}function s(e){return String(e).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&apos;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var l,h,u,c,d=1,f=!0;if(n=n||{},"string"==typeof e[0])e[0]=i(e[0]);else{if(!Array.isArray(e[0]))throw new Error("First element of array must be a string, or an array and not "+JSON.stringify(e[0]));d=0}for(;d<e.length;d++){if(e[d]===!1||null===e[d]){e[0]=!1;break}if(void 0!==e[d]&&e[d]!==!0)if("string"==typeof e[d])f&&(e[d]=s(e[d])),e[0].children.push(e[d]);else if("number"==typeof e[d])e[0].children.push(e[d]);else if(Array.isArray(e[d])){if(Array.isArray(e[d][0])){if(e[d].reverse().forEach(function(t){e.splice(d+1,0,t)}),0!==d)continue;d++}r(e[d],t,n),e[d][0]&&e[0].children.push(e[d][0])}else if("function"==typeof e[d])u=e[d];else{if("object"!=typeof e[d])throw new TypeError('"'+e[d]+'" is not allowed as a value.');for(h in e[d])e[d].hasOwnProperty(h)&&null!==e[d][h]&&e[d][h]!==!1&&("style"===h&&"object"==typeof e[d][h]?e[0].attr[h]=JSON.stringify(e[d][h],o).slice(2,-2).replace(/","/g,";").replace(/":"/g,":").replace(/\\"/g,"'"):e[0].attr[h]=e[d][h])}}if(e[0]!==!1){l="<"+e[0].tag;for(c in e[0].attr)e[0].attr.hasOwnProperty(c)&&(l+=" "+c+'="'+a(e[0].attr[c])+'"');l+=">",e[0].children.forEach(function(e){l+=e}),l+="</"+e[0].tag+">",e[0]=l}return n[0]=e[0],u&&u(e[0]),n}},function(e,t){"use strict";function n(e){var t=""+e,n=r.exec(t);if(!n)return t;var i,o="",a=0,s=0;for(a=n.index;a<t.length;a++){switch(t.charCodeAt(a)){case 34:i="&quot;";break;case 38:i="&amp;";break;case 39:i="&#39;";break;case 60:i="&lt;";break;case 62:i="&gt;";break;default:continue}s!==a&&(o+=t.substring(s,a)),s=a+1,o+=i}return s!==a?o+t.substring(s,a):o}var r=/["'&<>]/;e.exports=n},function(e,t,n){var r=n(9),i=n(7);e.exports=function(){var e=r.newEl("canvas"),t=null;return function(n){null==t&&(t=e.getContext("2d"));var r=i.canvasRatio(),o=n.root;e.width=r*o.properties.width,e.height=r*o.properties.height,t.textBaseline="middle";var a=o.children.holderBg,s=r*a.width,l=r*a.height,h=2,u=h/2;t.fillStyle=a.properties.fill,t.fillRect(0,0,s,l),a.properties.outline&&(t.strokeStyle=a.properties.outline.fill,t.lineWidth=a.properties.outline.width,t.moveTo(u,u),t.lineTo(s-u,u),t.lineTo(s-u,l-u),t.lineTo(u,l-u),t.lineTo(u,u),t.moveTo(0,u),t.lineTo(s,l-u),t.moveTo(0,l-u),t.lineTo(s,u),t.stroke());var c=o.children.holderTextGroup;t.font=c.properties.font.weight+" "+r*c.properties.font.size+c.properties.font.units+" "+c.properties.font.family+", monospace",t.fillStyle=c.properties.fill;for(var d in c.children){var f=c.children[d];for(var p in f.children){var g=f.children[p],m=r*(c.x+f.x+g.x),v=r*(c.y+f.y+g.y+c.properties.leading/2);t.fillText(g.properties.text,m,v)}}return e.toDataURL("image/png")}}()}])}),function(e,t){t&&(Holder=e.Holder);
+}(this,"undefined"!=typeof Meteor&&"undefined"!=typeof Package);
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/jquery-3.2.1.slim.min.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/jquery-3.2.1.slim.min.js
new file mode 100644
index 00000000..196710ef
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/jquery-3.2.1.slim.min.js
@@ -0,0 +1,4 @@
+/*! jQuery v3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */
+!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null==a?f.call(this):a<0?this[a+this.length]:this[a]},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(a<0?b:0);return this.pushStack(c>=0&&c<b?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:h,sort:c.sort,splice:c.splice},r.extend=r.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);h<i;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(r.isPlainObject(d)||(e=Array.isArray(d)))?(e?(e=!1,f=c&&Array.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===r.type(a)},isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=r.type(a);return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))},isPlainObject:function(a){var b,c;return!(!a||"[object Object]"!==k.call(a))&&(!(b=e(a))||(c=l.call(b,"constructor")&&b.constructor,"function"==typeof c&&m.call(c)===n))},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a},globalEval:function(a){p(a)},camelCase:function(a){return a.replace(t,"ms-").replace(u,v)},each:function(a,b){var c,d=0;if(w(a)){for(c=a.length;d<c;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(s,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(w(Object(a))?r.merge(c,"string"==typeof a?[a]:a):h.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:i.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;d<c;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;f<g;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,f=0,h=[];if(w(a))for(d=a.length;f<d;f++)e=b(a[f],f,c),null!=e&&h.push(e);else for(f in a)e=b(a[f],f,c),null!=e&&h.push(e);return g.apply([],h)},guid:1,proxy:function(a,b){var c,d,e;if("string"==typeof b&&(c=a[b],b=a,a=c),r.isFunction(a))return d=f.call(arguments,2),e=function(){return a.apply(b||this,d.concat(f.call(arguments)))},e.guid=a.guid=a.guid||r.guid++,e},now:Date.now,support:o}),"function"==typeof Symbol&&(r.fn[Symbol.iterator]=c[Symbol.iterator]),r.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){j["[object "+b+"]"]=b.toLowerCase()});function w(a){var b=!!a&&"length"in a&&a.length,c=r.type(a);return"function"!==c&&!r.isWindow(a)&&("array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a)}var x=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ha(),z=ha(),A=ha(),B=function(a,b){return a===b&&(l=!0),0},C={}.hasOwnProperty,D=[],E=D.pop,F=D.push,G=D.push,H=D.slice,I=function(a,b){for(var c=0,d=a.length;c<d;c++)if(a[c]===b)return c;return-1},J="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",K="[\\x20\\t\\r\\n\\f]",L="(?:\\\\.|[\\w-]|[^\0-\\xa0])+",M="\\["+K+"*("+L+")(?:"+K+"*([*^$|!~]?=)"+K+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+L+"))|)"+K+"*\\]",N=":("+L+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",O=new RegExp(K+"+","g"),P=new RegExp("^"+K+"+|((?:^|[^\\\\])(?:\\\\.)*)"+K+"+$","g"),Q=new RegExp("^"+K+"*,"+K+"*"),R=new RegExp("^"+K+"*([>+~]|"+K+")"+K+"*"),S=new RegExp("="+K+"*([^\\]'\"]*?)"+K+"*\\]","g"),T=new RegExp(N),U=new RegExp("^"+L+"$"),V={ID:new RegExp("^#("+L+")"),CLASS:new RegExp("^\\.("+L+")"),TAG:new RegExp("^("+L+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+N),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+K+"*(even|odd|(([+-]|)(\\d*)n|)"+K+"*(?:([+-]|)"+K+"*(\\d+)|))"+K+"*\\)|)","i"),bool:new RegExp("^(?:"+J+")$","i"),needsContext:new RegExp("^"+K+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+K+"*((?:-\\d)?\\d*)"+K+"*\\)|)(?=[^-]|$)","i")},W=/^(?:input|select|textarea|button)$/i,X=/^h\d$/i,Y=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,$=/[+~]/,_=new RegExp("\\\\([\\da-f]{1,6}"+K+"?|("+K+")|.)","ig"),aa=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:d<0?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},ba=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ca=function(a,b){return b?"\0"===a?"\ufffd":a.slice(0,-1)+"\\"+a.charCodeAt(a.length-1).toString(16)+" ":"\\"+a},da=function(){m()},ea=ta(function(a){return a.disabled===!0&&("form"in a||"label"in a)},{dir:"parentNode",next:"legend"});try{G.apply(D=H.call(v.childNodes),v.childNodes),D[v.childNodes.length].nodeType}catch(fa){G={apply:D.length?function(a,b){F.apply(a,H.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function ga(a,b,d,e){var f,h,j,k,l,o,r,s=b&&b.ownerDocument,w=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==w&&9!==w&&11!==w)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==w&&(l=Z.exec(a)))if(f=l[1]){if(9===w){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(s&&(j=s.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(l[2])return G.apply(d,b.getElementsByTagName(a)),d;if((f=l[3])&&c.getElementsByClassName&&b.getElementsByClassName)return G.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==w)s=b,r=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(ba,ca):b.setAttribute("id",k=u),o=g(a),h=o.length;while(h--)o[h]="#"+k+" "+sa(o[h]);r=o.join(","),s=$.test(a)&&qa(b.parentNode)||b}if(r)try{return G.apply(d,s.querySelectorAll(r)),d}catch(x){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(P,"$1"),b,d,e)}function ha(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ia(a){return a[u]=!0,a}function ja(a){var b=n.createElement("fieldset");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ka(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function la(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&a.sourceIndex-b.sourceIndex;if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function na(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function oa(a){return function(b){return"form"in b?b.parentNode&&b.disabled===!1?"label"in b?"label"in b.parentNode?b.parentNode.disabled===a:b.disabled===a:b.isDisabled===a||b.isDisabled!==!a&&ea(b)===a:b.disabled===a:"label"in b&&b.disabled===a}}function pa(a){return ia(function(b){return b=+b,ia(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function qa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=ga.support={},f=ga.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return!!b&&"HTML"!==b.nodeName},m=ga.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),v!==n&&(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ja(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ja(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Y.test(n.getElementsByClassName),c.getById=ja(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){return a.getAttribute("id")===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}}):(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c,d,e,f=b.getElementById(a);if(f){if(c=f.getAttributeNode("id"),c&&c.value===a)return[f];e=b.getElementsByName(a),d=0;while(f=e[d++])if(c=f.getAttributeNode("id"),c&&c.value===a)return[f]}return[]}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){if("undefined"!=typeof b.getElementsByClassName&&p)return b.getElementsByClassName(a)},r=[],q=[],(c.qsa=Y.test(n.querySelectorAll))&&(ja(function(a){o.appendChild(a).innerHTML="<a id='"+u+"'></a><select id='"+u+"-\r\\' msallowcapture=''><option selected=''></option></select>",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+K+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+K+"*(?:value|"+J+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ja(function(a){a.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+K+"*[*^$|!~]?="),2!==a.querySelectorAll(":enabled").length&&q.push(":enabled",":disabled"),o.appendChild(a).disabled=!0,2!==a.querySelectorAll(":disabled").length&&q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Y.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ja(function(a){c.disconnectedMatch=s.call(a,"*"),s.call(a,"[s!='']:x"),r.push("!=",N)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Y.test(o.compareDocumentPosition),t=b||Y.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?I(k,a)-I(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?I(k,a)-I(k,b):0;if(e===f)return la(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?la(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},ga.matches=function(a,b){return ga(a,null,null,b)},ga.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(S,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return ga(b,n,null,[a]).length>0},ga.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},ga.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&C.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},ga.escape=function(a){return(a+"").replace(ba,ca)},ga.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},ga.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=ga.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=ga.selectors={cacheLength:50,createPseudo:ia,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(_,aa),a[3]=(a[3]||a[4]||a[5]||"").replace(_,aa),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||ga.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&ga.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return V.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&T.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(_,aa).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+K+")"+a+"("+K+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=ga.attr(d,a);return null==e?"!="===b:!b||(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(O," ")+" ").indexOf(c)>-1:"|="===b&&(e===c||e.slice(0,c.length+1)===c+"-"))}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||ga.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ia(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=I(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ia(function(a){var b=[],c=[],d=h(a.replace(P,"$1"));return d[u]?ia(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ia(function(a){return function(b){return ga(a,b).length>0}}),contains:ia(function(a){return a=a.replace(_,aa),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ia(function(a){return U.test(a||"")||ga.error("unsupported lang: "+a),a=a.replace(_,aa).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:oa(!1),disabled:oa(!0),checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return X.test(a.nodeName)},input:function(a){return W.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:pa(function(){return[0]}),last:pa(function(a,b){return[b-1]}),eq:pa(function(a,b,c){return[c<0?c+b:c]}),even:pa(function(a,b){for(var c=0;c<b;c+=2)a.push(c);return a}),odd:pa(function(a,b){for(var c=1;c<b;c+=2)a.push(c);return a}),lt:pa(function(a,b,c){for(var d=c<0?c+b:c;--d>=0;)a.push(d);return a}),gt:pa(function(a,b,c){for(var d=c<0?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=ma(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=na(b);function ra(){}ra.prototype=d.filters=d.pseudos,d.setFilters=new ra,g=ga.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){c&&!(e=Q.exec(h))||(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=R.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(P," ")}),h=h.slice(c.length));for(g in d.filter)!(e=V[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?ga.error(a):z(a,i).slice(0)};function sa(a){for(var b=0,c=a.length,d="";b<c;b++)d+=a[b].value;return d}function ta(a,b,c){var d=b.dir,e=b.next,f=e||d,g=c&&"parentNode"===f,h=x++;return b.first?function(b,c,e){while(b=b[d])if(1===b.nodeType||g)return a(b,c,e);return!1}:function(b,c,i){var j,k,l,m=[w,h];if(i){while(b=b[d])if((1===b.nodeType||g)&&a(b,c,i))return!0}else while(b=b[d])if(1===b.nodeType||g)if(l=b[u]||(b[u]={}),k=l[b.uniqueID]||(l[b.uniqueID]={}),e&&e===b.nodeName.toLowerCase())b=b[d]||b;else{if((j=k[f])&&j[0]===w&&j[1]===h)return m[2]=j[2];if(k[f]=m,m[2]=a(b,c,i))return!0}return!1}}function ua(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function va(a,b,c){for(var d=0,e=b.length;d<e;d++)ga(a,b[d],c);return c}function wa(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;h<i;h++)(f=a[h])&&(c&&!c(f,d,e)||(g.push(f),j&&b.push(h)));return g}function xa(a,b,c,d,e,f){return d&&!d[u]&&(d=xa(d)),e&&!e[u]&&(e=xa(e,f)),ia(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||va(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:wa(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=wa(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?I(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=wa(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):G.apply(g,r)})}function ya(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ta(function(a){return a===b},h,!0),l=ta(function(a){return I(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];i<f;i++)if(c=d.relative[a[i].type])m=[ta(ua(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;e<f;e++)if(d.relative[a[e].type])break;return xa(i>1&&ua(m),i>1&&sa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(P,"$1"),c,i<e&&ya(a.slice(i,e)),e<f&&ya(a=a.slice(e)),e<f&&sa(a))}m.push(c)}return ua(m)}function za(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=E.call(i));u=wa(u)}G.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&ga.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ia(f):f}return h=ga.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=ya(b[c]),f[u]?d.push(f):e.push(f);f=A(a,za(e,d)),f.selector=a}return f},i=ga.select=function(a,b,c,e){var f,i,j,k,l,m="function"==typeof a&&a,n=!e&&g(a=m.selector||a);if(c=c||[],1===n.length){if(i=n[0]=n[0].slice(0),i.length>2&&"ID"===(j=i[0]).type&&9===b.nodeType&&p&&d.relative[i[1].type]){if(b=(d.find.ID(j.matches[0].replace(_,aa),b)||[])[0],!b)return c;m&&(b=b.parentNode),a=a.slice(i.shift().value.length)}f=V.needsContext.test(a)?0:i.length;while(f--){if(j=i[f],d.relative[k=j.type])break;if((l=d.find[k])&&(e=l(j.matches[0].replace(_,aa),$.test(i[0].type)&&qa(b.parentNode)||b))){if(i.splice(f,1),a=e.length&&sa(i),!a)return G.apply(c,e),c;break}}}return(m||h(a,n))(e,b,!p,c,!b||$.test(a)&&qa(b.parentNode)||b),c},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ja(function(a){return 1&a.compareDocumentPosition(n.createElement("fieldset"))}),ja(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||ka("type|href|height|width",function(a,b,c){if(!c)return a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ja(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ka("value",function(a,b,c){if(!c&&"input"===a.nodeName.toLowerCase())return a.defaultValue}),ja(function(a){return null==a.getAttribute("disabled")})||ka(J,function(a,b,c){var d;if(!c)return a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),ga}(a);r.find=x,r.expr=x.selectors,r.expr[":"]=r.expr.pseudos,r.uniqueSort=r.unique=x.uniqueSort,r.text=x.getText,r.isXMLDoc=x.isXML,r.contains=x.contains,r.escapeSelector=x.escape;var y=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&r(a).is(c))break;d.push(a)}return d},z=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},A=r.expr.match.needsContext;function B(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()}var C=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i,D=/^.[^:#\[\.,]*$/;function E(a,b,c){return r.isFunction(b)?r.grep(a,function(a,d){return!!b.call(a,d,a)!==c}):b.nodeType?r.grep(a,function(a){return a===b!==c}):"string"!=typeof b?r.grep(a,function(a){return i.call(b,a)>-1!==c}):D.test(b)?r.filter(b,a,c):(b=r.filter(b,a),r.grep(a,function(a){return i.call(b,a)>-1!==c&&1===a.nodeType}))}r.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?r.find.matchesSelector(d,a)?[d]:[]:r.find.matches(a,r.grep(b,function(a){return 1===a.nodeType}))},r.fn.extend({find:function(a){var b,c,d=this.length,e=this;if("string"!=typeof a)return this.pushStack(r(a).filter(function(){for(b=0;b<d;b++)if(r.contains(e[b],this))return!0}));for(c=this.pushStack([]),b=0;b<d;b++)r.find(a,e[b],c);return d>1?r.uniqueSort(c):c},filter:function(a){return this.pushStack(E(this,a||[],!1))},not:function(a){return this.pushStack(E(this,a||[],!0))},is:function(a){return!!E(this,"string"==typeof a&&A.test(a)?r(a):a||[],!1).length}});var F,G=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,H=r.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||F,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:G.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof r?b[0]:b,r.merge(this,r.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),C.test(e[1])&&r.isPlainObject(b))for(e in b)r.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&(this[0]=f,this.length=1),this}return a.nodeType?(this[0]=a,this.length=1,this):r.isFunction(a)?void 0!==c.ready?c.ready(a):a(r):r.makeArray(a,this)};H.prototype=r.fn,F=r(d);var I=/^(?:parents|prev(?:Until|All))/,J={children:!0,contents:!0,next:!0,prev:!0};r.fn.extend({has:function(a){var b=r(a,this),c=b.length;return this.filter(function(){for(var a=0;a<c;a++)if(r.contains(this,b[a]))return!0})},closest:function(a,b){var c,d=0,e=this.length,f=[],g="string"!=typeof a&&r(a);if(!A.test(a))for(;d<e;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&r.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?r.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?i.call(r(a),this[0]):i.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(r.uniqueSort(r.merge(this.get(),r(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function K(a,b){while((a=a[b])&&1!==a.nodeType);return a}r.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return y(a,"parentNode")},parentsUntil:function(a,b,c){return y(a,"parentNode",c)},next:function(a){return K(a,"nextSibling")},prev:function(a){return K(a,"previousSibling")},nextAll:function(a){return y(a,"nextSibling")},prevAll:function(a){return y(a,"previousSibling")},nextUntil:function(a,b,c){return y(a,"nextSibling",c)},prevUntil:function(a,b,c){return y(a,"previousSibling",c)},siblings:function(a){return z((a.parentNode||{}).firstChild,a)},children:function(a){return z(a.firstChild)},contents:function(a){return B(a,"iframe")?a.contentDocument:(B(a,"template")&&(a=a.content||a),r.merge([],a.childNodes))}},function(a,b){r.fn[a]=function(c,d){var e=r.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=r.filter(d,e)),this.length>1&&(J[a]||r.uniqueSort(e),I.test(a)&&e.reverse()),this.pushStack(e)}});var L=/[^\x20\t\r\n\f]+/g;function M(a){var b={};return r.each(a.match(L)||[],function(a,c){b[c]=!0}),b}r.Callbacks=function(a){a="string"==typeof a?M(a):r.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=e||a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h<f.length)f[h].apply(c[0],c[1])===!1&&a.stopOnFalse&&(h=f.length,c=!1)}a.memory||(c=!1),b=!1,e&&(f=c?[]:"")},j={add:function(){return f&&(c&&!b&&(h=f.length-1,g.push(c)),function d(b){r.each(b,function(b,c){r.isFunction(c)?a.unique&&j.has(c)||f.push(c):c&&c.length&&"string"!==r.type(c)&&d(c)})}(arguments),c&&!b&&i()),this},remove:function(){return r.each(arguments,function(a,b){var c;while((c=r.inArray(b,f,c))>-1)f.splice(c,1),c<=h&&h--}),this},has:function(a){return a?r.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||b||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j};function N(a){return a}function O(a){throw a}function P(a,b,c,d){var e;try{a&&r.isFunction(e=a.promise)?e.call(a).done(b).fail(c):a&&r.isFunction(e=a.then)?e.call(a,b,c):b.apply(void 0,[a].slice(d))}catch(a){c.apply(void 0,[a])}}r.extend({Deferred:function(b){var c=[["notify","progress",r.Callbacks("memory"),r.Callbacks("memory"),2],["resolve","done",r.Callbacks("once memory"),r.Callbacks("once memory"),0,"resolved"],["reject","fail",r.Callbacks("once memory"),r.Callbacks("once memory"),1,"rejected"]],d="pending",e={state:function(){return d},always:function(){return f.done(arguments).fail(arguments),this},"catch":function(a){return e.then(null,a)},pipe:function(){var a=arguments;return r.Deferred(function(b){r.each(c,function(c,d){var e=r.isFunction(a[d[4]])&&a[d[4]];f[d[1]](function(){var a=e&&e.apply(this,arguments);a&&r.isFunction(a.promise)?a.promise().progress(b.notify).done(b.resolve).fail(b.reject):b[d[0]+"With"](this,e?[a]:arguments)})}),a=null}).promise()},then:function(b,d,e){var f=0;function g(b,c,d,e){return function(){var h=this,i=arguments,j=function(){var a,j;if(!(b<f)){if(a=d.apply(h,i),a===c.promise())throw new TypeError("Thenable self-resolution");j=a&&("object"==typeof a||"function"==typeof a)&&a.then,r.isFunction(j)?e?j.call(a,g(f,c,N,e),g(f,c,O,e)):(f++,j.call(a,g(f,c,N,e),g(f,c,O,e),g(f,c,N,c.notifyWith))):(d!==N&&(h=void 0,i=[a]),(e||c.resolveWith)(h,i))}},k=e?j:function(){try{j()}catch(a){r.Deferred.exceptionHook&&r.Deferred.exceptionHook(a,k.stackTrace),b+1>=f&&(d!==O&&(h=void 0,i=[a]),c.rejectWith(h,i))}};b?k():(r.Deferred.getStackHook&&(k.stackTrace=r.Deferred.getStackHook()),a.setTimeout(k))}}return r.Deferred(function(a){c[0][3].add(g(0,a,r.isFunction(e)?e:N,a.notifyWith)),c[1][3].add(g(0,a,r.isFunction(b)?b:N)),c[2][3].add(g(0,a,r.isFunction(d)?d:O))}).promise()},promise:function(a){return null!=a?r.extend(a,e):e}},f={};return r.each(c,function(a,b){var g=b[2],h=b[5];e[b[1]]=g.add,h&&g.add(function(){d=h},c[3-a][2].disable,c[0][2].lock),g.add(b[3].fire),f[b[0]]=function(){return f[b[0]+"With"](this===f?void 0:this,arguments),this},f[b[0]+"With"]=g.fireWith}),e.promise(f),b&&b.call(f,f),f},when:function(a){var b=arguments.length,c=b,d=Array(c),e=f.call(arguments),g=r.Deferred(),h=function(a){return function(c){d[a]=this,e[a]=arguments.length>1?f.call(arguments):c,--b||g.resolveWith(d,e)}};if(b<=1&&(P(a,g.done(h(c)).resolve,g.reject,!b),"pending"===g.state()||r.isFunction(e[c]&&e[c].then)))return g.then();while(c--)P(e[c],h(c),g.reject);return g.promise()}});var Q=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;r.Deferred.exceptionHook=function(b,c){a.console&&a.console.warn&&b&&Q.test(b.name)&&a.console.warn("jQuery.Deferred exception: "+b.message,b.stack,c)},r.readyException=function(b){a.setTimeout(function(){throw b})};var R=r.Deferred();r.fn.ready=function(a){return R.then(a)["catch"](function(a){r.readyException(a);
+}),this},r.extend({isReady:!1,readyWait:1,ready:function(a){(a===!0?--r.readyWait:r.isReady)||(r.isReady=!0,a!==!0&&--r.readyWait>0||R.resolveWith(d,[r]))}}),r.ready.then=R.then;function S(){d.removeEventListener("DOMContentLoaded",S),a.removeEventListener("load",S),r.ready()}"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(r.ready):(d.addEventListener("DOMContentLoaded",S),a.addEventListener("load",S));var T=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===r.type(c)){e=!0;for(h in c)T(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,r.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(r(a),c)})),b))for(;h<i;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},U=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function V(){this.expando=r.expando+V.uid++}V.uid=1,V.prototype={cache:function(a){var b=a[this.expando];return b||(b={},U(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[r.camelCase(b)]=c;else for(d in b)e[r.camelCase(d)]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][r.camelCase(b)]},access:function(a,b,c){return void 0===b||b&&"string"==typeof b&&void 0===c?this.get(a,b):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d=a[this.expando];if(void 0!==d){if(void 0!==b){Array.isArray(b)?b=b.map(r.camelCase):(b=r.camelCase(b),b=b in d?[b]:b.match(L)||[]),c=b.length;while(c--)delete d[b[c]]}(void 0===b||r.isEmptyObject(d))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!r.isEmptyObject(b)}};var W=new V,X=new V,Y=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Z=/[A-Z]/g;function $(a){return"true"===a||"false"!==a&&("null"===a?null:a===+a+""?+a:Y.test(a)?JSON.parse(a):a)}function _(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Z,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c=$(c)}catch(e){}X.set(a,b,c)}else c=void 0;return c}r.extend({hasData:function(a){return X.hasData(a)||W.hasData(a)},data:function(a,b,c){return X.access(a,b,c)},removeData:function(a,b){X.remove(a,b)},_data:function(a,b,c){return W.access(a,b,c)},_removeData:function(a,b){W.remove(a,b)}}),r.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=X.get(f),1===f.nodeType&&!W.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=r.camelCase(d.slice(5)),_(f,d,e[d])));W.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){X.set(this,a)}):T(this,function(b){var c;if(f&&void 0===b){if(c=X.get(f,a),void 0!==c)return c;if(c=_(f,a),void 0!==c)return c}else this.each(function(){X.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){X.remove(this,a)})}}),r.extend({queue:function(a,b,c){var d;if(a)return b=(b||"fx")+"queue",d=W.get(a,b),c&&(!d||Array.isArray(c)?d=W.access(a,b,r.makeArray(c)):d.push(c)),d||[]},dequeue:function(a,b){b=b||"fx";var c=r.queue(a,b),d=c.length,e=c.shift(),f=r._queueHooks(a,b),g=function(){r.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return W.get(a,c)||W.access(a,c,{empty:r.Callbacks("once memory").add(function(){W.remove(a,[b+"queue",c])})})}}),r.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?r.queue(this[0],a):void 0===b?this:this.each(function(){var c=r.queue(this,a,b);r._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&r.dequeue(this,a)})},dequeue:function(a){return this.each(function(){r.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=r.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=W.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var aa=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,ba=new RegExp("^(?:([+-])=|)("+aa+")([a-z%]*)$","i"),ca=["Top","Right","Bottom","Left"],da=function(a,b){return a=b||a,"none"===a.style.display||""===a.style.display&&r.contains(a.ownerDocument,a)&&"none"===r.css(a,"display")},ea=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};function fa(a,b,c,d){var e,f=1,g=20,h=d?function(){return d.cur()}:function(){return r.css(a,b,"")},i=h(),j=c&&c[3]||(r.cssNumber[b]?"":"px"),k=(r.cssNumber[b]||"px"!==j&&+i)&&ba.exec(r.css(a,b));if(k&&k[3]!==j){j=j||k[3],c=c||[],k=+i||1;do f=f||".5",k/=f,r.style(a,b,k+j);while(f!==(f=h()/i)&&1!==f&&--g)}return c&&(k=+k||+i||0,e=c[1]?k+(c[1]+1)*c[2]:+c[2],d&&(d.unit=j,d.start=k,d.end=e)),e}var ga={};function ha(a){var b,c=a.ownerDocument,d=a.nodeName,e=ga[d];return e?e:(b=c.body.appendChild(c.createElement(d)),e=r.css(b,"display"),b.parentNode.removeChild(b),"none"===e&&(e="block"),ga[d]=e,e)}function ia(a,b){for(var c,d,e=[],f=0,g=a.length;f<g;f++)d=a[f],d.style&&(c=d.style.display,b?("none"===c&&(e[f]=W.get(d,"display")||null,e[f]||(d.style.display="")),""===d.style.display&&da(d)&&(e[f]=ha(d))):"none"!==c&&(e[f]="none",W.set(d,"display",c)));for(f=0;f<g;f++)null!=e[f]&&(a[f].style.display=e[f]);return a}r.fn.extend({show:function(){return ia(this,!0)},hide:function(){return ia(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){da(this)?r(this).show():r(this).hide()})}});var ja=/^(?:checkbox|radio)$/i,ka=/<([a-z][^\/\0>\x20\t\r\n\f]+)/i,la=/^$|\/(?:java|ecma)script/i,ma={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};ma.optgroup=ma.option,ma.tbody=ma.tfoot=ma.colgroup=ma.caption=ma.thead,ma.th=ma.td;function na(a,b){var c;return c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[],void 0===b||b&&B(a,b)?r.merge([a],c):c}function oa(a,b){for(var c=0,d=a.length;c<d;c++)W.set(a[c],"globalEval",!b||W.get(b[c],"globalEval"))}var pa=/<|&#?\w+;/;function qa(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],n=0,o=a.length;n<o;n++)if(f=a[n],f||0===f)if("object"===r.type(f))r.merge(m,f.nodeType?[f]:f);else if(pa.test(f)){g=g||l.appendChild(b.createElement("div")),h=(ka.exec(f)||["",""])[1].toLowerCase(),i=ma[h]||ma._default,g.innerHTML=i[1]+r.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;r.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",n=0;while(f=m[n++])if(d&&r.inArray(f,d)>-1)e&&e.push(f);else if(j=r.contains(f.ownerDocument,f),g=na(l.appendChild(f),"script"),j&&oa(g),c){k=0;while(f=g[k++])la.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),o.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",o.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var ra=d.documentElement,sa=/^key/,ta=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,ua=/^([^.]*)(?:\.(.+)|)/;function va(){return!0}function wa(){return!1}function xa(){try{return d.activeElement}catch(a){}}function ya(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)ya(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=wa;else if(!e)return a;return 1===f&&(g=e,e=function(a){return r().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=r.guid++)),a.each(function(){r.event.add(this,b,e,d,c)})}r.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=W.get(a);if(q){c.handler&&(f=c,c=f.handler,e=f.selector),e&&r.find.matchesSelector(ra,e),c.guid||(c.guid=r.guid++),(i=q.events)||(i=q.events={}),(g=q.handle)||(g=q.handle=function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(L)||[""],j=b.length;while(j--)h=ua.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n&&(l=r.event.special[n]||{},n=(e?l.delegateType:l.bindType)||n,l=r.event.special[n]||{},k=r.extend({type:n,origType:p,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&r.expr.match.needsContext.test(e),namespace:o.join(".")},f),(m=i[n])||(m=i[n]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,o,g)!==!1||a.addEventListener&&a.addEventListener(n,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),r.event.global[n]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=W.hasData(a)&&W.get(a);if(q&&(i=q.events)){b=(b||"").match(L)||[""],j=b.length;while(j--)if(h=ua.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n){l=r.event.special[n]||{},n=(d?l.delegateType:l.bindType)||n,m=i[n]||[],h=h[2]&&new RegExp("(^|\\.)"+o.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&p!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,o,q.handle)!==!1||r.removeEvent(a,n,q.handle),delete i[n])}else for(n in i)r.event.remove(a,n+b[j],c,d,!0);r.isEmptyObject(i)&&W.remove(a,"handle events")}},dispatch:function(a){var b=r.event.fix(a),c,d,e,f,g,h,i=new Array(arguments.length),j=(W.get(this,"events")||{})[b.type]||[],k=r.event.special[b.type]||{};for(i[0]=b,c=1;c<arguments.length;c++)i[c]=arguments[c];if(b.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,b)!==!1){h=r.event.handlers.call(this,b,j),c=0;while((f=h[c++])&&!b.isPropagationStopped()){b.currentTarget=f.elem,d=0;while((g=f.handlers[d++])&&!b.isImmediatePropagationStopped())b.rnamespace&&!b.rnamespace.test(g.namespace)||(b.handleObj=g,b.data=g.data,e=((r.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(b.result=e)===!1&&(b.preventDefault(),b.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,b),b.result}},handlers:function(a,b){var c,d,e,f,g,h=[],i=b.delegateCount,j=a.target;if(i&&j.nodeType&&!("click"===a.type&&a.button>=1))for(;j!==this;j=j.parentNode||this)if(1===j.nodeType&&("click"!==a.type||j.disabled!==!0)){for(f=[],g={},c=0;c<i;c++)d=b[c],e=d.selector+" ",void 0===g[e]&&(g[e]=d.needsContext?r(e,this).index(j)>-1:r.find(e,this,null,[j]).length),g[e]&&f.push(d);f.length&&h.push({elem:j,handlers:f})}return j=this,i<b.length&&h.push({elem:j,handlers:b.slice(i)}),h},addProp:function(a,b){Object.defineProperty(r.Event.prototype,a,{enumerable:!0,configurable:!0,get:r.isFunction(b)?function(){if(this.originalEvent)return b(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[a]},set:function(b){Object.defineProperty(this,a,{enumerable:!0,configurable:!0,writable:!0,value:b})}})},fix:function(a){return a[r.expando]?a:new r.Event(a)},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!==xa()&&this.focus)return this.focus(),!1},delegateType:"focusin"},blur:{trigger:function(){if(this===xa()&&this.blur)return this.blur(),!1},delegateType:"focusout"},click:{trigger:function(){if("checkbox"===this.type&&this.click&&B(this,"input"))return this.click(),!1},_default:function(a){return B(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}}},r.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c)},r.Event=function(a,b){return this instanceof r.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?va:wa,this.target=a.target&&3===a.target.nodeType?a.target.parentNode:a.target,this.currentTarget=a.currentTarget,this.relatedTarget=a.relatedTarget):this.type=a,b&&r.extend(this,b),this.timeStamp=a&&a.timeStamp||r.now(),void(this[r.expando]=!0)):new r.Event(a,b)},r.Event.prototype={constructor:r.Event,isDefaultPrevented:wa,isPropagationStopped:wa,isImmediatePropagationStopped:wa,isSimulated:!1,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=va,a&&!this.isSimulated&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=va,a&&!this.isSimulated&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=va,a&&!this.isSimulated&&a.stopImmediatePropagation(),this.stopPropagation()}},r.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:function(a){var b=a.button;return null==a.which&&sa.test(a.type)?null!=a.charCode?a.charCode:a.keyCode:!a.which&&void 0!==b&&ta.test(a.type)?1&b?1:2&b?3:4&b?2:0:a.which}},r.event.addProp),r.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){r.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return e&&(e===d||r.contains(d,e))||(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),r.fn.extend({on:function(a,b,c,d){return ya(this,a,b,c,d)},one:function(a,b,c,d){return ya(this,a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,r(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return b!==!1&&"function"!=typeof b||(c=b,b=void 0),c===!1&&(c=wa),this.each(function(){r.event.remove(this,a,c,b)})}});var za=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,Aa=/<script|<style|<link/i,Ba=/checked\s*(?:[^=]|=\s*.checked.)/i,Ca=/^true\/(.*)/,Da=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function Ea(a,b){return B(a,"table")&&B(11!==b.nodeType?b:b.firstChild,"tr")?r(">tbody",a)[0]||a:a}function Fa(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function Ga(a){var b=Ca.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Ha(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(W.hasData(a)&&(f=W.access(a),g=W.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;c<d;c++)r.event.add(b,e,j[e][c])}X.hasData(a)&&(h=X.access(a),i=r.extend({},h),X.set(b,i))}}function Ia(a,b){var c=b.nodeName.toLowerCase();"input"===c&&ja.test(a.type)?b.checked=a.checked:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}function Ja(a,b,c,d){b=g.apply([],b);var e,f,h,i,j,k,l=0,m=a.length,n=m-1,q=b[0],s=r.isFunction(q);if(s||m>1&&"string"==typeof q&&!o.checkClone&&Ba.test(q))return a.each(function(e){var f=a.eq(e);s&&(b[0]=q.call(this,e,f.html())),Ja(f,b,c,d)});if(m&&(e=qa(b,a[0].ownerDocument,!1,a,d),f=e.firstChild,1===e.childNodes.length&&(e=f),f||d)){for(h=r.map(na(e,"script"),Fa),i=h.length;l<m;l++)j=e,l!==n&&(j=r.clone(j,!0,!0),i&&r.merge(h,na(j,"script"))),c.call(a[l],j,l);if(i)for(k=h[h.length-1].ownerDocument,r.map(h,Ga),l=0;l<i;l++)j=h[l],la.test(j.type||"")&&!W.access(j,"globalEval")&&r.contains(k,j)&&(j.src?r._evalUrl&&r._evalUrl(j.src):p(j.textContent.replace(Da,""),k))}return a}function Ka(a,b,c){for(var d,e=b?r.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||r.cleanData(na(d)),d.parentNode&&(c&&r.contains(d.ownerDocument,d)&&oa(na(d,"script")),d.parentNode.removeChild(d));return a}r.extend({htmlPrefilter:function(a){return a.replace(za,"<$1></$2>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=r.contains(a.ownerDocument,a);if(!(o.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||r.isXMLDoc(a)))for(g=na(h),f=na(a),d=0,e=f.length;d<e;d++)Ia(f[d],g[d]);if(b)if(c)for(f=f||na(a),g=g||na(h),d=0,e=f.length;d<e;d++)Ha(f[d],g[d]);else Ha(a,h);return g=na(h,"script"),g.length>0&&oa(g,!i&&na(a,"script")),h},cleanData:function(a){for(var b,c,d,e=r.event.special,f=0;void 0!==(c=a[f]);f++)if(U(c)){if(b=c[W.expando]){if(b.events)for(d in b.events)e[d]?r.event.remove(c,d):r.removeEvent(c,d,b.handle);c[W.expando]=void 0}c[X.expando]&&(c[X.expando]=void 0)}}}),r.fn.extend({detach:function(a){return Ka(this,a,!0)},remove:function(a){return Ka(this,a)},text:function(a){return T(this,function(a){return void 0===a?r.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)},append:function(){return Ja(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ea(this,a);b.appendChild(a)}})},prepend:function(){return Ja(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ea(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ja(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ja(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(r.cleanData(na(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null!=a&&a,b=null==b?a:b,this.map(function(){return r.clone(this,a,b)})},html:function(a){return T(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!Aa.test(a)&&!ma[(ka.exec(a)||["",""])[1].toLowerCase()]){a=r.htmlPrefilter(a);try{for(;c<d;c++)b=this[c]||{},1===b.nodeType&&(r.cleanData(na(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return Ja(this,arguments,function(b){var c=this.parentNode;r.inArray(this,a)<0&&(r.cleanData(na(this)),c&&c.replaceChild(b,this))},a)}}),r.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){r.fn[a]=function(a){for(var c,d=[],e=r(a),f=e.length-1,g=0;g<=f;g++)c=g===f?this:this.clone(!0),r(e[g])[b](c),h.apply(d,c.get());return this.pushStack(d)}});var La=/^margin/,Ma=new RegExp("^("+aa+")(?!px)[a-z%]+$","i"),Na=function(b){var c=b.ownerDocument.defaultView;return c&&c.opener||(c=a),c.getComputedStyle(b)};!function(){function b(){if(i){i.style.cssText="box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%",i.innerHTML="",ra.appendChild(h);var b=a.getComputedStyle(i);c="1%"!==b.top,g="2px"===b.marginLeft,e="4px"===b.width,i.style.marginRight="50%",f="4px"===b.marginRight,ra.removeChild(h),i=null}}var c,e,f,g,h=d.createElement("div"),i=d.createElement("div");i.style&&(i.style.backgroundClip="content-box",i.cloneNode(!0).style.backgroundClip="",o.clearCloneStyle="content-box"===i.style.backgroundClip,h.style.cssText="border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute",h.appendChild(i),r.extend(o,{pixelPosition:function(){return b(),c},boxSizingReliable:function(){return b(),e},pixelMarginRight:function(){return b(),f},reliableMarginLeft:function(){return b(),g}}))}();function Oa(a,b,c){var d,e,f,g,h=a.style;return c=c||Na(a),c&&(g=c.getPropertyValue(b)||c[b],""!==g||r.contains(a.ownerDocument,a)||(g=r.style(a,b)),!o.pixelMarginRight()&&Ma.test(g)&&La.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function Pa(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}var Qa=/^(none|table(?!-c[ea]).+)/,Ra=/^--/,Sa={position:"absolute",visibility:"hidden",display:"block"},Ta={letterSpacing:"0",fontWeight:"400"},Ua=["Webkit","Moz","ms"],Va=d.createElement("div").style;function Wa(a){if(a in Va)return a;var b=a[0].toUpperCase()+a.slice(1),c=Ua.length;while(c--)if(a=Ua[c]+b,a in Va)return a}function Xa(a){var b=r.cssProps[a];return b||(b=r.cssProps[a]=Wa(a)||a),b}function Ya(a,b,c){var d=ba.exec(b);return d?Math.max(0,d[2]-(c||0))+(d[3]||"px"):b}function Za(a,b,c,d,e){var f,g=0;for(f=c===(d?"border":"content")?4:"width"===b?1:0;f<4;f+=2)"margin"===c&&(g+=r.css(a,c+ca[f],!0,e)),d?("content"===c&&(g-=r.css(a,"padding"+ca[f],!0,e)),"margin"!==c&&(g-=r.css(a,"border"+ca[f]+"Width",!0,e))):(g+=r.css(a,"padding"+ca[f],!0,e),"padding"!==c&&(g+=r.css(a,"border"+ca[f]+"Width",!0,e)));return g}function $a(a,b,c){var d,e=Na(a),f=Oa(a,b,e),g="border-box"===r.css(a,"boxSizing",!1,e);return Ma.test(f)?f:(d=g&&(o.boxSizingReliable()||f===a.style[b]),"auto"===f&&(f=a["offset"+b[0].toUpperCase()+b.slice(1)]),f=parseFloat(f)||0,f+Za(a,b,c||(g?"border":"content"),d,e)+"px")}r.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Oa(a,"opacity");return""===c?"1":c}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=r.camelCase(b),i=Ra.test(b),j=a.style;return i||(b=Xa(h)),g=r.cssHooks[b]||r.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:j[b]:(f=typeof c,"string"===f&&(e=ba.exec(c))&&e[1]&&(c=fa(a,b,e),f="number"),null!=c&&c===c&&("number"===f&&(c+=e&&e[3]||(r.cssNumber[h]?"":"px")),o.clearCloneStyle||""!==c||0!==b.indexOf("background")||(j[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i?j.setProperty(b,c):j[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=r.camelCase(b),i=Ra.test(b);return i||(b=Xa(h)),g=r.cssHooks[b]||r.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=Oa(a,b,d)),"normal"===e&&b in Ta&&(e=Ta[b]),""===c||c?(f=parseFloat(e),c===!0||isFinite(f)?f||0:e):e}}),r.each(["height","width"],function(a,b){r.cssHooks[b]={get:function(a,c,d){if(c)return!Qa.test(r.css(a,"display"))||a.getClientRects().length&&a.getBoundingClientRect().width?$a(a,b,d):ea(a,Sa,function(){return $a(a,b,d)})},set:function(a,c,d){var e,f=d&&Na(a),g=d&&Za(a,b,d,"border-box"===r.css(a,"boxSizing",!1,f),f);return g&&(e=ba.exec(c))&&"px"!==(e[3]||"px")&&(a.style[b]=c,c=r.css(a,b)),Ya(a,c,g)}}}),r.cssHooks.marginLeft=Pa(o.reliableMarginLeft,function(a,b){if(b)return(parseFloat(Oa(a,"marginLeft"))||a.getBoundingClientRect().left-ea(a,{marginLeft:0},function(){return a.getBoundingClientRect().left}))+"px"}),r.each({margin:"",padding:"",border:"Width"},function(a,b){r.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];d<4;d++)e[a+ca[d]+b]=f[d]||f[d-2]||f[0];return e}},La.test(a)||(r.cssHooks[a+b].set=Ya)}),r.fn.extend({css:function(a,b){return T(this,function(a,b,c){var d,e,f={},g=0;if(Array.isArray(b)){for(d=Na(a),e=b.length;g<e;g++)f[b[g]]=r.css(a,b[g],!1,d);return f}return void 0!==c?r.style(a,b,c):r.css(a,b)},a,b,arguments.length>1)}}),r.fn.delay=function(b,c){return b=r.fx?r.fx.speeds[b]||b:b,c=c||"fx",this.queue(c,function(c,d){var e=a.setTimeout(c,b);d.stop=function(){a.clearTimeout(e)}})},function(){var a=d.createElement("input"),b=d.createElement("select"),c=b.appendChild(d.createElement("option"));a.type="checkbox",o.checkOn=""!==a.value,o.optSelected=c.selected,a=d.createElement("input"),a.value="t",a.type="radio",o.radioValue="t"===a.value}();var _a,ab=r.expr.attrHandle;r.fn.extend({attr:function(a,b){return T(this,r.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){r.removeAttr(this,a)})}}),r.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?r.prop(a,b,c):(1===f&&r.isXMLDoc(a)||(e=r.attrHooks[b.toLowerCase()]||(r.expr.match.bool.test(b)?_a:void 0)),void 0!==c?null===c?void r.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=r.find.attr(a,b),null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!o.radioValue&&"radio"===b&&B(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d=0,e=b&&b.match(L);if(e&&1===a.nodeType)while(c=e[d++])a.removeAttribute(c)}}),_a={set:function(a,b,c){return b===!1?r.removeAttr(a,c):a.setAttribute(c,c),c}},r.each(r.expr.match.bool.source.match(/\w+/g),function(a,b){var c=ab[b]||r.find.attr;ab[b]=function(a,b,d){var e,f,g=b.toLowerCase();return d||(f=ab[g],ab[g]=e,e=null!=c(a,b,d)?g:null,ab[g]=f),e}});var bb=/^(?:input|select|textarea|button)$/i,cb=/^(?:a|area)$/i;r.fn.extend({prop:function(a,b){return T(this,r.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[r.propFix[a]||a]})}}),r.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&r.isXMLDoc(a)||(b=r.propFix[b]||b,e=r.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=r.find.attr(a,"tabindex");return b?parseInt(b,10):bb.test(a.nodeName)||cb.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),o.optSelected||(r.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null},set:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}}),r.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){r.propFix[this.toLowerCase()]=this});function db(a){var b=a.match(L)||[];return b.join(" ")}function eb(a){return a.getAttribute&&a.getAttribute("class")||""}r.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).addClass(a.call(this,b,eb(this)))});if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=eb(c),d=1===c.nodeType&&" "+db(e)+" "){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=db(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).removeClass(a.call(this,b,eb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=eb(c),d=1===c.nodeType&&" "+db(e)+" "){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=db(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):r.isFunction(a)?this.each(function(c){r(this).toggleClass(a.call(this,c,eb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=r(this),f=a.match(L)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else void 0!==a&&"boolean"!==c||(b=eb(this),b&&W.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":W.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+db(eb(c))+" ").indexOf(b)>-1)return!0;return!1}});var fb=/\r/g;r.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=r.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,r(this).val()):a,null==e?e="":"number"==typeof e?e+="":Array.isArray(e)&&(e=r.map(e,function(a){return null==a?"":a+""})),b=r.valHooks[this.type]||r.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=r.valHooks[e.type]||r.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(fb,""):null==c?"":c)}}}),r.extend({valHooks:{option:{get:function(a){var b=r.find.attr(a,"value");return null!=b?b:db(r.text(a))}},select:{get:function(a){var b,c,d,e=a.options,f=a.selectedIndex,g="select-one"===a.type,h=g?null:[],i=g?f+1:e.length;for(d=f<0?i:g?f:0;d<i;d++)if(c=e[d],(c.selected||d===f)&&!c.disabled&&(!c.parentNode.disabled||!B(c.parentNode,"optgroup"))){if(b=r(c).val(),g)return b;h.push(b)}return h},set:function(a,b){var c,d,e=a.options,f=r.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=r.inArray(r.valHooks.option.get(d),f)>-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),r.each(["radio","checkbox"],function(){r.valHooks[this]={set:function(a,b){if(Array.isArray(b))return a.checked=r.inArray(r(a).val(),b)>-1}},o.checkOn||(r.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var gb=/^(?:focusinfocus|focusoutblur)$/;r.extend(r.event,{trigger:function(b,c,e,f){var g,h,i,j,k,m,n,o=[e||d],p=l.call(b,"type")?b.type:b,q=l.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!gb.test(p+r.event.triggered)&&(p.indexOf(".")>-1&&(q=p.split("."),p=q.shift(),q.sort()),k=p.indexOf(":")<0&&"on"+p,b=b[r.expando]?b:new r.Event(p,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=q.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+q.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:r.makeArray(c,[b]),n=r.event.special[p]||{},f||!n.trigger||n.trigger.apply(e,c)!==!1)){if(!f&&!n.noBubble&&!r.isWindow(e)){for(j=n.delegateType||p,gb.test(j+p)||(h=h.parentNode);h;h=h.parentNode)o.push(h),i=h;i===(e.ownerDocument||d)&&o.push(i.defaultView||i.parentWindow||a)}g=0;while((h=o[g++])&&!b.isPropagationStopped())b.type=g>1?j:n.bindType||p,m=(W.get(h,"events")||{})[b.type]&&W.get(h,"handle"),m&&m.apply(h,c),m=k&&h[k],m&&m.apply&&U(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=p,f||b.isDefaultPrevented()||n._default&&n._default.apply(o.pop(),c)!==!1||!U(e)||k&&r.isFunction(e[p])&&!r.isWindow(e)&&(i=e[k],i&&(e[k]=null),r.event.triggered=p,e[p](),r.event.triggered=void 0,i&&(e[k]=i)),b.result}},simulate:function(a,b,c){var d=r.extend(new r.Event,c,{type:a,isSimulated:!0});r.event.trigger(d,null,b)}}),r.fn.extend({trigger:function(a,b){return this.each(function(){r.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];if(c)return r.event.trigger(a,b,c,!0)}}),r.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(a,b){r.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),r.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),o.focusin="onfocusin"in a,o.focusin||r.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){r.event.simulate(b,a.target,r.event.fix(a))};r.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=W.access(d,b);e||d.addEventListener(a,c,!0),W.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=W.access(d,b)-1;e?W.access(d,b,e):(d.removeEventListener(a,c,!0),W.remove(d,b))}}});var hb=/\[\]$/,ib=/\r?\n/g,jb=/^(?:submit|button|image|reset|file)$/i,kb=/^(?:input|select|textarea|keygen)/i;function lb(a,b,c,d){var e;if(Array.isArray(b))r.each(b,function(b,e){c||hb.test(a)?d(a,e):lb(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d);
+});else if(c||"object"!==r.type(b))d(a,b);else for(e in b)lb(a+"["+e+"]",b[e],c,d)}r.param=function(a,b){var c,d=[],e=function(a,b){var c=r.isFunction(b)?b():b;d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(null==c?"":c)};if(Array.isArray(a)||a.jquery&&!r.isPlainObject(a))r.each(a,function(){e(this.name,this.value)});else for(c in a)lb(c,a[c],b,e);return d.join("&")},r.fn.extend({serialize:function(){return r.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=r.prop(this,"elements");return a?r.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!r(this).is(":disabled")&&kb.test(this.nodeName)&&!jb.test(a)&&(this.checked||!ja.test(a))}).map(function(a,b){var c=r(this).val();return null==c?null:Array.isArray(c)?r.map(c,function(a){return{name:b.name,value:a.replace(ib,"\r\n")}}):{name:b.name,value:c.replace(ib,"\r\n")}}).get()}}),r.fn.extend({wrapAll:function(a){var b;return this[0]&&(r.isFunction(a)&&(a=a.call(this[0])),b=r(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this},wrapInner:function(a){return r.isFunction(a)?this.each(function(b){r(this).wrapInner(a.call(this,b))}):this.each(function(){var b=r(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=r.isFunction(a);return this.each(function(c){r(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(a){return this.parent(a).not("body").each(function(){r(this).replaceWith(this.childNodes)}),this}}),r.expr.pseudos.hidden=function(a){return!r.expr.pseudos.visible(a)},r.expr.pseudos.visible=function(a){return!!(a.offsetWidth||a.offsetHeight||a.getClientRects().length)},o.createHTMLDocument=function(){var a=d.implementation.createHTMLDocument("").body;return a.innerHTML="<form></form><form></form>",2===a.childNodes.length}(),r.parseHTML=function(a,b,c){if("string"!=typeof a)return[];"boolean"==typeof b&&(c=b,b=!1);var e,f,g;return b||(o.createHTMLDocument?(b=d.implementation.createHTMLDocument(""),e=b.createElement("base"),e.href=d.location.href,b.head.appendChild(e)):b=d),f=C.exec(a),g=!c&&[],f?[b.createElement(f[1])]:(f=qa([a],b,g),g&&g.length&&r(g).remove(),r.merge([],f.childNodes))},r.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=r.css(a,"position"),l=r(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=r.css(a,"top"),i=r.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),r.isFunction(b)&&(b=b.call(a,c,r.extend({},h))),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},r.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){r.offset.setOffset(this,a,b)});var b,c,d,e,f=this[0];if(f)return f.getClientRects().length?(d=f.getBoundingClientRect(),b=f.ownerDocument,c=b.documentElement,e=b.defaultView,{top:d.top+e.pageYOffset-c.clientTop,left:d.left+e.pageXOffset-c.clientLeft}):{top:0,left:0}},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===r.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),B(a[0],"html")||(d=a.offset()),d={top:d.top+r.css(a[0],"borderTopWidth",!0),left:d.left+r.css(a[0],"borderLeftWidth",!0)}),{top:b.top-d.top-r.css(c,"marginTop",!0),left:b.left-d.left-r.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent;while(a&&"static"===r.css(a,"position"))a=a.offsetParent;return a||ra})}}),r.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c="pageYOffset"===b;r.fn[a]=function(d){return T(this,function(a,d,e){var f;return r.isWindow(a)?f=a:9===a.nodeType&&(f=a.defaultView),void 0===e?f?f[b]:a[d]:void(f?f.scrollTo(c?f.pageXOffset:e,c?e:f.pageYOffset):a[d]=e)},a,d,arguments.length)}}),r.each(["top","left"],function(a,b){r.cssHooks[b]=Pa(o.pixelPosition,function(a,c){if(c)return c=Oa(a,b),Ma.test(c)?r(a).position()[b]+"px":c})}),r.each({Height:"height",Width:"width"},function(a,b){r.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){r.fn[d]=function(e,f){var g=arguments.length&&(c||"boolean"!=typeof e),h=c||(e===!0||f===!0?"margin":"border");return T(this,function(b,c,e){var f;return r.isWindow(b)?0===d.indexOf("outer")?b["inner"+a]:b.document.documentElement["client"+a]:9===b.nodeType?(f=b.documentElement,Math.max(b.body["scroll"+a],f["scroll"+a],b.body["offset"+a],f["offset"+a],f["client"+a])):void 0===e?r.css(b,c,h):r.style(b,c,e,h)},b,g?e:void 0,g)}})}),r.fn.extend({bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}}),r.holdReady=function(a){a?r.readyWait++:r.ready(!0)},r.isArray=Array.isArray,r.parseJSON=JSON.parse,r.nodeName=B,"function"==typeof define&&define.amd&&define("jquery",[],function(){return r});var mb=a.jQuery,nb=a.$;return r.noConflict=function(b){return a.$===r&&(a.$=nb),b&&a.jQuery===r&&(a.jQuery=mb),r},b||(a.jQuery=a.$=r),r});
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/popper.min.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/popper.min.js
new file mode 100644
index 00000000..0f20d2a8
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/popper.min.js
@@ -0,0 +1,5 @@
+/*
+ Copyright (C) Federico Zivolo 2017
+ Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT).
+ */(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.Popper=t()})(this,function(){'use strict';function e(e){return e&&'[object Function]'==={}.toString.call(e)}function t(e,t){if(1!==e.nodeType)return[];var o=getComputedStyle(e,null);return t?o[t]:o}function o(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function n(e){if(!e)return document.body;switch(e.nodeName){case'HTML':case'BODY':return e.ownerDocument.body;case'#document':return e.body;}var i=t(e),r=i.overflow,p=i.overflowX,s=i.overflowY;return /(auto|scroll)/.test(r+s+p)?e:n(o(e))}function r(e){var o=e&&e.offsetParent,i=o&&o.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(o.nodeName)&&'static'===t(o,'position')?r(o):o:e?e.ownerDocument.documentElement:document.documentElement}function p(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||r(e.firstElementChild)===e)}function s(e){return null===e.parentNode?e:s(e.parentNode)}function d(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,i=o?e:t,n=o?t:e,a=document.createRange();a.setStart(i,0),a.setEnd(n,0);var l=a.commonAncestorContainer;if(e!==l&&t!==l||i.contains(n))return p(l)?l:r(l);var f=s(e);return f.host?d(f.host,t):d(e,s(t).host)}function a(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:'top',o='top'===t?'scrollTop':'scrollLeft',i=e.nodeName;if('BODY'===i||'HTML'===i){var n=e.ownerDocument.documentElement,r=e.ownerDocument.scrollingElement||n;return r[o]}return e[o]}function l(e,t){var o=2<arguments.length&&void 0!==arguments[2]&&arguments[2],i=a(t,'top'),n=a(t,'left'),r=o?-1:1;return e.top+=i*r,e.bottom+=i*r,e.left+=n*r,e.right+=n*r,e}function f(e,t){var o='x'===t?'Left':'Top',i='Left'==o?'Right':'Bottom';return parseFloat(e['border'+o+'Width'],10)+parseFloat(e['border'+i+'Width'],10)}function m(e,t,o,i){return J(t['offset'+e],t['scroll'+e],o['client'+e],o['offset'+e],o['scroll'+e],ie()?o['offset'+e]+i['margin'+('Height'===e?'Top':'Left')]+i['margin'+('Height'===e?'Bottom':'Right')]:0)}function h(){var e=document.body,t=document.documentElement,o=ie()&&getComputedStyle(t);return{height:m('Height',e,t,o),width:m('Width',e,t,o)}}function c(e){return se({},e,{right:e.left+e.width,bottom:e.top+e.height})}function g(e){var o={};if(ie())try{o=e.getBoundingClientRect();var i=a(e,'top'),n=a(e,'left');o.top+=i,o.left+=n,o.bottom+=i,o.right+=n}catch(e){}else o=e.getBoundingClientRect();var r={left:o.left,top:o.top,width:o.right-o.left,height:o.bottom-o.top},p='HTML'===e.nodeName?h():{},s=p.width||e.clientWidth||r.right-r.left,d=p.height||e.clientHeight||r.bottom-r.top,l=e.offsetWidth-s,m=e.offsetHeight-d;if(l||m){var g=t(e);l-=f(g,'x'),m-=f(g,'y'),r.width-=l,r.height-=m}return c(r)}function u(e,o){var i=ie(),r='HTML'===o.nodeName,p=g(e),s=g(o),d=n(e),a=t(o),f=parseFloat(a.borderTopWidth,10),m=parseFloat(a.borderLeftWidth,10),h=c({top:p.top-s.top-f,left:p.left-s.left-m,width:p.width,height:p.height});if(h.marginTop=0,h.marginLeft=0,!i&&r){var u=parseFloat(a.marginTop,10),b=parseFloat(a.marginLeft,10);h.top-=f-u,h.bottom-=f-u,h.left-=m-b,h.right-=m-b,h.marginTop=u,h.marginLeft=b}return(i?o.contains(d):o===d&&'BODY'!==d.nodeName)&&(h=l(h,o)),h}function b(e){var t=e.ownerDocument.documentElement,o=u(e,t),i=J(t.clientWidth,window.innerWidth||0),n=J(t.clientHeight,window.innerHeight||0),r=a(t),p=a(t,'left'),s={top:r-o.top+o.marginTop,left:p-o.left+o.marginLeft,width:i,height:n};return c(s)}function w(e){var i=e.nodeName;return'BODY'===i||'HTML'===i?!1:'fixed'===t(e,'position')||w(o(e))}function y(e,t,i,r){var p={top:0,left:0},s=d(e,t);if('viewport'===r)p=b(s);else{var a;'scrollParent'===r?(a=n(o(t)),'BODY'===a.nodeName&&(a=e.ownerDocument.documentElement)):'window'===r?a=e.ownerDocument.documentElement:a=r;var l=u(a,s);if('HTML'===a.nodeName&&!w(s)){var f=h(),m=f.height,c=f.width;p.top+=l.top-l.marginTop,p.bottom=m+l.top,p.left+=l.left-l.marginLeft,p.right=c+l.left}else p=l}return p.left+=i,p.top+=i,p.right-=i,p.bottom-=i,p}function E(e){var t=e.width,o=e.height;return t*o}function v(e,t,o,i,n){var r=5<arguments.length&&void 0!==arguments[5]?arguments[5]:0;if(-1===e.indexOf('auto'))return e;var p=y(o,i,r,n),s={top:{width:p.width,height:t.top-p.top},right:{width:p.right-t.right,height:p.height},bottom:{width:p.width,height:p.bottom-t.bottom},left:{width:t.left-p.left,height:p.height}},d=Object.keys(s).map(function(e){return se({key:e},s[e],{area:E(s[e])})}).sort(function(e,t){return t.area-e.area}),a=d.filter(function(e){var t=e.width,i=e.height;return t>=o.clientWidth&&i>=o.clientHeight}),l=0<a.length?a[0].key:d[0].key,f=e.split('-')[1];return l+(f?'-'+f:'')}function O(e,t,o){var i=d(t,o);return u(o,i)}function L(e){var t=getComputedStyle(e),o=parseFloat(t.marginTop)+parseFloat(t.marginBottom),i=parseFloat(t.marginLeft)+parseFloat(t.marginRight),n={width:e.offsetWidth+i,height:e.offsetHeight+o};return n}function x(e){var t={left:'right',right:'left',bottom:'top',top:'bottom'};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function S(e,t,o){o=o.split('-')[0];var i=L(e),n={width:i.width,height:i.height},r=-1!==['right','left'].indexOf(o),p=r?'top':'left',s=r?'left':'top',d=r?'height':'width',a=r?'width':'height';return n[p]=t[p]+t[d]/2-i[d]/2,n[s]=o===s?t[s]-i[a]:t[x(s)],n}function T(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function D(e,t,o){if(Array.prototype.findIndex)return e.findIndex(function(e){return e[t]===o});var i=T(e,function(e){return e[t]===o});return e.indexOf(i)}function C(t,o,i){var n=void 0===i?t:t.slice(0,D(t,'name',i));return n.forEach(function(t){t['function']&&console.warn('`modifier.function` is deprecated, use `modifier.fn`!');var i=t['function']||t.fn;t.enabled&&e(i)&&(o.offsets.popper=c(o.offsets.popper),o.offsets.reference=c(o.offsets.reference),o=i(o,t))}),o}function N(){if(!this.state.isDestroyed){var e={instance:this,styles:{},arrowStyles:{},attributes:{},flipped:!1,offsets:{}};e.offsets.reference=O(this.state,this.popper,this.reference),e.placement=v(this.options.placement,e.offsets.reference,this.popper,this.reference,this.options.modifiers.flip.boundariesElement,this.options.modifiers.flip.padding),e.originalPlacement=e.placement,e.offsets.popper=S(this.popper,e.offsets.reference,e.placement),e.offsets.popper.position='absolute',e=C(this.modifiers,e),this.state.isCreated?this.options.onUpdate(e):(this.state.isCreated=!0,this.options.onCreate(e))}}function k(e,t){return e.some(function(e){var o=e.name,i=e.enabled;return i&&o===t})}function W(e){for(var t=[!1,'ms','Webkit','Moz','O'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length-1;n++){var i=t[n],r=i?''+i+o:e;if('undefined'!=typeof document.body.style[r])return r}return null}function P(){return this.state.isDestroyed=!0,k(this.modifiers,'applyStyle')&&(this.popper.removeAttribute('x-placement'),this.popper.style.left='',this.popper.style.position='',this.popper.style.top='',this.popper.style[W('transform')]=''),this.disableEventListeners(),this.options.removeOnDestroy&&this.popper.parentNode.removeChild(this.popper),this}function B(e){var t=e.ownerDocument;return t?t.defaultView:window}function H(e,t,o,i){var r='BODY'===e.nodeName,p=r?e.ownerDocument.defaultView:e;p.addEventListener(t,o,{passive:!0}),r||H(n(p.parentNode),t,o,i),i.push(p)}function A(e,t,o,i){o.updateBound=i,B(e).addEventListener('resize',o.updateBound,{passive:!0});var r=n(e);return H(r,'scroll',o.updateBound,o.scrollParents),o.scrollElement=r,o.eventsEnabled=!0,o}function I(){this.state.eventsEnabled||(this.state=A(this.reference,this.options,this.state,this.scheduleUpdate))}function M(e,t){return B(e).removeEventListener('resize',t.updateBound),t.scrollParents.forEach(function(e){e.removeEventListener('scroll',t.updateBound)}),t.updateBound=null,t.scrollParents=[],t.scrollElement=null,t.eventsEnabled=!1,t}function R(){this.state.eventsEnabled&&(cancelAnimationFrame(this.scheduleUpdate),this.state=M(this.reference,this.state))}function U(e){return''!==e&&!isNaN(parseFloat(e))&&isFinite(e)}function Y(e,t){Object.keys(t).forEach(function(o){var i='';-1!==['width','height','top','right','bottom','left'].indexOf(o)&&U(t[o])&&(i='px'),e.style[o]=t[o]+i})}function j(e,t){Object.keys(t).forEach(function(o){var i=t[o];!1===i?e.removeAttribute(o):e.setAttribute(o,t[o])})}function F(e,t,o){var i=T(e,function(e){var o=e.name;return o===t}),n=!!i&&e.some(function(e){return e.name===o&&e.enabled&&e.order<i.order});if(!n){var r='`'+t+'`';console.warn('`'+o+'`'+' modifier is required by '+r+' modifier in order to work, be sure to include it before '+r+'!')}return n}function K(e){return'end'===e?'start':'start'===e?'end':e}function q(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=ae.indexOf(e),i=ae.slice(o+1).concat(ae.slice(0,o));return t?i.reverse():i}function V(e,t,o,i){var n=e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),r=+n[1],p=n[2];if(!r)return e;if(0===p.indexOf('%')){var s;switch(p){case'%p':s=o;break;case'%':case'%r':default:s=i;}var d=c(s);return d[t]/100*r}if('vh'===p||'vw'===p){var a;return a='vh'===p?J(document.documentElement.clientHeight,window.innerHeight||0):J(document.documentElement.clientWidth,window.innerWidth||0),a/100*r}return r}function z(e,t,o,i){var n=[0,0],r=-1!==['right','left'].indexOf(i),p=e.split(/(\+|\-)/).map(function(e){return e.trim()}),s=p.indexOf(T(p,function(e){return-1!==e.search(/,|\s/)}));p[s]&&-1===p[s].indexOf(',')&&console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');var d=/\s*,\s*|\s+/,a=-1===s?[p]:[p.slice(0,s).concat([p[s].split(d)[0]]),[p[s].split(d)[1]].concat(p.slice(s+1))];return a=a.map(function(e,i){var n=(1===i?!r:r)?'height':'width',p=!1;return e.reduce(function(e,t){return''===e[e.length-1]&&-1!==['+','-'].indexOf(t)?(e[e.length-1]=t,p=!0,e):p?(e[e.length-1]+=t,p=!1,e):e.concat(t)},[]).map(function(e){return V(e,n,t,o)})}),a.forEach(function(e,t){e.forEach(function(o,i){U(o)&&(n[t]+=o*('-'===e[i-1]?-1:1))})}),n}function G(e,t){var o,i=t.offset,n=e.placement,r=e.offsets,p=r.popper,s=r.reference,d=n.split('-')[0];return o=U(+i)?[+i,0]:z(i,p,s,d),'left'===d?(p.top+=o[0],p.left-=o[1]):'right'===d?(p.top+=o[0],p.left+=o[1]):'top'===d?(p.left+=o[0],p.top-=o[1]):'bottom'===d&&(p.left+=o[0],p.top+=o[1]),e.popper=p,e}for(var _=Math.min,X=Math.floor,J=Math.max,Q='undefined'!=typeof window&&'undefined'!=typeof document,Z=['Edge','Trident','Firefox'],$=0,ee=0;ee<Z.length;ee+=1)if(Q&&0<=navigator.userAgent.indexOf(Z[ee])){$=1;break}var i,te=Q&&window.Promise,oe=te?function(e){var t=!1;return function(){t||(t=!0,window.Promise.resolve().then(function(){t=!1,e()}))}}:function(e){var t=!1;return function(){t||(t=!0,setTimeout(function(){t=!1,e()},$))}},ie=function(){return void 0==i&&(i=-1!==navigator.appVersion.indexOf('MSIE 10')),i},ne=function(e,t){if(!(e instanceof t))throw new TypeError('Cannot call a class as a function')},re=function(){function e(e,t){for(var o,n=0;n<t.length;n++)o=t[n],o.enumerable=o.enumerable||!1,o.configurable=!0,'value'in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}return function(t,o,i){return o&&e(t.prototype,o),i&&e(t,i),t}}(),pe=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e},se=Object.assign||function(e){for(var t,o=1;o<arguments.length;o++)for(var i in t=arguments[o],t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},de=['auto-start','auto','auto-end','top-start','top','top-end','right-start','right','right-end','bottom-end','bottom','bottom-start','left-end','left','left-start'],ae=de.slice(3),le={FLIP:'flip',CLOCKWISE:'clockwise',COUNTERCLOCKWISE:'counterclockwise'},fe=function(){function t(o,i){var n=this,r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};ne(this,t),this.scheduleUpdate=function(){return requestAnimationFrame(n.update)},this.update=oe(this.update.bind(this)),this.options=se({},t.Defaults,r),this.state={isDestroyed:!1,isCreated:!1,scrollParents:[]},this.reference=o&&o.jquery?o[0]:o,this.popper=i&&i.jquery?i[0]:i,this.options.modifiers={},Object.keys(se({},t.Defaults.modifiers,r.modifiers)).forEach(function(e){n.options.modifiers[e]=se({},t.Defaults.modifiers[e]||{},r.modifiers?r.modifiers[e]:{})}),this.modifiers=Object.keys(this.options.modifiers).map(function(e){return se({name:e},n.options.modifiers[e])}).sort(function(e,t){return e.order-t.order}),this.modifiers.forEach(function(t){t.enabled&&e(t.onLoad)&&t.onLoad(n.reference,n.popper,n.options,t,n.state)}),this.update();var p=this.options.eventsEnabled;p&&this.enableEventListeners(),this.state.eventsEnabled=p}return re(t,[{key:'update',value:function(){return N.call(this)}},{key:'destroy',value:function(){return P.call(this)}},{key:'enableEventListeners',value:function(){return I.call(this)}},{key:'disableEventListeners',value:function(){return R.call(this)}}]),t}();return fe.Utils=('undefined'==typeof window?global:window).PopperUtils,fe.placements=de,fe.Defaults={placement:'bottom',eventsEnabled:!0,removeOnDestroy:!1,onCreate:function(){},onUpdate:function(){},modifiers:{shift:{order:100,enabled:!0,fn:function(e){var t=e.placement,o=t.split('-')[0],i=t.split('-')[1];if(i){var n=e.offsets,r=n.reference,p=n.popper,s=-1!==['bottom','top'].indexOf(o),d=s?'left':'top',a=s?'width':'height',l={start:pe({},d,r[d]),end:pe({},d,r[d]+r[a]-p[a])};e.offsets.popper=se({},p,l[i])}return e}},offset:{order:200,enabled:!0,fn:G,offset:0},preventOverflow:{order:300,enabled:!0,fn:function(e,t){var o=t.boundariesElement||r(e.instance.popper);e.instance.reference===o&&(o=r(o));var i=y(e.instance.popper,e.instance.reference,t.padding,o);t.boundaries=i;var n=t.priority,p=e.offsets.popper,s={primary:function(e){var o=p[e];return p[e]<i[e]&&!t.escapeWithReference&&(o=J(p[e],i[e])),pe({},e,o)},secondary:function(e){var o='right'===e?'left':'top',n=p[o];return p[e]>i[e]&&!t.escapeWithReference&&(n=_(p[o],i[e]-('right'===e?p.width:p.height))),pe({},o,n)}};return n.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';p=se({},p,s[t](e))}),e.offsets.popper=p,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,o=t.popper,i=t.reference,n=e.placement.split('-')[0],r=X,p=-1!==['top','bottom'].indexOf(n),s=p?'right':'bottom',d=p?'left':'top',a=p?'width':'height';return o[s]<r(i[d])&&(e.offsets.popper[d]=r(i[d])-o[a]),o[d]>r(i[s])&&(e.offsets.popper[d]=r(i[s])),e}},arrow:{order:500,enabled:!0,fn:function(e,o){var i;if(!F(e.instance.modifiers,'arrow','keepTogether'))return e;var n=o.element;if('string'==typeof n){if(n=e.instance.popper.querySelector(n),!n)return e;}else if(!e.instance.popper.contains(n))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var r=e.placement.split('-')[0],p=e.offsets,s=p.popper,d=p.reference,a=-1!==['left','right'].indexOf(r),l=a?'height':'width',f=a?'Top':'Left',m=f.toLowerCase(),h=a?'left':'top',g=a?'bottom':'right',u=L(n)[l];d[g]-u<s[m]&&(e.offsets.popper[m]-=s[m]-(d[g]-u)),d[m]+u>s[g]&&(e.offsets.popper[m]+=d[m]+u-s[g]),e.offsets.popper=c(e.offsets.popper);var b=d[m]+d[l]/2-u/2,w=t(e.instance.popper),y=parseFloat(w['margin'+f],10),E=parseFloat(w['border'+f+'Width'],10),v=b-e.offsets.popper[m]-y-E;return v=J(_(s[l]-u,v),0),e.arrowElement=n,e.offsets.arrow=(i={},pe(i,m,Math.round(v)),pe(i,h,''),i),e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(k(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var o=y(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement),i=e.placement.split('-')[0],n=x(i),r=e.placement.split('-')[1]||'',p=[];switch(t.behavior){case le.FLIP:p=[i,n];break;case le.CLOCKWISE:p=q(i);break;case le.COUNTERCLOCKWISE:p=q(i,!0);break;default:p=t.behavior;}return p.forEach(function(s,d){if(i!==s||p.length===d+1)return e;i=e.placement.split('-')[0],n=x(i);var a=e.offsets.popper,l=e.offsets.reference,f=X,m='left'===i&&f(a.right)>f(l.left)||'right'===i&&f(a.left)<f(l.right)||'top'===i&&f(a.bottom)>f(l.top)||'bottom'===i&&f(a.top)<f(l.bottom),h=f(a.left)<f(o.left),c=f(a.right)>f(o.right),g=f(a.top)<f(o.top),u=f(a.bottom)>f(o.bottom),b='left'===i&&h||'right'===i&&c||'top'===i&&g||'bottom'===i&&u,w=-1!==['top','bottom'].indexOf(i),y=!!t.flipVariations&&(w&&'start'===r&&h||w&&'end'===r&&c||!w&&'start'===r&&g||!w&&'end'===r&&u);(m||b||y)&&(e.flipped=!0,(m||b)&&(i=p[d+1]),y&&(r=K(r)),e.placement=i+(r?'-'+r:''),e.offsets.popper=se({},e.offsets.popper,S(e.instance.popper,e.offsets.reference,e.placement)),e=C(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,o=t.split('-')[0],i=e.offsets,n=i.popper,r=i.reference,p=-1!==['left','right'].indexOf(o),s=-1===['top','left'].indexOf(o);return n[p?'left':'top']=r[o]-(s?n[p?'width':'height']:0),e.placement=x(t),e.offsets.popper=c(n),e}},hide:{order:800,enabled:!0,fn:function(e){if(!F(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,o=T(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottom<o.top||t.left>o.right||t.top>o.bottom||t.right<o.left){if(!0===e.hide)return e;e.hide=!0,e.attributes['x-out-of-boundaries']=''}else{if(!1===e.hide)return e;e.hide=!1,e.attributes['x-out-of-boundaries']=!1}return e}},computeStyle:{order:850,enabled:!0,fn:function(e,t){var o=t.x,i=t.y,n=e.offsets.popper,p=T(e.instance.modifiers,function(e){return'applyStyle'===e.name}).gpuAcceleration;void 0!==p&&console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');var s,d,a=void 0===p?t.gpuAcceleration:p,l=r(e.instance.popper),f=g(l),m={position:n.position},h={left:X(n.left),top:X(n.top),bottom:X(n.bottom),right:X(n.right)},c='bottom'===o?'top':'bottom',u='right'===i?'left':'right',b=W('transform');if(d='bottom'==c?-f.height+h.bottom:h.top,s='right'==u?-f.width+h.right:h.left,a&&b)m[b]='translate3d('+s+'px, '+d+'px, 0)',m[c]=0,m[u]=0,m.willChange='transform';else{var w='bottom'==c?-1:1,y='right'==u?-1:1;m[c]=d*w,m[u]=s*y,m.willChange=c+', '+u}var E={"x-placement":e.placement};return e.attributes=se({},E,e.attributes),e.styles=se({},m,e.styles),e.arrowStyles=se({},e.offsets.arrow,e.arrowStyles),e},gpuAcceleration:!0,x:'bottom',y:'right'},applyStyle:{order:900,enabled:!0,fn:function(e){return Y(e.instance.popper,e.styles),j(e.instance.popper,e.attributes),e.arrowElement&&Object.keys(e.arrowStyles).length&&Y(e.arrowElement,e.arrowStyles),e},onLoad:function(e,t,o,i,n){var r=O(n,t,e),p=v(o.placement,r,t,e,o.modifiers.flip.boundariesElement,o.modifiers.flip.padding);return t.setAttribute('x-placement',p),Y(t,{position:'absolute'}),o},gpuAcceleration:void 0}}},fe});
+//# sourceMappingURL=popper.min.js.map
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/pricing.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/pricing.css
new file mode 100644
index 00000000..1b52205c
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/pricing.css
@@ -0,0 +1,25 @@
+html {
+  font-size: 14px;
+}
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+.container {
+  max-width: 960px;
+}
+
+.pricing-header {
+  max-width: 700px;
+}
+
+.card-deck .card {
+  min-width: 220px;
+}
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/pricing.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/pricing.html
new file mode 100644
index 00000000..974eda2a
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/layout/pricing.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="Anton Angelov">
+
+    <title>Pricing example for Bellatrix</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="pricing.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
+      <h5 class="my-0 mr-md-auto font-weight-normal">Automate The Planet</h5>
+      <nav class="my-2 my-md-0 mr-md-3">
+        <a class="p-2 text-dark" href="#">Features</a>
+        <a class="p-2 text-dark" href="#">Enterprise</a>
+        <a class="p-2 text-dark" href="#">Support</a>
+        <a class="p-2 text-dark" href="#">Pricing</a>
+      </nav>
+      <a class="btn btn-outline-primary" href="#">Sign up</a>
+    </div>
+
+    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
+      <h1 class="display-4">Pricing</h1>
+      <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
+    </div>
+
+    <div class="container">
+      <div class="card-deck mb-3 text-center">
+        <div class="card mb-4 box-shadow">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Free</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>10 users included</li>
+              <li>2 GB of storage</li>
+              <li>Email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
+          </div>
+        </div>
+        <div class="card mb-4 box-shadow">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Pro</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>20 users included</li>
+              <li>10 GB of storage</li>
+              <li>Priority email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
+          </div>
+        </div>
+        <div class="card mb-4 box-shadow">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Enterprise</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>30 users included</li>
+              <li>15 GB of storage</li>
+              <li>Phone and email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
+          </div>
+        </div>
+      </div>
+
+      <footer class="pt-4 my-md-5 pt-md-5 border-top">
+        <div class="row">
+          <div class="col-12 col-md">
+            <img class="mb-2" src="bootstrap-solid.svg" alt="" width="24" height="24">
+            <small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
+          </div>
+          <div class="col-6 col-md">
+            <h5>Features</h5>
+            <ul class="list-unstyled text-small">
+              <li><a class="text-muted" href="#">Cool stuff</a></li>
+              <li><a class="text-muted" href="#">Random feature</a></li>
+              <li><a class="text-muted" href="#">Team feature</a></li>
+              <li><a class="text-muted" href="#">Stuff for developers</a></li>
+              <li><a class="text-muted" href="#">Another one</a></li>
+              <li><a class="text-muted" href="#">Last time</a></li>
+            </ul>
+          </div>
+          <div class="col-6 col-md">
+            <h5>Resources</h5>
+            <ul class="list-unstyled text-small">
+              <li><a class="text-muted" href="#">Resource</a></li>
+              <li><a class="text-muted" href="#">Resource name</a></li>
+              <li><a class="text-muted" href="#">Another resource</a></li>
+              <li><a class="text-muted" href="#">Final resource</a></li>
+            </ul>
+          </div>
+          <div class="col-6 col-md">
+            <h5>About</h5>
+            <ul class="list-unstyled text-small">
+              <li><a class="text-muted" href="#">Team</a></li>
+              <li><a class="text-muted" href="#">Locations</a></li>
+              <li><a class="text-muted" href="#">Privacy</a></li>
+              <li><a class="text-muted" href="#">Terms</a></li>
+            </ul>
+          </div>
+        </div>
+      </footer>
+    </div>
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="jquery-3.2.1.slim.min.js"></script>
+    <script>window.jQuery || document.write('<script src="jquery-slim.min.js"><\/script>')</script>
+    <script src="popper.min.js"></script>
+    <script src="bootstrap.min.js"></script>
+    <script src="holder.min.js"></script>
+    <script>
+      Holder.addTheme('thumb', {
+        bg: '#55595c',
+        fg: '#eceeef',
+        text: 'Thumbnail'
+      });
+    </script>
+  </body>
+</html>
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/month/month.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/month/month.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/month/month.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/month/month.html
new file mode 100644
index 00000000..b27b81da
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/month/month.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="month.css">
+</head>
+<body>
+    <label for="myMonth">Default</label>
+    <input id="myMonth" name="myMonth" type="month" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myMonth1">Test Max Min Step</label>
+    <input id="myMonth1" name="myMonth1" type="month" step="2" min="1900-01" max="2032-12">
+
+    <br>
+    <br>
+    <label for="myMonth2">Default Value</label>
+    <input id="myMonth2" name="myMonth2" type="month" step="2" min="1900-01" max="2032-12" value="2017-08">
+
+    <br>
+    <br>
+    <label for="myMonth3">Autocomplete= ON</label>
+    <input id="myMonth3" name="myMonth3" type="month" step="2" min="1900-01" max="2032-12" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myMonth4">Autocomplete= OFF</label>
+    <input id="myMonth4" name="myMonth4" type="month" step="2" min="1900-01" max="2032-12" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myMonth5">Readonly Set</label>
+    <input id="myMonth5" name="myMonth5" type="month" step="2" min="1900-01" max="2032-12" readonly>
+
+    <br>
+    <br>
+    <label for="myMonth6">Required Set</label>
+    <input id="myMonth6" name="myMonth6" type="month" step="2" min="1900-01" max="2032-12" required>
+
+    <br>
+    <br>
+    <label for="myMonth7">Test Hover</label>
+    <input id="myMonth7" name="myMonth7" type="month" step="2" min="1900-01" max="2032-12" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myMonth8">Test Focus</label>
+    <input id="myMonth8" name="myMonth8" type="month" step="2" min="1900-01" max="2032-12" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myMonth9">Disabled Set</label>
+    <input id="myMonth9" name="myMonth9" type="month" step="2" min="1900-01" max="2032-12" disabled>
+
+    <script type="text/javascript" src="month.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/month/month.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/month/month.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/month/month.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/number/number.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/number/number.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/number/number.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/number/number.html
new file mode 100644
index 00000000..82e2897e
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/number/number.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="number.css">
+</head>
+<body>
+    <label for="myNumber">Test Placeholders</label>
+    <input id="myNumber" name="myNumber" type="number" placeholder="Multiple of 10" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myNumber1">Test Max Min Step</label>
+    <input id="myNumber1" name="myNumber1" type="number" step="2" min="10" max="20">
+
+    <br>
+    <br>
+    <label for="myNumber2">Default Value</label>
+    <input id="myNumber2" name="myNumber2" type="number" step="2" min="10" max="20" value="4">
+
+    <br>
+    <br>
+    <label for="myNumber3">Autocomplete= ON</label>
+    <input id="myNumber3" name="myNumber3" type="number" step="2" min="10" max="20" value="4" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myNumber4">Autocomplete= OFF</label>
+    <input id="myNumber4" name="myNumber4" type="number" step="2" min="10" max="20" value="4" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myNumber5">Readonly Set</label>
+    <input id="myNumber5" name="myNumber5" type="number" step="2" min="10" max="20" value="4" readonly>
+
+    <br>
+    <br>
+    <label for="myNumber6">Required Set</label>
+    <input id="myNumber6" name="myNumber6" type="number" step="2" min="10" max="20" value="4" required>
+
+    <br>
+    <br>
+    <label for="myNumber7">Test Hover</label>
+    <input id="myNumber7" name="myNumber7" type="number" step="2" min="10" max="20" value="4" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myNumber8">Test Focus</label>
+    <input id="myNumber8" name="myNumber8" type="number" step="2" min="10" max="20" value="4" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myNumber9">Disabled Set</label>
+    <input id="myNumber9" name="myNumber6" type="number" step="2" min="10" max="20" value="4" disabled>
+
+
+    <script type="text/javascript" src="number.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/number/number.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/number/number.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/number/number.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/output/output.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/output/output.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/output/output.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/output/output.html
new file mode 100644
index 00000000..c35434e2
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/output/output.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="output.css">
+</head>
+<body>
+    <label for="myOutput">Hover</label>
+    <output for="myOutput" id="myOutput" onmouseover="this.style.color='red';">10</output>
+
+    <br>
+    <br>
+    <label for="myOutput1">Inner Html</label>
+    <output id="myOutput1"><button name="button">Click me</button></output>
+
+    <br>
+    <br>
+    <label for="myOutput2">No InnerText</label>
+    <output id="myOutput2"></output>
+
+
+    <script type="text/javascript" src="output.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/output/output.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/output/output.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/password/password.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/password/password.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/password/password.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/password/password.html
new file mode 100644
index 00000000..2d757ffd
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/password/password.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="password.css">
+</head>
+<body>
+    <label for="myPassword">Placeholders</label>
+    <input id="myPassword" name="myPassword" type="password" placeholder="your password term goes here" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myPassword1">Physical input element size</label>
+    <input id="myPassword1" name="myPassword" type="password" size="30">
+
+    <br>
+    <br>
+    <label for="myPassword2">Element value length</label>
+    <input id="myPassword2" name="myPassword" type="password" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myPassword3">Providing default options</label>
+    <input id="myPassword3" name="myPassword" type="password" value="password for stars">
+
+    <br>
+    <br>
+    <label for="myPassword4">Autocomplete= ON</label>
+    <input id="myPassword4" name="myPassword" type="password" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myPassword5">Autocomplete= OFF</label>
+    <input id="myPassword5" name="myPassword" type="password" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myPassword6">Readonly Set</label>
+    <input id="myPassword6" name="myPassword" type="password" readonly>
+
+    <br>
+    <br>
+    <label for="myPassword7">Required Set</label>
+    <input id="myPassword7" name="myPassword" type="password" required>
+
+    <br>
+    <br>
+    <label for="myPassword8">Test Hover</label>
+    <input id="myPassword8" name="myPassword" type="password" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myPassword9">Test Focus</label>
+    <input id="myPassword9" name="myPassword" type="password" onfocus="this.style.color='blue';">
+
+    <div id="myPassword10Wrapper">
+        <br>
+        <br>
+        <label for="myPassword10">Test Disabled</label>
+        <input id="myPassword10" name="myPassword" type="password" disabled>
+    </div>
+
+    <script type="text/javascript" src="password.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/password/password.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/password/password.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/password/password.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/phone/phone.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/phone/phone.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/phone/phone.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/phone/phone.html
new file mode 100644
index 00000000..90738ef0
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/phone/phone.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="phone.css">
+</head>
+<body>
+    <label for="myPhone">Placeholders</label>
+    <input id="myPhone" name="myPhone" type="tel" placeholder="123-4567-8901" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myPhone1">Physical input element size</label>
+    <input id="myPhone1" name="myPhone" type="tel" size="30">
+
+    <br>
+    <br>
+    <label for="myPhone2">Element value length</label>
+    <input id="myPhone2" name="myPhone" type="tel" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myPhone3">Providing default options</label>
+    <input id="myPhone3" name="myPhone" type="tel" value="123-4567-8901">
+
+    <br>
+    <br>
+    <label for="myPhone4">Autocomplete= ON</label>
+    <input id="myPhone4" name="myPhone" type="tel" value="00359866547465" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myPhone5">Autocomplete= OFF</label>
+    <input id="myPhone5" name="myPhone" type="tel" value="00359866547465" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myPhone6">Readonly Set</label>
+    <input id="myPhone6" name="myPhone" type="tel" value="00359866547465" readonly>
+
+    <br>
+    <br>
+    <label for="myPhone7">Required Set</label>
+    <input id="myPhone7" name="myPhone" type="tel" value="00359866547465" required>
+
+    <br>
+    <br>
+    <label for="myPhone8">Test Hover</label>
+    <input id="myPhone8" name="myPhone" type="tel" value="00359866547465" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myPhone9">Test Focus</label>
+    <input id="myPhone9" name="myPhone" type="tel" value="00359866547465" onfocus="this.style.color='blue';">
+
+    <div id="myPhone10Wrapper">
+        <br>
+        <br>
+        <label for="myPhone10">Test Disabled</label>
+        <input id="myPhone10" name="myPhone" type="tel" value="00359866547465" disabled>
+    </div>
+
+    <br>
+    <br>
+    <label for="myPhone11">Test Hidden</label>
+    <input id="myPhone11" name="myPhone" type="tel" value="00359866547465" hidden>
+
+    <script type="text/javascript" src="phone.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/phone/phone.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/phone/phone.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/phone/phone.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/progress/progress.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/progress/progress.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/progress/progress.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/progress/progress.html
new file mode 100644
index 00000000..807e199c
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/progress/progress.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="progress.css">
+</head>
+<body>
+    <label for="myProgress">Default</label>
+    <progress value="70" max="100" id="myProgress">70 %</progress>
+
+    <br>
+    <br>
+    <label for="myProgress1">No Max</label>
+    <progress value="70" id="myProgress1">70 %</progress>
+
+    <br>
+    <br>
+    <label for="myProgress2">No Value</label>
+    <progress id="myProgress2">70 %</progress>
+
+    <br>
+    <br>
+    <label for="myProgress3">No Text</label>
+    <progress id="myProgress3"></progress>
+
+
+    <script type="text/javascript" src="progress.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/progress/progress.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/progress/progress.js
new file mode 100644
index 00000000..83e56e3b
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/progress/progress.js
@@ -0,0 +1,25 @@
+var buttons = document.querySelectorAll('input');
+for (var i = 0; i < buttons.length; i++) {
+    var self = buttons[i];
+
+    self.addEventListener('click', function (event) {  
+        if (this.value === 'Start') {
+            this.value = 'Stop';
+        } else {
+            this.value = 'Start';
+        }
+    }, false);
+}
+
+var buttons1 = document.querySelectorAll('button');
+for (var i = 0; i < buttons1.length; i++) {
+    var self = buttons1[i];
+
+    self.addEventListener('click', function (event) {  
+        if (this.innerHTML === 'Start') {
+            this.innerHTML = 'Stop';
+        } else {
+            this.innerHTML = 'Start';
+        }
+    }, false);
+}
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/radio/radio.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/radio/radio.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/radio/radio.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/radio/radio.html
new file mode 100644
index 00000000..e5f63035
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/radio/radio.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="radio.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="myRadio">Providing default options</label>
+    <input type="radio" id="myRadio" name="subscribe" value="newsletter" checked>
+
+    <br>
+    <br>
+    <label for="myRadio1">Test Hover</label>
+    <input type="radio" id="myRadio1" checked onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myRadio2">Test Focus</label>
+    <input type="radio" id="myRadio2" name="subscribe" value="newsletter" checked onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myRadio3">Test IsDisabled</label>
+    <input type="radio" id="myRadio3" name="subscribe" value="newsletter" disabled>
+
+
+    <script type="text/javascript" src="radio.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/radio/radio.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/radio/radio.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/radio/radio.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/range/range.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/range/range.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/range/range.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/range/range.html
new file mode 100644
index 00000000..f74c12b6
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/range/range.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="range.css">
+</head>
+<body>
+    <label for="myRange">Default</label>
+    <input id="myRange" name="myRange" type="range" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myRange1">Test Max Min Step</label>
+    <input id="myRange1" name="myRange1" type="range" step="2" min="2" max="10">
+
+    <br>
+    <br>
+    <label for="myRange2">Default Value</label>
+    <input id="myRange2" name="myRange2" type="range" step="2" min="-2" max="10" value="7">
+
+    <br>
+    <br>
+    <label for="myRange3">Autocomplete= ON</label>
+    <input id="myRange3" name="myRange3" type="range" step="2" min="-2" max="10" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myRange4">Autocomplete= OFF</label>
+    <input id="myRange4" name="myRange4" type="range" step="2" min="-2" max="10" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myRange5">Readonly Set</label>
+    <input id="myRange5" name="myRange5" type="range" step="2" min="-2" max="10" readonly>
+
+    <br>
+    <br>
+    <label for="myRange6">Required Set</label>
+    <input id="myRange6" name="myRange6" type="range" step="2" min="-2" max="10" required>
+
+    <br>
+    <br>
+    <label for="myRange7">Test Hover</label>
+    <input id="myRange7" name="myRange7" type="range" step="2" min="-2" max="10" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myRange8">Test Focus</label>
+    <input id="myRange8" name="myRange8" type="range" step="2" min="-2" max="10" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myRange9">Disabled Set</label>
+    <input id="myRange9" name="myRange9" type="range" step="2" min="-2" max="10" disabled>
+
+    <br>
+    <br>
+    <label for="myRange10">List</label>
+    <input id="myRange10" name="myRange10" type="range" step="2" min="-2" max="200" list="tickmarks">
+
+    <datalist id="tickmarks">
+        <option value="0">
+        <option value="10">
+        <option value="20">
+        <option value="30">
+        <option value="40">
+        <option value="50">
+        <option value="60">
+        <option value="70">
+        <option value="80">
+        <option value="90">
+        <option value="100">
+    </datalist>
+
+    <script type="text/javascript" src="range.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/range/range.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/range/range.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/range/range.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/reset/reset.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/reset/reset.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/reset/reset.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/reset/reset.html
new file mode 100644
index 00000000..4372387e
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/reset/reset.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="reset.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="myButton">Providing default options Input Reset</label>
+    <input type="reset" id="myButton" name="start" value="Start">
+
+    <br>
+    <br>
+    <label for="myButton1">Test Hover Input Reset</label>
+    <input type="reset" id="myButton1" name="start" value="Start" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myButton2">Test Focus Input Reset</label>
+    <input type="reset" id="myButton2" name="start" value="Start" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myButton3">Test IsDisabled Input Reset</label>
+    <input type="reset" id="myButton3" name="start" value="Start" disabled>
+
+    <script type="text/javascript" src="reset.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/reset/reset.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/reset/reset.js
new file mode 100644
index 00000000..83e56e3b
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/reset/reset.js
@@ -0,0 +1,25 @@
+var buttons = document.querySelectorAll('input');
+for (var i = 0; i < buttons.length; i++) {
+    var self = buttons[i];
+
+    self.addEventListener('click', function (event) {  
+        if (this.value === 'Start') {
+            this.value = 'Stop';
+        } else {
+            this.value = 'Start';
+        }
+    }, false);
+}
+
+var buttons1 = document.querySelectorAll('button');
+for (var i = 0; i < buttons1.length; i++) {
+    var self = buttons1[i];
+
+    self.addEventListener('click', function (event) {  
+        if (this.innerHTML === 'Start') {
+            this.innerHTML = 'Stop';
+        } else {
+            this.innerHTML = 'Start';
+        }
+    }, false);
+}
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/search/search.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/search/search.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/search/search.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/search/search.html
new file mode 100644
index 00000000..4f736af7
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/search/search.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="search.css">
+</head>
+<body>
+    <label for="mySearch">Placeholders</label>
+    <input id="mySearch" name="mySearch" type="search" placeholder="your search term goes here" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="mySearch1">Physical input element size</label>
+    <input id="mySearch1" name="mySearch" type="search" size="30">
+
+    <br>
+    <br>
+    <label for="mySearch2">Element value length</label>
+    <input id="mySearch2" name="mySearch" type="search" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="mySearch3">Providing default options</label>
+    <input id="mySearch3" name="mySearch" type="search" value="search for stars">
+
+    <br>
+    <br>
+    <label for="mySearch4">Autocomplete= ON</label>
+    <input id="mySearch4" name="mySearch" type="search" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="mySearch5">Autocomplete= OFF</label>
+    <input id="mySearch5" name="mySearch" type="search" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="mySearch6">Readonly Set</label>
+    <input id="mySearch6" name="mySearch" type="search" readonly>
+
+    <br>
+    <br>
+    <label for="mySearch7">Required Set</label>
+    <input id="mySearch7" name="mySearch" type="search" required>
+
+    <br>
+    <br>
+    <label for="mySearch8">Test Hover</label>
+    <input id="mySearch8" name="mySearch" type="search" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="mySearch9">Test Focus</label>
+    <input id="mySearch9" name="mySearch" type="search" onfocus="this.style.color='blue';">
+
+    <div id="mySearch10Wrapper">
+        <br>
+        <br>
+        <label for="mySearch10">Test Disabled</label>
+        <input id="mySearch10" name="mySearch" type="search" disabled>
+    </div>
+
+    <script type="text/javascript" src="search.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/search/search.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/search/search.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/search/search.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/select/select.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/select/select.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/select/select.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/select/select.html
new file mode 100644
index 00000000..3d4d087d
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/select/select.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="select.css">
+</head>
+<body>
+    <br>
+    <br>
+    <label for="mySelect">Providing default options</label>
+    <select name="select" id="mySelect">
+        <option value="bella" selected>Bellatrix</option>
+        <option value="bella1">Is</option>
+        <option value="bella2">Awesome</option>
+    </select>
+
+    <br>
+    <br>
+    <label for="mySelect1">Test Hover</label>
+    <select name="select" id="mySelect1" onmouseover="this.style.color='red';">
+        <option value="bella">Bellatrix</option>
+        <option value="bella1" selected>Is</option>
+        <option value="bella2">Awesome</option>
+    </select>
+
+    <br>
+    <br>
+    <label for="mySelect2">Test Focus</label>
+    <select name="select" id="mySelect2" onfocus="this.style.color='blue';">
+        <option value="bella">Bellatrix</option>
+        <option value="bella1">Is</option>
+        <option value="bella2" selected>Awesome</option>
+    </select>
+
+    <br>
+    <br>
+    <label for="mySelect3">Test IsDisabled</label>
+    <select name="select" id="mySelect3" disabled>
+        <option value="bella">Bellatrix</option>
+        <option value="bella1">Is</option>
+        <option value="bella2" selected>Awesome</option>
+    </select>
+
+    <br>
+    <br>
+    <label for="mySelect4">Test Required</label>
+    <select name="select" id="mySelect4" required>
+        <option value="bella">Bellatrix</option>
+        <option value="bella1" disabled>Is</option>
+        <option value="bella2" selected>Awesome</option>
+    </select>
+
+    <script type="text/javascript" src="select.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/select/select.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/select/select.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/shadowdom/shadowdom.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/shadowdom/shadowdom.html
new file mode 100644
index 00000000..4ebfca0e
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/shadowdom/shadowdom.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <title>Shadow DOM Demo</title>
+</head>
+<body>
+    <div id="content">
+        <div id="header">
+            <h1>This is a Shadow DOM Testing Page.</h1>
+        </div>
+        <h2>The following shadow root is basic - it contains only one element and no nested shadow roots are present.</h2>
+        <div id="basicShadowHost"></div>
+        <h2>The next shadow root is more complex - it contains more elements and nested shadow roots.
+        </h2>
+        <div id="complexShadowHost"></div>
+    </div>
+    <script type="text/javascript" src="shadowdom.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/shadowdom/shadowdom.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/shadowdom/shadowdom.js
new file mode 100644
index 00000000..25cda168
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/shadowdom/shadowdom.js
@@ -0,0 +1,104 @@
+// BASIC SHADOW DOM EXAMPLE
+const basicShadowDOMHost = document.querySelector("#basicShadowHost");
+const basicShadowRoot = basicShadowDOMHost.attachShadow({ mode: "open" });
+
+// SELECT ELEMENT
+const selectLabel = document.createElement("label");
+selectLabel.setAttribute("for", "shadowSelect");
+selectLabel.innerText = "Select element inside the shadow root.";
+const select = document.createElement("select");
+select.setAttribute("name", "select");
+select.setAttribute("id", "shadowSelect");
+const option1 = document.createElement("option");
+option1.setAttribute("value", "bella1");
+option1.innerText = "Bellatrix";
+const option2 = document.createElement("option");
+option2.setAttribute("value", "bella2");
+option2.innerText = "Is";
+const option3 = document.createElement("option");
+option3.setAttribute("value", "bella3");
+option3.innerText = "Awesome";
+select.appendChild(option1);
+select.appendChild(option2);
+select.appendChild(option3);
+
+basicShadowRoot.appendChild(selectLabel);
+basicShadowRoot.appendChild(select);
+
+// COMPLEX SHADOW DOM EXAMPLE
+const complexShadowDOMHost = document.querySelector("#complexShadowHost");
+const complexShadowRoot = complexShadowDOMHost.attachShadow({ mode: "open" });
+
+// Function to create the table and append it to a shadow root
+function createTableAndAppendToShadowRoot(shadowRoot) {
+    // Create the table element
+    const table = document.createElement('table');
+    table.id = 'shadowTable';
+    table.className = 'tablesorter';
+
+    // Create the thead element
+    const thead = document.createElement('thead');
+    const theadRow = document.createElement('tr');
+    const headers = ['Last Name', 'First Name', 'Email', 'Due', 'Web Site', 'Action'];
+
+    headers.forEach(headerText => {
+        const th = document.createElement('th');
+        const span = document.createElement('span');
+        span.textContent = headerText;
+        th.appendChild(span);
+        theadRow.appendChild(th);
+    });
+
+    thead.appendChild(theadRow);
+    table.appendChild(thead);
+
+    // Create the tbody element
+    const tbody = document.createElement('tbody');
+    const rows = [
+        ['Smith', 'John', 'jsmith@gmail.com', '$50.00', 'http://www.jsmith.com'],
+        ['Bach', 'Frank', 'fbach@yahoo.com', '$51.00', 'http://www.frank.com'],
+        ['Doe', 'Jason', 'jdoe@hotmail.com', '$100.00', 'http://www.jdoe.com'],
+        ['Conway', 'Tim', 'tconway@earthlink.net', '$50.00', 'http://www.timconway.com']
+    ];
+
+    rows.forEach(rowData => {
+        const tr = document.createElement('tr');
+
+        rowData.forEach(cellData => {
+            const td = document.createElement('td');
+            td.textContent = cellData;
+            tr.appendChild(td);
+        });
+
+        const actionTd = document.createElement('td');
+        const shadowHost = document.createElement("div");
+        createActionAnchorsInsideShadowDOM(shadowHost);
+        actionTd.appendChild(shadowHost);
+
+        tr.appendChild(actionTd);
+
+        tbody.appendChild(tr);
+    });
+
+    table.appendChild(tbody);
+
+    shadowRoot.appendChild(table);
+}
+
+function createActionAnchorsInsideShadowDOM(element) {
+    const shadow = element.attachShadow({ mode: "open" });
+
+    const editLink = document.createElement('a');
+    editLink.href = '#edit';
+    editLink.textContent = 'edit';
+    shadow.appendChild(editLink);
+
+    const deleteLink = document.createElement('a');
+    deleteLink.href = '#delete';
+    deleteLink.textContent = 'delete';
+    shadow.appendChild(deleteLink);
+}
+
+createTableAndAppendToShadowRoot(complexShadowRoot);
+
+
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/span/span.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/span/span.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/span/span.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/span/span.html
new file mode 100644
index 00000000..18760f4d
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/span/span.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Week HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="span.css">
+</head>
+<body>
+    <label for="mySpan">Hover</label>
+    <span id="mySpan" onmouseover="this.style.color='red';">Bellatrix</span>
+
+    <br>
+    <br>
+    <label for="mySpan1">InnerText</label>
+    <span id="mySpan1" onmouseover="this.style.color='red';">Automate The Planet</span>
+
+    <br>
+    <br>
+    <label for="mySpan2">InnerHtml</label>
+    <span id="mySpan2" onmouseover="this.style.color='red';"><button name="button">Click me</button></span>
+
+    <br>
+    <br>
+    <label for="mySpan3">No Content</label>
+    <span id="mySpan3" onmouseover="this.style.color='red';"></span>
+
+    <script type="text/javascript" src="span.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/span/span.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/span/span.js
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/table/table.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/table/table.css
new file mode 100644
index 00000000..c80dfa11
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/table/table.css
@@ -0,0 +1,23 @@
+span {
+    padding-right: 20px;
+    background-repeat: no-repeat;
+    background-position: 100% 100%;
+}
+
+.tablesorter-headerAsc span {
+    background-image: url('img/down-arrow.png');
+}
+
+.tablesorter-headerDesc span {
+    background-image: url('img/up-arrow.png');
+}
+
+th span {
+    font-family: "Helvetica, Arial, sans-serif";
+    font-size: 14px;
+}
+
+td {
+    font-family: "Helvetica, Arial, sans-serif";
+    font-size: 14px;
+}
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/table/table.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/table/table.html
new file mode 100644
index 00000000..43e190a8
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/table/table.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Table HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="table.css">
+</head>
+<body>
+    <div class="example">
+        <h3>Data Tables</h3>
+        <p>Often times when you see a table it contains data which is sortable -- sometimes with actions that can be taken within each row (e.g. edit, delete). And it can be challenging to automate interaction with sets of data in a table depending on how it is constructed.</p>
+
+        <h4>Example 1</h4>
+        <p>No Class or ID attributes to signify groupings of rows and columns</p>
+        <table id="table1" class="tablesorter">
+            <thead>
+                <tr>
+                    <th><span>Last Name</span></th>
+                    <th><span>First Name</span></th>
+                    <th><span>Email</span></th>
+                    <th><span>Due</span></th>
+                    <th><span>Web Site</span></th>
+                    <th><span>Action</span></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Smith</td>
+                    <td>John</td>
+                    <td>jsmith@gmail.com</td>
+                    <td>$50.00</td>
+                    <td>http://www.jsmith.com</td>
+                    <td>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Bach</td>
+                    <td>Frank</td>
+                    <td>fbach@yahoo.com</td>
+                    <td>$51.00</td>
+                    <td>http://www.frank.com</td>
+                    <td>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Doe</td>
+                    <td>Jason</td>
+                    <td>jdoe@hotmail.com</td>
+                    <td>$100.00</td>
+                    <td>http://www.jdoe.com</td>
+                    <td>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Conway</td>
+                    <td>Tim</td>
+                    <td>tconway@earthlink.net</td>
+                    <td>$50.00</td>
+                    <td>http://www.timconway.com</td>
+                    <td>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <h4>Example 2</h4>
+        <p>Class and ID attributes to signify groupings of rows and columns</p>
+        <table id="table2" class="tablesorter">
+            <thead>
+                <tr>
+                    <th><span class='last-name'>Last Name</span></th>
+                    <th><span class='first-name'>First Name</span></th>
+                    <th><span class='email'>Email</span></th>
+                    <th><span class='dues'>Due</span></th>
+                    <th><span class='web-site'>Web Site</span></th>
+                    <th><span class='action'>Action</span></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class='last-name'>Smith</td>
+                    <td class='first-name'>John</td>
+                    <td class='email'>jsmith@gmail.com</td>
+                    <td class='dues'>$50.00</td>
+                    <td class='web-site'>http://www.jsmith.com</td>
+                    <td class='action'>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td class='last-name'>Bach</td>
+                    <td class='first-name'>Frank</td>
+                    <td class='email'>fbach@yahoo.com</td>
+                    <td class='dues'>$51.00</td>
+                    <td class='web-site'>http://www.frank.com</td>
+                    <td class='action'>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td class='last-name'>Doe</td>
+                    <td class='first-name'>Jason</td>
+                    <td class='email'>jdoe@hotmail.com</td>
+                    <td class='dues'>$100.00</td>
+                    <td class='web-site'>http://www.jdoe.com</td>
+                    <td class='action'>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td class='last-name'>Conway</td>
+                    <td class='first-name'>Tim</td>
+                    <td class='email'>tconway@earthlink.net</td>
+                    <td class='dues'>$50.00</td>
+                    <td class='web-site'>http://www.timconway.com</td>
+                    <td class='action'>
+                        <a href='#edit'>edit</a>
+                        <a href='#delete'>delete</a>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="example">
+        <h3>Basic Tables</h3>
+        <p>Some tables dont have the HTML elements thead, tbody or tfoot. While designing locators this should be taken into consideration.</p>
+
+        <h4>Example 1</h4>
+        <p>Simple table with *tr* and *td* elements only</p>
+        <table id="simpleTable">
+            <tr>
+                <td>Smith</td>
+                <td>John</td>
+                <td>$50.00</td>
+                <td>http://www.jsmith.com</td>
+            </tr>
+            <tr>
+                <td>Bach</td>
+                <td>Frank</td>
+                <td>$51.00</td>
+                <td>http://www.frank.com</td>
+            </tr>
+            <tr>
+                <td>Doe</td>
+                <td>Jason</td>
+                <td>$100.00</td>
+                <td>http://www.jdoe.com</td>
+            </tr>
+            <tr>
+                <td>Conway</td>
+                <td>Tim</td>
+                <td>$50.00</td>
+                <td>http://www.timconway.com</td>
+            </tr>
+        </table>
+    </div>
+    <div class="example">
+        <h3>Nested Tables</h3>
+        <p>Some tables have nested tables in one or more of the table cells. This causes difficulties when trying to iterate over the table cells of a row, since only the direct children of the row have to be located.</p>
+
+        <h4>Example 1</h4>
+        <p>Single Inline table in table cell</p>
+        <table id="nestedTable">
+            <thead>
+                <tr>
+                    <th><span>Last Name</span></th>
+                    <th><span>First Name</span></th>
+                    <th><span>Email</span></th>
+                    <th><span>Due</span></th>
+                    <th><span>Web Site</span></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Smith</td>
+                    <td>John</td>
+                    <td>
+                        <table>
+                            <tr><td><b>Business</b></td><td>jsmith@corp.com</td></tr>
+                            <tr><td><b>Personal</b></td><td>jsmith@gmail.com</td></tr>
+                        </table>
+                    </td>
+                    <td>$50.00</td>
+                    <td>http://www.jsmith.com</td>
+                </tr>
+                <tr>
+                    <td>Bach</td>
+                    <td>Frank</td>
+                    <td>
+                        <table>
+                            <tr><td><b>Business</b></td><td>fbach@someway.com</td></tr>
+                            <tr><td><b>Personal</b></td><td>fbach@yahoo.com</td></tr>
+                        </table>
+                    </td>
+                    <td>$51.00</td>
+                    <td>http://www.frank.com</td>
+                </tr>
+                <tr>
+                    <td>Doe</td>
+                    <td>Jason</td>
+                    <td>
+                        <table>
+                            <tr><td><b>Business</b></td><td></td></tr>
+                            <tr><td><b>Personal</b></td><td>jdoe@hotmail.com</td></tr>
+                        </table>
+                    </td>
+                    <td>$100.00</td>
+                    <td>http://www.jdoe.com</td>
+                </tr>
+                <tr>
+                    <td>Conway</td>
+                    <td>Tim</td>
+                    <td>
+                        <table>
+                            <tr><td><b>Business</b></td><td>tconway@earthlink.net</td></tr>
+                            <tr><td><b>Personal</b></td><td></td></tr>
+                        </table>
+                    </td>
+                    <td>$50.00</td>
+                    <td>http://www.timconway.com</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <script type="text/javascript" src="table.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/table/table.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/table/table.js
new file mode 100644
index 00000000..e194759d
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/table/table.js
@@ -0,0 +1,4 @@
+$(function () {
+    $("#table1").tablesorter();
+    $("#table2").tablesorter();
+});
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/text/text.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/text/text.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/text/text.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/text/text.html
new file mode 100644
index 00000000..eab377fe
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/text/text.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="text.css">
+</head>
+<body>
+    <label for="myText">Placeholders</label>
+    <input id="myText" name="myText" type="Text" placeholder="your Text term goes here" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myText1">Physical input element size</label>
+    <input id="myText1" name="myText" type="Text" size="30">
+
+    <br>
+    <br>
+    <label for="myText2">Element value length</label>
+    <input id="myText2" name="myText" type="Text" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myText4">Autocomplete= ON</label>
+    <input id="myText4" name="myText" type="Text" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myText5">Autocomplete= OFF</label>
+    <input id="myText5" name="myText" type="Text" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myText6">Readonly Set</label>
+    <input id="myText6" name="myText" type="Text" readonly>
+
+    <br>
+    <br>
+    <label for="myText7">Required Set</label>
+    <input id="myText7" name="myText" type="Text" required>
+
+    <br>
+    <br>
+    <label for="myText8">Test Hover</label>
+    <input id="myText8" name="myText" type="Text" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myText9">Test Focus</label>
+    <input id="myText9" name="myText" type="Text" onfocus="this.style.color='blue';">
+
+    <div id="myText10Wrapper">
+        <br>
+        <br>
+        <label for="myText10">Test Disabled</label>
+        <input id="myText10" name="myText" type="Text" disabled>
+    </div>
+
+
+    <script type="text/javascript" src="text.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/text/text.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/text/text.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/text/text.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/textarea/textArea.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/textarea/textArea.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/textarea/textArea.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/textarea/textArea.html
new file mode 100644
index 00000000..b49f138a
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/textarea/textArea.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="textArea.css">
+</head>
+<body>
+    <label for="myTextArea">Placeholders</label>
+<textarea id="myTextArea" name="myTextArea" placeholder="your Text term goes here" class="myTestClass"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea1">Physical input element size</label>
+<textarea id="myTextArea1" name="myTextArea" size="30"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea2">Element value length</label>
+<textarea id="myTextArea2" name="myTextArea" size="30" minlength="10" maxlength="80"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea3">Providing default options</label>
+<textarea id="myTextArea3" name="myTextArea">aangelov@bellatrix.solutions</textarea>
+    <br>
+    <br>
+    <label for="myTextArea4">Autocomplete= ON</label>
+<textarea id="myTextArea4" name="myTextArea" autocomplete="on"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea5">Autocomplete= OFF</label>
+<textarea id="myTextArea5" name="myTextArea" autocomplete="off"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea6">Readonly Set</label>
+<textarea id="myTextArea6" name="myTextArea" readonly></textarea>
+    <br>
+    <br>
+    <label for="myTextArea7">Required Set</label>
+<textarea id="myTextArea7" name="myTextArea" required></textarea>
+    <br>
+    <br>
+    <label for="myTextArea8">Test Hover</label>
+<textarea id="myTextArea8" name="myTextArea" onmouseover="this.style.color='red';"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea9">Test Focus</label>
+<textarea id="myTextArea9" name="myTextArea" onfocus="this.style.color='blue';"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea10">Test Disabled</label>
+<textarea id="myTextArea10" name="myTextArea" disabled></textarea>
+    <br>
+    <br>
+    <label for="myTextArea11">Rows and Cols Set</label>
+<textarea id="myTextArea11" name="myTextArea" rows="5" cols="50"></textarea>
+    <br>
+    <br>
+    <label for="myTextArea12">SpellCheck</label>
+<textarea id="myTextArea12" name="myTextArea" spellcheck></textarea>
+    <br>
+    <br>
+    <label for="myTextArea13">Wrap</label>
+<textarea id="myTextArea13" name="myTextArea" wrap="hard"></textarea>
+
+    <script type="text/javascript" src="textArea.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/textarea/textArea.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/textarea/textArea.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/textarea/textArea.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/time/time.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/time/time.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/time/time.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/time/time.html
new file mode 100644
index 00000000..9fc61467
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/time/time.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="time.css">
+</head>
+<body>
+    <label for="myTime">Default</label>
+    <input id="myTime" name="myTime" type="time" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myTime1">Test Max Min Step</label>
+    <input id="myTime1" name="myTime1" type="time" step="10" min="00:01" max="11:11">
+
+    <br>
+    <br>
+    <label for="myTime2">Default Value</label>
+    <input id="myTime2" name="myTime2" type="time" step="10" min="00:01" max="11:11" value="12:11">
+
+    <br>
+    <br>
+    <label for="myTime3">Autocomplete= ON</label>
+    <input id="myTime3" name="myTime3" type="time" step="10" min="00:01" max="11:11" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myTime4">Autocomplete= OFF</label>
+    <input id="myTime4" name="myTime4" type="time" step="10" min="00:01" max="11:11" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myTime5">Readonly Set</label>
+    <input id="myTime5" name="myTime5" type="time" step="10" min="00:01" max="11:11" readonly>
+
+    <br>
+    <br>
+    <label for="myTime6">Required Set</label>
+    <input id="myTime6" name="myTime6" type="time" step="10" min="00:01" max="11:11" required>
+
+    <br>
+    <br>
+    <label for="myTime7">Test Hover</label>
+    <input id="myTime7" name="myTime7" type="time" step="10" min="00:01" max="11:11" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myTime8">Test Focus</label>
+    <input id="myTime8" name="myTime8" type="time" step="10" min="00:01" max="11:11" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myTime9">Disabled Set</label>
+    <input id="myTime9" name="myTime9" type="time" step="10" min="00:01" max="11:11" disabled>
+
+    <script type="text/javascript" src="time.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/time/time.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/time/time.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/time/time.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/url/url.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/url/url.css
new file mode 100644
index 00000000..e69de29b
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/url/url.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/url/url.html
new file mode 100644
index 00000000..83b17d86
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/url/url.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="url.css">
+</head>
+<body>
+    <label for="myURL">Placeholders</label>
+    <input id="myURL" name="myURL" type="url" placeholder="http://www.example.com" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myURL1">Physical input element size</label>
+    <input id="myURL1" name="myURL" type="url" size="30">
+
+    <br>
+    <br>
+    <label for="myURL2">Element value length</label>
+    <input id="myURL2" name="myURL" type="url" size="30" minlength="10" maxlength="80">
+
+    <br>
+    <br>
+    <label for="myURL3">Providing default options</label>
+    <input id="myURL3" name="myURL" type="url" value="http://www.example.com">
+
+    <br>
+    <br>
+    <label for="myURL4">Autocomplete= ON</label>
+    <input id="myURL4" name="myURL" type="url" value="http://www.example.com" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myURL5">Autocomplete= OFF</label>
+    <input id="myURL5" name="myURL" type="url" value="http://www.example.com" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myURL6">Readonly Set</label>
+    <input id="myURL6" name="myURL" type="url" value="http://www.example.com" readonly>
+
+    <br>
+    <br>
+    <label for="myURL7">Required Set</label>
+    <input id="myURL7" name="myURL" type="url" value="http://www.example.com" required>
+
+    <br>
+    <br>
+    <label for="myURL8">Test Hover</label>
+    <input id="myURL8" name="myURL" type="url" value="http://www.example.com" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myURL9">Test Focus</label>
+    <input id="myURL9" name="myURL" type="url" value="http://www.example.com" onfocus="this.style.color='blue';">
+
+    <div id="myURL10Wrapper">
+        <br>
+        <br>
+        <label for="myURL10">Test Disabled</label>
+        <input id="myURL10" name="myURL" type="url" value="http://www.example.com" disabled>
+    </div>
+
+    <br>
+    <br>
+    <label for="myURL11">Test Hidden</label>
+    <input id="myURL11" name="myURL" type="url" value="http://www.example.com" hidden>
+
+    <br>
+    <br>
+    <label for="myURL13">Test Title</label>
+    <input id="myURL13" name="myURL" type="url" value="bellatrix.com" title="bellatrix.solutions">
+
+    <br>
+    <br>
+    <label for="myURL14">Test TabIndex</label>
+    <input id="myURL14" name="myURL" type="url" value="bellatrix.solutions" tabindex="1">
+
+    <br>
+    <br>
+    <label for="myURL15">Test AccessKey</label>
+    <input id="myURL15" name="myURL" type="url" value="bellatrix.solutions" accesskey="a">
+
+    <br>
+    <br>
+    <label for="myURL16">Test Style</label>
+    <input id="myURL16" name="myURL" type="url" value="bellatrix.solutions" style="color: green;">
+
+    <br>
+    <br>
+    <label for="myURL17">Test Translate Yes</label>
+    <input id="myURL17" name="myURL" type="url" value="bellatrix.solutions" translate="yes">
+
+    <br>
+    <br>
+    <label for="myURL18">Test Translate No</label>
+    <input id="myURL18" name="myURL" type="url" value="bellatrix.solutions" translate="no">
+
+    <br>
+    <br>
+    <label for="myURL19">Test Dir</label>
+    <input id="myURL19" name="myURL" type="url" value="bellatrix.solutions" dir="rtl">
+
+    <br>
+    <br>
+    <label for="myURL20">Test Lang</label>
+    <input id="myURL20" name="myURL" type="url" value="bellatrix.solutions" lang="en">
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <label for="myURL12">Test ScrollToVisible</label>
+    <input id="myURL12" name="myURL" type="url" value="http://www.example.com" disabled>
+
+
+    <script type="text/javascript" src="url.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/url/url.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/url/url.js
new file mode 100644
index 00000000..d6a85479
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/url/url.js
@@ -0,0 +1,14 @@
+window.onscroll = function (ev) {
+    var docHeight = document.body.offsetHeight;
+    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+    var winheight = window.innerHeight;
+    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
+
+    var scrollpoint = window.scrollY;
+    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
+
+    if ((scrollpoint + winheight) >= docHeight) {
+        document.getElementById("myURL12").style.color = "red";
+    }
+};
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/week/week.css b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/week/week.css
new file mode 100644
index 00000000..5f282702
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/week/week.css
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/week/week.html b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/week/week.html
new file mode 100644
index 00000000..364c8c33
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/week/week.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Url HTML Control Demo</title>
+    <link rel="stylesheet" type="text/css" href="time.css">
+</head>
+<body>
+    <label for="myWeek">Default</label>
+    <input id="myWeek" name="myWeek" type="week" class="myTestClass">
+
+    <br>
+    <br>
+    <label for="myWeek1">Test Max Min Step</label>
+    <input id="myWeek1" name="myWeek1" type="week" step="10" min="2017-W01" max="2017-W52">
+
+    <br>
+    <br>
+    <label for="myWeek2">Default Value</label>
+    <input id="myWeek2" name="myWeek2" type="week" step="10" min="2017-W01" max="2017-W52" value="2017-W07">
+
+    <br>
+    <br>
+    <label for="myWeek3">Autocomplete= ON</label>
+    <input id="myWeek3" name="myWeek3" type="week" step="10" min="2017-W01" max="2017-W52" autocomplete="on">
+
+    <br>
+    <br>
+    <label for="myWeek4">Autocomplete= OFF</label>
+    <input id="myWeek4" name="myWeek4" type="week" step="10" min="2017-W01" max="2017-W52" autocomplete="off">
+
+    <br>
+    <br>
+    <label for="myWeek5">Readonly Set</label>
+    <input id="myWeek5" name="myWeek5" type="week" step="10" min="2017-W01" max="2017-W52" readonly>
+
+    <br>
+    <br>
+    <label for="myWeek6">Required Set</label>
+    <input id="myWeek6" name="myWeek6" type="week" step="10" min="2017-W01" max="2017-W52" required>
+
+    <br>
+    <br>
+    <label for="myWeek7">Test Hover</label>
+    <input id="myWeek7" name="myWeek7" type="week" step="10" min="2017-W01" max="2017-W52" onmouseover="this.style.color='red';">
+
+    <br>
+    <br>
+    <label for="myWeek8">Test Focus</label>
+    <input id="myWeek8" name="myWeek8" type="week" step="10" min="2017-W01" max="2017-W52" onfocus="this.style.color='blue';">
+
+    <br>
+    <br>
+    <label for="myWeek9">Disabled Set</label>
+    <input id="myWeek9" name="myWeek9" type="week" step="10" min="2017-W01" max="2017-W52" disabled>
+
+    <script type="text/javascript" src="time.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/main/resources/testpages/week/week.js b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/week/week.js
new file mode 100644
index 00000000..5f282702
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/main/resources/testpages/week/week.js
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/framework-tests/bellatrix.web.tests/src/test/java/controls/grid/GridControlTests.java b/framework-tests/bellatrix.web.tests/src/test/java/controls/grid/GridControlTests.java
new file mode 100644
index 00000000..91a4e2a1
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/test/java/controls/grid/GridControlTests.java
@@ -0,0 +1,215 @@
+package controls.grid;
+
+import common.configuration.TestPagesSettings;
+import controls.grid.data.Employee;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import solutions.bellatrix.core.configuration.ConfigurationService;
+import solutions.bellatrix.web.components.Button;
+import solutions.bellatrix.web.components.TextInput;
+import solutions.bellatrix.web.components.advanced.grid.Grid;
+import solutions.bellatrix.web.components.advanced.grid.GridRow;
+import solutions.bellatrix.web.components.advanced.table.TableCell;
+import solutions.bellatrix.web.findstrategies.TagFindStrategy;
+import solutions.bellatrix.web.findstrategies.XPathFindStrategy;
+import solutions.bellatrix.web.infrastructure.Browser;
+import solutions.bellatrix.web.infrastructure.ExecutionBrowser;
+import solutions.bellatrix.web.infrastructure.Lifecycle;
+import solutions.bellatrix.web.infrastructure.junit.WebTest;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@ExecutionBrowser(browser = Browser.CHROME, lifecycle = Lifecycle.REUSE_IF_STARTED)
+public class GridControlTests extends WebTest {
+    private Grid testGrid;
+    private List<Employee> expectedItems;
+
+    @BeforeEach
+    public void testInit() {
+        app().navigate().toLocalPage(ConfigurationService.get(TestPagesSettings.class).getGridLocalPage());
+        testGrid = app().create().byId(Grid.class, "sampleGrid")
+                .setColumn("Order", TextInput.class, new TagFindStrategy("input"))
+                .setColumn("Firstname")
+                .setColumn("Lastname")
+                .setColumn("Email Personal")
+                .setColumn("Email Business")
+                .setColumn("Actions", Button.class, new XPathFindStrategy("./input[@type='button']"));
+
+        expectedItems = new ArrayList<>();
+        expectedItems.add(new Employee("0", "John", "Doe", "jdoe@corp.com", "john.doe@gmail.com"));
+        expectedItems.add(new Employee("1", "Mary", "Moe", "", "mary@hotmail.com"));
+        expectedItems.add(new Employee("2", "July", "Dooley", "jily@mscorp.com", ""));
+
+    }
+
+    @Test
+    public void returnProperCell_When_GetCell_WithIntForColumn() {
+        var cell = testGrid.getCell(0, 1);
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(1, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetCell_WithStringForColumn() {
+        var cell = testGrid.getCell("Firstname", 1);
+
+        Assertions.assertEquals(1, cell.getRow());
+        Assertions.assertEquals(1, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetCell_WithExpressionGorColumn() {
+        var cell = testGrid.getCell(Employee.class, Employee::getPersonalEmail, 1);
+
+        Assertions.assertEquals(1, cell.getRow());
+        Assertions.assertEquals(3, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetCell_WithSplitColumn() {
+        var cell = testGrid.getCell("Email Business", 0);
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(4, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetRow_Then_GetCell_WithStringColumn() {
+        var cell = testGrid.getRow(0).getCell("Firstname");
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(1, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetRow_Then_GetCell_WithIntColumn() {
+        var cell = testGrid.getRow(0).getCell(1);
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(1, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetRow_Then_GetCell_WithSplitColumn() {
+        var cell = testGrid.getRow(0).getCell("Email Business");
+
+        Assertions.assertEquals(0, cell.getRow());
+        Assertions.assertEquals(4, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperCell_When_GetRow_Then_GetCell_WithExpressionForColumn() {
+        var cell = testGrid.getRow(1).getCell(Employee.class, Employee::getPersonalEmail);
+
+        Assertions.assertEquals(1, cell.getRow());
+        Assertions.assertEquals(3, cell.getColumn());
+    }
+
+    @Test
+    public void returnProperObject_When_GetCell_As() {
+        TextInput cell = testGrid.getCell(0, 0).as(TextInput.class);
+
+        cell.setText("test");
+
+        Assertions.assertEquals("test", cell.getValue());
+    }
+
+    @Test
+    public void returnProperCells_When_GetCells_WithExpressionForColumn() {
+        var matchingCells = testGrid.getCells(TableCell.class, tableCell -> tableCell.getText().startsWith("J"));
+
+        Assertions.assertEquals(2, matchingCells.size());
+    }
+
+    @Test
+    public void returnProperCell_When_GetFirstOrDefaultCell() {
+        var cell = testGrid.getFirstOrDefaultCell(TableCell.class, tableCell -> tableCell.getText().startsWith("J"));
+
+        Assertions.assertEquals("John", cell.getText());
+    }
+
+    @Test
+    public void returnProperCell_When_GetLastOrDefaultCell() {
+        var cell = testGrid.getLastOrDefaultCell(TableCell.class, tableCell -> tableCell.getText().startsWith("J"));
+
+        Assertions.assertEquals("July", cell.getText());
+    }
+
+    @Test
+    public void assertRow() {
+        testGrid.getRow(0).assertRow(expectedItems.get(0));
+    }
+
+    @Test
+    public void returnRow_When_GetRowByIndex() {
+        var row = testGrid.getRow(0);
+
+        Assertions.assertEquals(0, row.getIndex());
+    }
+
+    @Test
+    public void returnRows_When_GetRows() {
+        var rows = testGrid.getRows();
+
+        Assertions.assertEquals(3, rows.size());
+    }
+
+    @Test
+    public void verifyRowElement_When_ForEachRow() {
+        testGrid.forEachRow(row -> row.createByXPath(Button.class, ".//input[@type='button']").validateIsVisible());
+    }
+
+    @Test
+    public void returnRow_When_GetRowByExpression() {
+        var row = testGrid.getFirstOrDefaultRow(GridRow.class, r -> r.getHtml().contains("July"));
+
+        Assertions.assertEquals(2, row.getIndex());
+    }
+
+    @Test
+    public void returnColumnIndex_When_GetByName() {
+        var index = testGrid.getGridColumnIndexByName("Firstname");
+
+        Assertions.assertEquals(1, index);
+    }
+
+    @Test
+    public void returnColumnName_When_GetByIndex() {
+        var name = testGrid.getGridColumnNameByIndex(1);
+
+        Assertions.assertEquals("Firstname", name);
+    }
+
+    @Test
+    public void returnProperNames_When_GetHeaderNames() {
+        var expectedHeaderNames = new ArrayList<String>();
+        expectedHeaderNames.add("Order");
+        expectedHeaderNames.add("Firstname");
+        expectedHeaderNames.add("Lastname");
+        expectedHeaderNames.add("Email Personal");
+        expectedHeaderNames.add("Email Business");
+        expectedHeaderNames.add("Actions");
+
+        var headerNames = testGrid.getHeaderNames();
+
+        Assertions.assertArrayEquals(expectedHeaderNames.toArray(String[]::new), headerNames.toArray(String[]::new));
+    }
+
+    @Test
+    public void returnColumnCells_When_GetColumnByIndex() {
+        var column = testGrid.getColumn(0);
+
+        Assertions.assertEquals(3, column.size());
+        Assertions.assertTrue(column.stream().anyMatch(c -> c.getColumn() == 0));
+    }
+
+    @Test
+    public void returnProperColumn_When_GetColumnByIndex() {
+        var column = testGrid.getColumn(0);
+
+        Assertions.assertTrue(column.stream().anyMatch(c -> c.getColumn() == 0));
+    }
+}
diff --git a/framework-tests/bellatrix.web.tests/src/test/java/controls/grid/data/Employee.java b/framework-tests/bellatrix.web.tests/src/test/java/controls/grid/data/Employee.java
new file mode 100644
index 00000000..46e12d3c
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/test/java/controls/grid/data/Employee.java
@@ -0,0 +1,21 @@
+package controls.grid.data;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import solutions.bellatrix.web.components.advanced.TableHeader;
+
+@Getter @Setter @AllArgsConstructor @NoArgsConstructor
+public class Employee {
+    @TableHeader(name = "Order")
+    public String order;
+    @TableHeader(name = "Firstname")
+    public String firstName;
+    @TableHeader(name = "Lastname")
+    public String lastName;
+    @TableHeader(name = "Email Business")
+    public String businessEmail;
+    @TableHeader(name = "Email Personal")
+    public String personalEmail;
+}
diff --git a/framework-tests/bellatrix.web.tests/src/test/java/controls/grid/data/User.java b/framework-tests/bellatrix.web.tests/src/test/java/controls/grid/data/User.java
new file mode 100644
index 00000000..f5aadbdc
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/test/java/controls/grid/data/User.java
@@ -0,0 +1,19 @@
+package controls.grid.data;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import solutions.bellatrix.web.components.advanced.TableHeader;
+
+@Getter @Setter @AllArgsConstructor @NoArgsConstructor
+public class User {
+    @TableHeader(name = "Last Name")
+    public String lastName;
+    @TableHeader(name = "First Name")
+    public String firstName;
+    @TableHeader(name = "Due")
+    public String due;
+    @TableHeader(name = "Web Site")
+    public String website;
+}
diff --git a/framework-tests/bellatrix.web.tests/src/test/java/controls/shadowdom/ShadowDomTests.java b/framework-tests/bellatrix.web.tests/src/test/java/controls/shadowdom/ShadowDomTests.java
new file mode 100644
index 00000000..e4df5642
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/test/java/controls/shadowdom/ShadowDomTests.java
@@ -0,0 +1,111 @@
+package controls.shadowdom;
+
+import common.configuration.TestPagesSettings;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import solutions.bellatrix.core.configuration.ConfigurationService;
+import solutions.bellatrix.web.components.Anchor;
+import solutions.bellatrix.web.components.Div;
+import solutions.bellatrix.web.components.Select;
+import solutions.bellatrix.web.components.advanced.grid.Grid;
+import solutions.bellatrix.web.components.advanced.grid.GridCell;
+import solutions.bellatrix.web.components.shadowdom.ShadowRoot;
+import solutions.bellatrix.web.infrastructure.Browser;
+import solutions.bellatrix.web.infrastructure.ExecutionBrowser;
+import solutions.bellatrix.web.infrastructure.Lifecycle;
+import solutions.bellatrix.web.infrastructure.junit.WebTest;
+
+@ExecutionBrowser(browser = Browser.CHROME, lifecycle = Lifecycle.REUSE_IF_STARTED)
+public class ShadowDomTests extends WebTest {
+    @BeforeEach
+    public void init() {
+        var url = ConfigurationService.get(TestPagesSettings.class).getShadowDomPage();
+        app().navigate().toLocalPage(url);
+    }
+
+    @Test
+    public void creatingShadowRoot() {
+        var shadowRoot = app().create().byId(ShadowRoot.class, "basicShadowHost");
+        Assertions.assertTrue(shadowRoot.getHtml() != null && !shadowRoot.getHtml().isBlank());
+    }
+
+    @Test
+    public void creatingComponentFromWhichShadowRootIsCreated() {
+        var shadowHost = app().create().byId(Div.class, "basicShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+        Assertions.assertTrue(shadowRoot.getHtml() != null && !shadowRoot.getHtml().isBlank());
+    }
+
+    @Test
+    public void findingElementWithCss_basic() {
+        var shadowHost = app().create().byId(Div.class, "basicShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var select = shadowRoot.createByCss(Select.class, "[name='select']");
+
+        select.selectByText("Is");
+        Assertions.assertEquals("Is", select.getSelected().getText());
+    }
+
+    @Test
+    public void findingElementWithXpath_basic() {
+        var shadowHost = app().create().byId(Div.class, "basicShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var select = shadowRoot.createByXPath(Select.class, "//select[@name='select']");
+
+        select.selectByText("Is");
+        Assertions.assertEquals("Is", select.getSelected().getText());
+    }
+
+    @Test
+    public void directlyFindingElementInNestedShadowRoot_withXpath() {
+        var shadowHost = app().create().byId(Div.class, "complexShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var firstEditAnchor = shadowRoot.createByXPath(Anchor.class, "//a[@href='#edit']");
+        Assertions.assertEquals("edit", firstEditAnchor.getText());
+    }
+
+    @Test
+    public void directlyFindingElementInNestedShadowRoot_withCss() {
+        var shadowHost = app().create().byId(Div.class, "complexShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var firstEditAnchor = shadowRoot.createByCss(Anchor.class, "a[href='#edit']");
+        Assertions.assertEquals("edit", firstEditAnchor.getText());
+    }
+
+    @Test
+    public void findingElementByAnotherElementInNestedShadowRoot_withXpath() {
+        var shadowHost = app().create().byId(Div.class, "complexShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var table = shadowRoot.createByXPath(Grid.class, ".//table[@id='shadowTable']")
+                .setModelColumns(TableData.class)
+                .setColumn("Action");
+
+        var row = table.getFirstOrDefaultRow(GridCell.class, cell -> cell.getText().equals("jsmith@gmail.com"));
+
+        var edit = table.getColumn("Action").get(row.getIndex()).createByXPath(Anchor.class, ".//a[@href='#edit']");
+        Assertions.assertEquals("edit", edit.getText());
+    }
+
+    @Test
+    public void findingElementByAnotherElementInNestedShadowRoot_withCss() {
+        var shadowHost = app().create().byId(Div.class, "complexShadowHost");
+        var shadowRoot = shadowHost.getShadowRoot();
+
+        var table = shadowRoot.createById(Grid.class, "shadowTable")
+                .setModelColumns(TableData.class)
+                .setColumn("Action");
+
+        var row = table.getFirstOrDefaultRow(GridCell.class, cell -> cell.getText().equals("jsmith@gmail.com"));
+
+        var edit = table.getColumn("Action").get(row.getIndex()).createByCss(Anchor.class, "[href='#edit']");
+        Assertions.assertEquals("edit", edit.getText());
+    }
+
+    // TODO: Test Relative Finding of Elements
+}
diff --git a/framework-tests/bellatrix.web.tests/src/test/java/controls/shadowdom/TableData.java b/framework-tests/bellatrix.web.tests/src/test/java/controls/shadowdom/TableData.java
new file mode 100644
index 00000000..8bf1ff4b
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/test/java/controls/shadowdom/TableData.java
@@ -0,0 +1,19 @@
+package controls.shadowdom;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.web.components.advanced.TableHeader;
+
+@Getter @Setter
+public class TableData {
+    @TableHeader(name = "Last Name")
+    public String lastName;
+    @TableHeader(name = "First Name")
+    public String firstName;
+    @TableHeader(name = "Email")
+    public String email;
+    @TableHeader(name = "Due")
+    public String due;
+    @TableHeader(name = "Web Site")
+    public String website;
+}
diff --git a/framework-tests/bellatrix.web.tests/src/test/java/controls/table/DataTableExampleOne.java b/framework-tests/bellatrix.web.tests/src/test/java/controls/table/DataTableExampleOne.java
new file mode 100644
index 00000000..500548bc
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/test/java/controls/table/DataTableExampleOne.java
@@ -0,0 +1,19 @@
+package controls.table;
+
+import lombok.Getter;
+import lombok.Setter;
+import solutions.bellatrix.web.components.advanced.TableHeader;
+
+@Getter @Setter
+public class DataTableExampleOne {
+    @TableHeader(name = "Last Name")
+    public String lastName;
+    @TableHeader(name = "First Name")
+    public String firstName;
+    @TableHeader(name = "Email")
+    public String email;
+    @TableHeader(name = "Due")
+    public String due;
+    @TableHeader(name = "Web Site")
+    public String website;
+}
diff --git a/framework-tests/bellatrix.web.tests/src/test/java/controls/table/TableControlTests.java b/framework-tests/bellatrix.web.tests/src/test/java/controls/table/TableControlTests.java
new file mode 100644
index 00000000..c4763cc7
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/test/java/controls/table/TableControlTests.java
@@ -0,0 +1,87 @@
+package controls.table;
+
+import common.configuration.TestPagesSettings;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import solutions.bellatrix.core.configuration.ConfigurationService;
+import solutions.bellatrix.web.components.advanced.table.Table;
+import solutions.bellatrix.web.infrastructure.Browser;
+import solutions.bellatrix.web.infrastructure.ExecutionBrowser;
+import solutions.bellatrix.web.infrastructure.Lifecycle;
+import solutions.bellatrix.web.infrastructure.junit.WebTest;
+
+@ExecutionBrowser(browser = Browser.CHROME, lifecycle = Lifecycle.REUSE_IF_STARTED)
+public class TableControlTests extends WebTest {
+    @BeforeEach
+    public void testInit() {
+        var url = ConfigurationService.get(TestPagesSettings.class).getTableLocalPage();
+        app().navigate().toLocalPage(url);
+    }
+
+    @Test
+    public void tableGetItems() {
+        var table = app().create().byId(Table.class, "table1");
+        table.setColumn("Last Name").setColumn("First Name").setColumn("Email").setColumn("Due").setColumn("Web Site").setColumn("Action");
+
+        var dataTableExampleOnes = table.getItems(DataTableExampleOne.class);
+
+        Assertions.assertEquals("Smith", dataTableExampleOnes.get(0).lastName);
+        Assertions.assertEquals("John", dataTableExampleOnes.get(0).firstName);
+        Assertions.assertEquals("http://www.timconway.com", dataTableExampleOnes.get(dataTableExampleOnes.size() - 1).website);
+    }
+
+    @Test
+    public void basicTableHasHeader() {
+        var table = app().create().byId(Table.class, "table1");
+
+        var headerNames = table.getHeaderNames();
+        var tableCell = table.getCell(3, 1);
+
+        Assertions.assertTrue(headerNames.contains("Due"));
+        Assertions.assertEquals("$51.00", tableCell.getText());
+    }
+
+    @Test
+    public void tableWithHeaderReturnsValue() {
+        var table = app().create().byId(Table.class, "table1");
+        table.setColumn("Last Name").setColumn("First Name").setColumn("Email").setColumn("Due").setColumn("Web Site").setColumn("Action");
+
+        var tableCell = table.getCell("Email", 1);
+
+        Assertions.assertEquals("fbach@yahoo.com", tableCell.getText());
+    }
+
+    @Test
+    public void simpleTableReturnsAllRowsAndCells() {
+        var table = app().create().byId(Table.class, "simpleTable");
+        var firstRowCellsCount = table.getRow(0).getCells().size();
+        var secondRowCellsCount = table.getRow(1).getCells().size();
+
+        Assertions.assertEquals(firstRowCellsCount, secondRowCellsCount);
+        Assertions.assertEquals(4, firstRowCellsCount);
+    }
+
+    @Test
+    public void nestedTablesReturnsTableCellsCountEqualToTableHeadersCount() {
+        var table = app().create().byId(Table.class, "nestedTable");
+        table.setColumn("Last Name").setColumn("First Name").setColumn("Email").setColumn("Due").setColumn("Web Site");
+
+        var tableHeadersCount = table.getHeaderNames().size();
+        var tableCellsCount = table.getRow(0).getCells().size();
+
+        Assertions.assertEquals(tableHeadersCount, tableCellsCount);
+    }
+
+    @Test
+    public void nestedTablesReturnsTableCellsCountEqualBetweenRows() {
+        var table = app().create().byId(Table.class, "nestedTable");
+        table.setColumn("Last Name").setColumn("First Name").setColumn("Email").setColumn("Due").setColumn("Web Site");
+
+        var firstRowCellsCount = table.getRow(0).getCells().size();
+        var secondRowCellsCount = table.getRow(1).getCells().size();
+
+        Assertions.assertEquals(firstRowCellsCount, secondRowCellsCount);
+
+    }
+}
diff --git a/bellatrix.web.tests/src/test/java/junit/ProductPurchaseTests.java b/framework-tests/bellatrix.web.tests/src/test/java/junit/ProductPurchaseTests.java
similarity index 100%
rename from bellatrix.web.tests/src/test/java/junit/ProductPurchaseTests.java
rename to framework-tests/bellatrix.web.tests/src/test/java/junit/ProductPurchaseTests.java
diff --git a/bellatrix.web.tests/src/test/java/testng/ProductPurchaseTests.java b/framework-tests/bellatrix.web.tests/src/test/java/testng/ProductPurchaseTests.java
similarity index 100%
rename from bellatrix.web.tests/src/test/java/testng/ProductPurchaseTests.java
rename to framework-tests/bellatrix.web.tests/src/test/java/testng/ProductPurchaseTests.java
diff --git a/framework-tests/bellatrix.web.tests/src/test/resources/junit-platform.properties b/framework-tests/bellatrix.web.tests/src/test/resources/junit-platform.properties
new file mode 100644
index 00000000..78abf47f
--- /dev/null
+++ b/framework-tests/bellatrix.web.tests/src/test/resources/junit-platform.properties
@@ -0,0 +1,5 @@
+### Uncomment the lines below to enable JUnit 5 Parallel Test Execution experimental feature ###
+
+# junit.jupiter.execution.parallel.enabled = true
+# junit.jupiter.execution.parallel.mode.default = same_thread
+# junit.jupiter.execution.parallel.mode.classes.default = concurrent
diff --git a/bellatrix.playwright.getting.started/pom.xml b/getting-started/bellatrix.playwright.getting.started/pom.xml
similarity index 96%
rename from bellatrix.playwright.getting.started/pom.xml
rename to getting-started/bellatrix.playwright.getting.started/pom.xml
index db4f3b0e..01492435 100644
--- a/bellatrix.playwright.getting.started/pom.xml
+++ b/getting-started/bellatrix.playwright.getting.started/pom.xml
@@ -7,6 +7,7 @@
         <groupId>solutions.bellatrix</groupId>
         <artifactId>bellatrix</artifactId>
         <version>1.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
     </parent>
 
     <artifactId>bellatrix.playwright.getting.started</artifactId>
diff --git a/bellatrix.playwright.getting.started/src/main/resources/application.properties b/getting-started/bellatrix.playwright.getting.started/src/main/resources/application.properties
similarity index 100%
rename from bellatrix.playwright.getting.started/src/main/resources/application.properties
rename to getting-started/bellatrix.playwright.getting.started/src/main/resources/application.properties
diff --git a/bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.dev.json b/getting-started/bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.dev.json
similarity index 98%
rename from bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.dev.json
rename to getting-started/bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.dev.json
index 4a77d263..023d0c91 100644
--- a/bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.dev.json
+++ b/getting-started/bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.dev.json
@@ -10,6 +10,7 @@
     "artificialDelayBeforeAction": "0",
     "automaticallyScrollToVisible": "false",
     "waitUntilReadyOnElementFound": "false",
+    "toastNotificationBddLogging": "false",
     "waitForAngular": "false",
     "shouldHighlightElements": "true",
     "shouldCaptureHttpTraffic": "false",
diff --git a/bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.qa.json b/getting-started/bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.qa.json
similarity index 100%
rename from bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.qa.json
rename to getting-started/bellatrix.playwright.getting.started/src/main/resources/testFrameworkSettings.qa.json
diff --git a/bellatrix.playwright.getting.started/src/main/resources/testPage.html b/getting-started/bellatrix.playwright.getting.started/src/main/resources/testPage.html
similarity index 100%
rename from bellatrix.playwright.getting.started/src/main/resources/testPage.html
rename to getting-started/bellatrix.playwright.getting.started/src/main/resources/testPage.html
diff --git a/bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
similarity index 97%
rename from bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
index 6134b68c..e5f03165 100644
--- a/bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
@@ -35,7 +35,7 @@ public void assertValidateCartPageFields() {
 
         Span totalSpan = app().create().byXpath(Span.class, "//*[@class='order-total']//span");
 
-        totalSpan.validateInnerTextIs("120.00€");
+        totalSpan.validateTextIs("120.00€");
         // Check the total price contained in the order-total span HTML element. By default, all Validate methods have 5
         // seconds timeout. However, you can specify a custom timeout and sleep interval (period for checking again)
     }
diff --git a/bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O10_validate_assertions/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
similarity index 98%
rename from bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
index e2831fcb..31744db8 100644
--- a/bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
@@ -34,10 +34,10 @@ public void purchaseRocketWithLogs() {
         couponCodeTextInput.setText("happybirthday");
         applyCouponButton.click();
         messageAlert.toBeVisible().waitToBe();
-        messageAlert.validateInnerTextIs("Coupon code applied successfully.");
+        messageAlert.validateTextIs("Coupon code applied successfully.");
         quantityBox.setNumber(0);
         quantityBox.setNumber(2);
-        totalSpan.validateInnerTextIs("54.00€");
+        totalSpan.validateTextIs("54.00€");
         proceedToCheckout.click();
 
         Heading billingDetailsHeading = app().create().byInnerTextContaining(Heading.class, "Billing details");
diff --git a/bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O11_behaviour_driven_development/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/PageObjectsTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/PageObjectsTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/PageObjectsTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/PageObjectsTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java
similarity index 81%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java
index 2b0f38fa..7387834d 100644
--- a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java
@@ -4,7 +4,7 @@
 
 public class Asserts extends PageAsserts<Map> {
     public void couponAppliedSuccessfully() {
-        map().messageAlert().validateInnerTextIs("Coupon code applied successfully.");
+        map().messageAlert().validateTextIs("Coupon code applied successfully.");
     }
 
     // In the Asserts file, we have a method called totalPrice. We can access it through the asserts method, just like
@@ -12,6 +12,6 @@ public void couponAppliedSuccessfully() {
     // is called from the page it makes your tests a little more readable. If there is a change what needs to be
     // checked –> for example, not span but different element you can change it in a single place.
     public void totalPrice(String expectedPrice) {
-        map().totalSpan().validateInnerTextIs(expectedPrice + "€");
+        map().totalSpan().validateTextIs(expectedPrice + "€");
     }
 }
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Map.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Map.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Map.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/cart_page/Map.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java
similarity index 91%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java
index 6574f738..fac6b464 100644
--- a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java
@@ -17,6 +17,6 @@
 
 public class Asserts extends PageAsserts<Map> {
     public void orderReceived() {
-        map().receivedMessage().validateInnerTextIs("Order received");
+        map().receivedMessage().validateTextIs("Order received");
     }
 }
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/CheckoutPage.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/CheckoutPage.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/CheckoutPage.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/CheckoutPage.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Map.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Map.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Map.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/checkoutpage/Map.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/Asserts.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/Asserts.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/Asserts.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/Asserts.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/MainPage.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/MainPage.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/MainPage.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/MainPage.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/Map.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/Map.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/Map.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/main_page/Map.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/models/PurchaseInfo.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/models/PurchaseInfo.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O12_page_objects/models/PurchaseInfo.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O12_page_objects/models/PurchaseInfo.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O13_layout_testing/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O13_layout_testing/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O13_layout_testing/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O13_layout_testing/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O14_troubleshooting_screenshots/FullPageScreenshotsOnFail.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O14_troubleshooting_screenshots/FullPageScreenshotsOnFail.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O14_troubleshooting_screenshots/FullPageScreenshotsOnFail.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O14_troubleshooting_screenshots/FullPageScreenshotsOnFail.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O14_troubleshooting_screenshots/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O14_troubleshooting_screenshots/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O14_troubleshooting_screenshots/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O14_troubleshooting_screenshots/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O15_troubleshooting_video_recording/VideoRecordingTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O15_troubleshooting_video_recording/VideoRecordingTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O15_troubleshooting_video_recording/VideoRecordingTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O15_troubleshooting_video_recording/VideoRecordingTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O15_troubleshooting_video_recording/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O15_troubleshooting_video_recording/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O15_troubleshooting_video_recording/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O15_troubleshooting_video_recording/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/browser_stack_02/BrowserStackTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/browser_stack_02/BrowserStackTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/browser_stack_02/BrowserStackTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/browser_stack_02/BrowserStackTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/selenium_grid_01/SeleniumGridTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/selenium_grid_01/SeleniumGridTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/selenium_grid_01/SeleniumGridTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/selenium_grid_01/SeleniumGridTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O16_grid_and_cloud_integration/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O17_logging/LoggingTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O17_logging/LoggingTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O17_logging/LoggingTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O17_logging/LoggingTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O17_logging/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O17_logging/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O17_logging/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O17_logging/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O18_test_workflow_hooks/TestWorkflowHooksTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O18_test_workflow_hooks/TestWorkflowHooksTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O18_test_workflow_hooks/TestWorkflowHooksTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O18_test_workflow_hooks/TestWorkflowHooksTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O19_plugins/AssociatedPlugin.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O19_plugins/AssociatedPlugin.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O19_plugins/AssociatedPlugin.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O19_plugins/AssociatedPlugin.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
similarity index 95%
rename from bellatrix.playwright.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
index 55a436ad..5bca3be9 100644
--- a/bellatrix.playwright.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
@@ -47,9 +47,9 @@ public void addProductToCart() {
         }
 
         var firstName = app().create().byId(TextInput.class,"billing_first_name");
-        firstName.validateInnerTextIs("");
+        firstName.validateTextIs("");
 
         var productTotal = app().create().byClass(Span.class,"cart_item").createByClass(Span.class,"product-total");
-        productTotal.validateInnerTextIs("120.00€");
+        productTotal.validateTextIs("120.00€");
     }
 }
\ No newline at end of file
diff --git a/bellatrix.playwright.getting.started/src/test/java/O19_plugins/ManualTestCase.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O19_plugins/ManualTestCase.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O19_plugins/ManualTestCase.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O19_plugins/ManualTestCase.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O1_file_structure/readme.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O1_file_structure/readme.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O1_file_structure/readme.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O1_file_structure/readme.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/LoggingButtonEvents.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/LoggingButtonEvents.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/LoggingButtonEvents.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/LoggingButtonEvents.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O20_component_action_hooks/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
similarity index 94%
rename from bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
index c11a6d5b..2c590927 100644
--- a/bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
@@ -32,13 +32,13 @@ public void PurchaseRocket() {
         applyCouponButton.click();
 
         messageAlert.toBeVisible().waitToBe();
-        messageAlert.validateInnerTextIs("Coupon code applied successfully.");
+        messageAlert.validateTextIs("Coupon code applied successfully.");
         quantityBox.setNumber(0);
         quantityBox.setNumber(2);
 
         updateCart.click();
 
-        totalSpan.validateInnerTextIs("95.00€");
+        totalSpan.validateTextIs("95.00€");
 
         proceedToCheckout.submitButtonWithEnter();
         billingDetailsHeading.toBeVisible().waitToBe();
diff --git a/bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendedButton.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendedButton.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendedButton.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O21_extend_components/ExtendedButton.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
similarity index 94%
rename from bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
index 1ed880a6..8e6b5c38 100644
--- a/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
@@ -42,13 +42,13 @@ public void purchaseRocket() {
         applyCouponButton.click();
 
         messageAlert.toHaveContent().toBeVisible().waitToBe();
-        messageAlert.validateInnerTextIs("Coupon code applied successfully.");
+        messageAlert.validateTextIs("Coupon code applied successfully.");
         quantityBox.setNumber(0);
         quantityBox.setNumber(2);
 
         updateCart.click();
 
-        totalSpan.validateInnerTextIs("95.00€");
+        totalSpan.validateTextIs("95.00€");
 
         proceedToCheckout.submitButtonWithEnter();
         billingDetailsHeading.toBeVisible().waitToBe();
diff --git a/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendedApp.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendedApp.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendedApp.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendedApp.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendedNavigationService.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendedNavigationService.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendedNavigationService.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/ExtendedNavigationService.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O22_extend_common_services/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/IdStartingWithFindStrategy.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/IdStartingWithFindStrategy.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/IdStartingWithFindStrategy.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/IdStartingWithFindStrategy.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/NewFindLocatorsTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/NewFindLocatorsTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/NewFindLocatorsTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/NewFindLocatorsTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O23_add_new_find_locators/todo.txt
diff --git a/getting-started/bellatrix.playwright.getting.started/src/test/java/O24_iframes_and_shadow_dom/IFramesAndShadowDOMTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O24_iframes_and_shadow_dom/IFramesAndShadowDOMTests.java
new file mode 100644
index 00000000..96b51ca5
--- /dev/null
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O24_iframes_and_shadow_dom/IFramesAndShadowDOMTests.java
@@ -0,0 +1,92 @@
+package O24_iframes_and_shadow_dom;
+
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.Test;
+import solutions.bellatrix.playwright.components.*;
+import solutions.bellatrix.playwright.infrastructure.junit.WebTest;
+
+public class IFramesAndShadowDOMTests extends WebTest {
+    @Test
+    public void testFindingIFramesOnThePage() {
+        app().navigate().to("https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe");
+        app().create().byId(Button.class, "accept-choices").click();
+
+        // If you create a Frame component, it automatically will start searching for elements inside an <iframe> html element
+        // You can work with iframes in bellatrix.playwright module as if they were any other component
+        var parentIFrame = app().create().byXpath(Frame.class, "//iframe[@id='iframeResult']");
+
+        // This <iframe> is located inside the parentIFrame
+        var iframe = parentIFrame.create().byXpath(Frame.class, "//iframe[@src='https://www.w3schools.com']");
+
+        // This button is located inside iframe
+        iframe.create().byXpath(Button.class, "//div[@id='accept-choices']").click();
+
+        // In case you want to reuse the component locating logic, but stop looking inside the <iframe>, you can use the as() method;
+        // It will automatically switch to using normal locating strategies and you will stop being able to pierce the <iframe>
+        var iframeAsDiv = iframe.as(Div.class);
+        iframeAsDiv.create().byXpath(Heading.class, "//preceding-sibling::h1").validateTextIs("The iframe element");
+
+        // Again, if you create a 'normal' component and want to reuse it, this time to search inside it, as if it is <iframe>, you use as() method again
+        var iframeAsNormalComponent = parentIFrame.create().byXpath(Div.class, "//iframe[@src='https://www.w3schools.com']");
+        var iframeAsFrame = iframeAsNormalComponent.as(Frame.class);
+
+        Assertions.assertEquals(iframeAsFrame.create().byXpath(Div.class, "//div[@id='subtopnav']//a[@title='HTML Tutorial']").getText(), "HTML");
+    }
+
+    @Test
+    public void testFindingElementsInShadowDOM() {
+        app().navigate().to("https://web.dev/articles/shadowdom-v1");
+        var iframe = app().create().byXpath(Frame.class, "//iframe[contains(@src, 'raw/fancy-tabs-demo.html')]");
+        iframe.scrollToVisible();
+
+        // As you might know, when working with shadowRoot, we can use only CSS locators, which might prove difficult
+        // When we want to find an element relative to another or an element by its inner text.
+        // BELLATRIX offers a solution to this problem.
+
+        // Not going into detail, this works in the following way:
+        // 1. Find the shadow root
+        // 2. Get its inner HTML
+        // 3. Get the element using jsoup to navigate inside it with xpath
+        // 4. Get its absolute position in the form of an absolute xpath
+        // 5. Convert the absolute xpath into CSS
+        // 6. Use this CSS locator to find the actual element on the page
+
+        // Let's test a simply shadow DOM:
+        // <div id="tabs">
+        //   <slot id="tabsSlot" name="title"></slot>
+        // </div>
+        // <div id="panels">
+        //   <slot id="panelsSlot"></slot>
+        // </div>
+
+        // To get inside the shadowRoot, we first have to locate its host
+        // And then we use the method getShadowRoot(), which will return a ShadowRoot component
+        var shadowRoot = iframe.create().byXpath(Div.class, "//fancy-tabs").getShadowRoot();
+
+
+        // Absolute xpath: /div[1]/slot
+        // CSS locator: div:nth-child(1)/slot
+        var elementInShadow = shadowRoot.create().byXpath(Div.class, "//div[@id='tabs']//slot[@id='tabsSlot']");
+
+        // What if we wanted to go back in the DOM?
+        // Absolute xpath: /div[1]
+        // CSS locator: div:nth-child(1)
+        var parentInShadow = elementInShadow.create().byXpath(Div.class, "//parent::div");
+
+        System.out.println(elementInShadow.getFindStrategy().toString());
+
+        // The same as elementInShadow...
+        // Absolute xpath: /div[1]/slot
+        // CSS locator: div:nth-child(1)/slot
+        var slot = parentInShadow.create().byXpath(Div.class, "//slot");
+
+        Assertions.assertEquals(slot.getAttribute("name"), "title");
+
+        // More complex xpath will also work the same way.
+        // Of course, the test here doesn't make much sense, but it is a showcase of
+        // what you can do with BELLATRIX regarding shadow DOM:
+        // - Use xpath to locate elements inside the shadow DOM
+        // - Go 'back' in the DOM tree (something you cannot achieve with CSS)
+        // - Locate elements by their inner text (something you cannot achieve with CSS)
+    }
+}
\ No newline at end of file
diff --git a/bellatrix.playwright.getting.started/src/test/java/O2_control_browser/BellatrixBrowserBehaviourTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O2_control_browser/BellatrixBrowserBehaviourTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O2_control_browser/BellatrixBrowserBehaviourTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O2_control_browser/BellatrixBrowserBehaviourTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O2_control_browser/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O2_control_browser/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O2_control_browser/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O2_control_browser/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O3_navigate_to_pages/NavigateToPagesTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O3_navigate_to_pages/NavigateToPagesTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O3_navigate_to_pages/NavigateToPagesTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O3_navigate_to_pages/NavigateToPagesTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O3_navigate_to_pages/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O3_navigate_to_pages/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O3_navigate_to_pages/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O3_navigate_to_pages/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O4_locate_components/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O4_locate_components/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O4_locate_components/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O4_locate_components/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O5_locate_and_wait_elements/LocateAndWaitElements.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O5_locate_and_wait_elements/LocateAndWaitElements.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O5_locate_and_wait_elements/LocateAndWaitElements.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O5_locate_and_wait_elements/LocateAndWaitElements.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O5_locate_and_wait_elements/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O5_locate_and_wait_elements/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O5_locate_and_wait_elements/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O5_locate_and_wait_elements/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O6_waits_for_components/WaitComponentsTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O6_waits_for_components/WaitComponentsTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O6_waits_for_components/WaitComponentsTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O6_waits_for_components/WaitComponentsTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O6_waits_for_components/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O6_waits_for_components/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O6_waits_for_components/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O6_waits_for_components/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O7_common_services/browser_service_01/BrowserServiceTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/browser_service_01/BrowserServiceTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O7_common_services/browser_service_01/BrowserServiceTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/browser_service_01/BrowserServiceTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O7_common_services/browser_service_01/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/browser_service_01/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O7_common_services/browser_service_01/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/browser_service_01/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O7_common_services/cookies_service_03/CookiesServiceTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/cookies_service_03/CookiesServiceTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O7_common_services/cookies_service_03/CookiesServiceTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/cookies_service_03/CookiesServiceTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O7_common_services/cookies_service_03/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/cookies_service_03/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O7_common_services/cookies_service_03/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/cookies_service_03/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O7_common_services/dialog_service_02/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/dialog_service_02/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O7_common_services/dialog_service_02/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/dialog_service_02/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O7_common_services/java_script_service_04/JavaScriptServiceTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/java_script_service_04/JavaScriptServiceTests.java
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O7_common_services/java_script_service_04/JavaScriptServiceTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/java_script_service_04/JavaScriptServiceTests.java
diff --git a/bellatrix.playwright.getting.started/src/test/java/O7_common_services/java_script_service_04/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/java_script_service_04/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O7_common_services/java_script_service_04/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O7_common_services/java_script_service_04/todo.txt
diff --git a/bellatrix.playwright.getting.started/src/test/java/O8_web_components/WebComponentsTests.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
similarity index 98%
rename from bellatrix.playwright.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
index 91da94d5..8ab601e3 100644
--- a/bellatrix.playwright.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
@@ -51,7 +51,7 @@ public void purchaseRocket() {
 
         messageAlert.toBeVisible().waitToBe();
 
-        messageAlert.validateInnerTextIs("Coupon code applied successfully.");
+        messageAlert.validateTextIs("Coupon code applied successfully.");
 
         NumberInput quantityBox = app().create().byClassContaining(NumberInput.class, "input-text qty text");
 
@@ -63,7 +63,7 @@ public void purchaseRocket() {
 
         Span totalSpan = app().create().byXpath(Span.class, "//*[@class='order-total']//span");
 
-        totalSpan.validateInnerTextIs("95.00€");
+        totalSpan.validateTextIs("95.00€");
 
         Anchor proceedToCheckout =
                 app().create().byClassContaining(Anchor.class, "checkout-button button alt wc-forward");
diff --git a/bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java b/getting-started/bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
similarity index 93%
rename from bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
index 79e21093..e23a2cf8 100644
--- a/bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
+++ b/getting-started/bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
@@ -36,11 +36,11 @@ public void assertCartPageFields() {
 
         Span totalSpan = app().create().byXpath(Span.class, "//*[@class='order-total']//span");
 
-        Assert.assertEquals(totalSpan.getInnerText(), "120.00€");
+        Assert.assertEquals(totalSpan.getText(), "120.00€");
         // We check the total price contained in the order-total span HTML element.
 
         SoftAssert multipleAssert = new SoftAssert();
-        multipleAssert.assertEquals(totalSpan.getInnerText(), "120.00€");
+        multipleAssert.assertEquals(totalSpan.getText(), "120.00€");
         multipleAssert.assertTrue(updateCart.isDisabled());
         multipleAssert.assertAll();
         // You can execute multiple assertions failing only once viewing all results.
diff --git a/bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/todo.txt b/getting-started/bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/todo.txt
similarity index 100%
rename from bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/todo.txt
rename to getting-started/bellatrix.playwright.getting.started/src/test/java/O9_normal_assertions/todo.txt
diff --git a/bellatrix.web.getting.started/pom.xml b/getting-started/bellatrix.web.getting.started/pom.xml
similarity index 97%
rename from bellatrix.web.getting.started/pom.xml
rename to getting-started/bellatrix.web.getting.started/pom.xml
index 5ccfed85..8f737216 100644
--- a/bellatrix.web.getting.started/pom.xml
+++ b/getting-started/bellatrix.web.getting.started/pom.xml
@@ -7,6 +7,7 @@
         <groupId>solutions.bellatrix</groupId>
         <artifactId>bellatrix</artifactId>
         <version>1.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
     </parent>
 
     <artifactId>bellatrix.web.getting.started</artifactId>
diff --git a/bellatrix.web.getting.started/src/main/resources/application.properties b/getting-started/bellatrix.web.getting.started/src/main/resources/application.properties
similarity index 100%
rename from bellatrix.web.getting.started/src/main/resources/application.properties
rename to getting-started/bellatrix.web.getting.started/src/main/resources/application.properties
diff --git a/bellatrix.web.getting.started/src/main/resources/testFrameworkSettings.dev.json b/getting-started/bellatrix.web.getting.started/src/main/resources/testFrameworkSettings.dev.json
similarity index 100%
rename from bellatrix.web.getting.started/src/main/resources/testFrameworkSettings.dev.json
rename to getting-started/bellatrix.web.getting.started/src/main/resources/testFrameworkSettings.dev.json
diff --git a/bellatrix.web.getting.started/src/main/resources/testFrameworkSettings.qa.json b/getting-started/bellatrix.web.getting.started/src/main/resources/testFrameworkSettings.qa.json
similarity index 100%
rename from bellatrix.web.getting.started/src/main/resources/testFrameworkSettings.qa.json
rename to getting-started/bellatrix.web.getting.started/src/main/resources/testFrameworkSettings.qa.json
diff --git a/bellatrix.web.getting.started/src/main/resources/testPage.html b/getting-started/bellatrix.web.getting.started/src/main/resources/testPage.html
similarity index 100%
rename from bellatrix.web.getting.started/src/main/resources/testPage.html
rename to getting-started/bellatrix.web.getting.started/src/main/resources/testPage.html
diff --git a/bellatrix.web.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java b/getting-started/bellatrix.web.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
similarity index 92%
rename from bellatrix.web.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
index 0963e223..29944138 100644
--- a/bellatrix.web.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O10_validate_assertions/ValidateAssertions.java
@@ -11,9 +11,9 @@ public void assertValidateCartPageFields() {
 
         app().navigate().to("http://demos.bellatrix.solutions/cart/");
 
-        TextField couponCodeTextField = app().create().byId(TextField.class, "coupon_code");
+        TextInput couponCodeTextInput = app().create().byId(TextInput.class, "coupon_code");
 
-        couponCodeTextField.validatePlaceholderIs("Coupon code");
+        couponCodeTextInput.validatePlaceholderIs("Coupon code");
         // If we use the validate methods, BELLATRIX waits some time for the condition to pass. After this period if it
         // is not successful, a beautified meaningful exception message is displayed:
         // The component's placeholder should be 'Discount code' but was 'Coupon code'. The test failed on URL:
diff --git a/bellatrix.web.getting.started/src/test/java/O10_validate_assertions/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O10_validate_assertions/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O10_validate_assertions/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O10_validate_assertions/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
similarity index 78%
rename from bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
index 09493458..a64e35ba 100644
--- a/bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/BDDLoggingTests.java
@@ -9,7 +9,7 @@ public class BDDLoggingTests extends WebTest {
     public void purchaseRocketWithLogs() {
         app().navigate().to("http://demos.bellatrix.solutions/");
 
-        Select sortDropDown = app().create().byNameEndingWith(Select.class, "orderby");
+        Select sortDropDown = app().create().byNameEnding(Select.class, "orderby");
         Anchor protonMReadMoreButton = app().create().byInnerTextContaining(Anchor.class, "Read more");
         Anchor addToCartFalcon9 =
                 app().create().byAttributeContaining(Anchor.class, "data-product_id", "28").toBeClickable();
@@ -22,7 +22,7 @@ public void purchaseRocketWithLogs() {
         addToCartFalcon9.click();
         viewCartButton.click();
 
-        TextField couponCodeTextField = app().create().byId(TextField.class, "coupon_code");
+        TextInput couponCodeTextInput = app().create().byId(TextInput.class, "coupon_code");
         Button applyCouponButton = app().create().byValueContaining(Button.class, "Apply coupon");
         Div messageAlert = app().create().byClassContaining(Div.class, "woocommerce-message");
         NumberInput quantityBox = app().create().byClassContaining(NumberInput.class, "input-text qty text");
@@ -31,7 +31,7 @@ public void purchaseRocketWithLogs() {
         Anchor proceedToCheckout =
                 app().create().byClassContaining(Anchor.class, "checkout-button button alt wc-forward");
 
-        couponCodeTextField.setText("happybirthday");
+        couponCodeTextInput.setText("happybirthday");
         applyCouponButton.click();
         messageAlert.toBeVisible().waitToBe();
         messageAlert.validateTextIs("Coupon code applied successfully.");
@@ -43,17 +43,17 @@ public void purchaseRocketWithLogs() {
         Heading billingDetailsHeading = app().create().byInnerTextContaining(Heading.class, "Billing details");
         Anchor showLogin = app().create().byInnerTextContaining(Anchor.class, "Click here to login");
         TextArea orderCommentsTextArea = app().create().byId(TextArea.class, "order_comments");
-        TextField billingFirstName = app().create().byId(TextField.class, "billing_first_name");
-        TextField billingLastName = app().create().byId(TextField.class, "billing_last_name");
-        TextField billingCompany = app().create().byId(TextField.class, "billing_company");
+        TextInput billingFirstName = app().create().byId(TextInput.class, "billing_first_name");
+        TextInput billingLastName = app().create().byId(TextInput.class, "billing_last_name");
+        TextInput billingCompany = app().create().byId(TextInput.class, "billing_company");
         Select billingCountry = app().create().byId(Select.class, "billing_country");
-        TextField billingAddress1 = app().create().byId(TextField.class, "billing_address_1");
-        TextField billingAddress2 = app().create().byId(TextField.class, "billing_address_2");
-        TextField billingCity = app().create().byId(TextField.class, "billing_city");
+        TextInput billingAddress1 = app().create().byId(TextInput.class, "billing_address_1");
+        TextInput billingAddress2 = app().create().byId(TextInput.class, "billing_address_2");
+        TextInput billingCity = app().create().byId(TextInput.class, "billing_city");
         Select billingState = app().create().byId(Select.class, "billing_state").toBeVisible().toBeClickable();
-        TextField billingZip = app().create().byId(TextField.class, "billing_postcode");
+        TextInput billingZip = app().create().byId(TextInput.class, "billing_postcode");
         PhoneInput billingPhone = app().create().byId(PhoneInput.class, "billing_phone");
-        EmailField billingEmail = app().create().byId(EmailField.class, "billing_email");
+        EmailInput billingEmail = app().create().byId(EmailInput.class, "billing_email");
         CheckBox createAccountCheckBox = app().create().byId(CheckBox.class, "createaccount");
         RadioButton checkPaymentsRadioButton =
                 app().create().byAttributeContaining(RadioButton.class, "for", "payment_method_cheque");
@@ -83,7 +83,7 @@ public void purchaseRocketWithLogs() {
         // focusing Anchor (data-product_id containing 28)
         // clicking Anchor (data-product_id containing 28)
         // clicking Anchor (class containing added_to_cart wc-forward)
-        // typing 'happybirthday' in TextField (id = coupon_code)
+        // typing 'happybirthday' in TextInput (id = coupon_code)
         // clicking Button (value containing Apply coupon)
         // validating Div (class containing woocommerce-message)'s inner text is 'Coupon code applied successfully.'
         // typing '0.0' in NumberInput (class containing input-text qty text)
@@ -93,18 +93,18 @@ public void purchaseRocketWithLogs() {
         // validating Anchor (text containing Click here to login)'s href is 'https://demos.bellatrix.solutions/checkout/#'
         // scrolling to TextArea (id = order_comments)
         // typing 'Please send the rocket to my door step!' in TextArea (id = order_comments)
-        // typing 'In' in TextField (id = billing_first_name)
-        // typing 'Deepthought' in TextField (id = billing_last_name)
-        // typing 'Automate The Planet Ltd.' in TextField (id = billing_company)
+        // typing 'In' in TextInput (id = billing_first_name)
+        // typing 'Deepthought' in TextInput (id = billing_last_name)
+        // typing 'Automate The Planet Ltd.' in TextInput (id = billing_company)
         // selecting 'Bulgaria' from Select (id = billing_country)
-        // validating TextField (id = billing_address_1)'s placeholder is 'House number and street name'
-        // typing 'bul. Yerusalim 5' in TextField (id = billing_address_1)
-        // typing 'bul. Yerusalim 6' in TextField (id = billing_address_2)
-        // typing 'Sofia' in TextField (id = billing_city)
+        // validating TextInput (id = billing_address_1)'s placeholder is 'House number and street name'
+        // typing 'bul. Yerusalim 5' in TextInput (id = billing_address_1)
+        // typing 'bul. Yerusalim 6' in TextInput (id = billing_address_2)
+        // typing 'Sofia' in TextInput (id = billing_city)
         // selecting 'Sofia-Grad' from Select (id = billing_state)
-        // typing '1000' in TextField (id = billing_postcode)
+        // typing '1000' in TextInput (id = billing_postcode)
         // typing '+00359894646464' in PhoneField (id = billing_phone)
-        // typing 'info@bellatrix.solutions' in EmailField (id = billing_email)
+        // typing 'info@bellatrix.solutions' in EmailInput (id = billing_email)
         // checking CheckBox (id = createaccount)
         // clicking RadioButton (for containing payment_method_cheque)
 
diff --git a/bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O11_behaviour_driven_development/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/PageObjectsTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/PageObjectsTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/PageObjectsTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/PageObjectsTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Asserts.java
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java
similarity index 94%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java
index 7bc96061..e2d43f34 100644
--- a/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/CartPage.java
@@ -14,7 +14,7 @@ protected String getUrl() {
     // Overriding the getUrl method that comes from the base page object you can later you the open method to go to the page.
     @Override
     protected void waitForPageLoad() {
-        map().couponCodeTextField().toExist().waitToBe();
+        map().couponCodeTextInput().toExist().waitToBe();
     }
 
     public void applyCoupon(String coupon) {
@@ -22,7 +22,7 @@ public void applyCoupon(String coupon) {
         // There are many test cases where you need to apply different coupons and so on. This way you reuse the code
         // instead of copy-paste it. If there is a change in the way how the coupon is applied, change the workflow only
         // here. Even single line of code is changed in your tests.
-        map().couponCodeTextField().setText(coupon);
+        map().couponCodeTextInput().setText(coupon);
         map().applyCouponButton().click();
         browser().waitForAjax();
     }
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Map.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Map.java
similarity index 95%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Map.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Map.java
index b558d994..646b382c 100644
--- a/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Map.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/cart_page/Map.java
@@ -6,7 +6,7 @@
 import java.util.List;
 
 public class Map extends PageMap {
-    public TextInput couponCodeTextField() {
+    public TextInput couponCodeTextInput() {
         return create().byId(TextInput.class, "coupon_code");
     }
 
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/Asserts.java
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/CheckoutPage.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/CheckoutPage.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/CheckoutPage.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/CheckoutPage.java
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/Map.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/Map.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/Map.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/checkoutpage/Map.java
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/Asserts.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/Asserts.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/Asserts.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/Asserts.java
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/MainPage.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/MainPage.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/MainPage.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/MainPage.java
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/Map.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/Map.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/Map.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/main_page/Map.java
diff --git a/bellatrix.web.getting.started/src/test/java/O12_page_objects/models/PurchaseInfo.java b/getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/models/PurchaseInfo.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O12_page_objects/models/PurchaseInfo.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O12_page_objects/models/PurchaseInfo.java
diff --git a/bellatrix.web.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java
similarity index 97%
rename from bellatrix.web.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java
index bf546c9a..6d018d11 100644
--- a/bellatrix.web.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O13_layout_testing/LayoutTestingTests.java
@@ -14,7 +14,7 @@ public class LayoutTestingTests extends WebTest {
     public void testPageLayout() {
         app().navigate().to("http://demos.bellatrix.solutions/");
 
-        Select sortDropDown = app().create().byNameEndingWith(Select.class, "orderby");
+        Select sortDropDown = app().create().byNameEnding(Select.class, "orderby");
         Anchor protonRocketAnchor =
                 app().create().byAttributeContaining(Anchor.class, "href", "/proton-rocket/");
         Anchor protonMAnchor =
diff --git a/bellatrix.web.getting.started/src/test/java/O13_layout_testing/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O13_layout_testing/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O13_layout_testing/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O13_layout_testing/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O14_troubleshooting_screenshots/FullPageScreenshotsOnFail.java b/getting-started/bellatrix.web.getting.started/src/test/java/O14_troubleshooting_screenshots/FullPageScreenshotsOnFail.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O14_troubleshooting_screenshots/FullPageScreenshotsOnFail.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O14_troubleshooting_screenshots/FullPageScreenshotsOnFail.java
diff --git a/bellatrix.web.getting.started/src/test/java/O14_troubleshooting_screenshots/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O14_troubleshooting_screenshots/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O14_troubleshooting_screenshots/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O14_troubleshooting_screenshots/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O15_troubleshooting_video_recording/VideoRecordingTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O15_troubleshooting_video_recording/VideoRecordingTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O15_troubleshooting_video_recording/VideoRecordingTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O15_troubleshooting_video_recording/VideoRecordingTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O15_troubleshooting_video_recording/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O15_troubleshooting_video_recording/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O15_troubleshooting_video_recording/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O15_troubleshooting_video_recording/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/browser_stack_02/BrowserStackTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/browser_stack_02/BrowserStackTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/browser_stack_02/BrowserStackTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/browser_stack_02/BrowserStackTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/selenium_grid_01/SeleniumGridTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/selenium_grid_01/SeleniumGridTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/selenium_grid_01/SeleniumGridTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/selenium_grid_01/SeleniumGridTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O16_grid_and_cloud_integration/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O17_logging/LoggingTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O17_logging/LoggingTests.java
similarity index 95%
rename from bellatrix.web.getting.started/src/test/java/O17_logging/LoggingTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O17_logging/LoggingTests.java
index 76a0bbaf..227eddf4 100644
--- a/bellatrix.web.getting.started/src/test/java/O17_logging/LoggingTests.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O17_logging/LoggingTests.java
@@ -13,7 +13,7 @@ public class LoggingTests extends WebTest {
     public void addCustomMessagesToLog() {
         app().navigate().to("http://demos.bellatrix.solutions/");
 
-        Select sortDropDown = app().create().byNameEndingWith(Select.class, "orderby");
+        Select sortDropDown = app().create().byNameEnding(Select.class, "orderby");
         Anchor protonMReadMoreButton = app().create().byInnerTextContaining(Anchor.class, "Read more");
         Anchor addToCartFalcon9 = app().create().byAttributeContaining(Anchor.class, "data-product_id", "28").toBeClickable();
 
diff --git a/bellatrix.web.getting.started/src/test/java/O17_logging/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O17_logging/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O17_logging/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O17_logging/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O18_test_workflow_hooks/TestWorkflowHooksTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O18_test_workflow_hooks/TestWorkflowHooksTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O18_test_workflow_hooks/TestWorkflowHooksTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O18_test_workflow_hooks/TestWorkflowHooksTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O19_plugins/AssociatedPlugin.java b/getting-started/bellatrix.web.getting.started/src/test/java/O19_plugins/AssociatedPlugin.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O19_plugins/AssociatedPlugin.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O19_plugins/AssociatedPlugin.java
diff --git a/bellatrix.web.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
similarity index 92%
rename from bellatrix.web.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
index cfe795be..a454095e 100644
--- a/bellatrix.web.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O19_plugins/CustomTestCaseExtensionTests.java
@@ -5,7 +5,7 @@
 import solutions.bellatrix.web.components.Anchor;
 import solutions.bellatrix.web.components.Button;
 import solutions.bellatrix.web.components.Span;
-import solutions.bellatrix.web.components.TextField;
+import solutions.bellatrix.web.components.TextInput;
 import solutions.bellatrix.web.infrastructure.junit.WebTest;
 
 public class CustomTestCaseExtensionTests extends WebTest {
@@ -20,7 +20,7 @@ public void configure() {
     @Test
     @ManualTestCase(id = 1532)
     public void addProductToCart() {
-        var searchInput = app().create().byId(TextField.class, "woocommerce-product-search-field-0");
+        var searchInput = app().create().byId(TextInput.class, "woocommerce-product-search-field-0");
         searchInput.setText("Saturn V");
 
         var addToCartSaturn = app().create().byAttributeContaining(Button.class, "aria-label", "Saturn V");
@@ -46,7 +46,7 @@ public void addProductToCart() {
             item.validateIsVisible();
         }
 
-        var firstName = app().create().byId(TextField.class,"billing_first_name");
+        var firstName = app().create().byId(TextInput.class,"billing_first_name");
         firstName.validateTextIs("");
 
         var productTotal = app().create().byClass(Span.class,"cart_item").createByClass(Span.class,"product-total");
diff --git a/bellatrix.web.getting.started/src/test/java/O19_plugins/ManualTestCase.java b/getting-started/bellatrix.web.getting.started/src/test/java/O19_plugins/ManualTestCase.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O19_plugins/ManualTestCase.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O19_plugins/ManualTestCase.java
diff --git a/bellatrix.web.getting.started/src/test/java/O1_file_structure/readme.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O1_file_structure/readme.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O1_file_structure/readme.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O1_file_structure/readme.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java
similarity index 91%
rename from bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java
index 776f7dfa..820c7fe6 100644
--- a/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/ElementActionHooksTests.java
@@ -18,14 +18,14 @@ public void configure() {
     public void purchaseRocketWithGloballyOverriddenMethods() {
         app().navigate().to("http://demos.bellatrix.solutions/");
 
-        Select sortDropDown = app().create().byNameEndingWith(Select.class, "orderby");
+        Select sortDropDown = app().create().byNameEnding(Select.class, "orderby");
         Anchor protonMReadMoreButton =
                 app().create().byInnerTextContaining(Anchor.class, "Read more");
         Anchor addToCartFalcon9 =
                 app().create().byAttributeContaining(Anchor.class, "data-product_id", "28").toBeClickable();
         Anchor viewCartButton =
                 app().create().byClassContaining(Anchor.class, "added_to_cart wc-forward").toBeClickable();
-        TextField couponCodeTextField = app().create().byId(TextField.class, "coupon_code");
+        TextInput couponCodeTextInput = app().create().byId(TextInput.class, "coupon_code");
         Button applyCouponButton = app().create().byValueContaining(Button.class, "Apply coupon");
         NumberInput quantityBox = app().create().byClassContaining(NumberInput.class, "input-text qty text");
         Div messageAlert = app().create().byClassContaining(Div.class, "woocommerce-message");
diff --git a/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/LoggingButtonEvents.java b/getting-started/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/LoggingButtonEvents.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/LoggingButtonEvents.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/LoggingButtonEvents.java
diff --git a/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O20_component_action_hooks/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java b/getting-started/bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
similarity index 90%
rename from bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
index 6dce5679..4a7c8d52 100644
--- a/bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendExistingComponent.java
@@ -9,11 +9,11 @@ public class ExtendExistingComponent extends WebTest {
     public void PurchaseRocket() {
         app().navigate().to("http://demos.bellatrix.solutions/");
 
-        Select sortDropDown = app().create().byNameEndingWith(Select.class, "orderby");
+        Select sortDropDown = app().create().byNameEnding(Select.class, "orderby");
         Anchor protonMReadMoreButton = app().create().byInnerTextContaining(Anchor.class, "Read more");
         Anchor addToCartFalcon9 = app().create().byAttributeContaining(Anchor.class, "data-product_id", "28").toBeClickable();
         Anchor viewCartButton = app().create().byClassContaining(Anchor.class, "added_to_cart wc-forward").toBeClickable();
-        TextField couponCodeTextField = app().create().byId(TextField.class, "coupon_code");
+        TextInput couponCodeTextInput = app().create().byId(TextInput.class, "coupon_code");
         Button applyCouponButton = app().create().byValueContaining(Button.class, "Apply coupon");
         NumberInput quantityBox = app().create().byClassContaining(NumberInput.class, "input-text qty text");
         Div messageAlert = app().create().byClassContaining(Div.class, "woocommerce-message");
@@ -28,7 +28,7 @@ public void PurchaseRocket() {
         addToCartFalcon9.focus();
         addToCartFalcon9.click();
         viewCartButton.click();
-        couponCodeTextField.setText("happybirthday");
+        couponCodeTextInput.setText("happybirthday");
         applyCouponButton.click();
 
         messageAlert.toBeVisible().waitToBe();
diff --git a/bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendedButton.java b/getting-started/bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendedButton.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendedButton.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O21_extend_components/ExtendedButton.java
diff --git a/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
similarity index 90%
rename from bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
index 35454951..8d782074 100644
--- a/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendExistingCommonServicesTests.java
@@ -15,14 +15,14 @@ public ExtendedApp app() {
     public void purchaseRocket() {
         app().navigate().viaJavaScript("http://demos.bellatrix.solutions/");
 
-        Select sortDropDown = app().create().byNameEndingWith(Select.class, "orderby");
+        Select sortDropDown = app().create().byNameEnding(Select.class, "orderby");
         Anchor protonMReadMoreButton =
                 app().create().byInnerTextContaining(Anchor.class, "Read more");
         Anchor addToCartFalcon9 =
                 app().create().byAttributeContaining(Anchor.class, "data-product_id", "28").toBeClickable();
         Anchor viewCartButton =
                 app().create().byClassContaining(Anchor.class, "added_to_cart wc-forward").toBeClickable();
-        TextField couponCodeTextField = app().create().byId(TextField.class, "coupon_code");
+        TextInput couponCodeTextInput = app().create().byId(TextInput.class, "coupon_code");
         Button applyCouponButton = app().create().byValueContaining(Button.class, "Apply coupon");
         NumberInput quantityBox = app().create().byClassContaining(NumberInput.class, "input-text qty text");
         Div messageAlert = app().create().byClassContaining(Div.class, "woocommerce-message");
@@ -38,7 +38,7 @@ public void purchaseRocket() {
         addToCartFalcon9.focus();
         addToCartFalcon9.click();
         viewCartButton.click();
-        couponCodeTextField.setText("happybirthday");
+        couponCodeTextInput.setText("happybirthday");
         applyCouponButton.click();
 
         messageAlert.toHaveContent().toBeVisible().waitToBe();
diff --git a/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendedApp.java b/getting-started/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendedApp.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendedApp.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendedApp.java
diff --git a/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendedNavigationService.java b/getting-started/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendedNavigationService.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendedNavigationService.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/ExtendedNavigationService.java
diff --git a/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O22_extend_common_services/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O22_extend_common_services/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/IdStartingWithFindStrategy.java b/getting-started/bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/IdStartingWithFindStrategy.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/IdStartingWithFindStrategy.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/IdStartingWithFindStrategy.java
diff --git a/bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/NewFindLocatorsTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/NewFindLocatorsTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/NewFindLocatorsTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/NewFindLocatorsTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O23_add_new_find_locators/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/NewElementWaitTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/NewElementWaitTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/NewElementWaitTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/NewElementWaitTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/ToHaveStyleWaitStrategy.java b/getting-started/bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/ToHaveStyleWaitStrategy.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/ToHaveStyleWaitStrategy.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/ToHaveStyleWaitStrategy.java
diff --git a/bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O24_add_new_component_wait_methods/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O2_control_browser/BellatrixBrowserBehaviourTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O2_control_browser/BellatrixBrowserBehaviourTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O2_control_browser/BellatrixBrowserBehaviourTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O2_control_browser/BellatrixBrowserBehaviourTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O2_control_browser/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O2_control_browser/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O2_control_browser/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O2_control_browser/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O3_navigate_to_pages/NavigateToPagesTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O3_navigate_to_pages/NavigateToPagesTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O3_navigate_to_pages/NavigateToPagesTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O3_navigate_to_pages/NavigateToPagesTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O3_navigate_to_pages/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O3_navigate_to_pages/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O3_navigate_to_pages/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O3_navigate_to_pages/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java
similarity index 96%
rename from bellatrix.web.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java
index eca79ef8..c820d964 100644
--- a/bellatrix.web.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O4_locate_components/LocateElementsTests.java
@@ -63,7 +63,7 @@ public void blogPageOpened_When_PromotionsButtonClicked() {
         //  CreateByInnerTextContaining   -->  app().create().byInnerTextContaining(Div.class, "Showing all");
         //  Searches the component by its inner text content, including all child HTML elements.
 
-        //  CreateByNameEndingWith   -->  app().create().byNameEndingWith(SearchField.class, "a");
+        //  CreateByNameEnding   -->  app().create().byNameEnding(SearchField.class, "a");
         //  Searches the component by its name containing the specified text.
 
         //  CreateByAttributesContaining   -->  app().create().byAttributeContaining(Anchor.class, "data-product_id", "31");
@@ -114,7 +114,7 @@ public void checkAllAddToCartButtons() {
         // CreateAllByInnerTextContaining   -->  app().create().allByInnerTextContaining(Div.class, "Showing all");
         // Searches the components by its inner text content, including all child HTML elements.
 
-        // CreateAllByNameEndingWith   -->  app().create().allByNameEndingWith(SearchField.class, "a");
+        // CreateAllByNameEnding   -->  app().create().allByNameEnding(SearchField.class, "a");
         // Searches the components by its name containing the specified text.
 
         // CreateAllByAttributesContaining   -->  app().create().allByAttributeContaining(Anchor.class, "data-product_id", "31");
diff --git a/bellatrix.web.getting.started/src/test/java/O4_locate_components/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O4_locate_components/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O4_locate_components/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O4_locate_components/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O5_locate_and_wait_elements/LocateAndWaitElements.java b/getting-started/bellatrix.web.getting.started/src/test/java/O5_locate_and_wait_elements/LocateAndWaitElements.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O5_locate_and_wait_elements/LocateAndWaitElements.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O5_locate_and_wait_elements/LocateAndWaitElements.java
diff --git a/bellatrix.web.getting.started/src/test/java/O5_locate_and_wait_elements/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O5_locate_and_wait_elements/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O5_locate_and_wait_elements/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O5_locate_and_wait_elements/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O6_waits_for_components/WaitComponentsTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O6_waits_for_components/WaitComponentsTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O6_waits_for_components/WaitComponentsTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O6_waits_for_components/WaitComponentsTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O6_waits_for_components/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O6_waits_for_components/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O6_waits_for_components/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O6_waits_for_components/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O7_common_services/browser_service_01/BrowserServiceTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/browser_service_01/BrowserServiceTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O7_common_services/browser_service_01/BrowserServiceTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/browser_service_01/BrowserServiceTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O7_common_services/browser_service_01/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/browser_service_01/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O7_common_services/browser_service_01/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/browser_service_01/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O7_common_services/cookies_service_03/CookiesServiceTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/cookies_service_03/CookiesServiceTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O7_common_services/cookies_service_03/CookiesServiceTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/cookies_service_03/CookiesServiceTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O7_common_services/cookies_service_03/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/cookies_service_03/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O7_common_services/cookies_service_03/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/cookies_service_03/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java
similarity index 85%
rename from bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java
index f70cdf2c..f1b5777c 100644
--- a/bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/DialogServiceTests.java
@@ -1,11 +1,14 @@
 package O7_common_services.dialog_service_02;
 
 import org.junit.jupiter.api.Test;
+import org.openqa.selenium.Alert;
 import org.testng.Assert;
 import solutions.bellatrix.web.components.Button;
 import solutions.bellatrix.web.infrastructure.junit.WebTest;
 import solutions.bellatrix.web.services.DialogButton;
 
+import java.util.function.Consumer;
+
 
 public class DialogServiceTests extends WebTest {
     @Test
@@ -16,7 +19,7 @@ public void happyBirthdayCouponDisplayed_When_ClickOnCouponButton() {
         var couponButton = app().create().byId(Button.class, "couponBtn");
         couponButton.click();
 
-       app().dialogs().handle(a -> Assert.assertEquals(a.getText(), "Try the coupon- happybirthday"), DialogButton.OK);
+       app().dialogs().handle((Consumer<Alert>)a -> Assert.assertEquals(a.getText(), "Try the coupon- happybirthday"), DialogButton.OK);
     }
 
     @Test
diff --git a/bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/dialog_service_02/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O7_common_services/java_script_service_04/JavaScriptServiceTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/java_script_service_04/JavaScriptServiceTests.java
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O7_common_services/java_script_service_04/JavaScriptServiceTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/java_script_service_04/JavaScriptServiceTests.java
diff --git a/bellatrix.web.getting.started/src/test/java/O7_common_services/java_script_service_04/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/java_script_service_04/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O7_common_services/java_script_service_04/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O7_common_services/java_script_service_04/todo.txt
diff --git a/bellatrix.web.getting.started/src/test/java/O8_web_components/WebComponentsTests.java b/getting-started/bellatrix.web.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
similarity index 90%
rename from bellatrix.web.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
index a7435df4..1670e65d 100644
--- a/bellatrix.web.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O8_web_components/WebComponentsTests.java
@@ -10,7 +10,7 @@ public class WebComponentsTests extends WebTest {
     public void purchaseRocket() {
         app().navigate().to("http://demos.bellatrix.solutions/");
 
-        Select sortDropDown = app().create().byNameEndingWith(Select.class, "orderby");
+        Select sortDropDown = app().create().byNameEnding(Select.class, "orderby");
         // Create methods accept a generic parameter the type of the web control. Then only the methods for this specific
         // control are accessible. Here we tell BELLATRIX to find your component by name attribute ending with ‘orderby’.
         // <select name="orderby" class="orderby">
@@ -38,9 +38,9 @@ public void purchaseRocket() {
         // Find the anchor by class ‘added_to_cart wc-forward’ and wait for the component again to be clickable.
         viewCartButton.click();
 
-        TextField couponCodeTextField = app().create().byId(TextField.class, "coupon_code");
+        TextInput couponCodeTextInput = app().create().byId(TextInput.class, "coupon_code");
         //Find a regular text input component by id = ‘coupon_code’.
-        couponCodeTextField.setText("happybirthday");
+        couponCodeTextInput.setText("happybirthday");
 
         Button applyCouponButton = app().create().byValueContaining(Button.class, "Apply coupon");
         applyCouponButton.click();
@@ -85,35 +85,35 @@ public void purchaseRocket() {
         // visible on the video recordings. Then the text is set.
         orderCommentsTextArea.setText("Please send the rocket to my door step!");
 
-        TextField billingFirstName = app().create().byId(TextField.class, "billing_first_name");
+        TextInput billingFirstName = app().create().byId(TextInput.class, "billing_first_name");
         billingFirstName.setText("In");
 
-        TextField billingLastName = app().create().byId(TextField.class, "billing_last_name");
+        TextInput billingLastName = app().create().byId(TextInput.class, "billing_last_name");
         billingLastName.setText("Deepthought");
 
-        TextField billingCompany = app().create().byId(TextField.class, "billing_company");
+        TextInput billingCompany = app().create().byId(TextInput.class, "billing_company");
         billingCompany.setText("Automate The Planet Ltd.");
 
         Select billingCountry = app().create().byId(Select.class, "billing_country");
         billingCountry.selectByText("Bulgaria");
 
-        TextField billingAddress1 = app().create().byId(TextField.class, "billing_address_1");
+        TextInput billingAddress1 = app().create().byId(TextInput.class, "billing_address_1");
 
         Assertions.assertEquals(billingAddress1.getPlaceholder(), "House number and street name");
         // Through the Placeholder, you can get the default text of the control.
         billingAddress1.setText("bul. Yerusalim 5");
 
-        TextField billingAddress2 = app().create().byId(TextField.class, "billing_address_2");
+        TextInput billingAddress2 = app().create().byId(TextInput.class, "billing_address_2");
         billingAddress2.setText("bul. Yerusalim 6");
 
-        TextField billingCity = app().create().byId(TextField.class, "billing_city");
+        TextInput billingCity = app().create().byId(TextInput.class, "billing_city");
         billingCity.setText("Sofia");
 
         Select billingState =
                 app().create().byId(Select.class, "billing_state").toBeVisible().toBeClickable();
         billingState.selectByText("Sofia-Grad");
 
-        TextField billingZip = app().create().byId(TextField.class, "billing_postcode");
+        TextInput billingZip = app().create().byId(TextInput.class, "billing_postcode");
         billingZip.setText("1000");
 
         PhoneInput billingPhone = app().create().byId(PhoneInput.class, "billing_phone");
@@ -121,7 +121,7 @@ public void purchaseRocket() {
         billingPhone.setPhone("+00359894646464");
         // Create the special text field control Phone it contains some additional properties unique for this web component.
 
-        EmailField billingEmail = app().create().byId(EmailField.class, "billing_email");
+        EmailInput billingEmail = app().create().byId(EmailInput.class, "billing_email");
 
         billingEmail.setEmail("info@bellatrix.solutions");
         // Here we create the special text field control Email it contains some additional properties unique for this web
@@ -157,7 +157,7 @@ public void purchaseRocket() {
     // Span	        getText, getHtml
     // TextArea	    getText, setText, isDisabled, isAutoComplete, isSpellCheck, isReadonly, isRequired, getPlaceholder,
     //              getMaxLength, getMinLength, getRows, getCols, getWrap
-    // TextField	    getText, setText isDisabled, isAutoComplete, isReadonly, isRequired, getPlaceholder, getMaxLength, getMinLength
+    // TextInput	    getText, setText isDisabled, isAutoComplete, isReadonly, isRequired, getPlaceholder, getMaxLength, getMinLength
 
     // HTML5 Components:
     // Component	Available properties
@@ -165,7 +165,7 @@ public void purchaseRocket() {
     // ColorInput	getColor, setColor, isAutoComplete, isDisabled, isRequired, getList, getValue
     // DateInput	getDate, setDate, isAutoComplete, isDisabled, isReadonly, isRequired, getMin, getMax, getStep, getValue
     // DateTimeInput getTime, setTime, isAutoComplete, isDisabled, isReadonly, isRequired, getMin, getMax, getStep, getValue
-    // EmailField	getEmail, setEmail, isAutoComplete, isDisabled, isReadonly, isRequired, getMinLength, getMaxLength,
+    // EmailInput	getEmail, setEmail, isAutoComplete, isDisabled, isReadonly, isRequired, getMinLength, getMaxLength,
     //              getPlaceholder, getSizeAttribute, getValue
     // MonthInput	getMonth, setMonth, isDisabled, isAutoComplete, isReadonly, isRequired, getMax, getMin, getStep, getValue
     // NumberInput	getNumber, setNumber, isDisabled, isAutoComplete, isReadonly, isRequired, getPlaceholder, getMax,
diff --git a/bellatrix.web.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java b/getting-started/bellatrix.web.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
similarity index 92%
rename from bellatrix.web.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
rename to getting-started/bellatrix.web.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
index 71745957..d72ba886 100644
--- a/bellatrix.web.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
+++ b/getting-started/bellatrix.web.getting.started/src/test/java/O9_normal_assertions/NormalAssertions.java
@@ -13,9 +13,9 @@ public void assertCartPageFields() {
 
         app().navigate().to("http://demos.bellatrix.solutions/cart/");
 
-        TextField couponCodeTextField = app().create().byId(TextField.class, "coupon_code");
+        TextInput couponCodeTextInput = app().create().byId(TextInput.class, "coupon_code");
 
-        Assert.assertEquals(couponCodeTextField.getPlaceholder(), "Coupon code");
+        Assert.assertEquals(couponCodeTextInput.getPlaceholder(), "Coupon code");
 
         Button applyCouponButton = app().create().byValueContaining(Button.class, "Apply coupon");
 
diff --git a/bellatrix.web.getting.started/src/test/java/O9_normal_assertions/todo.txt b/getting-started/bellatrix.web.getting.started/src/test/java/O9_normal_assertions/todo.txt
similarity index 100%
rename from bellatrix.web.getting.started/src/test/java/O9_normal_assertions/todo.txt
rename to getting-started/bellatrix.web.getting.started/src/test/java/O9_normal_assertions/todo.txt
diff --git a/pom.xml b/pom.xml
index 74222f9b..5f098750 100644
--- a/pom.xml
+++ b/pom.xml
@@ -19,11 +19,15 @@
         <module>bellatrix.android</module>
         <module>bellatrix.ios</module>
         <module>bellatrix.api</module>
-        <module>bellatrix.web.tests</module>
-        <module>bellatrix.desktop.tests</module>
-        <module>bellatrix.android.tests</module>
-        <module>bellatrix.ios.tests</module>
-        <module>bellatrix.playwright.getting.started</module>
+        <!-- Framework Tests -->
+        <module>framework-tests/bellatrix.web.tests</module>
+        <module>framework-tests/bellatrix.desktop.tests</module>
+        <module>framework-tests/bellatrix.android.tests</module>
+        <module>framework-tests/bellatrix.ios.tests</module>
+        <module>framework-tests/bellatrix.playwright.tests</module>
+        <!-- Getting Started -->
+        <module>getting-started/bellatrix.web.getting.started</module>
+        <module>getting-started/bellatrix.playwright.getting.started</module>
     </modules>
 
     <properties>