@apache-royale/royale-js/royale-asjs/frameworks/projects/Jewel/src/main/resources/defaults.css

Apache Royale (formerly FlexJS)

/**
 * *  Licensed to the Apache Software Foundation (ASF) under one or more
 * *  contributor license agreements.  See the NOTICE file distributed with
 * *  this work for additional information regarding copyright ownership.
 * *  The ASF licenses this file to You 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.
 * */
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

::-moz-focus-inner, ::-moz-focus-outer {
  border: 0;
}

input:focus, textarea:focus, select:focus, div:focus, label:focus, nav:focus, li:focus, a:focus {
  outline: none;
}

select::-ms-expand {
  display: none;
}

button::-moz-focus-inner {
  padding: 0;
}

button, input, textarea {
  font-size: 100%;
}

.cursor-pointer {
  cursor: pointer !important;
}

j|View {
  IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.ViewLayout");
}

.responsive-view {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

j|Group {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
  IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
}

.jewel.group {
  overflow: visible;
}

j|HGroup {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
}

j|VGroup {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
}

j|Grid {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.GridLayout");
}

j|ScrollableGrid {
  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
}

j|GridCell {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.GridCellLayout");
}

j|Container {
  IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
}

j|HContainer {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
}

j|VContainer {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
}

j|Image {
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ImageModel");
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ImageView");
}

j|BinaryImage {
  IBeadModel: ClassReference("org.apache.royale.html.beads.models.BinaryImageModel");
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ImageView");
  IBinaryImageLoader: ClassReference("org.apache.royale.html.beads.BinaryImageLoader");
}

j|DataContainer {
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DataProviderModel");
  IBeadView: ClassReference("org.apache.royale.html.beads.DataContainerView");
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
  IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
  IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
  IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.StringItemRenderer");
  IItemRendererInitializer: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataContainerItemRendererInitializer");
  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
}

j|Validator {
  ILocalizedValuesImpl: ClassReference("org.apache.royale.core.SimpleLocalizedValuesImpl");
}

j|Form {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.FormLayout");
}

@media -royale-swf {
  j|Container {
    IContentView: ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea");
  }
}
hr {
  border: 0;
  height: 1px;
}

.responsiveSizeMonitor {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 250px;
}
.responsiveSizeMonitor strong {
  color: yellow;
}

.jewel.alert {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 350px;
  min-height: 200px;
}
.jewel.alert .jewel.titlebar {
  height: 50px;
}
.jewel.alert .content {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: 100%;
  overflow-y: auto;
}
.jewel.alert .content .jewel.label {
  white-space: normal;
}
.jewel.alert .jewel.controlbar {
  bottom: 0;
  height: 50px;
}
@media all and (-ms-high-contrast: none) {
  .jewel.alert {
    display: table;
  }
}
@media (min-width: 768px) {
  .jewel.alert {
    min-width: 450px;
  }
}
j|Alert {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.AlertModel");
  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
}

.jewel.badge {
  z-index: 2;
  position: absolute;
  top: -1em;
  right: -1em;
  text-transform: initial;
  padding: 0.5em;
  min-width: 2.1em;
}
.jewel.badge.overlap {
  top: 0em;
  right: 0em;
}
.jewel.badge.subindex {
  top: auto;
  bottom: -1em;
}
.jewel.badge.subindex.overlap {
  top: auto;
  bottom: 0em;
}
.jewel.badge.preindex {
  left: -1em;
  right: auto;
}
.jewel.badge.preindex.overlap {
  left: 0em;
  right: auto;
}

.jewel.button {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: hidden;
  outline: none;
  white-space: nowrap;
  line-height: normal !important;
  text-align: center;
  text-decoration: none;
}
.jewel.button[disabled] {
  cursor: default;
}
.jewel.button.multiline {
  white-space: pre-wrap;
}
.jewel.button .fonticon {
  cursor: inherit;
}
.jewel.button.viewport {
  overflow: visible;
}

@media -royale-swf {
  j|Button {
    IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
    IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ButtonView");
  }
}
.jewel.buttonbar .jewel.button, .jewel.buttonbar .jewel.togglebutton {
  border-radius: 0;
}
.jewel.buttonbar .jewel.button.first, .jewel.buttonbar .jewel.togglebutton.first {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.jewel.buttonbar .jewel.button.last, .jewel.buttonbar .jewel.togglebutton.last {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

j|ButtonBar {
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ButtonBarModel");
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ButtonBarView");
  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.ButtonBarLayout");
  IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.SelectionDataItemRendererFactoryForCollectionView");
  IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
  IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ButtonBarItemRenderer");
  IItemRendererInitializer: ClassReference("org.apache.royale.jewel.beads.itemRenderers.ButtonBarItemRendererInitializer");
}

@media -royale-swf {
  j|ButtonBar {
    IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup");
  }
}
j|IconButtonBar {
  IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.IconButtonBarItemRenderer");
}

.jewel.buttonbar.toggle-on-click .jewel.togglebutton.selected {
  pointer-events: none;
}

j|ToggleButtonBar {
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ToggleButtonBarView");
  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ToggleButtonBarSelectionMouseController");
  IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ToggleButtonBarItemRenderer");
}

.jewel.card {
  min-width: 120px;
  min-height: 52px;
  position: relative;
}
.jewel.card .card-header {
  width: 100%;
}
.jewel.card .card-header .card-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-decoration: inherit;
  text-overflow: ellipsis;
  text-transform: inherit;
  z-index: 1;
}
.jewel.card .card-expanded-content {
  width: 100%;
}
.jewel.card .card-primary-content {
  width: 100%;
  min-height: 152px;
  position: relative;
  outline: none;
  color: inherit;
  text-decoration: none;
  flex: 1 1 auto;
}
.jewel.card .card-actions {
  width: 100%;
  position: relative;
  outline: none;
  color: inherit;
  text-decoration: none;
}

.jewel.checkbox {
  display: inline-flex;
  position: relative;
  margin: 0;
  padding: 0;
  height: auto;
}
.jewel.checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: inline-flex;
  margin: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  opacity: 0;
}
.jewel.checkbox input + span::before {
  content: " ";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 22px;
  height: 22px;
}
.jewel.checkbox input + span::after {
  content: " ";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 0px;
  top: 0px;
  opacity: 0;
}
.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after, .jewel.checkbox input:indeterminate + span::after, .jewel.checkbox input:indeterminate:active + span::after {
  opacity: 1;
}
.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before, .jewel.checkbox input:indeterminate:focus + span::before, .jewel.checkbox input:indeterminate:active:focus + span::before {
  outline: none;
}
.jewel.checkbox input[disabled] + span {
  cursor: unset;
}
.jewel.checkbox span {
  cursor: pointer;
  margin: auto;
  width: inherit;
}

.jewel.switch {
  display: inline-flex;
  position: relative;
  height: auto;
}
.jewel.switch input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: inline-flex;
  opacity: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  padding: 0;
}
.jewel.switch input[disabled] + span {
  cursor: unset;
}
.jewel.switch .switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  height: 24px;
}
.jewel.switch .switch::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
}
.jewel.switch .label {
  cursor: pointer;
  margin: auto;
  width: inherit;
}

