/* General stuff */

/* Layout */

/* Colors */

/* Fonts */

/* Font sizes */

/* Element-ui */

/*$--color-text-regular: $primary-font-color;*/

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
  -webkit-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}

.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
  opacity: 0;
}

.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
  -webkit-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}

.el-fade-in-linear-enter,
.el-fade-in-linear-leave,
.el-fade-in-linear-leave-active {
  opacity: 0;
}

.el-fade-in-enter-active,
.el-fade-in-leave-active {
  -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.el-fade-in-enter,
.el-fade-in-leave-active {
  opacity: 0;
}

.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
  -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.el-zoom-in-center-enter,
.el-zoom-in-center-leave-active {
  opacity: 0;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform-origin: center top;
          transform-origin: center top;
}

.el-zoom-in-top-enter,
.el-zoom-in-top-leave-active {
  opacity: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}

.el-zoom-in-bottom-enter,
.el-zoom-in-bottom-leave-active {
  opacity: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.el-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active {
  opacity: 1;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform-origin: top left;
          transform-origin: top left;
}

.el-zoom-in-left-enter,
.el-zoom-in-left-leave-active {
  opacity: 0;
  -webkit-transform: scale(0.45, 0.45);
          transform: scale(0.45, 0.45);
}

.collapse-transition {
  -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}

.horizontal-collapse-transition {
  -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}

.el-list-enter-active,
.el-list-leave-active {
  -webkit-transition: all 1s;
  transition: all 1s;
}

.el-list-enter,
.el-list-leave-active {
  opacity: 0;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}

.el-opacity-transition {
  -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

@font-face {
  font-family: 'element-icons';
  src: url(/fonts/vendor/element-ui/packages/theme-chalk/src/element-icons.woff?535877f50039c0cb49a6196a5b7517cd) format("woff"), url(/fonts/vendor/element-ui/packages/theme-chalk/src/element-icons.ttf?732389ded34cb9c52dd88271f1345af9) format("truetype");
  /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-display: "auto";
  font-style: normal;
}

[class^="el-icon-"],
[class*=" el-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'element-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-icon-ice-cream-round:before {
  content: "\E6A0";
}

.el-icon-ice-cream-square:before {
  content: "\E6A3";
}

.el-icon-lollipop:before {
  content: "\E6A4";
}

.el-icon-potato-strips:before {
  content: "\E6A5";
}

.el-icon-milk-tea:before {
  content: "\E6A6";
}

.el-icon-ice-drink:before {
  content: "\E6A7";
}

.el-icon-ice-tea:before {
  content: "\E6A9";
}

.el-icon-coffee:before {
  content: "\E6AA";
}

.el-icon-orange:before {
  content: "\E6AB";
}

.el-icon-pear:before {
  content: "\E6AC";
}

.el-icon-apple:before {
  content: "\E6AD";
}

.el-icon-cherry:before {
  content: "\E6AE";
}

.el-icon-watermelon:before {
  content: "\E6AF";
}

.el-icon-grape:before {
  content: "\E6B0";
}

.el-icon-refrigerator:before {
  content: "\E6B1";
}

.el-icon-goblet-square-full:before {
  content: "\E6B2";
}

.el-icon-goblet-square:before {
  content: "\E6B3";
}

.el-icon-goblet-full:before {
  content: "\E6B4";
}

.el-icon-goblet:before {
  content: "\E6B5";
}

.el-icon-cold-drink:before {
  content: "\E6B6";
}

.el-icon-coffee-cup:before {
  content: "\E6B8";
}

.el-icon-water-cup:before {
  content: "\E6B9";
}

.el-icon-hot-water:before {
  content: "\E6BA";
}

.el-icon-ice-cream:before {
  content: "\E6BB";
}

.el-icon-dessert:before {
  content: "\E6BC";
}

.el-icon-sugar:before {
  content: "\E6BD";
}

.el-icon-tableware:before {
  content: "\E6BE";
}

.el-icon-burger:before {
  content: "\E6BF";
}

.el-icon-knife-fork:before {
  content: "\E6C1";
}

.el-icon-fork-spoon:before {
  content: "\E6C2";
}

.el-icon-chicken:before {
  content: "\E6C3";
}

.el-icon-food:before {
  content: "\E6C4";
}

.el-icon-dish-1:before {
  content: "\E6C5";
}

.el-icon-dish:before {
  content: "\E6C6";
}

.el-icon-moon-night:before {
  content: "\E6EE";
}

.el-icon-moon:before {
  content: "\E6F0";
}

.el-icon-cloudy-and-sunny:before {
  content: "\E6F1";
}

.el-icon-partly-cloudy:before {
  content: "\E6F2";
}

.el-icon-cloudy:before {
  content: "\E6F3";
}

.el-icon-sunny:before {
  content: "\E6F6";
}

.el-icon-sunset:before {
  content: "\E6F7";
}

.el-icon-sunrise-1:before {
  content: "\E6F8";
}

.el-icon-sunrise:before {
  content: "\E6F9";
}

.el-icon-heavy-rain:before {
  content: "\E6FA";
}

.el-icon-lightning:before {
  content: "\E6FB";
}

.el-icon-light-rain:before {
  content: "\E6FC";
}

.el-icon-wind-power:before {
  content: "\E6FD";
}

.el-icon-baseball:before {
  content: "\E712";
}

.el-icon-soccer:before {
  content: "\E713";
}

.el-icon-football:before {
  content: "\E715";
}

.el-icon-basketball:before {
  content: "\E716";
}

.el-icon-ship:before {
  content: "\E73F";
}

.el-icon-truck:before {
  content: "\E740";
}

.el-icon-bicycle:before {
  content: "\E741";
}

.el-icon-mobile-phone:before {
  content: "\E6D3";
}

.el-icon-service:before {
  content: "\E6D4";
}

.el-icon-key:before {
  content: "\E6E2";
}

.el-icon-unlock:before {
  content: "\E6E4";
}

.el-icon-lock:before {
  content: "\E6E5";
}

.el-icon-watch:before {
  content: "\E6FE";
}

.el-icon-watch-1:before {
  content: "\E6FF";
}

.el-icon-timer:before {
  content: "\E702";
}

.el-icon-alarm-clock:before {
  content: "\E703";
}

.el-icon-map-location:before {
  content: "\E704";
}

.el-icon-delete-location:before {
  content: "\E705";
}

.el-icon-add-location:before {
  content: "\E706";
}

.el-icon-location-information:before {
  content: "\E707";
}

.el-icon-location-outline:before {
  content: "\E708";
}

.el-icon-location:before {
  content: "\E79E";
}

.el-icon-place:before {
  content: "\E709";
}

.el-icon-discover:before {
  content: "\E70A";
}

.el-icon-first-aid-kit:before {
  content: "\E70B";
}

.el-icon-trophy-1:before {
  content: "\E70C";
}

.el-icon-trophy:before {
  content: "\E70D";
}

.el-icon-medal:before {
  content: "\E70E";
}

.el-icon-medal-1:before {
  content: "\E70F";
}

.el-icon-stopwatch:before {
  content: "\E710";
}

.el-icon-mic:before {
  content: "\E711";
}

.el-icon-copy-document:before {
  content: "\E718";
}

.el-icon-full-screen:before {
  content: "\E719";
}

.el-icon-switch-button:before {
  content: "\E71B";
}

.el-icon-aim:before {
  content: "\E71C";
}

.el-icon-crop:before {
  content: "\E71D";
}

.el-icon-odometer:before {
  content: "\E71E";
}

.el-icon-time:before {
  content: "\E71F";
}

.el-icon-bangzhu:before {
  content: "\E724";
}

.el-icon-close-notification:before {
  content: "\E726";
}

.el-icon-microphone:before {
  content: "\E727";
}

.el-icon-turn-off-microphone:before {
  content: "\E728";
}

.el-icon-position:before {
  content: "\E729";
}

.el-icon-postcard:before {
  content: "\E72A";
}

.el-icon-message:before {
  content: "\E72B";
}

.el-icon-chat-line-square:before {
  content: "\E72D";
}

.el-icon-chat-dot-square:before {
  content: "\E72E";
}

.el-icon-chat-dot-round:before {
  content: "\E72F";
}

.el-icon-chat-square:before {
  content: "\E730";
}

.el-icon-chat-line-round:before {
  content: "\E731";
}

.el-icon-chat-round:before {
  content: "\E732";
}

.el-icon-set-up:before {
  content: "\E733";
}

.el-icon-turn-off:before {
  content: "\E734";
}

.el-icon-open:before {
  content: "\E735";
}

.el-icon-connection:before {
  content: "\E736";
}

.el-icon-link:before {
  content: "\E737";
}

.el-icon-cpu:before {
  content: "\E738";
}

.el-icon-thumb:before {
  content: "\E739";
}

.el-icon-female:before {
  content: "\E73A";
}

.el-icon-male:before {
  content: "\E73B";
}

.el-icon-guide:before {
  content: "\E73C";
}

.el-icon-news:before {
  content: "\E73E";
}

.el-icon-price-tag:before {
  content: "\E744";
}

.el-icon-discount:before {
  content: "\E745";
}

.el-icon-wallet:before {
  content: "\E747";
}

.el-icon-coin:before {
  content: "\E748";
}

.el-icon-money:before {
  content: "\E749";
}

.el-icon-bank-card:before {
  content: "\E74A";
}

.el-icon-box:before {
  content: "\E74B";
}

.el-icon-present:before {
  content: "\E74C";
}

.el-icon-sell:before {
  content: "\E6D5";
}

.el-icon-sold-out:before {
  content: "\E6D6";
}

.el-icon-shopping-bag-2:before {
  content: "\E74D";
}

.el-icon-shopping-bag-1:before {
  content: "\E74E";
}

.el-icon-shopping-cart-2:before {
  content: "\E74F";
}

.el-icon-shopping-cart-1:before {
  content: "\E750";
}

.el-icon-shopping-cart-full:before {
  content: "\E751";
}

.el-icon-smoking:before {
  content: "\E752";
}

.el-icon-no-smoking:before {
  content: "\E753";
}

.el-icon-house:before {
  content: "\E754";
}

.el-icon-table-lamp:before {
  content: "\E755";
}

.el-icon-school:before {
  content: "\E756";
}

.el-icon-office-building:before {
  content: "\E757";
}

.el-icon-toilet-paper:before {
  content: "\E758";
}

.el-icon-notebook-2:before {
  content: "\E759";
}

.el-icon-notebook-1:before {
  content: "\E75A";
}

.el-icon-files:before {
  content: "\E75B";
}

.el-icon-collection:before {
  content: "\E75C";
}

.el-icon-receiving:before {
  content: "\E75D";
}

.el-icon-suitcase-1:before {
  content: "\E760";
}

.el-icon-suitcase:before {
  content: "\E761";
}

.el-icon-film:before {
  content: "\E763";
}

.el-icon-collection-tag:before {
  content: "\E765";
}

.el-icon-data-analysis:before {
  content: "\E766";
}

.el-icon-pie-chart:before {
  content: "\E767";
}

.el-icon-data-board:before {
  content: "\E768";
}

.el-icon-data-line:before {
  content: "\E76D";
}

.el-icon-reading:before {
  content: "\E769";
}

.el-icon-magic-stick:before {
  content: "\E76A";
}

.el-icon-coordinate:before {
  content: "\E76B";
}

.el-icon-mouse:before {
  content: "\E76C";
}

.el-icon-brush:before {
  content: "\E76E";
}

.el-icon-headset:before {
  content: "\E76F";
}

.el-icon-umbrella:before {
  content: "\E770";
}

.el-icon-scissors:before {
  content: "\E771";
}

.el-icon-mobile:before {
  content: "\E773";
}

.el-icon-attract:before {
  content: "\E774";
}

.el-icon-monitor:before {
  content: "\E775";
}

.el-icon-search:before {
  content: "\E778";
}

.el-icon-takeaway-box:before {
  content: "\E77A";
}

.el-icon-paperclip:before {
  content: "\E77D";
}

.el-icon-printer:before {
  content: "\E77E";
}

.el-icon-document-add:before {
  content: "\E782";
}

.el-icon-document:before {
  content: "\E785";
}

.el-icon-document-checked:before {
  content: "\E786";
}

.el-icon-document-copy:before {
  content: "\E787";
}

.el-icon-document-delete:before {
  content: "\E788";
}

.el-icon-document-remove:before {
  content: "\E789";
}

.el-icon-tickets:before {
  content: "\E78B";
}

.el-icon-folder-checked:before {
  content: "\E77F";
}

.el-icon-folder-delete:before {
  content: "\E780";
}

.el-icon-folder-remove:before {
  content: "\E781";
}

.el-icon-folder-add:before {
  content: "\E783";
}

.el-icon-folder-opened:before {
  content: "\E784";
}

.el-icon-folder:before {
  content: "\E78A";
}

.el-icon-edit-outline:before {
  content: "\E764";
}

.el-icon-edit:before {
  content: "\E78C";
}

.el-icon-date:before {
  content: "\E78E";
}

.el-icon-c-scale-to-original:before {
  content: "\E7C6";
}

.el-icon-view:before {
  content: "\E6CE";
}

.el-icon-loading:before {
  content: "\E6CF";
}

.el-icon-rank:before {
  content: "\E6D1";
}

.el-icon-sort-down:before {
  content: "\E7C4";
}

.el-icon-sort-up:before {
  content: "\E7C5";
}

.el-icon-sort:before {
  content: "\E6D2";
}

.el-icon-finished:before {
  content: "\E6CD";
}

.el-icon-refresh-left:before {
  content: "\E6C7";
}

.el-icon-refresh-right:before {
  content: "\E6C8";
}

.el-icon-refresh:before {
  content: "\E6D0";
}

.el-icon-video-play:before {
  content: "\E7C0";
}

.el-icon-video-pause:before {
  content: "\E7C1";
}

.el-icon-d-arrow-right:before {
  content: "\E6DC";
}

.el-icon-d-arrow-left:before {
  content: "\E6DD";
}

.el-icon-arrow-up:before {
  content: "\E6E1";
}

.el-icon-arrow-down:before {
  content: "\E6DF";
}

.el-icon-arrow-right:before {
  content: "\E6E0";
}

.el-icon-arrow-left:before {
  content: "\E6DE";
}

.el-icon-top-right:before {
  content: "\E6E7";
}

.el-icon-top-left:before {
  content: "\E6E8";
}

.el-icon-top:before {
  content: "\E6E6";
}

.el-icon-bottom:before {
  content: "\E6EB";
}

.el-icon-right:before {
  content: "\E6E9";
}

.el-icon-back:before {
  content: "\E6EA";
}

.el-icon-bottom-right:before {
  content: "\E6EC";
}

.el-icon-bottom-left:before {
  content: "\E6ED";
}

.el-icon-caret-top:before {
  content: "\E78F";
}

.el-icon-caret-bottom:before {
  content: "\E790";
}

.el-icon-caret-right:before {
  content: "\E791";
}

.el-icon-caret-left:before {
  content: "\E792";
}

.el-icon-d-caret:before {
  content: "\E79A";
}

.el-icon-share:before {
  content: "\E793";
}

.el-icon-menu:before {
  content: "\E798";
}

.el-icon-s-grid:before {
  content: "\E7A6";
}

.el-icon-s-check:before {
  content: "\E7A7";
}

.el-icon-s-data:before {
  content: "\E7A8";
}

.el-icon-s-opportunity:before {
  content: "\E7AA";
}

.el-icon-s-custom:before {
  content: "\E7AB";
}

.el-icon-s-claim:before {
  content: "\E7AD";
}

.el-icon-s-finance:before {
  content: "\E7AE";
}

.el-icon-s-comment:before {
  content: "\E7AF";
}

.el-icon-s-flag:before {
  content: "\E7B0";
}

.el-icon-s-marketing:before {
  content: "\E7B1";
}

.el-icon-s-shop:before {
  content: "\E7B4";
}

.el-icon-s-open:before {
  content: "\E7B5";
}

.el-icon-s-management:before {
  content: "\E7B6";
}

.el-icon-s-ticket:before {
  content: "\E7B7";
}

.el-icon-s-release:before {
  content: "\E7B8";
}

.el-icon-s-home:before {
  content: "\E7B9";
}

.el-icon-s-promotion:before {
  content: "\E7BA";
}

.el-icon-s-operation:before {
  content: "\E7BB";
}

.el-icon-s-unfold:before {
  content: "\E7BC";
}

.el-icon-s-fold:before {
  content: "\E7A9";
}

.el-icon-s-platform:before {
  content: "\E7BD";
}

.el-icon-s-order:before {
  content: "\E7BE";
}

.el-icon-s-cooperation:before {
  content: "\E7BF";
}

.el-icon-bell:before {
  content: "\E725";
}

.el-icon-message-solid:before {
  content: "\E799";
}

.el-icon-video-camera:before {
  content: "\E772";
}

.el-icon-video-camera-solid:before {
  content: "\E796";
}

.el-icon-camera:before {
  content: "\E779";
}

.el-icon-camera-solid:before {
  content: "\E79B";
}

.el-icon-download:before {
  content: "\E77C";
}

.el-icon-upload2:before {
  content: "\E77B";
}

.el-icon-upload:before {
  content: "\E7C3";
}

.el-icon-picture-outline-round:before {
  content: "\E75F";
}

.el-icon-picture-outline:before {
  content: "\E75E";
}

.el-icon-picture:before {
  content: "\E79F";
}

.el-icon-close:before {
  content: "\E6DB";
}

.el-icon-check:before {
  content: "\E6DA";
}

.el-icon-plus:before {
  content: "\E6D9";
}

.el-icon-minus:before {
  content: "\E6D8";
}

.el-icon-help:before {
  content: "\E73D";
}

.el-icon-s-help:before {
  content: "\E7B3";
}

.el-icon-circle-close:before {
  content: "\E78D";
}

.el-icon-circle-check:before {
  content: "\E720";
}

.el-icon-circle-plus-outline:before {
  content: "\E723";
}

.el-icon-remove-outline:before {
  content: "\E722";
}

.el-icon-zoom-out:before {
  content: "\E776";
}

.el-icon-zoom-in:before {
  content: "\E777";
}

.el-icon-error:before {
  content: "\E79D";
}

.el-icon-success:before {
  content: "\E79C";
}

.el-icon-circle-plus:before {
  content: "\E7A0";
}

.el-icon-remove:before {
  content: "\E7A2";
}

.el-icon-info:before {
  content: "\E7A1";
}

.el-icon-question:before {
  content: "\E7A4";
}

.el-icon-warning-outline:before {
  content: "\E6C9";
}

.el-icon-warning:before {
  content: "\E7A3";
}

.el-icon-goods:before {
  content: "\E7C2";
}

.el-icon-s-goods:before {
  content: "\E7B2";
}

.el-icon-star-off:before {
  content: "\E717";
}

.el-icon-star-on:before {
  content: "\E797";
}

.el-icon-more-outline:before {
  content: "\E6CC";
}

.el-icon-more:before {
  content: "\E794";
}

.el-icon-phone-outline:before {
  content: "\E6CB";
}

.el-icon-phone:before {
  content: "\E795";
}

.el-icon-user:before {
  content: "\E6E3";
}

.el-icon-user-solid:before {
  content: "\E7A5";
}

.el-icon-setting:before {
  content: "\E6CA";
}

.el-icon-s-tools:before {
  content: "\E7AC";
}

.el-icon-delete:before {
  content: "\E6D7";
}

.el-icon-delete-solid:before {
  content: "\E7C9";
}

.el-icon-eleme:before {
  content: "\E7C7";
}

.el-icon-platform-eleme:before {
  content: "\E7CA";
}

.el-icon-loading {
  -webkit-animation: rotating 2s linear infinite;
          animation: rotating 2s linear infinite;
}

.el-icon--right {
  margin-left: 5px;
}

.el-icon--left {
  margin-right: 5px;
}

@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* BEM support Func
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Break-points
 -------------------------- */

/* Scrollbar
 -------------------------- */

/* Placeholder
 -------------------------- */

/* BEM
 -------------------------- */

.el-row {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.el-row::before,
.el-row::after {
  display: table;
  content: "";
}

.el-row::after {
  clear: both;
}

.el-row--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.el-row--flex:before,
.el-row--flex:after {
  display: none;
}

.el-row--flex.is-justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.el-row--flex.is-justify-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.el-row--flex.is-justify-space-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.el-row--flex.is-justify-space-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.el-row--flex.is-align-top {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.el-row--flex.is-align-middle {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.el-row--flex.is-align-bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* BEM support Func
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Break-points
 -------------------------- */

/* Scrollbar
 -------------------------- */

/* Placeholder
 -------------------------- */

/* BEM
 -------------------------- */

[class*="el-col-"] {
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.el-col-0 {
  display: none;
}

.el-col-0 {
  width: 0%;
}

.el-col-offset-0 {
  margin-left: 0%;
}

.el-col-pull-0 {
  position: relative;
  right: 0%;
}

.el-col-push-0 {
  position: relative;
  left: 0%;
}

.el-col-1 {
  width: 4.16666667%;
}

.el-col-offset-1 {
  margin-left: 4.16666667%;
}

.el-col-pull-1 {
  position: relative;
  right: 4.16666667%;
}

.el-col-push-1 {
  position: relative;
  left: 4.16666667%;
}

.el-col-2 {
  width: 8.33333333%;
}

.el-col-offset-2 {
  margin-left: 8.33333333%;
}

.el-col-pull-2 {
  position: relative;
  right: 8.33333333%;
}

.el-col-push-2 {
  position: relative;
  left: 8.33333333%;
}

.el-col-3 {
  width: 12.5%;
}

.el-col-offset-3 {
  margin-left: 12.5%;
}

.el-col-pull-3 {
  position: relative;
  right: 12.5%;
}

.el-col-push-3 {
  position: relative;
  left: 12.5%;
}

.el-col-4 {
  width: 16.66666667%;
}

.el-col-offset-4 {
  margin-left: 16.66666667%;
}

.el-col-pull-4 {
  position: relative;
  right: 16.66666667%;
}

.el-col-push-4 {
  position: relative;
  left: 16.66666667%;
}

.el-col-5 {
  width: 20.83333333%;
}

.el-col-offset-5 {
  margin-left: 20.83333333%;
}

.el-col-pull-5 {
  position: relative;
  right: 20.83333333%;
}

.el-col-push-5 {
  position: relative;
  left: 20.83333333%;
}

.el-col-6 {
  width: 25%;
}

.el-col-offset-6 {
  margin-left: 25%;
}

.el-col-pull-6 {
  position: relative;
  right: 25%;
}

.el-col-push-6 {
  position: relative;
  left: 25%;
}

.el-col-7 {
  width: 29.16666667%;
}

.el-col-offset-7 {
  margin-left: 29.16666667%;
}

.el-col-pull-7 {
  position: relative;
  right: 29.16666667%;
}

.el-col-push-7 {
  position: relative;
  left: 29.16666667%;
}

.el-col-8 {
  width: 33.33333333%;
}

.el-col-offset-8 {
  margin-left: 33.33333333%;
}

.el-col-pull-8 {
  position: relative;
  right: 33.33333333%;
}

.el-col-push-8 {
  position: relative;
  left: 33.33333333%;
}

.el-col-9 {
  width: 37.5%;
}

.el-col-offset-9 {
  margin-left: 37.5%;
}

.el-col-pull-9 {
  position: relative;
  right: 37.5%;
}

.el-col-push-9 {
  position: relative;
  left: 37.5%;
}

.el-col-10 {
  width: 41.66666667%;
}

.el-col-offset-10 {
  margin-left: 41.66666667%;
}

.el-col-pull-10 {
  position: relative;
  right: 41.66666667%;
}

.el-col-push-10 {
  position: relative;
  left: 41.66666667%;
}

.el-col-11 {
  width: 45.83333333%;
}

.el-col-offset-11 {
  margin-left: 45.83333333%;
}

.el-col-pull-11 {
  position: relative;
  right: 45.83333333%;
}

.el-col-push-11 {
  position: relative;
  left: 45.83333333%;
}

.el-col-12 {
  width: 50%;
}

.el-col-offset-12 {
  margin-left: 50%;
}

.el-col-pull-12 {
  position: relative;
  right: 50%;
}

.el-col-push-12 {
  position: relative;
  left: 50%;
}

.el-col-13 {
  width: 54.16666667%;
}

.el-col-offset-13 {
  margin-left: 54.16666667%;
}

.el-col-pull-13 {
  position: relative;
  right: 54.16666667%;
}

.el-col-push-13 {
  position: relative;
  left: 54.16666667%;
}

.el-col-14 {
  width: 58.33333333%;
}

.el-col-offset-14 {
  margin-left: 58.33333333%;
}

.el-col-pull-14 {
  position: relative;
  right: 58.33333333%;
}

.el-col-push-14 {
  position: relative;
  left: 58.33333333%;
}

.el-col-15 {
  width: 62.5%;
}

.el-col-offset-15 {
  margin-left: 62.5%;
}

.el-col-pull-15 {
  position: relative;
  right: 62.5%;
}

.el-col-push-15 {
  position: relative;
  left: 62.5%;
}

.el-col-16 {
  width: 66.66666667%;
}

.el-col-offset-16 {
  margin-left: 66.66666667%;
}

.el-col-pull-16 {
  position: relative;
  right: 66.66666667%;
}

.el-col-push-16 {
  position: relative;
  left: 66.66666667%;
}

.el-col-17 {
  width: 70.83333333%;
}

.el-col-offset-17 {
  margin-left: 70.83333333%;
}

.el-col-pull-17 {
  position: relative;
  right: 70.83333333%;
}

.el-col-push-17 {
  position: relative;
  left: 70.83333333%;
}

.el-col-18 {
  width: 75%;
}

.el-col-offset-18 {
  margin-left: 75%;
}

.el-col-pull-18 {
  position: relative;
  right: 75%;
}

.el-col-push-18 {
  position: relative;
  left: 75%;
}

.el-col-19 {
  width: 79.16666667%;
}

.el-col-offset-19 {
  margin-left: 79.16666667%;
}

.el-col-pull-19 {
  position: relative;
  right: 79.16666667%;
}

.el-col-push-19 {
  position: relative;
  left: 79.16666667%;
}

.el-col-20 {
  width: 83.33333333%;
}

.el-col-offset-20 {
  margin-left: 83.33333333%;
}

.el-col-pull-20 {
  position: relative;
  right: 83.33333333%;
}

.el-col-push-20 {
  position: relative;
  left: 83.33333333%;
}

.el-col-21 {
  width: 87.5%;
}

.el-col-offset-21 {
  margin-left: 87.5%;
}

.el-col-pull-21 {
  position: relative;
  right: 87.5%;
}

.el-col-push-21 {
  position: relative;
  left: 87.5%;
}

.el-col-22 {
  width: 91.66666667%;
}

.el-col-offset-22 {
  margin-left: 91.66666667%;
}

.el-col-pull-22 {
  position: relative;
  right: 91.66666667%;
}

.el-col-push-22 {
  position: relative;
  left: 91.66666667%;
}

.el-col-23 {
  width: 95.83333333%;
}

.el-col-offset-23 {
  margin-left: 95.83333333%;
}

.el-col-pull-23 {
  position: relative;
  right: 95.83333333%;
}

.el-col-push-23 {
  position: relative;
  left: 95.83333333%;
}

.el-col-24 {
  width: 100%;
}

.el-col-offset-24 {
  margin-left: 100%;
}

.el-col-pull-24 {
  position: relative;
  right: 100%;
}

.el-col-push-24 {
  position: relative;
  left: 100%;
}

@media only screen and (max-width: 767px) {
  .el-col-xs-0 {
    display: none;
  }

  .el-col-xs-0 {
    width: 0%;
  }

  .el-col-xs-offset-0 {
    margin-left: 0%;
  }

  .el-col-xs-pull-0 {
    position: relative;
    right: 0%;
  }

  .el-col-xs-push-0 {
    position: relative;
    left: 0%;
  }

  .el-col-xs-1 {
    width: 4.16666667%;
  }

  .el-col-xs-offset-1 {
    margin-left: 4.16666667%;
  }

  .el-col-xs-pull-1 {
    position: relative;
    right: 4.16666667%;
  }

  .el-col-xs-push-1 {
    position: relative;
    left: 4.16666667%;
  }

  .el-col-xs-2 {
    width: 8.33333333%;
  }

  .el-col-xs-offset-2 {
    margin-left: 8.33333333%;
  }

  .el-col-xs-pull-2 {
    position: relative;
    right: 8.33333333%;
  }

  .el-col-xs-push-2 {
    position: relative;
    left: 8.33333333%;
  }

  .el-col-xs-3 {
    width: 12.5%;
  }

  .el-col-xs-offset-3 {
    margin-left: 12.5%;
  }

  .el-col-xs-pull-3 {
    position: relative;
    right: 12.5%;
  }

  .el-col-xs-push-3 {
    position: relative;
    left: 12.5%;
  }

  .el-col-xs-4 {
    width: 16.66666667%;
  }

  .el-col-xs-offset-4 {
    margin-left: 16.66666667%;
  }

  .el-col-xs-pull-4 {
    position: relative;
    right: 16.66666667%;
  }

  .el-col-xs-push-4 {
    position: relative;
    left: 16.66666667%;
  }

  .el-col-xs-5 {
    width: 20.83333333%;
  }

  .el-col-xs-offset-5 {
    margin-left: 20.83333333%;
  }

  .el-col-xs-pull-5 {
    position: relative;
    right: 20.83333333%;
  }

  .el-col-xs-push-5 {
    position: relative;
    left: 20.83333333%;
  }

  .el-col-xs-6 {
    width: 25%;
  }

  .el-col-xs-offset-6 {
    margin-left: 25%;
  }

  .el-col-xs-pull-6 {
    position: relative;
    right: 25%;
  }

  .el-col-xs-push-6 {
    position: relative;
    left: 25%;
  }

  .el-col-xs-7 {
    width: 29.16666667%;
  }

  .el-col-xs-offset-7 {
    margin-left: 29.16666667%;
  }

  .el-col-xs-pull-7 {
    position: relative;
    right: 29.16666667%;
  }

  .el-col-xs-push-7 {
    position: relative;
    left: 29.16666667%;
  }

  .el-col-xs-8 {
    width: 33.33333333%;
  }

  .el-col-xs-offset-8 {
    margin-left: 33.33333333%;
  }

  .el-col-xs-pull-8 {
    position: relative;
    right: 33.33333333%;
  }

  .el-col-xs-push-8 {
    position: relative;
    left: 33.33333333%;
  }

  .el-col-xs-9 {
    width: 37.5%;
  }

  .el-col-xs-offset-9 {
    margin-left: 37.5%;
  }

  .el-col-xs-pull-9 {
    position: relative;
    right: 37.5%;
  }

  .el-col-xs-push-9 {
    position: relative;
    left: 37.5%;
  }

  .el-col-xs-10 {
    width: 41.66666667%;
  }

  .el-col-xs-offset-10 {
    margin-left: 41.66666667%;
  }

  .el-col-xs-pull-10 {
    position: relative;
    right: 41.66666667%;
  }

  .el-col-xs-push-10 {
    position: relative;
    left: 41.66666667%;
  }

  .el-col-xs-11 {
    width: 45.83333333%;
  }

  .el-col-xs-offset-11 {
    margin-left: 45.83333333%;
  }

  .el-col-xs-pull-11 {
    position: relative;
    right: 45.83333333%;
  }

  .el-col-xs-push-11 {
    position: relative;
    left: 45.83333333%;
  }

  .el-col-xs-12 {
    width: 50%;
  }

  .el-col-xs-offset-12 {
    margin-left: 50%;
  }

  .el-col-xs-pull-12 {
    position: relative;
    right: 50%;
  }

  .el-col-xs-push-12 {
    position: relative;
    left: 50%;
  }

  .el-col-xs-13 {
    width: 54.16666667%;
  }

  .el-col-xs-offset-13 {
    margin-left: 54.16666667%;
  }

  .el-col-xs-pull-13 {
    position: relative;
    right: 54.16666667%;
  }

  .el-col-xs-push-13 {
    position: relative;
    left: 54.16666667%;
  }

  .el-col-xs-14 {
    width: 58.33333333%;
  }

  .el-col-xs-offset-14 {
    margin-left: 58.33333333%;
  }

  .el-col-xs-pull-14 {
    position: relative;
    right: 58.33333333%;
  }

  .el-col-xs-push-14 {
    position: relative;
    left: 58.33333333%;
  }

  .el-col-xs-15 {
    width: 62.5%;
  }

  .el-col-xs-offset-15 {
    margin-left: 62.5%;
  }

  .el-col-xs-pull-15 {
    position: relative;
    right: 62.5%;
  }

  .el-col-xs-push-15 {
    position: relative;
    left: 62.5%;
  }

  .el-col-xs-16 {
    width: 66.66666667%;
  }

  .el-col-xs-offset-16 {
    margin-left: 66.66666667%;
  }

  .el-col-xs-pull-16 {
    position: relative;
    right: 66.66666667%;
  }

  .el-col-xs-push-16 {
    position: relative;
    left: 66.66666667%;
  }

  .el-col-xs-17 {
    width: 70.83333333%;
  }

  .el-col-xs-offset-17 {
    margin-left: 70.83333333%;
  }

  .el-col-xs-pull-17 {
    position: relative;
    right: 70.83333333%;
  }

  .el-col-xs-push-17 {
    position: relative;
    left: 70.83333333%;
  }

  .el-col-xs-18 {
    width: 75%;
  }

  .el-col-xs-offset-18 {
    margin-left: 75%;
  }

  .el-col-xs-pull-18 {
    position: relative;
    right: 75%;
  }

  .el-col-xs-push-18 {
    position: relative;
    left: 75%;
  }

  .el-col-xs-19 {
    width: 79.16666667%;
  }

  .el-col-xs-offset-19 {
    margin-left: 79.16666667%;
  }

  .el-col-xs-pull-19 {
    position: relative;
    right: 79.16666667%;
  }

  .el-col-xs-push-19 {
    position: relative;
    left: 79.16666667%;
  }

  .el-col-xs-20 {
    width: 83.33333333%;
  }

  .el-col-xs-offset-20 {
    margin-left: 83.33333333%;
  }

  .el-col-xs-pull-20 {
    position: relative;
    right: 83.33333333%;
  }

  .el-col-xs-push-20 {
    position: relative;
    left: 83.33333333%;
  }

  .el-col-xs-21 {
    width: 87.5%;
  }

  .el-col-xs-offset-21 {
    margin-left: 87.5%;
  }

  .el-col-xs-pull-21 {
    position: relative;
    right: 87.5%;
  }

  .el-col-xs-push-21 {
    position: relative;
    left: 87.5%;
  }

  .el-col-xs-22 {
    width: 91.66666667%;
  }

  .el-col-xs-offset-22 {
    margin-left: 91.66666667%;
  }

  .el-col-xs-pull-22 {
    position: relative;
    right: 91.66666667%;
  }

  .el-col-xs-push-22 {
    position: relative;
    left: 91.66666667%;
  }

  .el-col-xs-23 {
    width: 95.83333333%;
  }

  .el-col-xs-offset-23 {
    margin-left: 95.83333333%;
  }

  .el-col-xs-pull-23 {
    position: relative;
    right: 95.83333333%;
  }

  .el-col-xs-push-23 {
    position: relative;
    left: 95.83333333%;
  }

  .el-col-xs-24 {
    width: 100%;
  }

  .el-col-xs-offset-24 {
    margin-left: 100%;
  }

  .el-col-xs-pull-24 {
    position: relative;
    right: 100%;
  }

  .el-col-xs-push-24 {
    position: relative;
    left: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .el-col-sm-0 {
    display: none;
  }

  .el-col-sm-0 {
    width: 0%;
  }

  .el-col-sm-offset-0 {
    margin-left: 0%;
  }

  .el-col-sm-pull-0 {
    position: relative;
    right: 0%;
  }

  .el-col-sm-push-0 {
    position: relative;
    left: 0%;
  }

  .el-col-sm-1 {
    width: 4.16666667%;
  }

  .el-col-sm-offset-1 {
    margin-left: 4.16666667%;
  }

  .el-col-sm-pull-1 {
    position: relative;
    right: 4.16666667%;
  }

  .el-col-sm-push-1 {
    position: relative;
    left: 4.16666667%;
  }

  .el-col-sm-2 {
    width: 8.33333333%;
  }

  .el-col-sm-offset-2 {
    margin-left: 8.33333333%;
  }

  .el-col-sm-pull-2 {
    position: relative;
    right: 8.33333333%;
  }

  .el-col-sm-push-2 {
    position: relative;
    left: 8.33333333%;
  }

  .el-col-sm-3 {
    width: 12.5%;
  }

  .el-col-sm-offset-3 {
    margin-left: 12.5%;
  }

  .el-col-sm-pull-3 {
    position: relative;
    right: 12.5%;
  }

  .el-col-sm-push-3 {
    position: relative;
    left: 12.5%;
  }

  .el-col-sm-4 {
    width: 16.66666667%;
  }

  .el-col-sm-offset-4 {
    margin-left: 16.66666667%;
  }

  .el-col-sm-pull-4 {
    position: relative;
    right: 16.66666667%;
  }

  .el-col-sm-push-4 {
    position: relative;
    left: 16.66666667%;
  }

  .el-col-sm-5 {
    width: 20.83333333%;
  }

  .el-col-sm-offset-5 {
    margin-left: 20.83333333%;
  }

  .el-col-sm-pull-5 {
    position: relative;
    right: 20.83333333%;
  }

  .el-col-sm-push-5 {
    position: relative;
    left: 20.83333333%;
  }

  .el-col-sm-6 {
    width: 25%;
  }

  .el-col-sm-offset-6 {
    margin-left: 25%;
  }

  .el-col-sm-pull-6 {
    position: relative;
    right: 25%;
  }

  .el-col-sm-push-6 {
    position: relative;
    left: 25%;
  }

  .el-col-sm-7 {
    width: 29.16666667%;
  }

  .el-col-sm-offset-7 {
    margin-left: 29.16666667%;
  }

  .el-col-sm-pull-7 {
    position: relative;
    right: 29.16666667%;
  }

  .el-col-sm-push-7 {
    position: relative;
    left: 29.16666667%;
  }

  .el-col-sm-8 {
    width: 33.33333333%;
  }

  .el-col-sm-offset-8 {
    margin-left: 33.33333333%;
  }

  .el-col-sm-pull-8 {
    position: relative;
    right: 33.33333333%;
  }

  .el-col-sm-push-8 {
    position: relative;
    left: 33.33333333%;
  }

  .el-col-sm-9 {
    width: 37.5%;
  }

  .el-col-sm-offset-9 {
    margin-left: 37.5%;
  }

  .el-col-sm-pull-9 {
    position: relative;
    right: 37.5%;
  }

  .el-col-sm-push-9 {
    position: relative;
    left: 37.5%;
  }

  .el-col-sm-10 {
    width: 41.66666667%;
  }

  .el-col-sm-offset-10 {
    margin-left: 41.66666667%;
  }

  .el-col-sm-pull-10 {
    position: relative;
    right: 41.66666667%;
  }

  .el-col-sm-push-10 {
    position: relative;
    left: 41.66666667%;
  }

  .el-col-sm-11 {
    width: 45.83333333%;
  }

  .el-col-sm-offset-11 {
    margin-left: 45.83333333%;
  }

  .el-col-sm-pull-11 {
    position: relative;
    right: 45.83333333%;
  }

  .el-col-sm-push-11 {
    position: relative;
    left: 45.83333333%;
  }

  .el-col-sm-12 {
    width: 50%;
  }

  .el-col-sm-offset-12 {
    margin-left: 50%;
  }

  .el-col-sm-pull-12 {
    position: relative;
    right: 50%;
  }

  .el-col-sm-push-12 {
    position: relative;
    left: 50%;
  }

  .el-col-sm-13 {
    width: 54.16666667%;
  }

  .el-col-sm-offset-13 {
    margin-left: 54.16666667%;
  }

  .el-col-sm-pull-13 {
    position: relative;
    right: 54.16666667%;
  }

  .el-col-sm-push-13 {
    position: relative;
    left: 54.16666667%;
  }

  .el-col-sm-14 {
    width: 58.33333333%;
  }

  .el-col-sm-offset-14 {
    margin-left: 58.33333333%;
  }

  .el-col-sm-pull-14 {
    position: relative;
    right: 58.33333333%;
  }

  .el-col-sm-push-14 {
    position: relative;
    left: 58.33333333%;
  }

  .el-col-sm-15 {
    width: 62.5%;
  }

  .el-col-sm-offset-15 {
    margin-left: 62.5%;
  }

  .el-col-sm-pull-15 {
    position: relative;
    right: 62.5%;
  }

  .el-col-sm-push-15 {
    position: relative;
    left: 62.5%;
  }

  .el-col-sm-16 {
    width: 66.66666667%;
  }

  .el-col-sm-offset-16 {
    margin-left: 66.66666667%;
  }

  .el-col-sm-pull-16 {
    position: relative;
    right: 66.66666667%;
  }

  .el-col-sm-push-16 {
    position: relative;
    left: 66.66666667%;
  }

  .el-col-sm-17 {
    width: 70.83333333%;
  }

  .el-col-sm-offset-17 {
    margin-left: 70.83333333%;
  }

  .el-col-sm-pull-17 {
    position: relative;
    right: 70.83333333%;
  }

  .el-col-sm-push-17 {
    position: relative;
    left: 70.83333333%;
  }

  .el-col-sm-18 {
    width: 75%;
  }

  .el-col-sm-offset-18 {
    margin-left: 75%;
  }

  .el-col-sm-pull-18 {
    position: relative;
    right: 75%;
  }

  .el-col-sm-push-18 {
    position: relative;
    left: 75%;
  }

  .el-col-sm-19 {
    width: 79.16666667%;
  }

  .el-col-sm-offset-19 {
    margin-left: 79.16666667%;
  }

  .el-col-sm-pull-19 {
    position: relative;
    right: 79.16666667%;
  }

  .el-col-sm-push-19 {
    position: relative;
    left: 79.16666667%;
  }

  .el-col-sm-20 {
    width: 83.33333333%;
  }

  .el-col-sm-offset-20 {
    margin-left: 83.33333333%;
  }

  .el-col-sm-pull-20 {
    position: relative;
    right: 83.33333333%;
  }

  .el-col-sm-push-20 {
    position: relative;
    left: 83.33333333%;
  }

  .el-col-sm-21 {
    width: 87.5%;
  }

  .el-col-sm-offset-21 {
    margin-left: 87.5%;
  }

  .el-col-sm-pull-21 {
    position: relative;
    right: 87.5%;
  }

  .el-col-sm-push-21 {
    position: relative;
    left: 87.5%;
  }

  .el-col-sm-22 {
    width: 91.66666667%;
  }

  .el-col-sm-offset-22 {
    margin-left: 91.66666667%;
  }

  .el-col-sm-pull-22 {
    position: relative;
    right: 91.66666667%;
  }

  .el-col-sm-push-22 {
    position: relative;
    left: 91.66666667%;
  }

  .el-col-sm-23 {
    width: 95.83333333%;
  }

  .el-col-sm-offset-23 {
    margin-left: 95.83333333%;
  }

  .el-col-sm-pull-23 {
    position: relative;
    right: 95.83333333%;
  }

  .el-col-sm-push-23 {
    position: relative;
    left: 95.83333333%;
  }

  .el-col-sm-24 {
    width: 100%;
  }

  .el-col-sm-offset-24 {
    margin-left: 100%;
  }

  .el-col-sm-pull-24 {
    position: relative;
    right: 100%;
  }

  .el-col-sm-push-24 {
    position: relative;
    left: 100%;
  }
}

@media only screen and (min-width: 992px) {
  .el-col-md-0 {
    display: none;
  }

  .el-col-md-0 {
    width: 0%;
  }

  .el-col-md-offset-0 {
    margin-left: 0%;
  }

  .el-col-md-pull-0 {
    position: relative;
    right: 0%;
  }

  .el-col-md-push-0 {
    position: relative;
    left: 0%;
  }

  .el-col-md-1 {
    width: 4.16666667%;
  }

  .el-col-md-offset-1 {
    margin-left: 4.16666667%;
  }

  .el-col-md-pull-1 {
    position: relative;
    right: 4.16666667%;
  }

  .el-col-md-push-1 {
    position: relative;
    left: 4.16666667%;
  }

  .el-col-md-2 {
    width: 8.33333333%;
  }

  .el-col-md-offset-2 {
    margin-left: 8.33333333%;
  }

  .el-col-md-pull-2 {
    position: relative;
    right: 8.33333333%;
  }

  .el-col-md-push-2 {
    position: relative;
    left: 8.33333333%;
  }

  .el-col-md-3 {
    width: 12.5%;
  }

  .el-col-md-offset-3 {
    margin-left: 12.5%;
  }

  .el-col-md-pull-3 {
    position: relative;
    right: 12.5%;
  }

  .el-col-md-push-3 {
    position: relative;
    left: 12.5%;
  }

  .el-col-md-4 {
    width: 16.66666667%;
  }

  .el-col-md-offset-4 {
    margin-left: 16.66666667%;
  }

  .el-col-md-pull-4 {
    position: relative;
    right: 16.66666667%;
  }

  .el-col-md-push-4 {
    position: relative;
    left: 16.66666667%;
  }

  .el-col-md-5 {
    width: 20.83333333%;
  }

  .el-col-md-offset-5 {
    margin-left: 20.83333333%;
  }

  .el-col-md-pull-5 {
    position: relative;
    right: 20.83333333%;
  }

  .el-col-md-push-5 {
    position: relative;
    left: 20.83333333%;
  }

  .el-col-md-6 {
    width: 25%;
  }

  .el-col-md-offset-6 {
    margin-left: 25%;
  }

  .el-col-md-pull-6 {
    position: relative;
    right: 25%;
  }

  .el-col-md-push-6 {
    position: relative;
    left: 25%;
  }

  .el-col-md-7 {
    width: 29.16666667%;
  }

  .el-col-md-offset-7 {
    margin-left: 29.16666667%;
  }

  .el-col-md-pull-7 {
    position: relative;
    right: 29.16666667%;
  }

  .el-col-md-push-7 {
    position: relative;
    left: 29.16666667%;
  }

  .el-col-md-8 {
    width: 33.33333333%;
  }

  .el-col-md-offset-8 {
    margin-left: 33.33333333%;
  }

  .el-col-md-pull-8 {
    position: relative;
    right: 33.33333333%;
  }

  .el-col-md-push-8 {
    position: relative;
    left: 33.33333333%;
  }

  .el-col-md-9 {
    width: 37.5%;
  }

  .el-col-md-offset-9 {
    margin-left: 37.5%;
  }

  .el-col-md-pull-9 {
    position: relative;
    right: 37.5%;
  }

  .el-col-md-push-9 {
    position: relative;
    left: 37.5%;
  }

  .el-col-md-10 {
    width: 41.66666667%;
  }

  .el-col-md-offset-10 {
    margin-left: 41.66666667%;
  }

  .el-col-md-pull-10 {
    position: relative;
    right: 41.66666667%;
  }

  .el-col-md-push-10 {
    position: relative;
    left: 41.66666667%;
  }

  .el-col-md-11 {
    width: 45.83333333%;
  }

  .el-col-md-offset-11 {
    margin-left: 45.83333333%;
  }

  .el-col-md-pull-11 {
    position: relative;
    right: 45.83333333%;
  }

  .el-col-md-push-11 {
    position: relative;
    left: 45.83333333%;
  }

  .el-col-md-12 {
    width: 50%;
  }

  .el-col-md-offset-12 {
    margin-left: 50%;
  }

  .el-col-md-pull-12 {
    position: relative;
    right: 50%;
  }

  .el-col-md-push-12 {
    position: relative;
    left: 50%;
  }

  .el-col-md-13 {
    width: 54.16666667%;
  }

  .el-col-md-offset-13 {
    margin-left: 54.16666667%;
  }

  .el-col-md-pull-13 {
    position: relative;
    right: 54.16666667%;
  }

  .el-col-md-push-13 {
    position: relative;
    left: 54.16666667%;
  }

  .el-col-md-14 {
    width: 58.33333333%;
  }

  .el-col-md-offset-14 {
    margin-left: 58.33333333%;
  }

  .el-col-md-pull-14 {
    position: relative;
    right: 58.33333333%;
  }

  .el-col-md-push-14 {
    position: relative;
    left: 58.33333333%;
  }

  .el-col-md-15 {
    width: 62.5%;
  }

  .el-col-md-offset-15 {
    margin-left: 62.5%;
  }

  .el-col-md-pull-15 {
    position: relative;
    right: 62.5%;
  }

  .el-col-md-push-15 {
    position: relative;
    left: 62.5%;
  }

  .el-col-md-16 {
    width: 66.66666667%;
  }

  .el-col-md-offset-16 {
    margin-left: 66.66666667%;
  }

  .el-col-md-pull-16 {
    position: relative;
    right: 66.66666667%;
  }

  .el-col-md-push-16 {
    position: relative;
    left: 66.66666667%;
  }

  .el-col-md-17 {
    width: 70.83333333%;
  }

  .el-col-md-offset-17 {
    margin-left: 70.83333333%;
  }

  .el-col-md-pull-17 {
    position: relative;
    right: 70.83333333%;
  }

  .el-col-md-push-17 {
    position: relative;
    left: 70.83333333%;
  }

  .el-col-md-18 {
    width: 75%;
  }

  .el-col-md-offset-18 {
    margin-left: 75%;
  }

  .el-col-md-pull-18 {
    position: relative;
    right: 75%;
  }

  .el-col-md-push-18 {
    position: relative;
    left: 75%;
  }

  .el-col-md-19 {
    width: 79.16666667%;
  }

  .el-col-md-offset-19 {
    margin-left: 79.16666667%;
  }

  .el-col-md-pull-19 {
    position: relative;
    right: 79.16666667%;
  }

  .el-col-md-push-19 {
    position: relative;
    left: 79.16666667%;
  }

  .el-col-md-20 {
    width: 83.33333333%;
  }

  .el-col-md-offset-20 {
    margin-left: 83.33333333%;
  }

  .el-col-md-pull-20 {
    position: relative;
    right: 83.33333333%;
  }

  .el-col-md-push-20 {
    position: relative;
    left: 83.33333333%;
  }

  .el-col-md-21 {
    width: 87.5%;
  }

  .el-col-md-offset-21 {
    margin-left: 87.5%;
  }

  .el-col-md-pull-21 {
    position: relative;
    right: 87.5%;
  }

  .el-col-md-push-21 {
    position: relative;
    left: 87.5%;
  }

  .el-col-md-22 {
    width: 91.66666667%;
  }

  .el-col-md-offset-22 {
    margin-left: 91.66666667%;
  }

  .el-col-md-pull-22 {
    position: relative;
    right: 91.66666667%;
  }

  .el-col-md-push-22 {
    position: relative;
    left: 91.66666667%;
  }

  .el-col-md-23 {
    width: 95.83333333%;
  }

  .el-col-md-offset-23 {
    margin-left: 95.83333333%;
  }

  .el-col-md-pull-23 {
    position: relative;
    right: 95.83333333%;
  }

  .el-col-md-push-23 {
    position: relative;
    left: 95.83333333%;
  }

  .el-col-md-24 {
    width: 100%;
  }

  .el-col-md-offset-24 {
    margin-left: 100%;
  }

  .el-col-md-pull-24 {
    position: relative;
    right: 100%;
  }

  .el-col-md-push-24 {
    position: relative;
    left: 100%;
  }
}

@media only screen and (min-width: 1200px) {
  .el-col-lg-0 {
    display: none;
  }

  .el-col-lg-0 {
    width: 0%;
  }

  .el-col-lg-offset-0 {
    margin-left: 0%;
  }

  .el-col-lg-pull-0 {
    position: relative;
    right: 0%;
  }

  .el-col-lg-push-0 {
    position: relative;
    left: 0%;
  }

  .el-col-lg-1 {
    width: 4.16666667%;
  }

  .el-col-lg-offset-1 {
    margin-left: 4.16666667%;
  }

  .el-col-lg-pull-1 {
    position: relative;
    right: 4.16666667%;
  }

  .el-col-lg-push-1 {
    position: relative;
    left: 4.16666667%;
  }

  .el-col-lg-2 {
    width: 8.33333333%;
  }

  .el-col-lg-offset-2 {
    margin-left: 8.33333333%;
  }

  .el-col-lg-pull-2 {
    position: relative;
    right: 8.33333333%;
  }

  .el-col-lg-push-2 {
    position: relative;
    left: 8.33333333%;
  }

  .el-col-lg-3 {
    width: 12.5%;
  }

  .el-col-lg-offset-3 {
    margin-left: 12.5%;
  }

  .el-col-lg-pull-3 {
    position: relative;
    right: 12.5%;
  }

  .el-col-lg-push-3 {
    position: relative;
    left: 12.5%;
  }

  .el-col-lg-4 {
    width: 16.66666667%;
  }

  .el-col-lg-offset-4 {
    margin-left: 16.66666667%;
  }

  .el-col-lg-pull-4 {
    position: relative;
    right: 16.66666667%;
  }

  .el-col-lg-push-4 {
    position: relative;
    left: 16.66666667%;
  }

  .el-col-lg-5 {
    width: 20.83333333%;
  }

  .el-col-lg-offset-5 {
    margin-left: 20.83333333%;
  }

  .el-col-lg-pull-5 {
    position: relative;
    right: 20.83333333%;
  }

  .el-col-lg-push-5 {
    position: relative;
    left: 20.83333333%;
  }

  .el-col-lg-6 {
    width: 25%;
  }

  .el-col-lg-offset-6 {
    margin-left: 25%;
  }

  .el-col-lg-pull-6 {
    position: relative;
    right: 25%;
  }

  .el-col-lg-push-6 {
    position: relative;
    left: 25%;
  }

  .el-col-lg-7 {
    width: 29.16666667%;
  }

  .el-col-lg-offset-7 {
    margin-left: 29.16666667%;
  }

  .el-col-lg-pull-7 {
    position: relative;
    right: 29.16666667%;
  }

  .el-col-lg-push-7 {
    position: relative;
    left: 29.16666667%;
  }

  .el-col-lg-8 {
    width: 33.33333333%;
  }

  .el-col-lg-offset-8 {
    margin-left: 33.33333333%;
  }

  .el-col-lg-pull-8 {
    position: relative;
    right: 33.33333333%;
  }

  .el-col-lg-push-8 {
    position: relative;
    left: 33.33333333%;
  }

  .el-col-lg-9 {
    width: 37.5%;
  }

  .el-col-lg-offset-9 {
    margin-left: 37.5%;
  }

  .el-col-lg-pull-9 {
    position: relative;
    right: 37.5%;
  }

  .el-col-lg-push-9 {
    position: relative;
    left: 37.5%;
  }

  .el-col-lg-10 {
    width: 41.66666667%;
  }

  .el-col-lg-offset-10 {
    margin-left: 41.66666667%;
  }

  .el-col-lg-pull-10 {
    position: relative;
    right: 41.66666667%;
  }

  .el-col-lg-push-10 {
    position: relative;
    left: 41.66666667%;
  }

  .el-col-lg-11 {
    width: 45.83333333%;
  }

  .el-col-lg-offset-11 {
    margin-left: 45.83333333%;
  }

  .el-col-lg-pull-11 {
    position: relative;
    right: 45.83333333%;
  }

  .el-col-lg-push-11 {
    position: relative;
    left: 45.83333333%;
  }

  .el-col-lg-12 {
    width: 50%;
  }

  .el-col-lg-offset-12 {
    margin-left: 50%;
  }

  .el-col-lg-pull-12 {
    position: relative;
    right: 50%;
  }

  .el-col-lg-push-12 {
    position: relative;
    left: 50%;
  }

  .el-col-lg-13 {
    width: 54.16666667%;
  }

  .el-col-lg-offset-13 {
    margin-left: 54.16666667%;
  }

  .el-col-lg-pull-13 {
    position: relative;
    right: 54.16666667%;
  }

  .el-col-lg-push-13 {
    position: relative;
    left: 54.16666667%;
  }

  .el-col-lg-14 {
    width: 58.33333333%;
  }

  .el-col-lg-offset-14 {
    margin-left: 58.33333333%;
  }

  .el-col-lg-pull-14 {
    position: relative;
    right: 58.33333333%;
  }

  .el-col-lg-push-14 {
    position: relative;
    left: 58.33333333%;
  }

  .el-col-lg-15 {
    width: 62.5%;
  }

  .el-col-lg-offset-15 {
    margin-left: 62.5%;
  }

  .el-col-lg-pull-15 {
    position: relative;
    right: 62.5%;
  }

  .el-col-lg-push-15 {
    position: relative;
    left: 62.5%;
  }

  .el-col-lg-16 {
    width: 66.66666667%;
  }

  .el-col-lg-offset-16 {
    margin-left: 66.66666667%;
  }

  .el-col-lg-pull-16 {
    position: relative;
    right: 66.66666667%;
  }

  .el-col-lg-push-16 {
    position: relative;
    left: 66.66666667%;
  }

  .el-col-lg-17 {
    width: 70.83333333%;
  }

  .el-col-lg-offset-17 {
    margin-left: 70.83333333%;
  }

  .el-col-lg-pull-17 {
    position: relative;
    right: 70.83333333%;
  }

  .el-col-lg-push-17 {
    position: relative;
    left: 70.83333333%;
  }

  .el-col-lg-18 {
    width: 75%;
  }

  .el-col-lg-offset-18 {
    margin-left: 75%;
  }

  .el-col-lg-pull-18 {
    position: relative;
    right: 75%;
  }

  .el-col-lg-push-18 {
    position: relative;
    left: 75%;
  }

  .el-col-lg-19 {
    width: 79.16666667%;
  }

  .el-col-lg-offset-19 {
    margin-left: 79.16666667%;
  }

  .el-col-lg-pull-19 {
    position: relative;
    right: 79.16666667%;
  }

  .el-col-lg-push-19 {
    position: relative;
    left: 79.16666667%;
  }

  .el-col-lg-20 {
    width: 83.33333333%;
  }

  .el-col-lg-offset-20 {
    margin-left: 83.33333333%;
  }

  .el-col-lg-pull-20 {
    position: relative;
    right: 83.33333333%;
  }

  .el-col-lg-push-20 {
    position: relative;
    left: 83.33333333%;
  }

  .el-col-lg-21 {
    width: 87.5%;
  }

  .el-col-lg-offset-21 {
    margin-left: 87.5%;
  }

  .el-col-lg-pull-21 {
    position: relative;
    right: 87.5%;
  }

  .el-col-lg-push-21 {
    position: relative;
    left: 87.5%;
  }

  .el-col-lg-22 {
    width: 91.66666667%;
  }

  .el-col-lg-offset-22 {
    margin-left: 91.66666667%;
  }

  .el-col-lg-pull-22 {
    position: relative;
    right: 91.66666667%;
  }

  .el-col-lg-push-22 {
    position: relative;
    left: 91.66666667%;
  }

  .el-col-lg-23 {
    width: 95.83333333%;
  }

  .el-col-lg-offset-23 {
    margin-left: 95.83333333%;
  }

  .el-col-lg-pull-23 {
    position: relative;
    right: 95.83333333%;
  }

  .el-col-lg-push-23 {
    position: relative;
    left: 95.83333333%;
  }

  .el-col-lg-24 {
    width: 100%;
  }

  .el-col-lg-offset-24 {
    margin-left: 100%;
  }

  .el-col-lg-pull-24 {
    position: relative;
    right: 100%;
  }

  .el-col-lg-push-24 {
    position: relative;
    left: 100%;
  }
}

@media only screen and (min-width: 1920px) {
  .el-col-xl-0 {
    display: none;
  }

  .el-col-xl-0 {
    width: 0%;
  }

  .el-col-xl-offset-0 {
    margin-left: 0%;
  }

  .el-col-xl-pull-0 {
    position: relative;
    right: 0%;
  }

  .el-col-xl-push-0 {
    position: relative;
    left: 0%;
  }

  .el-col-xl-1 {
    width: 4.16666667%;
  }

  .el-col-xl-offset-1 {
    margin-left: 4.16666667%;
  }

  .el-col-xl-pull-1 {
    position: relative;
    right: 4.16666667%;
  }

  .el-col-xl-push-1 {
    position: relative;
    left: 4.16666667%;
  }

  .el-col-xl-2 {
    width: 8.33333333%;
  }

  .el-col-xl-offset-2 {
    margin-left: 8.33333333%;
  }

  .el-col-xl-pull-2 {
    position: relative;
    right: 8.33333333%;
  }

  .el-col-xl-push-2 {
    position: relative;
    left: 8.33333333%;
  }

  .el-col-xl-3 {
    width: 12.5%;
  }

  .el-col-xl-offset-3 {
    margin-left: 12.5%;
  }

  .el-col-xl-pull-3 {
    position: relative;
    right: 12.5%;
  }

  .el-col-xl-push-3 {
    position: relative;
    left: 12.5%;
  }

  .el-col-xl-4 {
    width: 16.66666667%;
  }

  .el-col-xl-offset-4 {
    margin-left: 16.66666667%;
  }

  .el-col-xl-pull-4 {
    position: relative;
    right: 16.66666667%;
  }

  .el-col-xl-push-4 {
    position: relative;
    left: 16.66666667%;
  }

  .el-col-xl-5 {
    width: 20.83333333%;
  }

  .el-col-xl-offset-5 {
    margin-left: 20.83333333%;
  }

  .el-col-xl-pull-5 {
    position: relative;
    right: 20.83333333%;
  }

  .el-col-xl-push-5 {
    position: relative;
    left: 20.83333333%;
  }

  .el-col-xl-6 {
    width: 25%;
  }

  .el-col-xl-offset-6 {
    margin-left: 25%;
  }

  .el-col-xl-pull-6 {
    position: relative;
    right: 25%;
  }

  .el-col-xl-push-6 {
    position: relative;
    left: 25%;
  }

  .el-col-xl-7 {
    width: 29.16666667%;
  }

  .el-col-xl-offset-7 {
    margin-left: 29.16666667%;
  }

  .el-col-xl-pull-7 {
    position: relative;
    right: 29.16666667%;
  }

  .el-col-xl-push-7 {
    position: relative;
    left: 29.16666667%;
  }

  .el-col-xl-8 {
    width: 33.33333333%;
  }

  .el-col-xl-offset-8 {
    margin-left: 33.33333333%;
  }

  .el-col-xl-pull-8 {
    position: relative;
    right: 33.33333333%;
  }

  .el-col-xl-push-8 {
    position: relative;
    left: 33.33333333%;
  }

  .el-col-xl-9 {
    width: 37.5%;
  }

  .el-col-xl-offset-9 {
    margin-left: 37.5%;
  }

  .el-col-xl-pull-9 {
    position: relative;
    right: 37.5%;
  }

  .el-col-xl-push-9 {
    position: relative;
    left: 37.5%;
  }

  .el-col-xl-10 {
    width: 41.66666667%;
  }

  .el-col-xl-offset-10 {
    margin-left: 41.66666667%;
  }

  .el-col-xl-pull-10 {
    position: relative;
    right: 41.66666667%;
  }

  .el-col-xl-push-10 {
    position: relative;
    left: 41.66666667%;
  }

  .el-col-xl-11 {
    width: 45.83333333%;
  }

  .el-col-xl-offset-11 {
    margin-left: 45.83333333%;
  }

  .el-col-xl-pull-11 {
    position: relative;
    right: 45.83333333%;
  }

  .el-col-xl-push-11 {
    position: relative;
    left: 45.83333333%;
  }

  .el-col-xl-12 {
    width: 50%;
  }

  .el-col-xl-offset-12 {
    margin-left: 50%;
  }

  .el-col-xl-pull-12 {
    position: relative;
    right: 50%;
  }

  .el-col-xl-push-12 {
    position: relative;
    left: 50%;
  }

  .el-col-xl-13 {
    width: 54.16666667%;
  }

  .el-col-xl-offset-13 {
    margin-left: 54.16666667%;
  }

  .el-col-xl-pull-13 {
    position: relative;
    right: 54.16666667%;
  }

  .el-col-xl-push-13 {
    position: relative;
    left: 54.16666667%;
  }

  .el-col-xl-14 {
    width: 58.33333333%;
  }

  .el-col-xl-offset-14 {
    margin-left: 58.33333333%;
  }

  .el-col-xl-pull-14 {
    position: relative;
    right: 58.33333333%;
  }

  .el-col-xl-push-14 {
    position: relative;
    left: 58.33333333%;
  }

  .el-col-xl-15 {
    width: 62.5%;
  }

  .el-col-xl-offset-15 {
    margin-left: 62.5%;
  }

  .el-col-xl-pull-15 {
    position: relative;
    right: 62.5%;
  }

  .el-col-xl-push-15 {
    position: relative;
    left: 62.5%;
  }

  .el-col-xl-16 {
    width: 66.66666667%;
  }

  .el-col-xl-offset-16 {
    margin-left: 66.66666667%;
  }

  .el-col-xl-pull-16 {
    position: relative;
    right: 66.66666667%;
  }

  .el-col-xl-push-16 {
    position: relative;
    left: 66.66666667%;
  }

  .el-col-xl-17 {
    width: 70.83333333%;
  }

  .el-col-xl-offset-17 {
    margin-left: 70.83333333%;
  }

  .el-col-xl-pull-17 {
    position: relative;
    right: 70.83333333%;
  }

  .el-col-xl-push-17 {
    position: relative;
    left: 70.83333333%;
  }

  .el-col-xl-18 {
    width: 75%;
  }

  .el-col-xl-offset-18 {
    margin-left: 75%;
  }

  .el-col-xl-pull-18 {
    position: relative;
    right: 75%;
  }

  .el-col-xl-push-18 {
    position: relative;
    left: 75%;
  }

  .el-col-xl-19 {
    width: 79.16666667%;
  }

  .el-col-xl-offset-19 {
    margin-left: 79.16666667%;
  }

  .el-col-xl-pull-19 {
    position: relative;
    right: 79.16666667%;
  }

  .el-col-xl-push-19 {
    position: relative;
    left: 79.16666667%;
  }

  .el-col-xl-20 {
    width: 83.33333333%;
  }

  .el-col-xl-offset-20 {
    margin-left: 83.33333333%;
  }

  .el-col-xl-pull-20 {
    position: relative;
    right: 83.33333333%;
  }

  .el-col-xl-push-20 {
    position: relative;
    left: 83.33333333%;
  }

  .el-col-xl-21 {
    width: 87.5%;
  }

  .el-col-xl-offset-21 {
    margin-left: 87.5%;
  }

  .el-col-xl-pull-21 {
    position: relative;
    right: 87.5%;
  }

  .el-col-xl-push-21 {
    position: relative;
    left: 87.5%;
  }

  .el-col-xl-22 {
    width: 91.66666667%;
  }

  .el-col-xl-offset-22 {
    margin-left: 91.66666667%;
  }

  .el-col-xl-pull-22 {
    position: relative;
    right: 91.66666667%;
  }

  .el-col-xl-push-22 {
    position: relative;
    left: 91.66666667%;
  }

  .el-col-xl-23 {
    width: 95.83333333%;
  }

  .el-col-xl-offset-23 {
    margin-left: 95.83333333%;
  }

  .el-col-xl-pull-23 {
    position: relative;
    right: 95.83333333%;
  }

  .el-col-xl-push-23 {
    position: relative;
    left: 95.83333333%;
  }

  .el-col-xl-24 {
    width: 100%;
  }

  .el-col-xl-offset-24 {
    margin-left: 100%;
  }

  .el-col-xl-pull-24 {
    position: relative;
    right: 100%;
  }

  .el-col-xl-push-24 {
    position: relative;
    left: 100%;
  }
}

/* BEM support Func
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Break-points
 -------------------------- */

/* Scrollbar
 -------------------------- */

/* Placeholder
 -------------------------- */

/* BEM
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

.el-textarea {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: 16px;
}

.el-textarea__inner {
  display: block;
  resize: vertical;
  padding: 5px 15px;
  line-height: 1.5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  color: #444;
  background-color: #FFFFFF;
  background-image: none;
  border: 1px solid #44badd;
  border-radius: 2px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.el-textarea__inner::-webkit-input-placeholder {
  color: #44badd;
}

.el-textarea__inner::-moz-placeholder {
  color: #44badd;
}

.el-textarea__inner::-ms-input-placeholder {
  color: #44badd;
}

.el-textarea__inner::placeholder {
  color: #44badd;
}

.el-textarea__inner:hover {
  border-color: #44badd;
}

.el-textarea__inner:focus {
  outline: none;
  border-color: #409EFF;
}

.el-textarea .el-input__count {
  color: #909399;
  background: #FFFFFF;
  position: absolute;
  font-size: 12px;
  bottom: 5px;
  right: 10px;
}

.el-textarea.is-disabled .el-textarea__inner {
  background-color: #F5F7FA;
  border-color: #E4E7ED;
  color: #44badd;
  cursor: not-allowed;
}

.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  color: #44badd;
}

.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder {
  color: #44badd;
}

.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  color: #44badd;
}

.el-textarea.is-disabled .el-textarea__inner::placeholder {
  color: #44badd;
}

.el-textarea.is-exceed .el-textarea__inner {
  border-color: #F56C6C;
}

.el-textarea.is-exceed .el-input__count {
  color: #F56C6C;
}

.el-input {
  position: relative;
  font-size: 16px;
  display: inline-block;
  width: 100%;
}

.el-input::-webkit-scrollbar {
  z-index: 11;
  width: 6px;
}

.el-input::-webkit-scrollbar:horizontal {
  height: 6px;
}

.el-input::-webkit-scrollbar-thumb {
  border-radius: 5px;
  width: 6px;
  background: #b4bccc;
}

.el-input::-webkit-scrollbar-corner {
  background: #fff;
}

.el-input::-webkit-scrollbar-track {
  background: #fff;
}

.el-input::-webkit-scrollbar-track-piece {
  background: #fff;
  width: 6px;
}

.el-input .el-input__clear {
  color: #44badd;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.el-input .el-input__clear:hover {
  color: #909399;
}

.el-input .el-input__count {
  height: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #909399;
  font-size: 12px;
}

.el-input .el-input__count .el-input__count-inner {
  background: #FFFFFF;
  line-height: initial;
  display: inline-block;
  padding: 0 5px;
}

.el-input__inner {
  -webkit-appearance: none;
  background-color: #FFFFFF;
  background-image: none;
  border-radius: 2px;
  border: 1px solid #44badd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #444;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.el-input__inner::-ms-reveal {
  display: none;
}

.el-input__inner::-webkit-input-placeholder {
  color: #44badd;
}

.el-input__inner::-moz-placeholder {
  color: #44badd;
}

.el-input__inner::-ms-input-placeholder {
  color: #44badd;
}

.el-input__inner::placeholder {
  color: #44badd;
}

.el-input__inner:hover {
  border-color: #44badd;
}

.el-input__inner:focus {
  outline: none;
  border-color: #409EFF;
}

.el-input__suffix {
  position: absolute;
  height: 100%;
  right: 5px;
  top: 0;
  text-align: center;
  color: #44badd;
  -webkit-transition: all .3s;
  transition: all .3s;
  pointer-events: none;
}

.el-input__suffix-inner {
  pointer-events: all;
}

.el-input__prefix {
  position: absolute;
  height: 100%;
  left: 5px;
  top: 0;
  text-align: center;
  color: #44badd;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.el-input__icon {
  height: 100%;
  width: 25px;
  text-align: center;
  -webkit-transition: all .3s;
  transition: all .3s;
  line-height: 40px;
}

.el-input__icon:after {
  content: '';
  height: 100%;
  width: 0;
  display: inline-block;
  vertical-align: middle;
}

.el-input__validateIcon {
  pointer-events: none;
}

.el-input.is-active .el-input__inner {
  outline: none;
  border-color: #409EFF;
}

.el-input.is-disabled .el-input__inner {
  background-color: #F5F7FA;
  border-color: #E4E7ED;
  color: #44badd;
  cursor: not-allowed;
}

.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: #44badd;
}

.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: #44badd;
}

.el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  color: #44badd;
}

.el-input.is-disabled .el-input__inner::placeholder {
  color: #44badd;
}

.el-input.is-disabled .el-input__icon {
  cursor: not-allowed;
}

.el-input.is-exceed .el-input__inner {
  border-color: #F56C6C;
}

.el-input.is-exceed .el-input__suffix .el-input__count {
  color: #F56C6C;
}

.el-input--suffix .el-input__inner {
  padding-right: 30px;
}

.el-input--prefix .el-input__inner {
  padding-left: 30px;
}

.el-input--medium {
  font-size: 14px;
}

.el-input--medium .el-input__inner {
  height: 36px;
  line-height: 36px;
}

.el-input--medium .el-input__icon {
  line-height: 36px;
}

.el-input--small {
  font-size: 13px;
}

.el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
}

.el-input--small .el-input__icon {
  line-height: 32px;
}

.el-input--mini {
  font-size: 12px;
}

.el-input--mini .el-input__inner {
  height: 28px;
  line-height: 28px;
}

.el-input--mini .el-input__icon {
  line-height: 28px;
}

.el-input-group {
  line-height: normal;
  display: inline-table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.el-input-group > .el-input__inner {
  vertical-align: middle;
  display: table-cell;
}

.el-input-group__append,
.el-input-group__prepend {
  background-color: #F5F7FA;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #44badd;
  border-radius: 2px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}

.el-input-group__append:focus,
.el-input-group__prepend:focus {
  outline: none;
}

.el-input-group__append .el-select,
.el-input-group__append .el-button,
.el-input-group__prepend .el-select,
.el-input-group__prepend .el-button {
  display: inline-block;
  margin: -10px -20px;
}

.el-input-group__append button.el-button,
.el-input-group__append div.el-select .el-input__inner,
.el-input-group__append div.el-select:hover .el-input__inner,
.el-input-group__prepend button.el-button,
.el-input-group__prepend div.el-select .el-input__inner,
.el-input-group__prepend div.el-select:hover .el-input__inner {
  border-color: transparent;
  background-color: transparent;
  color: inherit;
  border-top: 0;
  border-bottom: 0;
}

.el-input-group__append .el-button,
.el-input-group__append .el-input,
.el-input-group__prepend .el-button,
.el-input-group__prepend .el-input {
  font-size: inherit;
}

.el-input-group__prepend {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.el-input-group__append {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.el-input-group--prepend .el-input__inner {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
  border-color: transparent;
}

.el-input-group--append .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.el-input-group--append .el-select .el-input.is-focus .el-input__inner {
  border-color: transparent;
}

/** disalbe default clear on IE */

.el-input__inner::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* BEM support Func
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Break-points
 -------------------------- */

/* Scrollbar
 -------------------------- */

/* Placeholder
 -------------------------- */

/* BEM
 -------------------------- */

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #44badd;
  border-color: #44badd;
  color: #444;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  margin: 0;
  -webkit-transition: .1s;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 2px;
}

.el-button + .el-button {
  margin-left: 10px;
}

.el-button.is-round {
  padding: 12px 20px;
}

.el-button:hover,
.el-button:focus {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.el-button:active {
  color: #3a8ee6;
  border-color: #3a8ee6;
  outline: none;
}

.el-button::-moz-focus-inner {
  border: 0;
}

.el-button [class*="el-icon-"] + span {
  margin-left: 5px;
}

.el-button.is-plain:hover,
.el-button.is-plain:focus {
  background: #FFFFFF;
  border-color: #409EFF;
  color: #409EFF;
}

.el-button.is-plain:active {
  background: #FFFFFF;
  border-color: #3a8ee6;
  color: #3a8ee6;
  outline: none;
}

.el-button.is-active {
  color: #3a8ee6;
  border-color: #3a8ee6;
}

.el-button.is-disabled,
.el-button.is-disabled:hover,
.el-button.is-disabled:focus {
  color: #44badd;
  cursor: not-allowed;
  background-image: none;
  background-color: #FFFFFF;
  border-color: #EBEEF5;
}

.el-button.is-disabled.el-button--text {
  background-color: transparent;
}

.el-button.is-disabled.is-plain,
.el-button.is-disabled.is-plain:hover,
.el-button.is-disabled.is-plain:focus {
  background-color: #FFFFFF;
  border-color: #EBEEF5;
  color: #44badd;
}

.el-button.is-loading {
  position: relative;
  pointer-events: none;
}

.el-button.is-loading:before {
  pointer-events: none;
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.35);
}

.el-button.is-round {
  border-radius: 20px;
  padding: 12px 23px;
}

.el-button.is-circle {
  border-radius: 50%;
  padding: 12px;
}

.el-button--primary {
  color: #FFFFFF;
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #FFFFFF;
}

.el-button--primary:active {
  background: #3a8ee6;
  border-color: #3a8ee6;
  color: #FFFFFF;
  outline: none;
}

.el-button--primary.is-active {
  background: #3a8ee6;
  border-color: #3a8ee6;
  color: #FFFFFF;
}

.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:active {
  color: #FFFFFF;
  background-color: #a0cfff;
  border-color: #a0cfff;
}

.el-button--primary.is-plain {
  color: #409EFF;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
  background: #409EFF;
  border-color: #409EFF;
  color: #FFFFFF;
}

.el-button--primary.is-plain:active {
  background: #3a8ee6;
  border-color: #3a8ee6;
  color: #FFFFFF;
  outline: none;
}

.el-button--primary.is-plain.is-disabled,
.el-button--primary.is-plain.is-disabled:hover,
.el-button--primary.is-plain.is-disabled:focus,
.el-button--primary.is-plain.is-disabled:active {
  color: #8cc5ff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.el-button--success {
  color: #FFFFFF;
  background-color: #67C23A;
  border-color: #67C23A;
}

.el-button--success:hover,
.el-button--success:focus {
  background: #85ce61;
  border-color: #85ce61;
  color: #FFFFFF;
}

.el-button--success:active {
  background: #5daf34;
  border-color: #5daf34;
  color: #FFFFFF;
  outline: none;
}

.el-button--success.is-active {
  background: #5daf34;
  border-color: #5daf34;
  color: #FFFFFF;
}

.el-button--success.is-disabled,
.el-button--success.is-disabled:hover,
.el-button--success.is-disabled:focus,
.el-button--success.is-disabled:active {
  color: #FFFFFF;
  background-color: #b3e19d;
  border-color: #b3e19d;
}

.el-button--success.is-plain {
  color: #67C23A;
  background: #f0f9eb;
  border-color: #c2e7b0;
}

.el-button--success.is-plain:hover,
.el-button--success.is-plain:focus {
  background: #67C23A;
  border-color: #67C23A;
  color: #FFFFFF;
}

.el-button--success.is-plain:active {
  background: #5daf34;
  border-color: #5daf34;
  color: #FFFFFF;
  outline: none;
}

.el-button--success.is-plain.is-disabled,
.el-button--success.is-plain.is-disabled:hover,
.el-button--success.is-plain.is-disabled:focus,
.el-button--success.is-plain.is-disabled:active {
  color: #a4da89;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}

.el-button--warning {
  color: #FFFFFF;
  background-color: #E6A23C;
  border-color: #E6A23C;
}

.el-button--warning:hover,
.el-button--warning:focus {
  background: #ebb563;
  border-color: #ebb563;
  color: #FFFFFF;
}

.el-button--warning:active {
  background: #cf9236;
  border-color: #cf9236;
  color: #FFFFFF;
  outline: none;
}

.el-button--warning.is-active {
  background: #cf9236;
  border-color: #cf9236;
  color: #FFFFFF;
}

.el-button--warning.is-disabled,
.el-button--warning.is-disabled:hover,
.el-button--warning.is-disabled:focus,
.el-button--warning.is-disabled:active {
  color: #FFFFFF;
  background-color: #f3d19e;
  border-color: #f3d19e;
}

.el-button--warning.is-plain {
  color: #E6A23C;
  background: #fdf6ec;
  border-color: #f5dab1;
}

.el-button--warning.is-plain:hover,
.el-button--warning.is-plain:focus {
  background: #E6A23C;
  border-color: #E6A23C;
  color: #FFFFFF;
}

.el-button--warning.is-plain:active {
  background: #cf9236;
  border-color: #cf9236;
  color: #FFFFFF;
  outline: none;
}

.el-button--warning.is-plain.is-disabled,
.el-button--warning.is-plain.is-disabled:hover,
.el-button--warning.is-plain.is-disabled:focus,
.el-button--warning.is-plain.is-disabled:active {
  color: #f0c78a;
  background-color: #fdf6ec;
  border-color: #faecd8;
}

.el-button--danger {
  color: #FFFFFF;
  background-color: #F56C6C;
  border-color: #F56C6C;
}

.el-button--danger:hover,
.el-button--danger:focus {
  background: #f78989;
  border-color: #f78989;
  color: #FFFFFF;
}

.el-button--danger:active {
  background: #dd6161;
  border-color: #dd6161;
  color: #FFFFFF;
  outline: none;
}

.el-button--danger.is-active {
  background: #dd6161;
  border-color: #dd6161;
  color: #FFFFFF;
}

.el-button--danger.is-disabled,
.el-button--danger.is-disabled:hover,
.el-button--danger.is-disabled:focus,
.el-button--danger.is-disabled:active {
  color: #FFFFFF;
  background-color: #fab6b6;
  border-color: #fab6b6;
}

.el-button--danger.is-plain {
  color: #F56C6C;
  background: #fef0f0;
  border-color: #fbc4c4;
}

.el-button--danger.is-plain:hover,
.el-button--danger.is-plain:focus {
  background: #F56C6C;
  border-color: #F56C6C;
  color: #FFFFFF;
}

.el-button--danger.is-plain:active {
  background: #dd6161;
  border-color: #dd6161;
  color: #FFFFFF;
  outline: none;
}

.el-button--danger.is-plain.is-disabled,
.el-button--danger.is-plain.is-disabled:hover,
.el-button--danger.is-plain.is-disabled:focus,
.el-button--danger.is-plain.is-disabled:active {
  color: #f9a7a7;
  background-color: #fef0f0;
  border-color: #fde2e2;
}

.el-button--info {
  color: #FFFFFF;
  background-color: #909399;
  border-color: #909399;
}

.el-button--info:hover,
.el-button--info:focus {
  background: #a6a9ad;
  border-color: #a6a9ad;
  color: #FFFFFF;
}

.el-button--info:active {
  background: #82848a;
  border-color: #82848a;
  color: #FFFFFF;
  outline: none;
}

.el-button--info.is-active {
  background: #82848a;
  border-color: #82848a;
  color: #FFFFFF;
}

.el-button--info.is-disabled,
.el-button--info.is-disabled:hover,
.el-button--info.is-disabled:focus,
.el-button--info.is-disabled:active {
  color: #FFFFFF;
  background-color: #c8c9cc;
  border-color: #c8c9cc;
}

.el-button--info.is-plain {
  color: #909399;
  background: #f4f4f5;
  border-color: #d3d4d6;
}

.el-button--info.is-plain:hover,
.el-button--info.is-plain:focus {
  background: #909399;
  border-color: #909399;
  color: #FFFFFF;
}

.el-button--info.is-plain:active {
  background: #82848a;
  border-color: #82848a;
  color: #FFFFFF;
  outline: none;
}

.el-button--info.is-plain.is-disabled,
.el-button--info.is-plain.is-disabled:hover,
.el-button--info.is-plain.is-disabled:focus,
.el-button--info.is-plain.is-disabled:active {
  color: #bcbec2;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
}

.el-button--medium {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 2px;
}

.el-button--medium.is-round {
  padding: 10px 20px;
}

.el-button--medium.is-circle {
  padding: 10px;
}

.el-button--small {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 1px;
}

.el-button--small.is-round {
  padding: 9px 15px;
}

.el-button--small.is-circle {
  padding: 9px;
}

.el-button--mini {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 1px;
}

.el-button--mini.is-round {
  padding: 7px 15px;
}

.el-button--mini.is-circle {
  padding: 7px;
}

.el-button--text {
  border-color: transparent;
  color: #409EFF;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.el-button--text:hover,
.el-button--text:focus {
  color: #66b1ff;
  border-color: transparent;
  background-color: transparent;
}

.el-button--text:active {
  color: #3a8ee6;
  border-color: transparent;
  background-color: transparent;
}

.el-button--text.is-disabled,
.el-button--text.is-disabled:hover,
.el-button--text.is-disabled:focus {
  border-color: transparent;
}

.el-button-group {
  display: inline-block;
  vertical-align: middle;
}

.el-button-group::before,
.el-button-group::after {
  display: table;
  content: "";
}

.el-button-group::after {
  clear: both;
}

.el-button-group > .el-button {
  float: left;
  position: relative;
}

.el-button-group > .el-button + .el-button {
  margin-left: 0;
}

.el-button-group > .el-button.is-disabled {
  z-index: 1;
}

.el-button-group > .el-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.el-button-group > .el-button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.el-button-group > .el-button:first-child:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.el-button-group > .el-button:first-child:last-child.is-round {
  border-radius: 20px;
}

.el-button-group > .el-button:first-child:last-child.is-circle {
  border-radius: 50%;
}

.el-button-group > .el-button:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.el-button-group > .el-button:not(:last-child) {
  margin-right: -1px;
}

.el-button-group > .el-button:not(.is-disabled):hover,
.el-button-group > .el-button:not(.is-disabled):focus,
.el-button-group > .el-button:not(.is-disabled):active {
  z-index: 1;
}

.el-button-group > .el-button.is-active {
  z-index: 1;
}

.el-button-group > .el-dropdown > .el-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--primary:first-child {
  border-right-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--primary:last-child {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--primary:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, 0.5);
  border-right-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--success:first-child {
  border-right-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--success:last-child {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--success:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, 0.5);
  border-right-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--warning:first-child {
  border-right-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--warning:last-child {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--warning:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, 0.5);
  border-right-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--danger:first-child {
  border-right-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--danger:last-child {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--danger:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, 0.5);
  border-right-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--info:first-child {
  border-right-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--info:last-child {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.el-button-group .el-button--info:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, 0.5);
  border-right-color: rgba(255, 255, 255, 0.5);
}

/* BEM support Func
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Break-points
 -------------------------- */

/* Scrollbar
 -------------------------- */

/* Placeholder
 -------------------------- */

/* BEM
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

.el-notification {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 330px;
  padding: 14px 26px 14px 13px;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid transparent;
  position: fixed;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: opacity .3s, left .3s, right .3s, top 0.4s, bottom .3s, -webkit-transform .3s;
  transition: opacity .3s, left .3s, right .3s, top 0.4s, bottom .3s, -webkit-transform .3s;
  transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
  transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s, -webkit-transform .3s;
  overflow: hidden;
}

.el-notification.right {
  right: 16px;
}

.el-notification.left {
  left: 16px;
}

.el-notification__group {
  margin-left: 13px;
  margin-right: 8px;
}

.el-notification__title {
  font-weight: bold;
  font-size: 16px;
  color: #444;
  margin: 0;
}

.el-notification__content {
  font-size: 16px;
  line-height: 21px;
  margin: 6px 0 0 0;
  color: #444;
  text-align: justify;
}

.el-notification__content p {
  margin: 0;
}

.el-notification__icon {
  height: 24px;
  width: 24px;
  font-size: 24px;
}

.el-notification__closeBtn {
  position: absolute;
  top: 18px;
  right: 15px;
  cursor: pointer;
  color: #eee;
  font-size: 16px;
}

.el-notification__closeBtn:hover {
  color: #fff;
}

.el-notification .el-icon-success {
  color: #67C23A;
}

.el-notification .el-icon-error {
  color: #F56C6C;
}

.el-notification .el-icon-info {
  color: #909399;
}

.el-notification .el-icon-warning {
  color: #E6A23C;
}

.el-notification-fade-enter.right {
  right: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.el-notification-fade-enter.left {
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.el-notification-fade-leave-active {
  opacity: 0;
}

/* BEM support Func
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Break-points
 -------------------------- */

/* Scrollbar
 -------------------------- */

/* Placeholder
 -------------------------- */

/* BEM
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

.el-loading-parent--relative {
  position: relative !important;
}

.el-loading-parent--hidden {
  overflow: hidden !important;
}

.el-loading-mask {
  position: absolute;
  z-index: 2000;
  background-color: rgba(255, 255, 255, 0.9);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.el-loading-mask.is-fullscreen {
  position: fixed;
}

.el-loading-mask.is-fullscreen .el-loading-spinner {
  margin-top: -25px;
}

.el-loading-mask.is-fullscreen .el-loading-spinner .circular {
  height: 50px;
  width: 50px;
}

.el-loading-spinner {
  top: 50%;
  margin-top: -21px;
  width: 100%;
  text-align: center;
  position: absolute;
}

.el-loading-spinner .el-loading-text {
  color: #409EFF;
  margin: 3px 0;
  font-size: 14px;
}

.el-loading-spinner .circular {
  height: 42px;
  width: 42px;
  -webkit-animation: loading-rotate 2s linear infinite;
          animation: loading-rotate 2s linear infinite;
}

.el-loading-spinner .path {
  -webkit-animation: loading-dash 1.5s ease-in-out infinite;
          animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: #409EFF;
  stroke-linecap: round;
}

.el-loading-spinner i {
  color: #409EFF;
}

.el-loading-fade-enter,
.el-loading-fade-leave-active {
  opacity: 0;
}

@-webkit-keyframes loading-rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loading-rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

/* BEM support Func
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Break-points
 -------------------------- */

/* Scrollbar
 -------------------------- */

/* Placeholder
 -------------------------- */

/* BEM
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* BEM support Func
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Break-points
 -------------------------- */

/* Scrollbar
 -------------------------- */

/* Placeholder
 -------------------------- */

/* BEM
 -------------------------- */

.v-modal-enter {
  -webkit-animation: v-modal-in .2s ease;
          animation: v-modal-in .2s ease;
}

.v-modal-leave {
  -webkit-animation: v-modal-out .2s ease forwards;
          animation: v-modal-out .2s ease forwards;
}

@-webkit-keyframes v-modal-in {
  0% {
    opacity: 0;
  }

  100% {

  }
}

@keyframes v-modal-in {
  0% {
    opacity: 0;
  }

  100% {

  }
}

@-webkit-keyframes v-modal-out {
  0% {

  }

  100% {
    opacity: 0;
  }
}

@keyframes v-modal-out {
  0% {

  }

  100% {
    opacity: 0;
  }
}

.v-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000000;
}

.el-popup-parent--hidden {
  overflow: hidden;
}

.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #FFFFFF;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 50%;
}

.el-dialog.is-fullscreen {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  height: 100%;
  overflow: auto;
}

.el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}

.el-dialog__header {
  padding: 20px;
  padding-bottom: 10px;
}

.el-dialog__headerbtn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
}

.el-dialog__headerbtn .el-dialog__close {
  color: #909399;
}

.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  color: #409EFF;
}

.el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
}

.el-dialog__body {
  padding: 30px 20px;
  color: #444;
  font-size: 14px;
  word-break: break-all;
}

.el-dialog__footer {
  padding: 20px;
  padding-top: 10px;
  text-align: right;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.el-dialog--center {
  text-align: center;
}

.el-dialog--center .el-dialog__body {
  text-align: initial;
  padding: 25px 25px 30px;
}

.el-dialog--center .el-dialog__footer {
  text-align: inherit;
}

.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in .3s;
          animation: dialog-fade-in .3s;
}

.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out .3s;
          animation: dialog-fade-out .3s;
}

@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}

@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}

.el-notification {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.el-notification.alert-info {
  background-color: #409EFF;
}

.el-notification.alert-error {
  background-color: #FF4740;
}

.el-notification__content {
  text-align: left;
}

.el-loading-mask.is-fullscreen {
  background-color: rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 1024px) {
  .el-loading-mask.is-fullscreen {
    background-color: rgba(0, 0, 0, 0.2);
    margin-left: 280px;
  }
}

.el-dialog {
  color: #444;
  width: 500px;
}

.el-dialog .el-dialog__body {
  color: #444;
}

.el-dialog.without-header .el-dialog__header {
  display: none;
}

.el-button {
  position: relative;
}

.el-button .icon-32,
.el-button .icon-48 {
  position: absolute;
  top: 50%;
}

.el-button .icon-32 {
  left: 7px;
  margin-top: -16px;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

.el-button .icon-48 {
  left: 0;
  margin-top: -24px;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #161B2A;
  color: #fff;
  font-family: Arial;
  font-size: 16px;
}

a {
  color: #fff;
  font-family: Arial;
}

p {
  margin: 0;
  line-height: 150%;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#app {
  height: 100%;
  background: url(/img/common-bg.jpg) no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
}

.view-wrapper {
  padding-left: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

@media (max-width: 1024px) {
  .view-wrapper {
    padding-left: 0 !important;
  }
}

.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.container {
  margin: 0 auto;
  position: relative;
}

.container.has-titlebar {
  padding-top: 42px;
}

.container.scrollable {
  height: 100%;
}

.full-height {
  height: 100%;
}

.narrow-layout {
  width: 300px;
}

.standard-layout {
  max-width: 720px;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.small-font {
  font-size: 14px;
}

.large-font {
  font-size: 22px;
}

.mt-0 {
  margin-top: 0px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mb-50 {
  margin-bottom: 50px;
}

@-webkit-keyframes elastic-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }

  20% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }

  40% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }

  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

  80% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes elastic-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }

  20% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }

  40% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }

  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

  80% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.w-100 {
  width: 100%;
}

.mt-4 {
  margin-top: 16px;
}

.position-relative {
  position: relative;
}

.w-50 {
  width: 50%;
}

.form-row label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.form-row + .form-row {
  margin-top: 10px;
}

.narrow-form button {
  display: block;
  width: 100%;
  text-align: center;
}

.narrow-form input {
  text-align: center;
  color: black;
}

.icon-32 {
  width: 32px;
  height: 32px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/icons-set-32.png);
  background-size: 32px 800px;
}

.icon-32.icon-back {
  background-position: 0 -32px;
}

.icon-32.icon-back:hover {
  background-position: 0 -0px;
}

.icon-32.icon-burger {
  background-position: 0 -96px;
}

.icon-32.icon-burger:hover {
  background-position: 0 -64px;
}

.icon-32.icon-speaking {
  background-position: 0 -128px;
}

.icon-32.icon-next {
  background-position: 0 -192px;
}

.icon-32.icon-vocabulary-blue {
  background-position: 0 -224px;
}

.icon-32.icon-replay-video {
  background-position: 0 -256px;
}

.icon-32.icon-retry-speak {
  background-position: 0 -288px;
}

.icon-32.icon-replay-audio {
  background-position: 0 -320px;
}

.icon-32.icon-lamp {
  background-position: 0 -352px;
}

.icon-32.icon-repeat {
  background-position: 0 -384px;
}

.icon-32.icon-forward {
  background-position: 0 -416px;
}

.icon-32.icon-info {
  background-position: 0 -448px;
}

.icon-32.icon-check {
  background-position: 0 -480px;
}

.icon-32.icon-cross {
  background-position: 0 -512px;
}

.icon-32.icon-play {
  background-position: 0 -576px;
}

.icon-32.icon-play:hover {
  background-position: 0 -544px;
}

.icon-32.icon-pause {
  background-position: 0 -640px;
}

.icon-32.icon-pause:hover {
  background-position: 0 -608px;
}

.icon-32.icon-arrow {
  background-position: 0 -672px;
}

.icon-32.icon-lock {
  background-position: 0 -704px;
}

.icon-32.icon-sound {
  background-position: 0 -736px;
}

.icon-32.icon-2x {
  background-position: 0 -768px;
}

.icon-48 {
  width: 48px;
  height: 48px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/icons-set-48.png);
  background-size: 48px 192px;
}

.icon-48.icon-play {
  background-position: 0 -0px;
}

.icon-48.icon-quiz {
  background-position: 0 -48px;
}

.icon-48.icon-timer {
  background-position: 0 -96px;
}

.icon-48.icon-dots {
  background-position: 0 -144px;
}

.icon-word {
  width: 175px;
  height: 64px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/word-icon.png);
}

