/**
 * @deprecated This file is deprecated as of 2021-10-24 and will be removed in a future update.
 * Please use '1_settings/colors.scss' for all color-related styles.
 * 
 * TODO: Remove this file once all references have been updated to use global/colors.scss
 */
.blue-text {
  color: #2bade3;
}

.premium-text {
  color: #eeb60b !important;
}

.red-text {
  color: #f31805 !important;
}

:root {
  --facer-default-font: "Roboto", Helvetica, Arial, sans-serif;
  --facer-text-size-small: 12px;
  --facer-text-size-normal: 14px;
}

.normal-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body, .facer-editor, .jumbo-text, .small-detail-text, .detail-text, .tag-pill, .card-text-title, .stat-text-value, .card-text-title-hovered,
.modal-text-title,
.editor-modal .facer-modal-content .facer-modal-title, .text-button, .small-text-button, .facer-button.btn-sm,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i,
.facer-editor .btn-sm.btn i, .caption-text, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text, .button-text, .facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-editor .btn i:not(.glyphicon), .facer-button, .editor-modal .btn, .facer-editor .btn, .xlarge-button-text, .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-editor .btn-xl.btn i, .large-button-text, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn-lg.btn i, .page-subtitle, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle, .jumbo-text-detail, .page-title-medium, .page-title, .dark-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label, .light-text, .bold-text, .muted-text {
  font-family: var(--facer-default-font);
  color: var(--facer-dark);
}

.muted-text, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle {
  color: var(--facer-muted);
}

.bold-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  font-weight: 500;
}

.light-text {
  color: var(--facer-light);
}

.dark-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  color: var(--facer-dark);
}

.page-title {
  font-weight: 500;
  font-size: 26px;
}

.page-title-medium {
  font-weight: 500;
  font-size: 22px;
}

.page-subtitle, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle, .jumbo-text-detail {
  font-weight: 400;
  font-size: 14px;
  color: var(--facer-light);
}

.button-text, .facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-editor .btn i:not(.glyphicon), .facer-button, .editor-modal .btn, .facer-editor .btn, .xlarge-button-text, .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-editor .btn-xl.btn i, .large-button-text, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn-lg.btn i {
  font-weight: 500;
  font-size: 14px;
}

.caption-text, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text {
  font-weight: 400;
  font-size: 14px;
  font-style: italic;
}

.text-button, .small-text-button, .facer-button.btn-sm, .editor-modal .btn-sm.btn, .facer-editor .btn-sm.btn,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i,
.facer-editor .btn-sm.btn i {
  font-weight: 500;
  font-size: 14px;
  color: var(--facer-blue);
}
.text-button:hover, .small-text-button:hover, .facer-button.btn-sm:hover, .editor-modal .btn-sm.btn:hover, .facer-editor .btn-sm.btn:hover,
.facer-button.btn-sm i:hover,
.editor-modal .btn-sm.btn i:hover,
.facer-editor .btn-sm.btn i:hover {
  color: var(--facer-blue-highlight);
}

.small-text-button, .facer-button.btn-sm, .editor-modal .btn-sm.btn, .facer-editor .btn-sm.btn,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i,
.facer-editor .btn-sm.btn i {
  font-weight: 500;
  font-size: 11px;
}

.text-button-completed {
  font-weight: 400;
  font-style: italic;
  color: var(--facer-light);
}

.large-button-text, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn-lg.btn i {
  font-weight: 500;
  font-size: 18px;
}

.xlarge-button-text, .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-editor .btn-xl.btn i {
  font-weight: 500;
  font-size: 26px;
}

.card-text-title, .stat-text-value, .card-text-title-hovered,
.modal-text-title,
.editor-modal .facer-modal-content .facer-modal-title {
  font-weight: 500;
  font-size: 20px;
}

.card-text-title-hovered {
  color: var(--facer-blue);
}

.stat-text-value {
  font-weight: bold;
  color: var(--facer-blue);
}

.detail-text, .tag-pill {
  font-size: 12px;
}

.small-detail-text {
  font-size: 11px;
}

.jumbo-text {
  font-weight: 500;
  font-size: 30px;
}

.text-link {
  font-weight: bold;
  color: var(--facer-blue) !important;
}
.text-link:hover {
  color: var(--facer-blue-highlight) !important;
}
.text-link.disabled {
  color: #999 !important;
  cursor: not-allowed;
}
.text-link i {
  vertical-align: middle;
  font-size: 130%;
}
.text-link.text-link-orange {
  color: orange !important;
}
.text-link.text-link-orange:hover {
  color: #ffaf1d !important;
}

/**
 * @deprecated This file is deprecated as of 2021-10-24 and will be removed in a future update.
 * Please use '4_elements/button.scss' for all button-related styles.
 * 
 * TODO: Remove this file once all references have been updated to use 4_elements/button.scss
 */
:root {
  --facer-default-font: "Roboto", Helvetica, Arial, sans-serif;
  --facer-text-size-small: 12px;
  --facer-text-size-normal: 14px;
}

.normal-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body, .facer-editor, .muted-text, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle, .bold-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label, .light-text, .dark-text, .page-title, .page-title-medium, .page-subtitle, .button-text, .facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-editor .btn i:not(.glyphicon), .facer-button, .editor-modal .btn, .facer-editor .btn, .caption-text, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text, .text-button, .small-text-button, .facer-button.btn-sm,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i,
.facer-editor .btn-sm.btn i, .large-button-text, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn-lg.btn i, .xlarge-button-text, .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-editor .btn-xl.btn i, .card-text-title,
.modal-text-title,
.editor-modal .facer-modal-content .facer-modal-title, .card-text-title-hovered, .stat-text-value, .detail-text, .tag-pill, .small-detail-text, .jumbo-text, .jumbo-text-detail {
  font-family: var(--facer-default-font);
  color: var(--facer-dark);
}

.muted-text, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle {
  color: var(--facer-muted);
}

.bold-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  font-weight: 500;
}

.light-text {
  color: var(--facer-light);
}

.dark-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  color: var(--facer-dark);
}

.page-title {
  font-weight: 500;
  font-size: 26px;
}

.page-title-medium {
  font-weight: 500;
  font-size: 22px;
}

.page-subtitle, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle, .jumbo-text-detail {
  font-weight: 400;
  font-size: 14px;
  color: var(--facer-light);
}

.button-text, .facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-editor .btn i:not(.glyphicon), .facer-button, .editor-modal .btn, .facer-editor .btn, .large-button-text, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn-lg.btn i, .xlarge-button-text, .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-editor .btn-xl.btn i {
  font-weight: 500;
  font-size: 14px;
}

.caption-text, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text {
  font-weight: 400;
  font-size: 14px;
  font-style: italic;
}

.text-button, .small-text-button, .facer-button.btn-sm, .editor-modal .btn-sm.btn, .facer-editor .btn-sm.btn,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i,
.facer-editor .btn-sm.btn i {
  font-weight: 500;
  font-size: 14px;
  color: var(--facer-blue);
}
.text-button:hover, .small-text-button:hover, .facer-button.btn-sm:hover, .editor-modal .btn-sm.btn:hover, .facer-editor .btn-sm.btn:hover,
.facer-button.btn-sm i:hover,
.editor-modal .btn-sm.btn i:hover,
.facer-editor .btn-sm.btn i:hover {
  color: var(--facer-blue-highlight);
}

.small-text-button, .facer-button.btn-sm, .editor-modal .btn-sm.btn, .facer-editor .btn-sm.btn,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i,
.facer-editor .btn-sm.btn i {
  font-weight: 500;
  font-size: 11px;
}

.text-button-completed {
  font-weight: 400;
  font-style: italic;
  color: var(--facer-light);
}

.large-button-text, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn-lg.btn i {
  font-weight: 500;
  font-size: 18px;
}

.xlarge-button-text, .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-editor .btn-xl.btn i {
  font-weight: 500;
  font-size: 26px;
}

.card-text-title, .card-text-title-hovered, .stat-text-value,
.modal-text-title,
.editor-modal .facer-modal-content .facer-modal-title {
  font-weight: 500;
  font-size: 20px;
}

.card-text-title-hovered {
  color: var(--facer-blue);
}

.stat-text-value {
  font-weight: bold;
  color: var(--facer-blue);
}

.detail-text, .tag-pill {
  font-size: 12px;
}

.small-detail-text {
  font-size: 11px;
}

.jumbo-text {
  font-weight: 500;
  font-size: 30px;
}

.text-link {
  font-weight: bold;
  color: var(--facer-blue) !important;
}
.text-link:hover {
  color: var(--facer-blue-highlight) !important;
}
.text-link.disabled {
  color: #999 !important;
  cursor: not-allowed;
}
.text-link i {
  vertical-align: middle;
  font-size: 130%;
}
.text-link.text-link-orange {
  color: orange !important;
}
.text-link.text-link-orange:hover {
  color: #ffaf1d !important;
}

/**
 * @deprecated This file is deprecated as of 2021-10-24 and will be removed in a future update.
 * Please use '1_settings/colors.scss' for all color-related styles.
 * 
 * TODO: Remove this file once all references have been updated to use global/colors.scss
 */
.blue-text {
  color: #2bade3;
}

.premium-text {
  color: #eeb60b !important;
}

.red-text {
  color: #f31805 !important;
}

.media-button {
  color: white;
  display: inline-block;
  width: 48px;
  text-align: center;
  height: 48px !important;
  border-radius: 50%;
  font-size: 24px;
  line-height: 40px;
  background-color: rgba(0, 0, 0, 0.75);
  margin: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.media-button i {
  vertical-align: middle;
  display: block;
  line-height: 0;
}
.media-button i.icon-play {
  line-height: 0;
  margin-left: 5px;
}

.btn.btn-default.btn-secondary {
  border: 1px solid #bbb;
}

.btn.btn-primary-v2 {
  border: 2px solid #2bade3;
  color: #2bade3;
  background-color: white;
}

.facer-button, .editor-modal .btn, .facer-editor .btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  height: auto;
  line-height: normal;
  padding: 0 20px;
  border-radius: 16px;
}
.facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-editor .btn i:not(.glyphicon) {
  height: auto;
  margin: auto;
  line-height: 0;
}
.facer-button.btn-xl, .editor-modal .btn-xl.btn, .facer-editor .btn-xl.btn {
  height: 55px !important;
  padding: 0 20px;
  border-radius: 27.5px;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
}
.facer-button.btn-lg, .editor-modal .btn-lg.btn, .facer-editor .btn-lg.btn {
  height: 40px !important;
  padding: 0 20px;
  border-radius: 20px;
  vertical-align: middle;
}
.facer-button.btn-sm, .editor-modal .btn-sm.btn, .facer-editor .btn-sm.btn {
  height: 35px !important;
  padding: 0 20px;
  border-radius: 17.5px;
  vertical-align: middle;
}
.facer-button.btn-primary, .editor-modal .btn-primary.btn, .facer-editor .btn-primary.btn {
  color: white !important;
}
.facer-button.btn-primary i, .editor-modal .btn-primary.btn i, .facer-editor .btn-primary.btn i {
  color: white !important;
}
.facer-button.btn-primary:hover, .editor-modal .btn-primary.btn:hover, .facer-editor .btn-primary.btn:hover {
  box-shadow: 0 4px 6px 0 rgba(43, 173, 227, 0.2);
  background-color: #41b5e6;
  border: none;
}
.facer-button.btn-primary:active, .editor-modal .btn-primary.btn:active, .facer-editor .btn-primary.btn:active {
  border-color: #41b5e6;
}
.facer-button.btn-primary[disabled=disabled], .editor-modal .btn-primary[disabled=disabled].btn, .facer-editor .btn-primary[disabled=disabled].btn {
  background: #ededed;
  color: #b8b8b8 !important;
}
.facer-button.btn-rounded, .editor-modal .btn-rounded.btn, .facer-editor .btn-rounded.btn {
  border-radius: 110px;
  padding: 15px 40px;
  font-size: 16px;
}
.facer-button.btn-default, .editor-modal .btn-default.btn, .facer-editor .btn-default.btn {
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.facer-button.btn-default:hover, .editor-modal .btn-default.btn:hover, .facer-editor .btn-default.btn:hover {
  background-color: #d0d0d0;
}
.facer-button.btn-default:active, .editor-modal .btn-default.btn:active, .facer-editor .btn-default.btn:active {
  border-color: #d0d0d0;
}
.facer-button.navbar-btn, .editor-modal .navbar-btn.btn, .facer-editor .navbar-btn.btn {
  background: transparent;
  font-size: 14px;
  display: inline;
}
.facer-button.navbar-btn i, .editor-modal .navbar-btn.btn i, .facer-editor .navbar-btn.btn i {
  font-size: 20px;
}
.facer-button.input-btn, .editor-modal .input-btn.btn, .facer-editor .input-btn.btn {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 26px !important;
  width: 26px;
  padding: 0;
  color: white;
}
.facer-button.dropdown-toggle, .editor-modal .dropdown-toggle.btn, .facer-editor .dropdown-toggle.btn {
  font-weight: 400;
  padding: 0 15px 0 15px;
}
.facer-button.dropdown-toggle:focus, .editor-modal .dropdown-toggle.btn:focus, .facer-editor .dropdown-toggle.btn:focus {
  box-shadow: none;
  border-color: transparent;
}
.facer-button.dropdown-toggle:hover, .editor-modal .dropdown-toggle.btn:hover, .facer-editor .dropdown-toggle.btn:hover, .facer-button.dropdown-toggle:active, .editor-modal .dropdown-toggle.btn:active, .facer-editor .dropdown-toggle.btn:active, .facer-button.dropdown-toggle:focus, .editor-modal .dropdown-toggle.btn:focus, .facer-editor .dropdown-toggle.btn:focus {
  background-color: var(--facer-dark-2);
}
.facer-button .facer-button-tag, .editor-modal .btn .facer-button-tag, .facer-editor .btn .facer-button-tag {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  font-size: 70%;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  height: 22px;
  padding: 1px 10px 0;
  vertical-align: middle;
}

.facer-editor {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
}
.facer-editor header.mobile-friendly {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-width: 0;
}
.facer-editor header.mobile-friendly #siteTitle {
  width: auto !important;
}
.facer-editor .facer-editor-inner-wrapper {
  width: 100%;
  min-width: 992px;
  margin: 0 auto;
  height: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.facer-editor .facer-editor-inner-wrapper.mobile-friendly {
  min-width: 0;
}
.facer-editor .facer-editor-inner-wrapper .publish-form-scroll-wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: auto;
  height: 100%;
  padding-top: env(safe-area-inset-top, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  background-color: var(--facer-light-grey);
}
.facer-editor .facer-editor-inner-wrapper .publish-form-wrapper .row {
  display: block;
}
.facer-editor #photoAlbum {
  position: fixed;
  top: -9999px;
  left: -9999px;
}
.facer-editor #photoAlbum canvas {
  width: 312px !important;
  height: 390px !important;
}
.facer-editor #mobileMessage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #FFF;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100000;
  padding: 10px;
  padding-right: 50px;
}
.facer-editor #mobileMessage .close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  color: white;
}

