/*
 * Copyright (c) 2015 Samsung Electronics Co., Ltd
 *
 * Licensed under the Flora License, Version 1.1 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://floralicense.org/license/
 *
 * 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.
 */

/***************************************************************************
                  Body
***************************************************************************/
/***************************************************************************
                   Action Bar / Header
***************************************************************************/
/****************************************************************************
               Circle Progress Bar
****************************************************************************/
/****************************************************************************
		Progress Bar
****************************************************************************/
/****************************************************************************
		Processing
****************************************************************************/
/***************************************************************************
                   Buttons
***************************************************************************/
/***************************************************************************
                   Popup
***************************************************************************/
/***************************************************************************
                   Footer
***************************************************************************/
/***************************************************************************
                   Toast Popup
***************************************************************************/
/***************************************************************************
                   Small Toast Popup
***************************************************************************/
/***************************************************************************
                   Option Popup
***************************************************************************/
/***************************************************************************
                  circular index scrollbar
***************************************************************************/
/***************************************************************************
                  Listview
***************************************************************************/
/* rgba(0, 0, 0, 1) */
/****************************************************************************
               Listview with Marquee
****************************************************************************/
/***************************************************************************
                   Multiline List
***************************************************************************/
/***************************************************************************
                   Checkbox/Radio
***************************************************************************/
/***************************************************************************
						Page Indicator
***************************************************************************/
/****************************************************************************
		Toggle Switch
****************************************************************************/
/* rgba(77, 207, 255, 1) */
/* rgba(54, 145, 179, 1) */
/* rgba(77, 207, 255, 0.3) */
/* rgba(250, 250, 250, 0.5) */
/* rgba(77, 207, 255, 1) */
/*rgba(54, 145, 179, 1)*/
/* rgba(77, 207, 255, 0.3) */
/* rgba(250, 250, 250, 0.3) */
/* W014L5 */
/* W014L5P */
/* W014L5D */
/* W014L5 */
/* W014L5P */
/* W014L5D */
/***************************************************************************
                   Scroller
***************************************************************************/
/***************************************************************************
                   More options
***************************************************************************/
/***************************************************************************
                   Selector
***************************************************************************/
/***************************************************************************
                   Text Input
***************************************************************************/
/***************************************************************************
                   Slider
***************************************************************************/
/***************************************************************************
                   Hyper Link
***************************************************************************/
/***************************************************************************
                   Number Picker
***************************************************************************/
/***************************************************************************
                   Time Picker
***************************************************************************/
/***************************************************************************
                   Date Picker
***************************************************************************/
/***************************************************************************
                   Time/Number/Date Indicator
***************************************************************************/
/***************************************************************************
                   More Options
***************************************************************************/
/***************************************************************************
                   IconButton
***************************************************************************/
/************************************************************************/
/*                           fixedUIStyle.less                          */
/************************************************************************/
/* When system font-size is changed, winset size (ex. header, footer, button, etc,
   include font) also changed. But in UX guide, some UI elements should have fixed
   size regardless of system font size.
   So, this less file supports fixed style for some elements.
   - Layout: header, footer, button
   - Popup : popup header, popup footer
   - toggleswitch
   - progress: text for ratio
*/
/***********************************************************************/
/*                         Layout(FIXED)                               */
/***********************************************************************/
/**********************************************************************/
/*                       Popup(FIXED)                                 */
/**********************************************************************/
/**********************************************************************/
/*                      ToggleSwitch(FIXED)                           */
/**********************************************************************/
/**********************************************************************/
/*                      List(FIXED)                                   */
/**********************************************************************/
/************************
Listview
*************************/
/***************************************************************************
                   Common Style

***************************************************************************/
/***************************************************************************
                   Development Tip
  If you want to implement specific css code of circle device,
  you should implement specific code here.
  But when you implement code, you should check duplicate value
  between common/layout.less and this file.
  If you have duplicate value, please change static value to variable value.
***************************************************************************/
body {
  background: rgba(0, 0, 0, 1);
  color: rgba(204, 204, 204, 1);
}
.ui-page {
  background: rgba(0, 0, 0, 1);
}
.ui-page .ui-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 5.75rem;
  line-height: 39px;
  background-color: transparent;
  text-align: center;
  margin-top: 1.4375rem;
}
.ui-page .ui-header.ui-header-medium {
  margin-top: 0.75rem;
}
.ui-page .ui-header.ui-header-medium .ui-title {
  margin-bottom: 0.875rem;
}
.ui-page .ui-header.ui-header-medium .ui-subtitle {
  margin-top: -0.4375rem;
}
.ui-page .ui-header.ui-header-small {
  margin-top: 0.125rem;
}
.ui-page .ui-header.ui-header-small .ui-title {
  margin-bottom: 0.25rem;
}
.ui-page .ui-header.ui-header-small .ui-subtitle {
  margin-top: 0.1875rem;
}
.ui-page .ui-header.ui-header-smaller {
  margin-top: 0.125rem;
  height: 5.0625rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.ui-page .ui-header .ui-title {
  color: rgba(77, 207, 255, 1);
  margin: 0.875rem 4rem 1.5625rem;
  padding-left: 0;
  padding-right: 0;
  font-size: 30px;
  -webkit-mask-image: none;
          mask-image: none;
}
.ui-page .ui-header .ui-title.ui-icon {
  background: none !important;
  padding-left: 1.5rem;
}
.ui-page .ui-header.ui-header-big {
  height: 5.875rem;
}
.ui-page .ui-header.ui-header-big .ui-title {
  font-size: 2rem;
  margin-top: 1.75rem;
  margin-bottom: 1.6875rem;
  color: rgba(77, 207, 255, 1);
}
.ui-page .ui-header .ui-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(77, 207, 255, 1);
  font-size: 1.5rem;
  font-weight: normal;
  margin: -1.125rem 2.1875rem 0;
  line-height: 2rem;
}
.ui-page .ui-header.ui-has-more .ui-title {
  padding-right: 1.5rem;
  -webkit-mask-image: none;
          mask-image: none;
}
.ui-page .ui-header.ui-has-more .ui-more {
  position: fixed;
  top: 50%;
  right: 0;
  width: 50px;
  height: 140px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  border: 0 none;
  padding: 0;
}
.ui-page .ui-header.ui-has-more .ui-more.ui-icon-overflow {
  -webkit-mask-image: none;
          mask-image: none;
  -webkit-mask-position: initial;
          mask-position: initial;
  background-color: transparent;
  overflow: visible;
}
.ui-page .ui-header.ui-has-more .ui-more.ui-icon-overflow[disabled="disabled"] {
  -webkit-mask-position: initial;
          mask-position: initial;
}
.ui-page .ui-header.ui-has-more .ui-more.ui-icon-overflow:active {
  background-color: transparent;
}
.ui-page .ui-header.ui-header-has-only-more-button {
  position: absolute;
}
.ui-page .ui-more {
  position: fixed;
  top: 50%;
  right: 0;
  width: 50px;
  height: 140px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: transparent;
  overflow: visible;
  border: 0 none;
  padding: 0;
  text-indent: -9999px;
}
.ui-page .ui-more::before {
  content: "";
  position: absolute;
  width: 12.5rem;
  height: 12.5rem;
  background-color: rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  top: 50%;
  left: 50%;
  margin-top: -6.25rem;
  margin-left: -6.25rem;
  transition: all ease-out 200ms;
  pointer-events: none;
}
.ui-page .ui-more:active::before {
  opacity: 1;
  transition: -webkit-transform ease-out 300ms;
  transition: transform ease-out 300ms;
  transition: transform ease-out 300ms, -webkit-transform ease-out 300ms;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.ui-page .ui-more::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 2.25rem;
  -webkit-mask-box-image-source: url("images/Actionbar/b_more_option.png");
  background-color: rgba(250, 250, 250, 1);
  border-radius: 50%;
  top: 50%;
  right: 0.375rem;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.ui-page .ui-content {
  text-align: center;
  font-size: 32px;
  line-height: 2.625rem;
}
.ui-page .ui-content.ui-content-padding {
  font-stretch: ultra-condensed;
  padding-left: 2.0625rem;
  padding-right: 2.0625rem;
}
.ui-page .ui-footer.ui-bottom-button {
  position: fixed !important;
  bottom: 0.375rem;
  z-index: 1000;
  max-height: 6.25rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 6.25rem;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  -ms-flex-pack: center;
      justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  -ms-flex-align: center;
      align-items: center;
  line-height: 2.3125rem;
  position: relative;
  font-size: 1.75rem;
  font-weight: bold;
  color: rgba(250, 250, 250, 1);
  padding: 0.5rem 1.125rem 0 1.4375rem 0;
  margin: 0.5rem 0;
  height: 4.5rem;
  width: 13.125rem;
  background-color: #000000;
  border: 0.1875rem solid #009af9;
  border-radius: 3.75rem;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 53, 74, 0.9);
  transition: opacity 200ms;
  opacity: 0;
  z-index: -1;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-active {
  color: rgba(250, 250, 250, 1);
  background-color: #002f4d;
  height: 4.5rem;
  width: 13.125rem;
  border-radius: 4.0625rem;
  font-size: 1.875rem;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-active::after {
  -webkit-animation: btn-footer-opacity-press linear 565ms;
          animation: btn-footer-opacity-press linear 565ms;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-inactive {
  background-color: #000000;
  height: 4.5rem;
  width: 13.125rem;
  border-radius: 4.0625rem;
  font-size: 1.75rem;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-inactive::after {
  -webkit-animation: btn-footer-opacity-press linear 565ms;
          animation: btn-footer-opacity-press linear 565ms;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-state-disabled,
.ui-page .ui-footer.ui-bottom-button .ui-btn:disabled {
  color: rgba(250, 250, 250, 0.35);
  background-color: #1a1a1a;
  border-color: #005e99;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-icon-only {
  padding: 0.875rem 0 0.875rem 0;
}
/***************************************************************************
                   Page Scroll
***************************************************************************/
.ui-page.ui-scroll-on {
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
  -moz-overflow-scrolling: auto;
  -o-overflow-scrolling: auto;
  -ms-overflow-scrolling: auto;
  overflow-scrolling: auto;
}
.ui-page.ui-scroll-on .ui-content {
  margin-top: 7.1875rem;
  padding-bottom: 6.25rem;
  padding-top: 0;
}
.ui-page.ui-scroll-on .ui-header ~ .ui-content {
  margin-top: 0;
}
.ui-page.ui-scroll-on .ui-header ~ .ui-scroller > .ui-content {
  margin-top: 0;
}
.ui-page.ui-scroll-on .ui-content ~ .ui-footer:not(.ui-expandable-footer) {
  margin-top: -5.3125rem;
}
/*
 * Common definition for theme
 */
/***************************************************************
   default font size (base font from WRT)
   => small: 13px
   => normal: 17px
   => large: 20px

This is only applied to gear2.
so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
This value only used for @rem_base, not for html font-size
html font-size is set by WRT base font-size
***************************************************************/
a {
  color: rgba(204, 204, 204, 1);
}
/***************************************************************************
                  toggle switch
***************************************************************************/
.ui-switch-text {
  margin-top: 60px;
  margin-bottom: 48px;
  font-size: 34px;
  padding: 0;
}
.ui-switch-sub-text {
  margin-top: 48px;
  font-size: 26px;
  color: T161;
}
.ui-toggleswitch {
  position: relative;
  display: inline-block;
  width: 4.75rem;
  height: 3.1875rem;
}
.ui-toggleswitch.ui-toggleswitch-large {
  width: 76px;
  height: 76px;
}
.ui-toggleswitch input.ui-switch-input {
  border: 0.125rem solid rgba(250, 250, 250, 0.3);
  background-color: transparent;
  border-radius: 2.9375rem;
  width: 4.75rem;
  height: 2.9375rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  top: 0.125rem;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-mask-image: none;
          mask-image: none;
  -webkit-mask-size: 100% 100%;
  -moz-mask-size: 100% 100%;
  -ms-mask-size: 100% 100%;
  -o-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: background-color 150ms linear;
}
.ui-toggleswitch input.ui-switch-input:checked {
  background-color: #4297ff;
  border: 0;
}
.ui-toggleswitch input.ui-switch-input::before {
  content: none;
}
.ui-toggleswitch input.ui-switch-input:active {
  transition: background-color 150ms linear;
  background-color: #000000;
}
.ui-toggleswitch input.ui-switch-input:active ~ .ui-switch-activation,
.ui-toggleswitch input.ui-switch-input:active ~ .ui-switch-button {
  background-color: transparent;
}
.ui-toggleswitch input.ui-switch-input:active ~ .ui-switch-activation::before,
.ui-toggleswitch input.ui-switch-input:active ~ .ui-switch-button::before {
  background-color: #bebebe;
}
.ui-toggleswitch input.ui-switch-input:disabled {
  background-color: transparent;
}
.ui-toggleswitch input.ui-switch-input:disabled ~ .ui-switch-activation,
.ui-toggleswitch input.ui-switch-input:disabled ~ .ui-switch-button {
  background-color: transparent;
}
.ui-toggleswitch input.ui-switch-input:disabled ~ .ui-switch-activation::before,
.ui-toggleswitch input.ui-switch-input:disabled ~ .ui-switch-button::before {
  background-color: #4b4b4b;
}
.ui-toggleswitch .ui-switch-activation,
.ui-toggleswitch .ui-switch-button {
  width: 100%;
  height: 100%;
  -webkit-mask-image: none;
  background-color: transparent;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}
.ui-toggleswitch .ui-switch-activation::before,
.ui-toggleswitch .ui-switch-button::before {
  position: absolute;
  content: '';
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  height: 3.1875rem;
  width: 3.1875rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  background-color: #ffffff;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 300ms;
  transition-timing-function: ease-out;
  border-radius: 50%;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
  box-sizing: border-box;
}
.ui-toggleswitch .ui-switch-activation::after,
.ui-toggleswitch .ui-switch-button::after {
  content: none;
}
.ui-toggleswitch input.ui-switch-input:checked {
  background-color: #4297ff;
}
.ui-toggleswitch input.ui-switch-input:checked ~ .ui-switch-activation,
.ui-toggleswitch input.ui-switch-input:checked ~ .ui-switch-button {
  width: 100%;
  height: 100%;
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}
.ui-toggleswitch input.ui-switch-input:checked ~ .ui-switch-activation::before,
.ui-toggleswitch input.ui-switch-input:checked ~ .ui-switch-button::before {
  -webkit-transform: translateX(1.5625rem);
      -ms-transform: translateX(1.5625rem);
          transform: translateX(1.5625rem);
  background-color: #ffffff;
  border: 0.125rem solid #0d7cd6;
}
.ui-toggleswitch input.ui-switch-input:checked ~ .ui-switch-activation::after,
.ui-toggleswitch input.ui-switch-input:checked ~ .ui-switch-button::after {
  content: none;
}
.ui-toggleswitch input.ui-switch-input:checked:active {
  background-color: #4297ff;
}
.ui-toggleswitch input.ui-switch-input:checked:active ~ .ui-switch-activation,
.ui-toggleswitch input.ui-switch-input:checked:active ~ .ui-switch-button {
  background-color: transparent;
}
.ui-toggleswitch input.ui-switch-input:checked:active ~ .ui-switch-activation::before,
.ui-toggleswitch input.ui-switch-input:checked:active ~ .ui-switch-button::before {
  background-color: #bebebe;
  border-color: #0777d3;
}
.ui-toggleswitch input.ui-switch-input:checked:disabled {
  background-color: #142e4d;
}
.ui-toggleswitch input.ui-switch-input:checked:disabled ~ .ui-switch-activation,
.ui-toggleswitch input.ui-switch-input:checked:disabled ~ .ui-switch-button {
  background-color: transparent;
}
.ui-toggleswitch input.ui-switch-input:checked:disabled ~ .ui-switch-activation::before,
.ui-toggleswitch input.ui-switch-input:checked:disabled ~ .ui-switch-button::before {
  background-color: #4b4b4b;
  border-color: #032441;
}
/***************************************************************************
                                  Popup
***************************************************************************/
@-webkit-keyframes toastCheck {
  0% {
    -webkit-mask-position: 0rem 0rem;
            mask-position: 0rem 0rem;
  }
  6% {
    -webkit-mask-position: -5.125rem 0rem;
            mask-position: -5.125rem 0rem;
  }
  11% {
    -webkit-mask-position: -10.25rem 0rem;
            mask-position: -10.25rem 0rem;
  }
  17% {
    -webkit-mask-position: -15.375rem 0rem;
            mask-position: -15.375rem 0rem;
  }
  22% {
    -webkit-mask-position: 0rem -5.125rem;
            mask-position: 0rem -5.125rem;
  }
  28% {
    -webkit-mask-position: -5.125rem -5.125rem;
            mask-position: -5.125rem -5.125rem;
  }
  33% {
    -webkit-mask-position: -10.25rem -5.125rem;
            mask-position: -10.25rem -5.125rem;
  }
  39% {
    -webkit-mask-position: -15.375rem -5.125rem;
            mask-position: -15.375rem -5.125rem;
  }
  44% {
    -webkit-mask-position: 0rem -10.25rem;
            mask-position: 0rem -10.25rem;
  }
  50% {
    -webkit-mask-position: -5.125rem -10.25rem;
            mask-position: -5.125rem -10.25rem;
  }
  56% {
    -webkit-mask-position: -10.25rem -10.25rem;
            mask-position: -10.25rem -10.25rem;
  }
  61% {
    -webkit-mask-position: -15.375rem -10.25rem;
            mask-position: -15.375rem -10.25rem;
  }
  67% {
    -webkit-mask-position: 0rem -15.375rem;
            mask-position: 0rem -15.375rem;
  }
  72% {
    -webkit-mask-position: -5.125rem -15.375rem;
            mask-position: -5.125rem -15.375rem;
  }
  78% {
    -webkit-mask-position: -10.25rem -15.375rem;
            mask-position: -10.25rem -15.375rem;
  }
  83% {
    -webkit-mask-position: -15.375rem -15.375rem;
            mask-position: -15.375rem -15.375rem;
  }
  89% {
    -webkit-mask-position: 0rem -20.5rem;
            mask-position: 0rem -20.5rem;
  }
  94% {
    -webkit-mask-position: -5.125rem -20.5rem;
            mask-position: -5.125rem -20.5rem;
  }
  100% {
    -webkit-mask-position: -10.25rem -20.5rem;
            mask-position: -10.25rem -20.5rem;
  }
}
@keyframes toastCheck {
  0% {
    -webkit-mask-position: 0rem 0rem;
            mask-position: 0rem 0rem;
  }
  6% {
    -webkit-mask-position: -5.125rem 0rem;
            mask-position: -5.125rem 0rem;
  }
  11% {
    -webkit-mask-position: -10.25rem 0rem;
            mask-position: -10.25rem 0rem;
  }
  17% {
    -webkit-mask-position: -15.375rem 0rem;
            mask-position: -15.375rem 0rem;
  }
  22% {
    -webkit-mask-position: 0rem -5.125rem;
            mask-position: 0rem -5.125rem;
  }
  28% {
    -webkit-mask-position: -5.125rem -5.125rem;
            mask-position: -5.125rem -5.125rem;
  }
  33% {
    -webkit-mask-position: -10.25rem -5.125rem;
            mask-position: -10.25rem -5.125rem;
  }
  39% {
    -webkit-mask-position: -15.375rem -5.125rem;
            mask-position: -15.375rem -5.125rem;
  }
  44% {
    -webkit-mask-position: 0rem -10.25rem;
            mask-position: 0rem -10.25rem;
  }
  50% {
    -webkit-mask-position: -5.125rem -10.25rem;
            mask-position: -5.125rem -10.25rem;
  }
  56% {
    -webkit-mask-position: -10.25rem -10.25rem;
            mask-position: -10.25rem -10.25rem;
  }
  61% {
    -webkit-mask-position: -15.375rem -10.25rem;
            mask-position: -15.375rem -10.25rem;
  }
  67% {
    -webkit-mask-position: 0rem -15.375rem;
            mask-position: 0rem -15.375rem;
  }
  72% {
    -webkit-mask-position: -5.125rem -15.375rem;
            mask-position: -5.125rem -15.375rem;
  }
  78% {
    -webkit-mask-position: -10.25rem -15.375rem;
            mask-position: -10.25rem -15.375rem;
  }
  83% {
    -webkit-mask-position: -15.375rem -15.375rem;
            mask-position: -15.375rem -15.375rem;
  }
  89% {
    -webkit-mask-position: 0rem -20.5rem;
            mask-position: 0rem -20.5rem;
  }
  94% {
    -webkit-mask-position: -5.125rem -20.5rem;
            mask-position: -5.125rem -20.5rem;
  }
  100% {
    -webkit-mask-position: -10.25rem -20.5rem;
            mask-position: -10.25rem -20.5rem;
  }
}
.ui-popup {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 1);
  /***********************
	Popup Container Scroll
	***********************/
  /****************************************
	Popup Toast
	****************************************/
  /***********************
	Option Popup
	***********************/
}
.ui-popup ::-webkit-scrollbar {
  display: none;
}
.ui-popup .ui-popup-header {
  text-align: center;
  min-height: 99px;
  background-color: transparent;
  color: rgba(77, 207, 255, 1);
  padding-top: 60px;
  padding-right: 61px;
  padding-bottom: 0;
  padding-left: 61px;
}
.ui-popup .ui-popup-header + .ui-popup-content {
  padding-top: 26px;
}
.ui-popup .ui-popup-content {
  color: rgba(204, 204, 204, 1);
  background-color: transparent;
  font-size: 32px;
  line-height: 2.625rem;
  padding: 3.75rem 1.875rem 0.625rem;
  text-align: center;
}
.ui-popup .ui-popup-content .ui-listview,
.ui-popup .ui-popup-content .ui-inline-listview {
  margin: -1.5625rem -3.4375rem -1rem -3.4375rem;
}
.ui-popup.ui-has-side-buttons .ui-popup-content {
  padding-left: 4rem;
  padding-right: 4rem;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn {
  top: 33.33%;
  position: fixed;
  text-indent: -9999px;
  padding: 0;
  line-height: 2.3125rem;
  font-size: 1.75rem;
  font-weight: bold;
  padding: 0.5rem 1.125rem 0 1.4375rem 0;
  color: rgba(250, 250, 250, 1);
  margin: 0.5rem 0;
  height: 6.25rem;
  width: 3.75rem;
  background-color: #000000;
  border: 0.1875rem solid #009af9;
  border-radius: 3.75rem;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn::before {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 53, 74, 0.9);
  transition: opacity 200ms;
  opacity: 0;
  z-index: -1;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn::before {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-active {
  color: rgba(250, 250, 250, 1);
  background-color: #002f4d;
  height: 6.25rem;
  width: 3.75rem;
  border-radius: 4.0625rem;
  font-size: 1.875rem;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-active::after {
  -webkit-animation: btn-footer-opacity-press linear 565ms;
          animation: btn-footer-opacity-press linear 565ms;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-inactive {
  background-color: #000000;
  height: 6.25rem;
  width: 3.75rem;
  border-radius: 4.0625rem;
  font-size: 1.75rem;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-inactive::after {
  -webkit-animation: btn-footer-opacity-press linear 565ms;
          animation: btn-footer-opacity-press linear 565ms;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-state-disabled,
.ui-popup .ui-popup-footer.ui-side-button .ui-btn:disabled {
  color: rgba(250, 250, 250, 0.35);
  background-color: #1a1a1a;
  border-color: #005e99;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-icon-only {
  padding: 0.875rem 0 0.875rem 0;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn:nth-child(1) {
  left: 0.125rem;
}
.ui-popup .ui-popup-footer.ui-side-button .ui-btn:nth-child(2) {
  right: 0.125rem;
}
.ui-popup .ui-popup-footer.ui-bottom-button {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  max-height: 6.25rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 6.25rem;
}
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 2.3125rem;
  position: relative;
  font-size: 1.75rem;
  font-weight: bold;
  color: rgba(250, 250, 250, 1);
  padding: 0.5rem 1.125rem 0 1.4375rem 0;
  margin: 0.5rem 0;
  height: 3.75rem;
  width: 13.125rem;
  background-color: #000000;
  border: 0.1875rem solid #009af9;
  border-radius: 3.75rem;
}
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 53, 74, 0.9);
  transition: opacity 200ms;
  opacity: 0;
  z-index: -1;
}
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-active {
  color: rgba(250, 250, 250, 1);
  background-color: #002f4d;
  height: 3.75rem;
  width: 13.125rem;
  border-radius: 4.0625rem;
  font-size: 1.875rem;
}
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-active::after {
  -webkit-animation: btn-footer-opacity-press linear 565ms;
          animation: btn-footer-opacity-press linear 565ms;
}
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-inactive {
  background-color: #000000;
  height: 3.75rem;
  width: 13.125rem;
  border-radius: 4.0625rem;
  font-size: 1.75rem;
}
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-inactive::after {
  -webkit-animation: btn-footer-opacity-press linear 565ms;
          animation: btn-footer-opacity-press linear 565ms;
}
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-state-disabled,
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn:disabled {
  color: rgba(250, 250, 250, 0.35);
  background-color: #1a1a1a;
  border-color: #005e99;
}
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-icon-only {
  padding: 0.875rem 0 0.875rem 0;
}
.ui-popup-more-options {
  background-color: transparent;
}
.ui-popup-more-options .ui-selector {
  background-color: rgba(0, 0, 0, 0.95);
}
.ui-popup-more-options .ui-selector .ui-selector-indicator-text {
  color: rgba(250, 250, 250, 1);
}
.ui-popup-more-options .ui-selector .ui-selector-indicator-subtext {
  color: rgba(77, 207, 255, 1);
}
.ui-popup-more-options .ui-selector .ui-layer .ui-item {
  background-color: rgba(250, 250, 250, 1);
}
.ui-popup-more-options .ui-selector .ui-layer .ui-item:active {
  background-color: rgba(191, 191, 191, 1);
}
.ui-popup-more-options .ui-selector .ui-layer .ui-item.ui-item-active:active {
  background-color: rgba(250, 250, 250, 1);
}
.ui-popup-more-options .ui-selector .ui-layer .ui-item::before {
  background-color: rgba(8, 8, 8, 1);
}
.ui-popup-more-options .ui-selector .ui-layer .ui-item::before:active {
  background-color: rgba(22, 165, 217, 1);
}
.ui-popup-more-options .ui-selector .ui-layer .ui-item.ui-item-active::before {
  background-color: rgba(22, 165, 217, 1);
}
.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(77, 207, 255, 0);
  -webkit-mask-image: url(images/Popup/b_popup_edge_inner_glow.png);
          mask-image: url(images/Popup/b_popup_edge_inner_glow.png);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
  margin-top: 4.75rem;
  margin-bottom: 4.75rem;
  padding-top: 0;
}
.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header + .ui-popup-content {
  margin-top: 0;
  padding-top: 8px;
}
.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer {
  margin-top: -4.75rem;
}
.ui-popup.ui-popup-toast {
  min-height: 100%;
  background-color: rgba(0, 0, 0, 1);
  background-image: none;
  border: none;
  margin: 0;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /****************************************
		Popup Toast Small
		****************************************/
}
.ui-popup.ui-popup-toast.ui-popup-active,
.ui-popup.ui-popup-toast.in,
.ui-popup.ui-popup-toast.ui-build {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.ui-popup.ui-popup-toast .ui-popup-wrapper {
  width: 100%;
}
.ui-popup.ui-popup-toast .ui-popup-wrapper .ui-popup-content {
  padding: 0 1.875rem;
  height: auto;
  background-color: transparent;
  color: rgba(250, 250, 250, 1);
  font-size: 28px;
  text-align: center;
  line-height: 37px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ui-popup.ui-popup-toast.ui-popup-toast-graphic .ui-popup-wrapper .ui-popup-content {
  font-size: 32px;
  line-height: 42px;
}
.ui-popup.ui-popup-toast .ui-popup-toast-icon {
  width: 5.125rem;
  height: 5.125rem;
  margin-bottom: 1rem;
}
.ui-popup.ui-popup-toast .ui-popup-toast-check-icon {
  -webkit-mask-image: url("images/Popup/toast_check.png");
          mask-image: url("images/Popup/toast_check.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-animation-name: toastCheck;
          animation-name: toastCheck;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: step-start;
          animation-timing-function: step-start;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  background-color: rgba(230, 230, 230, 1);
}
.ui-popup.ui-popup-toast .ui-popup-toast-check-icon::after {
  content: none;
}
.ui-popup.ui-popup-toast.ui-popup-toast-small {
  height: 10rem;
  min-height: 5.375rem;
  width: 10rem;
  position: fixed;
  margin-bottom: 0.3125rem;
  background-color: rgba(48, 48, 48, 0.95);
  border: solid 0.0625rem rgba(38, 38, 38, 0.95);
  border-radius: 50%;
}
.ui-popup.ui-popup-toast.ui-popup-toast-small .ui-popup-wrapper .ui-popup-content {
  padding: 0 1.1875rem;
  max-height: 8rem;
  color: rgba(255, 255, 255, 1);
  font-size: 1.5rem;
  line-height: 2rem;
}
.ui-popup.ui-popup-toast.ui-popup-toast-small .ui-popup-toast-icon {
  -webkit-transform: translateX(-50%) scale(0.6097561);
      -ms-transform: translateX(-50%) scale(0.6097561);
          transform: translateX(-50%) scale(0.6097561);
  margin: -1rem 0;
  background-color: rgba(250, 250, 250, 1);
}
.ui-popup.ui-popup-toast.ui-popup-toast-small.ui-popup-toast-graphic-only {
  width: 5.375rem;
  height: 5.375rem;
}
.ui-popup.ui-popup-toast.ui-popup-toast-small.ui-popup-toast-graphic .ui-popup-wrapper .ui-popup-content {
  padding-bottom: 0.375rem;
}
.ui-popup.ui-ctxpopup {
  height: auto;
}
/***************************************************************************
				  listview
***************************************************************************/
.ui-page.ui-scroll-on .ui-listview:not(.ui-arc-listview-carousel-item) {
  margin-top: 3.125rem;
}
.ui-page.ui-scroll-on .ui-header ~ .ui-content .ui-listview {
  margin-top: 0;
}
.ui-page .ui-scroller.ui-snap-container .ui-header {
  margin: 0;
  height: 7.1875rem;
}
.ui-page .ui-scroller.ui-snap-container .ui-listview.ui-snap-listview {
  margin-top: 0.6875rem;
}
.ui-page .ui-scroller.ui-snap-container .ui-content {
  padding-bottom: 7.875rem;
}
.ui-listview.ui-arc-listview {
  padding-bottom: 0;
}
.ui-listview li {
  font-size: 2.25rem;
  font-weight: 500;
  min-height: 6.75rem;
  max-height: 22.5rem;
  padding: 0 1.875rem;
  border: 0 none;
  border-bottom: 0 solid transparent;
  border-image: linear-gradient(0deg, transparent, #245B85, transparent) 1;
  color: rgba(250, 250, 250, 1);
  text-align: center;
  line-height: 2.9375rem;
  box-sizing: content-box;
  transition-property: max-height;
  transition-duration: 1ms;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.ui-listview li.ui-listview-divider,
.ui-listview li.ui-li-group-index {
  height: 2.0625rem;
  min-height: 2.0625rem;
  line-height: 1.9375rem;
  background-color: transparent;
  color: rgba(199, 199, 199, 1);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0;
}
.ui-listview li.ui-listview-divider::before,
.ui-listview li.ui-li-group-index::before {
  content: "";
  height: 100%;
  width: auto;
  -webkit-mask-image: url("images/List/tw_list_sub_line_left.png");
          mask-image: url("images/List/tw_list_sub_line_left.png");
  -webkit-mask-repeat: no-repeat;
  -moz-mask-repeat: no-repeat;
  -ms-mask-repeat: no-repeat;
  -o-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 2px;
  -moz-mask-size: 100% 2px;
  -ms-mask-size: 100% 2px;
  -o-mask-size: 100% 2px;
  mask-size: 100% 2px;
  -webkit-mask-position: -0.75rem 50%;
  -moz-mask-position: -0.75rem 50%;
  -ms-mask-position: -0.75rem 50%;
  -o-mask-position: -0.75rem 50%;
  mask-position: -0.75rem 50%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.ui-listview li.ui-listview-divider::after,
.ui-listview li.ui-li-group-index::after {
  content: "";
  height: 100%;
  width: auto;
  -webkit-mask-image: url("images/List/tw_list_sub_line_right.png");
          mask-image: url("images/List/tw_list_sub_line_right.png");
  -webkit-mask-repeat: no-repeat;
  -moz-mask-repeat: no-repeat;
  -ms-mask-repeat: no-repeat;
  -o-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 2px;
  -moz-mask-size: 100% 2px;
  -ms-mask-size: 100% 2px;
  -o-mask-size: 100% 2px;
  mask-size: 100% 2px;
  -webkit-mask-position: 0.75rem 50%;
  -moz-mask-position: 0.75rem 50%;
  -ms-mask-position: 0.75rem 50%;
  -o-mask-position: 0.75rem 50%;
  mask-position: 0.75rem 50%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.ui-listview li.ui-li-btn {
  padding: 0;
}
.ui-listview li.ui-li-btn .ui-btn {
  padding: 2.625rem 2.5rem;
  margin: 0;
  line-height: inherit;
}
.ui-listview li.ui-li-btn.ui-grid-col-2 .ui-btn {
  padding: 1.75rem 1.25rem;
}
.ui-listview li.ui-li-btn.ui-grid-col-3 .ui-btn {
  padding: 1.75rem 1.875rem;
  height: 100%;
  text-indent: -9999px;
}
.ui-listview li > * {
  color: rgba(250, 250, 250, 1);
}
.ui-listview li > a:first-child:last-child,
.ui-listview li button:first-child:last-child {
  padding: 0;
  margin: 0;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.ui-listview li.li-has-multiline.ui-arc-listview-selected.li-has-2line-sub {
  padding-top: 0.5625rem;
  padding-bottom: 0.5rem;
}
.ui-listview li.li-has-multiline.ui-arc-listview-selected.li-has-3line-sub {
  padding-top: 0.0625rem;
  padding-bottom: 0.25rem;
}
.ui-listview li:last-child {
  border: 0;
}
.ui-listview li.li-divider {
  height: 2.0625rem;
  min-height: 2.0625rem;
  line-height: 1.9375rem;
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(199, 199, 199, 1);
  padding: 0;
}
.ui-listview li.ui-li-has-action-icon .ui-action-text::after {
  background-color: rgba(204, 204, 204, 1);
}
.ui-listview li.ui-li-has-action-icon .ui-action-delete {
  background-color: rgba(250, 250, 250, 1);
}
.ui-listview li.ui-li-has-action-icon .ui-action-setting {
  background-color: rgba(250, 250, 250, 1);
}
.ui-listview li.ui-li-has-action-icon .ui-action-add {
  background-color: rgba(250, 250, 250, 1);
}
.ui-listview li.ui-li-has-action-icon .ui-action-delete:active,
.ui-listview li.ui-li-has-action-icon .ui-action-setting:active,
.ui-listview li.ui-li-has-action-icon .ui-action-add:active {
  background-color: B041P;
  color: rgba(250, 250, 250, 1);
}
.ui-listview:not(.ui-arc-listview-carousel-item).ui-li-active {
  background-color: transparent;
  color: rgba(250, 250, 250, 1);
}
.ui-listview:not(.ui-arc-listview-carousel-item).ui-li-active::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-mask-image: url("images/List/b_list_focus_bg.png");
          mask-image: url("images/List/b_list_focus_bg.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  background-color: rgba(250, 250, 250, 0.65);
  pointer-events: none;
}
.ui-listview.ui-snap-listview li,
.ui-listview.ui-arc-listview-carousel-item li {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.ui-listview.ui-snap-listview li a,
.ui-listview.ui-arc-listview-carousel-item li a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui-listview.ui-snap-listview li a > span,
.ui-listview.ui-arc-listview-carousel-item li a > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ui-listview.ui-snap-listview li.ui-li-grid,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full {
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full div,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full div {
  text-align: inherit;
}
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full div::after,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full div::after {
  opacity: 0;
}
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full .ui-btn.ui-btn-no-bg.ui-btn-icon,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full .ui-btn.ui-btn-no-bg.ui-btn-icon {
  width: 4.75rem;
  height: 4.75rem;
}
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full *,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full * {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
}
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full *.ui-btn-icon,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full *.ui-btn-icon {
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn {
  padding: 0;
  margin: 0 1.125rem 0 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn.ui-btn-no-bg.ui-btn-icon::before,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn.ui-btn-no-bg.ui-btn-icon::before {
  border-radius: 50%;
}
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn.ui-btn-circle,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn.ui-btn-circle {
  border-radius: 50%;
  width: 5.5rem;
}
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn.ui-btn-circle.ui-btn-active,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn.ui-btn-circle.ui-btn-active {
  -webkit-animation: btn-circle-opacity-press linear 567ms;
          animation: btn-circle-opacity-press linear 567ms;
}
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn:last-child,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn:last-child {
  margin-right: 0;
}
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn:last-child:first-child,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn:last-child:first-child {
  margin-right: 1.25rem;
}
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn-description,
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn-description {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  margin: 0;
  width: auto;
}
.ui-listview.ui-snap-listview li .ui-li-sub-text,
.ui-listview.ui-arc-listview-carousel-item li .ui-li-sub-text {
  color: rgba(179, 179, 179, 1);
  font-size: 1.5rem;
  display: block;
  transition-property: opacity, line-height;
  transition-timing-function: ease-in-out, ease-in-out;
  transition-duration: 100ms, 200ms;
  opacity: 0;
  line-height: 0.01px;
}
.ui-listview.ui-snap-listview li.ui-snap-listview-selected,
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected,
.ui-listview.ui-snap-listview li.ui-arc-listview-selected,
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected {
  line-height: 2.9375rem;
  max-height: 45rem;
}
.ui-listview.ui-snap-listview li.ui-snap-listview-selected .ui-li-sub-text,
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected .ui-li-sub-text,
.ui-listview.ui-snap-listview li.ui-arc-listview-selected .ui-li-sub-text,
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected .ui-li-sub-text {
  opacity: 1;
  line-height: 2rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 18.75rem;
}
.ui-listview.ui-snap-listview li.ui-snap-listview-selected .ui-li-sub-text:last-child:not(:first-child),
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected .ui-li-sub-text:last-child:not(:first-child),
.ui-listview.ui-snap-listview li.ui-arc-listview-selected .ui-li-sub-text:last-child:not(:first-child),
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected .ui-li-sub-text:last-child:not(:first-child) {
  padding-top: 0.125rem;
}
.ui-listview.ui-snap-listview li.ui-snap-listview-selected.ui-li-active,
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected.ui-li-active,
.ui-listview.ui-snap-listview li.ui-arc-listview-selected.ui-li-active,
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected.ui-li-active {
  color: rgba(250, 250, 250, 1);
}
.ui-listview.ui-snap-listview li.ui-snap-listview-selected.ui-li-active::before,
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected.ui-li-active::before,
.ui-listview.ui-snap-listview li.ui-arc-listview-selected.ui-li-active::before,
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected.ui-li-active::before {
  background-color: rgba(250, 250, 250, 0.65);
}
.ui-listview.ui-snap-listview li.ui-snap-listview-selected.ui-li-active .ui-action-text:active,
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected.ui-li-active .ui-action-text:active,
.ui-listview.ui-snap-listview li.ui-arc-listview-selected.ui-li-active .ui-action-text:active,
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected.ui-li-active .ui-action-text:active {
  background-color: B041P;
  color: rgba(250, 250, 250, 1);
}
.ui-listview.ui-snap-listview li.ui-snap-listview-selected::before,
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: rgba(48, 48, 48, 0.65);
  border-radius: 20vw;
  pointer-events: none;
  z-index: -1;
}
.ui-listview.ui-snap-listview li li,
.ui-listview.ui-arc-listview-carousel-item li li {
  border: none;
}
.ui-listview.ui-snap-listview li li.ui-li-active::before,
.ui-listview.ui-arc-listview-carousel-item li li.ui-li-active::before {
  background-color: transparent;
}
.ui-listview.ui-snap-listview li:not(.ui-li-has-multiline):not(.li-has-multiline) a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.ui-listview.ui-arc-listview-carousel-item-separator {
  height: auto;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider) {
  padding: 1.5625rem 1.875rem 1.625rem;
  min-height: auto;
  color: rgba(250, 250, 250, 1);
  overflow: hidden;
  line-height: 3rem;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider)::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  content: "";
  width: 100%;
  height: 0.0625rem;
  background-color: white;
  -webkit-mask-box-image: url("images/List/tw_list_divider.png") 0 128 0 128 repeat repeat;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider):active,
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider):active a,
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-active,
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-active a {
  color: rgba(250, 250, 250, 0.4);
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-text {
  white-space: normal;
  color: rgba(204, 204, 204, 1);
  padding-top: 0.5625rem;
  padding-bottom: 0.625rem;
  font-size: 1.9375rem;
  line-height: 2.3125rem;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-text:active {
  color: rgba(204, 204, 204, 0.4);
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-multiline {
  padding-top: 0.5625rem;
  padding-bottom: 0.625rem;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-multiline,
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-multiline a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-multiline .ui-li-sub-text {
  color: rgba(179, 179, 179, 1);
  font-size: 1.5rem;
  line-height: 2rem;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-multiline a .ui-li-sub-text {
  width: 100%;
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-multiline.ui-li-active .ui-li-sub-text,
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-multiline.ui-li-active a .ui-li-sub-text {
  color: T9262P;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-thumb-left {
  padding-left: 6.25rem;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-thumb-right {
  padding-right: 6.25rem;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-thumb-left img,
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-thumb-right img {
  background-color: unset;
  position: absolute;
  top: calc(49.5%);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-thumb-left img.ui-li-thumb-left,
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-thumb-right img.ui-li-thumb-left {
  left: 1rem;
}
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-thumb-left img.ui-li-thumb-right,
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:not(.ui-listview-divider).ui-li-has-thumb-right img.ui-li-thumb-right {
  right: 1rem;
}
input[type="checkbox"]:not(.ui-switch-input),
input[type="radio"] {
  height: 76px;
  width: 76px;
}
input[type="checkbox"]:not(.ui-switch-input) {
  -webkit-mask-image: none;
          mask-image: none;
  background: radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.7) 68%, transparent 72%), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat;
  background-size: 100% 100%;
}
input[type="checkbox"]:not(.ui-switch-input)::before {
  content: "";
  -webkit-mask-image: none;
          mask-image: none;
  background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%);
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  transition: all 300ms ease-in;
}
input[type="checkbox"]:not(.ui-switch-input)::after {
  -webkit-mask-image: url('images/Controller_icon/Check/tw_btn_check_holo_dark.png');
          mask-image: url('images/Controller_icon/Check/tw_btn_check_holo_dark.png');
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
  height: 0;
  transition-property: height;
  transition-duration: 500ms;
  bottom: 0;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}
input[type="checkbox"]:not(.ui-switch-input):checked::before {
  -webkit-animation: checkon 300ms ease-out;
          animation: checkon 300ms ease-out;
  transition: none;
  -webkit-mask-image: none;
          mask-image: none;
  background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%);
  opacity: 1;
}
input[type="checkbox"]:not(.ui-switch-input):checked::after {
  background-color: rgba(77, 207, 255, 1);
  height: 100%;
}
input[type="checkbox"]:not(.ui-switch-input):active {
  background: radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.7) 68%, transparent 72%), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat;
  background-size: 100% 100%;
}
input[type="checkbox"]:not(.ui-switch-input):active::after {
  height: 0;
}
input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
  -webkit-mask-image: none;
          mask-image: none;
  background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%);
}
input[type="checkbox"]:not(.ui-switch-input):active:checked::after {
  background-color: rgba(77, 207, 255, 1);
  height: 100%;
}
input[type="checkbox"]:not(.ui-switch-input):disabled {
  background: radial-gradient(transparent, transparent 59%, rgba(250, 250, 250, 0.2) 63%, rgba(250, 250, 250, 0.2) 68%, transparent 72%), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat;
  background-size: 100% 100%;
}
input[type="checkbox"]:not(.ui-switch-input):disabled:checked::before {
  -webkit-mask-image: none;
          mask-image: none;
  background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 0.3) 63%, rgba(77, 207, 255, 0.3) 68%, transparent 72%);
}
input[type="checkbox"]:not(.ui-switch-input):disabled:checked::after {
  background-color: rgba(77, 207, 255, 0.3);
  height: 100%;
}
@-webkit-keyframes checkon {
  from {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes checkon {
  from {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}
input[type="radio"] {
  background: radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.7) 68%, transparent 72%, transparent);
  -webkit-mask-image: none;
          mask-image: none;
}
input[type="radio"]::after {
  content: "";
  -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
          mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
  background-color: rgba(255, 255, 255, 0.2);
}
input[type="radio"]::before {
  content: "";
  background-color: rgba(77, 207, 255, 1);
  -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
          mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  width: 100%;
  height: 100%;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  position: absolute;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
}
input[type="radio"]:checked {
  background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%, transparent);
}
input[type="radio"]:checked::before {
  background-color: rgba(77, 207, 255, 1);
  -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
          mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  z-index: 1;
}
input[type="radio"]:active {
  background: radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.4) 63%, rgba(255, 255, 255, 0.4) 68%, transparent 72%, transparent);
  -webkit-mask-image: none;
          mask-image: none;
}
input[type="radio"]:active::after {
  -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
          mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
  background-color: rgba(250, 250, 250, 0.15);
}
input[type="radio"]:active:checked {
  background: radial-gradient(transparent, transparent 59%, rgba(54, 145, 179, 1) 63%, rgba(54, 145, 179, 1) 68%, transparent 72%, transparent);
}
input[type="radio"]:active:checked::before {
  -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
          mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
  background-color: rgba(54, 145, 179, 1);
}
input[type="radio"]:active:checked::after {
  content: none;
}
input[type="radio"]:disabled {
  background: radial-gradient(transparent, transparent 59%, rgba(250, 250, 250, 0.2) 63%, rgba(250, 250, 250, 0.2) 68%, transparent 72%, transparent);
  -webkit-mask-image: none;
          mask-image: none;
}
input[type="radio"]:disabled::before {
  transition: none;
}
input[type="radio"]:disabled::after {
  background-color: rgba(250, 250, 250, 0.1);
}
input[type="radio"]:disabled:checked {
  background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 0.3) 63%, rgba(77, 207, 255, 0.3) 68%, transparent 72%, transparent);
}
input[type="radio"]:disabled:checked::before {
  background-color: rgba(77, 207, 255, 0.3);
  transition: none;
}
input[type="radio"]:disabled:checked::after {
  content: none;
}
/** CheckBox / Radio button on arc-listview **/
.ui-arc-listview-carousel-item.ui-listview li label {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.ui-arc-listview-carousel-item.ui-listview li label input[type="checkbox"],
.ui-arc-listview-carousel-item.ui-listview li label input[type="radio"] {
  position: relative;
  top: 0;
  left: 0;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  min-width: 4.75rem;
}
.ui-arc-listview-carousel-item.ui-listview li.li-has-checkbox label,
.ui-arc-listview-carousel-item.ui-listview li.li-has-radio label {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 0;
  padding: 0;
  width: 100%;
}
.ui-arc-listview-carousel-item.ui-listview li.li-has-checkbox label div + input,
.ui-arc-listview-carousel-item.ui-listview li.li-has-radio label div + input {
  margin-left: 0.625rem;
}
.ui-arc-listview-carousel-item.ui-listview li.li-has-checkbox label .ui-arc-listview-text-content,
.ui-arc-listview-carousel-item.ui-listview li.li-has-radio label .ui-arc-listview-text-content {
  overflow: hidden;
}
/***************************************************************************
                  button
***************************************************************************/
.ui-btn {
  color: rgba(250, 250, 250, 1);
  background-color: transparent;
  height: auto;
}
.ui-btn.ui-btn-icon-only::before {
  -webkit-mask-size: 3.125rem 3.125rem;
          mask-size: 3.125rem 3.125rem;
  width: 3.125rem;
  height: 3.125rem;
}
.ui-default {
  color: rgba(250, 250, 250, 1);
  background-color: transparent;
}
.ui-color-red {
  color: rgba(250, 250, 250, 1);
  background-color: W012;
}
a.ui-color-red:active:hover,
.ui-color-red:enabled:active:hover {
  background-color: W012;
}
.ui-color-red:enabled:focus {
  background-color: W012;
}
a.ui-color-red.ui-state-disabled,
.ui-color-red:disabled {
  color: rgba(250, 250, 250, 1);
  background-color: W012;
}
.ui-color-orange {
  color: rgba(250, 250, 250, 1);
  background-color: W013;
}
a.ui-color-orange:active:hover,
.ui-color-orange:enabled:active:hover {
  background-color: W013;
}
.ui-color-orange:enabled:focus {
  background-color: W013;
}
a.ui-color-orange.ui-state-disabled,
.ui-color-orange:disabled {
  color: rgba(250, 250, 250, 1);
  background-color: W013;
}
.ui-color-green {
  color: rgba(250, 250, 250, 1);
  background-color: W014;
}
a.ui-color-green:active:hover,
.ui-color-green:enabled:active:hover {
  background-color: W014;
}
.ui-color-green:enabled:focus {
  background-color: W014;
}
a.ui-color-green.ui-state-disabled,
.ui-color-green:disabled {
  color: rgba(250, 250, 250, 1);
  background-color: W014;
}
.ui-color-blue {
  color: rgba(250, 250, 250, 1);
  background-color: rgba(1, 59, 74, 1);
}
a.ui-color-blue:active:hover,
.ui-color-blue:enabled:active:hover {
  background-color: rgba(1, 59, 74, 1);
}
.ui-color-blue:enabled:focus {
  background-color: rgba(1, 59, 74, 1);
}
a.ui-color-blue.ui-state-disabled,
.ui-color-blue:disabled {
  color: rgba(250, 250, 250, 1);
  background-color: rgba(1, 59, 74, 1);
}
.ui-grid-col-1 > .ui-btn {
  border-left: solid 1px rgba(0, 0, 0, 1);
}
.ui-grid-col-2 > .ui-btn {
  border-left: solid 1px rgba(0, 0, 0, 1);
}
.ui-grid-col-3 > .ui-btn {
  border-left: solid 1px rgba(0, 0, 0, 1);
}
/***************************************************************************
                  circle progress bar
***************************************************************************/
.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
  border: 0.5rem solid rgba(77, 207, 255, 1);
}
.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
  border: 0.5rem solid rgba(77, 207, 255, 1);
}
.ui-progressbar .ui-progressbar-bg {
  border: 0.5rem solid rgba(0, 67, 115, 1);
}
.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,
.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right {
  border: 0.25rem solid rgba(77, 207, 255, 1);
}
.ui-progressbar.ui-progressbar-small .ui-progressbar-bg {
  border: 0.25rem solid rgba(0, 67, 115, 1);
}
.ui-progressbar-end-point {
  position: absolute;
  z-index: 1000;
  width: 20px;
  height: 20px;
  background: #37a1ed;
  border-radius: 50%;
  left: 180px;
  top: 180px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  display: none;
}
.ui-progressbar-end-point::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(55, 161, 237, 0.5);
  left: 0;
  right: 0;
  border-radius: 50%;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: .25s;
  transition-timing-function: ease-out;
}
.ui-progressbar-end-point-active {
  display: block;
}
.ui-progressbar-end-point-pressed::after {
  content: "";
  -webkit-transform: scale(2);
      -ms-transform: scale(2);
          transform: scale(2);
}
/***************************************************************************
                  circular index scroll bar
***************************************************************************/
.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
  background-color: rgba(69, 68, 68, 0.9);
}
.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
  color: rgba(77, 207, 255, 1);
}
.ui-indexscrollbar {
  display: none;
}
/***************************************************************************
                  drawer
***************************************************************************/
.ui-drawer {
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 50%;
}
.ui-drawer-overlay {
  background-color: rgba(0, 0, 0, 0.85);
}
/***************************************************************************
                  progress
***************************************************************************/
@-webkit-keyframes indeterminate {
  0% {
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(77, 207, 255, 1);
  }
  25% {
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(77, 207, 255, 1);
  }
  50% {
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(77, 207, 255, 1);
  }
  75% {
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(77, 207, 255, 1);
  }
  100% {
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(77, 207, 255, 1);
  }
}
progress {
  color: rgba(204, 204, 204, 1);
}
progress::-webkit-progress-bar {
  background-color: rgba(0, 67, 115, 1);
}
progress::-webkit-progress-value {
  background-color: rgba(77, 207, 255, 1);
}
progress.ui-progress-indeterminate::-webkit-progress-bar {
  background-color: rgba(77, 207, 255, 1);
}
/***********************
Processing
***********************/
@-webkit-keyframes fullprocess {
  0% {
    -webkit-mask-position: 0vw 0vw;
            mask-position: 0vw 0vw;
  }
  2% {
    -webkit-mask-position: -100vw 0vw;
            mask-position: -100vw 0vw;
  }
  3% {
    -webkit-mask-position: -200vw 0vw;
            mask-position: -200vw 0vw;
  }
  5% {
    -webkit-mask-position: -300vw 0vw;
            mask-position: -300vw 0vw;
  }
  7% {
    -webkit-mask-position: -400vw 0vw;
            mask-position: -400vw 0vw;
  }
  8% {
    -webkit-mask-position: -500vw 0vw;
            mask-position: -500vw 0vw;
  }
  10% {
    -webkit-mask-position: -600vw 0vw;
            mask-position: -600vw 0vw;
  }
  12% {
    -webkit-mask-position: 0vw -100vw;
            mask-position: 0vw -100vw;
  }
  14% {
    -webkit-mask-position: -100vw -100vw;
            mask-position: -100vw -100vw;
  }
  15% {
    -webkit-mask-position: -200vw -100vw;
            mask-position: -200vw -100vw;
  }
  17% {
    -webkit-mask-position: -300vw -100vw;
            mask-position: -300vw -100vw;
  }
  19% {
    -webkit-mask-position: -400vw -100vw;
            mask-position: -400vw -100vw;
  }
  20% {
    -webkit-mask-position: -500vw -100vw;
            mask-position: -500vw -100vw;
  }
  22% {
    -webkit-mask-position: -600vw -100vw;
            mask-position: -600vw -100vw;
  }
  24% {
    -webkit-mask-position: 0vw -200vw;
            mask-position: 0vw -200vw;
  }
  25% {
    -webkit-mask-position: -100vw -200vw;
            mask-position: -100vw -200vw;
  }
  27% {
    -webkit-mask-position: -200vw -200vw;
            mask-position: -200vw -200vw;
  }
  29% {
    -webkit-mask-position: -300vw -200vw;
            mask-position: -300vw -200vw;
  }
  31% {
    -webkit-mask-position: -400vw -200vw;
            mask-position: -400vw -200vw;
  }
  32% {
    -webkit-mask-position: -500vw -200vw;
            mask-position: -500vw -200vw;
  }
  34% {
    -webkit-mask-position: -600vw -200vw;
            mask-position: -600vw -200vw;
  }
  36% {
    -webkit-mask-position: 0vw -300vw;
            mask-position: 0vw -300vw;
  }
  37% {
    -webkit-mask-position: -100vw -300vw;
            mask-position: -100vw -300vw;
  }
  39% {
    -webkit-mask-position: -200vw -300vw;
            mask-position: -200vw -300vw;
  }
  41% {
    -webkit-mask-position: -300vw -300vw;
            mask-position: -300vw -300vw;
  }
  42% {
    -webkit-mask-position: -400vw -300vw;
            mask-position: -400vw -300vw;
  }
  44% {
    -webkit-mask-position: -500vw -300vw;
            mask-position: -500vw -300vw;
  }
  46% {
    -webkit-mask-position: -600vw -300vw;
            mask-position: -600vw -300vw;
  }
  47% {
    -webkit-mask-position: 0vw -400vw;
            mask-position: 0vw -400vw;
  }
  49% {
    -webkit-mask-position: -100vw -400vw;
            mask-position: -100vw -400vw;
  }
  51% {
    -webkit-mask-position: -200vw -400vw;
            mask-position: -200vw -400vw;
  }
  53% {
    -webkit-mask-position: -300vw -400vw;
            mask-position: -300vw -400vw;
  }
  54% {
    -webkit-mask-position: -400vw -400vw;
            mask-position: -400vw -400vw;
  }
  56% {
    -webkit-mask-position: -500vw -400vw;
            mask-position: -500vw -400vw;
  }
  58% {
    -webkit-mask-position: -600vw -400vw;
            mask-position: -600vw -400vw;
  }
  59% {
    -webkit-mask-position: 0vw -500vw;
            mask-position: 0vw -500vw;
  }
  61% {
    -webkit-mask-position: -100vw -500vw;
            mask-position: -100vw -500vw;
  }
  63% {
    -webkit-mask-position: -200vw -500vw;
            mask-position: -200vw -500vw;
  }
  64% {
    -webkit-mask-position: -300vw -500vw;
            mask-position: -300vw -500vw;
  }
  66% {
    -webkit-mask-position: -400vw -500vw;
            mask-position: -400vw -500vw;
  }
  68% {
    -webkit-mask-position: -500vw -500vw;
            mask-position: -500vw -500vw;
  }
  69% {
    -webkit-mask-position: -600vw -500vw;
            mask-position: -600vw -500vw;
  }
  71% {
    -webkit-mask-position: 0vw -600vw;
            mask-position: 0vw -600vw;
  }
  73% {
    -webkit-mask-position: -100vw -600vw;
            mask-position: -100vw -600vw;
  }
  75% {
    -webkit-mask-position: -200vw -600vw;
            mask-position: -200vw -600vw;
  }
  76% {
    -webkit-mask-position: -300vw -600vw;
            mask-position: -300vw -600vw;
  }
  78% {
    -webkit-mask-position: -400vw -600vw;
            mask-position: -400vw -600vw;
  }
  80% {
    -webkit-mask-position: -500vw -600vw;
            mask-position: -500vw -600vw;
  }
  81% {
    -webkit-mask-position: -600vw -600vw;
            mask-position: -600vw -600vw;
  }
  83% {
    -webkit-mask-position: 0vw -700vw;
            mask-position: 0vw -700vw;
  }
  85% {
    -webkit-mask-position: -100vw -700vw;
            mask-position: -100vw -700vw;
  }
  86% {
    -webkit-mask-position: -200vw -700vw;
            mask-position: -200vw -700vw;
  }
  88% {
    -webkit-mask-position: -300vw -700vw;
            mask-position: -300vw -700vw;
  }
  90% {
    -webkit-mask-position: -400vw -700vw;
            mask-position: -400vw -700vw;
  }
  92% {
    -webkit-mask-position: -500vw -700vw;
            mask-position: -500vw -700vw;
  }
  93% {
    -webkit-mask-position: -600vw -700vw;
            mask-position: -600vw -700vw;
  }
  95% {
    -webkit-mask-position: 0vw -800vw;
            mask-position: 0vw -800vw;
  }
  97% {
    -webkit-mask-position: -100vw -800vw;
            mask-position: -100vw -800vw;
  }
  98% {
    -webkit-mask-position: -200vw -800vw;
            mask-position: -200vw -800vw;
  }
  100% {
    -webkit-mask-position: -300vw -800vw;
            mask-position: -300vw -800vw;
  }
}
@keyframes fullprocess {
  0% {
    -webkit-mask-position: 0vw 0vw;
            mask-position: 0vw 0vw;
  }
  2% {
    -webkit-mask-position: -100vw 0vw;
            mask-position: -100vw 0vw;
  }
  3% {
    -webkit-mask-position: -200vw 0vw;
            mask-position: -200vw 0vw;
  }
  5% {
    -webkit-mask-position: -300vw 0vw;
            mask-position: -300vw 0vw;
  }
  7% {
    -webkit-mask-position: -400vw 0vw;
            mask-position: -400vw 0vw;
  }
  8% {
    -webkit-mask-position: -500vw 0vw;
            mask-position: -500vw 0vw;
  }
  10% {
    -webkit-mask-position: -600vw 0vw;
            mask-position: -600vw 0vw;
  }
  12% {
    -webkit-mask-position: 0vw -100vw;
            mask-position: 0vw -100vw;
  }
  14% {
    -webkit-mask-position: -100vw -100vw;
            mask-position: -100vw -100vw;
  }
  15% {
    -webkit-mask-position: -200vw -100vw;
            mask-position: -200vw -100vw;
  }
  17% {
    -webkit-mask-position: -300vw -100vw;
            mask-position: -300vw -100vw;
  }
  19% {
    -webkit-mask-position: -400vw -100vw;
            mask-position: -400vw -100vw;
  }
  20% {
    -webkit-mask-position: -500vw -100vw;
            mask-position: -500vw -100vw;
  }
  22% {
    -webkit-mask-position: -600vw -100vw;
            mask-position: -600vw -100vw;
  }
  24% {
    -webkit-mask-position: 0vw -200vw;
            mask-position: 0vw -200vw;
  }
  25% {
    -webkit-mask-position: -100vw -200vw;
            mask-position: -100vw -200vw;
  }
  27% {
    -webkit-mask-position: -200vw -200vw;
            mask-position: -200vw -200vw;
  }
  29% {
    -webkit-mask-position: -300vw -200vw;
            mask-position: -300vw -200vw;
  }
  31% {
    -webkit-mask-position: -400vw -200vw;
            mask-position: -400vw -200vw;
  }
  32% {
    -webkit-mask-position: -500vw -200vw;
            mask-position: -500vw -200vw;
  }
  34% {
    -webkit-mask-position: -600vw -200vw;
            mask-position: -600vw -200vw;
  }
  36% {
    -webkit-mask-position: 0vw -300vw;
            mask-position: 0vw -300vw;
  }
  37% {
    -webkit-mask-position: -100vw -300vw;
            mask-position: -100vw -300vw;
  }
  39% {
    -webkit-mask-position: -200vw -300vw;
            mask-position: -200vw -300vw;
  }
  41% {
    -webkit-mask-position: -300vw -300vw;
            mask-position: -300vw -300vw;
  }
  42% {
    -webkit-mask-position: -400vw -300vw;
            mask-position: -400vw -300vw;
  }
  44% {
    -webkit-mask-position: -500vw -300vw;
            mask-position: -500vw -300vw;
  }
  46% {
    -webkit-mask-position: -600vw -300vw;
            mask-position: -600vw -300vw;
  }
  47% {
    -webkit-mask-position: 0vw -400vw;
            mask-position: 0vw -400vw;
  }
  49% {
    -webkit-mask-position: -100vw -400vw;
            mask-position: -100vw -400vw;
  }
  51% {
    -webkit-mask-position: -200vw -400vw;
            mask-position: -200vw -400vw;
  }
  53% {
    -webkit-mask-position: -300vw -400vw;
            mask-position: -300vw -400vw;
  }
  54% {
    -webkit-mask-position: -400vw -400vw;
            mask-position: -400vw -400vw;
  }
  56% {
    -webkit-mask-position: -500vw -400vw;
            mask-position: -500vw -400vw;
  }
  58% {
    -webkit-mask-position: -600vw -400vw;
            mask-position: -600vw -400vw;
  }
  59% {
    -webkit-mask-position: 0vw -500vw;
            mask-position: 0vw -500vw;
  }
  61% {
    -webkit-mask-position: -100vw -500vw;
            mask-position: -100vw -500vw;
  }
  63% {
    -webkit-mask-position: -200vw -500vw;
            mask-position: -200vw -500vw;
  }
  64% {
    -webkit-mask-position: -300vw -500vw;
            mask-position: -300vw -500vw;
  }
  66% {
    -webkit-mask-position: -400vw -500vw;
            mask-position: -400vw -500vw;
  }
  68% {
    -webkit-mask-position: -500vw -500vw;
            mask-position: -500vw -500vw;
  }
  69% {
    -webkit-mask-position: -600vw -500vw;
            mask-position: -600vw -500vw;
  }
  71% {
    -webkit-mask-position: 0vw -600vw;
            mask-position: 0vw -600vw;
  }
  73% {
    -webkit-mask-position: -100vw -600vw;
            mask-position: -100vw -600vw;
  }
  75% {
    -webkit-mask-position: -200vw -600vw;
            mask-position: -200vw -600vw;
  }
  76% {
    -webkit-mask-position: -300vw -600vw;
            mask-position: -300vw -600vw;
  }
  78% {
    -webkit-mask-position: -400vw -600vw;
            mask-position: -400vw -600vw;
  }
  80% {
    -webkit-mask-position: -500vw -600vw;
            mask-position: -500vw -600vw;
  }
  81% {
    -webkit-mask-position: -600vw -600vw;
            mask-position: -600vw -600vw;
  }
  83% {
    -webkit-mask-position: 0vw -700vw;
            mask-position: 0vw -700vw;
  }
  85% {
    -webkit-mask-position: -100vw -700vw;
            mask-position: -100vw -700vw;
  }
  86% {
    -webkit-mask-position: -200vw -700vw;
            mask-position: -200vw -700vw;
  }
  88% {
    -webkit-mask-position: -300vw -700vw;
            mask-position: -300vw -700vw;
  }
  90% {
    -webkit-mask-position: -400vw -700vw;
            mask-position: -400vw -700vw;
  }
  92% {
    -webkit-mask-position: -500vw -700vw;
            mask-position: -500vw -700vw;
  }
  93% {
    -webkit-mask-position: -600vw -700vw;
            mask-position: -600vw -700vw;
  }
  95% {
    -webkit-mask-position: 0vw -800vw;
            mask-position: 0vw -800vw;
  }
  97% {
    -webkit-mask-position: -100vw -800vw;
            mask-position: -100vw -800vw;
  }
  98% {
    -webkit-mask-position: -200vw -800vw;
            mask-position: -200vw -800vw;
  }
  100% {
    -webkit-mask-position: -300vw -800vw;
            mask-position: -300vw -800vw;
  }
}
.ui-page-active .ui-processing {
  opacity: 1;
}
.ui-processing {
  opacity: 0;
  background-color: rgba(77, 207, 255, 1);
  transition: opacity 0.2s linear;
}
.ui-processing.ui-processing-alternate {
  background-color: rgba(250, 250, 250, 1);
}
.ui-processing.ui-processing-on-center {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.ui-processing.ui-processing-full-size {
  -webkit-mask-image: url("images/Processing/processingfull.png");
          mask-image: url("images/Processing/processingfull.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: step-start;
          animation-timing-function: step-start;
  -webkit-animation-name: fullprocess;
          animation-name: fullprocess;
  pointer-events: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 1000;
}
/** widget interactions **/
.ui-listview li .ui-processing {
  position: absolute;
  right: 2rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ui-scrollbar-bouncing-effect {
  -webkit-animation-duration: .7s;
          animation-duration: .7s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  background-color: rgba(77, 207, 255, 0.2);
}
.ui-scrollbar-bouncing-effect::before {
  -webkit-animation-duration: .7s;
          animation-duration: .7s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  background-color: rgba(77, 207, 255, 0);
}
.ui-scrollbar-bouncing-effect.ui-top,
.ui-scrollbar-bouncing-effect.ui-bottom {
  width: 100%;
  height: 5.5rem;
  left: 0;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.ui-scrollbar-bouncing-effect.ui-top::before,
.ui-scrollbar-bouncing-effect.ui-bottom::before {
  width: 100%;
  height: 5.5rem;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.ui-scrollbar-bouncing-effect.ui-left,
.ui-scrollbar-bouncing-effect.ui-right {
  width: 5.5rem;
  height: 100%;
  top: 0;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.ui-scrollbar-bouncing-effect.ui-left::before,
.ui-scrollbar-bouncing-effect.ui-right::before {
  width: 5.5rem;
  height: 100%;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.ui-scrollbar-bouncing-effect.ui-top {
  top: 0;
  -webkit-mask-image: url("images/Scroller/bouncing_circle_top_glow.png");
          mask-image: url("images/Scroller/bouncing_circle_top_glow.png");
}
.ui-scrollbar-bouncing-effect.ui-top::before {
  -webkit-mask-image: url("images/Scroller/bouncing_circle_top_edge.png");
          mask-image: url("images/Scroller/bouncing_circle_top_edge.png");
}
.ui-scrollbar-bouncing-effect.ui-bottom {
  bottom: 0;
  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_glow.png");
          mask-image: url("images/Scroller/bouncing_circle_bottom_glow.png");
}
.ui-scrollbar-bouncing-effect.ui-bottom::before {
  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_edge.png");
          mask-image: url("images/Scroller/bouncing_circle_bottom_edge.png");
}
.ui-scrollbar-bouncing-effect.ui-left {
  left: 0;
  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_glow.png");
          mask-image: url("images/Scroller/bouncing_circle_left_glow.png");
}
.ui-scrollbar-bouncing-effect.ui-left::before {
  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_edge.png");
          mask-image: url("images/Scroller/bouncing_circle_left_edge.png");
}
.ui-scrollbar-bouncing-effect.ui-right {
  right: 0;
  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_glow.png");
          mask-image: url("images/Scroller/bouncing_circle_right_glow.png");
}
.ui-scrollbar-bouncing-effect.ui-right::before {
  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_edge.png");
          mask-image: url("images/Scroller/bouncing_circle_right_edge.png");
}
@-webkit-keyframes -ui-bouncing-show-additional {
  0% {
    opacity: 0;
  }
  42% {
    opacity: 0;
  }
  100% {
    opacity: .7;
  }
}
@keyframes -ui-bouncing-show-additional {
  0% {
    opacity: 0;
  }
  42% {
    opacity: 0;
  }
  100% {
    opacity: .7;
  }
}
@-webkit-keyframes ui-bouncing-show-top {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes ui-bouncing-show-top {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes ui-bouncing-show-left {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes ui-bouncing-show-left {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes ui-bouncing-show-right {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes ui-bouncing-show-right {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes ui-bouncing-show-bottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes ui-bouncing-show-bottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes -ui-bouncing-hide-additional {
  0% {
    opacity: .7;
  }
  42% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes -ui-bouncing-hide-additional {
  0% {
    opacity: .7;
  }
  42% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes ui-bouncing-hide-left {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ui-bouncing-hide-left {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes ui-bouncing-hide-right {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
@keyframes ui-bouncing-hide-right {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes ui-bouncing-hide-bottom {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@keyframes ui-bouncing-hide-bottom {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@-webkit-keyframes ui-bouncing-hide-top {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@keyframes ui-bouncing-hide-top {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  42% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
.ui-scrollbar-bouncing-effect.ui-show {
  display: block;
}
.ui-scrollbar-bouncing-effect.ui-show.ui-left {
  -webkit-animation-name: ui-bouncing-show-left;
          animation-name: ui-bouncing-show-left;
}
.ui-scrollbar-bouncing-effect.ui-show.ui-right {
  -webkit-animation-name: ui-bouncing-show-right;
          animation-name: ui-bouncing-show-right;
}
.ui-scrollbar-bouncing-effect.ui-show.ui-bottom {
  -webkit-animation-name: ui-bouncing-show-bottom;
          animation-name: ui-bouncing-show-bottom;
}
.ui-scrollbar-bouncing-effect.ui-show.ui-top {
  -webkit-animation-name: ui-bouncing-show-top;
          animation-name: ui-bouncing-show-top;
}
.ui-scrollbar-bouncing-effect.ui-show::before {
  -webkit-animation-name: -ui-bouncing-show-additional;
          animation-name: -ui-bouncing-show-additional;
}
.ui-scrollbar-bouncing-effect.ui-hide {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  display: block;
}
.ui-scrollbar-bouncing-effect.ui-hide.ui-left {
  -webkit-animation-name: ui-bouncing-hide-left;
          animation-name: ui-bouncing-hide-left;
}
.ui-scrollbar-bouncing-effect.ui-hide.ui-right {
  -webkit-animation-name: ui-bouncing-hide-right;
          animation-name: ui-bouncing-hide-right;
}
.ui-scrollbar-bouncing-effect.ui-hide.ui-bottom {
  -webkit-animation-name: ui-bouncing-hide-bottom;
          animation-name: ui-bouncing-hide-bottom;
}
.ui-scrollbar-bouncing-effect.ui-hide.ui-top {
  -webkit-animation-name: ui-bouncing-hide-top;
          animation-name: ui-bouncing-hide-top;
}
.ui-scrollbar-bouncing-effect.ui-hide::before {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-name: -ui-bouncing-hide-additional;
          animation-name: -ui-bouncing-hide-additional;
}
.is-circle-test {
  width: 1px;
}
.ui-selector {
  background-color: rgba(0, 0, 0, 1);
}
.ui-selector .ui-item {
  background-color: rgba(250, 250, 250, 1);
}
.ui-selector .ui-item:active {
  background-color: rgba(191, 191, 191, 1);
}
.ui-selector .ui-item.ui-item-active:active {
  background-color: rgba(250, 250, 250, 1);
}
.ui-selector .ui-layer.ui-layer-prev,
.ui-selector .ui-layer.ui-layer-next {
  background-color: rgba(250, 250, 250, 1);
}
.ui-selector .ui-layer.ui-layer-prev:active,
.ui-selector .ui-layer.ui-layer-next:active {
  background-color: rgba(250, 250, 250, 0.4);
}
.ui-selector .ui-selector-indicator {
  font-size: 1.875rem;
}
.ui-selector .ui-selector-indicator .ui-selector-indicator-text {
  color: rgba(250, 250, 250, 1);
}
.ui-selector .ui-selector-indicator .ui-selector-indicator-subtext {
  color: rgba(77, 207, 255, 1);
}
.ui-selector .ui-selector-indicator:active + .ui-selector-indicator-arrow::before {
  background-color: rgba(77, 207, 255, 0.4);
}
.ui-selector .ui-selector-indicator-active + .ui-selector-indicator-arrow::before {
  background-color: rgba(77, 207, 255, 0.4);
}
.ui-selector .ui-selector-indicator-arrow::before {
  background-color: rgba(77, 207, 255, 1);
}
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-item .ui-item-icon-remove-left,
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-item .ui-item-icon-remove-right {
  display: none;
}
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-item.ui-item-plus {
  pointer-events: none;
}
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-selector-indicator,
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-selector-indicator-arrow {
  pointer-events: none;
}
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-layer:not(.ui-layer-active):not(.ui-layer-next):not(.ui-layer-prev) {
  pointer-events: none;
}
.ui-selector.ui-selector-edit-mode .ui-selector-indicator > :not(.ui-selector-indicator-text) {
  display: none;
}
.ui-selector.ui-selector-edit-mode .ui-selector-indicator-arrow::before {
  background: none;
}
.ui-selector.ui-selector-edit-mode .ui-selector-indicator:active + .ui-selector-indicator-arrow::before {
  background: none;
}
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder,
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder {
  box-sizing: border-box;
  border: 0.0625rem solid rgba(250, 250, 250, 0.5);
  background: none;
}
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder .ui-item-icon-remove-left,
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder .ui-item-icon-remove-left,
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder .ui-item-icon-remove-right,
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder .ui-item-icon-remove-right {
  display: none;
}
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder::before,
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder::before,
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder::after,
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder::after {
  display: none;
}
@-webkit-keyframes dragItem {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.21428571);
            transform: scale(1.21428571);
    opacity: 0.7;
  }
}
@keyframes dragItem {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.21428571);
            transform: scale(1.21428571);
    opacity: 0.7;
  }
}
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-moved {
  position: fixed;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 101;
  visibility: visible;
  opacity: 0.7;
  -webkit-transform: scale(1.21428571);
      -ms-transform: scale(1.21428571);
          transform: scale(1.21428571);
  pointer-events: none;
  margin: -1.75rem;
  -webkit-animation: 333ms dragItem;
          animation: 333ms dragItem;
}
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-moved-end {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-moved .ui-item-icon-remove-left,
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-moved .ui-item-icon-remove-right {
  display: none;
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  top: -0.125rem;
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left:active .ui-item-icon-remove-bg,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right:active .ui-item-icon-remove-bg {
  background-color: rgba(250, 250, 250, 0.5);
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left:active::after,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right:active::after {
  background-color: rgba(184, 46, 46, 0.5);
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left .ui-item-icon-remove-bg,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right .ui-item-icon-remove-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(250, 250, 250, 1);
  -webkit-mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete_bg.png");
          mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete_bg.png");
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left::before,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::before,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left::after,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left::before,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::before {
  background-color: rgba(0, 0, 0, 0.35);
  -webkit-mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete_bg_ef.png");
          mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete_bg_ef.png");
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left::after,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::after {
  background-color: rgba(184, 46, 46, 1);
  -webkit-mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete.png");
          mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete.png");
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right {
  right: -0.1875rem;
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right .ui-item-icon-remove-bg,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::before,
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::after {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left {
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  left: -0.1875rem;
}
.ui-selector.ui-selector-edit-mode .ui-item-removable.ui-item-removed.ui-item {
  opacity: 0;
  transition: opacity 200ms;
}
.ui-selector.ui-selector-edit-mode .ui-item-plus {
  background-color: rgba(250, 250, 250, 1);
  -webkit-mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_add.png");
          mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_add.png");
  -webkit-mask-size: 100%;
          mask-size: 100%;
}
/* ------------------------- Selector List for bezelless watches ------------------------- */
.ui-bezelless-selector .ui-more {
  z-index: 1;
}
.ui-bezelless-selector .ui-listview li img {
  width: 3.125rem;
  height: 3.125rem;
}
.ui-bezelless-selector .thumb-container {
  display: inline-block;
  width: 3.125rem;
  height: 3.125rem;
  position: absolute;
  left: 2.5rem;
  background: white;
  border-radius: 6.25rem;
}
.ui-bezelless-selector .ui-arc-listview-carousel.ui-arc-listview-5 li.ui-arc-listview-selected {
  line-height: 3.125rem;
}
.ui-slider-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui-slider-container .ui-slider-icon {
  width: 9.375rem;
  height: 9.375rem;
  margin: 0 auto;
}
.ui-slider-container .ui-slider-titles {
  height: 4.625rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui-slider-container .ui-slider-titles .ui-slider-title {
  color: rgba(250, 250, 250, 1);
  font-size: 1.875rem;
  line-height: 1.875rem;
  margin-top: 0.4375rem;
}
.ui-slider-container .ui-slider-titles .ui-slider-subtitle {
  color: rgba(77, 207, 255, 1);
  font-size: 1.8125rem;
  line-height: 1.875rem;
}
.ui-slider-container .ui-slider-buttons {
  height: 4rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.ui-slider-container .ui-slider-buttons .ui-slider-minus {
  width: 2.75rem;
  height: 100%;
  background: url('images/Slider/b_slider_icon_minus.png') no-repeat center center;
  z-index: 1;
}
.ui-slider-container .ui-slider-buttons .ui-slider-number {
  height: 100%;
  color: rgba(250, 250, 250, 1);
  font-size: 2.5rem;
  width: 4.125rem;
  margin: 0 -1.25rem;
  line-height: 3.25rem;
  margin-top: 0.3125rem;
}
.ui-slider-container .ui-slider-buttons .ui-slider-plus {
  background: url('images/Slider/b_slider_icon_plus.png') no-repeat center center;
  width: 2.75rem;
  height: 100%;
  z-index: 1;
}
a.ui-hyperlink {
  color: rgba(77, 225, 255, 1);
}
a.ui-hyperlink:active,
a.ui-hyperlink:hover {
  color: rgba(77, 225, 255, 0.5);
}
.ui-arc-listview {
  width: 22.5rem;
  display: block;
  overflow: hidden;
  top: 0;
  left: 0;
}
.ui-arc-listview-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ui-arc-listview-carousel-item {
  width: 22.5rem;
  position: absolute;
  height: 6.75rem;
}
.ui-arc-listview-carousel-item li {
  top: 3.375rem;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ui-arc-listview-carousel-item-hidden {
  display: none;
}
.ui-arc-listview-5 .ui-arc-listview-carousel-item {
  height: 4.375rem;
}
.ui-arc-listview-5 .ui-arc-listview-carousel-item li {
  top: 2.1875rem;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ui-arc-listview-selection {
  opacity: 0;
  position: absolute;
  transition: opacity 250ms;
  pointer-events: none;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
  width: 22.5rem;
  height: 7.5rem;
  left: 0;
  right: 0;
  border-radius: 4.5rem;
  background-color: rgba(48, 48, 48, 0.65);
}
.ui-arc-listview-selection-show {
  opacity: 1;
}
.ui-arc-listview li,
.ui-arc-listview-carousel li {
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.ui-arc-listview li:not(.ui-li-group-index):not(.ui-listview-divider),
.ui-arc-listview-carousel li:not(.ui-li-group-index):not(.ui-listview-divider) {
  min-height: 6.75rem;
  vertical-align: middle;
}
.ui-arc-listview li.ui-li-group-index,
.ui-arc-listview-carousel li.ui-li-group-index,
.ui-arc-listview li.ui-listview-divider,
.ui-arc-listview-carousel li.ui-listview-divider {
  margin-top: 0;
  border: 0;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.ui-arc-listview li.ui-li-group-index ~ li:not(.ui-li-group-index):not(.ui-listview-divider),
.ui-arc-listview-carousel li.ui-li-group-index ~ li:not(.ui-li-group-index):not(.ui-listview-divider),
.ui-arc-listview li.ui-listview-divider ~ li:not(.ui-li-group-index):not(.ui-listview-divider),
.ui-arc-listview-carousel li.ui-listview-divider ~ li:not(.ui-li-group-index):not(.ui-listview-divider) {
  margin-top: 0;
}
.ui-arc-listview .ui-arc-listview-carousel-item li,
.ui-arc-listview-carousel .ui-arc-listview-carousel-item li {
  /* below style is not prefixed "ui-" for backward compatibility */
}
.ui-arc-listview .ui-arc-listview-carousel-item li.li-has-thumb-left,
.ui-arc-listview-carousel .ui-arc-listview-carousel-item li.li-has-thumb-left {
  padding-left: 6.25rem;
}
.ui-arc-listview .ui-arc-listview-carousel-item li.li-has-thumb-right,
.ui-arc-listview-carousel .ui-arc-listview-carousel-item li.li-has-thumb-right {
  padding-right: 6.25rem;
}
.ui-arc-listview .ui-arc-listview-carousel-item li.ui-li-grid .ui-arc-listview-text-content,
.ui-arc-listview-carousel .ui-arc-listview-carousel-item li.ui-li-grid .ui-arc-listview-text-content {
  margin-left: 0;
}
.ui-arc-listview .ui-arc-listview-carousel-item li.ui-li-grid .ui-arc-listview-text-content div,
.ui-arc-listview-carousel .ui-arc-listview-carousel-item li.ui-li-grid .ui-arc-listview-text-content div {
  margin-left: 0;
}
.ui-arc-listview.ui-arc-listview-5 li:not(.ui-li-group-index):not(.ui-listview-divider),
.ui-arc-listview-carousel.ui-arc-listview-5 li:not(.ui-li-group-index):not(.ui-listview-divider) {
  min-height: 4.375rem;
}
.ui-arc-listview.ui-arc-listview-5 li.ui-arc-listview-selected,
.ui-arc-listview-carousel.ui-arc-listview-5 li.ui-arc-listview-selected {
  line-height: 4.375rem;
}
.ui-arc-listview-carousel {
  /* disable some unnecessary listview styles */
}
.ui-arc-listview-carousel .ui-listview {
  padding-bottom: 0;
}
.ui-force-relative-li-children li {
  position: relative !important;
}
/* Keyboard is visible, screen height is lower then half of screen */
@media (max-height: 180px) {
  .ui-arc-listview-carousel li input[type=text]:focus,
  .ui-arc-listview-carousel li input[type=password]:focus {
    position: fixed;
    height: auto;
    border: none;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    margin-top: auto;
    padding: 1.625rem 3.125rem 0.3125rem 3.125rem;
  }
}
.ui-marquee {
  height: 3.0625rem;
  line-height: 3.0625rem;
}
.ui-arc-listview-text-content {
  margin-left: 0;
}
.ui-number-picker-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 6.875rem;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  top: 0.5625rem;
}
.ui-number-picker-container .ui-circleindicator {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1001;
  pointer-events: none;
}
.ui-number-picker-container .ui-circleindicator .ui-animated {
  transition-duration: 0.3s;
}
.ui-number-picker-container input[type="number"] {
  display: none;
}
.ui-number-picker-container .ui-number-picker-label {
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  font-size: 1.5rem;
  line-height: 1.5625rem;
  color: rgba(250, 250, 250, 1);
  display: block;
  width: 5rem;
  opacity: 1;
  transition-duration: 300ms, 300ms;
  transition-property: opacity, top;
  transition-timing-function: linear;
}
.ui-number-picker-container .ui-number-picker-label.hidden {
  opacity: 0;
  display: block;
  pointer-events: none;
  top: -0.75rem;
}
.ui-number-picker-container .ui-number-picker-number {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  font-size: 3.125rem;
  line-height: 5.3125rem;
  margin-top: -0.375rem;
  color: rgba(250, 250, 250, 1);
  min-width: 5rem;
  display: block;
  padding-top: 0.4375rem;
  margin-left: auto;
  margin-right: auto;
}
.ui-number-picker-container .ui-number-picker-number.ui-spin {
  margin-top: 0.5rem;
  height: 3.125rem;
  width: auto;
}
.ui-number-picker-container .ui-number-picker-number.ui-spin.enabled {
  margin-top: 0.5rem;
  height: 100%;
}
.ui-number-picker-container .ui-number-picker-number.ui-spin.enabled .ui-spin-item {
  color: #4dcfff;
  opacity: 0.5;
}
.ui-number-picker-container .ui-number-picker-number.ui-spin.enabled .ui-spin-item-selected {
  opacity: 1;
}
.ui-number-picker-container .ui-number-picker-number.ui-spin-enabling {
  height: 100%;
}
.ui-number-picker-container.ui-number-picker-disabled .ui-number-picker-number {
  color: rgba(102, 102, 102, 1);
}
.ui-number-picker-container .ui-number-picker-number-pressed {
  color: rgba(54, 145, 179, 1);
}
.ui-number-picker-container .ui-number-picker-number-blink {
  -webkit-animation: ui-number-picker-number-blink 1s infinite;
          animation: ui-number-picker-number-blink 1s infinite;
}
.ui-number-picker-container .ui-spin {
  height: 3.125rem;
  line-height: normal;
  margin-top: 0;
  padding: 0;
  width: 3.75rem;
  margin-left: auto;
  margin-right: auto;
}
.ui-number-picker-container .ui-spin.enabled {
  height: 100%;
}
.ui-number-picker-container .hidden {
  display: none;
}
.ui-number-picker-container .ui-spin-item {
  font-size: 3.125rem;
  height: 2.375rem;
}
.ui-number-picker-container:not(.ui-time-picker) span {
  margin-left: 8.75rem;
}
.ui-number-picker-container:not(.ui-time-picker) label {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%);
}
.ui-time-picker.ui-number-picker-container {
  height: 6.875rem;
  display: block;
}
.ui-time-picker .ui-time-picker-container-hours {
  float: left;
  height: inherit;
  width: 5rem;
}
.ui-time-picker .ui-time-picker-colon-container {
  float: left;
  height: 5.3125rem;
  width: 0.75rem;
  margin-left: 0.5rem;
  padding-top: 2.8125rem;
}
.ui-time-picker .ui-time-picker-colon-container span {
  font-size: 2.5rem;
}
.ui-time-picker div {
  font-size: 2.5rem;
}
.ui-time-picker div label {
  font-size: 1rem;
}
.ui-time-picker .ui-time-picker-active-label-animation {
  -webkit-animation: changeColor 1s infinite;
          animation: changeColor 1s infinite;
  color: rgba(77, 207, 255, 1);
}
.ui-time-picker .ui-time-picker-container-minutes {
  float: left;
  height: inherit;
  margin-left: 0.5rem;
  width: 5rem;
}
.ui-time-picker .ui-time-picker-container-ampm {
  float: left;
  height: 4.0625rem;
  margin-top: 2.0625rem;
  margin-left: 0.5rem;
  width: 6.25rem;
  overflow-y: hidden;
}
.ui-time-picker .ui-time-picker-container-ampm div {
  height: 8.125rem;
  position: relative;
}
.ui-time-picker .ui-time-picker-container-ampm div span {
  font-size: 3.125rem;
  height: 4.0625rem;
  line-height: 4.0625rem;
  width: 6.25rem;
  display: inline-block;
  position: relative;
  color: rgba(77, 207, 255, 1);
}
.ui-time-picker .ui-time-picker-container-ampm-pressed div span {
  color: rgba(54, 145, 179, 1);
}
.ui-time-picker .ui-number-picker-label {
  display: block;
  width: 5rem;
  font-size: 1.5rem;
  height: 2.0625rem;
  position: absolute;
  opacity: 1;
  top: -0.375rem;
  transition-duration: 300ms, 300ms;
  transition-property: opacity, top;
  transition-timing-function: linear;
}
.ui-time-picker .ui-number-picker-label-hidden {
  opacity: 0;
  display: block;
  pointer-events: none;
  top: -0.75rem;
}
.ui-time-picker .ui-number-picker-number {
  width: 5rem;
  font-size: 4.0625rem;
  display: block;
  height: 5.3125rem;
  margin-top: 1.25rem;
  padding-top: 0;
}
.ui-time-picker .ui-number-picker-number.ui-spin {
  margin-top: 2rem;
  height: 4.0625rem;
  width: auto;
}
.ui-time-picker .ui-number-picker-number.ui-spin.enabled {
  margin-top: 0.625rem;
  height: 100%;
}
.ui-time-picker .ui-number-picker-number.ui-spin.enabled .ui-spin-item {
  color: #4dcfff;
  opacity: 0.5;
}
.ui-time-picker .ui-number-picker-number.ui-spin.enabled .ui-spin-item-selected {
  opacity: 1;
}
.ui-time-picker .ui-number-picker-number .ui-spin-item {
  font-size: 4.0625rem;
  height: 3.125rem;
}
.ui-time-picker-hidden {
  opacity: 0;
}
.ui-time-picker .ui-polar .disable-transform.pointer {
  transition: none;
}
.ui-time-picker .ui-circleindicator .ui-animated.ui-time-picker-disable-animation {
  transition: none;
  display: none;
}
.ui-circleindicator.ui-time-picker-background {
  background-image: url("images/TimePicker/time_picker_bg.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.ui-time-picker-am-pm {
  margin-left: 2rem;
}
.ui-time-picker-no-am-pm {
  margin-left: 5.375rem;
}
@-webkit-keyframes changeColor {
  0% {
    color: rgba(77, 207, 255, 1);
  }
  49% {
    color: rgba(77, 207, 255, 1);
  }
  51% {
    color: rgba(250, 250, 250, 1);
  }
  100% {
    color: rgba(250, 250, 250, 1);
  }
}
@keyframes changeColor {
  0% {
    color: rgba(77, 207, 255, 1);
  }
  49% {
    color: rgba(77, 207, 255, 1);
  }
  51% {
    color: rgba(250, 250, 250, 1);
  }
  100% {
    color: rgba(250, 250, 250, 1);
  }
}
@-webkit-keyframes showPM {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
  }
}
@keyframes showPM {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
  }
}
@-webkit-keyframes hidePM {
  0% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes hidePM {
  0% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
.ui-time-picker-hide-pm {
  -webkit-animation: hidePM 300ms ease-out 0ms;
          animation: hidePM 300ms ease-out 0ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.ui-time-picker-show-pm {
  -webkit-animation: showPM 300ms ease-out 0ms;
          animation: showPM 300ms ease-out 0ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.ui-colorpicker .ui-selector-indicator .ui-selector-indicator-text {
  font-size: 0;
  height: 6.25rem;
  width: 6.25rem;
  max-height: 6.25rem;
  border-radius: 50%;
}
.ui-colorpicker .ui-selector-indicator-arrow:before {
  background-color: white;
}
.ui-date-picker.ui-number-picker-container {
  height: 6.875rem;
  display: block;
}
.ui-date-picker.ui-number-picker-container input {
  display: none;
}
.ui-date-picker.ui-number-picker-container span {
  margin: -0.375rem 0 0 0;
  text-align: center;
  font-size: 3.125rem;
  width: inherit;
}
.ui-date-picker.ui-number-picker-container .ui-number-picker-label {
  margin: 0;
  text-align: center;
  height: 1.9375rem;
  line-height: 1.9375rem;
  font-size: 1.5rem;
  width: inherit;
  opacity: 1;
  transition-duration: 300ms, 300ms;
  transition-property: opacity, top;
  transition-timing-function: linear;
}
.ui-date-picker.ui-number-picker-container .ui-number-picker-label-hidden {
  opacity: 0;
  display: block;
  pointer-events: none;
  top: -0.75rem;
}
.ui-date-picker.ui-number-picker-container .ui-spin-item {
  height: 3.125rem;
}
.ui-date-picker .ui-date-picker-active-label-animation {
  -webkit-animation: changeColor 1s infinite;
          animation: changeColor 1s infinite;
  color: rgba(77, 207, 255, 1);
}
.ui-date-picker .ui-date-picker-container-month {
  float: left;
  height: inherit;
  margin-left: 1.5rem;
  width: 6rem;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui-date-picker .ui-date-picker-container-month .ui-spin {
  width: 6.875rem;
}
.ui-date-picker .ui-date-picker-container-day {
  float: left;
  height: inherit;
  margin-left: 0.5rem;
  width: 5rem;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui-date-picker .ui-date-picker-container-day .ui-spin {
  width: 4.0625rem;
}
.ui-date-picker .ui-date-picker-container-year {
  float: left;
  height: inherit;
  margin-left: 0.5rem;
  width: 7.5rem;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui-date-picker .ui-date-picker-container-year .ui-spin {
  width: 7.5rem;
}
.ui-date-picker .ui-date-picker-containter-dayname {
  position: fixed;
  width: 100%;
  top: 14.4375rem;
  opacity: 0.8;
  font-size: 1.5rem;
  line-height: 2rem;
  height: 2rem;
  padding: 0 2.8125rem;
  color: rgba(250, 250, 250, 0.8);
}
.ui-date-picker-hidden {
  display: none;
}
.ui-date-picker .enabled .ui-spin-item {
  color: #4dcfff;
  opacity: 0.5;
}
.ui-date-picker .enabled .ui-spin-item-selected {
  opacity: 1.0;
}
@keyframes changeColor {
  0% {
    color: rgba(77, 207, 255, 1);
  }
  49% {
    color: rgba(77, 207, 255, 1);
  }
  51% {
    color: rgba(250, 250, 250, 1);
  }
  100% {
    color: rgba(250, 250, 250, 1);
  }
}
input[type=text],
input[type=password],
input[type=search],
input[type=email] {
  -webkit-mask-image: url("images/TextInput/b_list_edit_field_bg.png");
          mask-image: url("images/TextInput/b_list_edit_field_bg.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  width: 18rem;
  height: 3.875rem;
  padding: 0.8125rem 1rem;
  color: rgba(250, 250, 250, 1);
  font-size: 1.75rem;
  background-color: rgba(250, 250, 250, 0.15);
  border: none;
  outline: none;
}
input[type=text]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=email]:disabled {
  color: rgba(250, 250, 250, 0.3);
}
input[type=text]:focus + .ui-footer,
input[type=password]:focus + .ui-footer,
input[type=search]:focus + .ui-footer,
input[type=email]:focus + .ui-footer {
  display: none;
}
input[type=text]:active,
input[type=password]:active,
input[type=search]:active,
input[type=email]:active {
  background-color: #5B5B5B;
}
.ui-listview input[type=text]:focus,
.ui-arc-listview-carousel input[type=text]:focus,
.ui-listview input[type=password]:focus,
.ui-arc-listview-carousel input[type=password]:focus,
.ui-listview input[type=search]:focus,
.ui-arc-listview-carousel input[type=search]:focus,
.ui-listview input[type=email]:focus,
.ui-arc-listview-carousel input[type=email]:focus {
  background-color: transparent;
  color: rgba(77, 225, 255, 1);
  -webkit-text-fill-color: rgba(179, 179, 179, 1);
  font-size: 1.875rem;
}
.ui-listview input[type=text]:active,
.ui-arc-listview-carousel input[type=text]:active,
.ui-listview input[type=password]:active,
.ui-arc-listview-carousel input[type=password]:active,
.ui-listview input[type=search]:active,
.ui-arc-listview-carousel input[type=search]:active,
.ui-listview input[type=email]:active,
.ui-arc-listview-carousel input[type=email]:active {
  background-color: rgba(250, 250, 250, 0.15);
}
.ui-textinput-pane {
  width: 100%;
  height: 100%;
  position: fixed;
  display: none;
  background: rgba(0, 0, 0, 1);
  z-index: 1100;
}
.ui-textinput-pane input[type=text]:focus,
.ui-textinput-pane input[type=password]:focus,
.ui-textinput-pane input[type=search]:focus,
.ui-textinput-pane input[type=email]:focus {
  position: fixed;
  width: 100%;
  height: auto;
  border: none;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  margin-top: auto;
  padding: 1.625rem 3.125rem 0.3125rem 3.125rem;
  background-color: rgba(0, 0, 0, 1);
}
@media (min-height: 180px) {
  .ui-textinput-pane input[type=text]:focus,
  .ui-textinput-pane input[type=password]:focus,
  .ui-textinput-pane input[type=search]:focus,
  .ui-textinput-pane input[type=email]:focus {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
.ui-toggleswitch.ui-toggle-slider:not(.ui-switch-button) {
  position: relative;
  display: inline-block;
  width: 4.75rem;
  height: 2.9375rem;
}
.ui-toggleswitch.ui-toggle-slider:not(.ui-switch-button) input {
  background-color: #CCCCCC;
  transition: 0.5s;
  border-radius: 2.9375rem;
  width: 4.75rem;
  height: 2.9375rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  margin: 0;
  -webkit-mask-image: none;
          mask-image: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.ui-toggleswitch.ui-toggle-slider:not(.ui-switch-button) input:checked {
  background-color: #3695DD;
}
.ui-toggleswitch.ui-toggle-slider:not(.ui-switch-button) .ui-switch-button:before {
  position: absolute;
  content: '';
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  height: 2.75rem;
  width: 2.75rem;
  left: 0.125rem;
  top: 0.0625rem;
  background-color: #FFFFFF;
  transition: 0.5s;
  border-radius: 50%;
  -webkit-mask-image: none;
          mask-image: none;
  pointer-events: none;
}
.ui-toggleswitch.ui-toggle-slider:not(.ui-switch-button) .ui-switch-button:after {
  content: none;
}
.ui-toggleswitch.ui-toggle-slider:not(.ui-switch-button) input:checked + .ui-switch-button:before {
  -webkit-transform: translateX(1.8125rem);
      -ms-transform: translateX(1.8125rem);
          transform: translateX(1.8125rem);
  background-color: #FFFFFF;
}