.jewel.combobox {
  display: inline-flex;
}
.jewel.combobox .jewel.textinput {
  display: block;
}
.jewel.combobox .jewel.button::before {
  margin: 0;
  padding: 0;
}
.jewel.combobox .jewel.button::after {
  content: " ";
  position: absolute;
}

j|ComboBox {
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ComboBoxModel");
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ComboBoxView");
  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ComboBoxController");
  IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.combobox.ComboBoxPopUp");
}

.combobox-popup {
  position: fixed;
  pointer-events: none;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
  z-index: 60;
  color: rgba(0, 0, 0, 0.8);
}
.combobox-popup::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.65);
  will-change: opacity;
  transition: opacity 0.4s 0ms;
}
.combobox-popup .jewel.list {
  position: relative;
  transform: translate(-50%, 100%);
  transition: none;
  will-change: transform, opacity;
  bottom: auto;
  top: calc(100% - 10px);
  left: 50%;
  box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
  opacity: 0;
}
.combobox-popup.open {
  pointer-events: auto;
}
.combobox-popup.open::before {
  opacity: 1;
}
.combobox-popup.open .jewel.list {
  transform: translate(-50%, -100%);
  transition: transform 0.3s 0ms, opacity 0.3s 0ms;
  opacity: 1;
}

@media (max-width: 767px) {
  .combobox-popup .jewel.list {
    width: 98% !important;
    max-height: 240px !important;
  }
  .combobox-popup .jewel.list .jewel.item {
    min-height: 48px !important;
  }
}
@media (min-width: 767px) {
  .combobox-popup::before {
    background-color: rgba(0, 0, 0, 0);
  }
  .combobox-popup .jewel.list {
    transform: none;
    transition: none;
    box-shadow: none !important;
  }
  .combobox-popup .jewel.list .jewel.item {
    overflow: hidden;
    transition: height 200ms ease-in;
  }
  .combobox-popup.open .jewel.list {
    transform: none;
    top: auto;
    left: auto;
  }
}
j|ComboBoxPopUp {
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ComboBoxPopUpView");
}

j|VirtualComboBox {
  IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.combobox.VirtualComboBoxPopUp");
}

j|VirtualComboBoxPopUp {
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.VirtualComboBoxPopUpView");
}