/* Components */

.side-menu {
  left: -280px;
  z-index: 3000;
  position: fixed;
  top: 0;
  left: -280px;
  bottom: 0;
  width: 280px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-transition: left 300ms linear;
  transition: left 300ms linear;
}

.side-menu > .menu-inner {
  position: relative;
  width: 100%;
  padding: 15px;
}

.side-menu > .menu-inner > .menu-icon {
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  right: -32px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.side-menu > .menu-inner > .menu-icon span {
  display: block;
}

.side-menu.visible {
  left: 0;
}

@media (max-width: 1024px) {
  .side-menu {
    left: -280px;
  }
}

.side-menu .menu-items {
  padding-top: 10px;
}

.side-menu .menu-items > a {
  display: block;
  margin: 3px 0;
  padding: 17px 17px 17px 60px;
  text-decoration: none;
  background: #2194ED;
  position: relative;
  opacity: 0.9;
}

.side-menu .menu-items > a:hover {
  opacity: 1;
}

.side-menu .menu-items > a:before {
  position: absolute;
  width: 48px;
  height: 48px;
  content: ' ';
  display: block;
  top: 2px;
  left: 1px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/side-menu-icons1.png);
  background-size: 48px 528px;
}

.side-menu .menu-items > a.home {
  background: #1F71B0;
}

