/*
 Copyright (c) 2017, 2021, Oracle and/or its affiliates. 

  alta-v1.1-desktop.css defines the styles to modernize the alta Skin such as modifying
  visual design of tabs, removing the explicit folder styling in favor of a simpler presentation
  , and is identified by skin id "alta-v1.1.desktop". This skinning file extends the
  "alta-v1-desktop" (alta-v1-desktop.css) skin.
  (Heirarchy: alta-v1-desktop.css).
*/

/* Skin developement notes:
   * When adding skinning information to this file, we keep the same basic component
     order that is present in alta-v1.desktop. This way, we can more easily compare
     differences between the two skins.
   * Follow the existing css file rules, including: no tab chars (indentation done by 2 spaces),
     proper indenting, line endings with [CR][LF], trailing "{", etc.
*/

/* Alta V1.1 Changes
Please refer the following wiki
https://confluence.oraclecorp.com/confluence/display/~kristin.desmond@oracle.com/ADF+-+Tab+Visual+and+Configuration+Improvements. */


/* Alta Color Aliases (in alphabetical order)

   Alta skin uses a color palette of anchor, derivative, and gourmet colors. These color aliases
   are defined below. These replace the previously used Fusion color alias names.
   See: https://stbeehive.oracle.com/teamcollab/wiki/ALTA+Skin
        http://http://aseng-wiki.us.oracle.com/asengwiki/display/ASDevADFFaces/Alta+Color+Alias+Definitions

   Note that this these color aliases were determined in coordination with RCUX and Skin Editor DT.
   There shouldn't be any changes to these unless approved by these groups!
   Both hex values and hsl values are included in the comments, but we use the hex value for
   compatibility with ie7/8. We could define by hsl and include an ie7/8 specific section including
   alternate hex values, but we've decided not to as we don't want to bloat the file and add another
   layer that could get out of synch - simpler to just use the hex values for now. */

 /*Train join background color*/
.AFTrainJoinBgColor:alias {
  color: #e4e8ea;
}

.AFConfimationColor:alias {
  color: #a2bf39;
}

.AFInformationColor:alias {
  color: #267db3;
}

.AFTrainStopBorderColor:alias {
  color: #878c90;
}

.AFTrainJoinFillColor:alias {
  color: #b2bcc4;
}

/* Anchor, hsl(207, 13%, 56%), #7F949F */
.AFSelectBorderColor:alias {
  color: #7F949F;
}

/* Anchor, hsl(206, 9% 64%), #9ba4ab */
.AFSelectActiveBorderColor:alias {
  color: #9ba4ab;
}

/* Anchor, hsl(200, 12%, 91%), #E4E8EA */
.AFSelectActiveColor:alias {
  color: #E4E8EA;
}

/* Anchor, hsl(208, 92%, 37%), #0865b5 */
.AFSelectMarkerActiveColor:alias {
  color: #0865b5;
}

@agent (touchScreen) {
  af|document{
    -tr-hint-display-timeout:2000;
  }
}
af|messages{
  -tr-rendering-mode:alta-v1.1;
}

af|richTextEditor{
  -tr-rendering-mode: alta-v1.1;
}

af|selectBooleanRadio::native-input,
af|selectBooleanCheckbox::native-input,
af|selectOneRadio::native-input,
af|selectManyCheckbox::native-input,
af|selectManyListbox::content-input,
af|selectManyChoice::content-input {
  /* hides the native radio buttons, don't use display: none or visibility: hidden, since it will
  affect keyboard navigation. Can't use appearance: none because of lack of support in IE11,
  and broken support in FF */
  height: auto;
  width: auto;
  top: 0;
  left: 0;
  margin: 0;
  position: absolute;
  opacity: 0;
}

af|selectBooleanRadio::item-text,
af|selectBooleanCheckbox::item-text,
af|selectOneRadio::item-text,
af|selectManyCheckbox::item-text {
  position: relative;
  cursor: pointer;
}
af|selectManyListbox::item label,
af|selectManyChoice::item label {
  position: relative;
}
.AFTltCheckboxCntnr {
  /* position: relative based alignment has problems with sticky table header,
     so have an alternate arrangement */
  width: 22px; /* instead of padding */
}
.AFTltCheckbox {
  position: absolute;
  opacity: 0;
}
af|selectBooleanRadio::item-text:ltr,
af|selectBooleanCheckbox::item-text:ltr,
af|selectOneRadio::item-text:ltr,
af|selectManyCheckbox::item-text:ltr,
af|selectManyListbox::item label:ltr,
af|selectManyChoice::item label:ltr {
  /* label spans over the virtual radio button, so the click always lands on the label */
  padding: 0 0 0 22px; /* Space for the virtual radio/checkbox */
}
af|selectManyListbox::item label:ltr {
  margin-left: 3px;
}
af|selectManyChoice::item label:ltr {
  margin-left: 7px;
}
af|selectBooleanRadio::item-text:rtl,
af|selectBooleanCheckbox::item-text:rtl,
af|selectOneRadio::item-text:rtl,
af|selectManyCheckbox::item-text:rtl,
af|selectManyListbox::item label:rtl,
af|selectManyChoice::item label:rtl {
  /* label spans over the virtual radio button, so the click always lands on the label */
  padding: 0 22px 0 0; /* Space for the virtual radio/checkbox */
}
af|selectManyListbox::item label:rtl {
  margin-right: 3px;
}
af|selectManyChoice::item label:rtl {
  margin-right: 7px;
}
/* selectManyCheckbox renders a label even in read-only mode */
af|selectManyCheckbox:read-only::item-text:ltr {
  padding-left: 5px;
}
af|selectManyCheckbox:read-only::item-text:rtl {
  padding-right: 5px;
  padding-left: 3px;
}

af|selectBooleanRadio::content-input,
af|selectBooleanCheckbox::content-input,
af|selectOneRadio::content-input,
af|selectManyCheckbox::content-input,
af|selectManyListbox::item,
af|selectManyChoice::item {
  position: relative;
}
@agent ie, edge {
  af|column::column-filter-cell af|selectBooleanRadio::content-input,
  af|column::data-cell af|selectBooleanRadio::content-input,
  af|column::banded-data-cell af|selectBooleanRadio::content-input,
  af|column::row-header-cell af|selectBooleanRadio::content-input,
  af|column::column-filter-cell af|selectBooleanCheckbox::content-input,
  af|column::data-cell af|selectBooleanCheckbox::content-input,
  af|column::banded-data-cell af|selectBooleanCheckbox::content-input,
  af|column::row-header-cell af|selectBooleanCheckbox::content-input {
    display: inline-block; /* bug 29059589 */
  }
}

