@import "/Content/root.css?v=131";
/*Setting Form and Stuffs*/

body {
  background-color: var(--bg-color-layer-0);
  color: var(--text-color) !important;
}

.white-bg .navbar-fixed-top,
.white-bg .navbar-static-top,
.theme--light.v-application {
  background-color: var(--bg-color-layer-0) !important;
  color: var(--text-color) !important;
}

.gold-feature-title,
.ds-c-action-tile {
  color: var(--text-color) !important;
}

.form-control,
.single-line {
  background-color: var(--form-bg) !important;
  color: var(--text-color) !important;
  border: 0.5px solid var(--form-border-hover) !important;
}

.tabs {
  background: var(--bg-color-layer-0) !important;
  border-bottom: 3px solid var(--bg-gray-layer-2);
}

.bg-transparent {
  background: var(--transparent);
}

.faq-answer {
  background-color: var(--bg-gray-layer-1) !important;
  color: var(--text-color) !important;
}

.faq-answer > .faq-answer {
  background-color: var(--bg-gray-layer-2) !important;
  color: var(--text-color) !important;
}

.btn.btn-primary,
button.btn-primary,
button.swal2-confirm.swal2-styled .kfds-c-btn-primary,
button.btn.btn-primary,
input.kfds-c-btn-primary,
button.kfds-c-btn-primary,
.btn.btn-copy.kfds-c-btn-primary,
a.kfds-c-btn-primary,
button.kfds-btn-primary.dropdown-toggle,
input.btn.btn-login.btn-primary.kfds-srf-rounded,
a.btn.kfds-lyt-width-100 {
  color: var(--text-w-b);
  background-color: var(--btn-b-w);
  border: 1px solid var(--btn-b-w);
  transition: all ease-in 150ms;
}

button.kfds-c-btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
button.swal2-confirm.swal2-styled:hover,
.btn.ladda-button.btn-primary:hover,
input.kfds-c-btn-primary:hover,
.kfds-c-btn-primary:hover,
button.btn.btn-primary:hover,
a.button.kfds-c-btn-primary:hover,
button.kfds-btn-primary.dropdown-toggle:hover,
input.btn.btn-login.btn-primary.kfds-srf-rounded:hover,
a.btn.kfds-lyt-width-100:hover {
  color: var(--text-w-b);
  background-color: var(--btn-b-w-hover);
  opacity: 0.95;
}

.btn.btn btn-primary:active,
button.btn-primary:active,
button.swal2-confirm.swal2-styled:active,
.btn.ladda-button.btn-primary:active,
input.kfds-c-btn-primary:active,
.kfds-c-btn-primary:active,
button.btn.btn-primary:active,
a.kfds-c-btn-primary:active,
button.kfds-btn-primary.dropdown-toggle:active,
input.btn.btn-login.btn-primary.kfds-srf-rounded:active,
a.btn.kfds-lyt-width-100:active {
  color: var(--text-w-b);
  background-color: var(--btn-b-w);
  border: 1px solid var(--btn-b-w);
  transition: all ease-in 150ms;
}

.btn.btn btn-primary:focus,
button.btn-primary:focus,
button.swal2-confirm.swal2-styled:focus,
.btn.ladda-button.btn-primary:focus,
input.kfds-c-btn-primary:focus,
.kfds-c-btn-primary:focus,
button.btn.btn-primary:focus,
a.kfds-c-btn-primary:focus,
button.kfds-btn-primary.dropdown-toggle:focus,
input.btn.btn-login.btn-primary.kfds-srf-rounded:focus {
  color: var(--text-w-b);
  background-color: var(--btn-b-w-hover);
  opacity: 0.95;
}

.kfds-c-form-border .button-s-secondary,
button.kfds-c-btn-primary-light,
input.kfds-c-btn-primary-light,
a.btn-cta-transparent,
.button-s-secondary.btn,
button.kfds-btn-primary-light,
span.kfds-btn-primary-light {
  background-color: var(--btn-bg-blue-secondary);
  color: var(--white);
  border: 1px solid var(--btn-bg-blue-secondary);
  transition: all ease-in 150ms;
}