.side-menu .menu-items > a.home:before {
  background-position: 0 -384px;
}

.side-menu .menu-items > a.logout {
  background: #2194ED;
}

.side-menu .menu-items > a.logout:before {
  background-position: 0 -336px;
}

.side-menu .menu-items > a.join {
  background: #4BCCF2;
}

.side-menu .menu-items > a.join:before {
  background-position: 0 -288px;
}

.side-menu .menu-items > a.about {
  background: #FFA349;
}

.side-menu .menu-items > a.about:before {
  background-position: 0 -0px;
}

.side-menu .menu-items > a.translation {
  background: #3CD8B1;
}

.side-menu .menu-items > a.translation:before {
  background-position: 0 -480px;
}

.side-menu .menu-items > a.contact {
  background: #F6774A;
}

.side-menu .menu-items > a.contact:before {
  background-position: 0 -96px;
}

.side-menu .menu-items > a.gift {
  background: #FF4D4D;
}

.side-menu .menu-items > a.gift:before {
  background-position: 0 -432px;
}

.side-menu .logo {
  font-size: 22px;
  text-transform: uppercase;
}

.side-menu .logo span {
  font-weight: bold;
}

@media screen and (max-width: 1300px) {
  body {
    zoom: 0.67;
  }
}

.login-header {
  text-align: center;
  margin-bottom: 50px;
}