af|selectBooleanRadio::virtual-radio,
af|selectBooleanCheckbox::virtual-checkbox,
af|selectOneRadio::virtual-radio,
af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::virtual-checkbox,
.AFTltVirtualCheckbox {
  -tr-inhibit: display;
  background-color: -tr-property-ref(".AFComponentBackgroundColor:alias","color");
  border: 1px solid -tr-property-ref(".AFSelectBorderColor:alias","color");
  box-sizing: border-box;
  height: 16px;
  width: 16px;
}
af|selectBooleanRadio::virtual-radio,
af|selectBooleanCheckbox::virtual-checkbox,
af|selectOneRadio::virtual-radio,
af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::virtual-checkbox {
  /* vertically middle align */
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
af|selectBooleanRadio::virtual-radio:ltr,
af|selectBooleanCheckbox::virtual-checkbox:ltr,
af|selectOneRadio::virtual-radio:ltr,
af|selectManyCheckbox::virtual-checkbox:ltr,
af|selectManyListbox::virtual-checkbox:ltr,
af|selectManyChoice::virtual-checkbox:ltr {
  left: 0px; /* to place the virtual radio/checkbox in the padding-left area of label container */
}
af|selectBooleanRadio::virtual-radio:rtl,
af|selectBooleanCheckbox::virtual-checkbox:rtl,
af|selectOneRadio::virtual-radio:rtl,
af|selectManyCheckbox::virtual-checkbox:rtl,
af|selectManyListbox::virtual-checkbox:rtl,
af|selectManyChoice::virtual-checkbox:rtl {
  right: 0px; /* to place the virtual radio/checkbox in the padding-right area of label container */
}
af|selectBooleanRadio::virtual-radio,
af|selectOneRadio::virtual-radio {
  border-radius: 100%;
}
af|selectBooleanCheckbox::virtual-checkbox,
af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::virtual-checkbox,
.AFTltVirtualCheckbox {
  border-radius: 10%;
}
af|selectBooleanRadio::item-text:active af|selectBooleanRadio::virtual-radio,
af|selectBooleanCheckbox::item-text:active af|selectBooleanCheckbox::virtual-checkbox,
af|selectOneRadio::item-text:active af|selectOneRadio::virtual-radio,
af|selectManyCheckbox::item-text:active af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::item:active af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::item:active af|selectManyChoice::virtual-checkbox {
  border-color: -tr-property-ref(".AFSelectActiveBorderColor:alias","color");
  background-color: -tr-property-ref(".AFSelectActiveColor:alias","color");
}
af|selectBooleanRadio:disabled::virtual-radio,
af|selectBooleanCheckbox:disabled::virtual-checkbox,
af|selectOneRadio:disabled::virtual-radio,
af|selectManyCheckbox:disabled::virtual-checkbox,
af|selectManyListbox:disabled::virtual-checkbox, /* 1st group */
af|selectBooleanRadio:disabled::item-text:active af|selectBooleanRadio::virtual-radio,
af|selectBooleanCheckbox:disabled::item-text:active af|selectBooleanCheckbox::virtual-checkbox,
af|selectOneRadio:disabled::item-text:active af|selectOneRadio::virtual-radio,
af|selectManyCheckbox:disabled::item-text:active af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox:disabled::item:active af|selectManyListbox::virtual-checkbox, /* 2nd group */
af|selectOneRadio::item-text:disabled af|selectOneRadio::virtual-radio,
af|selectManyCheckbox::item-text:disabled af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::item:disabled af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::item:disabled af|selectManyChoice::virtual-checkbox, /* 3rd group*/
af|selectOneRadio::item-text:disabled:active af|selectOneRadio::virtual-radio,
af|selectManyCheckbox::item-text:disabled:active af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::item:disabled:active af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::item:disabled:active af|selectManyChoice::virtual-checkbox /* 4th group*/ {
  border-color: -tr-property-ref(".AFIconDisabledColor:alias","color");
  background-color: transparent;
}

af|selectBooleanRadio::native-input:focus ~ af|selectBooleanRadio::item-text af|selectBooleanRadio::virtual-radio,
af|selectBooleanCheckbox::native-input:focus ~ af|selectBooleanCheckbox::item-text af|selectBooleanCheckbox::virtual-checkbox,
af|selectOneRadio::native-input:focus ~ af|selectOneRadio::item-text af|selectOneRadio::virtual-radio,
af|selectManyCheckbox::native-input:focus ~ af|selectManyCheckbox::item-text af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::content-input:focus ~ af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::content-input:focus ~ af|selectManyChoice::virtual-checkbox {
  outline: dotted 1px -tr-property-ref(".AFShadowColor:alias","color");
}
@agent webkit {
  af|selectBooleanRadio::native-input:focus ~ af|selectBooleanRadio::item-text af|selectBooleanRadio::virtual-radio,
  af|selectBooleanCheckbox::native-input:focus ~ af|selectBooleanCheckbox::item-text af|selectBooleanCheckbox::virtual-checkbox,
  af|selectOneRadio::native-input:focus ~ af|selectOneRadio::item-text af|selectOneRadio::virtual-radio,
  af|selectManyCheckbox::native-input:focus ~ af|selectManyCheckbox::item-text af|selectManyCheckbox::virtual-checkbox,
  af|selectManyListbox::content-input:focus ~ af|selectManyListbox::virtual-checkbox,
  af|selectManyChoice::content-input:focus ~ af|selectManyChoice::virtual-checkbox {
    outline: -webkit-focus-ring-color auto 5px;
  }
}

af|selectBooleanRadio::virtual-radio::before,
af|selectOneRadio::virtual-radio::before {
  content: '';
  box-sizing: border-box;
  height: 8px;
  width: 8px;
  border-radius: 100%;

  /* center */
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}

af|selectBooleanRadio::native-input:checked ~ af|selectBooleanRadio::item-text af|selectBooleanRadio::virtual-radio::before,
af|selectOneRadio::native-input:checked ~ af|selectOneRadio::item-text af|selectOneRadio::virtual-radio::before {
  background-color: -tr-property-ref(".AFIconActiveColor:alias","color");
}
af|selectBooleanRadio::native-input:checked ~ af|selectBooleanRadio::item-text:active af|selectBooleanRadio::virtual-radio::before,
af|selectOneRadio::native-input:checked ~ af|selectOneRadio::item-text:active af|selectOneRadio::virtual-radio::before {
  background-color: -tr-property-ref(".AFSelectMarkerActiveColor:alias","color");
}
af|selectBooleanRadio:disabled::native-input:checked ~ af|selectBooleanRadio::item-text af|selectBooleanRadio::virtual-radio::before,
af|selectOneRadio:disabled::native-input:checked ~ af|selectOneRadio::item-text af|selectOneRadio::virtual-radio::before,
af|selectBooleanRadio:disabled::native-input:checked ~ af|selectBooleanRadio::item-text:active af|selectBooleanRadio::virtual-radio::before,
af|selectOneRadio:disabled::native-input:checked ~ af|selectOneRadio::item-text:active af|selectOneRadio::virtual-radio::before, /* 1st group */
af|selectBooleanRadio::native-input:checked ~ af|selectBooleanRadio::item-text:disabled af|selectBooleanRadio::virtual-radio::before,
af|selectOneRadio::native-input:checked ~ af|selectOneRadio::item-text:disabled af|selectOneRadio::virtual-radio::before,
af|selectBooleanRadio::native-input:checked ~ af|selectBooleanRadio::item-text:disabled:active af|selectBooleanRadio::virtual-radio::before,
af|selectOneRadio::native-input:checked ~ af|selectOneRadio::item-text:disabled:active af|selectOneRadio::virtual-radio::before /* 2nd group */ {
  background-color: -tr-property-ref(".AFIconDisabledColor:alias","color");
}

af|selectBooleanCheckbox::native-input:checked ~ af|selectBooleanCheckbox::item-text af|selectBooleanCheckbox::virtual-checkbox,
af|selectManyCheckbox::native-input:checked ~ af|selectManyCheckbox::item-text af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::content-input:checked ~ af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::content-input:checked ~ af|selectManyChoice::virtual-checkbox,
.AFTltCheckbox:checked ~ .AFTltVirtualCheckbox {
  background-image: url('/afr/alta-v1.1/checkbox_ena_selected.png');
  background-repeat: no-repeat;
  background-position: center center;
  border: transparent; /* IE blurs the image if border-radius is set */
}
af|selectBooleanCheckbox::native-input:checked ~ af|selectBooleanCheckbox::item-text:active af|selectBooleanCheckbox::virtual-checkbox,
af|selectManyCheckbox::native-input:checked ~ af|selectManyCheckbox::item-text:active af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::item:active af|selectManyListbox::content-input:checked ~ af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::item:active af|selectManyChoice::content-input:checked ~ af|selectManyChoice::virtual-checkbox {
  background-image: url('/afr/alta-v1.1/checkbox_dwn_selected.png');
}
af|selectBooleanCheckbox:disabled::native-input:checked ~ af|selectBooleanCheckbox::item-text af|selectBooleanCheckbox::virtual-checkbox,
af|selectManyCheckbox:disabled::native-input:checked ~ af|selectManyCheckbox::item-text af|selectManyCheckbox::virtual-checkbox,
af|selectBooleanCheckbox::native-input:checked ~ af|selectBooleanCheckbox::item-text:disabled af|selectBooleanCheckbox::virtual-checkbox,
af|selectManyCheckbox::native-input:checked ~ af|selectManyCheckbox::item-text:disabled af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox:disabled::item af|selectManyListbox::content-input:checked ~ af|selectManyListbox::virtual-checkbox,
af|selectManyChoice:disabled::item af|selectManyChoice::content-input:checked ~ af|selectManyChoice::virtual-checkbox,
af|selectManyListbox::item:disabled af|selectManyListbox::content-input:checked ~ af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::item:disabled af|selectManyChoice::content-input:checked ~ af|selectManyChoice::virtual-checkbox, /* 1st group */
af|selectBooleanCheckbox:disabled::native-input:checked ~ af|selectBooleanCheckbox::item-text:active af|selectBooleanCheckbox::virtual-checkbox,
af|selectManyCheckbox:disabled::native-input:checked ~ af|selectManyCheckbox::item-text:active af|selectManyCheckbox::virtual-checkbox,
af|selectBooleanCheckbox::native-input:checked ~ af|selectBooleanCheckbox::item-text:disabled:active af|selectBooleanCheckbox::virtual-checkbox,
af|selectManyCheckbox::native-input:checked ~ af|selectManyCheckbox::item-text:disabled:active af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox:disabled::item:active af|selectManyListbox::content-input:checked ~ af|selectManyListbox::virtual-checkbox,
af|selectManyChoice:disabled::item:active af|selectManyChoice::content-input:checked ~ af|selectManyChoice::virtual-checkbox,
af|selectManyListbox::item:disabled:active af|selectManyListbox::content-input:checked ~ af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::item:disabled:active af|selectManyChoice::content-input:checked ~ af|selectManyChoice::virtual-checkbox /* 2nd group */ {
  background-image: url('/afr/alta-v1.1/checkbox_dis_selected.png');
}

/* Tri-state selectBooleanCheckbox */
af|selectBooleanCheckbox::tri-icon-style {
  display: none;
}
af|selectBooleanCheckbox::tri-icon-style:mixed ~ af|selectBooleanCheckbox::item-text af|selectBooleanCheckbox::virtual-checkbox {
  background-image: url('/afr/alta-v1.1/checkbox_tri_ena_selected.png');
  background-repeat: no-repeat;
  background-position: center center;
}
af|selectBooleanCheckbox::tri-icon-style:mixed ~ af|selectBooleanCheckbox::item-text:active af|selectBooleanCheckbox::virtual-checkbox {
  background-image: url('/afr/alta-v1.1/checkbox_tri_dwn_selected.png');
}
af|selectBooleanCheckbox:disabled::tri-icon-style:mixed ~ af|selectBooleanCheckbox::item-text af|selectBooleanCheckbox::virtual-checkbox,
af|selectBooleanCheckbox:disabled::tri-icon-style:mixed ~ af|selectBooleanCheckbox::item-text:active af|selectBooleanCheckbox::virtual-checkbox {
  background-image: url('/afr/alta-v1.1/checkbox_tri_dis_selected.png');
}
af|selectBooleanCheckbox::mixed-readonly-icon {
  content: url(/afr/alta-v1.1/checkbox_tri_readOnly_selected.png);
  width: 16px;
  height: 16px;
  box-sizing: border-box;
}

af|selectOneRadio::content-input:ltr,
af|selectManyCheckbox::content-input:ltr {
  padding: 0 15px 0 0px;
}
af|selectOneRadio::content-input:rtl,
af|selectManyCheckbox::content-input:rtl {
  padding: 0 0 0 15px;
}
af|selectBooleanCheckbox::content,
af|selectBooleanCheckbox::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell),
af|selectManyCheckbox::content,
af|selectManyCheckbox::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell),
af|selectBooleanRadio::content,
af|selectBooleanRadio::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell),
af|selectOneRadio::content,
af|selectOneRadio::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell) {
  line-height: 28px;
}
af|selectBooleanCheckbox::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell):not(af|panelFormLayout::label-cell):ltr,
af|selectManyCheckbox::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell):not(af|panelFormLayout::label-cell):ltr,
af|selectBooleanRadio::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell):not(af|panelFormLayout::label-cell):ltr,
af|selectOneRadio::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell):not(af|panelFormLayout::label-cell):ltr {
  padding: 0 7px 0 0;
}
af|selectBooleanCheckbox::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell):not(af|panelFormLayout::label-cell):rtl,
af|selectManyCheckbox::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell):not(af|panelFormLayout::label-cell):rtl,
af|selectBooleanRadio::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell):not(af|panelFormLayout::label-cell):rtl,
af|selectOneRadio::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell):not(af|panelFormLayout::label-cell):rtl {
  padding: 0 0 0 7px;
}
.AFLabelTopAlign af|panelLabelAndMessage::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell) {
  line-height: 28px;
  vertical-align: top;
}