.kfds-c-form-border .button-s-secondary:hover,
button.kfds-c-btn-primary-light:hover,
input.kfds-c-btn-primary-light:hover,
a.btn-cta-transparent:hover,
.button-s-secondary.btn:hover,
button.kfds-btn-primary-light:hover,
span.kfds-btn-primary-light:hover {
  background-color: var(--btn-bg-blue-secondary-hover);
  color: var(--white);
}

.kfds-c-form-border .button-s-secondary:active,
button.kfds-c-btn-primary-light:active,
input.kfds-c-btn-primary-light:active,
a.btn-cta-transparent:active,
.btn.btn-xs.btn-cta-transparent.transaction-list-btn-cta:active,
.button-s-secondary.btn:active,
button.kfds-btn-primary-light:active,
span.kfds-btn-primary-light:active {
  background-color: var(--btn-bg-blue-secondary);
  color: var(--white);
  border: 1px solid var(--btn-bg-blue-secondary);
  transition: all ease-in 150ms;
}

.kfds-c-form-border .button-s-secondary:focus,
button.kfds-c-btn-primary-light:focus,
input.kfds-c-btn-primary-light:focus,
a.btn-cta-transparent:focus,
.btn.btn-xs.btn-cta-transparent.transaction-list-btn-cta:focus,
.button-s-secondary.btn:focus,
button.kfds-btn-primary-light:focus,
span.kfds-btn-primary-light:focus {
  background-color: var(--btn-bg-blue-secondary-hover);
  color: var(--white);
}

label.explore-tab-each.active,
button.setting-tab-link.active {
  color: var(--brand-blue-500);
  border-bottom: 3px solid var(--brand-blue-500);
  background-color: var(--bg-color-layer-0);
}

.tab label {
  color: var(--text-color);
  font-family: var(--font-primary) !important;
  font-variant-ligatures: no-common-ligatures;
}

button.swal2-cancel.swal2-styled {
  background-color: var(--bg-color-layer-1) !important;
  color: var(--text-color) !important;
}

.tab label.explore-tab-each:hover,
button.setting-tab-link:hover {
  color: var(--brand-blue-500);
  background-color: var(--settings-tab-hover);
}

a.kfds-btn-sidemenu.active,
a.kfds-btn-sidemenu:focus {
  background-color: var(--btn-bg-sidebar-active);
  color: var(--btn-text-sidebar-active);
}

a.kfds-btn-sidemenu.active > i.fab.fa-discord.fa-fw,
a.kfds-btn-sidemenu:focus > i.fab.fa-discord.fa-fw {
  color: var(--btn-text-sidebar-active);
  background-color: transparent;
}

a.kfds-text-is-link {
  cursor: pointer;
  color: var(--text-link);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--brand-blue-300);
  text-decoration-color: var(--brand-blue-300);
}

.kfds-text-is-link:hover,
.kfds-text-is-link:focus {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-color: var(--brand-blue-500);
}

.kfds-btn-tertiary-light-icon.btn-tiny-copy-btn:hover {
  color: var(--brand-blue-500);
}

.form-section-each {
  margin-top: 32px;
}

h2 {
  color: var(--text-color) !important;
}

.h-form-section {
  display: none;
  margin-top: 32px;
  padding-top: 24px;
  margin-bottom: 64px;
  color: #323842;
  font-size: 28px;
  font-weight: var(--weight-m);
  border: none;
}

.wf-form-list {
  flex-direction: column;
  display: flex;
  width: 100%;
  margin-bottom: 24px;
  -webkit-box-orient: vertical;
}

.row-flex-center {
  display: flex;
  align-items: center;
}

input#blogPostTitle {
  background-color: var(--form-bg-white) !important;
}

/*Text-input*/
.form-control,
.single-line {
  background-color: var(--form-bg-white);
  background-image: none;
  border-radius: 8px;
  transition:
    border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  /*border: var(--form-border) !important;*/
}

.form-control:hover,
.single-line:hover {
  border: var(--form-border-hover);
}

.form-control:focus,
.single-line:focus {
  border-color: var(--form-border-color-focus) !important;
}

input,
select,
textarea {
  /*max-width: 300px;*/
}

input:focus,
.form-control:focus {
  border-color: var(--form-border-color-focus) !important;
}

/* styles for validation helpers */

.form-control:focus,
.single-line:focus {
  border-color: var(--form-border-color-focus) !important;
}