.login-header .logo {
  background-image: url(/img/logo.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 128px 128px;
  padding: 138px 0 15px 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 48px;
  font-weight: 100;
}

.login-header .logo span {
  font-weight: bold;
}

.login-header .headline {
  font-size: 22px;
  margin-bottom: 15px;
}

.login-header .sub {
  font-size: 14px;
  text-transform: uppercase;
}

.login-component .narrow-form {
  margin: 0 auto;
}

.footline {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
}

.footline .logo {
  display: inline-block;
  width: 48px;
  height: 48px;
  background: url(/img/logo.png) no-repeat center;
  background-size: contain;
  margin-bottom: 10px;
}

.footline .copy1 {
  margin-bottom: 5px;
}

.catalogue-component {
  padding-top: 160px;
}

.catalogue-component .category-list {
  padding: 0px 0;
}

.catalogue-component .category-list .category-body {
  width: 100%;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-decoration: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.catalogue-component .category-list .category-body .icon {
  width: 78px;
  height: 78px;
  background-size: contain;
  background-position: center;
  margin-right: 15px;
}

.catalogue-component .category-list .category-body .title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.catalogue-component .category-list .category-body .title h3 {
  margin: 0 0 10px 0;
}

.catalogue-component .category-list .category {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-decoration: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.catalogue-component .category-list .category .icon {
  width: 78px;
  height: 78px;
  background-size: contain;
  background-position: center;
  margin-right: 15px;
}

.catalogue-component .category-list .category .title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.catalogue-component .category-list .category .title h3 {
  margin: 0 0 10px 0;
}

.catalogue-component .category-list .category + .category {
  margin-top: 15px;
}

.catalogue-component .highlight-list {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.3);
  margin: 15px 0px;
}

.catalogue-component .highlight-list .category {
  padding: 10px;
  background-color: transparent;
  display: block;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-decoration: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.catalogue-component .highlight-list .category .no-repeat {
  width: 100%;
  height: 78px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 15px;
}

.catalogue-component .highlight-list .category .title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.catalogue-component .highlight-list .category .title h3 {
  margin: 0 0 10px 0;
}

.catalogue-component .highlight-list .category .dot {
  background: red;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 15px;
}

.catalogue-component .highlight-list .category + .category {
  margin-top: 0px;
}

.units-component .units-container {
  padding: 15px 0;
}

.units-component .category-details {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0 10px 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin-bottom: 15px;
  height: 120px;
}

.units-component .category-details > div {
  -ms-flex-item-align: center;
      align-self: center;
}

.units-component .category-details > .details {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.units-component .category-details > .details > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.units-component .category-details > .details .primary > div {
  self-align: center;
}

.units-component .category-details > .details .primary .icon {
  width: 78px;
  height: 78px;
  background-size: contain;
  background-position: center;
}

.units-component .category-details > .details .primary .title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-weight: bold;
  font-size: 22px;
  padding: 0 10px;
}

.units-component .category-details > .details .secondary .level {
  width: 78px;
}

.units-component .category-details > .details .secondary .level .difficulty {
  margin: 0 auto;
}

.units-component .category-details > .details .secondary .sub-title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: 14px;
  padding: 0 10px;
}

.units-component .category-details > .progress-meter {
  margin-top: 10px;
}

.units-component .unit-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 15px;
  padding-right: 10px;
  background-color: rgba(255, 255, 255, 0.5);
}

.units-component .unit-body .preview {
  width: 150px;
  height: 120px;
  background-position: center;
  background-size: cover;
}

.units-component .unit-body .details {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 10px;
  height: 120px;
}

.units-component .unit-body .details .title {
  font-size: 22px;
  margin-bottom: 8px;
}

.units-component .unit-body .details .sub-title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 12px;
}