.facer-editor h2 {
  margin: 0 0 10px;
  color: #464646;
  font-size: 25px;
  vertical-align: bottom;
  font-weight: 400;
}
.facer-editor h4 {
  margin: 0 0 10px;
}
.facer-editor label {
  font-weight: 400;
}
.facer-editor .title {
  font-size: 18px;
}
.facer-editor .blue {
  color: #2BADE3;
}
.facer-editor .image-bg {
  background-color: #d5f408;
}
.facer-editor .text-bg {
  background-color: #9a6fb0;
}
.facer-editor .shape-bg {
  background-color: #ff9000;
}
.facer-editor .essential-bg {
  background-color: #f272ba;
}
.facer-editor .complication-bg {
  background-color: #72f29f;
}
.facer-editor .recipe-bg {
  background-color: #5fd9ff;
}
.facer-editor.google-io .image-bg {
  background-color: #F5426E !important;
}
.facer-editor.google-io .text-bg {
  background-color: #69C14C !important;
}
.facer-editor.google-io .shape-bg {
  background-color: #F5CF3F !important;
}
.facer-editor.google-io .essential-bg {
  background-color: #00BED5 !important;
}
.facer-editor.google-io .complication-bg {
  background-color: #616DB2 !important;
}
.facer-editor #editor {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 768px;
  margin-top: 0px;
  margin-bottom: 0px;
  overflow: hidden;
  background: #CFCFCF;
}
.facer-editor #editor.highlighted {
  border: 8px solid #2BADE3;
}
.facer-editor #editor .dropdown-backdrop {
  display: none;
}
.facer-editor #watchfaceTitleTemp {
  width: 100%;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
}
.facer-editor #saveDraft {
  position: relative;
}
.facer-editor #saveDraft #saveDraftStatus {
  position: absolute;
  top: 22px;
  left: 2px;
  font-size: 10px;
  line-height: 0;
  white-space: nowrap;
}
.facer-editor #watchfaceTitle {
  width: 100%;
  max-width: 350px;
}
.facer-editor #watchfaceTitle input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
}
.facer-editor #watchfaceTitle .title-tooltip {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.facer-editor #watchfaceTitle input:focus + .title-tooltip {
  display: none;
}
.facer-editor .watch-canvas-wrapper {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  z-index: 2;
  border-radius: 5px;
  text-align: center;
  position: relative;
}
.facer-editor .watch-canvas-wrapper.full {
  z-index: 10;
}
.facer-editor .watch-canvas-wrapper #watchfaceTitle {
  z-index: 2;
  margin: 0 auto 20px;
  width: 100%;
  max-width: 350px;
  position: relative;
}
.facer-editor .watch-canvas-wrapper #watchfaceTitle input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 5px;
  background: transparent;
  border: none;
  text-align: center;
  color: #999;
  font-size: 20px;
}
.facer-editor .watch-canvas-wrapper #watchfaceTitle input:hover {
  border: 1px solid #999;
}
.facer-editor .watch-canvas-wrapper #watchfaceTitle input:focus {
  border: 1px solid #999;
  outline: none;
}
.facer-editor .watch-canvas-wrapper #watchfaceTitle.fullscreen {
  margin-bottom: 80px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper {
  background: #e1e1e1;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper,
.facer-editor .watch-canvas-wrapper .browser-wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  z-index: 1;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper.full,
.facer-editor .watch-canvas-wrapper .browser-wrapper.full {
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -296px;
  border-radius: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper.highlighted,
.facer-editor .watch-canvas-wrapper .browser-wrapper.highlighted {
  border-color: #2BADE3;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool {
  position: absolute;
  cursor: pointer;
  text-align: left;
  z-index: 2;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-dropdown,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-dropdown {
  display: inline-block;
  line-height: normal;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-dropdown:not(:last-child):not(:first-child),
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-dropdown:not(:last-child):not(:first-child) {
  margin: 0 5px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button {
  position: relative;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  align-items: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  line-height: 0;
  background: #f5f5f5;
  color: #797979;
  border-radius: 15px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button i,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button i {
  font-size: 18px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.double-width,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.double-width {
  width: 60px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.btn-primary,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.btn-primary {
  color: #FFF;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:not(:last-child):not(:first-child),
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:not(:last-child):not(:first-child) {
  margin: 0 5px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:after,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:after {
  content: " ";
  position: absolute;
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:hover, .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:active,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:hover,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:active {
  color: #2bade3;
  text-decoration: none;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:hover svg path, .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:active svg path,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:hover svg path,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:active svg path {
  fill: #2bade3;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.active,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.active {
  color: #2bade3;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.active svg path,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.active svg path {
  fill: #2bade3;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-square,
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-circle,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-square,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #AAA;
  white-space: nowrap;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-square.selected,
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-circle.selected,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-square.selected,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-circle.selected {
  background: #555;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-circle,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-circle {
  border-radius: 50%;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.top-left,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.top-left {
  bottom: 0;
  left: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.top-left.attached,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.top-left.attached {
  padding-left: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.top-right,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.top-right {
  bottom: 0;
  right: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.top-right .corner-tool-container,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.top-right .corner-tool-container {
  right: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.top-right .corner-tool-container .corner-tool-container-item,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.top-right .corner-tool-container .corner-tool-container-item {
  margin-right: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.top-right.attached,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.top-right.attached {
  padding-right: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom-left,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom-left {
  position: relative;
  top: 0;
  left: 0;
  padding: 0;
  padding: 0px 15px 10px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom-left .corner-tool-container,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom-left .corner-tool-container {
  position: absolute;
  bottom: 0;
  left: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom-left .corner-tool-container .corner-tool-container-item,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom-left .corner-tool-container .corner-tool-container-item {
  margin-right: 5px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom-left .corner-tool-container .corner-tool-container-item:last-child:not(:first-child),
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom-left .corner-tool-container .corner-tool-container-item:last-child:not(:first-child) {
  margin-right: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom-right,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom-right {
  top: 0;
  right: 0;
  text-align: right;
  padding: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom-right .floating-btn-wrapper,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom-right .floating-btn-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0px 15px 10px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .corner-tool-container,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .corner-tool-container {
  position: absolute;
  padding: 12px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group,
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :not(:first-child):not(:last-child),
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):not(:last-child),
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :not(:first-child):not(:last-child),
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):not(:last-child) {
  margin: 0;
  border-radius: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :not(:first-child):not(:last-child) .watch-canvas-corner-tool-button,
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):not(:last-child) .watch-canvas-corner-tool-button,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :not(:first-child):not(:last-child) .watch-canvas-corner-tool-button,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):not(:last-child) .watch-canvas-corner-tool-button {
  margin: 0;
  border-radius: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :first-child:not(:last-child),
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :first-child:not(:last-child),
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :first-child:not(:last-child),
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :first-child:not(:last-child) {
  border-radius: 15px 0 0 15px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :not(:first-child):last-child,
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):last-child,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :not(:first-child):last-child,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):last-child {
  border-radius: 0 15px 15px 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :first-child:last-child,
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :first-child:last-child,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group :first-child:last-child,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :first-child:last-child {
  border-radius: 15px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :first-child:not(:last-child),
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :first-child:not(:last-child) {
  border-radius: 15px 15px 0 0;
  border-bottom-width: 0 !important;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):last-child,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):last-child {
  border-radius: 0 0 15px 15px;
  border-top-width: 0 !important;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :first-child:last-child,
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :first-child:last-child {
  border-radius: 15px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):not(:last-child),
.facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button-group-stack :not(:first-child):not(:last-child) {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}
.facer-editor .watch-canvas-wrapper .watch-canvas {
  position: absolute;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-outer-container {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 1px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-container.loaded {
  opacity: 1;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-container #canvasOptions {
  position: absolute;
  z-index: 1;
  bottom: -68px;
  right: -3px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-container.fullscreen {
  margin-bottom: 80px;
}
.facer-editor .watch-canvas-wrapper .watch-canvas-container:not(.preview-container) .canvas-container,
.facer-editor .watch-canvas-wrapper .watch-canvas.lower-canvas,
.facer-editor .watch-canvas-wrapper .watch-canvas.upper-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.facer-editor .watch-canvas-wrapper .watch-band {
  position: absolute;
  left: 0;
  top: -50px;
  width: 500px;
  height: 600px;
  background-image: url("/img/watch-band.png");
  z-index: 10;
}
.facer-editor .watch-canvas-wrapper .watch-band.circle {
  background-image: url("/img/watch-band-circle.png");
}
.facer-editor .hovered,
.facer-editor .selected {
  border-color: #2BADE3 !important;
}
.facer-editor .no-events {
  pointer-events: none;
  opacity: 0.5;
}
.facer-editor .vertical-slider {
  min-width: 0;
}
.facer-editor .vertical-slider input[type=range] {
  min-width: 32px;
  -webkit-appearance: slider-vertical;
  writing-mode: bt-lr;
}
.facer-editor .alignment-control {
  padding: 0;
}
.facer-editor .watch-canvas-toolbar-container {
  position: absolute;
  left: -1px;
  right: -1px;
  z-index: 10;
}
.facer-editor .watch-canvas-toolbar-container.toolbar-bottom {
  bottom: 0;
}
.facer-editor .watch-canvas-toolbar-container.toolbar-top {
  top: 0;
}
.facer-editor .watch-canvas-toolbar-container .watch-canvas-toolbar-corner-tool {
  position: absolute;
}
.facer-editor .watch-canvas-toolbar-container .watch-canvas-toolbar-corner-tool.right {
  top: -44px;
  right: 10px;
  text-align: right;
}
.facer-editor .watch-canvas-toolbar-container .watch-canvas-toolbar-corner-tool.left {
  top: -44px;
  left: 10px;
  text-align: left;
}
.facer-editor .watch-canvas-alert {
  height: 40px;
  line-height: 40px;
  background: rgba(49, 209, 255, 0.7);
  text-align: center;
  z-index: 1;
  color: #186788;
}
.facer-editor .watch-canvas-alert.watch-canvas-alert-info .watch-canvas-alert-stripes {
  position: absolute;
  height: 10px;
  bottom: -10px;
  left: 0;
  right: 0;
  background-image: url("/img/pattern.png");
  background-size: auto 10px;
}
.facer-editor .watch-canvas-alert.watch-canvas-alert-success {
  border-bottom-color: #72f29f;
  background: rgba(114, 242, 159, 0.42);
  color: black;
}
.facer-editor .watch-canvas-alert i.large-icon {
  font-size: 27px;
  vertical-align: middle;
  vertical-align: -webkit-baseline-middle;
}
.facer-editor .watch-canvas-alert.watch-canvas-alert-danger {
  border-bottom-color: #f31805;
  background: rgba(255, 0, 0, 0.7);
  color: white;
}
.facer-editor .watch-canvas-toolbar {
  display: inline-block;
  width: 100%;
  min-height: 40px;
  z-index: 2;
  color: #999;
  background: rgba(50, 50, 50, 0.3);
  cursor: default;
}
.facer-editor .watch-canvas-toolbar .btn-toolbar {
  padding: 5px 10px;
}
.facer-editor .watch-canvas-toolbar .btn-toolbar div {
  display: inline-block;
  vertical-align: top;
}
.facer-editor .watch-canvas-toolbar .btn-toolbar .btn-toolbar-options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
}
.facer-editor .watch-canvas-toolbar .btn,
.facer-editor .watch-canvas-toolbar .btn-set,
.facer-editor .watch-canvas-toolbar input {
  cursor: pointer;
}
.facer-editor .watch-canvas-toolbar .btn {
  background: white !important;
}
.facer-editor .watch-canvas-toolbar .btn.active, .facer-editor .watch-canvas-toolbar .btn.active i {
  background: #797979 !important;
  color: white !important;
}
.facer-editor .watch-canvas-toolbar .btn-set {
  float: none;
  margin: 5px;
}
.facer-editor .watch-canvas-toolbar .btn-set button.active {
  background-color: #aaaaaa;
}
.facer-editor .watch-canvas-toolbar .button-label {
  margin-bottom: 0;
  border: 1px solid #DDD;
}
.facer-editor .watch-canvas-toolbar .button-label input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu {
  max-height: 400px;
  overflow-y: auto;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header .list-header {
  min-height: 50px;
  padding: 5px;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header .list-header .upload-control {
  display: block;
  margin: 0;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header .list-header .upload-control button {
  float: none;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header .list-header .upload-control input {
  max-width: 100%;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list > div,
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list .text-style-list-group {
  display: block;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list h4 {
  margin: 4px 0 0;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list .list-group-item.active .list-group-item-text {
  color: #2BADE3;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list .list-group-item-header-image {
  display: block;
  width: 50%;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list .list-group-item-header-image img {
  -webkit-filter: brightness(0);
  filter: brightness(0);
  width: 100%;
}
.facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list .list-group {
  margin: 5px;
  display: block;
}
.facer-editor .watch-canvas-toolbar .color-control {
  position: relative;
}
.facer-editor .watch-canvas-toolbar .color-control .button-label {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 15px;
}
.facer-editor .watch-canvas-toolbar .watch-canvas-tool {
  display: inline-block;
  margin: 0 5px;
  padding: 5px;
  border: 2px solid #EEE;
  color: #BBB;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  -webkit-user-select: none;
}
.facer-editor .watch-canvas-toolbar input[type=range] {
  width: 100%;
}
.facer-editor .add-image {
  border: 2px dashed;
  border-color: transparent !important;
  color: #eeb60b;
}
.facer-editor .add-image.list-group {
  border: 2px dashed #eeb60b;
  background-color: rgba(255, 165, 0, 0.25);
  border-radius: 5px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
}
.facer-editor .add-image.list-group {
  line-height: 125px;
  position: relative;
  vertical-align: top;
}
.facer-editor .add-image.list-group input {
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.facer-editor .gif-link {
  padding-top: 13px;
  padding-bottom: 10px;
}
.facer-editor #shareableLink {
  margin: 10px;
  padding: 13px;
  -webkit-user-select: text !important;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.facer-editor .grid-line-x,
.facer-editor .grid-line-y {
  display: none;
  position: absolute;
  background: #2BADE3;
  opacity: 0.5;
  z-index: 1000;
}
.facer-editor .grid-line-x {
  width: 1px;
  top: 0;
  bottom: 0;
  left: 50%;
}
.facer-editor .grid-line-y {
  height: 1px;
  top: 50%;
  right: 0;
  left: 0;
}
.facer-editor .pulse {
  -webkit-animation: pulse 2s linear infinite;
  -moz-animation: pulse 2s linear infinite;
  -ms-animation: pulse 2s linear infinite;
  animation: pulse 2s linear infinite;
}
@keyframes pulse {
  0% {
    text-shadow: 0px 0px 2px #777;
  }
  50% {
    text-shadow: 0px 0px 10px #2BADE3;
  }
  100% {
    text-shadow: 0px 0px 2px #777;
  }
}
.facer-editor #fileDropOverlayContainer {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  padding: 10px;
  z-index: 10;
}
.facer-editor #fileDropOverlayContainer #fileDropOverlay {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px dashed #999;
  color: #999;
  text-align: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.facer-editor .palette-header {
  padding: 10px 12px 0;
  color: #999;
}
.facer-editor.ios #layerList .palette-well {
  border-radius: 10px;
}
.facer-editor .form-group .twitter-typeahead {
  display: block !important;
}
.facer-editor .form-group .twitter-typeahead .tt-menu {
  left: 0;
  right: 0;
  background-color: #FFF;
  border: 1px solid #DDD;
  max-height: 200px;
  overflow-y: auto;
}
.facer-editor .form-group .twitter-typeahead .tt-menu .tt-header {
  background-color: #999;
  color: #FFF;
  padding: 5px 10px;
}
.facer-editor .form-group .twitter-typeahead .tt-menu .tt-suggestion {
  padding: 5px 10px;
}
.facer-editor .form-group .twitter-typeahead .tt-menu .tt-suggestion.tt-highlight, .facer-editor .form-group .twitter-typeahead .tt-menu .tt-suggestion.tt-cursor, .facer-editor .form-group .twitter-typeahead .tt-menu .tt-suggestion:hover {
  color: #2BADE3;
}
.facer-editor .form-group .tag-input {
  position: relative;
}
.facer-editor .form-group .tag-input input {
  padding-right: 54px;
}
.facer-editor .sub-palette {
  position: absolute;
  width: 280px;
  top: 47px;
  bottom: 0;
  padding-left: 0;
}
.facer-editor .sub-palette.slid {
  -webkit-transform: translateX(300px) !important;
  -moz-transform: translateX(300px) !important;
  -ms-transform: translateX(300px) !important;
  transform: translateX(300px) !important;
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 992px) {
  .facer-editor #sidebarToggle {
    display: block;
    position: absolute;
    left: -10px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: gray;
    cursor: pointer;
  }
  .facer-editor .sidebar-open {
    -webkit-transform: translateX(-285px);
    -moz-transform: translateX(-285px);
    -ms-transform: translateX(-285px);
    transform: translateX(-285px);
  }
}
@media screen and (max-height: 740px) {
  .facer-editor .watch-canvas-wrapper #previews {
    display: none;
  }
  .facer-editor .watch-canvas-wrapper .has-previews .watch-canvas {
    left: 0 !important;
  }
  .facer-editor .watch-canvas-wrapper #canvasOptions {
    bottom: -54px !important;
    right: -14px !important;
  }
  .facer-editor .watch-canvas-wrapper #canvasOptions .btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}
.facer-editor .list-input {
  position: relative;
}
.facer-editor .list-input input {
  width: calc(100% - 20px);
  font-family: inherit !important;
  padding: 5px 0;
  margin: 0 10px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 18px;
  color: #555;
  font-weight: bold;
  -webkit-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s;
  -moz-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s;
  -ms-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s;
  transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s;
}
.facer-editor .list-input input:hover, .facer-editor .list-input input:focus {
  padding: 5px 0 5px 5px;
  outline: none;
  border: 1px solid #CCC;
}
.facer-editor .list-input input:focus {
  background-color: #fff;
  border: 2px solid #2BADE3;
}
.facer-editor .list-input:hover .list-input-overlays,
.facer-editor .list-input input:focus + .list-input-overlays {
  display: none;
}
.facer-editor .list-input .list-input-overlays {
  pointer-events: none;
  margin: 0 15px;
  border-radius: 3px;
}
.facer-editor .list-input .list-input-overlays i {
  position: absolute;
  top: 10px;
  right: 5px;
  z-index: 10;
}
.facer-editor .list-input.floating-list-input {
  margin: 0 auto 50px;
  width: 400px;
  -webkit-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s;
  -moz-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s;
  -ms-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s;
  transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s;
}
.facer-editor .list-input.floating-list-input.ng-enter, .facer-editor .list-input.floating-list-input.ng-leave {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  transition: none;
}
.facer-editor .list-input.floating-list-input input {
  text-align: center;
}
.facer-editor .list-input.floating-list-input .list-input-gradient {
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 87%, rgb(255, 255, 255) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(87%, rgba(255, 255, 255, 0)), color-stop(100%, rgb(255, 255, 255)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 87%, rgb(255, 255, 255) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 87%, rgb(255, 255, 255) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 87%, rgb(255, 255, 255) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 87%, rgb(255, 255, 255) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00dddddd", endColorstr="#f8f8f8", GradientType=1);
}
.facer-editor .floating-textarea {
  width: 400px;
  height: 50px;
  background: transparent;
  text-align: center;
  border: none;
  resize: none;
  border-radius: 3px;
}
.facer-editor .floating-textarea:hover, .facer-editor .floating-textarea:focus {
  outline: none;
  border: 1px solid #CCC;
}
.facer-editor .floating-textarea:focus {
  border: 2px solid #2BADE3;
}
.facer-editor .style-list-well {
  width: 260px;
  padding-left: 0;
  padding-right: 0;
}
.facer-editor .style-list {
  overflow: auto;
  padding: 10px 0px;
}
.facer-editor .style-list .list-group {
  width: calc(50% - 10px);
  height: 125px;
  margin: 5px;
  display: inline-block;
}
.facer-editor .style-list .list-group .list-group-item {
  border: none;
  box-shadow: 0px 4px 15px -7px black;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-color: gray;
  border-radius: 6px;
}
.facer-editor .style-list .list-group .list-group-item.no-image {
  text-align: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.facer-editor .style-list .style-label {
  padding: 0 10px;
}
.facer-editor preset-browser .style-label {
  display: none;
}
.facer-editor preset-browser .style-list {
  white-space: nowrap;
}
.facer-editor preset-browser .style-list .list-group {
  width: 125px;
}
.facer-editor preset-browser .style-list .list-group .list-group-item.no-image {
  display: block !important;
}
.facer-editor .list-group .list-group-item.active {
  color: #2BADE3;
  background: #FFF;
  border-color: #2BADE3;
}
.facer-editor form.alignment-form {
  position: relative;
  width: 260px;
  height: 260px;
  background: #CCC;
}
.facer-editor form.alignment-form input {
  position: absolute;
}
.facer-editor form.alignment-form [value="0"],
.facer-editor form.alignment-form [value="1"],
.facer-editor form.alignment-form [value="2"] {
  top: 10px;
}
.facer-editor form.alignment-form [value="3"],
.facer-editor form.alignment-form [value="4"],
.facer-editor form.alignment-form [value="5"] {
  top: 126px;
}
.facer-editor form.alignment-form [value="6"],
.facer-editor form.alignment-form [value="7"],
.facer-editor form.alignment-form [value="8"] {
  bottom: 10px;
}
.facer-editor form.alignment-form [value="0"],
.facer-editor form.alignment-form [value="3"],
.facer-editor form.alignment-form [value="6"] {
  left: 10px;
}
.facer-editor form.alignment-form [value="1"],
.facer-editor form.alignment-form [value="4"],
.facer-editor form.alignment-form [value="7"] {
  left: 126px;
}
.facer-editor form.alignment-form [value="2"],
.facer-editor form.alignment-form [value="5"],
.facer-editor form.alignment-form [value="8"] {
  right: 10px;
}
.facer-editor .hr {
  margin: 10px 0 5px;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  clear: both;
}
.facer-editor .vr {
  display: inline-block;
  margin: 0px 10px -10px 9px;
  width: 1px;
  height: 29px;
  background: #DDD;
  clear: both;
}
.facer-editor .pull-left {
  float: left;
}
.facer-editor .pull-right {
  float: right;
}
.facer-editor .btn-default {
  border-color: #ccc;
}
.facer-editor .btn-group-primary .btn-primary {
  border-right-color: #8de6ff !important;
  border-right-width: 2px;
}
.facer-editor .btn-group-green > .btn-green {
  border-right-color: #1eec1e !important;
  border-right-width: 2px;
}
.facer-editor .btn-primary {
  background: #2BADE3;
  border-color: transparent;
  color: #FFF !important;
  border-radius: 2px;
}
.facer-editor .btn-primary.element {
  color: #FFF;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}
.facer-editor .btn-green {
  background: #6DBD45;
  border-color: transparent;
}
.facer-editor .btn i:not(.glyphicon) {
  font-size: 20px;
  display: inline-block;
  height: 19px;
  vertical-align: middle;
  line-height: 0px;
  margin-top: -3px;
}
.facer-editor .btn-default.element {
  color: #000;
  font-size: 16px;
  text-align: center;
}
.facer-editor i.active {
  color: #2BADE3;
}
.facer-editor .icon-button {
  padding-top: 10px;
}
.facer-editor .icon-button.active {
  color: #2BADE3;
}
.facer-editor .row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.facer-editor .column-1 {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.facer-editor .auth-modal .row {
  display: block;
}
.facer-editor #themeIntroHighlight {
  position: absolute;
  width: 38px;
  height: 38px;
  top: 4px;
  left: 45.5px;
  border-radius: 50%;
  border: 3px solid #212121;
  background: #e4e4e4;
  z-index: 0;
}
.facer-editor .theme-intro-highlight {
  color: #212121 !important;
}
.facer-editor .z-1 {
  position: relative;
  z-index: 1;
}
.facer-editor #themeIntroTooltip {
  top: -143px;
  left: -256.5px;
  display: block;
}
.facer-editor #themeIntroTooltip .tooltip-inner {
  background: #212121;
  color: white;
  opacity: 1;
  box-shadow: 0 3px 30px #a7a7a7;
}
.facer-editor #themeIntroTooltip .tooltip-arrow {
  width: 20px;
  z-index: 100;
  height: 20px;
  background: #212121;
  transform: rotate(45deg);
  top: 119px;
  border: 3px solid #fff;
  border-left-width: 0;
  border-top-width: 0;
  left: 260px !important;
}
.facer-editor #themeIntroTooltip .tooltip-arrow-image {
  position: absolute;
  width: 29px;
  height: 13px;
  top: -9.5px;
  left: -14.5px;
  background-image: url("/img/popuptail.png");
}
.facer-editor .theme-tooltip {
  opacity: 1;
}
.facer-editor .theme-tooltip .tooltip-inner {
  max-width: none;
  border: 3px solid #fff;
  width: 485px;
  text-align: left;
  margin-left: 45px;
  padding: 15px 19px 3px;
  white-space: nowrap;
  border-radius: 10px;
}
.facer-editor .theme-tooltip .tooltip-inner a {
  color: #fff;
  text-decoration: underline;
}
.facer-editor .theme-tooltip .tooltip-inner > div {
  display: inline-block;
  vertical-align: top;
}
.facer-editor .theme-tooltip .tooltip-inner .tooltip-image {
  margin-right: 10px;
  margin-top: -4px;
}
.facer-editor .theme-tooltip .tooltip-inner .tooltip-text {
  width: 380px;
  white-space: normal;
}
.facer-editor .theme-tooltip .tooltip-inner .tooltip-close {
  position: absolute;
  top: 15px;
  right: 10px;
}
.facer-editor .theme-tooltip .tooltip-arrow {
  left: 265px !important;
}
.facer-editor .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.facer-editor .disabled {
  opacity: 0.3 !important;
  pointer-events: none;
  cursor: not-allowed !important;
}
.facer-editor .disabled.opacity-hide {
  opacity: 0 !important;
}
.facer-editor #fonts {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
  /*top: 10px;
  left: 200px;
  z-index: 20;*/
}
.facer-editor .visually-hidden {
  visibility: hidden;
  pointer-events: none;
}
.facer-editor .opacity-zero {
  opacity: 0;
}
.facer-editor .faded-fix {
  opacity: 0.3;
}
.facer-editor .faded {
  opacity: 0.3;
  pointer-events: none;
}
.facer-editor .text-red {
  color: #f31805;
}
.facer-editor #inProgress {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
}
.facer-editor #canvasSaveSpinner {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  z-index: 100000;
  background-image: url("/img/spinner-transparent.gif");
}
.facer-editor #saveSpinner img {
  width: 100px;
  margin: -44px;
}
.facer-editor #loadSpinner,
.facer-editor #register {
  z-index: 100000;
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 4px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.facer-editor #loadSpinner #close,
.facer-editor #register #close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
}
.facer-editor #loadSpinner {
  background-color: #FFF;
}
.facer-editor #loadSpinner img {
  width: 150px;
  height: 150px;
}
.facer-editor #register {
  background-color: rgba(255, 255, 255, 0.95);
}

.facer-message-bar-wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #90ddf2;
  border-bottom: 2px solid #31D1FF;
  z-index: 1000;
}
.facer-message-bar-wrapper .facer-message-bar {
  padding: 15px 40px;
  text-align: center;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
}
.facer-message-bar-wrapper .facer-message-bar-close {
  position: absolute;
  top: 18px;
  right: 18px;
  color: white;
}
.facer-message-bar-wrapper .facer-message-bar-close:after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}

.btn {
  outline: none !important;
  border-radius: 2px;
}

.btn-primary {
  background-color: #2BADE3;
  border-color: transparent;
}

.btn-primary:hover {
  background-color: #2BADE3;
}

.btn-green {
  background-color: #6DBD45;
  border-color: transparent;
}

.btn-green:hover {
  background-color: #7ccd53;
}

.circle {
  border-radius: 50%;
}

.half-turn {
  transform: rotate(90deg);
}

.relative {
  position: relative;
}

.style-loader {
  background-color: rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  /*loader {
     	margin: 60px auto;
     }*/
}

.text-dark {
  color: #777;
}

#editorVersion {
  display: inline-block;
  margin-left: 5px;
  font-size: 57%;
  color: #A6A6A6;
}

.font-list ul {
  width: 400px;
  max-height: 400px;
  overflow: auto;
}
.font-list li.font-group {
  font-weight: bold;
  color: #333;
}
.font-list li.font-option {
  font-size: 26px;
}
.font-list li.font-option a {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.font-list li.font-option.selected {
  background-color: #ddd;
}

.input-lock,
.absolute-cover,
.facer-editor .list-input .list-input-overlays,
.facer-editor .list-input .list-input-overlays .list-input-gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

[dnd-list],
[dnd-draggable] {
  position: relative;
}

.dndDraggingSource {
  display: none !important;
}

.drop-placeholder div {
  height: 50px;
  border-radius: 3px;
  background: #2BADE3;
  opacity: 0.1;
}

::-webkit-input-placeholder {
  color: #CCC;
}

.ui-datepicker {
  z-index: 1000 !important;
}

.uv-icon.uv-bottom-right {
  bottom: 30px !important;
  right: 30px !important;
}

[ng-click] {
  cursor: pointer;
}

/*.fade-in {
  opacity: 1;
}*/
.icon-pulse {
  -webkit-animation: pulse 1.5s linear infinite;
  -moz-animation: pulse 1.5s linear infinite;
  -ms-animation: pulse 1.5s linear infinite;
  animation: pulse 1.5s linear infinite;
}

@keyframes pulse {
  0% {
    color: #AAA;
  }
  50% {
    color: #2BADE3;
  }
  100% {
    color: #AAA;
  }
}
@-moz-keyframes pulse {
  0% {
    color: #AAA;
  }
  50% {
    color: #2BADE3;
  }
  100% {
    color: #AAA;
  }
}
@-webkit-keyframes pulse {
  0% {
    color: #AAA;
  }
  50% {
    color: #2BADE3;
  }
  100% {
    color: #AAA;
  }
}
@-ms-keyframes pulse {
  0% {
    color: #AAA;
  }
  50% {
    color: #2BADE3;
  }
  100% {
    color: #AAA;
  }
}
.fade-in.ng-enter,
.fade-in.ng-leave.ng-leave-active {
  opacity: 0;
}

.fade-in.ng-leave,
.fade-in.ng-enter.ng-enter-active {
  opacity: 1;
}

.slide-in-down.ng-enter,
.slide-in-down.ng-leave.ng-leave-active {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.slide-in-down.ng-leave,
.slide-in-down.ng-enter.ng-enter-active {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

html[data-useragent*="MSIE 10.0"] .facer-editor #currentTimeSlider[type=range],
html[data-useragent*="rv:11.0"] .facer-editor #currentTimeSlider[type=range] {
  position: relative;
  z-index: 1000;
  padding: 0;
}
html[data-useragent*="MSIE 10.0"] .facer-editor #currentTimeSliderWrapper,
html[data-useragent*="rv:11.0"] .facer-editor #currentTimeSliderWrapper {
  padding: 6px;
}

:root {
  --facer-default-font: "Roboto", Helvetica, Arial, sans-serif;
  --facer-text-size-small: 12px;
  --facer-text-size-normal: 14px;
}

.normal-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body, .muted-text, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle, .bold-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label, .light-text, .dark-text, .page-title, .page-title-medium, .page-subtitle, .button-text, .caption-text, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text, .text-button, .small-text-button, .large-button-text, .xlarge-button-text, .card-text-title,
.modal-text-title,
.editor-modal .facer-modal-content .facer-modal-title, .card-text-title-hovered, .stat-text-value, .detail-text, .tag-pill, .small-detail-text, .jumbo-text, .jumbo-text-detail, .facer-button, .editor-modal .btn, .facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-button.btn-sm,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i, .facer-editor, .facer-editor .btn, .facer-editor .btn i:not(.glyphicon), .facer-editor .btn-xl.btn i, .facer-editor .btn-lg.btn i,
.facer-editor .btn-sm.btn i {
  font-family: var(--facer-default-font);
  color: var(--facer-dark);
}

.muted-text, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle {
  color: var(--facer-muted);
}

.bold-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  font-weight: 500;
}

.light-text {
  color: var(--facer-light);
}

.dark-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  color: var(--facer-dark);
}

.page-title {
  font-weight: 500;
  font-size: 26px;
}

.page-title-medium {
  font-weight: 500;
  font-size: 22px;
}

.page-subtitle, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle, .jumbo-text-detail {
  font-weight: 400;
  font-size: 14px;
  color: var(--facer-light);
}

.button-text, .large-button-text, .xlarge-button-text, .facer-button, .editor-modal .btn, .facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn, .facer-editor .btn i:not(.glyphicon), .facer-editor .btn-xl.btn i, .facer-editor .btn-lg.btn i {
  font-weight: 500;
  font-size: 14px;
}

.caption-text, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text {
  font-weight: 400;
  font-size: 14px;
  font-style: italic;
}

.text-button, .small-text-button, .facer-button.btn-sm, .editor-modal .btn-sm.btn,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i, .facer-editor .btn-sm.btn,
.facer-editor .btn-sm.btn i {
  font-weight: 500;
  font-size: 14px;
  color: var(--facer-blue);
}
.text-button:hover, .small-text-button:hover, .facer-button.btn-sm:hover, .editor-modal .btn-sm.btn:hover,
.facer-button.btn-sm i:hover,
.editor-modal .btn-sm.btn i:hover, .facer-editor .btn-sm.btn:hover,
.facer-editor .btn-sm.btn i:hover {
  color: var(--facer-blue-highlight);
}

.small-text-button, .facer-button.btn-sm, .editor-modal .btn-sm.btn,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i, .facer-editor .btn-sm.btn,
.facer-editor .btn-sm.btn i {
  font-weight: 500;
  font-size: 11px;
}

.text-button-completed {
  font-weight: 400;
  font-style: italic;
  color: var(--facer-light);
}

.large-button-text, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn-lg.btn i {
  font-weight: 500;
  font-size: 18px;
}

.xlarge-button-text, .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-editor .btn-xl.btn i {
  font-weight: 500;
  font-size: 26px;
}

.card-text-title, .card-text-title-hovered, .stat-text-value,
.modal-text-title,
.editor-modal .facer-modal-content .facer-modal-title {
  font-weight: 500;
  font-size: 20px;
}

.card-text-title-hovered {
  color: var(--facer-blue);
}

.stat-text-value {
  font-weight: bold;
  color: var(--facer-blue);
}

.detail-text, .tag-pill {
  font-size: 12px;
}

.small-detail-text {
  font-size: 11px;
}

.jumbo-text {
  font-weight: 500;
  font-size: 30px;
}

.text-link {
  font-weight: bold;
  color: var(--facer-blue) !important;
}
.text-link:hover {
  color: var(--facer-blue-highlight) !important;
}
.text-link.disabled {
  color: #999 !important;
  cursor: not-allowed;
}
.text-link i {
  vertical-align: middle;
  font-size: 130%;
}
.text-link.text-link-orange {
  color: orange !important;
}
.text-link.text-link-orange:hover {
  color: #ffaf1d !important;
}

/**
 * @deprecated This file is deprecated as of 2021-10-24 and will be removed in a future update.
 * Please use '4_elements/button.scss' for all button-related styles.
 * 
 * TODO: Remove this file once all references have been updated to use 4_elements/button.scss
 */
:root {
  --facer-default-font: "Roboto", Helvetica, Arial, sans-serif;
  --facer-text-size-small: 12px;
  --facer-text-size-normal: 14px;
}

.normal-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body, .muted-text, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle, .bold-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label, .light-text, .dark-text, .page-title, .page-title-medium, .page-subtitle, .button-text, .caption-text, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text, .text-button, .small-text-button, .large-button-text, .xlarge-button-text, .card-text-title,
.modal-text-title,
.editor-modal .facer-modal-content .facer-modal-title, .card-text-title-hovered, .stat-text-value, .detail-text, .tag-pill, .small-detail-text, .jumbo-text, .jumbo-text-detail, .facer-button, .editor-modal .btn, .facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-button.btn-sm,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i, .facer-editor, .facer-editor .btn, .facer-editor .btn i:not(.glyphicon), .facer-editor .btn-xl.btn i, .facer-editor .btn-lg.btn i,
.facer-editor .btn-sm.btn i {
  font-family: var(--facer-default-font);
  color: var(--facer-dark);
}

.muted-text, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle {
  color: var(--facer-muted);
}

.bold-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  font-weight: 500;
}

.light-text {
  color: var(--facer-light);
}

.dark-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  color: var(--facer-dark);
}

.page-title {
  font-weight: 500;
  font-size: 26px;
}

.page-title-medium {
  font-weight: 500;
  font-size: 22px;
}

.page-subtitle, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle, .jumbo-text-detail {
  font-weight: 400;
  font-size: 14px;
  color: var(--facer-light);
}

.button-text, .large-button-text, .xlarge-button-text, .facer-button, .editor-modal .btn, .facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn, .facer-editor .btn i:not(.glyphicon), .facer-editor .btn-xl.btn i, .facer-editor .btn-lg.btn i {
  font-weight: 500;
  font-size: 14px;
}

.caption-text, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text {
  font-weight: 400;
  font-size: 14px;
  font-style: italic;
}

.text-button, .small-text-button, .facer-button.btn-sm, .editor-modal .btn-sm.btn,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i, .facer-editor .btn-sm.btn,
.facer-editor .btn-sm.btn i {
  font-weight: 500;
  font-size: 14px;
  color: var(--facer-blue);
}
.text-button:hover, .small-text-button:hover, .facer-button.btn-sm:hover, .editor-modal .btn-sm.btn:hover,
.facer-button.btn-sm i:hover,
.editor-modal .btn-sm.btn i:hover, .facer-editor .btn-sm.btn:hover,
.facer-editor .btn-sm.btn i:hover {
  color: var(--facer-blue-highlight);
}

.small-text-button, .facer-button.btn-sm, .editor-modal .btn-sm.btn,
.facer-button.btn-sm i,
.editor-modal .btn-sm.btn i, .facer-editor .btn-sm.btn,
.facer-editor .btn-sm.btn i {
  font-weight: 500;
  font-size: 11px;
}

.text-button-completed {
  font-weight: 400;
  font-style: italic;
  color: var(--facer-light);
}

.large-button-text, .facer-button.btn-lg i, .editor-modal .btn-lg.btn i, .facer-editor .btn-lg.btn i {
  font-weight: 500;
  font-size: 18px;
}

.xlarge-button-text, .facer-button.btn-xl i, .editor-modal .btn-xl.btn i, .facer-editor .btn-xl.btn i {
  font-weight: 500;
  font-size: 26px;
}

.card-text-title, .card-text-title-hovered, .stat-text-value,
.modal-text-title,
.editor-modal .facer-modal-content .facer-modal-title {
  font-weight: 500;
  font-size: 20px;
}

.card-text-title-hovered {
  color: var(--facer-blue);
}

.stat-text-value {
  font-weight: bold;
  color: var(--facer-blue);
}

.detail-text, .tag-pill {
  font-size: 12px;
}

.small-detail-text {
  font-size: 11px;
}

.jumbo-text {
  font-weight: 500;
  font-size: 30px;
}

.text-link {
  font-weight: bold;
  color: var(--facer-blue) !important;
}
.text-link:hover {
  color: var(--facer-blue-highlight) !important;
}
.text-link.disabled {
  color: #999 !important;
  cursor: not-allowed;
}
.text-link i {
  vertical-align: middle;
  font-size: 130%;
}
.text-link.text-link-orange {
  color: orange !important;
}
.text-link.text-link-orange:hover {
  color: #ffaf1d !important;
}

/**
 * @deprecated This file is deprecated as of 2021-10-24 and will be removed in a future update.
 * Please use '1_settings/colors.scss' for all color-related styles.
 * 
 * TODO: Remove this file once all references have been updated to use global/colors.scss
 */
.blue-text {
  color: #2bade3;
}

.premium-text {
  color: #eeb60b !important;
}

.red-text {
  color: #f31805 !important;
}

.media-button {
  color: white;
  display: inline-block;
  width: 48px;
  text-align: center;
  height: 48px !important;
  border-radius: 50%;
  font-size: 24px;
  line-height: 40px;
  background-color: rgba(0, 0, 0, 0.75);
  margin: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.media-button i {
  vertical-align: middle;
  display: block;
  line-height: 0;
}
.media-button i.icon-play {
  line-height: 0;
  margin-left: 5px;
}

.btn.btn-default.btn-secondary {
  border: 1px solid #bbb;
}

.btn.btn-primary-v2 {
  border: 2px solid #2bade3;
  color: #2bade3;
  background-color: white;
}

.facer-button, .editor-modal .btn, .facer-editor .btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  height: auto;
  line-height: normal;
  padding: 0 20px;
  border-radius: 16px;
}
.facer-button i:not(.glyphicon), .editor-modal .btn i:not(.glyphicon), .facer-editor .btn i:not(.glyphicon) {
  height: auto;
  margin: auto;
  line-height: 0;
}
.facer-button.btn-xl, .editor-modal .btn-xl.btn, .facer-editor .btn-xl.btn {
  height: 55px !important;
  padding: 0 20px;
  border-radius: 27.5px;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
}
.facer-button.btn-lg, .editor-modal .btn-lg.btn, .facer-editor .btn-lg.btn {
  height: 40px !important;
  padding: 0 20px;
  border-radius: 20px;
  vertical-align: middle;
}
.facer-button.btn-sm, .editor-modal .btn-sm.btn, .facer-editor .btn-sm.btn {
  height: 35px !important;
  padding: 0 20px;
  border-radius: 17.5px;
  vertical-align: middle;
}
.facer-button.btn-primary, .editor-modal .btn-primary.btn, .facer-editor .btn-primary.btn {
  color: white !important;
}
.facer-button.btn-primary i, .editor-modal .btn-primary.btn i, .facer-editor .btn-primary.btn i {
  color: white !important;
}
.facer-button.btn-primary:hover, .editor-modal .btn-primary.btn:hover, .facer-editor .btn-primary.btn:hover {
  box-shadow: 0 4px 6px 0 rgba(43, 173, 227, 0.2);
  background-color: #41b5e6;
  border: none;
}
.facer-button.btn-primary:active, .editor-modal .btn-primary.btn:active, .facer-editor .btn-primary.btn:active {
  border-color: #41b5e6;
}
.facer-button.btn-primary[disabled=disabled], .editor-modal .btn-primary[disabled=disabled].btn, .facer-editor .btn-primary[disabled=disabled].btn {
  background: #ededed;
  color: #b8b8b8 !important;
}
.facer-button.btn-rounded, .editor-modal .btn-rounded.btn, .facer-editor .btn-rounded.btn {
  border-radius: 110px;
  padding: 15px 40px;
  font-size: 16px;
}
.facer-button.btn-default, .editor-modal .btn-default.btn, .facer-editor .btn-default.btn {
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.facer-button.btn-default:hover, .editor-modal .btn-default.btn:hover, .facer-editor .btn-default.btn:hover {
  background-color: #d0d0d0;
}
.facer-button.btn-default:active, .editor-modal .btn-default.btn:active, .facer-editor .btn-default.btn:active {
  border-color: #d0d0d0;
}
.facer-button.navbar-btn, .editor-modal .navbar-btn.btn, .facer-editor .navbar-btn.btn {
  background: transparent;
  font-size: 14px;
  display: inline;
}
.facer-button.navbar-btn i, .editor-modal .navbar-btn.btn i, .facer-editor .navbar-btn.btn i {
  font-size: 20px;
}
.facer-button.input-btn, .editor-modal .input-btn.btn, .facer-editor .input-btn.btn {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 26px !important;
  width: 26px;
  padding: 0;
  color: white;
}
.facer-button.dropdown-toggle, .editor-modal .dropdown-toggle.btn, .facer-editor .dropdown-toggle.btn {
  font-weight: 400;
  padding: 0 15px 0 15px;
}
.facer-button.dropdown-toggle:focus, .editor-modal .dropdown-toggle.btn:focus, .facer-editor .dropdown-toggle.btn:focus {
  box-shadow: none;
  border-color: transparent;
}
.facer-button.dropdown-toggle:hover, .editor-modal .dropdown-toggle.btn:hover, .facer-editor .dropdown-toggle.btn:hover, .facer-button.dropdown-toggle:active, .editor-modal .dropdown-toggle.btn:active, .facer-editor .dropdown-toggle.btn:active, .facer-button.dropdown-toggle:focus, .editor-modal .dropdown-toggle.btn:focus, .facer-editor .dropdown-toggle.btn:focus {
  background-color: var(--facer-dark-2);
}
.facer-button .facer-button-tag, .editor-modal .btn .facer-button-tag, .facer-editor .btn .facer-button-tag {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  font-size: 70%;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  height: 22px;
  padding: 1px 10px 0;
  vertical-align: middle;
}

.editor-modal .facer-modal-backdrop {
  opacity: 0.2;
}
.editor-modal .facer-modal-content {
  min-width: 400px;
  border: none;
  overflow: hidden;
  padding: 0;
  border-radius: 15px;
}
.editor-modal .facer-modal-content .facer-modal-title {
  text-align: left;
  border-bottom: var(--grid-border-color);
  padding: 28px 20px;
}
.editor-modal .facer-modal-content .facer-modal-title .header-close-button {
  float: right;
  font-size: 83%;
}
.editor-modal .facer-modal-content .facer-modal-header {
  position: relative;
  border-bottom: var(--grid-border-style);
  padding: 50px 50px 20px;
}
.editor-modal .facer-modal-content .facer-modal-header .facer-modal-header-image {
  width: 154px;
  margin-bottom: 20px;
}
.editor-modal .facer-modal-content .facer-modal-header .facer-modal-title {
  border: none;
  padding: 0;
  text-align: center;
}
.editor-modal .facer-modal-content .facer-modal-header .header-close-button {
  position: absolute;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper {
  padding: 15px 20px 20px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: left;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-image .watch-container {
  width: 150px;
  height: 150px;
  margin: 75px 25px 35px 10px;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body {
  text-align: left;
  margin: 0;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .user .author-name {
  font-weight: bold;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-text {
  font-style: italic;
  padding-left: 10px;
  margin: 21px 0px 21px 0px;
  max-height: 150px;
  min-height: 50px;
  overflow: auto;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-image {
  margin: 10px 0;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-image img {
  width: 100%;
  border-radius: 3px;
  height: auto;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-list {
  max-height: 361px;
  overflow: auto;
  margin-bottom: 12px;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-list .comment {
  border-bottom: 1px solid rgba(43, 173, 227, 0.21);
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-list .comment-text {
  min-height: 0px;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form {
  width: 100%;
  margin-top: 15px;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  margin-bottom: 10px;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  vertical-align: middle;
  margin: 0;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox input {
  margin-right: 10px;
  margin-top: 3px;
  vertical-align: middle;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form textarea {
  width: 100%;
  height: 75px;
  padding: 5px 10px;
  resize: none;
  border: none;
  outline: none;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .panel {
  margin-top: 15px;
  padding: 8px 10px;
  border: none;
  box-shadow: none;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .panel.panel-warning {
  background: #ffeecf;
  color: #2c2c2c;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .submit-btn-wrapper {
  margin-top: 20px;
  gap: 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .submit-btn-wrapper .btn,
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .submit-btn-wrapper .btn-green {
  color: white;
  min-width: 0;
  margin: 0;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .submit-btn-wrapper .btn.disabled,
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .submit-btn-wrapper .btn-green.disabled {
  color: #2bade3 !important;
  opacity: 1 !important;
}
.editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .submit-btn-wrapper .btn-default {
  background: transparent;
  color: #2bade3;
  border: none;
}
@media (max-width: 767px) {
  .editor-modal .facer-modal-content {
    width: 100%;
    min-width: 0;
  }
  .editor-modal .facer-modal-content .facer-modal-body-wrapper {
    width: 100%;
  }
  .editor-modal .facer-modal-content .facer-modal-form button {
    margin-bottom: 0 !important;
  }
}
.editor-modal.comment-reply-modal .facer-modal-body-wrapper {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-image-wrapper {
  margin-right: 20px;
  margin-bottom: 20px;
}
.editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-image-wrapper .comment-preview-image {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}
.editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text {
  margin-bottom: 20px;
}
.editor-modal.publish-modal .facer-modal-content {
  width: 540px;
}
.editor-modal.publish-modal .facer-modal-content .facer-modal-body-wrapper,
.editor-modal.publish-modal .facer-modal-content .facer-modal-body {
  width: auto;
}
.editor-modal .facer-modal-scroll-wrapper {
  padding: 30px;
  max-height: 100%;
  overflow: auto;
}

.editor-insights {
  position: relative;
  top: -20px;
  display: grid;
  grid-template-columns: 300px 1fr;
}
.editor-insights h3 {
  font-size: 20px;
  color: #111;
  margin-top: 5px;
  font-family: univers-condensed;
}
.editor-insights .insight-grid-wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.editor-insights .insight-grid-wrapper.main-grid-wrapper {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.editor-insights .insight-grid-wrapper .insight-grid-2 {
  -webkit-flex: 2;
  -moz-flex: 2;
  -ms-flex: 2;
  flex: 2;
  margin-right: 20px;
}
.editor-insights .insight-grid-wrapper .insight-grid-1 {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.editor-insights .insight-grid-wrapper .insight-pie-wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.editor-insights .insight-grid-wrapper .insight-pie-wrapper .insight-pie-1 {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.editor-insights .editor-insights-master {
  overflow: auto;
  border-right: 1px solid #dedede;
  max-height: calc(100vh - 60px);
}
.editor-insights .editor-insights-master.loading {
  overflow: hidden;
}
.editor-insights .editor-insights-master .insights-section-header {
  padding: 5px 19px;
  font-size: 12px;
  border-bottom: 1px solid #dedede;
  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
  -moz-user-select: none; /* mozilla browsers */
  -khtml-user-select: none; /* webkit (konqueror) browsers */
  -ms-user-select: none; /* IE10+ */
  color: #333;
  font-weight: bold;
}
.editor-insights .editor-insights-master .insights-section-header .sort-option {
  margin-left: 5px;
  color: #999;
  font-weight: normal;
}
.editor-insights .editor-insights-master .insights-section-header .sort-option.selected {
  color: #333;
  font-weight: bold;
}
.editor-insights .editor-insights-master .insight-item-no-data {
  text-align: center;
  padding-top: 16px;
  color: #999;
}
.editor-insights .editor-insights-master .insight-item {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  border-bottom: 1px solid #dedede;
}
.editor-insights .editor-insights-master .insight-item .insight-item-preview {
  padding: 10px 15px;
}
.editor-insights .editor-insights-master .insight-item .insight-item-preview .insight-item-preview-image {
  width: 50px;
  height: 50px;
  border: 1px solid #777;
  border-radius: 50%;
}
.editor-insights .editor-insights-master .insight-item .insight-item-label {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-right: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.editor-insights .editor-insights-master .insight-item .insight-item-label .insight-item-label-secondary {
  display: block;
  font-size: 80%;
  font-weight: normal !important;
}
.editor-insights .editor-insights-master .insight-item .insight-item-right-label {
  padding-right: 15px;
}
.editor-insights .editor-insights-master .insight-item .insight-item-right-label span {
  font-size: 14px;
  color: #777;
  font-weight: bold;
}
.editor-insights .editor-insights-master .insight-item .insight-item-right-label i {
  margin-left: 5px;
  font-size: 18px;
  color: #999;
  vertical-align: middle;
}
.editor-insights .editor-insights-master .insight-item.insight-item-selected {
  background: #c9eaf9;
}
.editor-insights .editor-insights-master .insight-item.insight-item-selected .insight-item-label {
  font-weight: bold;
  color: #333;
}
.editor-insights .editor-insights-master .insight-item.insight-item-selected .insight-item-right-label span {
  color: #333;
}
.editor-insights .editor-insights-master .insight-item.insight-item-selected .insight-item-right-label i {
  color: #333;
}
.editor-insights .editor-insights-master .insight-item.insight-item-loading .insight-item-preview .insight-item-preview-image {
  border-color: #DDD;
  background: #DDD;
}
.editor-insights .editor-insights-master .insight-item.insight-item-loading .insight-item-preview-label-primary,
.editor-insights .editor-insights-master .insight-item.insight-item-loading .insight-item-preview-label-secondary {
  color: #eee;
  background: #eee;
  border-radius: 4px;
}
.editor-insights .editor-insights-master .insight-item.insight-item-loading .insight-item-preview-label-secondary {
  width: 50%;
  margin-top: 5px;
  font-size: 50%;
}
.editor-insights .editor-insights-master:not(.loading) .insight-item:hover {
  background-color: #DDD;
}
.editor-insights .editor-insights-detail {
  overflow: auto;
  position: relative;
  height: calc(100vh - 60px);
}
.editor-insights .editor-insights-detail .watchface-stats {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.editor-insights .editor-insights-detail .watchface-stats .stat-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: none;
  width: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.editor-insights .editor-insights-detail .watchface-stats .stat-wrapper .stat-header a {
  margin-left: 5px;
  font-size: 14px;
}
.editor-insights .editor-insights-detail .watchface-stats .stat-wrapper .highlight-stats {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.editor-insights .editor-insights-detail .watchface-stats .chart {
  height: 100%;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.bootstrap-datetimepicker-widget {
  width: 41em !important;
}
.bootstrap-datetimepicker-widget .datepicker {
  width: 100%;
}
.bootstrap-datetimepicker-widget .datepicker.col-md-6 {
  width: 40%;
}
.bootstrap-datetimepicker-widget .datepicker [class^=datepicker] {
  width: 100%;
}
.bootstrap-datetimepicker-widget .datepicker [class^=datepicker] tr {
  white-space: normal;
}
.bootstrap-datetimepicker-widget .timepicker.col-md-6 {
  width: 57%;
}
.preset-browser {
  display: block;
  padding-bottom: 5px;
  background: rgba(255, 255, 255, 0.5);
}
.preset-browser .list-group {
  position: relative;
}
.preset-browser .list-group .active-border {
  display: none;
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border: 3px solid #2BADE3;
  border-radius: 3px;
}
.preset-browser .list-group.active .active-border {
  display: block;
}
.preset-browser .list-group .item-controls {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.preset-browser .list-group .item-controls .item-controls-remove {
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  padding: 5px;
}
.preset-browser .list-group .item-controls .item-controls-remove:hover {
  opacity: 0.5;
}
.preset-browser .list-group:hover .item-controls {
  display: block;
}
.preset-browser .icon-plus-wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  height: 100%;
}
.preset-browser .item-loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.preset-browser .item-loading spinner {
  width: 50%;
  height: 50%;
  margin: auto;
}
.preset-browser .item-loading spinner svg {
  width: 100% !important;
  height: 100% !important;
}
.preset-browser .item-loading spinner svg rect:not(:first-child) {
  fill: white;
}

.preset-browser-tall .list-group {
  height: 185px !important;
}
.preset-browser-tall .list-group a {
  background-color: #e8e8e8;
  border-radius: 2px;
}

#tagList {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 5px 0px 5px 6px;
  overflow: hidden;
  height: 34px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  white-space: nowrap;
  text-align: left;
}
#tagList .watchface-tag {
  display: inline-block;
  background: #777;
  color: white;
  font-size: 85%;
  margin: 0 3px;
  padding: 2px 10px;
  border-radius: 20px;
}

:root {
  --facer-default-font: "Roboto", Helvetica, Arial, sans-serif;
  --facer-text-size-small: 12px;
  --facer-text-size-normal: 14px;
}

.normal-text, .muted-text, .bold-text, .light-text, .dark-text, .page-title, .page-title-medium, .page-subtitle, .button-text, .caption-text, .text-button, .small-text-button, .large-button-text, .xlarge-button-text, .card-text-title,
.modal-text-title, .card-text-title-hovered, .stat-text-value, .detail-text, .tag-pill, .small-detail-text, .jumbo-text, .jumbo-text-detail, .facer-button, .facer-button i:not(.glyphicon), .facer-button.btn-xl i, .facer-button.btn-lg i, .facer-button.btn-sm,
.facer-button.btn-sm i, .facer-editor, .facer-editor .btn, .facer-editor .btn i:not(.glyphicon), .facer-editor .btn-xl.btn i, .facer-editor .btn-lg.btn i,
.facer-editor .btn-sm.btn i, .editor-modal .btn, .editor-modal .btn i:not(.glyphicon), .editor-modal .btn-xl.btn i, .editor-modal .btn-lg.btn i,
.editor-modal .btn-sm.btn i,
.editor-modal .facer-modal-content .facer-modal-title, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text {
  font-family: var(--facer-default-font);
  color: var(--facer-dark);
}

.muted-text, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle {
  color: var(--facer-muted);
}

.bold-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  font-weight: 500;
}

.light-text {
  color: var(--facer-light);
}

.dark-text, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-form .confirm-checkbox label {
  color: var(--facer-dark);
}

.page-title {
  font-weight: 500;
  font-size: 26px;
}

.page-title-medium {
  font-weight: 500;
  font-size: 22px;
}

.page-subtitle, .jumbo-text-detail, .editor-modal .facer-modal-content .facer-modal-header .facer-modal-subtitle {
  font-weight: 400;
  font-size: 14px;
  color: var(--facer-light);
}

.button-text, .large-button-text, .xlarge-button-text, .facer-button, .facer-button i:not(.glyphicon), .facer-button.btn-xl i, .facer-button.btn-lg i, .facer-editor .btn, .facer-editor .btn i:not(.glyphicon), .facer-editor .btn-xl.btn i, .facer-editor .btn-lg.btn i, .editor-modal .btn, .editor-modal .btn i:not(.glyphicon), .editor-modal .btn-xl.btn i, .editor-modal .btn-lg.btn i {
  font-weight: 500;
  font-size: 14px;
}

.caption-text, .editor-modal.comment-reply-modal .facer-modal-body-wrapper .comment-preview .comment-preview-text {
  font-weight: 400;
  font-size: 14px;
  font-style: italic;
}

.text-button, .small-text-button, .facer-button.btn-sm,
.facer-button.btn-sm i, .facer-editor .btn-sm.btn,
.facer-editor .btn-sm.btn i, .editor-modal .btn-sm.btn,
.editor-modal .btn-sm.btn i {
  font-weight: 500;
  font-size: 14px;
  color: var(--facer-blue);
}
.text-button:hover, .small-text-button:hover, .facer-button.btn-sm:hover,
.facer-button.btn-sm i:hover, .facer-editor .btn-sm.btn:hover,
.facer-editor .btn-sm.btn i:hover, .editor-modal .btn-sm.btn:hover,
.editor-modal .btn-sm.btn i:hover {
  color: var(--facer-blue-highlight);
}

.small-text-button, .facer-button.btn-sm,
.facer-button.btn-sm i, .facer-editor .btn-sm.btn,
.facer-editor .btn-sm.btn i, .editor-modal .btn-sm.btn,
.editor-modal .btn-sm.btn i {
  font-weight: 500;
  font-size: 11px;
}

.text-button-completed {
  font-weight: 400;
  font-style: italic;
  color: var(--facer-light);
}

.large-button-text, .facer-button.btn-lg i, .facer-editor .btn-lg.btn i, .editor-modal .btn-lg.btn i {
  font-weight: 500;
  font-size: 18px;
}

.xlarge-button-text, .facer-button.btn-xl i, .facer-editor .btn-xl.btn i, .editor-modal .btn-xl.btn i {
  font-weight: 500;
  font-size: 26px;
}

.card-text-title, .card-text-title-hovered, .stat-text-value,
.modal-text-title,
.editor-modal .facer-modal-content .facer-modal-title {
  font-weight: 500;
  font-size: 20px;
}

.card-text-title-hovered {
  color: var(--facer-blue);
}

.stat-text-value {
  font-weight: bold;
  color: var(--facer-blue);
}

.detail-text, .tag-pill {
  font-size: 12px;
}

.small-detail-text {
  font-size: 11px;
}

.jumbo-text {
  font-weight: 500;
  font-size: 30px;
}

.text-link {
  font-weight: bold;
  color: var(--facer-blue) !important;
}
.text-link:hover {
  color: var(--facer-blue-highlight) !important;
}
.text-link.disabled {
  color: #999 !important;
  cursor: not-allowed;
}
.text-link i {
  vertical-align: middle;
  font-size: 130%;
}
.text-link.text-link-orange {
  color: orange !important;
}
.text-link.text-link-orange:hover {
  color: #ffaf1d !important;
}

.tag-pill {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  display: inline-block;
  height: 16px;
  padding: 0 10px;
  border-radius: 8px;
  background: #2BADE3;
  color: white;
  text-transform: capitalize;
}
.tag-pill.tag-pill-block {
  display: block;
}
.tag-pill.tag-pill-small {
  height: 12px;
  padding: 1px 6px;
  font-size: 8px;
  vertical-align: middle;
}
.tag-pill.tag-pill-blue {
  background: #2BADE3;
}
.tag-pill.tag-pill-gold {
  background: #eeb60b;
}
.tag-pill.tag-pill-gray {
  background: #a1a1a1;
}
.tag-pill.tag-pill-red {
  background: #f31805;
}
.tag-pill.tag-pill-green {
  background: rgb(25, 180, 77);
}

.slider-input-scale {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  font-size: 10px;
  color: #25333c;
}
.slider-input-scale.slider-input-scale-top {
  margin-bottom: -3px;
}
.slider-input-scale.slider-input-scale-bottom {
  margin-top: -3px;
}

@-moz-document url-prefix() {
  .slider-input-scale.slider-input-scale-top {
    margin-bottom: -9px;
  }
  .slider-input-scale.slider-input-scale-bottom {
    margin-top: -10px;
  }
}
input[type=range].slider-input {
  background: transparent;
}

input[type=range].slider-input {
  -webkit-appearance: none;
  width: 100%;
  margin: 5px 0;
}

input[type=range].slider-input:focus {
  outline: none;
}

input[type=range].slider-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #dcdcdc;
  border-radius: 5px;
}

input[type=range].slider-input::-webkit-slider-thumb {
  box-shadow: 0px 0px px #000000, 0px 0px 0px #0d0d0d;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: #25333c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}

input[type=range].slider-input:focus::-webkit-slider-runnable-track {
  background: #2BADE3;
}

input[type=range].slider-input::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #dcdcdc;
  border-radius: 5px;
}

input[type=range].slider-input::-moz-range-thumb {
  box-shadow: 0px 0px px #000000, 0px 0px 0px #0d0d0d;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: #25333c;
  cursor: pointer;
}

input[type=range].slider-input::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range].slider-input::-ms-fill-lower {
  background: #dcdcdc;
  border-radius: 10px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range].slider-input::-ms-fill-upper {
  background: #dcdcdc;
  border-radius: 10px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range].slider-input::-ms-thumb {
  box-shadow: 0px 0px px #000000, 0px 0px 0px #0d0d0d;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: #25333c;
  cursor: pointer;
  height: 6px;
}

input[type=range].slider-input:focus::-ms-fill-lower {
  background: #dcdcdc;
}

input[type=range].slider-input:focus::-ms-fill-upper {
  background: #dcdcdc;
}

@supports (-ms-ime-align: auto) {
  input[type=range].slider-input {
    -webkit-appearance: none;
    width: 100%;
    margin: 0px 0;
  }
  input[type=range].slider-input:focus {
    outline: none;
  }
  input[type=range].slider-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: #aaaaaa;
    border-radius: 0px;
  }
  input[type=range].slider-input::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    height: 10px;
    width: 15px;
    border-radius: 0px;
    background: #25333c;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0px;
  }
  input[type=range].slider-input:focus::-webkit-slider-runnable-track {
    background: #b7b7b7;
  }
  input[type=range].slider-input::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: #aaaaaa;
    border-radius: 0px;
  }
  input[type=range].slider-input::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    height: 10px;
    width: 15px;
    border-radius: 0px;
    background: #25333c;
    cursor: pointer;
  }
  input[type=range].slider-input::-ms-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  input[type=range].slider-input::-ms-fill-lower {
    background: #9d9d9d;
    border-radius: 0px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  }
  input[type=range].slider-input::-ms-fill-upper {
    background: #aaaaaa;
    border-radius: 0px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  }
  input[type=range].slider-input::-ms-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    width: 15px;
    border-radius: 0px;
    background: #25333c;
    cursor: pointer;
    height: 10px;
  }
  input[type=range].slider-input:focus::-ms-fill-lower {
    background: #aaaaaa;
  }
  input[type=range].slider-input:focus::-ms-fill-upper {
    background: #b7b7b7;
  }
}
.palette {
  font-size: 12px;
  width: 0;
  background: #f5f5f5;
}
.palette.open {
  width: 280px;
}
.palette.open.x-wide {
  width: 500px;
}

.palette-left.open {
  border-right: 1px solid #ddd;
  overflow-y: auto;
  z-index: 100;
}

.palette-right.open {
  border-left: 1px solid #ddd;
}

.palette-wrapper {
  z-index: 1;
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.palette-wrapper.palette-wrapper--auto-height {
  height: auto;
}

.palette-bg-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  text-align: center;
  z-index: 0;
}

.palette-wrapper-animated {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.palette-section-scroll-group {
  overflow: auto;
  z-index: 1;
  margin: 0 !important;
}
.palette-section-scroll-group.palette-section-scroll-group-flex {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.palette-section-scroll-group.palette-section-scroll-group-flex-hide {
  -webkit-flex: 0;
  -moz-flex: 0;
  -ms-flex: 0;
  flex: 0;
}

.palette-section-scroll-group-divider {
  height: 1px;
}

.palette-primary-button {
  padding: 20px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

.palette-section-new {
  background: #f5f5f5;
  position: relative;
  overflow: visible;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.palette-section-new hr {
  margin: 5px 10px;
  border: 0;
  border-top: solid 1px #dcdcdc;
}
.palette-section-new .palette-title {
  text-transform: uppercase;
  padding: 16px 0px 14px;
  margin: 0 10px;
  background: #f5f5f5;
  color: #393939;
  font-weight: 500;
  font-size: 12px;
}
.palette-section-new .with-border {
  border-bottom: solid 1px #dcdcdc;
}
.palette-section-new .palette-body {
  position: relative;
}
.palette-section-new .palette-body .palette-body-text {
  padding: 0 10px 10px 10px;
  color: #797979;
}
.palette-section-new .palette-body .palette-item {
  border: none;
  background: transparent;
  padding: 5px 10px;
  margin-bottom: 0px;
  border-radius: 0;
  color: #777;
  line-height: normal;
}
.palette-section-new .palette-body .palette-item .palette-item-title-bar {
  color: #555;
}
.palette-section-new .palette-body .palette-item .palette-item-title-bar .palette-item-title {
  display: inline-block;
}
.palette-section-new .palette-body .palette-item .palette-item-title-bar .palette-item-title .admin-tag-pill {
  margin-bottom: 2px;
  vertical-align: bottom;
}
.palette-section-new .palette-body .palette-item .palette-item-title-bar .palette-item-value {
  display: inline-block;
  float: right;
  font-size: 80%;
  margin-top: 3px;
}
.palette-section-new .palette-body .palette-item .palette-item-title-bar .palette-item-value input {
  margin-top: 0;
  margin-right: 1px;
}
.palette-section-new .palette-body .palette-item.palette-item-title-only {
  margin-bottom: 10px;
}
.palette-section-new .palette-body .palette-item .palette-item-input {
  margin: 10px 0;
}
.palette-section-new .palette-body .palette-item .palette-item-input .checkbox {
  margin: 0;
}
.palette-section-new .palette-body .palette-item .palette-item-input .slider-input {
  margin: 20px 0;
}
.palette-section-new .palette-body .palette-item .palette-item-input input[type=range].slider-input::-webkit-slider-thumb {
  background: #555;
}
.palette-section-new .palette-body .palette-item .palette-item-input input[type=range].slider-input::-moz-range-thumb {
  background: #555;
}
.palette-section-new .palette-body .palette-item .palette-item-input .palette-item-input-label {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}
.palette-section-new .palette-body .palette-item .palette-item-input .palette-item-input-select {
  text-align: right;
}
.palette-section-new .palette-body .palette-item .palette-item-input .palette-item-input-select .palette-item-input-select-option {
  border-radius: 5px;
  margin-left: 10px;
  padding: 5px 10px;
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
}
.palette-section-new .palette-body .palette-item .palette-item-input .palette-item-input-select .palette-item-input-select-option.selected {
  color: white;
  background: rgba(0, 0, 0, 0.5);
}
.palette-section-new .palette-body .palette-item .palette-item-input.palette-item-input-colorpicker {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}
.palette-section-new .palette-body .palette-item .palette-item-footer {
  font-size: 80%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.palette-section-new .palette-body .palette-item .palette-item-footer .palette-item-footer-left {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.palette-section-new .palette-body .palette-item .palette-item-footer .palette-item-footer-right {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: right;
}
.palette-section-new .palette-body .watch-container {
  margin: 75px auto;
  width: 180px;
  height: 180px;
}
.palette-section-new .palette-tabs {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  margin: 0 10px;
  border-bottom: solid 1px #dcdcdc;
}
.palette-section-new .palette-tabs .palette-tab {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  line-height: 39px;
  font-weight: bold;
  font-size: 12px;
  color: #393939;
  text-transform: uppercase;
}
.palette-section-new .palette-tabs .palette-tab i {
  vertical-align: middle;
  margin-top: 1px;
  margin-right: 5px;
  display: inline-block;
}
.palette-section-new .palette-tabs .palette-tab.active {
  color: #2bade3;
  border-bottom: 4px solid #2bade3;
}
.palette-section-new .palette-tabs .palette-tab.active svg path {
  fill: #2bade3;
}
.palette-section-new .palette-tabs .palette-tab:hover {
  color: #2bade3;
}
.palette-section-new.palette-section-end-margin {
  margin-bottom: 50%;
}
.palette-section-new#watchPreview.palette-section {
  z-index: 10;
}
.palette-section-new#watchPreview.palette-section #watchPreviewContainer {
  padding: 0.1px 0;
}
.palette-section-new#watchPreview.palette-section i {
  color: #a1a1a1;
}
.palette-section-new#watchPreview.palette-section .top-left-corner-icon-button,
.palette-section-new#watchPreview.palette-section .bottom-left-corner-icon-button,
.palette-section-new#watchPreview.palette-section .top-right-corner-icon-button,
.palette-section-new#watchPreview.palette-section .bottom-right-corner-icon-button {
  position: absolute;
  font-size: 18px;
  color: #ddd;
}
.palette-section-new#watchPreview.palette-section .top-left-corner-icon-button:hover,
.palette-section-new#watchPreview.palette-section .bottom-left-corner-icon-button:hover,
.palette-section-new#watchPreview.palette-section .top-right-corner-icon-button:hover,
.palette-section-new#watchPreview.palette-section .bottom-right-corner-icon-button:hover {
  color: #999;
}
.palette-section-new#watchPreview.palette-section .top-right-corner-icon-button,
.palette-section-new#watchPreview.palette-section .bottom-right-corner-icon-button {
  right: 10px;
}
.palette-section-new#watchPreview.palette-section .top-left-corner-icon-button,
.palette-section-new#watchPreview.palette-section .top-right-corner-icon-button {
  top: 10px;
}
.palette-section-new#watchPreview.palette-section .top-left-corner-icon-button,
.palette-section-new#watchPreview.palette-section .bottom-left-corner-icon-button {
  left: 10px;
}
.palette-section-new#watchPreview.palette-section .bottom-left-corner-icon-button,
.palette-section-new#watchPreview.palette-section .bottom-right-corner-icon-button {
  bottom: 10px;
}
.palette-section-new#watchPreview.palette-section .dropdown-menu > ul > a {
  padding: 3px 6px 3px 15px;
}
.palette-section-new#watchPreview.palette-section .watch-skin-list ul {
  width: 250px;
}

.layer-list-nav {
  position: relative;
  height: 40px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.layer-list-nav .layer-list-nav-btn-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  font-size: 14px;
  color: #2bade3;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.layer-list-nav .layer-list-nav-btn-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  font-size: 14px;
  color: #2bade3;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  gap: 10px;
}
.layer-list-nav .layer-list-nav-error {
  background: #f31805;
  color: white;
  font-size: 80%;
  padding: 2px 6px;
  border-radius: 4px;
}
.layer-list-nav .layer-list-nav-title {
  color: #393939;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
}
.layer-list-nav .layer-list-nav-link {
  text-decoration: none;
}
.layer-list-nav .layer-list-nav-link i {
  vertical-align: middle;
}
.layer-list-nav.layer-list-nav-nested {
  border-bottom: solid 1px #dcdcdc;
  margin: 0 10px !important;
}

layer-list {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}
layer-list .layer-list-scroll-palette {
  padding-bottom: 34px;
  overflow: auto;
  background-color: transparent;
}
layer-list .layer-list .layer-header {
  font-weight: bold;
  padding: 0 10px;
  text-transform: capitalize;
}
layer-list .layer-list .layer {
  position: relative;
  margin: 5px;
  padding: 0;
  border-radius: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  height: 50px;
  color: #777;
}
layer-list .layer-list .layer:focus {
  z-index: 2;
}
layer-list .layer-list .layer .layer-content-section {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
layer-list .layer-list .layer .layer-content-section .colorpicker-input {
  margin: 0 8px;
}
layer-list .layer-list .layer .element-thumbnail {
  font-size: 25px;
  padding-top: 5px;
  padding-right: 6px;
}
layer-list .layer-list .layer .complication-preview {
  -webkit-flex: 0 0 40px;
  -moz-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  padding: 0 5px 0;
}
layer-list .layer-list .layer .complication-preview.complication-preview-xlarge .complication-preview-content, layer-list .layer-list .layer .complication-preview.complication-preview-round .complication-preview-content {
  height: 38px;
  width: 38px;
  border-radius: 19px;
  border: 3px solid black;
  background: black;
}
layer-list .layer-list .layer .complication-preview.complication-preview-rectangle .complication-preview-content {
  height: 38px;
  width: auto;
  border-radius: 5px;
  border: 3px solid black;
  background: black;
}
layer-list .layer-list .layer .complication-preview.complication-preview-off .complication-preview-content {
  border: 1px dashed #888 !important;
  background: transparent !important;
}
layer-list .layer-list .layer .complication-preview.complication-preview-off.complication-preview-rectangle .complication-preview-content {
  width: 91px !important;
}
layer-list .layer-list .layer .handle {
  font-size: 22px;
  padding-top: 4px;
  padding-left: 4px;
  color: #bbb;
}
layer-list .layer-list .layer .layer-title-wrapper {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
layer-list .layer-list .layer .layer-title-wrapper .layer-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
layer-list .layer-list .layer .layer-title-wrapper input {
  color: #111 !important;
  outline: none !important;
  border: none;
  border-radius: 2px;
  padding: 5px;
  margin-right: 5px;
}
layer-list .layer-list .layer .layer-action-stack {
  padding: 5px 5px 0 3px;
  color: #bbb;
  -webkit-justify-content: space-evenly;
  -moz-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  justify-content: space-evenly;
}
layer-list .layer-list .layer .layer-action-stack i {
  display: inline-block;
}
layer-list .layer-list .layer .layer-action-stack i:not(.active):hover {
  color: #777 !important;
}
layer-list .layer-list .layer .layer-action-stack .dropdown-toggle {
  box-shadow: none !important;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
layer-list .layer-list .layer .layer-selection-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 5px;
}
layer-list .layer-list .layer:not(.unhoverable).hovered, layer-list .layer-list .layer:not(.unhoverable):hover {
  border-color: #2BADE3;
  color: #2BADE3;
  border-width: 1px;
}
layer-list .layer-list .layer:not(.unhoverable).hovered .handle, layer-list .layer-list .layer:not(.unhoverable):hover .handle {
  color: #2BADE3 !important;
}
layer-list .layer-list .layer.selected {
  color: #555;
}
layer-list .layer-list .layer.selected .layer-title {
  font-weight: bold;
}
layer-list .layer-list .layer.selected .layer-selection-box {
  background-color: #ffeecf !important;
  border: 2px solid #FFA500 !important;
}
layer-list .layer-list .layer.selected .handle {
  color: #555 !important;
}
layer-list .layer-list .layer.unhoverable {
  cursor: default;
}
layer-list .layer-list .layer.drop-placeholder.dndPlaceholder {
  border: 0;
  height: 50px;
  border-radius: 3px;
  background: #2BADE3;
  opacity: 0.1;
}
layer-list .layer-list.layer-list-top-level .layer {
  background: white;
  border-radius: 4px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 5px 10px;
}
layer-list .layer-list.layer-list-top-level .layer .layer-title {
  font-size: 13px;
  font-weight: 500;
  color: #2c2c2c;
}
layer-list .photo-album-toolbar {
  padding: 0 5px;
}
layer-list .photo-album-toolbar .photo-album-toolbar-header {
  text-align: left;
  color: #eeb60b;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list {
  margin: 0;
  text-align: left;
  padding: 0;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container {
  border-radius: 10px;
  position: relative;
  display: inline-block;
  margin: 5px;
  border: 2px solid transparent;
  vertical-align: top;
  width: calc(50% - 12px);
  padding-bottom: 53%;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container .remove-image {
  display: none;
  position: absolute;
  width: 15px;
  height: 15px;
  top: -7.5px;
  right: -7.5px;
  border-radius: 7.5px;
  text-align: center;
  line-height: 18px;
  color: #FFF;
  font-size: 7px;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container .photo-album-toolbar-image {
  border-radius: 8px;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container:hover {
  border-color: #2BADE3;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container:hover .remove-image {
  display: block;
  background-color: #2BADE3;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container.selected {
  border-color: #eeb60b !important;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container.selected .remove-image {
  display: block;
  background-color: #eeb60b;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container.add-image .photo-album-toolbar-image {
  border: 2px dashed gray;
  background-color: white;
  border-radius: 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  color: gray;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container.add-image .photo-album-toolbar-image:hover {
  border-color: #2BADE3;
  color: #2BADE3;
}
layer-list .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container.add-image .photo-album-toolbar-image:active {
  background-color: rgba(49, 209, 255, 0.25);
}
layer-list .photo-album-toolbar .photo-album-toolbar-list #photoAlbumImageUpload {
  display: none;
}

.configurator-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 10px;
  padding: 6px 0;
}
.configurator-option__options {
  display: flex;
  align-items: center;
}

.time-machine {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  background: #f5f5f5;
  padding: 0 15px;
  bottom: 0;
  right: 0;
  left: 0px;
  height: 60px;
  color: #2c2c2c;
}
.time-machine .time-machine-section {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}
.time-machine .timeline {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.time-machine #currentTimeSliderWrapper {
  position: relative;
  padding: 4px 7px 3px;
  margin: 0;
  border-radius: 5px;
  width: 100%;
}
.time-machine #currentTimeSliderWrapper input[type=range].slider-input::-webkit-slider-thumb {
  background: #25333c;
}
.time-machine #currentTimeSliderWrapper input[type=range].slider-input::-moz-range-thumb {
  background: #25333c;
}
.time-machine #currentTime {
  position: absolute;
  top: -6px;
  left: 45px;
  text-align: left;
  font-family: monospace;
}
.time-machine #timeMachineDisplay {
  position: relative;
  white-space: nowrap;
  margin: 0px 13px 0 14px;
}
.time-machine #timeMachineDisplay #timeMachineTitle {
  color: #a1a1a1;
  position: relative;
  z-index: 1;
  display: inline-block;
  line-height: normal;
  width: 100px;
  font-weight: 500;
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  width: 104px !important;
  margin-right: 18px;
  pointer-events: none;
}
.time-machine #timeMachineDisplay #timeMachineTitle .time-machine-reset {
  pointer-events: all;
  position: relative;
  color: #25333c;
}
.time-machine #timeMachineDisplay #timeMachineTitle .time-machine-reset:after {
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  content: "";
}
.time-machine #timeMachineDisplay #timeMachineTitle #currentTimeValue {
  font-size: 17px;
  font-weight: 100;
  color: #25333c;
  letter-spacing: 1px !important;
  font-weight: bold !important;
}
.time-machine #timeMachineDisplay #dateInputWrapper {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin-top: 0px;
}
.time-machine #timeMachineDisplay #dateInputWrapper #dateInput {
  margin: 0;
  color: #2c2c2c;
}
.time-machine #timeMachineDisplay #dateInputWrapper #dateInput img {
  height: 42px;
}
.time-machine #timeMachineDisplay #dateInputWrapper #dateInput span {
  position: absolute;
  top: 16px;
  font-size: 14px;
  text-align: center;
  right: 0;
  left: 0px;
  color: #25333c;
  font-weight: bold;
}
.time-machine #timeMachineDisplay input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  outline: none;
  cursor: pointer;
}
.time-machine .play-buttons {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  background: white;
  color: #25333c;
  border-radius: 19px;
  height: 36px;
  padding: 0 5px;
}
.time-machine .play-buttons .play-button {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 4px;
}
.time-machine .play-buttons .play-button i {
  margin-top: 5px;
}
.time-machine .play-buttons .play-button.play-button-1x i {
  font-size: 17px;
}
.time-machine .play-buttons .play-button.play-button-2x i {
  font-size: 20px;
  margin-top: 3px;
}
.time-machine .play-buttons .play-button.play-button-3x i {
  font-size: 30px;
}
.time-machine .play-buttons .play-button:first-child {
  border-radius: 50% 0 0 50%;
}
.time-machine .play-buttons .play-button:last-child {
  border-radius: 0 50% 50% 0;
}
.time-machine .play-buttons .play-button.active, .time-machine .play-buttons .play-button:hover {
  color: #2BADE3;
  border-color: #2BADE3;
}
.time-machine .play-buttons .play-button:active {
  opacity: 0.5;
}

.new-element-menu {
  display: block;
}
.new-element-menu .palette-body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #f5f5f5;
}
.new-element-menu .palette-box,
.new-element-menu .palette-box-inner-wrapper {
  position: relative;
  text-align: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.new-element-menu .palette-box {
  position: relative;
  text-align: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  background: #f5f5f5;
  border-style: solid;
  border-color: #bbb;
  border-width: 0;
}
.new-element-menu .palette-box:hover {
  background: #efefef;
  color: #2BADE3;
}
.new-element-menu .palette-box.palette-box-fill {
  display: none !important;
}
.new-element-menu .palette-box-medium {
  width: 50%;
  height: 125px;
}
.new-element-menu .palette-box-medium .palette-box-icon {
  font-size: 50px;
  margin-top: 0px;
  line-height: 46px;
}
.new-element-menu .palette-box-medium .palette-box-inner-wrapper {
  height: 100%;
}

.colorpicker-input {
  height: 30px;
  width: 30px;
  border: 1px #aaa solid;
  border-radius: 15px;
}

.palette-button {
  height: 60px;
  text-align: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  margin: 10px;
  height: 40px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  background: gray;
  color: white;
}
.palette-button i {
  display: inline-block;
  margin-right: 5px;
}
.palette-button.primary-button {
  color: white;
  background: #2BADE3;
}

.dark-mode .watch-canvas-wrapper .watch-canvas-inner-wrapper {
  background: #333 !important;
}

publish-form {
  display: block;
  padding-top: 60px;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
@media (max-width: 991px) {
  publish-form {
    padding-top: 80px;
  }
}
@media (min-width: 992px) {
  publish-form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
  }
}
publish-form .publish-form-wrapper {
  max-width: 900px;
  margin: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
publish-form .publish-form-wrapper .main-loader {
  text-align: center;
}
publish-form .publish-form-wrapper .main-loader spinner svg {
  height: 100px;
  width: 100px;
}
publish-form .publish-form-wrapper .publish-form-header {
  text-align: center;
}
publish-form .publish-form-wrapper .publish-form-header h3 {
  margin-bottom: 20px;
}
publish-form .publish-form-wrapper .publish-form-preview {
  height: 500px;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  publish-form .publish-form-wrapper .publish-form-preview {
    height: 400px;
  }
}
publish-form .publish-form-wrapper .publish-form-preview .publish-form-import-field {
  height: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media (max-width: 991px) {
  publish-form .publish-form-wrapper .publish-form-preview .publish-form-import-field {
    padding-top: 15px;
  }
}
publish-form .publish-form-wrapper .publish-form-preview .publish-form-import-field .watchface-media {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}
publish-form .publish-form-wrapper .publish-form-preview .publish-form-import-field .watchface-media .watchface-import-item {
  width: 100%;
  height: 100%;
  -webkit-flex: none;
  -moz-flex: none;
  -ms-flex: none;
  flex: none;
}
publish-form .publish-form-wrapper .publish-form-preview .publish-form-import-field .watchface-media .watchface-import-item .item-loading i, publish-form .publish-form-wrapper .publish-form-preview .publish-form-import-field .watchface-media .watchface-import-item .item-loading span {
  opacity: 0;
}
publish-form .publish-form-wrapper .publish-form-preview .publish-form-import-field .watchface-media .watchface-import-item i {
  font-size: 60px !important;
}
publish-form .publish-form-wrapper .publish-form-preview .publish-form-import-field .watchface-media .watchface-import-item span {
  font-size: 18px !important;
}
publish-form .publish-form-wrapper .publish-form-preview .watchface-media-item-help-block {
  padding: 10px;
  text-align: center;
}
publish-form .publish-form-wrapper .publish-form-field .publish-form-save-message {
  text-align: center;
}
@media (min-width: 992px) {
  publish-form .publish-form-wrapper .publish-form-field .publish-form-save-message {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    height: 500px;
    text-align: left;
  }
}
publish-form .publish-form-wrapper .publish-form-field .publish-form-save-message .btn {
  margin: auto;
}
publish-form .publish-form-wrapper .publish-form-field textarea#watchfaceDescription {
  height: 100px;
  min-width: 100%;
  max-width: 100%;
}
publish-form .publish-form-wrapper .publish-form-field #watchSelect {
  text-align: left;
}
publish-form .publish-form-wrapper .publish-form-field #watchSelect .caret {
  position: absolute;
  right: 14px;
  top: 15px;
}
publish-form .publish-form-wrapper .publish-form-field .watch-skin-list ul {
  width: 100%;
}

.facer-editor.ios-client publish-form {
  padding-top: 0;
}
.facer-editor.ios-client publish-form .publish-form-wrapper {
  height: 100%;
}
.facer-editor.ios-client publish-form .main-publish-form-row {
  height: 100%;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.facer-editor.ios-client publish-form .main-publish-form-row:not(.ng-hide) {
  display: flex !important;
}
.facer-editor.ios-client publish-form .main-publish-form-row .watch-container {
  margin: 95px auto 62px !important;
  width: 50vw !important;
  height: 50vw !important;
}
.facer-editor.ios-client publish-form .main-publish-form-row .publish-form-preview {
  flex: 1;
  height: auto;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  align-items: center;
}
.facer-editor.ios-client publish-form .main-publish-form-row .publish-form-field {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.facer-editor.ios-client publish-form .main-publish-form-row .publish-form-field.fill-publish-form {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.facer-editor.ios-client publish-form textarea#watchfaceDescription {
  height: 60px;
}
.facer-editor.ios-client publish-form .watchface-options {
  padding: 0;
  margin-bottom: 15px;
}

.mobile-creator {
  position: relative;
  height: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.mobile-creator .mobile-creator-error-page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.mobile-creator .mobile-creator-error-page .error-message {
  text-align: center;
  max-width: 80%;
  margin-bottom: 40px;
}
.mobile-creator .mobile-creator-template-select {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}
.mobile-creator .mobile-creator-template-select .model-options {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  margin: 0 15px;
  padding: 0 5px;
  background: #ddd;
  height: 30px;
  border-radius: 15px;
}
.mobile-creator .mobile-creator-template-select .model-options .model-option {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  font-weight: bold;
  color: #999;
  height: 21px;
  border-radius: 10.5px;
  -webkit-transition: all ease-in-out 0.3s;
  -moz-transition: all ease-in-out 0.3s;
  -ms-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.mobile-creator .mobile-creator-template-select .model-options .model-option.selected {
  color: #111;
  background: white;
}
.mobile-creator .mobile-creator-template-select .mobile-creator-template-select-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 17px;
  padding: 25px 20px;
}
.mobile-creator .mobile-creator-template-select .watchfaces-inner-wrapper {
  margin-right: -15px;
}
.mobile-creator .mobile-creator-template-select .watchfaces-inner-wrapper .badge-string {
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.mobile-creator .mobile-creator-template-select .watchfaces-inner-wrapper .watchface-hover-wrapper {
  margin-bottom: 0;
}
.mobile-creator .mobile-creator-template-select .watchfaces-inner-wrapper .facer-plus-lock-label {
  color: #2BADE3;
  text-align: center;
  font-size: 76%;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: -1px;
}
.mobile-creator .mobile-creator-template-select .watchfaces-inner-wrapper .no-skin-watch-preview-wrapper {
  padding-bottom: 110%;
}
.mobile-creator .mobile-creator-template-select .watchfaces-inner-wrapper .no-skin-watch-preview-wrapper a {
  position: absolute;
  margin: 5%;
  background-color: black;
  border-radius: inherit;
}
.mobile-creator .mobile-creator-template-select .watchfaces-wrapper {
  padding: 15px;
}
.mobile-creator .mobile-creator-template-select facer-plus-lock .lock-flag {
  right: 28px;
  top: 14px;
}
.mobile-creator .mobile-creator-edit {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.mobile-creator .mobile-creator-header {
  -webkit-flex: 0 0 50px;
  -moz-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 23px;
}
.mobile-creator .mobile-creator-header .header-logo {
  margin-left: 20px;
}
.mobile-creator .mobile-creator-header .header-logo img {
  width: 180px;
  height: auto;
  margin-top: 14px;
}
.mobile-creator .mobile-creator-header .header-close-button {
  font-size: 17px;
  padding: 22px 20px 10px;
}
.mobile-creator .mobile-creator-canvas {
  -webkit-flex: 2;
  -moz-flex: 2;
  -ms-flex: 2;
  flex: 2;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  padding: 0 20px 20px 20px;
}
.mobile-creator .mobile-creator-canvas .no-skin-watchface {
  margin: 0;
}
.mobile-creator .mobile-creator-canvas .no-skin-watchface .no-skin-watch-preview-wrapper {
  margin: 0;
}
.mobile-creator .mobile-creator-toolbar {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  padding: 0;
}
.mobile-creator .mobile-creator-toolbar .mobile-creator-toolbar-default {
  text-align: center;
}
.mobile-creator .mobile-creator-toolbar .ios-complication-toolbar {
  height: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.mobile-creator .mobile-creator-toolbar .ios-complication-toolbar header {
  -webkit-flex: 0;
  -moz-flex: 0;
  -ms-flex: 0;
  flex: 0;
  margin: 0 17px;
  border-top: 3px solid #ccc;
  border-end-end-radius: 10px;
  padding: 0px 10px;
}
.mobile-creator .mobile-creator-toolbar .ios-complication-toolbar header h3 {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 0;
}
.mobile-creator .mobile-creator-toolbar .watchface-media {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 20px 15px 30px;
  -webkit-overflow-scrolling: touch;
}
.mobile-creator .mobile-creator-toolbar .watchface-media header {
  position: sticky;
  left: -16px;
  margin: 0 5px;
  width: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.mobile-creator .mobile-creator-toolbar .watchface-media header div {
  height: calc(100% + 20px);
  padding-left: 12px;
  border-left: 1px solid #ddd;
  color: #aaa;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  -ms-align-items: flex-end;
  align-items: flex-end;
}
.mobile-creator .mobile-creator-toolbar .watchface-media::-webkit-scrollbar {
  display: none;
}
.mobile-creator .mobile-creator-toolbar .watchface-media .watchface-media-item-add {
  background: white;
  border: 3px solid #ccc;
}
.mobile-creator .mobile-creator-toolbar .watchface-media .watchface-media-item,
.mobile-creator .mobile-creator-toolbar .watchface-media .watchface-media-item-add {
  border-radius: 50%;
  overflow: hidden;
}
.mobile-creator .mobile-creator-toolbar .watchface-media .watchface-media-item-image {
  border: 4px solid #ddd;
  background-color: white;
  padding: 1px;
}
.mobile-creator .mobile-creator-toolbar .watchface-media .watchface-media-item-image.selected {
  border-color: #2BADE3;
}
.mobile-creator .mobile-creator-toolbar .watchface-media .watchface-media-item-image .watchface-media-item-image-content {
  height: 100%;
  background-color: black;
  background-size: cover;
  background-position: center center;
  border-radius: 50%;
}
.mobile-creator .mobile-creator-toolbar .watchface-media .rectangular-complication.watchface-media-item-image {
  border-radius: 10px;
}
.mobile-creator .mobile-creator-toolbar .watchface-media .rectangular-complication .watchface-media-item-image-content {
  border-radius: 6px;
}
.mobile-creator .mobile-creator-menu {
  -webkit-flex: 0 0 150px;
  -moz-flex: 0 0 150px;
  -ms-flex: 0 0 150px;
  flex: 0 0 150px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: space-evenly;
  -moz-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  justify-content: space-evenly;
}
.mobile-creator .mobile-creator-menu sync-button {
  position: relative;
}
.mobile-creator .mobile-creator-menu sync-button .sync-message-wrapper {
  top: 0;
  left: 50%;
}
.mobile-creator .mobile-creator-menu sync-button .sync-message-wrapper .sync-message {
  top: auto;
  bottom: 0;
  right: auto;
  left: auto;
  margin-right: 0;
  margin-bottom: 12px;
  transform: translateX(-50%);
}
.mobile-creator .mobile-creator-menu .menu-button {
  font-size: 25px;
  color: gray;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}
.mobile-creator .mobile-creator-menu .menu-button spinner svg {
  width: 50px;
  height: 50px;
}
.mobile-creator .mobile-creator-menu .menu-button .menu-button-label {
  font-size: 14px;
  font-weight: bold;
}
.mobile-creator .mobile-creator-menu .menu-button.menu-button-bigger {
  font-size: 38px;
}
.mobile-creator .mobile-creator-menu .menu-button.menu-button-disabled {
  opacity: 0.5;
}
.mobile-creator .complication-select-panel {
  color: #ddd;
}
.mobile-creator .complication-select-panel .creator-panel {
  background: #000;
}
.mobile-creator .complication-select-panel .creator-panel::-webkit-scrollbar {
  display: none;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper {
  padding: 15px;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper h3 {
  margin-top: 0;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section {
  margin-top: 20px;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  overflow: auto;
  padding: 15px 15px 20px;
  margin: -15px;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options::-webkit-scrollbar {
  display: none;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option {
  padding: 0 5px;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option .watchface-media {
  display: block;
  height: auto;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option .watchface-media-item,
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option .watchface-media-item-add {
  height: 60px;
  width: 60px;
  border-radius: 30px;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option .watchface-media-item .input-auth-wall,
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option .watchface-media-item-add .input-auth-wall {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  z-index: 2;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option .complication-select-panel-list-option-preview {
  height: 60px;
  width: 60px;
  border-radius: 30px;
  background: #000;
  background-size: cover;
  background-position: center center;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option .complication-select-panel-list-option-label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 60px;
  text-align: center;
  color: #aaa;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option.rectangular-complication .watchface-media-item,
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option.rectangular-complication .watchface-media-item-add {
  width: 139px;
  height: 60px;
  border-radius: 6px;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option.rectangular-complication .complication-select-panel-list-option-preview {
  width: 139px;
  border-radius: 6px;
}
.mobile-creator .complication-select-panel .complication-select-panel-list-wrapper .complication-select-panel-list-section .complication-select-panel-list-options .complication-select-panel-list-option.rectangular-complication .complication-select-panel-list-option-label {
  text-align: left;
}

.publish-form-header {
  position: relative;
}
.publish-form-header .publish-form-header-inner-wrapper i {
  font-size: 17px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 20px 0;
}

.creator-panel-wrapper {
  -webkit-transition: transform 0.35s ease-in-out;
  -moz-transition: transform 0.35s ease-in-out;
  -ms-transition: transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  position: absolute;
  top: calc(0px - env(safe-area-inset-top, 0));
  right: 0;
  bottom: calc(0px - env(safe-area-inset-bottom, 0));
  left: 0;
  z-index: 100;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
}
.creator-panel-wrapper .creator-panel-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  background: black;
  z-index: -1;
}
.creator-panel-wrapper .creator-panel-spacer {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  pointer-events: none;
}
.creator-panel-wrapper .creator-panel {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  overflow: auto;
  background: white;
  box-shadow: #333 0px 0px 46px 1px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.creator-panel-wrapper .creator-panel .creator-panel-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}
.creator-panel-wrapper .creator-panel .creator-panel-header .creator-panel-close {
  padding: 15px;
  font-size: 15px;
  float: right;
}
.creator-panel-wrapper.ng-leave .creator-panel, .creator-panel-wrapper.ng-enter.ng-enter-active .creator-panel {
  -webkit-transition: transform 0.35s ease-out;
  -moz-transition: transform 0.35s ease-out;
  -ms-transition: transform 0.35s ease-out;
  transition: transform 0.35s ease-out;
}
.creator-panel-wrapper.ng-leave .creator-panel-bg, .creator-panel-wrapper.ng-enter.ng-enter-active .creator-panel-bg {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}
.creator-panel-wrapper.ng-enter .creator-panel {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}
.creator-panel-wrapper.ng-enter .creator-panel-bg {
  opacity: 0;
}
.creator-panel-wrapper.ng-leave .creator-panel, .creator-panel-wrapper.ng-enter.ng-enter-active .creator-panel {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.creator-panel-wrapper.ng-leave .creator-panel-bg, .creator-panel-wrapper.ng-enter.ng-enter-active .creator-panel-bg {
  opacity: 0.5;
}
.creator-panel-wrapper.ng-leave.ng-leave-active .creator-panel {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}
.creator-panel-wrapper.ng-leave.ng-leave-active .creator-panel-bg {
  opacity: 0;
}

watchos-complication-toolbar {
  color: #eee;
}
watchos-complication-toolbar .btn-toolbar {
  padding: 0px !important;
  margin: 0 0px;
}
watchos-complication-toolbar .complication-options-list {
  white-space: nowrap;
  overflow: auto;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px 20px;
}
watchos-complication-toolbar .complication-select-panel-list-section {
  margin-right: 10px;
}
watchos-complication-toolbar .complication-select-panel-list-section h4 {
  padding-left: 10px;
  text-align: left;
}
watchos-complication-toolbar .complication-select-panel-list-options {
  white-space: nowrap;
}
watchos-complication-toolbar .complication-select-panel-list-options .complication-select-panel-list-option {
  margin: 0 10px;
}
watchos-complication-toolbar .complication-select-panel-list-options .complication-select-panel-list-option .complication-custom-edit-btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  padding-top: 4px;
  position: absolute;
  border-radius: 50%;
  background-color: #2BADE3;
  border-radius: 5px !important;
  height: 20px !important;
  bottom: -27px !important;
  right: 0;
  left: 0;
  top: auto !important;
  z-index: 10;
}
watchos-complication-toolbar .complication-select-panel-list-option-label {
  display: block;
}
watchos-complication-toolbar .complication-select-panel-list-option-preview {
  position: relative;
  border-radius: 50%;
  padding: 2px;
  min-height: 60px;
  background: #000;
  background-repeat: no-repeat;
  border: 2px rgba(255, 255, 255, 0.5) solid;
}
watchos-complication-toolbar .complication-select-panel-list-option-preview .complication-select-panel-list-option-preview-off {
  width: 60px;
  height: 60px;
}
watchos-complication-toolbar .complication-select-panel-list-option-preview .complication-select-panel-list-option-preview-image-wrapper {
  overflow: hidden;
  border-radius: 50%;
}
watchos-complication-toolbar .complication-select-panel-list-option-preview .complication-select-panel-list-option-preview-image-wrapper .complication-select-panel-list-option-preview-image {
  height: 60px;
  min-width: 60px;
  width: auto;
}
watchos-complication-toolbar .complication-select-panel-list-option-preview.selected {
  border-color: #eeb60b !important;
}
watchos-complication-toolbar .rectangular-complication .complication-select-panel-list-option-preview {
  min-width: 143px;
  border-radius: 5px !important;
}
watchos-complication-toolbar .rectangular-complication .complication-select-panel-list-option-preview .complication-select-panel-list-option-preview-image-wrapper {
  overflow: hidden;
  border-radius: 5px !important;
}
watchos-complication-toolbar .fresh-complication.complication-select-panel-list-option .complication-custom-edit-btn {
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  top: 0 !important;
  height: auto !important;
}
watchos-complication-toolbar .fresh-complication.rectangular-complication .complication-custom-edit-btn {
  border-radius: 3px !important;
}
watchos-complication-toolbar .fresh-complication:not(.rectangular-complication) .complication-custom-edit-btn {
  border-radius: 50% !important;
}

timeface-toolbar .btn-toolbar {
  padding: 10px 0 0 !important;
  margin: 0 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
timeface-toolbar .timeface-options {
  padding: 20px 0 10px;
}
timeface-toolbar .timeface-options ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
timeface-toolbar .timeface-options li {
  border-radius: 15px;
  border: 2px solid;
  border-color: transparent;
  transition: all 400ms ease;
}
timeface-toolbar .timeface-options li img {
  max-height: 90px;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
timeface-toolbar .timeface-options li:hover {
  cursor: pointer;
  border-color: #FFA500;
}
timeface-toolbar .timeface-options li.is-active {
  border-color: #FFA500;
}

.edit-script-modal .facer-modal-body-wrapper {
  padding: 0 !important;
}
.edit-script-modal .facer-modal-content {
  width: 600px !important;
}
.edit-script-modal .facer-modal-body {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.edit-script-modal .CodeMirror {
  height: 425px;
}
.edit-script-modal .facer-modal-form {
  margin-top: 0 !important;
}
.edit-script-modal .submit-btn-wrapper {
  margin-top: 15px !important;
}
.edit-script-modal textarea {
  width: 100%;
  height: 500px !important;
  resize: none;
  outline: none;
  border: none;
  font-family: monospace;
  font-size: 16px;
  padding: 0 !important;
}

script-editor.script-editor-full-height {
  height: 100%;
}
script-editor.script-editor-full-height .CodeMirror {
  height: 100%;
}
script-editor textarea {
  width: 100%;
  resize: none;
  outline: none;
  border: none;
  font-family: monospace;
  font-size: 16px;
  padding: 0 !important;
}

.configurator-select-field__toggle {
  padding: 0;
}
.configurator-select-field__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;
}
.configurator-select-field__menu {
  border-radius: 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border: 0;
  padding: 20px;
  min-width: 100px;
  text-align: center;
  display: block;
  opacity: 0;
  pointer-events: none;
  right: 0;
  left: auto;
}
.configurator-select-field__menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.configurator-select-field__menu.is-scrollable {
  padding: 0;
  overflow: hidden;
}
.is-scrollable .configurator-select-field__wrapper {
  max-height: 360px;
  overflow: auto;
  padding: 20px;
}
.configurator-select-field__menu-item-preview {
  font-size: 32px;
  line-height: 1;
  color: var(--black);
}
.configurator-select-field__menu-item-label {
  font-size: 12px;
  line-height: 1.25;
  color: var(--facer-dark-6);
}
.configurator-select-field__menu-item-preview {
  font-size: 32px;
  line-height: 1;
  color: var(--black);
}
.configurator-select-field__menu-item-label {
  font-size: 12px;
  line-height: 1.25;
  color: var(--facer-dark-6);
}
.configurator-select-field__menu-item {
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 5px 10px 5px 5px;
  transition: color 0.2s ease-in-out;
}
.configurator-select-field__menu-item:hover {
  cursor: pointer;
  background-color: var(--facer-dark-1);
}
.configurator-select-field__menu-item.is-selected div {
  color: var(--facer-blue);
}
.configurator-select-field__menu-item img {
  max-height: 25px;
}
.configurator-select-field__menu-item-label, .configurator-select-field__menu-item-description {
  color: var(--facer-dark-6);
  line-height: 1.25;
  font-size: 12px;
}
.configurator-select-field__menu-item-label {
  margin-bottom: 5px;
}
.configurator-select-field__menu-item-description {
  white-space: nowrap;
}

.is-text-img-list .configurator-select-field__menu-item-label, .is-text-img-list .configurator-select-field__menu-item-preview {
  text-align: left;
}
.is-text-img-list .configurator-select-field__menu-item-label {
  color: var(--facer-dark-6);
  line-height: 1.25;
  font-size: 12px;
  margin-bottom: 3px;
}
.is-text-img-list .configurator-select-field__menu-item:last-child {
  margin-bottom: 0;
}

.is-text-list .configurator-select-field__menu-item-label {
  color: #000;
  line-height: 1.25;
  font-size: 14px;
  margin-bottom: 5px;
}

.is-pill-list .configurator-select-field__menu-item-label {
  color: var(--facer-dark-9);
  font-weight: 500;
  font-size: 16px;
}
.is-pill-list .configurator-select-field__menu-item {
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--facer-dark-6);
  transition: all 0.2s ease;
}
.is-pill-list .configurator-select-field__menu-item:hover {
  background-color: var(--facer-dark-1);
}
.is-pill-list .configurator-select-field__menu-item.is-selected {
  border-color: var(--facer-blue);
}
.is-pill-list .configurator-select-field__menu-item.is-selected * {
  color: var(--facer-blue);
}
.is-pill-list .configurator-select-field__menu {
  min-width: 177px;
  padding: 10px;
}
.is-pill-list__menu-item-label, .is-pill-list__menu-item-description {
  color: var(--facer-dark-6);
  line-height: 1.25;
  font-size: 12px;
}
.is-pill-list__menu-item-label {
  margin-bottom: 5px;
}
.is-pill-list__menu-item-description {
  white-space: nowrap;
}

.colorpicker {
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background-color: white;
}

.colorpicker-selected {
  border: 1px solid #C4C4C4;
}

.colorpicker-value {
  position: relative;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  transition: all 300ms ease;
}
.colorpicker-value.is-selected {
  border: 1px solid #C4C4C4;
}
.colorpicker-value.is-selected:after {
  opacity: 1;
  background-color: var(--white);
  border: 2px solid var(--facer-blue);
}
.colorpicker-value:hover:after {
  opacity: 1;
}
.colorpicker-value:after {
  transition: all 300ms ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  height: 38px;
  width: 38px;
  border-radius: 38px;
  background-color: var(--facer-dark-1);
  opacity: 0;
  z-index: -1;
}

.colorpicker-value.is-timevibrant, .colorpicker-selected.is-timevibrant {
  position: relative;
  border: 1px solid #C4C4C4;
}
.colorpicker-value.is-timevibrant:before, .colorpicker-selected.is-timevibrant:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  height: 2px;
  width: 100%;
  background-color: #E65556;
}

.configurator-select-field.configurator-select-field--colorpicker {
  height: 24px;
}
.configurator-select-field__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.configurator-color-group {
  margin-bottom: 10px;
}
.configurator-color-group__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.configurator-color-group__label {
  font-size: 12px;
  color: var(--facer-dark-6);
  margin-bottom: 10px;
  text-align: left;
}

#logo img {
  margin-top: -3px !important;
  height: 38px !important;
  width: auto !important;
}

#siteTitle {
  width: 273px !important;
}

#back {
  font-size: 20px;
  display: inline-block;
  height: 32px;
  vertical-align: middle;
  line-height: 16px;
  margin-top: -2px;
  margin-right: 3px;
}

#poweredBy, #poweredBy a {
  display: block;
  text-align: center;
  height: 92px;
  line-height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 12px;
  color: #909090;
  letter-spacing: 1px;
  z-index: -1;
}
#poweredBy img, #poweredBy a img {
  display: inline-block;
  height: 26.5px;
  margin-bottom: 2px;
  margin-left: 1px;
  vertical-align: middle;
}

#register {
  background-color: white !important;
}

.fullscreen-modal {
  width: 100%;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: normal;
  -moz-align-self: normal;
  -ms-align-self: normal;
  align-self: normal;
  overflow: auto;
}
.fullscreen-modal.container-fluid {
  padding: 0;
}
.fullscreen-modal .strikethrough {
  text-decoration: line-through;
}

.stat-label {
  color: #464646;
  display: inline-block;
  margin: 5px 10px 5px 0;
}
.stat-label i {
  vertical-align: middle;
  margin: 0 4px 0 0;
  font-size: 140%;
}

.section-header {
  color: #000 !important;
  background: #ededed !important;
}

.watch-canvas-inner-wrapper {
  border-radius: 0 !important;
}

h2 a {
  color: black;
  font-weight: bold;
}

.btn-link {
  color: black;
  font-weight: bold;
}

.btn-primary.element,
.btn-default.element {
  padding-left: 0;
  padding-right: 0;
}

.facer-editor .btn-primary:active:hover {
  background: black;
}

.btn-green {
  background: #d5d5d5 !important;
  color: #000 !important;
  font-weight: bold;
}
.btn-green:hover {
  background: #989898 !important;
}

.palette-box {
  color: #000 !important;
  overflow: hidden;
}
.palette-box.palette-box-small {
  padding: 10px 5px;
}
.palette-box .color-band {
  background: black !important;
}
.palette-box:hover {
  color: #2BADE3 !important;
}
.palette-box:hover .color-band {
  background: #2BADE3 !important;
}

.element i {
  vertical-align: middle;
}

#watchfaceTitle input {
  color: #343434 !important;
}

#printCanvas {
  position: fixed;
  top: -9999px;
  left: -9999px;
}

.secondary-btn-list-wrapper {
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0px;
  overflow: visible;
}
.secondary-btn-list-wrapper .secondary-btn-list {
  position: absolute;
  bottom: 11px;
  left: calc(50% - 19px);
  padding-bottom: 2px;
}
.secondary-btn-list-wrapper .secondary-btn-list .secondary-btn {
  width: 38px;
  height: 38px;
  background: #fff;
  color: #000;
  display: block;
  border-radius: 50%;
  line-height: 42px;
  letter-spacing: -2px;
  text-align: center;
  box-shadow: 0 5px 21px -7px;
  font-size: 21px;
  margin-top: 10px;
}

.user-line, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .user {
  margin-top: 0.25em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.user-line img, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .user img {
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
  width: 24px;
  height: 24px;
  border: 1px solid #DDD;
}

.primary-section-header {
  margin: 0;
  padding: 16px 15px 11px 22px;
  color: #FFF;
  background: #2BADE3;
  border-bottom: 2px solid transparent;
}