:root {
  --beone-ink: #141025;
  --beone-slate: #1f2630;
  --beone-soft: #f4f2f2;
  --beone-orange: #ed8533;
  --beone-pink: #e53859;
  --beone-white: #ffffff;
}

html,
body {
  font-family: "Open Sans", Arial, sans-serif;
  background: var(--beone-soft);
  color: var(--beone-slate);
}

h1,
h2,
h3,
h4,
h5,
h6,
.m-subheader__title,
.m-login__title,
.m-menu__section-text {
  font-family: "Comfortaa", "Open Sans", Arial, sans-serif;
  letter-spacing: 0;
}

::selection {
  background: var(--beone-pink);
  color: var(--beone-white);
}

.m-header {
  background: var(--beone-white);
  border-bottom: 1px solid rgba(20, 16, 37, 0.08);
  box-shadow: 0 4px 18px rgba(20, 16, 37, 0.06);
}

.m-brand.m-brand--skin-dark {
  background: var(--beone-soft);
  border-right: 1px solid rgba(20, 16, 37, 0.08);
}

.m-brand .m-brand__logo {
  padding-left: 18px;
}

.beone-brand-logo {
  display: block;
  width: 142px;
  max-width: 100%;
  height: auto;
}

.m-brand .m-brand__icon > span,
.m-brand .m-brand__toggler > span,
.m-brand .m-brand__toggler > span::before,
.m-brand .m-brand__toggler > span::after {
  background: var(--beone-ink);
}

.m-aside-left.m-aside-left--skin-dark,
.m-aside-menu.m-aside-menu--skin-dark {
  background: var(--beone-ink);
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
  color: rgba(255, 255, 255, 0.78);
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link {
  background: var(--beone-pink);
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
  color: var(--beone-white);
}

.m-aside-menu .m-menu__section-text {
  color: var(--beone-orange) !important;
  font-size: 0.76rem;
  font-weight: 700;
}

.m-wrapper,
.m-body {
  background: var(--beone-soft);
}

.m-portlet,
.m-dropdown .m-dropdown__inner,
.m-login__container {
  border-radius: 8px 8px 8px 0;
  border: 1px solid rgba(20, 16, 37, 0.08);
  box-shadow: 0 10px 28px rgba(20, 16, 37, 0.08);
}

.m-portlet .m-portlet__head {
  border-bottom-color: rgba(20, 16, 37, 0.08);
}

.m-portlet .m-portlet__head-title,
.m-portlet .m-portlet__head-text,
.m-topbar .m-nav__link span {
  color: var(--beone-ink);
}

.m-card-user.m-card-user--skin-dark,
.m-dropdown__header {
  background: var(--beone-soft) !important;
}

.beone-card-logo {
  display: block;
  width: 104px;
  height: auto;
  margin: 0 auto 12px;
}

.beone-platform-nav {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.beone-platform-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 16px;
  border-radius: 8px 8px 8px 0;
  font-family: "Comfortaa", "Open Sans", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(20, 16, 37, 0.14);
}

.beone-platform-badge--hermione {
  background: var(--beone-pink);
  color: var(--beone-white);
}

.beone-platform-badge--ramon {
  background: var(--beone-orange);
  color: var(--beone-ink);
}

.m-card-user__name {
  color: var(--beone-ink) !important;
  font-family: "Comfortaa", "Open Sans", Arial, sans-serif;
}

.m-card-user__email,
.m-link {
  color: var(--beone-pink) !important;
}

.btn,
.m-btn {
  border-radius: 8px 8px 8px 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  box-shadow: none !important;
}

.btn-primary,
.btn-brand,
.m-btn--label-brand,
.m-login__btn,
.m-btn--gradient-from-warning.m-btn--gradient-to-danger {
  background: var(--beone-pink) !important;
  border-color: var(--beone-pink) !important;
  color: var(--beone-white) !important;
}

.btn-primary:hover,
.btn-brand:hover,
.m-login__btn:hover,
.m-btn--gradient-from-warning.m-btn--gradient-to-danger:hover {
  background: var(--beone-ink) !important;
  border-color: var(--beone-ink) !important;
}

.form-control,
.m-input {
  border-radius: 8px 8px 8px 0 !important;
  border-color: rgba(20, 16, 37, 0.16);
}

.form-control:focus,
.m-input:focus {
  border-color: var(--beone-pink);
  box-shadow: 0 0 0 0.15rem rgba(229, 56, 89, 0.16);
}

.m-checkbox.m-checkbox--focus > input:checked ~ span {
  border-color: var(--beone-pink);
}

.m-checkbox.m-checkbox--focus > span::after {
  border-color: var(--beone-pink);
}

.beone-login-shell {
  position: relative;
  overflow: hidden;
  background: linear-gradient(118deg, var(--beone-soft) 0%, var(--beone-soft) 54%, var(--beone-ink) 54%, var(--beone-ink) 100%) !important;
}

.beone-login-shell .m-login__wrapper {
  position: relative;
  z-index: 1;
}

.m-login.m-login--2 .m-login__container {
  background: var(--beone-white);
  padding: 48px 42px;
}

.m-login__logo img {
  width: 210px;
  max-width: 76%;
  height: auto;
}

.beone-login-platform {
  margin: -8px 0 26px;
  text-align: center;
}

.beone-login-platform .beone-platform-badge {
  min-height: 38px;
  padding: 9px 18px;
  font-size: 0.9rem;
}

.m-login__head .m-login__title {
  color: var(--beone-ink);
  font-weight: 700;
}

.m-login__form .m-login__form-sub {
  color: var(--beone-slate);
}

.table thead th,
.m-datatable__head th {
  color: var(--beone-ink);
  background: rgba(244, 242, 242, 0.72);
}

.badge,
.m-badge {
  border-radius: 8px 8px 8px 0;
}

.alert {
  border-radius: 8px 8px 8px 0;
}

@media (max-width: 1024px) {
  .m-brand .m-brand__logo {
    padding-left: 12px;
  }

  .beone-brand-logo {
    width: 126px;
  }

  .beone-platform-nav {
    padding: 0 8px;
  }

  .beone-platform-badge {
    min-height: 30px;
    padding: 6px 11px;
    font-size: 0.74rem;
  }
}

@media (max-width: 768px) {
  .beone-login-shell {
    background: var(--beone-soft) !important;
  }

  .m-login.m-login--2 .m-login__container {
    padding: 34px 24px;
    margin: 18px;
  }
}