/*
 * Section: ListView Styles
 * Purpose: Style the border of the listview item to start after the icon
 *
 */
oj-ext-mobile-page-template .vb-list-item-indent-border .oj-listview-item {
  /* background position is based on the icon size: icon size(32px) + 20px */
  background-position-x: 52px;
}

/*
 * Section: Form section headers
 * Purpose: Creates a section header for a form commonly seen in mobile patterns
 *
 */
oj-ext-mobile-page-template .vb-mobile-section-header {
  background-color: var(--oj-palette-neutral-60);
  margin: 0;
  border-color: var(--oj-palette-neutral-70);
  border-style: solid;
  border-width: 1px 0;
}

/*
 * Section: IOS Specific form component overrides.
 * Purpose: Overrides the labels and placeholder to be more ios like. Use default (start) justification for selects and inputs
 *
 */
oj-ext-mobile-page-template.oj-ext-ios-theme oj-form-layout .oj-label {
  /* Use standard font size and primary color for all the labels*/
  font-size: var(--vb-font-size);
  color: var(--oj-text-color-primary);
}

oj-ext-mobile-page-template.oj-ext-ios-theme oj-form-layout ::placeholder {
  /* Use standard font size and secondary color for the placeholders */
  font-size: var(--vb-font-size);
  color: var(--oj-text-color-secondary);
}

oj-ext-mobile-page-template.oj-ext-ios-theme oj-form-layout .oj-select-select {
  /* Use default direction for selects */
  direction: unset;
}

oj-ext-mobile-page-template.oj-ext-ios-theme oj-form-layout .oj-inputdatetime-input {
  /* Use default text-alignment for dates */
  text-align: unset;
}

/*
 * Section: Android Specific form component overrides.
 * Purpose: Removes borders from the form layout since the form fields already have highlighted borders.
 *          Makes height and underline consistent.
 *
 */
oj-ext-mobile-page-template.oj-ext-android-theme oj-form-layout .oj-form>.oj-flex {
  /* Remove the double border effect from the form. Form controls already have an underline underneath */
  border-width: 0;
}

oj-ext-mobile-page-template.oj-ext-android-theme oj-form-layout .oj-form-control {
  /* Since we removed the double border effect take out the margin at the bottom for better spacing */
  margin-bottom: 0;
}

oj-ext-mobile-page-template.oj-ext-android-theme oj-form-layout input {
  /* Use the same sizing for inputs, selects, dates for proper alignment side by side etc */
  height: 2rem;
}

oj-ext-mobile-page-template.oj-ext-android-theme oj-form-layout .oj-read-only input[readonly],
oj-ext-mobile-page-template.oj-ext-android-theme oj-form-layout .oj-read-only textarea[readonly] {
  /* Add underline effect for readonly fields as well */
  border-color: var(--oj-palette-neutral-110);
}

.oj-hybrid-applayout-header {
  background-color: #1d9aa1 !important;
  box-shadow: inset 0px 1px 22px 25px #f2f1ee1a !important;
  border-bottom-color: #58bbbe !important;
}

.oj-hybrid-applayout-header-title {
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

.oj-button.oj-default.oj-button-half-chrome .oj-button-button {
  color: #a0a0a0 !important;
}

.oj-hybrid-applayout-offcanvas {
  background-color: #1d9aa1 !important;
}

.oj-hybrid-applayout-offcanvas {
  box-shadow: inset -11px -4px 142px 19px #123b5f !important;
}

.demo-opacity {
  opacity: 0.6;
}

.demo-pointer {
  cursor: pointer;
}

.oj-hybrid-applayout-header,
.oj-hybrid-applayout-header-no-border {
  padding: 0;
}

.oj-hybrid-applayout-header-title {
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  top: .5rem;
}

.oj-text-field-container {
  box-shadow: none !important;
}

#drawerToggleButton, #oj-button--1255369908-1 {
  margin-left: -0.5rem;
}

.oj-ext-mobile-header-content {
  height: 2.75rem;
}

.oj-ux-ico-upload {
  padding: .8rem;
  cursor: pointer;
  color: #FFFFFF;
}

.oj-contrast-marker a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #fffffe;
}

.oj-contrast-marker .oj-navigationlist-item-icon {
  color: #f4f3f1;
}

#oj-button1, #oj-button2 {
  padding-left: .2rem;
  cursor: pointer;
}

#SPAN-1, #SPAN-2 {
  color: #FFFFFF;
  cursor: pointer;
}