* {
  outline: none; }

body {
  margin: 0; }

html,
body,
#__next {
  height: 100%; }

input,
textarea,
button,
html,
body,
#__next {
  font-family: -apple-system, 'Robot', system-ui, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important; }

input[type='text'],
input[type='password'] {
  padding: 8px;
  border: 1px solid #eaeaea;
  border-radius: 3px; }
  input[type='text'].error, input[type='text'].error:focus,
  input[type='password'].error,
  input[type='password'].error:focus {
    border: 1px solid #f24b4b; }
  input[type='text'].success, input[type='text'].success:focus,
  input[type='password'].success,
  input[type='password'].success:focus {
    border: 1px solid #2bc766; }
  input[type='text']:focus,
  input[type='password']:focus {
    border: 1px solid #dddddd; }

.codes-modal {
  background: #f7f7f7;
  height: 550px !important;
  width: 550px !important; }
  .codes-modal__head {
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden; }
    .codes-modal__head-field {
      position: relative; }
      .codes-modal__head-field input {
        height: 50px;
        padding-bottom: 3px;
        padding-left: 40px;
        font-size: 15px;
        border: 0;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #ebebeb; }
      .codes-modal__head-field svg {
        position: absolute;
        top: 19px;
        left: 15px;
        width: 16px;
        height: 16px; }
  .codes-modal__content {
    padding: 20px;
    overflow: auto;
    box-sizing: border-box;
    height: calc(100% - 98px);
    background-color: #f7f7f7; }
    .codes-modal__content-empty {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%; }
      .codes-modal__content-empty div {
        text-align: center; }
        .codes-modal__content-empty div img {
          width: 98px; }
        .codes-modal__content-empty div h4 {
          font-weight: 600;
          margin-bottom: 0; }
    .codes-modal__content-item:first-of-type h2 {
      margin-top: 0; }
    .codes-modal__content-item h2 {
      margin: 30px 0 15px;
      font-size: 16px;
      color: #545454; }

.news-modal {
  height: 550px !important;
  width: 550px !important; }
  .news-modal__info {
    height: calc(100% - 48px);
    overflow: auto;
    padding: 0 20px; }
    .news-modal__info p {
      line-height: 24px; }
    .news-modal__info a {
      text-decoration: none;
      color: #2684fe; }
      .news-modal__info a:hover {
        text-decoration: underline; }

.error-page {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center; }
  .error-page h2 {
    font-size: 38px;
    margin-bottom: 0; }
  .error-page p {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 30px; }
  .error-page .button--black {
    width: 120px;
    margin: 0 auto;
    font-weight: 600; }

.Resizer {
  background: #e8e8e8;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  position: relative;
  z-index: 6; }
  .Resizer:hover:before {
    opacity: 1; }

.Resizer:hover {
  -webkit-transition: all 0.2s;
  transition: all 0.2s; }

.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize; }
  .Resizer.vertical:before {
    position: absolute;
    content: '';
    top: 50%;
    left: -2px;
    transform: translateY(-50%);
    height: 50px;
    width: 5px;
    background-color: #d1d1d1;
    opacity: 0.5; }

.Resizer.horizontal {
  width: 11px;
  margin: 0 -5px;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  cursor: row-resize;
  width: 100%; }
  .Resizer.horizontal:before {
    position: absolute;
    content: '';
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 5px;
    background-color: #d1d1d1;
    opacity: 0.5; }
  .Resizer.horizontal:hover {
    border-top: 5px solid rgba(0, 0, 0, 0.02);
    border-bottom: 5px solid rgba(0, 0, 0, 0.02); }

.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.02);
  border-right: 5px solid rgba(0, 0, 0, 0.02); }

.Resizer.disabled {
  cursor: not-allowed; }

.Resizer.disabled:hover {
  border-color: transparent; }

.console-app {
  width: 100%; }
  .console-app__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    background-color: rgba(0, 0, 0, 0.01); }
    .console-app__tab span {
      display: inline-block;
      padding: 10px 20px;
      border-bottom: 1px solid #2684fe; }
    .console-app__tab svg {
      width: 14px;
      height: 14px; }
  .console-app__buttons .rotated {
    transform: rotate(-180deg);
    transform-origin: 6px; }
  .console-app__buttons svg {
    opacity: 0.5;
    margin-right: 15px;
    cursor: pointer; }
    .console-app__buttons svg:hover {
      opacity: 1; }
  .console-app #console-app {
    overflow: auto;
    height: calc(100vh - 174px); }

.console__row {
  padding: 5px 10px !important;
  margin: 0 !important;
  background-color: #fff !important;
  border-bottom: 1px solid #f7f7f7; }
  .console__row .c-number {
    color: #2684fe !important; }
  .console__row .length.head__length {
    opacity: 0.4; }

.ace-chrome .ace_gutter {
  background: #ebebeb;
  color: #333;
  overflow: hidden; }

.ace-chrome .ace_print-margin {
  width: 1px;
  background: #e8e8e8; }

.ace-chrome {
  background-color: #ffffff;
  color: black; }

.ace-chrome .ace_cursor {
  color: black; }

.ace-chrome .ace_invisible {
  color: #bfbfbf; }

.ace-chrome .ace_constant.ace_buildin {
  color: #5848f6; }

.ace-chrome .ace_constant.ace_language {
  color: #585cf6; }

.ace-chrome .ace_constant.ace_library {
  color: #06960e; }

.ace-chrome .ace_invalid {
  background-color: #990000;
  color: white; }

.ace-chrome .ace_support.ace_function {
  color: #3c4c72; }

.ace-chrome .ace_support.ace_constant {
  color: #06960e; }

.ace-chrome .ace_support.ace_type,
.ace-chrome .ace_support.ace_class.ace-chrome .ace_support.ace_other {
  color: #6d79de; }

.ace-chrome .ace_variable.ace_parameter {
  font-style: italic;
  color: #fd971f; }

.ace-chrome .ace_keyword.ace_operator {
  color: #687687; }

.ace-chrome .ace_comment {
  color: #236e24; }

.ace-chrome .ace_comment.ace_doc {
  color: #236e24; }

.ace-chrome .ace_comment.ace_doc.ace_tag {
  color: #236e24; }

.ace-chrome .ace_constant.ace_numeric {
  color: mediumblue; }

.ace-chrome .ace_variable {
  color: #318495; }

.ace-chrome .ace_xml-pe {
  color: #68685b; }

.ace-chrome .ace_entity.ace_name.ace_function {
  color: #0000a2; }

.ace-chrome .ace_heading {
  color: #0c07ff; }

.ace-chrome .ace_list {
  color: #b90690; }

.ace-chrome .ace_marker-layer .ace_selection {
  background: #b5d5ff; }

.ace-chrome .ace_marker-layer .ace_step {
  background: #fcff00; }

.ace-chrome .ace_marker-layer .ace_stack {
  background: #a4e565; }

.ace-chrome .ace_marker-layer .ace_bracket {
  margin: -1px 0 0 -1px;
  border: 1px solid silver; }

.ace-chrome .ace_marker-layer .ace_active-line {
  background: rgba(0, 0, 0, 0.07); }

.ace-chrome .ace_gutter-active-line {
  background-color: #dcdcdc; }

.ace-chrome .ace_marker-layer .ace_selected-word {
  background: #fafaff;
  border: 1px solid #c8c8fa; }

.ace-chrome .ace_storage,
.ace-chrome .ace_keyword,
.ace-chrome .ace_meta.ace_tag {
  color: #930f80; }

.ace-chrome .ace_string.ace_regex {
  color: red; }

.ace-chrome .ace_string {
  color: #1a1aa6; }

.ace-chrome .ace_entity.ace_other.ace_attribute-name {
  color: #994409; }

.ace-chrome .ace_indent-guide {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y; }

.ace-chrome .ace_gutter {
  background: #ebebeb;
  color: #333;
  overflow: hidden; }

.ace-chrome .ace_print-margin {
  width: 1px;
  background: #e8e8e8; }

.ace-chrome {
  background-color: #ffffff;
  color: black; }

.ace-chrome .ace_cursor {
  color: black; }

.ace-chrome .ace_invisible {
  color: #bfbfbf; }

.ace-chrome .ace_constant.ace_buildin {
  color: #5848f6; }

.ace-chrome .ace_constant.ace_language {
  color: #585cf6; }

.ace-chrome .ace_constant.ace_library {
  color: #06960e; }

.ace-chrome .ace_invalid {
  background-color: #990000;
  color: white; }

.ace-chrome .ace_support.ace_function {
  color: #3c4c72; }

.ace-chrome .ace_support.ace_constant {
  color: #06960e; }

.ace-chrome .ace_support.ace_type,
.ace-chrome .ace_support.ace_class.ace-chrome .ace_support.ace_other {
  color: #6d79de; }

.ace-chrome .ace_variable.ace_parameter {
  font-style: italic;
  color: #fd971f; }

.ace-chrome .ace_keyword.ace_operator {
  color: #687687; }

.ace-chrome .ace_comment {
  color: #236e24; }

.ace-chrome .ace_comment.ace_doc {
  color: #236e24; }

.ace-chrome .ace_comment.ace_doc.ace_tag {
  color: #236e24; }

.ace-chrome .ace_constant.ace_numeric {
  color: mediumblue; }

.ace-chrome .ace_variable {
  color: #318495; }

.ace-chrome .ace_xml-pe {
  color: #68685b; }

.ace-chrome .ace_entity.ace_name.ace_function {
  color: #0000a2; }

.ace-chrome .ace_heading {
  color: #0c07ff; }

.ace-chrome .ace_list {
  color: #b90690; }

.ace-chrome .ace_marker-layer .ace_selection {
  background: #b5d5ff; }

.ace-chrome .ace_marker-layer .ace_step {
  background: #fcff00; }

.ace-chrome .ace_marker-layer .ace_stack {
  background: #a4e565; }

.ace-chrome .ace_marker-layer .ace_bracket {
  margin: -1px 0 0 -1px;
  border: 1px solid silver; }

.ace-chrome .ace_marker-layer .ace_active-line {
  background: rgba(0, 0, 0, 0.07); }

.ace-chrome .ace_gutter-active-line {
  background-color: #dcdcdc; }

.ace-chrome .ace_marker-layer .ace_selected-word {
  background: #fafaff;
  border: 1px solid #c8c8fa; }

.ace-chrome .ace_storage,
.ace-chrome .ace_keyword,
.ace-chrome .ace_meta.ace_tag {
  color: #930f80; }

.ace-chrome .ace_string.ace_regex {
  color: red; }

.ace-chrome .ace_string {
  color: #1a1aa6; }

.ace-chrome .ace_entity.ace_other.ace_attribute-name {
  color: #994409; }

.ace-chrome .ace_indent-guide {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y; }

.ace-tomorrow-night .ace_gutter {
  background: #25282c;
  color: #c5c8c6; }

.ace-tomorrow-night .ace_print-margin {
  width: 1px;
  background: #25282c; }

.ace-tomorrow-night {
  background-color: #1d1f21;
  color: #c5c8c6; }

.ace-tomorrow-night .ace_cursor {
  color: #aeafad; }

.ace-tomorrow-night .ace_marker-layer .ace_selection {
  background: #373b41; }

.ace-tomorrow-night.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #1d1f21; }

.ace-tomorrow-night .ace_marker-layer .ace_step {
  background: #665200; }

.ace-tomorrow-night .ace_marker-layer .ace_bracket {
  margin: -1px 0 0 -1px;
  border: 1px solid #4b4e55; }

.ace-tomorrow-night .ace_marker-layer .ace_active-line {
  background: #282a2e; }

.ace-tomorrow-night .ace_gutter-active-line {
  background-color: #282a2e; }

.ace-tomorrow-night .ace_marker-layer .ace_selected-word {
  border: 1px solid #373b41; }

.ace-tomorrow-night .ace_invisible {
  color: #4b4e55; }

.ace-tomorrow-night .ace_keyword,
.ace-tomorrow-night .ace_meta,
.ace-tomorrow-night .ace_storage,
.ace-tomorrow-night .ace_storage.ace_type,
.ace-tomorrow-night .ace_support.ace_type {
  color: #b294bb; }

.ace-tomorrow-night .ace_keyword.ace_operator {
  color: #8abeb7; }

.ace-tomorrow-night .ace_constant.ace_character,
.ace-tomorrow-night .ace_constant.ace_language,
.ace-tomorrow-night .ace_constant.ace_numeric,
.ace-tomorrow-night .ace_keyword.ace_other.ace_unit,
.ace-tomorrow-night .ace_support.ace_constant,
.ace-tomorrow-night .ace_variable.ace_parameter {
  color: #de935f; }

.ace-tomorrow-night .ace_constant.ace_other {
  color: #ced1cf; }

.ace-tomorrow-night .ace_invalid {
  color: #ced2cf;
  background-color: #df5f5f; }

.ace-tomorrow-night .ace_invalid.ace_deprecated {
  color: #ced2cf;
  background-color: #b798bf; }

.ace-tomorrow-night .ace_fold {
  background-color: #81a2be;
  border-color: #c5c8c6; }

.ace-tomorrow-night .ace_entity.ace_name.ace_function,
.ace-tomorrow-night .ace_support.ace_function,
.ace-tomorrow-night .ace_variable {
  color: #81a2be; }

.ace-tomorrow-night .ace_support.ace_class,
.ace-tomorrow-night .ace_support.ace_type {
  color: #f0c674; }

.ace-tomorrow-night .ace_heading,
.ace-tomorrow-night .ace_markup.ace_heading,
.ace-tomorrow-night .ace_string {
  color: #b5bd68; }

.ace-tomorrow-night .ace_entity.ace_name.ace_tag,
.ace-tomorrow-night .ace_entity.ace_other.ace_attribute-name,
.ace-tomorrow-night .ace_meta.ace_tag,
.ace-tomorrow-night .ace_string.ace_regexp,
.ace-tomorrow-night .ace_variable {
  color: #cc6666; }

.ace-tomorrow-night .ace_comment {
  color: #969896; }

.ace-tomorrow-night .ace_indent-guide {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC) right repeat-y; }

.wrapper {
  height: 100%; }

.dark {
  background: #1d1f21; }
  .dark .Pane.vertical.Pane1 {
    padding-right: 5px; }
  .dark .Resizer.vertical {
    background: #424242;
    border-left: 5px solid #1d1f21;
    border-right: 5px solid #1d1f21; }
    .dark .Resizer.vertical:hover {
      border-left: 5px solid rgba(0, 0, 0, 0.3);
      border-right: 5px solid rgba(0, 0, 0, 0.3); }
    .dark .Resizer.vertical:before {
      background-color: #757575; }
  .dark .popup {
    background: #222529;
    border: 0;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
    color: #fff;
    border: 1px solid #2f2f2f; }
  .dark .react-toggle-track {
    background-color: #3c3c3c; }
  .dark .button--white {
    border: 1px solid transparent;
    background-color: #373a40;
    color: #fff;
    box-shadow: none !important; }
  .dark .button--green {
    box-shadow: none !important; }
  .dark .icon path {
    fill: #fff; }
  .dark .ace-tomorrow-night .ace_gutter {
    background-color: transparent; }
  .dark .popup .menu li:empty {
    background-color: #2f2f2f !important; }
  .dark .preview-toggle span {
    color: #fff; }
  .dark .preview__top {
    color: #fff; }
    .dark .preview__top-field {
      padding-top: 0; }
    .dark .preview__top-input {
      background: #282b2f;
      color: #d8d8d8;
      border: 0; }
  .dark .console__row {
    background-color: transparent !important;
    border-bottom: 1px solid #424242; }
  .dark .modal {
    background: rgba(0, 0, 0, 0.5); }
    .dark .modal .codes-modal__head svg {
      top: 17px; }
      .dark .modal .codes-modal__head svg path {
        fill: #1d1f21; }
  .dark .console-app__tab span {
    color: #f3f3f3; }
  .dark #editor {
    background-color: #1d1f21; }
    .dark #editor .ace_marker-layer .ace_active-line {
      background: #1e242d; }
    .dark #editor .ace_gutter-layer {
      background-color: #1d1f21 !important;
      color: #fff; }
    .dark #editor .ace_gutter-active-line {
      background-color: #1d242d !important; }
    .dark #editor .ace_animate-blinking .ace_cursor {
      color: #2684fe; }
    .dark #editor .ace_print-margin {
      background: #4a76b114; }
    .dark #editor .ace_marker-layer .ace_bracket {
      border: 1px solid rgba(109, 126, 148, 0.2);
      background-color: rgba(126, 163, 210, 0.15); }
  .dark .footer {
    border-top: 1px solid #21262c; }
    .dark .footer ul li:hover {
      background-color: #2e3135;
      color: #fff; }

.icon {
  display: inline-flex; }

.SplitPane {
  height: calc(100% - 81px - 35px) !important; }

.entry-container__entry,
.entry-container__key,
.entry-container__value-container {
  display: flex; }

.toastify {
  background: #263141 !important;
  color: #fff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2) !important;
  border-radius: 4px !important; }

.toast-close {
  padding: 0 !important;
  color: #fff !important;
  position: relative;
  top: -1px;
  right: -5px;
  opacity: 0.6 !important; }
  .toast-close:hover {
    opacity: 1 !important; }

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  padding: 20px;
  z-index: 1; }
  .header--dark {
    background-color: #1d1f21; }
    .header--dark .edit-filename input {
      color: #fff; }
    .header--dark .button,
    .header--dark .button:hover {
      box-shadow: none !important; }
    .header--dark .header__select-mode div[class*='-control'] {
      cursor: pointer;
      background-color: transparent;
      border-color: #36393f; }
      .header--dark .header__select-mode div[class*='-control'] span[class*='-indicatorSeparator'] {
        background-color: #36393f; }
      .header--dark .header__select-mode div[class*='-control'] .header__select-mode-item {
        color: #fff; }
      .header--dark .header__select-mode div[class*='-control'] svg path {
        fill: #6e6f71; }
  .header__select-mode {
    width: 160px;
    margin-left: 15px; }
    .header__select-mode-item {
      display: flex; }
      .header__select-mode-item img {
        width: 18px;
        height: 18px;
        margin-right: 7px; }
  .header__logo {
    display: flex;
    margin-right: 25px; }
    .header__logo img {
      width: 115px; }
  .header__left {
    display: flex; }
  .header__right {
    display: flex;
    align-items: center; }
    .header__right .button {
      margin-left: 10px; }
    .header__right-live {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #f13d3d;
      margin-right: 5px;
      font-weight: 700;
      letter-spacing: 0.6px;
      border-radius: 30px;
      width: 105px;
      height: 34px;
      background-color: rgba(241, 61, 61, 0.05);
      margin-top: 4px; }
      .header__right-live i {
        background-color: #f13d3d;
        width: 8px;
        height: 8px;
        border-radius: 30px;
        margin-right: 8px;
        animation: animate-live 1s ease-in-out infinite; }

@keyframes animate-live {
  from {
    box-shadow: 0 0 0px 1px rgba(241, 61, 61, 0.3); }
  to {
    box-shadow: 0 0 0px 6px rgba(241, 61, 61, 0); } }

.edit-filename {
  display: none;
  align-items: center;
  cursor: pointer; }
  .edit-filename .icon--check {
    opacity: 0.7; }
    .edit-filename .icon--check:hover {
      opacity: 1; }
    .edit-filename .icon--check svg path {
      fill: #00b925; }
  .edit-filename:hover .edit-filename__btn {
    opacity: 0.7; }
  .edit-filename input {
    font-size: 16px;
    border: 0;
    color: rgba(0, 0, 0, 0.5);
    background-color: transparent;
    width: 78px;
    cursor: pointer; }
  .edit-filename--disabled #edit-filename-field {
    color: rgba(0, 0, 0, 0.3); }
  .edit-filename--visible {
    display: flex !important; }
  .edit-filename .language-icon {
    width: 18px;
    margin-right: 5px; }
  .edit-filename__btn {
    width: 16px;
    height: 11px;
    padding: 7px;
    opacity: 0.3; }
    .edit-filename__btn--save {
      position: relative;
      left: -1px; }
    .edit-filename__btn svg {
      width: 16px;
      height: 13px; }

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  padding: 0 30px;
  color: #fff;
  font-size: 14px;
  min-width: 50px;
  height: 44px;
  border: 0;
  cursor: pointer;
  transition: all ease-in 0.05s;
  text-decoration: none; }
  .button--loading .button__icon {
    animation: loading 1s linear infinite;
    transform-origin: 7.81px 7.81px; }
    .button--loading .button__icon img {
      height: 15px;
      width: 15px; }
  .button--default {
    background-color: #6d7e94;
    box-shadow: 0px 2px 2px #c5ccd5; }
    .button--default:hover {
      background-color: #76869a; }
    .button--default:active {
      background-color: #66768b; }
  .button--black {
    background-color: #202020;
    box-shadow: 0px 2px 2px #b9b9b9; }
    .button--black:hover {
      background-color: #282828;
      box-shadow: 0px 2px 8px #b9b9b9; }
    .button--black:active {
      background-color: #181818; }
  .button--green {
    background-color: #2bc766;
    box-shadow: 0px 2px 2px #b5efcb; }
    .button--green:hover {
      background-color: #2ccd69;
      box-shadow: 0px 3px 5px #b5efcb; }
    .button--green:active {
      background-color: #28ba60; }
  .button--danger {
    background-color: #f24b4b;
    box-shadow: 0px 2px 2px #fcdada; }
    .button--danger:hover {
      background-color: #f35959; }
    .button--danger:active {
      background-color: #f13d3d; }
  .button--primary {
    background-color: #2684fe;
    box-shadow: 0px 2px 2px #bedaff; }
    .button--primary:hover {
      background-color: #358dfe;
      box-shadow: 0px 3px 4px #bedaff; }
    .button--primary:active {
      background-color: #177bfe; }
  .button--white {
    background-color: #6d7e94;
    box-shadow: 0px 2px 2px #f4f6f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #fff;
    color: #202020; }
    .button--white:active {
      box-shadow: 0px 0 0 #f1f3f5; }
    .button--white:hover {
      box-shadow: 0px 4px 4px #f7f8f9 !important; }
  .button:hover {
    transform: scale(1.02); }
  .button:active {
    transform: scale(1);
    box-shadow: 0px 0 0; }
  .button span {
    position: relative;
    top: -1px; }
  .button__icon {
    position: relative;
    top: 1px;
    margin-right: 5px; }

@keyframes loading {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(360deg); } }

#editor {
  width: 100%;
  height: 100%;
  font-family: "Source Code Pro", Menlo, Monaco, consolas, monospace, -apple-system, system-ui; }
  #editor.editor--highlight {
    background-color: rgba(66, 165, 245, 0.04); }
  #editor.ace-chrome .ace_marker-layer .ace_active-line, #editor.ace-tm .ace_marker-layer .ace_active-line {
    background: rgba(39, 132, 254, 0.05); }
  #editor.ace-chrome .ace_gutter-layer, #editor.ace-tm .ace_gutter-layer {
    background-color: #fff; }
  #editor.ace-chrome .ace_gutter-active-line, #editor.ace-tm .ace_gutter-active-line {
    background-color: #fff; }
  #editor.ace-chrome .ace_animate-blinking .ace_cursor, #editor.ace-tm .ace_animate-blinking .ace_cursor {
    color: #2684fe; }
  #editor.ace-chrome .ace_print-margin, #editor.ace-tm .ace_print-margin {
    background: #4a76b114; }
  #editor.ace-chrome .ace_storage,
  #editor.ace-chrome .ace_keyword,
  #editor.ace-chrome .ace_meta.ace_tag, #editor.ace-tm .ace_storage,
  #editor.ace-tm .ace_keyword,
  #editor.ace-tm .ace_meta.ace_tag {
    color: #a626a4; }
  #editor.ace-chrome .ace_string, #editor.ace-tm .ace_string {
    color: #50a14f; }
  #editor.ace-chrome .ace_constant.ace_language.ace_boolean, #editor.ace-tm .ace_constant.ace_language.ace_boolean {
    color: #986801; }
  #editor.ace-chrome .ace_marker-layer .ace_bracket, #editor.ace-tm .ace_marker-layer .ace_bracket {
    border: 1px solid rgba(109, 126, 148, 0.2);
    background-color: rgba(126, 163, 210, 0.15); }

.ace_tooltip,
.ace_editor.ace_autocomplete {
  border: 1px solid #f1f5f6;
  background-image: none;
  border-radius: 3px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.03); }

.ace_tooltip {
  padding: 15px; }

.user-profile {
  display: flex;
  align-items: center;
  margin-left: 15px;
  cursor: pointer; }
  .user-profile__avatar {
    width: 38px;
    height: 38px;
    border-radius: 30px;
    margin-right: 10px; }
  .user-profile__signin-btn span {
    display: flex;
    align-items: center; }
    .user-profile__signin-btn span svg {
      width: 16px;
      height: 16px;
      margin-left: 7px; }
      .user-profile__signin-btn span svg path {
        fill: #fff; }
  .user-profile .popup {
    right: 0;
    top: 70px;
    right: 15px; }
    .user-profile .popup .menu {
      padding: 0;
      margin: 0;
      list-style: none;
      padding: 8px 0; }
      .user-profile .popup .menu li {
        font-size: 14px; }
        .user-profile .popup .menu li a {
          display: block;
          padding: 6px 18px;
          text-decoration: none;
          color: inherit; }
        .user-profile .popup .menu li:hover {
          background-color: rgba(38, 132, 254, 0.05); }
        .user-profile .popup .menu li:empty {
          height: 1px;
          width: 100%;
          background-color: #f1f5f6;
          padding: 0;
          margin: 5px 0; }

.popup {
  position: absolute;
  min-width: 150px;
  z-index: 2;
  background: #ffffff;
  border: 1px solid #f1f5f6;
  box-sizing: border-box;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  animation: popup 0.15s ease-in-out;
  z-index: 9; }

@keyframes popup {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0px); } }

.settings {
  position: relative; }
  .settings .popup {
    width: 400px;
    right: 0;
    margin-top: 10px;
    padding: 30px;
    font-size: 14px; }
    .settings .popup .settings__group:not(:last-of-type) {
      margin-bottom: 15px; }
    .settings .popup .settings__group-row {
      margin-bottom: 10px;
      width: 100%; }
      .settings .popup .settings__group-row--resources .resouces-select {
        width: 100%; }
        .settings .popup .settings__group-row--resources .resouces-select div[class*='control'] > div {
          padding: 2px 4px; }
        .settings .popup .settings__group-row--resources .resouces-select div[class*='multiValue'] {
          padding: 3px;
          font-size: 16px; }
    .settings .popup .settings__group-delete-btn {
      margin-top: 20px; }
      .settings .popup .settings__group-delete-btn button {
        margin: 0;
        width: 100%; }
    .settings .popup .settings__group-title {
      display: block;
      font-weight: 500;
      margin-bottom: 10px; }
    .settings .popup .settings__group-line {
      display: flex;
      align-items: center; }
    .settings .popup .settings__group-toggle {
      display: flex;
      justify-content: center;
      cursor: pointer;
      margin-bottom: 10px;
      flex-direction: column; }
      .settings .popup .settings__group-toggle .password-field {
        margin-bottom: 10px; }
      .settings .popup .settings__group-toggle .react-toggle {
        margin-right: 10px;
        position: relative;
        top: 1px; }

.preview {
  height: calc(100% - 54px); }
  .preview__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
  .preview__top {
    background-color: rgba(51, 51, 51, 0.04); }
    .preview__top-field {
      display: flex;
      padding: 10px; }
    .preview__top-left {
      display: flex;
      align-items: center;
      position: relative;
      margin-top: -1px;
      flex: 1;
      position: relative; }
      .preview__top-left-actions {
        display: flex;
        align-items: center;
        position: absolute;
        justify-content: space-between;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        z-index: 1; }
        .preview__top-left-actions div {
          display: flex;
          align-items: center;
          position: relative;
          top: -0.5px; }
      .preview__top-left .icon {
        opacity: 0.3;
        cursor: pointer;
        width: 18px;
        height: 18px; }
        .preview__top-left .icon--window svg {
          width: 18px;
          height: 18px; }
        .preview__top-left .icon:hover {
          opacity: 1; }
    .preview__top-input {
      flex: 1;
      height: 35px;
      background: #ffffff;
      border: 1px solid #e8e8e8;
      box-sizing: border-box;
      border-radius: 3px;
      padding-left: 35px !important;
      padding-bottom: 4px !important;
      padding-top: 0 !important;
      font-size: 15px;
      position: relative; }
    .preview__top-toggle {
      display: flex;
      align-items: center;
      margin-left: 10px;
      cursor: pointer; }
      .preview__top-toggle div {
        display: flex;
        align-items: center; }
      .preview__top-toggle span {
        margin-left: 5px;
        font-size: 14px; }
  .preview #preview {
    height: 100%;
    width: 100%; }

.modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: rgba(125, 141, 158, 0.6); }
  .modal__head {
    padding: 15px;
    background-color: #fafafa;
    font-weight: 600; }
  .modal__close {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 1;
    opacity: 0.3;
    cursor: pointer; }
    .modal__close:hover {
      opacity: 0.9; }
    .modal__close svg {
      width: 12px;
      height: 12px; }
      .modal__close svg path {
        fill: #000; }
  .modal__content {
    width: 460px;
    height: 460px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    animation: modal 0.1s ease-in-out;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden; }

@keyframes modal {
  from {
    opacity: 0;
    transform: translate(-50%, -49%); }
  to {
    opacity: 1;
    transform: translate(-50%, -50%); } }

.code-item {
  background: #ffffff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  margin-bottom: 15px;
  color: inherit;
  text-decoration: none; }
  .code-item:hover {
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px); }
  .code-item__icon {
    width: 32px;
    height: 32px; }
  .code-item__info {
    display: flex;
    margin-left: 10px;
    align-items: center;
    flex: 1;
    margin-top: -2px; }
    .code-item__info div {
      flex: 1; }
    .code-item__info b {
      font-weight: 500;
      font-size: 14px;
      word-break: break-all; }
    .code-item__info p {
      margin: 0;
      margin-top: 2px;
      font-size: 14px;
      color: #39464e;
      opacity: 0.4;
      text-transform: capitalize; }
    .code-item__info .icon {
      padding: 10px;
      opacity: 0.1;
      transition: all 0.15s ease-in-out; }
      .code-item__info .icon:hover {
        opacity: 0.6; }

.command-palette {
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #f5f5f5;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e4e4e4;
  width: 600px;
  max-height: 500px;
  z-index: 9;
  transform: translate(-50%, -50%);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #2f2f2f; }
  .command-palette ul,
  .command-palette li {
    list-style: none;
    padding: 0;
    margin: 0; }
  .command-palette input {
    background-color: white;
    color: #616161;
    border-width: 1px;
    border-style: solid;
    border-color: #eaeaea;
    width: 100%;
    box-sizing: border-box;
    padding: 7px;
    border-radius: 3px;
    border-width: 2px;
    font-size: 15px; }
    .command-palette input:focus {
      border-color: #2684fe; }
  .command-palette__description {
    color: #777;
    font-size: 14px;
    margin: 0;
    margin-top: 7px; }
  .command-palette__list {
    border: 1px solid #e4e4e4;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 14px;
    overflow: auto;
    height: 400px; }
    .command-palette__list li {
      padding: 10px;
      border-bottom: 1px solid #f1f1f1;
      cursor: pointer; }
      .command-palette__list li:hover {
        background-color: #fbfbfb; }

.footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f1f4f9;
  font-size: 13px;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
  background-color: #fff; }
  .footer--dark {
    background-color: #131517; }
  .footer .changelog {
    position: relative; }
    .footer .changelog .HW_visible {
      position: absolute !important;
      top: -8px;
      right: -8px; }
  .footer ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none; }
    .footer ul li {
      padding: 10px 15px;
      cursor: pointer;
      color: #808080; }
      .footer ul li:hover {
        background-color: #f4f8fd;
        color: #202020; }

.protected-block {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  width: 320px; }
  .protected-block__field {
    display: flex;
    position: relative; }
    .protected-block__field .button {
      position: absolute;
      width: 45px;
      height: 41px;
      padding: 7px;
      box-shadow: none;
      top: 4px;
      right: 4px;
      border-radius: 3px;
      transform: scale(1);
      min-width: 45px; }
      .protected-block__field .button__icon {
        margin-right: 2px; }
  .protected-block h3,
  .protected-block p {
    margin: 0; }
  .protected-block__info {
    margin-bottom: 30px; }
    .protected-block__info h3 {
      color: #162942;
      font-size: 22px;
      font-weight: 500;
      margin-bottom: 10px; }
    .protected-block__info p {
      font-size: 16px;
      color: #9c9c9c;
      width: 100%;
      line-height: 23px; }
  .protected-block,
  .protected-block input {
    text-align: center; }
  .protected-block img {
    margin-bottom: 30px; }
  .protected-block input {
    font-size: 18px;
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
    padding-bottom: 11px;
    height: 27px;
    line-height: 27px; }