/***************************************************************************
                  Body
***************************************************************************/
/***************************************************************************
                   Action Bar
***************************************************************************/
/****************************************************************************
               Circle Progress Bar
****************************************************************************/
/****************************************************************************
		Progress Bar
****************************************************************************/
/****************************************************************************
		Processing
****************************************************************************/
/***************************************************************************
                   Buttons
***************************************************************************/
/***************************************************************************
                   Popup
***************************************************************************/
/***************************************************************************
                   Footer
***************************************************************************/
/***************************************************************************
                   Toast Popup
***************************************************************************/
/***************************************************************************
                   Option Popup
***************************************************************************/
/***************************************************************************
                  circular index scrollbar
***************************************************************************/
/***************************************************************************
                  Listview
***************************************************************************/
/****************************************************************************
               Listview with Marquee
****************************************************************************/
/***************************************************************************
                   Checkbox/Radio
***************************************************************************/
/***************************************************************************
						Page Indicator
***************************************************************************/
/****************************************************************************
		Toggle Switch
****************************************************************************/
/***************************************************************************
                   Scroller
***************************************************************************/
/***************************************************************************
                   More options
***************************************************************************/
/************************************************************************/
/*                           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)                           */
/**********************************************************************/
/************************
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(8, 8, 8, 1);
  color: rgba(245, 245, 245, 1);
}
.ui-header {
  height: 128px;
  line-height: 36px;
  background-color: rgba(8, 8, 8, 1);
}
.ui-header .ui-title {
  color: rgba(0, 149, 255, 1);
  text-align: center;
  padding-top: 54px;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.ui-header .ui-title.ui-icon {
  background: none !important;
  padding-left: 1.5rem;
}
.ui-header.ui-has-more .ui-title {
  padding-right: 1.5rem;
  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
}
.ui-header.ui-has-more .ui-more {
  position: fixed;
  top: 163px;
  right: 8px;
  width: 50px;
  height: 36px;
}
.ui-header.ui-has-more .ui-more.ui-icon-overflow {
  background-color: rgba(245, 245, 245, 0.8);
}
.ui-page {
  background: rgba(8, 8, 8, 1);
}
.ui-page .ui-footer.ui-bottom-button {
  overflow: hidden;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn {
  width: 112px;
  height: 112px;
  position: relative;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  border-radius: 50%;
  text-indent: -9999px;
  margin-bottom: -22px;
}
.ui-page .ui-footer.ui-bottom-button .ui-btn:only-child::before {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
.ui-page .ui-footer.ui-bottom-button .ui-btn::before {
  content: "";
  background-color: rgba(245, 245, 245, 1);
  -webkit-mask-size: 3.75rem 3.75rem;
  -webkit-mask-repeat: no-repeat;
  width: 3.75rem;
  height: 3.75rem;
  position: absolute;
  bottom: 23px;
}
/***************************************************************************
                   Page Scroll
***************************************************************************/
.ui-page.ui-scroll-on .ui-content {
  margin-top: 7.625rem;
  margin-bottom: 6.125rem;
  padding-top: 0;
}
.ui-page.ui-scroll-on .ui-header ~ .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(245, 245, 245, 1);
}
/***************************************************************************
                  toggle switch
***************************************************************************/
.ui-switch-text {
  margin-top: 60px;
  margin-bottom: 48px;
  font-size: 34px;
  padding: 0;
}
.ui-switch-sub-text {
  margin-top: 48px;
  margin-bottom: 55px;
  font-size: 26px;
  color: rgba(0, 149, 255, 1);
}
.ui-toggleswitch {
  width: 69px;
  height: 49px;
}
.ui-toggleswitch .ui-switch-input::before {
  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
  -webkit-mask-size: 69px;
  background-color: rgba(51, 51, 51, 1);
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  -ms-transition-duration: 150ms;
  transition-duration: 150ms;
}
.ui-toggleswitch .ui-switch-input:active::before {
  -webkit-transition-duration: 0;
  -moz-transition-duration: 0;
  -o-transition-duration: 0;
  -ms-transition-duration: 0;
  transition-duration: 0;
  background-color: rgba(51, 51, 51, 1);
}
.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
  -webkit-transition-duration: 0;
  -moz-transition-duration: 0;
  -o-transition-duration: 0;
  -ms-transition-duration: 0;
  transition-duration: 0;
  background-color: rgba(97, 96, 96, 1);
}
.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
  background-color: rgba(173, 173, 173, 1);
}
.ui-toggleswitch .ui-switch-activation,
.ui-toggleswitch .ui-switch-button {
  width: 49px;
  height: 49px;
  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
  -webkit-mask-size: 69px;
  -webkit-mask-position: 0 -49px;
  background-color: rgba(128, 128, 128, 1);
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  -ms-transition-duration: 150ms;
  transition-duration: 150ms;
}
.ui-toggleswitch .ui-switch-activation::before,
.ui-toggleswitch .ui-switch-button::before {
  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
  -webkit-mask-size: 69px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 -98px;
  background-color: rgba(222, 222, 222, 1);
}
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
  width: 49px;
  height: 49px;
  -webkit-mask-position: 0 -49px;
  background-color: rgba(112, 186, 15, 1);
  -webkit-transform: translate3d(20px, 0, 0);
  -moz-transform: translate3d(20px, 0, 0);
  -ms-transform: translate3d(20px, 0, 0);
  -o-transform: translate3d(20px, 0, 0);
  transform: translate3d(20px, 0, 0);
}
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
  -webkit-mask-position: 0 -147px;
  background-color: rgba(241, 242, 237, 1);
}
.ui-toggleswitch .ui-switch-input:checked::before {
  background-color: rgba(43, 69, 8, 1);
}
.ui-toggleswitch .ui-switch-input:checked:active::before {
  background-color: rgba(43, 69, 8, 1);
}
.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
  background-color: rgba(71, 97, 37, 1);
}
.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
  background-color: rgba(172, 173, 170, 1);
}
.ui-toggleswitch.ui-toggleswitch-large {
  width: 136px;
  height: 78px;
}
.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
  width: 78px;
  height: 78px;
  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
  -webkit-mask-size: 136px;
  -webkit-mask-position: 0 -78px;
}
.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
  -webkit-mask-size: 136px;
  -webkit-mask-position: 0 -156px;
}
.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
  -webkit-mask-size: 136px;
}
.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
  width: 78px;
  height: 78px;
  -webkit-mask-position: 0 -78px;
  -webkit-transform: translate3d(58px, 0, 0);
  -moz-transform: translate3d(58px, 0, 0);
  -ms-transform: translate3d(58px, 0, 0);
  -o-transform: translate3d(58px, 0, 0);
  transform: translate3d(58px, 0, 0);
}
.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
  -webkit-mask-position: 0 -234px;
}
/***************************************************************************
                  popup
***************************************************************************/
/***********************
Normal Popup
***********************/
.ui-popup {
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(0, 17, 33, 1);
  border: 3px solid rgba(0, 149, 255, 1);
}
.ui-popup .ui-popup-header {
  text-align: center;
  min-height: 122px;
  background-color: rgba(0, 17, 33, 1);
  color: rgba(0, 149, 255, 1);
  padding-top: 53px;
  padding-right: 61px;
  padding-bottom: 33px;
  padding-left: 61px;
}
.ui-popup .ui-popup-header + .ui-popup-content {
  padding-top: 26px;
}
.ui-popup .ui-popup-content {
  color: rgba(245, 245, 245, 1);
  background-color: rgba(0, 17, 33, 1);
  padding: 58px 55px 16px 55px;
}
.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-popup-footer {
  width: 0;
  height: 0;
}
.ui-popup .ui-popup-footer .ui-btn {
  height: 108px;
  width: 108px;
  border-radius: 54px;
  position: fixed;
  text-indent: -9999px;
}
.ui-popup .ui-popup-footer .ui-btn.ui-btn-footer-icon::before {
  content: "";
  background-color: rgba(245, 245, 245, 1);
  -webkit-mask-size: 48px 48px;
  -webkit-mask-repeat: no-repeat;
  width: 48px;
  height: 48px;
  position: absolute;
}
.ui-popup .ui-popup-footer .ui-btn:only-child {
  top: -53px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
.ui-popup .ui-popup-footer .ui-btn:only-child.ui-btn-footer-icon::before {
  top: 54px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
.ui-popup .ui-popup-footer .ui-btn:active {
  background-color: rgba(51, 170, 255, 1);
}
.ui-popup .ui-popup-footer .ui-btn:active.ui-btn-footer-icon::before {
  background-color: rgba(245, 245, 245, 1);
}
.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1) {
  top: 50%;
  left: -53px;
  transform: translate3d(0, -50%, 0);
}
.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1).ui-btn-footer-icon::before {
  top: 50%;
  left: 53px;
  transform: translate3d(0, -50%, 0);
}
.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2) {
  top: 50%;
  right: -53px;
  transform: translate3d(0, -50%, 0);
}
.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2).ui-btn-footer-icon::before {
  top: 50%;
  right: 53px;
  transform: translate3d(0, -50%, 0);
}
/***********************
Popup Container Scroll
***********************/
.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
  margin-top: 7.625rem;
  margin-bottom: 6.125rem;
  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: 26px;
}
/****************************************
Popup Toast
****************************************/
.ui-popup.ui-popup-toast {
  bottom: 2.6875rem;
  border: 3px solid rgba(2, 56, 92, 1);
  position: fixed;
  max-height: 13.75rem;
}
.ui-popup.ui-popup-toast .ui-popup-content {
  background-color: rgba(0, 17, 33, 1);
  padding: 13px 40px 12px;
  font-size: 32px;
  text-align: center;
  line-height: 42px;
}
/***********************
Option Popup
***********************/
.ui-popup.ui-ctxpopup {
  background-color: transparent;
  left: 50% !important;
  margin-left: -6.28125rem;
  top: 50% !important;
  margin-top: -6.28125rem;
  width: 12.5625rem;
}
div.ui-popup.ui-ctxpopup.ui-popup-content-size {
  width: 12.5625rem;
}
.ui-popup.ui-ctxpopup.ui-popup-arrow-t,
.ui-popup.ui-ctxpopup.ui-popup-arrow-b,
.ui-popup.ui-ctxpopup.ui-popup-arrow-r,
.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
  padding: 0;
}
.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow > span,
.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow > span,
.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow > span,
.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow > span {
  background-color: rgba(2, 56, 92, 1);
  border: 0;
}
.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow,
.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
  left: 5.15625rem !important;
}
.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow,
.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
  top: 5.84375rem !important;
}
.ui-popup.ui-ctxpopup .ui-popup-content {
  -webkit-border-radius: 50%;
  -webkit-mask-image: -webkit-radial-gradient(#000000 6.28125rem, transparent 0);
  height: 12.5625rem !important;
  min-height: 12.5625rem !important;
  background-color: rgba(2, 56, 92, 1);
  border: 1px solid rgba(8, 8, 8, 1);
  padding: 0;
  border: 0;
}
.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview {
  margin: 0;
}
.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
  font-size: 1.75rem;
  min-height: 6.25rem;
  text-align: center;
  line-height: 3.625rem;
  border-bottom: 1px solid rgba(8, 8, 8, 1);
  color: rgba(245, 245, 245, 1);
}
.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
  color: rgba(245, 245, 245, 1);
  margin: -1.46875rem -1rem;
  padding: 1.46875rem 1rem;
  min-height: 3.3125rem;
}
.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
  color: rgba(245, 245, 245, 1);
  background-color: rgba(23, 73, 115, 1);
}
.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
  height: initial;
  overflow: hidden;
  width: 12.5625rem !important;
  margin: 0;
}
.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
  font-size: 1.75rem;
  float: none;
  min-height: 6.25rem;
  line-height: 3.625rem;
  text-align: center;
  border-bottom: 1px solid rgba(8, 8, 8, 1);
  border-right: 0;
}
.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
  margin: 0;
  padding: 0;
  line-height: 6.25rem;
  color: rgba(245, 245, 245, 1);
}
.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
  color: rgba(245, 245, 245, 1);
  background-color: rgba(23, 73, 115, 1);
}
.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
  width: 100%;
  height: 100%;
}
/***************************************************************************
                  listview
***************************************************************************/
.ui-listview li {
  font-size: 2.25rem;
  min-height: 6.5625rem;
  padding: 1.78125rem 2.5rem;
  border-bottom: 1px solid rgba(41, 41, 41, 1);
  color: rgba(245, 245, 245, 1);
  text-align: center;
}
.ui-listview li > * {
  color: rgba(245, 245, 245, 1);
}
.ui-listview li > a {
  padding: 1.78125rem 2.5rem;
  margin: -1.8125rem -2.5rem;
}
.ui-listview li.ui-li-active {
  background-color: rgba(8, 56, 94, 1);
  color: rgba(245, 245, 245, 1);
}
.ui-listview li:last-child {
  border: 0;
}
.ui-listview .li-divider {
  height: 2.0625rem;
  min-height: 2.0625rem;
  line-height: 1.9375rem;
  background-color: rgba(31, 31, 31, 1);
  color: rgba(0, 149, 255, 1);
  padding: 0;
}
.ui-listview .ui-li-sub-text {
  color: rgba(0, 149, 255, 1);
}
.ui-header + .ui-content .ui-listview li:first-child {
  border-top: 1px solid rgba(41, 41, 41, 1);
}
/***************************************************************************
                  listview extra
***************************************************************************/
.ui-listview .ui-li-has-action-icon .ui-action-text::after {
  background-color: rgba(245, 245, 245, 1);
}
.ui-listview .ui-li-has-action-icon .ui-action-delete {
  background-color: rgba(245, 245, 245, 1);
}
.ui-listview .ui-li-has-action-icon .ui-action-setting {
  background-color: rgba(245, 245, 245, 1);
}
.ui-listview .ui-li-has-action-icon .ui-action-add {
  background-color: rgba(245, 245, 245, 1);
}
.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
  background-color: rgba(8, 56, 94, 1);
  color: rgba(245, 245, 245, 1);
}
.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
.ui-listview .ui-li-has-action-icon .ui-action-add:active {
  background-color: rgba(8, 56, 94, 1);
  color: rgba(245, 245, 245, 1);
}
/***************************************************************************
                  checkbox / radio button
***************************************************************************/
input[type="checkbox"]:not(.ui-switch-input) {
  background-color: rgba(0, 14, 26, 1);
}
input[type="checkbox"]:not(.ui-switch-input)::after {
  background-color: rgba(245, 245, 245, 0.3);
}
input[type="checkbox"]:not(.ui-switch-input):checked::before {
  background-color: rgba(112, 186, 15, 1);
}
input[type="checkbox"]:not(.ui-switch-input)::before {
  content: "";
  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
  -webkit-mask-repeat: no-repeat;
  background-color: rgba(112, 186, 15, 1);
  width: 0;
  height: 56px;
  position: absolute;
  -webkit-transition: width 150ms;
}
input[type="checkbox"]:not(.ui-switch-input):active {
  background-color: rgba(0, 50, 84, 0.4);
}
input[type="checkbox"]:not(.ui-switch-input):active::after {
  background-color: rgba(245, 245, 245, 0.3);
}
input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
  background-color: rgba(245, 245, 245, 1);
}
input[type="radio"] {
  background-color: rgba(0, 14, 26, 1);
}
input[type="radio"]::after {
  background-color: rgba(245, 245, 245, 0.3);
}
input[type="radio"]::before {
  content: "";
  background-color: rgba(112, 186, 15, 1);
  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
  -webkit-mask-repeat: no-repeat;
  width: 56px;
  height: 56px;
  position: absolute;
  -webkit-transform: scale3d(0, 0, 0);
  -webkit-transition: -webkit-transform 150ms;
}
input[type="radio"]:checked::before {
  background-color: rgba(112, 186, 15, 1);
  -webkit-transform: scale3d(1, 1, 1);
}
input[type="radio"]:active {
  background-color: rgba(0, 50, 84, 0.4);
}
input[type="radio"]:active:checked::before {
  background-color: rgba(245, 245, 245, 1);
}
/***************************************************************************
                  button
***************************************************************************/
.ui-default {
  color: rgba(245, 245, 245, 1);
  background-color: rgba(2, 56, 92, 1);
}
a.ui-default:active:hover,
.ui-default:enabled:active:hover {
  background-color: rgba(23, 73, 115, 1);
}
.ui-default:enabled:focus {
  background-color: rgba(2, 56, 92, 1);
}
a.ui-default.ui-state-disabled,
.ui-default:disabled {
  color: rgba(245, 245, 245, 0.2);
  background-color: rgba(3, 44, 64, 1);
}
.ui-color-red {
  color: rgba(245, 245, 245, 1);
  background-color: rgba(207, 36, 2, 1);
}
a.ui-color-red:active:hover,
.ui-color-red:enabled:active:hover {
  background-color: rgba(222, 102, 78, 1);
}
.ui-color-red:enabled:focus {
  background-color: rgba(207, 36, 2, 1);
}
a.ui-color-red.ui-state-disabled,
.ui-color-red:disabled {
  color: rgba(245, 245, 245, 0.2);
  background-color: rgba(69, 11, 1, 1);
}
.ui-color-orange {
  color: rgba(245, 245, 245, 1);
  background-color: rgba(237, 134, 0, 1);
}
a.ui-color-orange:active:hover,
.ui-color-orange:enabled:active:hover {
  background-color: rgba(242, 171, 78, 1);
}
.ui-color-orange:enabled:focus {
  background-color: rgba(237, 134, 0, 1);
}
a.ui-color-orange.ui-state-disabled,
.ui-color-orange:disabled {
  color: rgba(245, 245, 245, 0.2);
  background-color: rgba(69, 39, 5, 1);
}
.ui-color-green {
  color: rgba(245, 245, 245, 1);
  background-color: rgba(97, 163, 16, 1);
}
a.ui-color-green:active:hover,
.ui-color-green:enabled:active:hover {
  background-color: rgba(146, 191, 90, 1);
}
.ui-color-green:enabled:focus {
  background-color: rgba(97, 163, 16, 1);
}
a.ui-color-green.ui-state-disabled,
.ui-color-green:disabled {
  color: rgba(245, 245, 245, 0.2);
  background-color: rgba(50, 54, 48, 1);
}
.ui-grid-col-1 > .ui-btn {
  border-left: solid 1px rgba(8, 8, 8, 1);
}
.ui-grid-col-2 > .ui-btn {
  border-left: solid 1px rgba(8, 8, 8, 1);
}
.ui-grid-col-3 > .ui-btn {
  border-left: solid 1px rgba(8, 8, 8, 1);
}
/***************************************************************************
                  circle progress bar
***************************************************************************/
.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
  border: 0.8125rem solid rgba(204, 223, 237, 1);
}
.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
  border: 0.8125rem solid rgba(204, 223, 237, 1);
}
.ui-progressbar .ui-progressbar-bg {
  border: 0.8125rem solid rgba(64, 64, 64, 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.3125rem solid rgba(204, 223, 237, 1);
}
.ui-progressbar.ui-progressbar-small .ui-progressbar-bg {
  border: 0.3125rem solid rgba(64, 64, 64, 1);
}
/***************************************************************************
                  circular index scroll bar
***************************************************************************/
.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, rgba(46, 46, 46, 1) 59%);
}
.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
  color: rgba(84, 84, 84, 1);
}
.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
  color: rgba(55, 161, 237, 1);
}
.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
  background-color: rgba(54, 54, 54, 0.85);
}
.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
  color: rgba(55, 161, 237, 1);
}
/***************************************************************************
                  drawer
***************************************************************************/
.ui-drawer {
  background-color: rgba(8, 8, 8, 1);
}
.ui-drawer-overlay {
  background-color: rgba(8, 8, 8, 0.8);
}
/***************************************************************************
                  marquee
***************************************************************************/
.ui-marquee.ui-marquee-gradient::after {
  background: -webkit-linear-gradient(left, transparent 0%, rgba(8, 8, 8, 1) 100%);
}
/***************************************************************************
                  page indicator
***************************************************************************/
.ui-page-indicator-item {
  background-color: rgba(245, 245, 245, 0.4);
}
.ui-page-indicator-item.ui-page-indicator-active {
  background-color: rgba(245, 245, 245, 1);
}
/***************************************************************************
                  processing
***************************************************************************/
.ui-processing {
  background-color: rgba(55, 161, 237, 1);
}
.ui-processing.ui-processing-full-size::after {
  background-color: rgba(55, 161, 237, 1);
}
/***************************************************************************
                  progress
***************************************************************************/
@-webkit-keyframes indeterminate {
  0% {
    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(55, 161, 237, 1);
  }
  25% {
    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(55, 161, 237, 1);
  }
  50% {
    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(55, 161, 237, 1);
  }
  75% {
    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(55, 161, 237, 1);
  }
  100% {
    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
    -webkit-mask-repeat: no-repeat;
    background-color: rgba(55, 161, 237, 1);
  }
}
progress {
  color: rgba(245, 245, 245, 1);
}
progress::-webkit-progress-bar {
  background-color: rgba(64, 64, 64, 1);
}
progress::-webkit-progress-value {
  background-color: rgba(204, 223, 237, 1);
}
progress.ui-progress-indeterminate::-webkit-progress-bar {
  background-color: rgba(204, 223, 237, 1);
}
.ui-scrollbar-bouncing-effect.ui-top {
  display: none;
}
.ui-scrollbar-bouncing-effect.ui-bottom {
  width: 100%;
  height: 6.25rem;
  left: 0;
  -webkit-mask-size: 100% 6.25rem;
}
.ui-scrollbar-bouncing-effect.ui-bottom::before {
  width: 100%;
  height: 6.25rem;
  -webkit-mask-size: 100% 6.25rem;
}
.ui-scrollbar-bouncing-effect.ui-left,
.ui-scrollbar-bouncing-effect.ui-right {
  width: 6.25rem;
  height: 100%;
  top: 0;
  -webkit-mask-size: 6.25rem 100%;
}
.ui-scrollbar-bouncing-effect.ui-left::before,
.ui-scrollbar-bouncing-effect.ui-right::before {
  width: 6.25rem;
  height: 100%;
  -webkit-mask-size: 6.25rem 100%;
}
.ui-scrollbar-bouncing-effect.ui-bottom {
  bottom: 0;
  -webkit-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");
}
.ui-scrollbar-bouncing-effect.ui-left {
  left: 0;
  -webkit-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");
}
.ui-scrollbar-bouncing-effect.ui-right {
  right: 0;
  -webkit-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");
}
/***************************************************************************
				   Footer Style (New style)
***************************************************************************/
.ui-page .ui-expandable-header {
  height: 128px;
}
.ui-page .ui-expandable-header.ui-header-expand {
  height: 179px;
}
.ui-page .ui-expandable-header.ui-header-expand .ui-title {
  transform: translate3d(0, 105px, 0);
}
.is-circle-test {
  width: 1px;
}