af|selectManyCheckbox:error::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell),
af|selectManyCheckbox:fatal::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell),
af|selectManyCheckbox:warning::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell),
af|selectOneRadio:error::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell),
af|selectOneRadio:fatal::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell),
af|selectOneRadio:warning::label:not(af|panelFormLayout::label-stacked-cell):not(af|panelFormLayout::responsive-label-cell) {
  padding-top: 6px; /* to align label with first radio/checkbox's item-text */
}
af|selectManyCheckbox:error af|panelFormLayout::label-cell,
af|selectManyCheckbox:fatal af|panelFormLayout::label-cell,
af|selectManyCheckbox:warning af|panelFormLayout::label-cell,
af|selectOneRadio:error af|panelFormLayout::label-cell,
af|selectOneRadio:fatal af|panelFormLayout::label-cell,
af|selectOneRadio:warning af|panelFormLayout::label-cell {
  padding-top: 14px; /* to align label with first radio/checkbox's item-text */
}
af|selectManyCheckbox:fatal::content,
af|selectManyCheckbox:error::content,
af|selectOneRadio:fatal::content,
af|selectOneRadio:error::content {
  padding: 4px 10px 4px 10px;
  border: 2px solid -tr-property-ref(".AFErrorColor:alias","color");
}
af|selectManyCheckbox:warning::content,
af|selectOneRadio:warning::content {
  padding: 4px 10px 4px 10px;
  border: 2px solid -tr-property-ref(".AFWarningColor:alias","color");;
}

/* High-Contrast mode */
af|body:high-contrast af|selectBooleanRadio::native-input,
af|body:high-contrast af|selectBooleanCheckbox::native-input,
af|body:high-contrast af|selectOneRadio::native-input,
af|body:high-contrast af|selectManyCheckbox::native-input,
af|body:high-contrast af|selectManyListbox::content-input,
af|body:high-contrast af|selectManyChoice::content-input {
  opacity: 1;
}

af|body:high-contrast af|selectBooleanRadio::virtual-radio,
af|body:high-contrast af|selectBooleanCheckbox::virtual-checkbox,
af|body:high-contrast af|selectOneRadio::virtual-radio,
af|body:high-contrast af|selectManyCheckbox::virtual-checkbox,
af|body:high-contrast af|selectManyListbox::virtual-checkbox,
af|body:high-contrast af|selectManyChoice::virtual-checkbox {
  display: none;
}