.jewel.datagrid {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
}
.jewel.datagrid .jewel.buttonbar.header {
  width: 100%;
  flex: 0 0 auto;
}
.jewel.datagrid .jewel.buttonbar.header .jewel.button {
  width: 100%;
}
.jewel.datagrid .listarea {
  width: 100%;
  flex: 1 1 auto;
}
.jewel.datagrid .jewel.list.column {
  padding-left: 0;
  padding-right: 0;
  position: relative;
  min-height: 100%;
}
.jewel.datagrid .jewel.list.column .jewel.item.datagrid {
  width: 100%;
}
.jewel.datagrid span:empty:before {
  content: "\200b";
}
.jewel.datagrid .first.jewel.list, .jewel.datagrid .middle.jewel.list {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.jewel.datagrid .first.jewel.list::-webkit-scrollbar, .jewel.datagrid .middle.jewel.list::-webkit-scrollbar {
  display: none;
}

j|DataGrid {
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DataGridView");
  IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.DataGridLayout");
  headerClass: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridButtonBar");
  headerLayoutClass: ClassReference("org.apache.royale.jewel.beads.layouts.DataGridColumnLayout");
  listAreaClass: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridListArea");
  columnClass: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnList");
}

j|DataGridListArea {
  IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
}

j|DataGridColumnList {
  IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
  IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DataGridItemRenderer");
  IItemRendererInitializer: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
  ISelectableItemRenderer: ClassReference("org.apache.royale.jewel.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
}

j|DataGridButtonBar {
  IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DatagridHeaderRenderer");
}

j|VirtualDataGrid {
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.VirtualDataGridView");
  columnClass: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.VirtualDataGridColumnList");
}

j|VirtualDataGridListArea {
  IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
  listAreaClass: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.VirtualDataGrid");
  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
}

j|VirtualDataGridColumnList {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VirtualDataGridListAreaLayout");
  IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
  IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DataGridItemRenderer");
  IItemRendererInitializer: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataGridColumnListItemRendererInitializer");
  ISelectableItemRenderer: ClassReference("org.apache.royale.jewel.beads.itemRenderers.ClassSelectorListSelectableItemRendererBead");
  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
}

.jewel.datechooser .jewel.table {
  min-width: 324px;
  min-height: 364px;
}
.jewel.datechooser .jewel.table .jewel.tablecell {
  height: auto;
}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow > .layout.horizontal {
  float: right;
}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .viewSelector::after {
  content: " ";
}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .previousButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextButton {
  min-width: 40px;
  min-height: 40px;
}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .previousButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextButton::after {
  content: " ";
  position: absolute;
}
j|DateChooser {
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateChooserView");
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController");
}

.jewel.datefield {
  display: inline-flex;
}
.jewel.datefield .jewel.textinput input {
  width: 9.2em;
}
.jewel.datefield .jewel.button::before {
  margin: 0;
  padding: 0;
  line-height: 22px;
}
.jewel.datefield .jewel.button::after {
  content: " ";
  position: absolute;
  width: 22px;
  height: 22px;
  left: calc(50% - 11px);
  top: calc(50% - 11px);
}

.datechooser-popup {
  position: fixed;
  pointer-events: none;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
  z-index: 60;
  color: rgba(0, 0, 0, 0.8);
}
.datechooser-popup::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.65);
  will-change: opacity;
  transition: opacity 0.4s 0ms;
}
.datechooser-popup .jewel.table {
  position: relative;
  transform: translate(-50%, 100%);
  transition: none;
  will-change: transform, opacity;
  bottom: auto;
  top: calc(100% - 10px);
  left: 50%;
  touch-action: none;
  box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
  opacity: 0;
}
.datechooser-popup.open {
  pointer-events: auto;
}
.datechooser-popup.open::before {
  opacity: 1;
}
.datechooser-popup.open .jewel.table {
  transform: translate(-50%, -100%);
  transition: transform 0.4s 0ms, opacity 0.4s 0ms;
  opacity: 1;
}

@media (max-width: 768px) {
  .datechooser-popup .jewel.table {
    width: calc(100% - 20px);
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .datechooser-popup .jewel.table {
    width: calc(100% - 300px);
  }
}
@media (min-width: 992px) {
  .datechooser-popup::before {
    background-color: rgba(0, 0, 0, 0);
  }
  .datechooser-popup .jewel.table {
    transform: none;
    transition: none;
    box-shadow: none !important;
  }
  .datechooser-popup .jewel.table .jewel.item {
    height: 0;
    overflow: hidden;
    transition: height 200ms ease-in;
  }
  .datechooser-popup.open .jewel.table {
    transform: none;
    top: auto;
    left: auto;
  }
  .datechooser-popup.open .jewel.table .jewel.item {
    height: 34px;
  }
}
j|DateField {
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView");
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateFieldMouseController");
  IFormatter: ClassReference("org.apache.royale.html.accessories.StringDateFormatter");
  IPopUp: ClassReference("org.apache.royale.jewel.DateChooser");
}

.jewel.divider {
  height: 0;
  margin: 0;
}

j|Divider {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}

.jewel.drawer.float {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
  z-index: 100;
}
.jewel.drawer.float::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0;
}
.jewel.drawer.float .drawermain {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 0;
  right: initial;
  height: 100%;
}
.jewel.drawer.float.open {
  pointer-events: auto;
}
.jewel.drawer.float.open::before {
  opacity: 1;
}
.jewel.drawer.fixed {
  width: 0;
}
.jewel.drawer.fixed .drawermain {
  display: inline-flex;
  flex-direction: column;
  left: 0;
  right: auto;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}
.jewel.drawer.fixed.open {
  pointer-events: auto;
}
.jewel.drawer.fixed.open .drawermain {
  transform: none;
}

@media (min-width: 768px) {
  .jewel.drawer.float .drawermain {
    width: calc(100% - 60px);
    max-width: 310px;
  }
}
.jewel.drawerheader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.jewel.drawerheader div {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: flex-end;
}