.units-component .unit {
  text-decoration: none;
}

.component-userbar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  padding-top: 20px;
  height: 160px;
}

.component-userbar .avatar {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(/img/profile-picture.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.component-userbar .username {
  text-align: center;
  text-decoration: none;
  margin-bottom: 8px;
}

.avatar-container {
  padding-left: 0px;
}

@media screen and (min-width: 1024px) {
  .avatar-container {
    padding-left: 280px;
  }
}

.unit-menu-component .preview {
  margin: 15px auto;
  width: 100%;
  height: 540px;
  background-size: cover;
  background-position: center;
}

.unit-menu-component .preview .overlay {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.unit-menu-component .preview .overlay .play {
  -ms-flex-item-align: center;
      align-self: center;
  margin: 0 auto;
}

.unit-menu-component .activities {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -16px 0 -6px;
  padding: 0 1px;
}

.unit-menu-component .activities .activity {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 170px;
  height: 66px;
  margin: 5px 6px;
  padding: 5px;
  background-color: #2194ed;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
}

.unit-menu-component .activities .activity .number {
  font-size: 22px;
  display: inline-block;
  margin: 0 0 3px 8px;
}

.unit-menu-component .activities .activity .body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
}

.unit-menu-component .activities .activity .icon-2x {
  margin-right: 5px;
}

.unit-menu-component .activities .activity.quiz {
  width: 716px;
}

.unit-menu-component .activities .activity.quiz .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.unit-menu-component .activities .activity.quiz .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-right: 34px;
  margin-top: 5px;
}

.unit-menu-component .activities .activity.locked.reading {
  background-color: rgba(255, 255, 255, 0.5);
}

.unit-menu-component .activities .activity.locked.reading .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.unit-menu-component .activities .activity.locked.reading .icon-32 {
  margin-left: 45px;
  -ms-flex-item-align: center;
      align-self: center;
}

.unit-menu-component .activities .activity.locked.speech {
  background-color: rgba(255, 255, 255, 0.5);
}

.unit-menu-component .activities .activity.locked.speech .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.unit-menu-component .activities .activity.locked.speech .icon-32 {
  margin-left: 45px;
  -ms-flex-item-align: center;
      align-self: center;
}

.unit-menu-component .activities .activity.locked.quiz {
  background-color: rgba(255, 255, 255, 0.5);
}

.unit-menu-component .activities .activity.completed.quiz {
  background-color: #00E4CC;
}

.unit-menu-component .activities .activity.completed.quiz .qiuz-passed {
  width: 60px;
  height: 48px;
  background: url(/img/quiz-passed.png) no-repeat center center;
  background-size: 60px 48px;
}

@media screen and (max-height: 900px) {
  .unit-menu-component .preview {
    height: 55vh;
  }
}

.unit-guidedspeech-component .preview {
  margin: 15px auto;
  width: 100%;
  height: 540px;
  background-size: cover;
  background-position: center;
}

.unit-guidedspeech-component .preview .overlay {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.unit-guidedspeech-component .preview .overlay .play {
  -ms-flex-item-align: center;
      align-self: center;
  margin: 0 auto;
}

.unit-guidedspeech-component .activities {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -16px 0 -6px;
  padding: 0 1px;
}

.unit-guidedspeech-component .activities .activity {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 170px;
  height: 66px;
  margin: 5px 6px;
  padding: 5px;
  background-color: #2194ed;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
}

.unit-guidedspeech-component .activities .activity .number {
  font-size: 22px;
  display: inline-block;
  margin: 0 0 3px 8px;
}

.unit-guidedspeech-component .activities .activity .body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
}

.unit-guidedspeech-component .activities .activity .icon-2x {
  margin-right: 5px;
}

.unit-guidedspeech-component .activities .activity.quiz {
  width: 716px;
}

.unit-guidedspeech-component .activities .activity.quiz .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.unit-guidedspeech-component .activities .activity.quiz .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-right: 34px;
  margin-top: 5px;
}