/* inhibits */
af|selectManyCheckbox .AFPanelFormLayoutContentCell,
af|selectOneRadio .AFPanelFormLayoutContentCell,
af|selectBooleanCheckbox .AFPanelFormLayoutContentCell,
af|selectBooleanCheckbox af|panelFormLayout::label-cell {
  -tr-inhibit: padding-top;
}
af|selectBooleanCheckbox::item-text,
af|selectManyCheckbox::item-text {
  -tr-inhibit: margin;
}
af|selectBooleanRadio::item-text,
af|selectOneRadio::item-text,
af|selectBooleanCheckbox::item-text,
af|selectManyCheckbox::item-text {
  -tr-inhibit: margin-left;
  -tr-inhibit: vertical-align;
  -tr-inhibit: padding-right;
}
af|selectBooleanRadio::item-text:rtl,
af|selectOneRadio::item-text:rtl,
af|selectBooleanCheckbox::item-text:rtl,
af|selectManyCheckbox::item-text:rtl {
  -tr-inhibit: margin-right;
  -tr-inhibit: padding-left;
}
af|selectOneRadio:fatal::content-input,
af|selectOneRadio:error::content-input,
af|selectManyCheckbox:fatal::content-input,
af|selectManyCheckbox:error::content-input {
  -tr-inhibit: color;
}
@agent ie {
  af|selectManyCheckbox .AFPanelFormLayoutContentCell {
    -tr-inhibit: padding-top;
  }
  af|selectBooleanCheckbox::item-text,
  af|selectManyCheckbox::item-text {
    -tr-inhibit: margin;
  }
  af|selectBooleanCheckbox::item-text,
  af|selectBooleanCheckbox::item-text:rtl {
    -tr-inhibit: padding-left;
    -tr-inhibit: padding-right;
  }
  af|selectOneRadio::item-text {
    -tr-inhibit: margin-left;
    -tr-inhibit: top;
    -tr-inhibit: padding-right;
  }
  af|selectOneRadio::item-text:rtl {
    -tr-inhibit: margin-right;
    -tr-inhibit: padding-left;
  }
  af|selectOneRadio::label {
    -tr-inhibit: padding-top;
    -tr-inhibit: padding;
  }
  af|selectOneRadio::label:ltr {
    -tr-inhibit: padding-right;
  }
  af|selectOneRadio::label:rtl {
    -tr-inhibit: padding-left;
  }
  af|selectBooleanRadio::label {
    -tr-inhibit: padding-bottom;
    -tr-inhibit: padding-top;
    -tr-inhibit: padding-right;
  }
  af|selectBooleanRadio::label:rtl {
    -tr-inhibit: padding-left;
  }
  af|selectBooleanRadio::item-text {
    -tr-inhibit: padding-left;
    -tr-inhibit: padding-right;
  }
  af|selectBooleanRadio::item-text:rtl {
    -tr-inhibit: padding-left;
    -tr-inhibit: padding-right;
  }
  af|selectOneRadio::item-text:ltr,
  af|selectOneRadio::item-text:rtl {
    -tr-inhibit: padding-left;
    -tr-inhibit: padding-right;
  }
  af|selectOneRadio .AFPanelFormLayoutContentCell {
    -tr-inhibit: padding-top;
  }
  af|selectBooleanRadio af|panelFormLayout::label-cell {
    -tr-inhibit: padding-top;
  }
  af|selectBooleanRadio .AFPanelFormLayoutContentCell af|selectBooleanRadio::item-text {
    -tr-inhibit: top;
    -tr-inhibit: position;
  }
  af|selectBooleanRadio::item-text {
    -tr-inhibit: padding-right;
  }
}
@agent gecko {
  af|selectManyCheckbox .AFPanelFormLayoutContentCell {
    -tr-inhibit: padding-top;
  }
  af|selectManyCheckbox .AFPanelFormLayoutContentCell af|selectManyCheckbox::item-text {
    -tr-inhibit: vertical-align;
  }
  af|selectOneRadio::item-text {
    -tr-inhibit: vertical-align;
  }
  af|selectBooleanRadio::item-text {
    -tr-inhibit: vertical-align;
    -tr-inhibit: padding-top;
    -tr-inhibit: padding-left;
  }
  af|selectBooleanRadio::item-text:rtl {
    -tr-inhibit: padding-right;
  }
  af|selectManyCheckbox::item-text {
    -tr-inhibit: margin-left;
    -tr-inhibit: padding-left;
  }
  af|selectManyCheckbox::item-text:rtl {
    -tr-inhibit: margin-right;
    -tr-inhibit: padding-left;
    -tr-inhibit: padding-right;
  }
  af|selectBooleanRadio::content-input {
    -tr-inhibit: padding;
  }
  af|selectOneRadio::label {
    -tr-inhibit: padding-top;
  }
  af|selectOneRadio .AFPanelFormLayoutContentCell {
    -tr-inhibit: padding-top;
  }
}
@agent webkit {
  af|selectOneRadio::item-text {
    -tr-inhibit: vertical-align;
  }
  af|selectBooleanRadio::item-text {
    -tr-inhibit: vertical-align;
    -tr-inhibit: margin-left;
  }
  af|selectBooleanRadio::item-text:rtl {
    -tr-inhibit: margin-right;
  }
  af|selectManyCheckbox::item-text,
  af|selectBooleanCheckbox::item-text {
    -tr-inhibit: vertical-align;
    -tr-inhibit: margin-left;
  }
  af|selectManyCheckbox::item-text:rtl,
  af|selectBooleanCheckbox::item-text:rtl {
    -tr-inhibit: margin-right;
  }
  af|selectBooleanCheckbox::item-text {
    -tr-inhibit: padding-left;
  }
  af|selectBooleanCheckbox::item-text:rtl {
    -tr-inhibit: padding-right;
  }
  af|selectOneRadio::label {
    -tr-inhibit: padding-top;
    -tr-inhibit: margin-left;
  }
  af|selectBooleanRadio::label {
    -tr-inhibit: padding-top;
  }
  af|selectOneRadio::label:ltr {
    -tr-inhibit: padding-right;
  }
  af|selectOneRadio::label:rtl {
    -tr-inhibit: padding-left;
    -tr-inhibit: margin-right;
  }
  af|selectOneRadio af|panelFormLayout::label-cell {
    -tr-inhibit: padding-top;
  }
  af|selectManyCheckbox .AFPanelFormLayoutContentCell {
    -tr-inhibit: padding-top;
  }
}
@agent (touchScreen) {
  af|selectOneRadio .AFPanelFormLayoutContentCell,
  af|selectManyCheckbox .AFPanelFormLayoutContentCell {
    -tr-inhibit: padding-top;
  }
}
@platform iphone {
  af|selectBooleanRadio af|panelFormLayout::label-cell {
    -tr-inhibit: padding-top;
  }
  af|selectOneRadio::label {
    -tr-inhibit: padding-top;
  }
  af|selectBooleanCheckbox af|selectBooleanCheckbox::label,
  af|selectManyCheckbox af|selectManyCheckbox::label {
    -tr-inhibit: padding-top
  }
  af|panelFormLayout af|selectBooleanCheckbox af|panelFormLayout::label-cell {
    -tr-inhibit: padding-top;
  }
  af|selectBooleanRadio::content {
    -tr-inhibit: top;
  }
}

