/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/pages/index/index.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
.canvas-container {
  width: 100%;
  height: 500rpx;
}

.demo {
  width: 749rpx;
  height: 30rpx;
  background-color: aqua;
}

.login {
  color: red;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/pages/Clock.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
.console_box {
  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;
  margin: 20rpx;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
  color: #fff;
  background-color: #1c1c1c;
  border-radius: 40rpx;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./node_modules/taro-ui/dist/style/components/float-layout.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Default variables
 */
/**
 * Mixes a color with white. It's different from lighten()
 *
 * @param {color} $color
 * @param {number (percentage)} $percent [The amout of white to be mixed in]
 * @return {color}
 *
 * @example
 *   .element {
 *     background-color: tint(#6ecaa6 , 40%);
 *   }
 *
 *   // CSS Output
 *   .element {
 *     background-color: #a8dfc9;
 *   }
 */
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
 * 组件变量
 */
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
 * Mixins
 */
/* library */
/**
 * 元素居中定位
 */
/**
 * @example scss
 *
 * .element {
 *   @include clearfix;
 * }
 *
 * // CSS Output
 * .element::after {
 *   clear: both;
 *   content: '';
 *   display: block;
 * }
 */
/**
 * 通用的遮罩
 */
/**
 * Mixes a color with black. It's different from darken()
 *
 * @param {color} $color
 * @param {number (percentage)} $percent [The amount of black to be mixed in]
 * @return {color}
 *
 * @example
 *   .element {
 *     background-color: shade(#ffbb52, 60%);
 *   }
 *
 *   // CSS Output
 *   .element {
 *     background-color: #664a20;
 *   }
 */
/**
 * Mixes a color with white. It's different from lighten()
 *
 * @param {color} $color
 * @param {number (percentage)} $percent [The amout of white to be mixed in]
 * @return {color}
 *
 * @example
 *   .element {
 *     background-color: tint(#6ecaa6 , 40%);
 *   }
 *
 *   // CSS Output
 *   .element {
 *     background-color: #a8dfc9;
 *   }
 */
/* Flex Item */
/**
 * 默认主题下 $color-border-light
 */
/**
 * 点击态
 */
/**
 * 禁止态
 */
/**
 * 设置placeholder 颜色
 */
/**
 * 默认主题下 $color-border-light
 */
.at-float-layout {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: 810;
  -webkit-transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  /* elements */
  /* modifiers */
}
.at-float-layout__overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: opacity 150ms ease-in;
  transition: opacity 150ms ease-in;
}
.at-float-layout__container {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 600rpx;
  max-height: 950rpx;
  background-color: #FFF;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  transition: -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
}
.at-float-layout .layout-header {
  position: relative;
  padding: 18rpx;
  line-height: 1.5;
  background-color: #F7F7F7;
}
.at-float-layout .layout-header__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  font-size: 32rpx;
  display: block;
  padding-right: 80rpx;
}
.at-float-layout .layout-header__btn-close {
  position: absolute;
  padding: 10rpx;
  top: 50%;
  right: 18rpx;
  width: 40rpx;
  height: 100%;
  line-height: 1;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.at-float-layout .layout-header__btn-close::before, .at-float-layout .layout-header__btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 36rpx;
  height: 2PX;
  border-radius: 1PX;
  background: #CCC;
}
.at-float-layout .layout-header__btn-close::before {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
          transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
.at-float-layout .layout-header__btn-close::after {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
          transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
.at-float-layout .layout-body {
  font-size: 28rpx;
  padding: 18rpx;
  max-height: 828rpx;
  min-height: 514rpx;
}
.at-float-layout .layout-body__content {
  max-height: 798rpx;
  min-height: 484rpx;
}
.at-float-layout--active {
  visibility: visible;
}
.at-float-layout--active .at-float-layout__overlay {
  opacity: 1;
}
.at-float-layout--active .at-float-layout__container {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/features/trackTimeDuration/components/TitleBar.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.detail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10rpx;
  color: #fff;
  background-color: #000;
}

.title {
  color: #fff;
  font-size: 48rpx;
  line-height: 48rpx;
  margin-bottom: 8rpx;
}

.time {
  color: #fff;
  opacity: 0.4;
  font-size: 32rpx;
  line-height: 48rpx;
}

.detail_item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -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;
}

.title_bg {
  padding-top: 9rpx;
  position: relative;
  width: 100rpx;
}

.badge {
  position: absolute;
  right: -9rpx;
  top: 0rpx;
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #AAFF00;
}