.unit-guidedspeech-component .activities .activity.locked.reading {
  background-color: rgba(255, 255, 255, 0.5);
}

.unit-guidedspeech-component .activities .activity.locked.reading .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.unit-guidedspeech-component .activities .activity.locked.reading .icon-32 {
  margin-left: 45px;
  -ms-flex-item-align: center;
      align-self: center;
}

.unit-guidedspeech-component .activities .activity.locked.speech {
  background-color: rgba(255, 255, 255, 0.5);
}

.unit-guidedspeech-component .activities .activity.locked.speech .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.unit-guidedspeech-component .activities .activity.locked.speech .icon-32 {
  margin-left: 45px;
  -ms-flex-item-align: center;
      align-self: center;
}

.unit-guidedspeech-component .activities .activity.locked.quiz {
  background-color: rgba(255, 255, 255, 0.5);
}

.unit-guidedspeech-component .activities .activity.completed.quiz {
  background-color: #00E4CC;
}

.unit-guidedspeech-component .activities .activity.completed.quiz .qiuz-passed {
  width: 60px;
  height: 48px;
  background: url(/img/quiz-passed.png) no-repeat center center;
  background-size: 60px 48px;
}

@media screen and (max-height: 900px) {
  .unit-menu-component .preview {
    height: 55vh;
  }
}

.unit-listening-container {
  height: 100%;
  overflow: hidden;
}

.unit-listening-container .video-player-wrapper {
  padding: 15px 0;
}

.video-player {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #000;
}

.video-player .preview {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 540px;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-player .preview video {
  display: none;
}

.video-player.playing .preview video {
  display: block;
}

.video-player .progress {
  position: absolute;
  z-index: 1;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 4px;
  background-color: rgba(60, 60, 60, 0.5);
  border-radius: 2px;
  overflow: hidden;
}

.video-player .progress .bar {
  height: 4px;
  background-color: #FAC600;
}

.video-player .el-loading-mask {
  background: none;
}

@media screen and (max-height: 900px) {
  .video-player .preview {
    height: 55vh;
  }
}

.subtitle {
  margin: 5px 0 15px 0;
  position: relative;
  border-radius: 4px;
}

.subtitle .subtitle-text {
  color: #444;
  font-size: 16px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-item-align: center;
      align-self: center;
}

.subtitle .spike {
  position: absolute;
  width: 25px;
  height: 15px;
  overflow: hidden;
}

.subtitle .spike:before {
  content: ' ';
  width: 200%;
  height: 400%;
  border-radius: 50%;
  display: block;
  position: relative;
}

.subtitle:not(.double) .subtitle-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.subtitle:not(.double).speaker-1 {
  background-color: #7abff4;
}

.subtitle:not(.double).speaker-1 .spike {
  top: -15px;
  left: 30%;
}

.subtitle:not(.double).speaker-1 .spike:before {
  background-color: #7abff4;
  left: -100%;
}

.subtitle:not(.double).speaker-1 .subtitle-inner {
  padding: 15px 30px;
}

.subtitle:not(.double).speaker-2 {
  background-color: #fff;
}

.subtitle:not(.double).speaker-2 .spike {
  bottom: -15px;
  left: 70%;
}

.subtitle:not(.double).speaker-2 .spike:before {
  background-color: #fff;
  top: -300%;
}

.subtitle:not(.double).speaker-2 .subtitle-text {
  padding-left: 15px;
}

.subtitle:not(.double).speaker-2 .subtitle-inner {
  padding: 15px 30px 15px 15px;
}

.subtitle.double .mic-indicator {
  position: absolute;
  left: 15px;
  top: 50%;
  margin-top: -35px;
  z-index: 1;
}

.subtitle.double .subtitle-text {
  padding: 15px 30px 15px 100px;
  background: #fff;
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.subtitle.double .subtitle-text:before {
  position: absolute;
  bottom: 40px;
  left: 40px;
  content: 'A';
  border: 1px solid #ECA052;
  color: #ECA052;
  border-radius: 50%;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.subtitle.double .subtitle-text + .subtitle-text {
  border-radius: 0 0 4px 4px;
  margin-top: 5px;
}

.subtitle.double .subtitle-text + .subtitle-text:before {
  content: 'B';
  top: 40px;
  bottom: auto;
}

.subtitle.double .spike {
  bottom: -15px;
  left: 70%;
}

.subtitle.double .spike:before {
  background-color: #fff;
  top: -300%;
}

.dialog-review .sentences-list {
  padding: 20px 0;
}

.dialog-review .sentences-list .dialog-sentence {
  position: relative;
}

.dialog-review .sentences-list .dialog-sentence .text {
  padding: 10px 20px;
  min-height: 94px;
  color: #444;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 4px;
}

.dialog-review .sentences-list .dialog-sentence .text.with-actions {
  min-height: 141px;
}

.dialog-review .sentences-list .dialog-sentence .text .no-score {
  color: #ff6666;
}

.dialog-review .sentences-list .dialog-sentence .text .original {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.dialog-review .sentences-list .dialog-sentence .text .original span.reference {
  text-decoration: underline;
  cursor: pointer;
}

.dialog-review .sentences-list .dialog-sentence .text .original span.bad-score {
  color: #ff6666;
}

.dialog-review .sentences-list .dialog-sentence .text .original span.good-score {
  color: #00b900;
}

.dialog-review .sentences-list .dialog-sentence .text .translation {
  font-size: 14px;
  opacity: 0.8;
  direction: rtl;
}

.dialog-review .sentences-list .dialog-sentence .text .translation.disabled {
  opacity: 0.4;
}

.dialog-review .sentences-list .dialog-sentence .text .updated-score {
  text-align: center;
  padding: 10px 0;
  height: 44px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.dialog-review .sentences-list .dialog-sentence.speaker-1 .text {
  margin-left: 56px;
  background-color: #7abff4;
}

.dialog-review .sentences-list .dialog-sentence.speaker-1 .speaker-image {
  left: 0;
}

.dialog-review .sentences-list .dialog-sentence.speaker-1 .spike {
  left: 36px;
}

.dialog-review .sentences-list .dialog-sentence.speaker-1 .spike:before {
  background-color: #7abff4;
}

.dialog-review .sentences-list .dialog-sentence.speaker-2 .text {
  margin-right: 56px;
  background-color: #fff;
}

.dialog-review .sentences-list .dialog-sentence.speaker-2 .speaker-image {
  right: 0;
}

.dialog-review .sentences-list .dialog-sentence.speaker-2 .spike {
  right: 36px;
}

.dialog-review .sentences-list .dialog-sentence.speaker-2 .spike:before {
  background-color: #fff;
  left: -150%;
}

.dialog-review .sentences-list .dialog-sentence .speaker-image {
  width: 48px;
  height: 48px;
  background-color: #2194ed;
  background-image: url(/img/speaker-picture.png);
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
}

.dialog-review .sentences-list .dialog-sentence .spike {
  position: absolute;
  top: 56px;
  width: 20px;
  height: 15px;
  overflow: hidden;
}

.dialog-review .sentences-list .dialog-sentence .spike:before {
  content: ' ';
  width: 250%;
  height: 200%;
  border-radius: 50%;
  display: block;
  position: relative;
  top: -100%;
}

.dialog-review .sentences-list .dialog-sentence .spike.shifted {
  top: 70px;
}

.dialog-review .sentences-list .dialog-sentence > .sentence-result {
  position: absolute;
  top: 48px;
  right: 1px;
}

.dialog-review .sentences-list .dialog-sentence .actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 15px;
}

.dialog-review .sentences-list .dialog-sentence .actions > span {
  margin: 0 10px;
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
}

.dialog-review .sentences-list .dialog-sentence .actions > span .loading-container {
  width: 48px;
  height: 48px;
  position: absolute;
  top: -8px;
  left: -8px;
}

.dialog-review .sentences-list .dialog-sentence .actions > span .loading-container .overlay {
  width: 100%;
  height: 100%;
}

.dialog-review .sentences-list .dialog-sentence .actions > span .loading-container .el-loading-mask {
  background-color: rgba(255, 255, 255, 0.3);
}

.dialog-review .sentences-list .dialog-sentence .actions a {
  opacity: 0.7;
}

.dialog-review .sentences-list .dialog-sentence .actions a:hover {
  opacity: 1;
}

.dialog-review .sentences-list .dialog-sentence .actions .improve-reading-action .icon-retry-speak.ready {
  border-radius: 50%;
  background-color: #FFFF00;
  opacity: 1;
}

.dialog-review .sentences-list .dialog-sentence .actions .play-record-action.playing .icon-replay-audio {
  border-radius: 50%;
  background-color: #FFFF00;
  opacity: 1;
}

.dialog-review .sentences-list .dialog-sentence .toggle-actions {
  position: absolute;
  top: 70px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  background: #2194ed;
  opacity: 0.7;
  cursor: pointer;
}

.dialog-review .sentences-list .dialog-sentence .toggle-actions:hover {
  opacity: 1;
}

.dialog-review .sentences-list .dialog-sentence .toggle-actions:before {
  content: ' ';
  position: relative;
  top: 10px;
  left: 7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #ffffff transparent transparent transparent;
  display: block;
}

.dialog-review .sentences-list .dialog-sentence .toggle-actions.expanded:before {
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #ffffff transparent;
}

.dialog-review .sentences-list .dialog-sentence + .dialog-sentence {
  margin-top: 15px;
}

.titlebar .container .prefix a.select-translation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.titlebar .container .prefix a.select-translation:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.titlebar .container .prefix a.select-translation:hover .flag-icon {
  opacity: 0.7;
}

.vocabulary-dialog {
  width: 400px;
}

.vocabulary-dialog .el-dialog__header {
  padding: 5px 10px;
  border-bottom: 1px solid #2194ed;
}

.vocabulary-dialog .el-dialog__header .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #2194ed;
  font-weight: bold;
  text-align: left;
}

.vocabulary-dialog .el-dialog__header .title > div {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.vocabulary-dialog .el-dialog__body {
  padding: 0;
}

.vocabulary-dialog .el-dialog__body .definition {
  padding: 20px 10px;
  border-bottom: 1px solid #2194ed;
  margin-bottom: 10px;
  position: relative;
}

.vocabulary-dialog .el-dialog__body .definition:before,
.vocabulary-dialog .el-dialog__body .definition:after {
  content: " ";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  left: 50%;
  border-width: 10px 15px 0 15px;
  -webkit-transform: translateX(-15px);
          transform: translateX(-15px);
}

.vocabulary-dialog .el-dialog__body .definition:before {
  z-index: 1;
  bottom: -10px;
  border-color: #6980fe transparent transparent transparent;
}

.vocabulary-dialog .el-dialog__body .definition:after {
  z-index: 2;
  bottom: -9px;
  border-color: #fff transparent transparent transparent;
}

.vocabulary-dialog .el-dialog__body .image {
  padding: 10px 10px 20px 10px;
}

.vocabulary-dialog .el-dialog__body .image img {
  display: block;
  margin: 15px auto 0 auto;
  max-width: 300px;
}

.vocabulary-dialog .el-dialog__body .samples {
  padding: 10px 10px 20px 10px;
  border-top: 1px solid #2194ed;
}

.vocabulary-dialog .el-dialog__body .samples > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
}

.vocabulary-dialog .el-dialog__body .samples > div .text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: inline-block;
  margin-top: 3px;
  margin-left: 10px;
}

.vocabulary-dialog .el-dialog__body .samples > div .text:before,
.vocabulary-dialog .el-dialog__body .samples > div .text:after {
  content: '"';
}

.vocabulary-dialog .el-dialog__body .samples > div + div {
  margin-top: 10px;
}

.vocabulary-dialog .el-dialog__body .samples .audio .text {
  margin-top: 8px;
}

.vocabulary-dialog .el-dialog__body .samples .translation .text {
  margin-top: 3px;
}

.vocabulary-dialog .el-dialog__body .samples .flag-icon {
  outline: 1px solid #eee;
}

.vocabulary-dialog .el-dialog__body .samples .speaker {
  width: 32px;
  height: 32px;
  position: relative;
}

.vocabulary-dialog .el-dialog__body .samples .speaker a {
  opacity: 0.7;
}

.vocabulary-dialog .el-dialog__body .samples .speaker a:hover {
  opacity: 1;
}

.vocabulary-dialog .el-dialog__body .samples .speaker .loading-container {
  width: 48px;
  height: 48px;
  position: absolute;
  top: -8px;
  left: -8px;
}

.vocabulary-dialog .el-dialog__body .samples .speaker .loading-container .overlay {
  width: 100%;
  height: 100%;
}

.vocabulary-dialog .el-dialog__body .samples .speaker .loading-container .el-loading-mask {
  background-color: rgba(255, 255, 255, 0.3);
}

.vocabulary-dialog .el-dialog__body .samples .speaker.playing .icon-sound {
  border-radius: 50%;
  background-color: #FFFF00;
  opacity: 1;
}

.vocabulary-dialog .el-dialog__body .definition + .samples {
  border-top: 0;
}

.vocabulary-dialog .el-dialog__footer {
  padding: 10px;
  text-align: center;
}

.vocabulary-dialog .el-dialog__footer button {
  width: 100%;
  text-transform: uppercase;
  font-weight: bold;
}

.unit-reading-container {
  height: 100%;
}

.unit-reading-container > .el-loading-mask {
  background: none;
}

.unit-reading-container > .el-loading-mask .el-loading-spinner {
  width: 200px;
  left: 50%;
  margin-left: -110px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
}

.unit-reading-container > .el-loading-mask .el-loading-spinner .el-loading-text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-item-align: center;
      align-self: center;
}

.unit-reading-container .video-player-wrapper {
  position: relative;
  padding: 15px 0;
}

.unit-reading-container .video-player-wrapper .sentence-result {
  position: absolute;
  bottom: 30px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.unit-reading-container .video-player-wrapper {
  position: relative;
  padding: 15px 0;
}

.unit-reading-container .video-player-wrapper .sentence-result {
  position: absolute;
  bottom: 30px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.unit-reading-container .review {
  background-color: #dededf;
  padding: 15px 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.unit-reading-container .word-score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.unit-reading-container .actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.unit-reading-container .actions > span {
  margin: 0 10px;
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
}

.unit-reading-container .actions > span .loading-container {
  width: 48px;
  height: 48px;
  position: absolute;
  top: -8px;
  left: -8px;
}

.unit-reading-container .actions > span .loading-container .overlay {
  width: 100%;
  height: 100%;
}

.unit-reading-container .actions > span .loading-container .el-loading-mask {
  background-color: rgba(255, 255, 255, 0.3);
}

.unit-reading-container .actions a {
  opacity: 0.7;
}

.unit-reading-container .actions a:hover {
  opacity: 1;
}

.unit-reading-container .actions .improve-reading-action .icon-retry-speak.ready {
  border-radius: 50%;
  background-color: #ffff00;
  opacity: 1;
}

.unit-reading-container .actions .play-record-action.playing .icon-replay-audio {
  border-radius: 50%;
  background-color: #ffff00;
  opacity: 1;
}

.unit-reading-container {
  height: 100%;
}

.unit-reading-container > .el-loading-mask {
  background: none;
}

.unit-reading-container > .el-loading-mask .el-loading-spinner {
  width: 200px;
  left: 50%;
  margin-left: -110px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
}

.unit-reading-container > .el-loading-mask .el-loading-spinner .el-loading-text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-item-align: center;
      align-self: center;
}

.unit-reading-container .video-player-wrapper {
  position: relative;
  padding: 15px 0;
}

.unit-reading-container .video-player-wrapper .sentence-result {
  position: absolute;
  bottom: 30px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.unit-reading-container .speech-guide-wrapper {
  width: 100%;
  height: 210px;
  border: none;
}

.unit-reading-container iframe {
  border: none !important;
}

.unit-reading-container iframe > body {
  border: none !important;
}

.unit-reading-container iframe .body-all {
  border: none !important;
}

.unit-reading-container iframe > body {
  background-color: black;
}

.unit-reading-container .preview {
  margin: 15px auto;
  width: 100%;
  height: 540px;
  background-size: cover;
  background-position: center;
}

.unit-reading-container .preview .overlay {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.unit-reading-container .preview .overlay .v-play-false {
  -ms-flex-item-align: center;
      align-self: center;
  margin: 0 auto;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/icons-set-48.png);
  background-size: 48px 192px;
}

.unit-reading-container .preview .overlay .v-play-true {
  -ms-flex-item-align: center;
      align-self: center;
  margin: 0 auto;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/stop_icon.png);
  background-size: 48px 48px;
}

.unit-reading-container .speeching-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.unit-reading-container .speeching-actions > span {
  margin: 0 10px;
  position: relative;
  width: 51px;
  height: 51px;
  display: inline-block;
}

.unit-reading-container .speeching-actions > span .loading-container {
  width: 51px;
  height: 51px;
  position: absolute;
  top: 0px;
  left: 0px;
}

.unit-reading-container .speeching-actions > span .loading-container .overlay {
  width: 100%;
  height: 100%;
}

.unit-reading-container .speeching-actions > span .loading-container .el-loading-mask {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 100%;
}

.unit-reading-container .speeching-actions > span .icon-replay-video {
  opacity: 0.9;
  width: 51px;
  height: 51px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/play_movie_icon.png);
  background-size: 51px 51px;
}

.unit-reading-container .speeching-actions > span .icon-retry-speak {
  opacity: 1;
  width: 51px;
  height: 51px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/microphone_icon.png);
  background-size: 51px 51px;
}

.unit-reading-container .speeching-actions > span .icon-stop-speak {
  opacity: 1;
  width: 51px;
  height: 51px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/stop_icon.png);
  background-size: 51px 51px;
  cursor: pointer;
}

.unit-reading-container .speeching-actions > span .icon-replay-audio {
  opacity: 0.9;
  width: 51px;
  height: 51px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/play_icon.png);
  background-size: 51px 51px;
}

.unit-reading-container .speeching-actions a {
  opacity: 0.1;
}