@platform iphone {
  /* Clicking a label element doesn't select the checkbox or radio till iOS 10.1 */
  @agent webkit and (version: 602.*) {
    af|selectBooleanRadio::native-input,
    af|selectBooleanCheckbox::native-input,
    af|selectOneRadio::native-input,
    af|selectManyCheckbox::native-input,
    af|selectManyListbox::content-input,
    af|selectManyChoice::content-input {
      width: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    af|selectBooleanRadio::content-input,
    af|selectBooleanCheckbox::content-input,
    af|selectOneRadio::content-input,
    af|selectManyCheckbox::content-input {
      top: 0;
      position: relative;
    }
    af|selectBooleanRadio::item-text,
    af|selectBooleanCheckbox::item-text,
    af|selectOneRadio::item-text,
    af|selectManyCheckbox::item-text {
      pointer-events: none;
    }
  }
}


/* New Styling for Tabs */


/* A little extra padding for the remove icon to center things */
af|panelTabbed::remove-icon-style {
  padding-right: 2px;
}

/* Remove the selected tab left/right borders */
af|panelTabbed::tab:selected af|panelTabbed::tab-content,
af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-content {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

af|navigationPane-tabs::tab,
af|panelTabbed::tab {
  border-top: none;
  border-bottom: 3px solid transparent;
}

af|navigationPane-tabs::tab:selected,
af|panelTabbed::tab:selected {
  border-top: none;
  border-bottom: 3px solid -tr-property-ref(".AFTabSelectedBorderAccentColor:alias","color");
}

af|panelTabbed::footer af|panelTabbed::tab {
  border-top: 3px solid transparent;
  border-bottom: none
}

af|panelTabbed::footer af|panelTabbed::tab:selected {
  border-bottom: none;
  border-top: 3px solid -tr-property-ref(".AFTabSelectedBorderAccentColor:alias","color");
}

/* Adjust by 3px to accomodate new 3px bottom selection border */
af|navigationPane-tabs::start-conveyor-belt-indicator,
af|navigationPane-tabs::end-conveyor-belt-indicator,
af|navigationPane-tabs::droplist-indicator {
  margin-top: 1px;
}

af|panelTabbed::header af|panelTabbed::start-conveyor-belt-indicator,
af|panelTabbed::header af|panelTabbed::end-conveyor-belt-indicator,
af|panelTabbed::header af|panelTabbed::droplist-indicator {
    margin-bottom: -12px;
}

af|panelTabbed::footer af|panelTabbed::start-conveyor-belt-indicator,
af|panelTabbed::footer af|panelTabbed::end-conveyor-belt-indicator,
af|panelTabbed::footer af|panelTabbed::droplist-indicator {
    bottom: 1px;
}

af|panelTabbed::body {
  border-radius: 2px;
}

/* Start of Train styles*/

af|train {
  /*Skinning key to indicate Alta 1.1 Train version*/
  -tr-rendering-mode: alta-v1.1;

  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

af|train::stop-container {
  white-space: nowrap;
  display: block;
  align-self: center;
  width: 100%;
  overflow: hidden;
}

af|train::stop {
  display: inline-block;
  text-align: center;
}

af|train::stop-connector {
  position: relative;
  height: 2px;
  top: 14px;
  background-color: -tr-property-ref(".AFTrainJoinBgColor:alias","color");

  /*individual connector width =
  stop width - 28px(half stop icon width on left and right)  - 16px ( two line gaps of 8px for adjacent stops)*/
  width: calc(100% - 28px - 16px);
}

af|train::stop-connector:ltr {
  /*individual connector should start with a line gap of 8px after the left stop.
  Stop width includes 50% of left connector + stop icon width + 50% of right connector.
  So to start the connector after the stop we need left property to be set. */
  left: calc(50% + 14px + 8px);
}

af|train::stop-connector:rtl {
  right: calc(50% + 14px + 8px);
}

af|train::stop-icon-cell,
af|train-vertical::stop-icon-cell {
  position: relative;
  height: 28px;
  width: 28px;
  box-sizing: border-box;
  align-items: center;
  text-align: center;
  align-self: center;
}

af|train::stop-icon-cell:ltr {
   margin: auto;
 }

af|train::stop-icon-cell:rtl {
   margin: auto;
}

af|train-vertical::stop-icon-cell {
  margin:0;
}

af|train::stop-cell:train-visited af|train::stop-icon-cell,
af|train::stop-cell:selected af|train::stop-icon-cell {
  -tr-inhibit: background-image;
  border-radius: 15px;
  border: none;
}
af|train::stop-cell:unvisited af|train::stop-icon-cell {
  -tr-inhibit: background-image;
  border-radius: 15px;
  border: none;
}
af|train-vertical::stop-cell:train-visited af|train-vertical::stop-icon-cell,
af|train-vertical::stop-cell:selected af|train-vertical::stop-icon-cell {
  -tr-inhibit: background-image;
  border-radius: 15px;
  border: none;
}
af|train-vertical::stop-cell:unvisited af|train-vertical::stop-icon-cell {
  -tr-inhibit: background-image;
  border-radius: 15px;
  border: none;
}

af|train::stop-index-selected,
af|train::stop-index-disabled,
af|train::stop-index-unvisited,
af|train::stop-index-visited,
af|train-vertical::stop-index-selected,
af|train-vertical::stop-index-disabled,
af|train-vertical::stop-index-unvisited,
af|train-vertical::stop-index-visited {
  position: relative;
  height: 28px;
  width: 28px;
  border-radius: 14px;
  border-width: 2px;
  border-style: solid;
  border-color: -tr-property-ref(".AFTrainStopBorderColor:alias","color");
  box-sizing: border-box;
  text-align: center;
  line-height: 1.25;
  z-index: 2;
  background: -tr-property-ref(".AFBackgroundColor:alias","color");
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  text-decoration: none;
  font-size: 13px;
 }

af|train::stop-index-selected:ltr,
af|train::stop-index-disabled:ltr,
af|train::stop-index-unvisited:ltr,
af|train::stop-index-visited:ltr,
af|train-vertical::stop-index-selected:ltr,
af|train-vertical::stop-index-disabled:ltr,
af|train-vertical::stop-index-unvisited:ltr,
af|train-vertical::stop-index-visited:ltr {
   padding-left: 3px;
}

af|train::stop-index-selected:rtl,
af|train::stop-index-disabled:rtl,
af|train::stop-index-unvisited:rtl,
af|train::stop-index-visited:rtl,
af|train-vertical::stop-index-selected:rtl,
af|train-vertical::stop-index-disabled:rtl,
af|train-vertical::stop-index-unvisited:rtl,
af|train-vertical::stop-index-visited:rtl {
   padding-right: 3px;
}

af|train::stop-index-selected,
af|train-vertical::stop-index-selected {
  color: -tr-property-ref(".AFTextAltColor:alias","color");
  -tr-rule-ref: selector(".AFButtonBorderActive:alias");
  background-color: -tr-property-ref(".AFButtonActiveColor:alias","color");
}

af|train::stop-index-disabled,
af|train-vertical::stop-index-disabled {
  color: -tr-property-ref(".AFTextDisabledColor:alias","color");
  -tr-rule-ref: selector(".AFButtonBorderDisabled:alias");
  border-width: 2px;
  background-color: -tr-property-ref(".AFButtonDisabledColor:alias","color");
}

af|train::stop-index-unvisited,
af|train-vertical::stop-index-unvisited {
  color: -tr-property-ref(".AFTextColor:alias","color");
  border: 2px solid -tr-property-ref(".AFIconColor:alias","color");
}

af|train::stop-index-visited,
af|train-vertical::stop-index-visited {
  border: 2px solid -tr-property-ref(".AFIconColor:alias","color");
  background-image: url('/afr/alta-v1/alta-v1.1/complete_checkmark_ena.png');
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
  color: -tr-property-ref(".AFTextColor:alias","color");

}

af|train::stop-index-unvisited:hover,
af|train-vertical::stop-index-unvisited:hover,
af|train::stop-index-selected:hover,
af|train-vertical::stop-index-selected:hover {
  -tr-inhibit: background-image;
  background-color:  -tr-property-ref(".AFButtonHoverSecondaryColor:alias","color");
  border-color: -tr-property-ref(".AFButtonHoverSecondaryColor:alias","color");
  color: -tr-property-ref(".AFTextAltColor:alias","color");
}

af|train::stop:hover af|train::stop-index-visited,
af|train-vertical::stop:hover af|train-vertical::stop-index-visited {
  background-image: url('/afr/alta-v1/alta-v1.1/complete_checkmark_ovr.png');
  background-color:  -tr-property-ref(".AFButtonHoverSecondaryColor:alias","color");
  border-color: -tr-property-ref(".AFButtonHoverSecondaryColor:alias","color");
}

af|train::stop-index-unvisited:active,
af|train::stop-index-unvisited:active:hover,
af|train-vertical::stop-index-unvisited:active,
af|train-vertical::stop-index-unvisited:hover:active,
af|train::stop-index-selected:active,
af|train-vertical::stop-icon-selected:hover:active {
  -tr-inhibit: background-image;
  -tr-inhibit:height;
  -tr-inhibit:width;
  color: -tr-property-ref(".AFTextAltColor:alias","color");
  -tr-rule-ref: selector(".AFButtonBorderActive:alias");
  background-color: -tr-property-ref(".AFButtonActiveColor:alias","color");
}

af|train::stop:active:hover af|train::stop-index-visited,
af|train-vertical::stop-index-visited:active:hover
{
  background-image: url('/afr/alta-v1/alta-v1.1/complete_checkmark_sel.png');
  -tr-rule-ref: selector(".AFButtonBorderActive:alias");
  background-color: -tr-property-ref(".AFButtonActiveColor:alias","color");
}

af|train::stop-content {
  width: 100%;
  margin: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 0px;
  padding-top: 10px;
  padding-bottom: 0px;
  white-space: normal;
}

/* Horizontal Train Join related styles
Main join which runs through the train stops with a lower z-index
-webkit-transition animation is used to draw the lines
connecting the stops when particular node is clicked */

af|train::join-wrapper {
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  width: 100%;
}
af|train::join-node {
  position: relative;
  height: 2px;
  width: 100%;
  top: 14px;
  z-index: 1;
}

af|train::join-fill {
  position:relative;
  z-index: 1;
  width: 0%;
  height: 2px;
  top: 16px;
  background: -tr-property-ref(".AFTrainJoinFillColor:alias", "color");
  margin-top: -2px;
}

af|train:sub-train af|train::stop-icon-cell {
  -tr-inhibit: width;
  -tr-inhibit: height;
}

.AFDrawAnimationElement {
  width: 0%;
  -webkit-transition: width 1s; /* Safari */
  -webkit-transition-timing-function: linear; /* Safari */
  transition: width 1s;
  transition-timing-function: linear;
}

af|train::join:disabled,
af|train::join:unvisited,
af|train::join:train-visited {
 -tr-inhibit: background-image;
  box-sizing: border-box;
}

/* Vertical train related styles */

af|train-vertical {
  box-sizing: border-box;
  display: flex;
  flex-basis: inherit;
  height: 100%;
  width: auto;
  flex-direction: column;
  position: relative;
}
af|train-vertical::stop-container {
  overflow: hidden;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  position: relative
}

af|train-vertical::stops {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding:0;
  margin:0;
}

af|train-vertical::stop-content {
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding-top: 14px;
  padding-bottom: 0px;
  -tr-inhibit: width;
  white-space: normal;
}

af|train-vertical::stop-content:ltr {
  padding-left: 14px;
  padding-right: 10px;
}

af|train-vertical::stop-content:rtl {
  padding-right: 14px;
  padding-left: 10px;
}

af|train-vertical::join-wrapper {
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  height: 100%;
  display: flex;
}
af|train-vertical::join-node {
  position: relative;
  width: 2px;
  height: 100%;
  left: 14px;
  z-index: 1;
}

af|train-vertical::join-fill {
  position:relative;
  z-index: 1;
  height: 0%;
  width: 2px;
  left: 16px;
  background: -tr-property-ref(".AFTrainJoinFillColor:alias", "color");
  -webkit-transition: height 2s; /* Safari */
  -webkit-transition-timing-function: linear; /* Safari */
  transition: height 2s;
  transition-timing-function: linear;
  margin-left: -2px;
}

.AFDrawAnimationElementVertical {
  height: 0%;
  transition: height 1s;
  transition-timing-function: linear;
}

af|train-vertical::stop {
  display: flex;
  text-align: center;
}

af|train-vertical::join:disabled,
af|train-vertical::join:unvisited,
af|train-vertical::join:train-visited {
  -tr-inhibit: background-image;
  box-sizing: border-box;
}

af|train-vertical::stop-connector {
  position: relative;
  width: 2px;
  left: 14px;
  background-color: -tr-property-ref(".AFTrainJoinBgColor:alias","color");

   /*individual connector should start with a line gap of 8px after the top stop.
  Stop height includes 50% of top connector + stop icon height + 50% of bottom connector.
  So to start the connector after the stop we need top property to be set. */
  top: calc(50% + 14px + 8px);

  /*individual connector width =
  stop height - 28px(half stop icon height at top and bottom)  - 16px ( two line gaps of 8px for adjacent stops)*/
  height: calc(100% - 28px - 16px);
}

/* sub train specific styles for joins */

af|train-vertical:sub-train af|train-vertical::stop-icon-cell {
  -tr-inhibit: width;
  -tr-inhibit: height;
}

/*Label styles*/
af|train::stop-link,
af|train-vertical::stop-link {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
   color: -tr-property-ref(".AFTextColor:alias","color");
}
af|train::stop-link:disabled,
af|train-vertical::stop-link:disabled {
  color: -tr-property-ref(".AFTextDisabledColor:alias","color");
  -tr-inhibit: font-weight;
  font-weight: normal;
}
af|train::stop-link:train-visited,
af|train-vertical::stop-link:train-visited {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
   color: -tr-property-ref(".AFTextColor:alias","color");
}
af|train::stop-link:unvisited,
af|train-vertical::stop-link:unvisited {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
   color: -tr-property-ref(".AFTextColor:alias","color");
}
@agent (touchScreen:none) {
  af|train::stop-link:unvisited:hover,
  af|train-vertical::stop-link:unvisited:hover {
    /*text-decoration: underline;*/
  }
}
af|train::stop-link:unvisited:active,
af|train-vertical::stop-link:unvisited:active,
af|train::stop-link:unvisited:active:hover,
af|train-vertical::stop-link:unvisited:active:hover {
  text-decoration: none;
  font-weight: bold;
}
af|train::stop-link:selected,
af|train-vertical::stop-link:selected {
  -tr-rule-ref: selector(".AFTextColor:alias");
  font-weight: bold;
}

/*Parent train specific styles*/

af|train::parent-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  padding-left: 8px;
  box-sizing: border-box;
}

af|train::parent-start-icon {
  background-image: url('/afr/alta-v1/alta-v1.1/left_parent_horizontal.png');
  background-repeat: no-repeat;
  background-position: center;
  height: 16px;
  width: 16px;
}

af|train::parent-start-content {
  text-align: center;
  padding-left: 2px;
  -tr-inhibit: width;
  padding-top: 18px;
  -tr-rule-ref: selector(".AFTextColor:alias");
  height: 28px;
}

af|train::parent-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  padding-left: 8px;
  box-sizing: border-box;
}

af|train::parent-end-icon {
  background-image: url('/afr/alta-v1/alta-v1.1/right_parent_horizontal.png');
  background-repeat: no-repeat;
  background-position: center;
  height: 16px;
  width: 16px;
}

af|train::parent-end-content {
  text-align: center;
  padding-right: 2px;
  -tr-inhibit: width;
  padding-top: 18px;
  -tr-rule-ref: selector(".AFTextColor:alias");
  height: 28px;
}

af|train-vertical::parent-start {
  display: flex;
  align-items: left;
  padding-left: 5px;
  padding-top: 10px;
  box-sizing: border-box;
}

af|train-vertical::parent-start-icon {
  background-image: url('/afr/alta-v1/alta-v1.1/bottom_parent_vertical.png');
  background-repeat: no-repeat;
  background-position: center;
  height: 16px;
  width: 16px;
}

af|train-vertical::parent-start-content {
  text-align: center;
  padding-top: 2px;
  padding-left: 18px;
  -tr-rule-ref: selector(".AFTextColor:alias");
}

af|train-vertical::parent-start-content:ltr {
  padding-left: 18px;
}

af|train-vertical::parent-start-content:rtl {
  padding-right: 18px;
}

af|train-vertical::parent-end {
  display: flex;
  align-items: center;
  padding-left: 8px;
  padding-bottom: 5px;
  box-sizing: border-box;
}

af|train-vertical::parent-end-icon {
  background-image: url('/afr/alta-v1/alta-v1.1/top_parent_vertical.png');
  background-repeat: no-repeat;
  background-position: center;
  height: 16px;
  width: 16px;
}

af|train-vertical::parent-end-content {
  text-align: center;
  padding-top: 2px;
  -tr-rule-ref: selector(".AFTextColor:alias");
}

af|train-vertical::parent-end-content:ltr {
  padding-left: 18px;
}

af|train-vertical::parent-end-content:rtl {
  padding-right: 18px;
}
/*parent train styles*/

/*Messaging icons*/

af|train::stop-icon-error,
af|train-vertical::stop-icon-error,
af|train::stop-icon-warning,
af|train-vertical::stop-icon-warning,
af|train::stop-icon-confirmation,
af|train-vertical::stop-icon-confirmation,
af|train::stop-icon-information,
af|train-vertical::stop-icon-information {
  position:relative;
  height: 28px;
  width: 28px;
  border-radius: 14px;
  box-sizing: border-box;
  z-index: 2;
  display: flex;
  margin: auto;
  text-decoration: none;
  font-size: 13px;
  -tr-inhibit: bottom;
}

af|train::stop-icon-error:ltr,
af|train-vertical::stop-icon-error:ltr,
af|train::stop-icon-warning:ltr,
af|train-vertical::stop-icon-warning:ltr,
af|train::stop-icon-confirmation:ltr,
af|train-vertical::stop-icon-confirmation:ltr,
af|train::stop-icon-information:ltr,
af|train-vertical::stop-icon-information:ltr {
  -tr-inhibit: right;
}

af|train::stop-icon-error:rtl,
af|train-vertical::stop-icon-error:rtl,
af|train::stop-icon-warning:rtl,
af|train-vertical::stop-icon-warning:rtl,
af|train::stop-icon-confirmation:rtl,
af|train-vertical::stop-icon-confirmation:rtl,
af|train::stop-icon-information:rtl,
af|train-vertical::stop-icon-information:rtl {
  -tr-inhibit: left;
}

af|train::stop-icon-error,
af|train-vertical::stop-icon-error{
  background-color: -tr-property-ref(".AFErrorColor:alias","color");
  background-image: url('/afr/alta-v1/alta-v1.1/trainStep_error_glyph.png');
}

af|train::stop-icon-warning,
af|train-vertical::stop-icon-warning {
  background-color: -tr-property-ref(".AFWarningColor:alias","color");
  background-image: url('/afr/alta-v1/alta-v1.1/trainStep_warning_glyph.png');
}

af|train::stop-icon-confirmation,
af|train-vertical::stop-icon-confirmation {
  background-color: -tr-property-ref(".AFConfimationColor:alias","color");
  background-image: url('/afr/alta-v1/alta-v1.1/trainStep_checkMark_glyph_white.png');
}

af|train::stop-icon-information,
af|train-vertical::stop-icon-information {
  background-color: -tr-property-ref(".AFInformationColor:alias","color");
  background-image: url('/afr/alta-v1/alta-v1.1/trainStep_information_glyph.png');
}

@agent (touchScreen:none) {
  af|train::stop-icon-error:hover,
  af|train-vertical::stop-icon-error:hover,
  af|train::stop-icon-warning:hover,
  af|train-vertical::stop-icon-warning:hover,
  af|train::stop-icon-confirmation:hover,
  af|train-vertical::stop-icon-confirmation:hover,
  af|train::stop-icon-information:hover,
  af|train-vertical::stop-icon-information:hover {
    background-color:  -tr-property-ref(".AFButtonHoverSecondaryColor:alias","color");
    border-color: -tr-property-ref(".AFButtonHoverSecondaryColor:alias","color");
  }
}

/*
 * This is to eliminate native elements in selectOneChoice rendering.
 */
@agent (touchScreen:none) {
  af|selectOneChoice {
    -tr-rendering-mode: alta-v1.1;
  }
}

af|selectOneChoice::dropdown-icon-style {
  -tr-inhibit: font-family;
  -tr-inhibit: font-weight;
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  border: 1px solid -tr-property-ref(".AFFormControlContentBorderColor:alias","color");
  background-image: url("/afr/alta-v1/dropdown_ena.png");
  background-color: -tr-property-ref(".AFFormControlContentColor:alias","color");
  background-position: center center;
  padding:6px;
  vertical-align: bottom;
  display: inline-block;
  height: 28px;
  width: 27px;
  box-sizing: border-box;
  cursor: pointer;
}
af|selectOneChoice::dropdown-icon-style:ltr {
  border-left: 0px;
}
af|selectOneChoice::dropdown-icon-style:rtl {
  border-right: 0px;
}

af|selectOneChoice::dropdown-icon-style:focus {
  outline: none;
}

@agent webkit, edge {
  af|selectOneChoice::dropdown-icon-style {
    margin-right: 0px;
    margin-left: 0px;
  }
}

@agent gecko {
  af|selectOneChoice::dropdown-icon-style {
    padding: 6px;
    margin-left: 0px;
    margin-right: 0px;
    vertical-align: top;
  }
}

@agent ie {
  af|selectOneChoice::dropdown-icon-style {
    padding: 6px;
    margin-left: 0px;
    margin-right: 0px;
  }
}

af|column::column-filter-cell af|selectOneChoice:custom::content,
af|column::data-cell af|selectOneChoice:custom::content,
af|column::banded-data-cell af|selectOneChoice:custom::content,
af|column::row-header-cell af|selectOneChoice:custom::content {
  display: table-cell;
  width:100%;
  padding:0;
  max-width:100%;
  text-indent: 5px;
}

af|selectOneChoice:custom::content {
  -tr-rule-ref: selector(".AFTextColor:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFFormControlContent:alias");
  background-color: -tr-property-ref(".AFFormControlContentColor:alias","color");
  border: 1px solid -tr-property-ref(".AFFormControlContentBorderColor:alias","color");

  border-radius: -tr-property-ref(".AFFormControlContentBorder:alias","border-radius") 0 0 -tr-property-ref(".AFFormControlContentBorder:alias","border-radius");
  height: 28px;
  min-width: 20px;
  box-sizing: border-box;
  vertical-align: middle;
  margin: 0px;
  cursor: pointer;
}
af|selectOneChoice:custom::content:ltr {
  border-right: 0px;
  padding: 0px 2px 0px 3px;
}
af|selectOneChoice:custom::content:rtl {
  border-left: 0px;
  padding: 0px 3px 0px 2px;
}
af|selectOneChoice:custom:fatal::content,
af|selectOneChoice:custom:error::content,
af|selectOneChoice:fatal::dropdown-icon-style,
af|selectOneChoice:error::dropdown-icon-style {
  border: 2px solid -tr-property-ref(".AFErrorColor:alias","color");
}
af|selectOneChoice:custom:warning::content,
af|selectOneChoice:warning::dropdown-icon-style {
  border: 2px solid -tr-property-ref(".AFWarningColor:alias","color");
}
af|selectOneChoice:custom:error::content:ltr,
af|selectOneChoice:custom:fatal::content:ltr,
af|selectOneChoice:custom:warning::content:ltr,
af|selectOneChoice:error::dropdown-icon-style:rtl,
af|selectOneChoice:fatal::dropdown-icon-style:rtl,
af|selectOneChoice:warning::dropdown-icon-style:rtl {
  border-right: 0;
}
af|selectOneChoice:custom:error::content:rtl,
af|selectOneChoice:custom:fatal::content:rtl,
af|selectOneChoice:custom:warning::content:rtl,
af|selectOneChoice:error::dropdown-icon-style:ltr,
af|selectOneChoice:fatal::dropdown-icon-style:ltr,
af|selectOneChoice:warning::dropdown-icon-style:ltr {
  border-left: 0;
}

af|selectOneChoice:custom:disabled::content {
  background-color: -tr-property-ref(".AFFormControlContentDisabledColor:alias","color");
  border-color: -tr-property-ref(".AFFormControlContentBorderDisabledColor:alias","color");
  color: -tr-property-ref(".AFTextDisabledColor:alias","color");
}

af|column::column-filter-cell af|selectOneChoice::dropdown-icon-style,
af|column::data-cell af|selectOneChoice::dropdown-icon-style,
af|column::banded-data-cell af|selectOneChoice::dropdown-icon-style,
af|column::row-header-cell af|selectOneChoice::dropdown-icon-style {
  background-color: -tr-property-ref(".AFFormControlContentColor:alias","color");
  display: table-cell;
}

af|selectOneChoice:focus-target::control {
  outline: dotted 1px -tr-property-ref(".AFShadowColor:alias","color");
}

af|selectOneChoice:disabled:focus-target::control {
  outline: none;
}

@agent webkit and (version: 537.*) {
  af|selectOneChoice:custom::content {
    vertical-align: middle;
  }
  af|selectOneChoice:custom::content:ltr {
    padding: 0 0 0 5px;
  }
  af|selectOneChoice:custom::content:rtl {
    padding: 0 5px 0 0;
  }

  .AFPanelFormLayoutContentCell af|selectOneChoice:custom::content {
    vertical-align: middle;
  }

  af|richTextEditor af|toolbar::item af|selectOneChoice:focus-target::control,
  af|selectOneChoice:focus-target::control {
    outline: -webkit-focus-ring-color auto 5px;
  }
}

@agent gecko {
  af|selectOneChoice:custom::content {
    vertical-align: middle;
  }

  .AFPanelFormLayoutContentCell af|selectOneChoice:custom::content {
    vertical-align: middle;
  }
}


af|richTextEditor af|toolbar::item af|selectOneChoice:custom::content {
  vertical-align: middle;
  width: 120px;
}

HTML BODY af|selectOneChoice:custom.AFStretchWidth af|selectOneChoice::content {
  width: calc(90% - 27px);
}

af|selectOneChoice::item,
af|selectOneChoice::item:selected,
af|selectOneChoice::item:highlighted {
  padding: 6px 20px 7px 7px;
}

af|selectOneChoice:custom:error::control,
af|selectOneChoice:custom:fatal::control,
af|selectOneChoice:custom:warning::control {
  outline: none;
}

af|selectOneChoice::item:selected {
  border: 1px solid transparent;
  background-color: -tr-property-ref(".AFSelectedColor:alias","color");
}

@agent ie, edge {
  af|selectOneChoice::dropdown-panel:scroll {
    overflow-x: hidden;
  }
}

@agent (touchScreen:none) {

  af|selectOneChoice:active::dropdown-icon-style,
  af|selectOneChoice:depressed::dropdown-icon-style {
    background-image: url("/afr/alta-v1/dropdown_act.png");
  }

  af|selectOneChoice:hover::dropdown-icon-style {
    background-image: url("/afr/alta-v1/dropdown_ovr.png");
  }

  af|selectOneChoice::dropdown-icon-style:hover:active {
    background-image: url("/afr/alta-v1/dropdown_act.png");
  }

  af|selectOneChoice:disabled:hover::dropdown-icon-style {
    background-image: url("/afr/alta-v1/dropdown_dis.png");
  }

  af|selectOneChoice:click-to-edit:read-only:hover-target::content {
    -tr-rule-ref: selector(".AFC2EContentTransparent:alias");
  }

  af|selectOneChoice:custom:click-to-edit:disabled:hover-target::content {
    background-color: -tr-property-ref(".AFFormControlContentDisabledColor:alias","color");
    border-color: -tr-property-ref(".AFFormControlContentBorderDisabledColor:alias","color");
  }

  af|selectOneChoice:custom:click-to-edit:hover-target::content {
   -tr-rule-ref: selector(".AFC2EContentHover:alias");
  }

  af|selectOneChoice:custom:click-to-edit:hover-target::dropdown-icon-style {
    -tr-rule-ref: selector(".AFC2EContentHover:alias");
    background-image: url("/afr/alta-v1/dropdown_ovr.png");
  }

  af|selectOneChoice:custom:click-to-edit:disabled:hover-target::dropdown-icon-style {
    background-color: -tr-property-ref(".AFFormControlContentDisabledColor:alias","color");
    border-color: -tr-property-ref(".AFFormControlContentBorderDisabledColor:alias","color");
    background-image: url("/afr/alta-v1/dropdown_dis.png");
  }

  af|selectOneChoice:click-to-edit:focus-target:hover-target::content {
   -tr-rule-ref: selector(".AFC2EContentFocus:alias");
  }

  af|selectOneChoice:click-to-edit:focus-target:hover-target::dropdown-icon-style {
   -tr-rule-ref: selector(".AFC2EContentFocus:alias");
   background-image: url("/afr/alta-v1/dropdown_act.png");
  }

}

af|selectOneChoice:custom:click-to-edit::content,
af|selectOneChoice:custom:click-to-edit:disabled::content,
af|selectOneChoice:click-to-edit:read-only::content {
  -tr-rule-ref: selector(".AFC2EContentTransparent:alias");
}

af|selectOneChoice:custom:click-to-edit::dropdown-icon-style {
  -tr-rule-ref: selector(".AFC2EContentTransparent:alias");
  background-image: url("/afr/alta-v1/dropdown_ena.png");
}

af|selectOneChoice:custom:click-to-edit:disabled::dropdown-icon-style {
  -tr-rule-ref: selector(".AFC2EContentTransparent:alias");
  background-image: url("/afr/alta-v1/dropdown_dis.png");
}


af|selectOneChoice:custom:click-to-edit:focus-target::content {
 -tr-rule-ref: selector(".AFC2EContentFocus:alias");
}

af|selectOneChoice:custom:click-to-edit:focus-target::dropdown-icon-style {
 -tr-rule-ref: selector(".AFC2EContentFocus:alias");
 background-image: url("/afr/alta-v1/dropdown_act.png");
}

af|selectOneChoice:disabled::dropdown-icon-style,
af|selectOneChoice:disabled::dropdown-icon-style:active,
af|selectOneChoice:disabled::dropdown-icon-style:hover,
af|selectOneChoice::dropdown-icon-style:disabled,
af|selectOneChoice::dropdown-icon-style:disabled:active,
af|selectOneChoice::dropdown-icon-style:disabled:hover {
  background-image: url("/afr/alta-v1/dropdown_dis.png");
  background-color:  -tr-property-ref(".AFFormControlContentBackgroundDisabled:alias","background-color");
  border-color: -tr-property-ref(".AFFormControlContentBorderDisabledColor:alias","color");;
}

af|inputDate {
  -tr-layout: navigator date compactTime today timeZone;
}

af|chooseDate {
  -tr-layout: navigator date;
}

@agent (touchScreen) {
  af|inputDate {
    -tr-layout: navigator compactDate time today timeZone;
  }

  af|chooseDate {
    -tr-layout: navigator compactDate;
  }
}
