@keyframes zoomModalIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomModalOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
.c-zoom-modal-in {
  animation-name: zoomModalIn;
  animation-duration: 0.15s;
  animation-timing-function: linear;
}
.c-zoom-modal-out {
  animation-name: zoomModalOut;
  animation-duration: 0.15s;
  animation-timing-function: linear;
}
.tools-common-loading {
  background: rgba(0, 0, 0, 0.78);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  outline: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}
.tools-common-loading.active {
  display: flex;
}
.tools-common-loading div {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 2px;
  background: #fff;
}
.tools-common-loading div img {
  width: 40%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/*!
 * Bootstrap Colorpicker v2.5.2
 * https://itsjavi.com/bootstrap-colorpicker/
 *
 * Originally written by (c) 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 *
 */
.colorpicker-saturation {
  width: 100px;
  height: 100px;
  background-image: url("data:image/png;base64,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");
  cursor: crosshair;
  float: left;
}
.colorpicker-saturation i {
  display: block;
  height: 5px;
  width: 5px;
  border: 1px solid #000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  margin: -4px 0 0 -4px;
}
.colorpicker-saturation i b {
  display: block;
  height: 5px;
  width: 5px;
  border: 1px solid #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.colorpicker-hue,
.colorpicker-alpha {
  width: 15px;
  height: 100px;
  float: left;
  cursor: row-resize;
  margin-left: 4px;
  margin-bottom: 4px;
}
.colorpicker-hue i,
.colorpicker-alpha i {
  display: block;
  height: 1px;
  background: #000;
  border-top: 1px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: -1px;
}
.colorpicker-hue {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEXqFBb/ABH/ACL/ADH/AEH/AFD/AGD/AG7/AH7/AI3/AJ3/AKz/ALz/AMr/ANv/AOr/APr2AP/mAP/XAP/HAP+4AP+oAP+aAP+JAP97AP9rAP9cAP9MAP8+AP8tAP8fAP8PAP8BAv8AEP8AH/8AL/8APv8ATv8AXP8Abf8Ae/8Ai/8Amv8Aqv8AuP8Ayf8A1/8A5/8A9/8A//gA/+kA/9kA/8oA/7oA/6wA/5sA/40A/30A/24A/14A/1AA/z8A/zEA/yEA/xEB/wMN/wAd/wAs/wA8/wBK/wBb/wBp/wB5/wCI/wCY/wCm/wC3/wDF/wDV/wDk/wD1/wD/+gD/7AD/3AD/zAD/vgD/rQD/nwD/jgD/gAD/cAD/YgD/UQD/QwD/MgD/JAD/FAD4Eg42qAedAAAAh0lEQVR4XgXAg3EDAAAAwI9to7Zt27a1/w49BASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTS1tHXo1KVbj159+g0YNGTYiFFjxk2YNGXajFlz5i1YtGTZilVr1m3YtGXbjl179h04dOTYiVNnzl24dOXajVt37j149OTZi1dv3n349OXbj19//wOxE1dQ8reGAAAAAElFTkSuQmCC");
}
.colorpicker-alpha {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAQAAAAVxWkcAAABr0lEQVR4Xo2VwU0DQQxF7dmRuNIFlzlSAR3QAaXQQdIBJVABFXDcOVAAd67cjJLR07dkhcSrkZKfb/t7bG88rFo3B5gZPMNycItu2xloGV7MWHzM9zuzFWCkmA0nK6AszCUJDW6+mG6R03ncw5v8EMTEvZ2O3AliYjpslblc0RF9LmZYWxURU6aKytWZYsoWCAe+xwOZp1GsEukGiIkYxcQCHck99+gRgB7JncyIB5SGEhP3Yh5P6JwX+u6AnYot104d8DJT7uH7M9JH6OZbimj0vfMVaYnJIZFJDBW9kHlerL2C6JV4mSt7uuo2N57RxnZ+usQjn0R1jwBJBrNO3evJpVYUWsJ/E3UiXRlv24/7YZ04xmEdWlzcKS+B/eapeyMvFd2k0+hRk/T0AmTW8h69s2sjYMsdPntECiILhAeIMZAeH4QvUwfn6ijC0tTV+fT9ky8jM9nK2g7Ly1VjSpKYq6IvsAm7MtNu1orEqa/K3KNvgMFdhfquPfJmp2dbh0/8Gzb6Y22ViaNr6n5410zXdngVhbu6XqdOtWOuin5hjABGp4a2uotZ71MVCfwDBt2/v37yo6AAAAAASUVORK5CYII=");
  display: none;
}
.colorpicker-saturation,
.colorpicker-hue,
.colorpicker-alpha {
  background-size: contain;
}
.colorpicker {
  padding: 4px;
  min-width: 130px;
  margin-top: 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  z-index: 2500;
}
.colorpicker:before,
.colorpicker:after {
  display: table;
  content: "";
  line-height: 0;
}
.colorpicker:after {
  clear: both;
}
.colorpicker:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
  left: 6px;
}
.colorpicker:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  position: absolute;
  top: -6px;
  left: 7px;
}
.colorpicker div {
  position: relative;
}
.colorpicker.colorpicker-with-alpha {
  min-width: 140px;
}
.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
  display: block;
}
.colorpicker-color {
  height: 10px;
  margin-top: 5px;
  clear: both;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAQAAAAVxWkcAAABr0lEQVR4Xo2VwU0DQQxF7dmRuNIFlzlSAR3QAaXQQdIBJVABFXDcOVAAd67cjJLR07dkhcSrkZKfb/t7bG88rFo3B5gZPMNycItu2xloGV7MWHzM9zuzFWCkmA0nK6AszCUJDW6+mG6R03ncw5v8EMTEvZ2O3AliYjpslblc0RF9LmZYWxURU6aKytWZYsoWCAe+xwOZp1GsEukGiIkYxcQCHck99+gRgB7JncyIB5SGEhP3Yh5P6JwX+u6AnYot104d8DJT7uH7M9JH6OZbimj0vfMVaYnJIZFJDBW9kHlerL2C6JV4mSt7uuo2N57RxnZ+usQjn0R1jwBJBrNO3evJpVYUWsJ/E3UiXRlv24/7YZ04xmEdWlzcKS+B/eapeyMvFd2k0+hRk/T0AmTW8h69s2sjYMsdPntECiILhAeIMZAeH4QvUwfn6ijC0tTV+fT9ky8jM9nK2g7Ly1VjSpKYq6IvsAm7MtNu1orEqa/K3KNvgMFdhfquPfJmp2dbh0/8Gzb6Y22ViaNr6n5410zXdngVhbu6XqdOtWOuin5hjABGp4a2uotZ71MVCfwDBt2/v37yo6AAAAAASUVORK5CYII=");
  background-position: 0 100%;
}
.colorpicker-color div {
  height: 10px;
}
.colorpicker-selectors {
  display: none;
  height: 10px;
  margin-top: 5px;
  clear: both;
}
.colorpicker-selectors i {
  cursor: pointer;
  float: left;
  height: 10px;
  width: 10px;
}
.colorpicker-selectors i + i {
  margin-left: 3px;
}
.colorpicker-element .input-group-addon i,
.colorpicker-element .add-on i {
  display: inline-block;
  cursor: pointer;
  height: 16px;
  vertical-align: text-top;
  width: 16px;
}
.colorpicker.colorpicker-inline {
  position: relative;
  display: inline-block;
  float: none;
  z-index: auto;
}
.colorpicker.colorpicker-horizontal {
  width: 110px;
  min-width: 110px;
  height: auto;
}
.colorpicker.colorpicker-horizontal .colorpicker-saturation {
  margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-color {
  width: 100px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue,
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
  width: 100px;
  height: 15px;
  float: left;
  cursor: col-resize;
  margin-left: 0px;
  margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue i,
.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
  display: block;
  height: 15px;
  background: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  border: none;
  margin-top: 0px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAABLFBMVEXqFBb/ABH/ACL/ADH/AEH/AFD/AGD/AG7/AH7/AI3/AJ3/AKz/ALz/AMr/ANv/AOr/APr2AP/mAP/XAP/HAP+4AP+oAP+aAP+JAP97AP9rAP9cAP9MAP8+AP8tAP8fAP8PAP8BAv8AEP8AH/8AL/8APv8ATv8AXP8Abf8Ae/8Ai/8Amv8Aqv8AuP8Ayf8A1/8A5/8A9/8A//gA/+kA/9kA/8oA/7oA/6wA/5sA/40A/30A/24A/14A/1AA/z8A/zEA/yEA/xEB/wMN/wAd/wAs/wA8/wBK/wBb/wBp/wB5/wCI/wCY/wCm/wC3/wDF/wDV/wDk/wD1/wD/+gD/7AD/3AD/zAD/vgD/rQD/nwD/jgD/gAD/cAD/YgD/UQD/QwD/MgD/JAD/FAD4Eg42qAedAAAAbUlEQVR4XgXAghEDsbxtlrZt27ax/w49ACAYQTGcICmaYTleECVZUTXdMC1Wm93hdLk9Xp8/EAyFI9FYPJFMpTPZXL5QLJUr1Vq90Wy1O91efzAcjSfT2XyxXK03293+cDydL9fb/fF8vT/f3x+LfRNXARMbCAAAAABJRU5ErkJggg==");
}
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAKCAQAAADoFTP1AAAB9ElEQVR4XoWTQW4VMRBEu9qWEimL7DhEMp8NF+ASnJJLcAQgE1bcgBUSkYKUuHCrZ9pjeqSU5Yn9LPu7umJQBIIv+k7vIOrtK66L4lmr3pVOrOv3otp619KZ0/KjdNI79L52Uo09FBQWrU0vfe5trezU+hLsoUKd3Repovte+0vbq/7Lj5XbaHECKasR9G4MPlbp+gzZxd6koPEJCkAYC5SjcOTAIIOK90Dja1IfIZ8Z+zAY9jm3b5Ia+MT5sFcqRJrR2AYYA8Kua5BzYRrFPNmD4PQMegGJMOffJJUsWiI3nCHZZjInNdffLWOufzbc3JaboCAVxwmnRHbhLSPwRJ4wU0BRSc6HkECYYVw95nMKgJOcylxrJttE5Ibzf9Xq9GPvP+WX3MiV/MGHfRu/SentRQrfG1GzsIrytdNXucSRKxQNIGHM9YhGFQJcdjNcBZvfJayuYe4Sia1CzwW+19mWOhe37HsxJWKwbu/jluEU15QzAQjAqCEbhMJc78GYV2E0kooHDubUImWkTOhGpgv8PoT8DJG/bzxna4BZ0eOFSOaLADGeSpFsg5AzeaDZIDQQXjZ4y/8ryfzUXBwdELRjTjCNvOeT0rNlrJz90vwy6N9pXXQEluX0inElpPWokSdiLCfiNJJjMKQ8Qsh8GEKQKMo/eiHrNbI9UksAAAAASUVORK5CYII=");
}
.colorpicker-right:before {
  left: auto;
  right: 6px;
}
.colorpicker-right:after {
  left: auto;
  right: 7px;
}
.colorpicker-no-arrow:before {
  border-right: 0;
  border-left: 0;
}
.colorpicker-no-arrow:after {
  border-right: 0;
  border-left: 0;
}
.colorpicker.colorpicker-visible,
.colorpicker-alpha.colorpicker-visible,
.colorpicker-saturation.colorpicker-visible,
.colorpicker-hue.colorpicker-visible,
.colorpicker-selectors.colorpicker-visible {
  display: block;
}
.colorpicker.colorpicker-hidden,
.colorpicker-alpha.colorpicker-hidden,
.colorpicker-saturation.colorpicker-hidden,
.colorpicker-hue.colorpicker-hidden,
.colorpicker-selectors.colorpicker-hidden {
  display: none;
}
.colorpicker-inline.colorpicker-visible {
  display: inline-block;
}
/*# sourceMappingURL=bootstrap-colorpicker.css.map */
@-moz-keyframes rotateCloseHover {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(90deg);
  }
}
.vue-component * {
  user-select: none;
  margin: 0;
  padding: 0;
}
.vue-component .btn {
  padding: 0 40px;
  height: 36px;
  background: #FF446B;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 36px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.vue-component .btn:hover,
.vue-component .btn.outstanding:hover {
  background: #e6375c;
  color: #FFFFFF;
}
.vue-component .btn.outstanding {
  padding: 0 75px;
  height: 46px;
  background: #FF446B;
  line-height: 46px;
  font-size: 17px;
  border-radius: 26px;
  font-weight: 500;
}
.vue-component .btn.isFreeUsers {
  height: 64px;
  background: #FF446B;
  border-radius: 32px;
  padding: 0;
}
.vue-component .btn.isFreeUsers div:first-child {
  font-size: 21px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 24px;
}
.vue-component .btn.isFreeUsers div:last-child {
  font-size: 13px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 15px;
}
.vue-component .btn.unimpressive {
  background: #EEEEF3;
  color: #08091D;
  font-weight: 500;
}
.vue-component .btn.unimpressive:hover {
  background: #dfdfe4;
}
.vue-component .btn.default {
  height: 46px;
  line-height: 46px;
  font-size: 17px;
  background-color: #FFFFFF;
  border-radius: 26px;
  border: 1px solid #E8E8E8;
  color: rgba(37, 40, 44, 0.7);
}
.vue-component .btn.default:hover {
  background-color: #E7E7E7;
  color: #25282c;
  border: 1px solid #E7E7E7;
}
.vue-component .options-select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: max-content;
  height: 38px;
  border: 1px solid #FFFFFF;
  padding: 0 16px;
  background: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.vue-component .options-select .icon {
  margin-right: 16px;
}
.vue-component .options-select .icon path {
  transition: all 0.3s;
}
.vue-component .options-select span {
  height: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #08091D;
  line-height: 16px;
  transition: all 0.3s;
}
.vue-component .options-select:hover span {
  color: #FF446B;
}
.vue-component .options-select:hover .icon path {
  fill: #FF446B;
}
.vue-component .options-select.active {
  border: 1px solid #FF446B;
}
.vue-component .options-select.active span {
  color: #FF446B;
}
.vue-component .options-select.active .icon path {
  fill: #FF446B;
}
.vue-component .dropdown {
  position: relative;
  width: max-content;
}
.vue-component .dropdown .dropdown-target {
  cursor: pointer;
}
.vue-component .dropdown .dropdown-content {
  position: absolute;
  top: calc(100% + 2px);
  z-index: 9;
}
.vue-component .selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0;
  width: 270px;
  height: 36px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #FFFFFF;
  cursor: pointer;
}
.vue-component .selector span {
  height: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #08091D;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.3s;
}
.vue-component .selector:hover span {
  color: #FF446B;
}
.vue-component .selector-list {
  padding: 10px 0;
  background: #FFFFFF;
  box-shadow: 0px 2px 8px 0px rgba(153, 156, 159, 0.2);
  border-radius: 4px;
}
.vue-component .selector-list > div {
  width: 270px;
  height: 36px;
  padding: 0 14px;
  background: #FFFFFF;
  transition: all 0.3s;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  color: #08091D;
  line-height: 36px;
}
.vue-component .selector-list > div:hover {
  background: #EDEFF2;
}
.vue-component .slider {
  display: flex;
  align-items: center;
  width: 150px;
  padding: 0 5px;
  height: 4px;
  cursor: pointer;
}
.vue-component .slider .slider-background {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.vue-component .slider .slider-background .slider-selection {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #FF446B;
}
.vue-component .slider .slider-background .slider-handle {
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border: 1px solid #F8F8F8;
  border-radius: 50%;
  cursor: pointer;
}
.vue-component .slider.slider-vertical {
  flex-direction: column;
  padding: 5px 0;
  width: 4px;
  height: 150px;
}
.vue-component .slider.slider-vertical .slider-background {
  height: 100%;
  width: 2px;
}
.vue-component .slider.slider-vertical .slider-background .slider-selection {
  top: auto;
  bottom: 0;
  width: 100%;
}
.vue-component .slider.slider-vertical .slider-background .slider-handle {
  position: absolute;
  top: auto;
  left: -4px;
  width: 10px;
  height: 10px;
}
.vue-component .color-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}
.vue-component .color-picker {
  padding: 15px;
  display: block;
  width: max-content;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
  background-color: #FFFFFF;
  border-radius: 2px;
}
.vue-component .color-picker .colorpicker {
  padding: 0;
  margin: 0;
}
.vue-component .color-picker .colorpicker .colorpicker-saturation {
  width: 170px;
  height: 109px;
  background-size: cover;
  overflow: hidden;
}
.vue-component .color-picker .colorpicker .colorpicker-saturation i {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.3);
  margin: -8px 0 0 -8px !important;
}
.vue-component .color-picker .colorpicker .colorpicker-saturation i b {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.vue-component .color-picker .colorpicker .colorpicker-hue {
  width: 18px !important;
  height: 109px !important;
  margin: 0 0 0 6px;
}
.vue-component .color-picker .colorpicker .colorpicker-hue i {
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 2px 0;
  border-radius: 1px;
  width: 16px;
  height: 6px;
  margin-left: 1px;
  margin-top: -2px;
}
.vue-component .color-picker .color-picker-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 26px;
  margin-top: 11px;
}
.vue-component .color-picker .color-picker-bottom .color-preview {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 8px;
}
.vue-component .color-picker .color-picker-bottom input {
  display: block;
  width: 68px;
  height: 26px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25em;
  outline: none;
  transition: all 0.3s;
  text-transform: uppercase;
  text-align: center;
}
.vue-component .color-panel {
  position: absolute;
  width: 234px;
  padding: 20px 10px 5px 20px;
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}
.vue-component .color-panel > label {
  display: block;
  height: 16px;
  margin-bottom: 10px;
  font-size: 14px;
  font-family: Roboto-Regular, Roboto;
  font-weight: 400;
  color: #344750;
  line-height: 16px;
}
.vue-component .color-panel .color-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.vue-component .color-panel .color-list .color-btn,
.vue-component .color-panel .color-list .add-btn {
  width: 24px;
  height: 24px;
  margin: 0 10px 12px 0;
  cursor: pointer;
}
.vue-component .color-panel .color-list .color-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.vue-component .color-panel .color-picker {
  position: absolute;
  top: 60px;
  left: 40px;
}
.vue-component .modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(8, 9, 29, 0.85);
  z-index: 99999;
}
.vue-component .modal.active {
  display: flex;
}
.vue-component .modal .modal-body {
  position: relative;
  width: 476px;
  padding: 32px 34px 24px;
  background: #FFFFFF;
  border-radius: 2px;
}
.vue-component .modal .modal-body .close {
  position: absolute;
  right: -33px;
  top: -29px;
  cursor: pointer;
  background: hsla(0, 0%, 100%, 0.15);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  -webkit-transition: all 0.3s !important;
  -moz-transition: all 0.3s !important;
  -o-transition: all 0.3s !important;
  transition: all 0.3s !important;
  opacity: 1;
}
.vue-component .modal .modal-body .close svg {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
.vue-component .modal .modal-body .close svg g {
  transition: all 0.3s;
  fill: #fff;
}
.vue-component .modal .modal-body .close:hover {
  background: hsla(0, 0%, 100%, 0.3);
  animation: rotateCloseHover 0.3s;
  -moz-animation: rotateCloseHover 0.3s;
  -webkit-animation: rotateCloseHover 0.3s;
  -o-animation: rotateCloseHover 0.3s;
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
  opacity: 1;
}
.vue-component .modal .modal-body .close:hover svg g {
  fill: #fff;
}
.vue-component .modal .modal-body .title {
  text-align: left;
  font-size: 21px;
  font-weight: bold;
  color: #08091D;
  line-height: 26px;
  margin-bottom: 18px;
}
.vue-component .modal .modal-body .body {
  font-size: 15px;
  font-weight: 400;
  color: #08091D;
  line-height: 24px;
  margin-bottom: 30px;
}
.vue-component .modal .modal-body .footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/*# sourceMappingURL=common-component.css.map */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 1260px;
}
body main {
  background: #f2f4f7;
}
#at-share-dock {
  display: none !important;
}
.vue-component {
  position: absolute;
  width: 100%;
  background: #f2f4f7;
}
.vue-component .step-common-style .head {
  position: relative;
  height: 30px;
}
.vue-component .step-common-style .head .goBack {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  cursor: pointer;
}
.vue-component .step-common-style .head .goBack svg g g {
  transition: all 0.3s;
}
.vue-component .step-common-style .head .goBack span {
  margin-left: 3px;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.vue-component .step-common-style .head .goBack:hover svg g g {
  fill: #e6375c;
}
.vue-component .step-common-style .head .goBack:hover span {
  opacity: 1;
}
.vue-component .step-common-style .head h1 {
  height: 30px;
  font-size: 26px;
  font-weight: 500;
  color: #08091D;
  line-height: 30px;
  text-align: center;
}
.vue-component .scene-select-item {
  width: 290px;
}
.vue-component .scene-select-item .button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 240px;
  padding: 37px 0 32px;
  background: #FFFFFF;
  box-shadow: 0px 2px 8px 0px rgba(228, 231, 237, 0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}
.vue-component .scene-select-item .button div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 117px;
}
.vue-component .scene-select-item .button span {
  height: 20px;
  font-size: 17px;
  font-weight: 500;
  color: #08091D;
  line-height: 20px;
}
.vue-component .scene-select-item:hover .button {
  border: 1px solid #DEE0E3;
}
.vue-component .scene-select-item.active .button {
  border: 1px solid #FF446B;
}
.vue-component .step-scene-select {
  display: none;
  height: auto;
  padding-bottom: 70px;
  padding-top: 206px;
}
.vue-component .step-scene-select.active {
  display: block;
}
.vue-component .step-scene-select h1.title {
  height: 35px;
  font-size: 30px;
  font-weight: 500;
  color: #08091D;
  line-height: 35px;
  text-align: center;
}
.vue-component .step-scene-select .options {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 950px;
  margin: 55px auto 47px;
}
.vue-component .step-scene-select > .button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vue-component .step-options {
  display: none;
  padding: 140px 70px 70px;
  height: auto;
}
.vue-component .step-options.active {
  display: block;
}
.vue-component .step-options .head {
  position: relative;
  height: 30px;
}
.vue-component .step-options .head .goBack {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  cursor: pointer;
}
.vue-component .step-options .head .goBack svg g g {
  transition: all 0.3s;
}
.vue-component .step-options .head .goBack span {
  margin-left: 3px;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.vue-component .step-options .head .goBack:hover svg g g {
  fill: #e6375c;
}
.vue-component .step-options .head .goBack:hover span {
  opacity: 1;
}
.vue-component .step-options .head h1 {
  height: 30px;
  font-size: 26px;
  font-weight: 500;
  color: #08091D;
  line-height: 30px;
  text-align: center;
}
.vue-component .step-options .body {
  margin: 22px auto 0;
  max-width: 1280px;
  display: flex;
  justify-content: center;
}
.vue-component .step-options .body .canvas-editor {
  margin-right: 33px;
}
.vue-component .step-options .body .options {
  width: max-content;
}
.vue-component .step-options .body .options h2 {
  height: 20px;
  width: max-content;
  margin-bottom: 11px;
  font-size: 17px;
  font-weight: bold;
  color: #08091D;
  line-height: 20px;
  text-align: left;
}
.vue-component .step-options .body .options .options-select {
  margin-bottom: 6px;
}
.vue-component .step-options .body .options .options-select .icon svg {
  display: block;
}
.vue-component .step-options .body .options .access {
  width: 270px;
  padding: 16px 16px 16px;
  margin-bottom: 15px;
  background: #E8EAEF;
  border-radius: 4px;
  border: 1px solid #D6D8DD;
  overflow: hidden;
  transition: all 0.3s;
}
.vue-component .step-options .body .options .access .microphone-access .access-desc {
  font-size: 13px;
  font-weight: 500;
  color: #08091D;
  line-height: 17px;
  margin-bottom: 12px;
}
.vue-component .step-options .body .options .access .microphone-access .access-tip {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vue-component .step-options .body .options .access .microphone-access .access-tip svg {
  margin-right: 11px;
}
.vue-component .step-options .body .options .access .microphone-access .access-tip svg path {
  fill: #FF446B;
  transition: all 0.3s;
}
.vue-component .step-options .body .options .access .microphone-access .access-tip span {
  height: 15px;
  font-size: 13px;
  font-weight: 400;
  color: #FF446B;
  line-height: 15px;
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.3s;
}
.vue-component .step-options .body .options .access .microphone-access .access-tip:hover svg path {
  fill: #e6375c;
}
.vue-component .step-options .body .options .access .microphone-access .access-tip:hover span {
  color: #e6375c;
}
.vue-component .step-options .body .options .access .system-access {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vue-component .step-options .body .options .access .system-access .icon {
  width: 24px;
  height: 24px;
  margin-right: 13px;
}
.vue-component .step-options .body .options .access .system-access p {
  font-size: 13px;
  font-weight: 500;
  color: #08091D;
  line-height: 17px;
}
.vue-component .step-options .body .options label {
  display: block;
  height: 16px;
  margin: 15px 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: #08091D;
  line-height: 16px;
  text-align: left;
  opacity: 0.5;
}
.vue-component .step-options .body .options .btn {
  display: block;
  width: 270px;
  margin: 34px auto 14px;
}
.vue-component .step-options .body .options .other-settings {
  margin-top: 21px;
}
.vue-component .step-options .body .options .other-settings h2 {
  margin-top: 34px;
}
.vue-component .step-options .body .options .other-settings .show-more-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  height: 32px;
  width: max-content;
}
.vue-component .step-options .body .options .other-settings .show-more-btn span {
  height: 16px;
  margin-right: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #08091D;
  line-height: 16px;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.vue-component .step-options .body .options .other-settings .show-more-btn svg {
  transition: all 0.3s;
}
.vue-component .step-options .body .options .other-settings .show-more-btn:hover span {
  opacity: 1;
}
.vue-component .step-options .body .options .other-settings.hidden .settings {
  display: none;
}
.vue-component .step-options .body .options .other-settings.hidden .less-text {
  display: none;
}
.vue-component .step-options .body .options .other-settings.shown .show-more-btn .more-text {
  display: none;
}
.vue-component .step-options .body .options .other-settings.shown .show-more-btn svg {
  transform: rotate(180deg);
}
.vue-component .step-options .body .options .tips {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  max-width: 270px;
}
.vue-component .step-options .body .options .isFreeUsersTips span:nth-child(1),
.vue-component .step-options .body .options .isFreeUsersTips span:nth-child(3) {
  font-size: 14px;
  font-weight: 400;
  color: rgba(8, 9, 29, 0.5);
  line-height: 16px;
  opacity: 0.5;
  text-align: center;
  max-width: 270px;
}
.vue-component .step-options .body .options .isFreeUsersTips span:nth-child(2) {
  font-size: 15px;
  font-weight: 400;
  color: #ff446b;
  line-height: 18px;
  border-bottom: 1px solid;
  cursor: pointer;
}
.vue-component .step-recording {
  display: none;
  padding: 140px 70px 70px;
  height: auto;
}
.vue-component .step-recording.active {
  display: block;
}
.vue-component .step-recording .head {
  position: relative;
  height: 30px;
}
.vue-component .step-recording .head .goBack {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  cursor: pointer;
}
.vue-component .step-recording .head .goBack svg g g {
  transition: all 0.3s;
}
.vue-component .step-recording .head .goBack span {
  margin-left: 3px;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.vue-component .step-recording .head .goBack:hover svg g g {
  fill: #e6375c;
}
.vue-component .step-recording .head .goBack:hover span {
  opacity: 1;
}
.vue-component .step-recording .head h1 {
  height: 30px;
  font-size: 26px;
  font-weight: 500;
  color: #08091D;
  line-height: 30px;
  text-align: center;
}
.vue-component .step-recording .body {
  margin: 79px auto 0;
  width: 566px;
  height: 266px;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}
.vue-component .step-recording .body .stop-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  margin: 44px auto 16px;
  border-radius: 35px;
  border: 2px solid #F53332;
  cursor: pointer;
  transition: all 0.3s;
}
.vue-component .step-recording .body .stop-btn svg g {
  transition: all 0.3s;
}
.vue-component .step-recording .body .stop-btn:hover {
  border-color: #E62423;
}
.vue-component .step-recording .body .stop-btn:hover svg g {
  fill: #E62423;
}
.vue-component .step-recording .body .stop-btn:hover .tooltip {
  opacity: 1;
}
.vue-component .step-recording .body .stop-btn .tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -40px;
  height: 28px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
  padding: 0 8px;
  width: max-content;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.vue-component .step-recording .body .stop-btn .tooltip div {
  position: absolute;
  bottom: -15px;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 10px solid rgba(0, 0, 0, 0);
  border-top: 10px solid rgba(0, 0, 0, 0.9);
  transform: translateX(-50%);
}
.vue-component .step-recording .body .stop-btn .tooltip span {
  color: #fff;
  font-size: 13px!important;
  line-height: 28px;
}
.vue-component .step-recording .body .time {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto auto 34px;
  position: relative;
  width: max-content;
}
.vue-component .step-recording .body .time .dot {
  width: 8px;
  height: 8px;
  background: #fb352c;
  border-radius: 50%;
  margin-right: 5px;
  left: -13px;
  position: absolute;
}
.vue-component .step-recording .body .time .time-desc {
  height: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #08091D;
  line-height: 16px;
}
.vue-component .step-recording .body .operate {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #F2F4F7;
  padding-top: 22px;
}
.vue-component .step-recording .body .operate > div {
  margin: 0 6px 0;
}
.vue-component .step-recording .body .operate .pause-btn,
.vue-component .step-recording .body .operate .re-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F2F4F7;
  cursor: pointer;
}
.vue-component .step-recording .body .operate .pause-btn svg path,
.vue-component .step-recording .body .operate .re-btn svg path {
  transition: fill 0.3s;
}
.vue-component .step-recording .body .operate .pause-btn:hover,
.vue-component .step-recording .body .operate .re-btn:hover {
  overflow: visible;
}
.vue-component .step-recording .body .operate .pause-btn:hover svg path,
.vue-component .step-recording .body .operate .re-btn:hover svg path {
  fill: #FF446B;
}
.vue-component .step-recording .body .operate .pause-btn:hover .tooltip,
.vue-component .step-recording .body .operate .re-btn:hover .tooltip {
  opacity: 1;
}
.vue-component .step-recording .body .operate .pause-btn .tooltip,
.vue-component .step-recording .body .operate .re-btn .tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -40px;
  height: 28px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
  padding: 0 8px;
  width: max-content;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.vue-component .step-recording .body .operate .pause-btn .tooltip div,
.vue-component .step-recording .body .operate .re-btn .tooltip div {
  position: absolute;
  bottom: -15px;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 10px solid rgba(0, 0, 0, 0);
  border-top: 10px solid rgba(0, 0, 0, 0.9);
  transform: translateX(-50%);
}
.vue-component .step-recording .body .operate .pause-btn .tooltip span,
.vue-component .step-recording .body .operate .re-btn .tooltip span {
  color: #fff;
  font-size: 13px!important;
  line-height: 28px;
}
.vue-component .step-recording .desc {
  margin-top: 15px;
  text-align: center;
  height: 18px;
  font-size: 15px;
  font-weight: 400;
  color: #08091D;
  line-height: 18px;
  opacity: 0.6;
}
.vue-component .step-complete {
  display: none;
  padding: 140px 70px 0;
  height: auto;
}
.vue-component .step-complete.active {
  display: block;
}
.vue-component .step-complete .head {
  position: relative;
  height: 30px;
}
.vue-component .step-complete .head .goBack {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  cursor: pointer;
}
.vue-component .step-complete .head .goBack svg g g {
  transition: all 0.3s;
}
.vue-component .step-complete .head .goBack span {
  margin-left: 3px;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.vue-component .step-complete .head .goBack:hover svg g g {
  fill: #e6375c;
}
.vue-component .step-complete .head .goBack:hover span {
  opacity: 1;
}
.vue-component .step-complete .head h1 {
  height: 30px;
  font-size: 26px;
  font-weight: 500;
  color: #08091D;
  line-height: 30px;
  text-align: center;
}
.vue-component .step-complete .body {
  width: max-content;
  margin: 22px auto 0;
}
.vue-component .step-complete .body .container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 450px;
}
.vue-component .step-complete .body .container video {
  max-width: 100%;
  max-height: 100%;
  background: #2ebbe9;
  margin-bottom: 17px;
  outline: none;
}
.vue-component .step-complete .body .player-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}
.vue-component .step-complete .body .player-control .control-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-right: 6px;
  border-radius: 50%;
  transition: all 0.3s;
  background: rgba(0, 0, 0, 0);
}
.vue-component .step-complete .body .player-control .control-btn:hover {
  background: #FFFFFF;
  cursor: pointer;
}
.vue-component .step-complete .body .player-control .control-btn.volume {
  position: relative;
}
.vue-component .step-complete .body .player-control .control-btn.volume:hover {
  cursor: default;
}
.vue-component .step-complete .body .player-control .control-btn.volume .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  z-index: 22;
}
.vue-component .step-complete .body .player-control .control-btn.volume .icon svg {
  z-index: 20;
}
.vue-component .step-complete .body .player-control .control-btn.volume .icon:hover {
  cursor: pointer;
}
.vue-component .step-complete .body .player-control .control-btn.volume .extend {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 158px;
  width: 32px;
  padding-top: 13px;
  border-radius: 16px;
  z-index: 19;
  transition: all 0.3s;
  background: #ffffff;
  opacity: 1;
}
.vue-component .step-complete .body .player-control .control-btn.volume .extend .slider {
  height: 110px;
  margin: auto;
}
.vue-component .step-complete .body .player-control .control-btn.volume .extend .slider .slider-background {
  background: #E3E5E8;
}
.vue-component .step-complete .body .player-control .control-btn.volume .extend .slider .slider-background .slider-selection {
  top: auto;
  bottom: 0;
  width: 100%;
  background: #FF446B;
}
.vue-component .step-complete .body .player-control .control-btn.volume .extend .slider .slider-background .slider-handle {
  left: -5px;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.vue-component .step-complete .body .player-control .slider {
  flex-grow: 1;
  margin-left: 18px;
  margin-right: 20px;
}
.vue-component .step-complete .body .player-control .slider .slider-background {
  background: #CACBCF;
}
.vue-component .step-complete .body .player-control .slider .slider-background .slider-selection {
  background: #08091D;
  border-radius: 2px;
}
.vue-component .step-complete .body .player-control .slider .slider-background .slider-handle {
  border: 1px solid rgba(8, 9, 29, 0.3);
}
.vue-component .step-complete .body .player-control .timer {
  height: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #08091D;
  line-height: 16px;
}
.vue-component .step-complete .body .footer {
  display: block;
  margin: 17px 0 27px;
  text-align: center;
}
.vue-component .step-complete .body .footer .operate {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 470px;
}
.vue-component .step-complete .body .footer .operate .operate-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 27px;
  margin-right: 9px;
  height: 50px;
  background: #FFFFFF;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s;
}
.vue-component .step-complete .body .footer .operate .operate-btn svg {
  margin-right: 13px;
}
.vue-component .step-complete .body .footer .operate .operate-btn svg path {
  transition: all 0.3s;
}
.vue-component .step-complete .body .footer .operate .operate-btn span {
  height: 18px;
  font-size: 15px;
  font-weight: 400;
  color: #08091D;
  line-height: 18px;
  transition: all 0.3s;
}
.vue-component .step-complete .body .footer .operate .operate-btn:hover svg path {
  fill: #FF446B;
}
.vue-component .step-complete .body .footer .operate .operate-btn:hover span {
  color: #FF446B;
}
.vue-component .step-complete .body .footer .operate .download-desc {
  font-size: 14px;
  font-weight: 400;
  color: #08091D;
  line-height: 16px;
  opacity: 0.6;
}
.vue-component .step-complete .body .footer .btn {
  padding: 0 30px;
  margin: 0 10px;
  height: 48px;
  min-width: 204px;
}
.vue-component .step-complete .body .share {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: max-content;
  margin: auto;
}
.vue-component .step-complete .body .share span {
  height: 16px;
  margin-right: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #08091D;
  line-height: 16px;
  opacity: 0.5;
  font-style: italic;
}
.vue-component .step-complete .body .share .share-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #656673;
  cursor: pointer;
  margin-right: 10px;
  transition: all 0.3s;
}
.vue-component .step-complete .body .share .share-icon:hover {
  background: #17a2f2;
  border-color: #17a2f2;
}
.vue-component .step-complete .body .share .share-icon:hover svg path {
  fill: #FFFFFF;
}
.vue-component .canvas-editor {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  border: 1px dashed #D4D6D9;
}
.vue-component .canvas-editor .clip-rect-container {
  position: relative;
}
.vue-component .canvas-editor .background {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}
.vue-component .canvas-editor .background .icon {
  margin-bottom: 21px;
}
.vue-component .canvas-editor .background .desc {
  width: 380px;
  font-size: 15px;
  font-weight: 500;
  color: #1E1E1E;
  line-height: 20px;
  text-align: center;
}
.vue-component .canvas-editor canvas {
  z-index: 1;
}
.vue-component .canvas-editor .clipRect {
  position: absolute;
  z-index: 3;
}
.vue-component .canvas-editor .clipRect > svg {
  cursor: move;
}
.vue-component .canvas-editor .clipRect .drop-point {
  position: absolute;
  width: 13px;
  height: 13px;
  visibility: visible;
  border: 2px solid #ffffff;
  border-radius: 6.5px;
  background: #222528;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 4px 0;
}
.vue-component .canvas-editor .clipRect .drop-point.left-top {
  left: -6.5px;
  top: -6.5px;
}
.vue-component .canvas-editor .clipRect .drop-point.right-top {
  right: -6.5px;
  top: -6.5px;
}
.vue-component .canvas-editor .clipRect .drop-point.right-bottom {
  right: -6.5px;
  bottom: -6.5px;
}
.vue-component .canvas-editor .clipRect .drop-point.left-bottom {
  left: -6.5px;
  bottom: -6.5px;
}
.vue-component .canvas-editor .clipRect .drop-point.left-top:hover,
.vue-component .canvas-editor .clipRect .drop-point.right-bottom:hover {
  cursor: nw-resize;
}
.vue-component .canvas-editor .clipRect .drop-point.right-top:hover,
.vue-component .canvas-editor .clipRect .drop-point.left-bottom:hover {
  cursor: sw-resize;
}
.vue-component .canvas-editor .clipRect .mask-btn {
  position: absolute;
  top: -38px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  line-height: 32px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  border: 1px solid #FFF;
}
.vue-component .canvas-editor .clipRect .mask-btn span {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0 23px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  transition: all 0.3s;
}
.vue-component .canvas-editor .clipRect .mask-btn.active span {
  background: rgba(255, 255, 255, 0.8);
  color: #08091D;
}
.vue-component .canvas-editor .clipRect .mask-panel {
  position: absolute;
  left: 0;
  top: -100px;
  display: none;
  justify-content: center;
  align-items: center;
  height: 56px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.vue-component .canvas-editor .clipRect .mask-panel > div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  margin: 0 3px;
  cursor: pointer;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0);
}
.vue-component .canvas-editor .clipRect .mask-panel > div.selected {
  background: rgba(255, 255, 255, 0.3);
}
.vue-component .canvas-editor .clipRect .mask-panel > div:hover {
  background: rgba(255, 255, 255, 0.15);
}
.vue-component .canvas-editor .clipRect .mask-panel.active {
  display: flex;
}
.vue-component .canvas-editor .require-camera {
  position: absolute;
  left: 13px;
  bottom: 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 208px;
  height: 208px;
  background: #FFFFFF;
  box-shadow: 0 4px 12px 0 rgba(66, 70, 76, 0.19);
  border-radius: 50%;
  border: 1px dashed #D4D6D9;
  z-index: 4;
}
.vue-component .canvas-editor .require-camera svg {
  margin-bottom: 9px;
}
.vue-component .canvas-editor .require-camera span {
  height: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #FF446B;
  line-height: 16px;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: underline;
}
.vue-component .canvas-editor .require-camera span:hover {
  color: #e6375c;
}
.vue-component .canvas-editor .require-camera-screen {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  z-index: 99;
}
.vue-component .canvas-editor .require-camera-screen .icon {
  margin-bottom: 21px;
}
.vue-component .canvas-editor .require-camera-screen .desc {
  width: 380px;
  font-size: 15px;
  font-weight: 500;
  color: #1E1E1E;
  line-height: 20px;
  text-align: center;
}
.vue-component .canvas-editor .require-camera-screen .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin-top: 17px;
  border-radius: 25px;
  border: 1px solid #FF446B;
  background: rgba(0, 0, 0, 0);
}
.vue-component .canvas-editor .require-camera-screen .btn svg {
  margin-right: 5px;
}
.vue-component .canvas-editor .require-camera-screen .btn svg path {
  transition: all 0.3s;
}
.vue-component .canvas-editor .require-camera-screen .btn span {
  font-size: 14px;
  font-weight: 400;
  color: #FF446B;
  line-height: 16px;
  transition: all 0.3s;
}
.vue-component .canvas-editor .require-camera-screen .btn:hover {
  background: #FF446B;
}
.vue-component .canvas-editor .require-camera-screen .btn:hover svg path {
  fill: #FFFFFF;
}
.vue-component .canvas-editor .require-camera-screen .btn:hover span {
  color: #FFFFFF;
}
.vue-component .modals .modal.camera-permissions .modal-body .body .desc,
.vue-component .modals .modal.microphone-permissions .modal-body .body .desc,
.vue-component .modals .modal.system-audio-permissions .modal-body .body .desc,
.vue-component .modals .modal.no-support-system-audio .modal-body .body .desc,
.vue-component .modals .modal.lose-content-confirm .modal-body .body .desc,
.vue-component .modals .modal.recording-close-confirm .modal-body .body .desc {
  margin-bottom: 13px;
}
.vue-component .modals .modal.camera-permissions .modal-body .body .sample,
.vue-component .modals .modal.microphone-permissions .modal-body .body .sample,
.vue-component .modals .modal.system-audio-permissions .modal-body .body .sample,
.vue-component .modals .modal.no-support-system-audio .modal-body .body .sample,
.vue-component .modals .modal.lose-content-confirm .modal-body .body .sample,
.vue-component .modals .modal.recording-close-confirm .modal-body .body .sample {
  width: max-content;
  max-width: 100%;
  height: max-content;
  border: 1px solid rgba(45, 46, 63, 0.2);
}
.vue-component .modals .modal.camera-permissions .modal-body .body .sample video,
.vue-component .modals .modal.microphone-permissions .modal-body .body .sample video,
.vue-component .modals .modal.system-audio-permissions .modal-body .body .sample video,
.vue-component .modals .modal.no-support-system-audio .modal-body .body .sample video,
.vue-component .modals .modal.lose-content-confirm .modal-body .body .sample video,
.vue-component .modals .modal.recording-close-confirm .modal-body .body .sample video {
  display: block;
  width: 320px;
}
.vue-component .modals .modal.camera-permissions .modal-body .footer .btn,
.vue-component .modals .modal.microphone-permissions .modal-body .footer .btn,
.vue-component .modals .modal.system-audio-permissions .modal-body .footer .btn,
.vue-component .modals .modal.no-support-system-audio .modal-body .footer .btn,
.vue-component .modals .modal.lose-content-confirm .modal-body .footer .btn,
.vue-component .modals .modal.recording-close-confirm .modal-body .footer .btn {
  padding: 0 13px;
  margin-left: 12px;
}
.vue-component .modals .modal.no-support-system-audio .modal-body {
  width: 723px;
}
.vue-component .modals .modal.no-support-system-audio .modal-body .body .sample table {
  width: 656px;
  table-layout: fixed;
  border-collapse: collapse;
}
.vue-component .modals .modal.no-support-system-audio .modal-body .body .sample table thead tr {
  height: 113px;
}
.vue-component .modals .modal.no-support-system-audio .modal-body .body .sample table tr {
  height: 44px;
}
.vue-component .modals .modal.no-support-system-audio .modal-body .body .sample table tr th {
  width: 100%;
  font-size: 15px;
  font-weight: 400;
  color: #08091D;
  line-height: 18px;
  border: 1px solid #DADADF;
}
.vue-component .modals .modal.no-support-system-audio .modal-body .body .sample table tr th span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 400;
  color: #08091D;
  line-height: 18px;
}
.vue-component .modals .modal.no-support-system-audio .modal-body .body .sample table tr th:nth-child(1) {
  width: 109px;
}
.vue-component .modals .modal.check-before-record .modal-body .title .icon {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
}
.vue-component .modals .modal.check-before-record .modal-body .title .icon svg {
  margin-right: 21px;
}
.vue-component .modals .modal.check-before-record .modal-body .footer .btn {
  padding: 0 13px;
  margin-left: 12px;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .body .sample {
  width: max-content;
  max-width: 100%;
  height: max-content;
  border: 1px solid rgba(45, 46, 63, 0.2);
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .body .sample video {
  display: block;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer {
  justify-content: space-between;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option:hover,
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option.selected {
  cursor: pointer;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option:hover .checkout,
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option.selected .checkout {
  border-color: #FF446B;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option.selected .checkout svg {
  opacity: 1;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option .checkout {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  border-radius: 2px;
  border: 1px solid rgba(8, 9, 29, 0.4);
  cursor: pointer;
  transition: all 0.3s;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option .checkout svg {
  opacity: 0;
  transition: all 0.3s;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option .checkout-text {
  height: 24px;
  font-size: 14px;
  font-weight: 400;
  color: #08091D;
  line-height: 24px;
  opacity: 0.6;
  transition: all 0.3s;
}
.vue-component .modals .modal.screen-share-audio-tips .modal-body .footer .checkout-option .checkout-text:hover {
  opacity: 1;
  color: #FF446B;
}
@media screen and (max-height: 700px) {
  .vue-component .step-scene-select {
    padding-top: 130px;
  }
  .vue-component .step-options {
    padding-top: 120px;
  }
  .vue-component .step-options .body {
    max-width: 1050px;
    padding-bottom: 30px;
  }
  .vue-component .step-recording {
    padding-top: 120px;
  }
  .vue-component .step-complete {
    padding-top: 120px;
  }
}
/*# sourceMappingURL=recorder.css.map */
@keyframes zoomModalIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomModalOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@-moz-keyframes rotateCloseHover {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(90deg);
  }
}
.record_modal_close {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s !important;
  -moz-transition: all 0.3s !important;
  -o-transition: all 0.3s !important;
  transition: all 0.3s !important;
  cursor: pointer;
}
.record_modal_close:hover {
  background: rgba(0, 0, 0, 0.15);
  animation: rotateCloseHover 0.3s;
  -moz-animation: rotateCloseHover 0.3s;
  -webkit-animation: rotateCloseHover 0.3s;
  -o-animation: rotateCloseHover 0.3s;
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
/*# sourceMappingURL=record-close.css.map */
.record_delayed_box {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  align-items: center;
  justify-content: center;
}
.record_delayed_mask {
  background-color: rgba(0, 0, 0, 0.78);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  outline: 0;
}
.record_delayed_content_container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: max-content;
}
.record_content_max_box {
  position: absolute;
  width: 210px;
  height: 210px;
  background: #FFFFFF;
  opacity: 0.21;
  border-radius: 50%;
}
.record_content_medium_box {
  position: absolute;
  width: 174px;
  height: 174px;
  background: #FFFFFF;
  opacity: 0.6;
  border-radius: 50%;
}
.record_content_small_box {
  position: absolute;
  width: 136px;
  height: 136px;
  background: #FFFFFF;
  border-radius: 50%;
}
.record_content_time_text {
  position: absolute;
  width: 50px;
  height: 101px;
  font-size: 86px;
  font-weight: bold;
  color: #E6375C;
  line-height: 101px;
}
.record_content_message {
  font-size: 17px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
  top: 140px;
  position: relative;
}
/*# sourceMappingURL=delayed.css.map */
@keyframes zoomModalIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomModalOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@-moz-keyframes rotateCloseHover {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(90deg);
  }
}
.zoom-modal-in {
  animation-name: zoomModalIn;
  animation-duration: 0.15s;
  animation-timing-function: linear;
}
.zoom-modal-out {
  animation-name: zoomModalOut;
  animation-duration: 0.15s;
  animation-timing-function: linear;
}
.record_payment_container {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  align-items: center;
  justify-content: center;
}
.record_payment_mask {
  background-color: rgba(0, 0, 0, 0.78);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  outline: 0;
}
.record_payment_modal_container {
  position: relative;
  width: max-content;
}
.record_payment_modal_close {
  position: absolute;
  right: -33px;
  top: -9px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s !important;
  -moz-transition: all 0.3s !important;
  -o-transition: all 0.3s !important;
  transition: all 0.3s !important;
  cursor: pointer;
}
.record_payment_modal_close:hover {
  background-color: rgba(255, 255, 255, 0.3);
  animation: rotateCloseHover 0.3s;
  -moz-animation: rotateCloseHover 0.3s;
  -webkit-animation: rotateCloseHover 0.3s;
  -o-animation: rotateCloseHover 0.3s;
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
.record_payment_modal_close .record_payment_close_icon g {
  fill: #FFFFFF;
}
.record_payment_modal_head {
  font-size: 24px;
  color: #FFFFFF;
  padding: 0 0 20px 0;
  line-height: 22px;
  text-align: center;
  font-weight: 600;
}
.record_payment_modal_body {
  background-color: #fff;
  border-radius: 6px;
}
.record_payment_modal_content {
  position: relative;
  width: 540px;
  height: 400px;
  border-radius: 6px;
  overflow: hidden;
  justify-content: center;
  text-align: center;
}
.record_payment_content_icon {
  margin-top: 40px;
}
.record_payment_content_title {
  font-size: 24px;
  font-weight: 500;
  color: #25282C;
  line-height: 28px;
  margin-top: 30px;
}
.record_payment_content_desc {
  font-size: 17px;
  font-weight: 400;
  color: #25282C;
  opacity: 0.8;
  line-height: 25px;
  margin-top: 20px;
  padding: 0 80px;
}
.record_payment_content_btn_box {
  margin-top: 30px;
}
.record_payment_content_btn {
  width: 320px;
  height: 50px;
  background: #00D299;
  border-radius: 26px;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 49px;
  transition: all 0.3s;
}
.record_payment_content_btn:hover {
  cursor: pointer;
  background: #00BC89;
}
.record_payment_content_btn:last-child {
  background: #F0F0F0;
  margin-top: 10px;
  color: rgba(37, 40, 44, 0.55);
}
.record_payment_content_btn:last-child:hover {
  color: #25282c;
  background: #E7E7E7;
}
/*# sourceMappingURL=record-payment-modal.css.map */