.unit-reading-container .speeching-actions a:hover {
  opacity: 1;
}

.gudence-speech-play {
  margin: auto;
  cursor: pointer;
}

.mic-text {
  margin-top: -14px;
  margin-bottom: 12px;
}

.unit-pronounciation-container {
  height: 100%;
  overflow: hidden;
}

.unit-pronounciation-container .video-player-wrapper {
  padding: 20px 0;
}

.retry-dialog .el-dialog__body {
  padding: 10px;
}

.retry-dialog .options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.retry-dialog .options .el-button {
  margin: 0;
  -webkit-transition-property: background;
  transition-property: background;
}

.retry-dialog .options .el-button + .el-button {
  margin-top: 10px;
}

.retry-dialog .tips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.retry-dialog .tips ol {
  margin: 0 0 20px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style-position: inside;
  padding: 0;
  text-align: center;
}

.retry-dialog .tips ol li + li {
  margin-top: 10px;
}

.retry-dialog .tips .el-button {
  -webkit-transition-property: background;
  transition-property: background;
}

.unit-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.unit-summary .total-score {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.unit-summary .high-score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 22px;
}

.unit-summary .high-score .sentence-result {
  margin-left: 15px;
}

.unit-summary .actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 50px 0 80px 0;
}

.unit-summary .actions button {
  width: 200px;
  margin: 0;
  font-size: 22px;
}

.unit-summary .actions button + button {
  margin-top: 15px;
}

.unit-summary .actions .can-be-improved {
  display: inline-block;
  background: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #444;
  font-size: 14px;
  vertical-align: middle;
  line-height: 16px;
}

.unit-quiz-container {
  height: 100%;
}