.jewel.drawercontent {
  flex: 1 100 auto;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.jewel.drawerfooter {
  display: flex;
  position: relative;
  width: 100%;
  height: 66px;
}

j|DrawerBase {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}

j|Drawer {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}

j|DrawerHeader {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}

j|DrawerContent {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}

.jewel.dropdownlist {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  width: 200px;
  margin: 0;
  padding: 0.68em 2.38em 0.68em 1.12em;
  cursor: pointer;
  display: inline-flex;
  line-height: normal !important;
  outline: none;
}

j|DropDownList {
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DropDownListView");
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DropDownListModel");
  IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DropDownListItemRendererFactoryForCollectionView");
  IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
  IItemRendererInitializer: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DropDownListItemRendererInitializer");
  IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DropDownListItemRenderer");
  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DropDownListController");
}

@media -royale-swf {
  j|DropDownList {
    IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel");
    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DropDownListController");
    IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.dropdownlist.DropDownListList");
  }
}
.jewel.footerbar {
  display: inline-flex;
  flex: 1 1 auto;
}
.jewel.footerbar .footerBarAppHeader {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  z-index: 20;
  position: fixed;
  bottom: 0px;
}
.jewel.footerbar .footerBarAppHeader.fixed {
  transition: box-shadow 200ms linear;
}
.jewel.footerbar .jewel.barrow {
  display: flex;
  position: relative;
  width: 100%;
  height: 64px;
}
.jewel.footerbar .jewel.barsection {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  z-index: 1;
  order: -1;
}
.jewel.footerbar .jewel.barsection button {
  will-change: transform, opacity;
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  outline: none;
  text-decoration: none;
  opacity: 1;
}
.jewel.footerbar .jewel.barsection button .fonticon {
  margin-left: 0px;
  margin-right: 0px;
}
.jewel.footerbar .jewel.bartitle {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  flex: 1 1 auto;
  overflow: hidden;
  z-index: 1;
  line-height: 2rem;
  letter-spacing: 0.0125em;
  text-decoration: inherit;
  text-transform: inherit;
  text-overflow: ellipsis;
}

j|FooterBar {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}

.jewel.formheading .jewel.label.headingLabel {
  white-space: initial;
  flex: 1 1 auto;
}

j|FormHeading {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.FormHeadingView");
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
}

j|FormItem {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.FormItemLayout");
  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.FormItemView");
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.FormItemModel");
  IFormItemContentArea: ClassReference("org.apache.royale.jewel.Group");
  IFormItemLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
}

.fonticon {
  cursor: default;
}
.fonticon.size-18 {
  font-size: 18px;
}
.fonticon.size-24 {
  font-size: 24px;
}
.fonticon.size-36 {
  font-size: 36px;
}
.fonticon.size-48 {
  font-size: 48px;
}

.jewel.imagebutton {
  border-style: none;
  padding: 0px;
}
j|ImageButton {
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ImageModel");
}

.jewel.item, .jewel.navigationlink, .jewel.tabbarbutton {
  text-decoration: none;
  letter-spacing: 0;
  line-height: normal !important;
  overflow: hidden;
  cursor: auto;
  flex-shrink: 0;
  position: relative;
  list-style: none;
}
.jewel.item.selectable, .jewel.item.hoverable, .jewel.navigationlink.selectable, .jewel.navigationlink.hoverable, .jewel.tabbarbutton.selectable, .jewel.tabbarbutton.hoverable {
  cursor: pointer;
}
.jewel.item .fonticon, .jewel.navigationlink .fonticon, .jewel.tabbarbutton .fonticon {
  cursor: inherit;
}

j|ListItemRenderer {
  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
  IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
}

.jewel.label {
  -webkit-font-smoothing: antialiased;
  cursor: default;
  white-space: nowrap;
}
.jewel.label.multiline {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.jewel.label.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}

j|Label {
  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
}

.viewport {
  overflow: visible;
}
.viewport.clipped {
  overflow: hidden;
}
.viewport.scroll {
  overflow: auto;
}

.layout.basic {
  position: relative;
}
.layout.basic > * {
  position: absolute !important;
}

.layout {
  display: flex;
}
.layout.horizontal {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.layout.horizontal > * {
  flex: 0 1 auto;
}
.layout.horizontal.flow {
  flex-wrap: wrap;
  max-width: 100%;
}
.layout.horizontal.centered {
  justify-content: center;
  align-items: center;
  align-content: center;
}
.layout.horizontal.centered > * {
  flex: 0 0 auto !important;
}
.layout.horizontal.tile {
  flex-wrap: wrap;
}
.layout.horizontal.formitem {
  width: 100%;
  align-items: flex-start;
}
.layout.horizontal.gap-1x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-1x3px > * {
  margin-left: 3px;
}
.layout.horizontal.gap-2x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-2x3px > * {
  margin-left: 6px;
}
.layout.horizontal.gap-3x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-3x3px > * {
  margin-left: 9px;
}
.layout.horizontal.gap-4x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-4x3px > * {
  margin-left: 12px;
}
.layout.horizontal.gap-5x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-5x3px > * {
  margin-left: 15px;
}
.layout.horizontal.gap-6x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-6x3px > * {
  margin-left: 18px;
}
.layout.horizontal.gap-7x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-7x3px > * {
  margin-left: 21px;
}
.layout.horizontal.gap-8x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-8x3px > * {
  margin-left: 24px;
}
.layout.horizontal.gap-9x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-9x3px > * {
  margin-left: 27px;
}
.layout.horizontal.gap-10x3px > *:first-child {
  margin-left: 0px;
}
.layout.horizontal.gap-10x3px > * {
  margin-left: 30px;
}
.layout.horizontal.itemsReverse.gap-1x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-1x3px > * {
  margin-left: 3px;
}
.layout.horizontal.itemsReverse.gap-2x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-2x3px > * {
  margin-left: 6px;
}
.layout.horizontal.itemsReverse.gap-3x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-3x3px > * {
  margin-left: 9px;
}
.layout.horizontal.itemsReverse.gap-4x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-4x3px > * {
  margin-left: 12px;
}
.layout.horizontal.itemsReverse.gap-5x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-5x3px > * {
  margin-left: 15px;
}
.layout.horizontal.itemsReverse.gap-6x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-6x3px > * {
  margin-left: 18px;
}
.layout.horizontal.itemsReverse.gap-7x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-7x3px > * {
  margin-left: 21px;
}
.layout.horizontal.itemsReverse.gap-8x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-8x3px > * {
  margin-left: 24px;
}
.layout.horizontal.itemsReverse.gap-9x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-9x3px > * {
  margin-left: 27px;
}
.layout.horizontal.itemsReverse.gap-10x3px > *:last-child {
  margin-left: 0px;
}
.layout.horizontal.itemsReverse.gap-10x3px > * {
  margin-left: 30px;
}
.layout.horizontal.sameWidths > * {
  flex: 1 0 0;
}
.layout.horizontal.pixelWidths > * {
  flex: none;
}
.layout.horizontal.proportionalWidths > * {
  flex: 1 0;
}
.layout.horizontal.percentWidths > * {
  flex: 1 0 auto;
}
.layout.horizontal.naturalWidths > * {
  flex: none;
}
.layout.vertical {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.layout.vertical > * {
  flex: 0 1 auto;
}
.layout.vertical.flow {
  flex-wrap: wrap;
}
.layout.vertical.centered {
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  height: 100%;
}
.layout.vertical.centered > * {
  flex: 0 0 auto !important;
}
.layout.vertical.tile {
  flex-wrap: wrap;
}
.layout.vertical.form {
  width: 100%;
}
.layout.vertical.gap-1x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-1x3px > * {
  margin-top: 3px;
}
.layout.vertical.gap-2x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-2x3px > * {
  margin-top: 6px;
}
.layout.vertical.gap-3x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-3x3px > * {
  margin-top: 9px;
}
.layout.vertical.gap-4x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-4x3px > * {
  margin-top: 12px;
}
.layout.vertical.gap-5x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-5x3px > * {
  margin-top: 15px;
}
.layout.vertical.gap-6x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-6x3px > * {
  margin-top: 18px;
}
.layout.vertical.gap-7x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-7x3px > * {
  margin-top: 21px;
}
.layout.vertical.gap-8x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-8x3px > * {
  margin-top: 24px;
}
.layout.vertical.gap-9x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-9x3px > * {
  margin-top: 27px;
}
.layout.vertical.gap-10x3px > *:first-child {
  margin-top: 0px;
}
.layout.vertical.gap-10x3px > * {
  margin-top: 30px;
}
.layout.vertical.itemsReverse.gap-1x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-1x3px > * {
  margin-top: 3px;
}
.layout.vertical.itemsReverse.gap-2x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-2x3px > * {
  margin-top: 6px;
}
.layout.vertical.itemsReverse.gap-3x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-3x3px > * {
  margin-top: 9px;
}
.layout.vertical.itemsReverse.gap-4x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-4x3px > * {
  margin-top: 12px;
}
.layout.vertical.itemsReverse.gap-5x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-5x3px > * {
  margin-top: 15px;
}
.layout.vertical.itemsReverse.gap-6x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-6x3px > * {
  margin-top: 18px;
}
.layout.vertical.itemsReverse.gap-7x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-7x3px > * {
  margin-top: 21px;
}
.layout.vertical.itemsReverse.gap-8x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-8x3px > * {
  margin-top: 24px;
}
.layout.vertical.itemsReverse.gap-9x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-9x3px > * {
  margin-top: 27px;
}
.layout.vertical.itemsReverse.gap-10x3px > *:-child {
  margin-top: 0px;
}
.layout.vertical.itemsReverse.gap-10x3px > * {
  margin-top: 30px;
}
.layout.grid {
  flex-flow: row wrap;
  width: 100%;
}
.layout.grid > * {
  flex: 1 1 auto;
  max-width: 100%;
  width: 100%;
}
@media (min-width: 0px) {
  .layout.grid .phone-col-1-1 {
    width: 100%;
  }
  .layout.grid .phone-col-1-2 {
    width: 50%;
  }
  .layout.grid .phone-col-2-2 {
    width: 100%;
  }
  .layout.grid .phone-col-1-3 {
    width: 33.3333333333%;
  }
  .layout.grid .phone-col-2-3 {
    width: 66.6666666667%;
  }
  .layout.grid .phone-col-3-3 {
    width: 100%;
  }
  .layout.grid .phone-col-1-4 {
    width: 25%;
  }
  .layout.grid .phone-col-2-4 {
    width: 50%;
  }
  .layout.grid .phone-col-3-4 {
    width: 75%;
  }
  .layout.grid .phone-col-4-4 {
    width: 100%;
  }
  .layout.grid .phone-col-1-5 {
    width: 20%;
  }
  .layout.grid .phone-col-2-5 {
    width: 40%;
  }
  .layout.grid .phone-col-3-5 {
    width: 60%;
  }
  .layout.grid .phone-col-4-5 {
    width: 80%;
  }
  .layout.grid .phone-col-5-5 {
    width: 100%;
  }
  .layout.grid .phone-col-1-6 {
    width: 16.6666666667%;
  }
  .layout.grid .phone-col-2-6 {
    width: 33.3333333333%;
  }
  .layout.grid .phone-col-3-6 {
    width: 50%;
  }
  .layout.grid .phone-col-4-6 {
    width: 66.6666666667%;
  }
  .layout.grid .phone-col-5-6 {
    width: 83.3333333333%;
  }
  .layout.grid .phone-col-6-6 {
    width: 100%;
  }
  .layout.grid .phone-col-1-7 {
    width: 14.2857142857%;
  }
  .layout.grid .phone-col-2-7 {
    width: 28.5714285714%;
  }
  .layout.grid .phone-col-3-7 {
    width: 42.8571428571%;
  }
  .layout.grid .phone-col-4-7 {
    width: 57.1428571429%;
  }
  .layout.grid .phone-col-5-7 {
    width: 71.4285714286%;
  }
  .layout.grid .phone-col-6-7 {
    width: 85.7142857143%;
  }
  .layout.grid .phone-col-7-7 {
    width: 100%;
  }
  .layout.grid .phone-col-1-8 {
    width: 12.5%;
  }
  .layout.grid .phone-col-2-8 {
    width: 25%;
  }
  .layout.grid .phone-col-3-8 {
    width: 37.5%;
  }
  .layout.grid .phone-col-4-8 {
    width: 50%;
  }
  .layout.grid .phone-col-5-8 {
    width: 62.5%;
  }
  .layout.grid .phone-col-6-8 {
    width: 75%;
  }
  .layout.grid .phone-col-7-8 {
    width: 87.5%;
  }
  .layout.grid .phone-col-8-8 {
    width: 100%;
  }
  .layout.grid .phone-col-1-9 {
    width: 11.1111111111%;
  }
  .layout.grid .phone-col-2-9 {
    width: 22.2222222222%;
  }
  .layout.grid .phone-col-3-9 {
    width: 33.3333333333%;
  }
  .layout.grid .phone-col-4-9 {
    width: 44.4444444444%;
  }
  .layout.grid .phone-col-5-9 {
    width: 55.5555555556%;
  }
  .layout.grid .phone-col-6-9 {
    width: 66.6666666667%;
  }
  .layout.grid .phone-col-7-9 {
    width: 77.7777777778%;
  }
  .layout.grid .phone-col-8-9 {
    width: 88.8888888889%;
  }
  .layout.grid .phone-col-9-9 {
    width: 100%;
  }
  .layout.grid .phone-col-1-10 {
    width: 10%;
  }
  .layout.grid .phone-col-2-10 {
    width: 20%;
  }
  .layout.grid .phone-col-3-10 {
    width: 30%;
  }
  .layout.grid .phone-col-4-10 {
    width: 40%;
  }
  .layout.grid .phone-col-5-10 {
    width: 50%;
  }
  .layout.grid .phone-col-6-10 {
    width: 60%;
  }
  .layout.grid .phone-col-7-10 {
    width: 70%;
  }
  .layout.grid .phone-col-8-10 {
    width: 80%;
  }
  .layout.grid .phone-col-9-10 {
    width: 90%;
  }
  .layout.grid .phone-col-10-10 {
    width: 100%;
  }
  .layout.grid .phone-col-1-11 {
    width: 9.0909090909%;
  }
  .layout.grid .phone-col-2-11 {
    width: 18.1818181818%;
  }
  .layout.grid .phone-col-3-11 {
    width: 27.2727272727%;
  }
  .layout.grid .phone-col-4-11 {
    width: 36.3636363636%;
  }
  .layout.grid .phone-col-5-11 {
    width: 45.4545454545%;
  }
  .layout.grid .phone-col-6-11 {
    width: 54.5454545455%;
  }
  .layout.grid .phone-col-7-11 {
    width: 63.6363636364%;
  }
  .layout.grid .phone-col-8-11 {
    width: 72.7272727273%;
  }
  .layout.grid .phone-col-9-11 {
    width: 81.8181818182%;
  }
  .layout.grid .phone-col-10-11 {
    width: 90.9090909091%;
  }
  .layout.grid .phone-col-11-11 {
    width: 100%;
  }
  .layout.grid .phone-col-1-12 {
    width: 8.3333333333%;
  }
  .layout.grid .phone-col-2-12 {
    width: 16.6666666667%;
  }
  .layout.grid .phone-col-3-12 {
    width: 25%;
  }
  .layout.grid .phone-col-4-12 {
    width: 33.3333333333%;
  }
  .layout.grid .phone-col-5-12 {
    width: 41.6666666667%;
  }
  .layout.grid .phone-col-6-12 {
    width: 50%;
  }
  .layout.grid .phone-col-7-12 {
    width: 58.3333333333%;
  }
  .layout.grid .phone-col-8-12 {
    width: 66.6666666667%;
  }
  .layout.grid .phone-col-9-12 {
    width: 75%;
  }
  .layout.grid .phone-col-10-12 {
    width: 83.3333333333%;
  }
  .layout.grid .phone-col-11-12 {
    width: 91.6666666667%;
  }
  .layout.grid .phone-col-12-12 {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .layout.grid .tablet-col-1-1 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-2 {
    width: 50%;
  }
  .layout.grid .tablet-col-2-2 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-3 {
    width: 33.3333333333%;
  }
  .layout.grid .tablet-col-2-3 {
    width: 66.6666666667%;
  }
  .layout.grid .tablet-col-3-3 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-4 {
    width: 25%;
  }
  .layout.grid .tablet-col-2-4 {
    width: 50%;
  }
  .layout.grid .tablet-col-3-4 {
    width: 75%;
  }
  .layout.grid .tablet-col-4-4 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-5 {
    width: 20%;
  }
  .layout.grid .tablet-col-2-5 {
    width: 40%;
  }
  .layout.grid .tablet-col-3-5 {
    width: 60%;
  }
  .layout.grid .tablet-col-4-5 {
    width: 80%;
  }
  .layout.grid .tablet-col-5-5 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-6 {
    width: 16.6666666667%;
  }
  .layout.grid .tablet-col-2-6 {
    width: 33.3333333333%;
  }
  .layout.grid .tablet-col-3-6 {
    width: 50%;
  }
  .layout.grid .tablet-col-4-6 {
    width: 66.6666666667%;
  }
  .layout.grid .tablet-col-5-6 {
    width: 83.3333333333%;
  }
  .layout.grid .tablet-col-6-6 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-7 {
    width: 14.2857142857%;
  }
  .layout.grid .tablet-col-2-7 {
    width: 28.5714285714%;
  }
  .layout.grid .tablet-col-3-7 {
    width: 42.8571428571%;
  }
  .layout.grid .tablet-col-4-7 {
    width: 57.1428571429%;
  }
  .layout.grid .tablet-col-5-7 {
    width: 71.4285714286%;
  }
  .layout.grid .tablet-col-6-7 {
    width: 85.7142857143%;
  }
  .layout.grid .tablet-col-7-7 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-8 {
    width: 12.5%;
  }
  .layout.grid .tablet-col-2-8 {
    width: 25%;
  }
  .layout.grid .tablet-col-3-8 {
    width: 37.5%;
  }
  .layout.grid .tablet-col-4-8 {
    width: 50%;
  }
  .layout.grid .tablet-col-5-8 {
    width: 62.5%;
  }
  .layout.grid .tablet-col-6-8 {
    width: 75%;
  }
  .layout.grid .tablet-col-7-8 {
    width: 87.5%;
  }
  .layout.grid .tablet-col-8-8 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-9 {
    width: 11.1111111111%;
  }
  .layout.grid .tablet-col-2-9 {
    width: 22.2222222222%;
  }
  .layout.grid .tablet-col-3-9 {
    width: 33.3333333333%;
  }
  .layout.grid .tablet-col-4-9 {
    width: 44.4444444444%;
  }
  .layout.grid .tablet-col-5-9 {
    width: 55.5555555556%;
  }
  .layout.grid .tablet-col-6-9 {
    width: 66.6666666667%;
  }
  .layout.grid .tablet-col-7-9 {
    width: 77.7777777778%;
  }
  .layout.grid .tablet-col-8-9 {
    width: 88.8888888889%;
  }
  .layout.grid .tablet-col-9-9 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-10 {
    width: 10%;
  }
  .layout.grid .tablet-col-2-10 {
    width: 20%;
  }
  .layout.grid .tablet-col-3-10 {
    width: 30%;
  }
  .layout.grid .tablet-col-4-10 {
    width: 40%;
  }
  .layout.grid .tablet-col-5-10 {
    width: 50%;
  }
  .layout.grid .tablet-col-6-10 {
    width: 60%;
  }
  .layout.grid .tablet-col-7-10 {
    width: 70%;
  }
  .layout.grid .tablet-col-8-10 {
    width: 80%;
  }
  .layout.grid .tablet-col-9-10 {
    width: 90%;
  }
  .layout.grid .tablet-col-10-10 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-11 {
    width: 9.0909090909%;
  }
  .layout.grid .tablet-col-2-11 {
    width: 18.1818181818%;
  }
  .layout.grid .tablet-col-3-11 {
    width: 27.2727272727%;
  }
  .layout.grid .tablet-col-4-11 {
    width: 36.3636363636%;
  }
  .layout.grid .tablet-col-5-11 {
    width: 45.4545454545%;
  }
  .layout.grid .tablet-col-6-11 {
    width: 54.5454545455%;
  }
  .layout.grid .tablet-col-7-11 {
    width: 63.6363636364%;
  }
  .layout.grid .tablet-col-8-11 {
    width: 72.7272727273%;
  }
  .layout.grid .tablet-col-9-11 {
    width: 81.8181818182%;
  }
  .layout.grid .tablet-col-10-11 {
    width: 90.9090909091%;
  }
  .layout.grid .tablet-col-11-11 {
    width: 100%;
  }
  .layout.grid .tablet-col-1-12 {
    width: 8.3333333333%;
  }
  .layout.grid .tablet-col-2-12 {
    width: 16.6666666667%;
  }
  .layout.grid .tablet-col-3-12 {
    width: 25%;
  }
  .layout.grid .tablet-col-4-12 {
    width: 33.3333333333%;
  }
  .layout.grid .tablet-col-5-12 {
    width: 41.6666666667%;
  }
  .layout.grid .tablet-col-6-12 {
    width: 50%;
  }
  .layout.grid .tablet-col-7-12 {
    width: 58.3333333333%;
  }
  .layout.grid .tablet-col-8-12 {
    width: 66.6666666667%;
  }
  .layout.grid .tablet-col-9-12 {
    width: 75%;
  }
  .layout.grid .tablet-col-10-12 {
    width: 83.3333333333%;
  }
  .layout.grid .tablet-col-11-12 {
    width: 91.6666666667%;
  }
  .layout.grid .tablet-col-12-12 {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .layout.grid .desktop-col-1-1 {
    width: 100%;
  }
  .layout.grid .desktop-col-1-2 {
    width: 50%;
  }
  .layout.grid .desktop-col-2-2 {
    width: 100%;
  }
  .layout.grid .desktop-col-1-3 {
    width: 33.3333333333%;
  }
  .layout.grid .desktop-col-2-3 {
    width: 66.6666666667%;
  }
  .layout.grid .desktop-col-3-3 {
    width: 100%;
  }
  .layout.grid .desktop-col-1-4 {
    width: 25%;
  }
  .layout.grid .desktop-col-2-4 {
    width: 50%;
  }
  .layout.grid .desktop-col-3-4 {
    width: 75%;
  }
  .layout.grid .desktop-col-4-4 {
    width: 100%;
  }
  .layout.grid .desktop-col-1-5 {
    width: 20%;
  }
  .layout.grid .desktop-col-2-5 {
    width: 40%;
  }
  .layout.grid .desktop-col-3-5 {
    width: 60%;
  }
  .layout.grid .desktop-col-4-5 {
    width: 80%;
  }
  .layout.grid .desktop-col-5-5 {
    width: 100%;
  }
  .layout.grid .desktop-col-1-6 {
    width: 16.6666666667%;
  }
  .layout.grid .desktop-col-2-6 {
    width: 33.3333333333%;
  }
  .layout.grid .desktop-col-3-6 {
    width: 50%;
  }
  .layout.grid .desktop-col-4-6 {
    width: 66.6666666667%;
  }
  .layout.grid .desktop-col-5-6 {
    width: 83.3333333333%;
  }
  .layout.grid .desktop-col-6-6 {
    width: 100%;
  }
  .layout.grid .desktop-col-1-7 {
    width: 14.2857142857%;
  }
  .layout.grid .desktop-col-2-7 {
    width: 28.5714285714%;
  }
  .layout.grid .desktop-col-3-7 {
    width: 42.8571428571%;
  }
  .layout.grid .desktop-col-4-7 {
    width: 57.1428571429%;
  }
  .layout.grid .desktop-col-5-7 {
    width: 71.4285714286%;
  }
  .layout.grid .desktop-col-6-7 {
    width: 85.7142857143%;
  }
  .layout.grid .desktop-col-7-7 {
    width: 100%;
  }
  .layout.grid .desktop-col-1-8 {
    width: 12.5%;
  }
  .layout.grid .desktop-col-2-8 {
    width: 25%;
  }
  .layout.grid .desktop-col-3-8 {
    width: 37.5%;
  }
  .layout.grid .desktop-col-4-8 {
    width: 50%;
  }
  .layout.grid .desktop-col-5-8 {
    width: 62.5%;
  }
  .layout.grid .desktop-col-6-8 {
    width: 75%;
  }
  .layout.grid .desktop-col-7-8 {
    width: 87.5%;
  }
  .layout.grid .desktop-col-8-8 {
    width: 100%;
  }
  .layout.grid .desktop-col-1-9 {
    width: 11.1111111111%;
  }
  .layout.grid .desktop-col-2-9 {
    width: 22.2222222222%;
  }
  .layout.grid .desktop-col-3-9 {
    width: 33.3333333333%;
  }
  .layout.grid .desktop-col-4-9 {
    width: 44.4444444444%;
  }
  .layout.grid .desktop-col-5-9 {
    width: 55.5555555556%;
  }
  .layout.grid .desktop-col-6-9 {
    width: 66.6666666667%;
  }
  .layout.grid .desktop-col-7-9 {
    width: 77.7777777778%;
  }
  .layout.grid .desktop-col-8-9 {
    width: 88.8888888889%;
  }
  .layout.grid .desktop-col-9-9 {
    width: 100%;
  }
  .layout.grid .desktop-col-1-10 {
    width: 10%;
  }
  .layout.grid .desktop-col-2-10 {
    width: 20%;
  }
  .layout.grid .desktop-col-3-10 {
    width: 30%;
  }
  .layout.grid .desktop-col-4-10 {
    width: 40%;
  }
  .layout.grid .desktop-col-5-10 {
    width: 50%;
  }
  .layout.grid .desktop-col-6-10 {
    width: 60%;
  }
  .layout.grid .desktop-col-7-10 {
    width: 70%;
  }
  .layout.grid .desktop-col-8-10 {
    width: 80%;
  }
  .layout.grid .desk