.wf-text-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 96px;
  max-height: none;
  min-height: 96px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(50, 56, 66, 0.2);
  border-radius: 8px;
  background-color: transparent;
  box-shadow: none;
}

.wf-text-area:focus {
  border-color: #323842;
}

.wf-text-area:hover {
  border-color: rgba(50, 56, 66, 0.6);
}

.wf-in-input,
.wf-in-select {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 0px;
  font-size: 16px;
  line-height: 1.42857143;
  color: var(--text-color);
  vertical-align: middle;
  background-color: var(--bg-color-layer-1);
  border: 0.5px solid var(--form-border);
  border-radius: 8px;
  box-shadow: none;
}

.wf-in-input:focus {
  border-color: var(--form-border-hover);
}

.wf-in-input:hover {
  border-color: var(--form-border-hover);
}

.wf-in-input-half,
.wf-in-select-half {
  height: 45px;
  display: block;
  min-width: 50%;
  width: 50%;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}

.wf-in-input-half:focus {
  border-color: #323842;
}

.wf-in-input-half:hover {
  border-color: rgba(50, 56, 66, 0.6);
}

.ghost-m-button {
  border: var(--border-layer-0);
  border-radius: 8px;
  background-color: transparent;
  font-family: var(--font-primary);
  font-variant-ligatures: no-common-ligatures;
  color: var(--text-color);
  font-size: 16px;
  font-weight: var(--weight-m);
  display: inline-block;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 0 16px;
  display: flex;
  align-items: center;
  height: 38px;
  min-width: 30%;
  justify-content: space-evenly;
}

.ghost-m-button:hover {
  border: var(--border-layer-0);
}

.ghost-icon-button {
  border-style: solid;
  border-width: 2px;
  border-color: rgba(50, 56, 66, 0.1);
  border-radius: 8px;
  background-color: transparent;
  font-family: var(--font-primary);
  font-variant-ligatures: no-common-ligatures;
  color: #323842;
  font-weight: var(--weight-m);
  display: inline-block;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 0 16px;
  display: flex;
  align-items: center;
  height: 38px;
}

.ghost-icon-button:hover {
  border-color: rgba(50, 56, 66, 0.6);
}

.verified-check {
  margin-right: 16px;
  background-color: transparent;
  font-family: Quicksand, sans-serif;
  color: #323842;
  font-size: 16px;
  font-weight: var(--weight-m);
  display: inline-block;
  line-height: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 38px;
}

.submit-m-button {
  min-width: 30%;
  margin-top: 16px;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.obj-align-right {
  display: flex;
  justify-content: flex-end;
}

.button-m-primary {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 45px;
  max-width: 100%;
  margin-left: 0px;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #ff5e5b;
  border-radius: 8px;
  background-color: #ff5e5b;
  color: #fff;
  font-size: 16px;
  font-weight: var(--weight-m);
  text-align: center;
  text-decoration: none;
}

.row-flex-c-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.danger-tile {
  padding: 16px;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--persimmon-500);
  transition: background-color linear 0.2s;
  background-color: var(--persimmon-100);
  color: var(--persimmon-400);
}

hr {
  border-top: var(--border-layer-0) !important;
}

/*icon section*/
.icon-in-btn {
  font-size: 20px;
}

.fa-facebook {
  color: #3b5999;
}

.fa-instagram {
  color: #dd2a7b !important;
}

.fa-discord {
  color: #7289da;
}

.fa-reddit-alien {
  color: #ff4500 !important;
}

.fa-tumblr {
  color: #34465d;
}

.fa-twitch {
  color: #6441a5;
}

.fa-twitter {
  color: #55acee;
}

.fa-youtube {
  color: #cd201f;
}

.fa-check-circle {
  color: #42d6aa;
}

.fa-paypal {
  color: #009cde !important;
}

.fa-stripe {
  color: #6772e5 !important;
}

.fa-mastodon {
  color: #6b61f0 !important;
}

.mrgn-bottom-spc {
  margin-bottom: 16px;
}

.mrgn-top-spc {
  margin-top: 16px;
}

.kfds-right-mrgn-4 {
  margin-right: 4px !important;
}