.unit-quiz-container .quiz-start {
  padding-bottom: 150px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.unit-quiz-container .quiz-start .quiz-logo {
  width: 180px;
  height: 180px;
  background-image: url(/img/quiz-logo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 40px;
}

.unit-quiz-container .quiz-start button {
  width: 200px;
}

.unit-quiz-container .paused-screen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.unit-quiz-container .paused-screen .quiz-logo {
  width: 72px;
  height: 72px;
  background-image: url(/img/quiz-pause.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.unit-quiz-container .paused-screen .text {
  padding: 20px;
  font-size: 22px;
  text-transform: uppercase;
}

.unit-quiz-container .paused-screen button {
  width: 200px;
  margin: 15px 0 0 0;
}

.unit-quiz-container .quiz-question .text {
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 10px;
}

.unit-quiz-container .quiz-question .answers .answer {
  padding: 20px 10px 20px 52px;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
          box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
  margin-top: 10px;
  position: relative;
  cursor: pointer;
}

.unit-quiz-container .quiz-question .answers .answer span {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -16px;
  width: 32px;
  height: 32px;
  border: 1px solid #fff;
  background-color: #2194ed;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.unit-quiz-container .quiz-question .answers .answer.pending span {
  background-image: none;
}

.unit-quiz-container .quiz-question .answers .answer.correct span,
.unit-quiz-container .quiz-question .answers .answer.incorrect span {
  text-indent: -1000px;
  background-color: transparent;
}

.unit-quiz-container .quiz-question .answers .answer.correct {
  background-color: #00cc67;
}

.unit-quiz-container .quiz-question .answers .answer.correct span {
  background-position: 0 -480px;
}

.unit-quiz-container .quiz-question .answers .answer.incorrect {
  background-color: #ff6138;
}

.unit-quiz-container .quiz-question .answers .answer.incorrect span {
  background-position: 0 -512px;
}

.unit-quiz-container .quiz-progress {
  position: relative;
  width: 100%;
  height: 80px;
}

.unit-quiz-container .quiz-progress .line {
  position: absolute;
  z-index: 2;
  border: 2px solid #fff;
  border-right-color: #2194ed;
  top: 32px;
  left: 0;
  right: 36px;
  bottom: 32px;
  border-radius: 8px 0 0 8px;
  background-color: #2194ed;
  padding: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.unit-quiz-container .quiz-progress .line .dot {
  width: 10%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.unit-quiz-container .quiz-progress .line .dot span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.unit-quiz-container .quiz-progress .line .dot.correct span {
  background-color: #00cc67;
  border-color: #00cc67;
}

.unit-quiz-container .quiz-progress .line .dot.incorrect span {
  background-color: #ff6138;
  border-color: #ff6138;
}

.unit-quiz-container .quiz-progress .line .dot .current {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  width: 32px;
  height: 32px;
  border: 4px solid #FFCF19;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
  background-color: #2194ed;
}

.unit-quiz-container .quiz-progress .line .dot .current .wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.unit-quiz-container .quiz-progress .line .dot .current .wrap svg {
  position: absolute;
  top: -4px;
  left: -4px;
}

.unit-quiz-container .quiz-progress .cap {
  border: 2px solid #fff;
  position: absolute;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 50%;
  right: 0;
  margin-top: -20px;
  background-color: #2194ed;
}

.unit-quiz-container .quiz-progress .cap span {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  margin-top: -6px;
  margin-left: -6px;
}

.unit-quiz-container .quiz-completed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.unit-quiz-container .quiz-completed .congrats {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.unit-quiz-container .quiz-completed .congrats .text {
  font-size: 28px;
  margin-top: 30px;
}

.unit-quiz-container .quiz-completed .actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 50px 0 80px 0;
}

.unit-quiz-container .quiz-completed .actions button {
  width: 200px;
  margin: 0;
  font-size: 22px;
}

.unit-quiz-container .quiz-completed .actions button + button {
  margin-top: 15px;
}

.unit-result-container .result-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #fff;
}

.unit-result-container .result-body .stars {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background-color: #7abff4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.unit-result-container .result-body .stars .stars-wrap {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.unit-result-container .result-body .stars .stars-wrap .stars {
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  -webkit-animation-name: elastic-scale;
          animation-name: elastic-scale;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

.unit-result-container .result-body .stars .congrats {
  text-align: center;
  padding: 50px;
  font-size: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.unit-result-container .result-body .title {
  text-align: center;
  color: #2194ed;
  font-size: 28px;
  padding: 70px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.unit-result-container .result-body .title .icon-check {
  background-color: #2194ed;
  border-radius: 50%;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background-position: -2px -485px;
  margin-right: 10px;
}

.unit-result-container .result-body .next {
  margin: 0 10px 10px 10px;
  background-color: #2194ed;
  height: 100px;
  display: block;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.unit-result-container .result-body .next .label {
  text-align: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: 28px;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.el-dialog.choose-part-dialog .role-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.el-dialog.choose-part-dialog .el-button {
  margin: 0;
  position: relative;
  width: 168px;
  padding-top: 130px;
}

.el-dialog.choose-part-dialog .el-button .icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 2px 2px 0 0;
}

.el-dialog.choose-part-dialog .el-button + .el-button {
  margin: 0;
}

.el-dialog.countdown-dialog {
  background-color: #2194ed;
}

.el-dialog.countdown-dialog .el-dialog__header {
  display: none;
}

.el-dialog.countdown-dialog .counter {
  font-size: 22px;
  color: #fff;
  padding-top: 5px;
}

.el-dialog.countdown-dialog .counter .text {
  opacity: 0.75;
}

.el-dialog.countdown-dialog .counter .number {
  font-size: 28px;
}

.ready-double {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}

.ready-double .logo {
  width: 180px;
  height: 180px;
  background: url(/img/2x-logo.png) no-repeat center;
  background-size: contain;
  margin-bottom: 30px;
}

.ready-double .text {
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.ready-double .a-or-b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ready-double .a-or-b .a,
.ready-double .a-or-b .b {
  display: inline-block;
  position: relative;
  width: 75px;
  height: 75px;
  text-align: center;
  padding-top: 14px;
  font-size: 32px;
}

.ready-double .a-or-b .a:before,
.ready-double .a-or-b .b:before {
  background: url(/img/2x-bubble.png) no-repeat center;
  background-size: contain;
  width: 75px;
  height: 75px;
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ready-double .a-or-b .b:before {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.ready-double .a-or-b .or {
  font-size: 16px;
  padding: 22px 20px;
  text-transform: uppercase;
}

.ready-double .indicator {
  width: 100px;
  height: 100px;
  background: url(/img/2x-indicator.png) no-repeat center;
  background-size: contain;
  margin-bottom: 30px;
}

.ready-double .el-button {
  width: 250px;
  text-transform: uppercase;
}

.unit-word-container .activities {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -16px 0 -6px;
  padding: 0 1px;
}

.unit-word-container .activities .activity {
  border-radius: 13px;
  -webkit-box-shadow: 2px 2px 4px black;
          box-shadow: 2px 2px 4px black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 170px;
  height: 66px;
  margin: 5px 6px;
  padding: 5px;
  background-color: #e9e9e0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: black;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.unit-word-container .activities .activity .number {
  font-size: 22px;
  display: inline-block;
  margin: 0 0 3px 8px;
}

.unit-word-container .activities .activity .body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
}

.unit-word-container .activities .activity .icon-2x {
  margin-right: 5px;
}

.unit-word-container .activities .activity.quiz {
  width: 716px;
}

.unit-word-container .activities .activity.quiz .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.unit-word-container .activities .activity.quiz .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-right: 34px;
  margin-top: 5px;
}

.unit-word-container .activities .activity.locked.reading {
  background-color: rgba(255, 255, 255, 0.5);
}

.unit-word-container .activities .activity.locked.reading .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.unit-word-container .activities .activity.locked.reading .icon-32 {
  margin-left: 45px;
  -ms-flex-item-align: center;
      align-self: center;
}

.unit-word-container .activities .activity.locked.speech {
  background-color: rgba(255, 255, 255, 0.5);
}

.unit-word-container .activities .activity.locked.speech .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.unit-word-container .activities .activity.locked.speech .icon-32 {
  margin-left: 45px;
  -ms-flex-item-align: center;
      align-self: center;
}

.unit-word-container .activities .activity.locked.quiz {
  background-color: rgba(255, 255, 255, 0.5);
}

.unit-word-container .activities .activity.completed.quiz {
  background-color: #00e4cc;
}

.unit-word-container .activities .activity.completed.quiz .qiuz-passed {
  width: 60px;
  height: 48px;
  background: url(/img/quiz-passed.png) no-repeat center center;
  background-size: 60px 48px;
}

.unit-word-container .w-50 {
  width: 50%;
}

.unit-word-container .review {
  background-color: #dededf;
  padding: 15px 0;
}

.unit-word-container .word-score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.unit-word-container .actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.unit-word-container .actions > span {
  margin: 0 10px;
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
}

.unit-word-container .actions > span .loading-container {
  width: 48px;
  height: 48px;
  position: absolute;
  top: -8px;
  left: -8px;
}

.unit-word-container .actions > span .loading-container .overlay {
  width: 100%;
  height: 100%;
}

.unit-word-container .actions > span .loading-container .el-loading-mask {
  background-color: rgba(255, 255, 255, 0.3);
}

.unit-word-container .actions a {
  opacity: 0.7;
}

.unit-word-container .actions a:hover {
  opacity: 1;
}

.unit-word-container .actions .improve-reading-action .icon-retry-speak.ready {
  border-radius: 50%;
  background-color: #ffff00;
  opacity: 1;
}

.unit-word-container .actions .play-record-action.playing .icon-replay-audio {
  border-radius: 50%;
  background-color: #ffff00;
  opacity: 1;
}

@media screen and (max-height: 900px) {
  .unit-word-container .preview {
    height: 55vh;
  }
}

.about-component.container {
  padding: 60px 0 20px 0;
}

.about-component.container .about-text {
  border: 1px solid #fff;
  padding: 0 20px;
}

.about-component.container .about-text .about-text-inner {
  padding: 30px 0;
}

.about-component.container .about-text .about-text-inner p + p {
  margin-top: 15px;
}

.about-component.container .about-text .about-text-inner .footer {
  font-size: 14px;
}

.about-component.container .about-text .about-text-inner .logo {
  background-image: url(/img/logo.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 64px 64px;
  padding: 74px 0 15px 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 22px;
}

.about-component.container .about-text .about-text-inner hr {
  border: none;
  border-top: 1px solid #fff;
}

.about-component.container .about-text .about-text-inner .logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  background: #fff;
}

.about-component.container .about-text .about-text-inner .logos img {
  max-width: 45%;
}

.about-component.container .about-text .about-text-inner ul {
  list-style: none;
}

.about-component.container .about-text .about-text-inner ul li {
  position: relative;
}

.about-component.container .about-text .about-text-inner ul li:before {
  display: block;
  position: absolute;
  content: ' ';
}

.about-component.container .about-text .about-text-inner ul li + li {
  margin-top: 10px;
}

.about-component.container .about-text .about-text-inner ul.dashes li:before {
  width: 10px;
  border-top: 1px solid #fff;
  top: 9px;
  left: -18px;
}

.about-component.container .about-text .about-text-inner ul.circles li:before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #CD8F12;
  top: 4px;
  left: -18px;
}

.profile-container .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #fff;
}

.profile-container .wrapper .header {
  min-height: 40%;
  background-color: #7abff4;
}

.profile-container .wrapper .header .avatar {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(/img/profile-picture.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 30px auto 0 auto;
}

.profile-container .wrapper .header .username {
  text-align: center;
}

.profile-container .wrapper .body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.profile-container .wrapper .body .scores {
  width: 350px;
  margin: 0 auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: streth;
      -ms-flex-pack: streth;
          justify-content: streth;
}

.profile-container .wrapper .body .scores > div {
  width: 33%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 0 5px 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profile-container .wrapper .body .scores > div > div {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 28px;
}

.profile-container .wrapper .body .scores > div > small {
  font-size: 14px;
}

.profile-container .wrapper .body .scores .sentences {
  background-color: #5095E8;
  background-image: url(/img/my-progress-speaking.png);
}

.profile-container .wrapper .body .scores .quiz {
  background-color: #B37EE3;
  background-image: url(/img/my-progress-quiz.png);
}

.profile-container .wrapper .body .scores .coverage {
  background-color: #5BCF9F;
  background-image: url(/img/my-progress-coverage.png);
}

.profile-container .wrapper .footer {
  padding: 70px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.profile-container .wrapper .footer .el-button {
  position: relative;
  width: 40%;
  height: 34px;
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
}

.profile-container .wrapper .footer .el-button .flag-icon {
  position: absolute;
  top: 0px;
  right: 0px;
  border-radius: 0 2px 2px 0;
}

.ar-player {
  width: 51px;
  height: 51px;
  border: 0;
  border-radius: 100%;
  margin: 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: unset;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
}

.ar-player__play {
  width: 51px;
  height: 51px;
  background-repeat: no-repeat;
  background-image: url(/img/play_icon.png);
  background-size: 51px 51px;
}

.ar-player__play--active {
  background-image: url(/img/pause_icon.png);
}

.ar-player__play--active:hover {
  fill: #505050 !important;
}

.ar-recorder__duration {
  position: absolute;
  color: black;
  margin-top: 18px;
  cursor: pointer;
}

.audio-btn-disabled {
  opacity: 0.6 !important;
}

.audio-recorer-wrpper {
  position: absolute;
  width: 100%;
  top: 545px;
}

.select-translation-dialog .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.select-translation-dialog .wrapper .head {
  height: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #7abff4;
}

.select-translation-dialog .wrapper .body {
  height: 75%;
}

.select-translation-dialog .wrapper .body .options-list {
  padding: 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.select-translation-dialog .wrapper .body .options-list .option {
  margin-bottom: 20px;
  width: 45%;
}

.select-translation-dialog .wrapper .body .options-list .option .el-button {
  position: relative;
  width: 100%;
  height: 32px;
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
}

.select-translation-dialog .wrapper .body .options-list .option .el-button .flag-icon {
  position: absolute;
  border-radius: 0 2px 2px 0;
  top: 0px;
  right: -1px;
  height: 100%;
}

.select-translation-dialog .wrapper .body .options-list .option .el-button:focus-visible {
  border: solid 2px #5daf34 !important;
}

.select-translation-dialog .wrapper .body .options-list .option .el-button:focus-visible .flag-icon {
  right: -3px;
}

.progress-meter.size-normal,
.unit-progress {
  width: 78px;
  height: 78px;
  overflow: hidden;
  background-repeat: no-repeat;
}

.progress-meter.size-normal .inner,
.unit-progress .inner {
  width: 78px;
  height: 78px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.progress-meter.size-normal .inner span,
.unit-progress .inner span {
  self-align: center;
  font-size: 14px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
}

.progress-meter.size-large {
  width: 96px;
  height: 96px;
  overflow: hidden;
  background-repeat: no-repeat;
}

.progress-meter.size-large .inner {
  width: 96px;
  height: 96px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.progress-meter.size-large .inner span {
  self-align: center;
  font-size: 22px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
}

.progress-meter.size-normal {
  background-image: url(/img/progress-meter.png);
  background-size: 78px 1950px;
}

.unit-progress {
  background-image: url(/img/unit-progress.png);
  background-size: 78px 858px;
}

.progress-meter.size-large {
  background-image: url(/img/progress-meter-large.png);
  background-size: 96px 2400px;
}

.progress-meter.size-normal.v-0 {
  background-position: 0 -1872px;
}

.progress-meter.size-normal.v-1 {
  background-position: 0 -1794px;
}

.progress-meter.size-normal.v-2 {
  background-position: 0 -1716px;
}

.progress-meter.size-normal.v-3 {
  background-position: 0 -1638px;
}

.progress-meter.size-normal.v-4 {
  background-position: 0 -1560px;
}

.progress-meter.size-normal.v-5 {
  background-position: 0 -1482px;
}

.progress-meter.size-normal.v-6 {
  background-position: 0 -1404px;
}

.progress-meter.size-normal.v-7 {
  background-position: 0 -1326px;
}

.progress-meter.size-normal.v-8 {
  background-position: 0 -1248px;
}

.progress-meter.size-normal.v-9 {
  background-position: 0 -1170px;
}

.progress-meter.size-normal.v-10 {
  background-position: 0 -1092px;
}

.progress-meter.size-normal.v-11 {
  background-position: 0 -1014px;
}

.progress-meter.size-normal.v-12 {
  background-position: 0 -936px;
}

.progress-meter.size-normal.v-13 {
  background-position: 0 -858px;
}

.progress-meter.size-normal.v-14 {
  background-position: 0 -780px;
}

.progress-meter.size-normal.v-15 {
  background-position: 0 -702px;
}

.progress-meter.size-normal.v-16 {
  background-position: 0 -624px;
}

.progress-meter.size-normal.v-17 {
  background-position: 0 -546px;
}

.progress-meter.size-normal.v-18 {
  background-position: 0 -468px;
}

.progress-meter.size-normal.v-19 {
  background-position: 0 -390px;
}

.progress-meter.size-normal.v-20 {
  background-position: 0 -312px;
}

.progress-meter.size-normal.v-21 {
  background-position: 0 -234px;
}

.progress-meter.size-normal.v-22 {
  background-position: 0 -156px;
}

.progress-meter.size-normal.v-23 {
  background-position: 0 -78px;
}

.progress-meter.size-normal.v-24 {
  background-position: 0 -0px;
}

.unit-progress.v-0 {
  background-position: 0 -780px;
}

.unit-progress.v-1 {
  background-position: 0 -702px;
}

.unit-progress.v-2 {
  background-position: 0 -624px;
}

.unit-progress.v-3 {
  background-position: 0 -546px;
}

.unit-progress.v-4 {
  background-position: 0 -468px;
}

.unit-progress.v-5 {
  background-position: 0 -390px;
}

.unit-progress.v-6 {
  background-position: 0 -312px;
}

.unit-progress.v-7 {
  background-position: 0 -234px;
}

.unit-progress.v-8 {
  background-position: 0 -156px;
}

.unit-progress.v-9 {
  background-position: 0 -78px;
}

.unit-progress.v-10 {
  background-position: 0 -0px;
}

.progress-meter.size-large.v-0 {
  background-position: 0 -2304px;
}

.progress-meter.size-large.v-1 {
  background-position: 0 -2208px;
}

.progress-meter.size-large.v-2 {
  background-position: 0 -2112px;
}

.progress-meter.size-large.v-3 {
  background-position: 0 -2016px;
}

.progress-meter.size-large.v-4 {
  background-position: 0 -1920px;
}

.progress-meter.size-large.v-5 {
  background-position: 0 -1824px;
}

.progress-meter.size-large.v-6 {
  background-position: 0 -1728px;
}

.progress-meter.size-large.v-7 {
  background-position: 0 -1632px;
}

.progress-meter.size-large.v-8 {
  background-position: 0 -1536px;
}

.progress-meter.size-large.v-9 {
  background-position: 0 -1440px;
}

.progress-meter.size-large.v-10 {
  background-position: 0 -1344px;
}

.progress-meter.size-large.v-11 {
  background-position: 0 -1248px;
}

.progress-meter.size-large.v-12 {
  background-position: 0 -1152px;
}

.progress-meter.size-large.v-13 {
  background-position: 0 -1056px;
}

.progress-meter.size-large.v-14 {
  background-position: 0 -960px;
}

.progress-meter.size-large.v-15 {
  background-position: 0 -864px;
}

.progress-meter.size-large.v-16 {
  background-position: 0 -768px;
}

.progress-meter.size-large.v-17 {
  background-position: 0 -672px;
}

.progress-meter.size-large.v-18 {
  background-position: 0 -576px;
}

.progress-meter.size-large.v-19 {
  background-position: 0 -480px;
}

.progress-meter.size-large.v-20 {
  background-position: 0 -384px;
}

.progress-meter.size-large.v-21 {
  background-position: 0 -288px;
}

.progress-meter.size-large.v-22 {
  background-position: 0 -192px;
}

.progress-meter.size-large.v-23 {
  background-position: 0 -96px;
}

.progress-meter.size-large.v-24 {
  background-position: 0 -0px;
}

.flat-unit-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flat-unit-progress .bars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.flat-unit-progress .bars > div {
  height: 12px;
  width: 20px;
  background-color: #2194ed;
  margin: 0 2px;
  opacity: 0.5;
}

.flat-unit-progress .bars > div.filled {
  opacity: 1;
}

.flat-unit-progress .numbers {
  margin-left: 10px;
  color: #2194ed;
}

.titlebar {
  padding-left: 300px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
}

@media (max-width: 1024px) {
  .titlebar {
    padding-left: 0 !important;
  }
}

.titlebar .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #2194ed;
  padding: 5px;
  width: 720px;
}

.titlebar .container .title {
  text-align: center;
  text-transform: uppercase;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.titlebar .container .prefix,
.titlebar .container .postfix {
  min-width: 32px;
  text-align: center;
}

.titlebar .container .prefix a,
.titlebar .container .postfix a {
  display: block;
  height: 32px;
  cursor: pointer;
}

.titlebar .container .prefix a.text-link,
.titlebar .container .postfix a.text-link {
  text-decoration: none;
  line-height: 32px;
  padding: 0 10px;
}

.titlebar .container .prefix a.text-link .icon-32,
.titlebar .container .postfix a.text-link .icon-32 {
  vertical-align: middle;
}

.titlebar .container .prefix a.text-link:hover,
.titlebar .container .postfix a.text-link:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.titlebar .container .prefix a.text-link.icon-right,
.titlebar .container .postfix a.text-link.icon-right {
  padding-right: 0;
}

.titlebar .container .prefix a.text-link.icon-left,
.titlebar .container .postfix a.text-link.icon-left {
  padding-left: 0;
}

.titlebar .container .btn-set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.titlebar .container .btn-set a + a {
  margin-left: 5px;
}

.difficulty {
  position: relative;
  background-position: 0 -352px;
}

.difficulty .level-1 {
  background-position: 0 -544px;
}

.difficulty .level-2 {
  background-position: 0 -512px;
}

.difficulty .level-3 {
  background-position: 0 -480px;
}

.difficulty .level-4 {
  background-position: 0 -448px;
}

.difficulty .level-5 {
  background-position: 0 -416px;
}

.difficulty .level-6 {
  background-position: 0 -384px;
}

.difficulty .arrow-1-0 {
  background-position: 0 -320px;
}

.difficulty .arrow-1-5 {
  background-position: 0 -288px;
}

.difficulty .arrow-2-0 {
  background-position: 0 -256px;
}

.difficulty .arrow-2-5 {
  background-position: 0 -224px;
}

.difficulty .arrow-3-0 {
  background-position: 0 -192px;
}

.difficulty .arrow-3-5 {
  background-position: 0 -160px;
}

.difficulty .arrow-4-0 {
  background-position: 0 -128px;
}

.difficulty .arrow-4-5 {
  background-position: 0 -96px;
}

.difficulty .arrow-5-0 {
  background-position: 0 -64px;
}

.difficulty .arrow-5-5 {
  background-position: 0 -32px;
}

.difficulty .arrow-6-0 {
  background-position: 0 -0px;
}

.difficulty > div {
  position: absolute;
  top: 0;
  left: 0;
}

.difficulty,
.difficulty > div {
  width: 49px;
  height: 32px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/img/difficulty.png);
  background-size: 49px 576px;
}

.stars span {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
}

.stars.size-normal span {
  width: 91px;
  height: 24px;
  background-image: url(/img/stars.png);
  background-size: 91px 96px;
}

.stars.size-normal span.v-0 {
  background-position: 0 -72px;
}

.stars.size-normal span.v-1 {
  background-position: 0 -48px;
}

.stars.size-normal span.v-2 {
  background-position: 0 -24px;
}

.stars.size-normal span.v-3 {
  background-position: 0 -0px;
}

.stars.size-tiny span {
  width: 46px;
  height: 12px;
  background-size: 46px 48px;
  background-image: url(/img/stars-tiny.png);
}

.stars.size-tiny span.v-0 {
  background-position: 0 -36px;
}

.stars.size-tiny span.v-1 {
  background-position: 0 -24px;
}

.stars.size-tiny span.v-2 {
  background-position: 0 -12px;
}

.stars.size-tiny span.v-3 {
  background-position: 0 -0px;
}

.stars.size-large span {
  width: 122px;
  height: 32px;
  background-image: url(/img/stars-large.png);
  background-size: 122px 128px;
}

.stars.size-large span.v-0 {
  background-position: 0 -96px;
}

.stars.size-large span.v-1 {
  background-position: 0 -64px;
}

.stars.size-large span.v-2 {
  background-position: 0 -32px;
}

.stars.size-large span.v-3 {
  background-position: 0 -0px;
}

.stars.size-larger span {
  width: 165px;
  height: 44px;
  background-image: url(/img/stars-larger.png);
  background-size: 165px 176px;
}

.stars.size-larger span.v-0 {
  background-position: 0 -132px;
}

.stars.size-larger span.v-1 {
  background-position: 0 -88px;
}

.stars.size-larger span.v-2 {
  background-position: 0 -44px;
}

.stars.size-larger span.v-3 {
  background-position: 0 -0px;
}

.stars.size-largest span {
  width: 175px;
  height: 65px;
  background-image: url(/img/stars-largest.png);
  background-size: 175px 260px;
}

.stars.size-largest span.v-0 {
  background-position: 0 -195px;
}

.stars.size-largest span.v-1 {
  background-position: 0 -130px;
}

.stars.size-largest span.v-2 {
  background-position: 0 -65px;
}

.stars.size-largest span.v-3 {
  background-position: 0 -0px;
}

.check-container span {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  margin-left: 34px;
}

.check-container span.v-checked {
  background-image: url(/img/img-check.png);
  width: 26px;
  height: 26px;
  background-size: 26px 26px;
}

.check-container span.v-unchecked {
  width: 26px;
  height: 31px;
  background-size: 26px 31px;
}

.vue-scrollbar__wrapper {
  margin: 0 -15px -15px 0;
  padding: 0 15px 15px 0;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.vue-scrollbar-transition,
.vue-scrollbar__scrollbar-vertical,
.vue-scrollbar__scrollbar-horizontal {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.vue-scrollbar-transition--scrollbar {
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
}

.vue-scrollbar__scrollbar-vertical,
.vue-scrollbar__scrollbar-horizontal {
  opacity: 0.5;
  position: absolute;
  background: transparent;
}

.vue-scrollbar__wrapper:hover .vue-scrollbar__scrollbar-vertical,
.vue-scrollbar__wrapper:hover .vue-scrollbar__scrollbar-horizontal {
  opacity: 1;
}

.vue-scrollbar__scrollbar-vertical:hover,
.vue-scrollbar__scrollbar-horizontal:hover {
  background: rgba(255, 255, 255, 0.5);
}

.vue-scrollbar__scrollbar-vertical .scrollbar,
.vue-scrollbar__scrollbar-horizontal .scrollbar {
  position: relative;
  background: #fff;
  cursor: default;
}

.vue-scrollbar__scrollbar-vertical {
  width: 2px;
  height: 100%;
  top: 0;
  right: 2px;
}

.vue-scrollbar__scrollbar-vertical .scrollbar {
  width: 4px;
  border-radius: 2px;
  margin-left: -1px;
  margin-right: -1px;
}

.vue-scrollbar__scrollbar-horizontal {
  height: 2px;
  width: 100%;
  bottom: 2px;
  right: 0;
}

.vue-scrollbar__scrollbar-horizontal .scrollbar {
  height: 4px;
  border-radius: 2px;
  margin-top: -1px;
  margin-bottom: -1px;
}

.mic-indicator {
  overflow: hidden;
  background-repeat: no-repeat;
  border-radius: 50%;
  cursor: pointer;
}

.mic-indicator.default {
  width: 64px;
  height: 64px;
  background-size: 64px 2304px;
  border: 3px solid #2194ed;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  background-image: url(/img/mic-levels.png);
  background-color: #2194ed;
}

.mic-indicator.frame {
  width: 48px;
  height: 48px;
  background-size: 48px 1728px;
  background-image: url(/img/mic-levels-frame.png);
}

.mic-indicator.default.v-0 {
  background-position: 0 -2240px;
}

.mic-indicator.frame.v-0 {
  background-position: 0 -1680px;
}

.mic-indicator.default.v-1 {
  background-position: 0 -2176px;
}

.mic-indicator.frame.v-1 {
  background-position: 0 -1632px;
}

.mic-indicator.default.v-2 {
  background-position: 0 -2112px;
}

.mic-indicator.frame.v-2 {
  background-position: 0 -1584px;
}

.mic-indicator.default.v-3 {
  background-position: 0 -2048px;
}

.mic-indicator.frame.v-3 {
  background-position: 0 -1536px;
}

.mic-indicator.default.v-4 {
  background-position: 0 -1984px;
}

.mic-indicator.frame.v-4 {
  background-position: 0 -1488px;
}

.mic-indicator.default.v-5 {
  background-position: 0 -1920px;
}

.mic-indicator.frame.v-5 {
  background-position: 0 -1440px;
}

.mic-indicator.default.v-6 {
  background-position: 0 -1856px;
}

.mic-indicator.frame.v-6 {
  background-position: 0 -1392px;
}

.mic-indicator.default.v-7 {
  background-position: 0 -1792px;
}

.mic-indicator.frame.v-7 {
  background-position: 0 -1344px;
}

.mic-indicator.default.v-8 {
  background-position: 0 -1728px;
}

.mic-indicator.frame.v-8 {
  background-position: 0 -1296px;
}

.mic-indicator.default.v-9 {
  background-position: 0 -1664px;
}

.mic-indicator.frame.v-9 {
  background-position: 0 -1248px;
}

.mic-indicator.default.v-10 {
  background-position: 0 -1600px;
}

.mic-indicator.frame.v-10 {
  background-position: 0 -1200px;
}

.mic-indicator.default.v-11 {
  background-position: 0 -1536px;
}

.mic-indicator.frame.v-11 {
  background-position: 0 -1152px;
}

.mic-indicator.default.v-12 {
  background-position: 0 -1472px;
}

.mic-indicator.frame.v-12 {
  background-position: 0 -1104px;
}

.mic-indicator.default.v-13 {
  background-position: 0 -1408px;
}

.mic-indicator.frame.v-13 {
  background-position: 0 -1056px;
}

.mic-indicator.default.v-14 {
  background-position: 0 -1344px;
}

.mic-indicator.frame.v-14 {
  background-position: 0 -1008px;
}

.mic-indicator.default.v-15 {
  background-position: 0 -1280px;
}

.mic-indicator.frame.v-15 {
  background-position: 0 -960px;
}

.mic-indicator.default.v-16 {
  background-position: 0 -1216px;
}

.mic-indicator.frame.v-16 {
  background-position: 0 -912px;
}

.mic-indicator.default.v-17 {
  background-position: 0 -1152px;
}

.mic-indicator.frame.v-17 {
  background-position: 0 -864px;
}

.mic-indicator.default.v-18 {
  background-position: 0 -1088px;
}

.mic-indicator.frame.v-18 {
  background-position: 0 -816px;
}

.mic-indicator.default.v-19 {
  background-position: 0 -1024px;
}

.mic-indicator.frame.v-19 {
  background-position: 0 -768px;
}

.mic-indicator.default.v-20 {
  background-position: 0 -960px;
}

.mic-indicator.frame.v-20 {
  background-position: 0 -720px;
}

.mic-indicator.default.v-21 {
  background-position: 0 -896px;
}

.mic-indicator.frame.v-21 {
  background-position: 0 -672px;
}

.mic-indicator.default.v-22 {
  background-position: 0 -832px;
}

.mic-indicator.frame.v-22 {
  background-position: 0 -624px;
}

.mic-indicator.default.v-23 {
  background-position: 0 -768px;
}

.mic-indicator.frame.v-23 {
  background-position: 0 -576px;
}

.mic-indicator.default.v-24 {
  background-position: 0 -704px;
}

.mic-indicator.frame.v-24 {
  background-position: 0 -528px;
}

.mic-indicator.default.v-25 {
  background-position: 0 -640px;
}

.mic-indicator.frame.v-25 {
  background-position: 0 -480px;
}

.mic-indicator.default.v-26 {
  background-position: 0 -576px;
}

.mic-indicator.frame.v-26 {
  background-position: 0 -432px;
}

.mic-indicator.default.v-27 {
  background-position: 0 -512px;
}

.mic-indicator.frame.v-27 {
  background-position: 0 -384px;
}

.mic-indicator.default.v-28 {
  background-position: 0 -448px;
}

.mic-indicator.frame.v-28 {
  background-position: 0 -336px;
}

.mic-indicator.default.v-29 {
  background-position: 0 -384px;
}

.mic-indicator.frame.v-29 {
  background-position: 0 -288px;
}

.mic-indicator.default.v-30 {
  background-position: 0 -320px;
}

.mic-indicator.frame.v-30 {
  background-position: 0 -240px;
}

.mic-indicator.default.v-31 {
  background-position: 0 -256px;
}

.mic-indicator.frame.v-31 {
  background-position: 0 -192px;
}

.mic-indicator.default.v-32 {
  background-position: 0 -192px;
}

.mic-indicator.frame.v-32 {
  background-position: 0 -144px;
}

.mic-indicator.default.v-33 {
  background-position: 0 -128px;
}

.mic-indicator.frame.v-33 {
  background-position: 0 -96px;
}

.mic-indicator.default.v-34 {
  background-position: 0 -64px;
}

.mic-indicator.frame.v-34 {
  background-position: 0 -48px;
}

.mic-indicator.default.v-35 {
  background-position: 0 -0px;
}

.mic-indicator.frame.v-35 {
  background-position: 0 -0px;
}

.flag-icon {
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.flag-icon.size-small {
  width: 24px;
  height: 16px;
}

.flag-icon.size-normal {
  width: 32px;
  height: 21px;
}

.flag-icon.size-large {
  width: 48px;
  height: 32px;
}

.legend {
  color: black;
  /*width: 280px;*/
  position: absolute;
  top: 65px;
  left: calc(50% + 8px);
  margin-left: 380px;
  background: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  padding: 1em;
  border-radius: 3px;
}

.legend .legend-color {
  text-transform: uppercase;
  font-weight: bold;
}

.legend .legend-color.legend-color-red {
  color: #ff6666;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

.legend .legend-color.legend-color-black {
  color: black;
}

.legend .legend-color.legend-color-green {
  color: #00b900;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

.legend div {
  display: table;
}

.legend div > div {
  display: table-row;
}

.legend div > div > div:not(.stars) {
  display: table-cell;
  padding: 0 1em 0 0;
}

/* BEM support Func
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

/* Break-points
 -------------------------- */

/* Scrollbar
 -------------------------- */

/* Placeholder
 -------------------------- */

/* BEM
 -------------------------- */

/* Element Chalk Variables */

/* Transition
-------------------------- */

/* Color
-------------------------- */

/* 53a8ff */

/* 66b1ff */

/* 79bbff */

/* 8cc5ff */

/* a0cfff */

/* b3d8ff */

/* c6e2ff */

/* d9ecff */

/* ecf5ff */

/* Link
-------------------------- */

/* Border
-------------------------- */

/* Fill
-------------------------- */

/* Typography
-------------------------- */

/* Size
-------------------------- */

/* z-index
-------------------------- */

/* Disable base
-------------------------- */

/* Icon
-------------------------- */

/* Checkbox
-------------------------- */

/* Radio
-------------------------- */

/* Select
-------------------------- */

/* Alert
-------------------------- */

/* MessageBox
-------------------------- */

/* Message
-------------------------- */

/* Notification
-------------------------- */

/* Input
-------------------------- */

/* Cascader
-------------------------- */

/* Group
-------------------------- */

/* Tab
-------------------------- */

/* Button
-------------------------- */

/* cascader
-------------------------- */

/* Switch
-------------------------- */

/* Dialog
-------------------------- */

/* Table
-------------------------- */

/* Pagination
-------------------------- */

/* Popup
-------------------------- */

/* Popover
-------------------------- */

/* Tooltip
-------------------------- */

/* Tag
-------------------------- */

/* Tree
-------------------------- */

/* Dropdown
-------------------------- */

/* Badge
-------------------------- */

/* Card
--------------------------*/

/* Slider
--------------------------*/

/* Steps
--------------------------*/

/* Menu
--------------------------*/

/* Rate
--------------------------*/

/* DatePicker
--------------------------*/

/* Loading
--------------------------*/

/* Scrollbar
--------------------------*/

/* Carousel
--------------------------*/

/* Collapse
--------------------------*/

/* Transfer
--------------------------*/

/* Header
  --------------------------*/

/* Footer
--------------------------*/

/* Main
--------------------------*/

/* Timeline
--------------------------*/

/* Backtop
--------------------------*/

/* Link
--------------------------*/

/* Calendar
--------------------------*/

/* Form
-------------------------- */

/* Avatar
--------------------------*/

/* Empty
-------------------------- */

/* Descriptions
-------------------------- */

/* Skeleton 
--------------------------*/

/* Svg
--------------- */

/* Result
-------------------------- */

/* Break-point
--------------------------*/

.el-tooltip:focus:not(.focusing),
.el-tooltip:focus:hover {
  outline-width: 0;
}

.el-tooltip__popper {
  position: absolute;
  border-radius: 4px;
  padding: 10px;
  z-index: 2000;
  font-size: 12px;
  line-height: 1.2;
  min-width: 10px;
  word-wrap: break-word;
}

.el-tooltip__popper .popper__arrow,
.el-tooltip__popper .popper__arrow::after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.el-tooltip__popper .popper__arrow {
  border-width: 6px;
}

.el-tooltip__popper .popper__arrow::after {
  content: " ";
  border-width: 5px;
}

.el-tooltip__popper[x-placement^="top"] {
  margin-bottom: 12px;
}

.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  bottom: -6px;
  border-top-color: #303133;
  border-bottom-width: 0;
}

.el-tooltip__popper[x-placement^="top"] .popper__arrow::after {
  bottom: 1px;
  margin-left: -5px;
  border-top-color: #303133;
  border-bottom-width: 0;
}

.el-tooltip__popper[x-placement^="bottom"] {
  margin-top: 12px;
}

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
  top: -6px;
  border-top-width: 0;
  border-bottom-color: #303133;
}

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after {
  top: 1px;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #303133;
}

.el-tooltip__popper[x-placement^="right"] {
  margin-left: 12px;
}

.el-tooltip__popper[x-placement^="right"] .popper__arrow {
  left: -6px;
  border-right-color: #303133;
  border-left-width: 0;
}

.el-tooltip__popper[x-placement^="right"] .popper__arrow::after {
  bottom: -5px;
  left: 1px;
  border-right-color: #303133;
  border-left-width: 0;
}

.el-tooltip__popper[x-placement^="left"] {
  margin-right: 12px;
}

.el-tooltip__popper[x-placement^="left"] .popper__arrow {
  right: -6px;
  border-right-width: 0;
  border-left-color: #303133;
}

.el-tooltip__popper[x-placement^="left"] .popper__arrow::after {
  right: 1px;
  bottom: -5px;
  margin-left: -5px;
  border-right-width: 0;
  border-left-color: #303133;
}

.el-tooltip__popper.is-dark {
  background: #303133;
  color: #FFFFFF;
}

.el-tooltip__popper.is-light {
  background: #FFFFFF;
  border: 1px solid #303133;
}

.el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow {
  border-top-color: #303133;
}

.el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow::after {
  border-top-color: #FFFFFF;
}

.el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #303133;
}

.el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #FFFFFF;
}

.el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow {
  border-left-color: #303133;
}

.el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow::after {
  border-left-color: #FFFFFF;
}

.el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow {
  border-right-color: #303133;
}

.el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow::after {
  border-right-color: #FFFFFF;
}