.button-m-secondary {
  font-weight: var(--weight-m);
  color: #ff5f5f;
  background-color: #ffefef;
  border: none;
  border-radius: 8px;
  height: 100%;
  padding: 12px 16px;
  width: 100px;
  text-align: center;
  position: relative;
  z-index: 100;
  margin-left: -2px;
  cursor: pointer;
}

.button-m-secondary:hover {
  background-color: #ffdddd;
}

.button-s-secondary {
  font-weight: var(--weight-m);
  color: #ff5f5f;
  background-color: #ffefef;
  border: none;
  border-radius: 8px;
  height: 38px;
  padding: 8px 16px;
  width: 100px;
  text-align: center;
  position: relative;
  z-index: 100;
  cursor: pointer;
}

.button-s-secondary:hover {
  background-color: #ffdddd;
  color: #ff5f5f;
}

.material-switch > input[type="checkbox"]:checked + label::before {
  background: inherit;
  opacity: 0.5;
  background-color: #00ff4c;
  transition: all 0.1s ease-in-out;
}

.material-switch > input[type="checkbox"]:checked + label::after {
  background: inherit;
  left: 20px;
  transition: all 0.1s ease-in-out;
  background-color: #ffffff;
}

.list-toggle-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-width: 1px 0;
  border-radius: 0;
  /*border-bottom: 1px solid rgba(75, 121, 141, 0.18);*/
}

.wf-setting-tab {
  overflow: hidden;
  border-bottom: var(--border-bottom);
}

.wf-setting-tab-fixed {
  position: fixed;
  top: 60px;
  margin: auto;
  padding: 0 16px;
  background: var(--bg-color-layer-0);
  z-index: 101;
  width: 100%;
  max-width: 692px;
}

.wf-setting-tab-fixed > div {
  margin: 0 auto;
}

@media (max-width: 965px) {
  .wf-setting-tab-fixed {
    width: 100%;
    max-width: 655px;
  }
}

@media (max-width: 895px) {
  .wf-setting-tab-fixed {
    width: 100%;
    max-width: 565px;
  }
}

@media (max-width: 800px) {
  .wf-setting-tab-fixed {
    width: 100%;
    max-width: 470px;
  }
}

@media (max-width: 767px) {
  .wf-setting-tab-fixed {
    position: fixed;
    top: 60px;
    left: 0;
    margin: auto;
    z-index: 101;
    width: 100%;
    max-width: 100vw;
  }
}

@media (max-width: 479px) {
  .fa-check-circle {
    display: block;
  }

  .verified-check-text {
    color: #42d6aa;
  }

  .submit-m-button {
    width: 100%;
  }

  .ghost-m-button {
    min-width: 40%;
  }

  .flex-vertical {
    flex-direction: column;
  }

  .button-vertical-width {
    width: 100%;
    margin: 24px 0;
    justify-content: center;
  }

  .text-form-hint-start {
    min-width: -webkit-fill-available;
    margin-bottom: 8px;
  }

  .setting-tab-link {
    font-size: 16px !important;
  }
}
/* Style the buttons inside the tab */
.setting-tab-link {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px 15px;
  height: 52px;
  transition: 0.1s;
  font-size: 19px;
  font-weight: var(--weight-m);
  color: var(--text-color);
}
/* Change background color of buttons on hover */
.setting-tab-link:hover {
  color: #ff5e5b;
  background-color: #ffffff;
}

.setting-tab-link.active {
  color: #ff5e5b;
  border-bottom: 3px solid #ff5f5f;
  background-color: #ffffff;
}

.field-validation-error {
  margin-top: 8px;
}

.color {
  margin: 5px !important;
}

.footer-mini {
  display: none;
}

.chosen-container {
  /*fixes an issue where the tab that the 'chosen' contol is on isn't visible when the script runs and the rendering scews up*/
  min-width: 100%;
}

.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,
.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,
.fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:hover,
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-modal .fr-command.fr-btn.fr-dropdown.fr-active {
  background: var(--bg-color-layer-1);
}

.fr-popup .fr-buttons.fr-tabs {
  background-color: var(--bg-gray-layer-1);
}

.fr-command.fr-btn
  + .fr-dropdown-menu
  .fr-dropdown-wrapper
  .fr-dropdown-content
  ul.fr-dropdown-list
  li
  a {
  color: var(--text-color) !important;
}