/*************************************
* Settings & Utilities
*************************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*************************************
* Project style settings.
*************************************/
/*************************************
* Helper functions and mixins.
*************************************/
/******************************************
* Font definitions & global type settings
******************************************/
@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot?neri7k");
  src: url("fonts/icomoon.eot?neri7k#iefix") format("embedded-opentype"), url("fonts/icomoon.ttf?neri7k") format("truetype"), url("fonts/icomoon.woff?neri7k") format("woff"), url("fonts/icomoon.svg?neri7k#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-checkmark-custom:before {
  content: "\e900"; }

.icon-feather2:before {
  content: "\e615"; }

.icon-cog:before {
  content: "\e672"; }

.icon-broom:before {
  content: "\e683"; }

.icon-dice:before {
  content: "\e687"; }

.icon-user:before {
  content: "\e71e"; }

.icon-power:before {
  content: "\e7b9"; }

.icon-icons:before {
  content: "\e87e"; }

.icon-sync:before {
  content: "\e8da"; }

.icon-magnifier:before {
  content: "\e922"; }

.icon-menu:before {
  content: "\e92b"; }

.icon-cross2:before {
  content: "\e935"; }

.icon-plus:before {
  content: "\e936"; }

.icon-minus:before {
  content: "\e937"; }

.icon-chevron-up:before {
  content: "\e939"; }

.icon-chevron-down:before {
  content: "\e93a"; }

.icon-chevron-left:before {
  content: "\e93b"; }

.icon-chevron-right:before {
  content: "\e93c"; }

.icon-arrow-up:before {
  content: "\e941"; }

.icon-arrow-down:before {
  content: "\e942"; }

.icon-arrow-left:before {
  content: "\e943"; }

.icon-arrow-right:before {
  content: "\e944"; }

.icon-checkmark-circle:before {
  content: "\e959"; }

.icon-funnel:before {
  content: "\e97c"; }

.icon-circle:before {
  content: "\e99d"; }

.icon-ellipsis:before {
  content: "\e9e9"; }

[class^="icon-"], [class*=" icon-"] {
  font-size: 1.25rem;
  line-height: 1.25rem; }

html {
  font-size: 16px;
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

[data-ember-action], a, button, input, .link {
  cursor: pointer; }

body {
  background-color: #221D23; }

@keyframes springish {
  0.00% {
    transform: translate3d(100px, 0, 0) scale(0); }
  10.16% {
    transform: translate3d(-41.06px, 0, 0) scale(1.4106); }
  21.39% {
    transform: translate3d(16.09px, 0, 0) scale(0.8391); }
  32.62% {
    transform: translate3d(-6.31px, 0, 0) scale(1.0631); }
  43.85% {
    transform: translate3d(2.47px, 0, 0) scale(0.9753); }
  55.08% {
    transform: translate3d(-0.97px, 0, 0) scale(1.0097); }
  66.31% {
    transform: translate3d(0.38px, 0, 0) scale(0.9962); }
  77.54% {
    transform: translate3d(-0.15px, 0, 0) scale(1.0015); }
  88.77% {
    transform: translate3d(0.06px, 0, 0) scale(0.9994); }
  100.00% {
    transform: translate3d(-0.02px, 0, 0) scale(1.0002); } }

.spring {
  animation: springish;
  animation-duration: 2.38s;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); }

.ember-modal-dialog {
  z-index: 51;
  position: fixed; }
  .ember-modal-dialog.emd-in-place {
    position: static; }

.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center .ember-modal-dialog {
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center; }

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center .ember-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center; }

.ember-modal-wrapper.emd-animatable .ember-modal-dialog {
  position: relative; }

.ember-modal-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50; }

.ember-modal-dialog {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 10px #222;
  padding: 10px; }

.ember-modal-overlay.translucent {
  background-color: rgba(128, 128, 128, 0.77); }

/*************************************
* Styles for resuable components.
*************************************/
.list-spells {
  background-color: #221D23;
  padding-left: 2rem;
  padding-top: 2.5rem; }

.item-spellsList {
  height: 4.125rem;
  color: #fff;
  border-bottom: 1px solid #49414B;
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.625rem;
  display: flex;
  align-items: center;
  padding-right: 1.125rem;
  justify-content: space-between; }
  .item-spellsList a {
    color: inherit;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; }
    .item-spellsList a .content-item-spellList {
      font-size: 1.5rem;
      line-height: 1.625rem; }
    .item-spellsList a:hover, .item-spellsList a.is-active, .item-spellsList a.active {
      background-color: #49414B;
      position: relative; }
      .item-spellsList a:hover::before, .item-spellsList a.is-active::before, .item-spellsList a.active::before {
        content: "";
        position: absolute;
        top: -1px;
        left: -2rem;
        height: calc(100% + 2px);
        width: 2rem;
        background-color: #49414B; }
      .item-spellsList a:hover::after, .item-spellsList a.is-active::after, .item-spellsList a.active::after {
        content: "";
        position: absolute;
        top: -1px;
        right: -4.625rem;
        height: calc(100% + 2px);
        width: 4.625rem;
        background-color: #49414B; }
  .item-spellsList:first-child a:hover::before, .item-spellsList:first-child a:hover::after, .item-spellsList:first-child a.is-active::before, .item-spellsList:first-child a.is-active::after, .item-spellsList:first-child a.active::before, .item-spellsList:first-child a.active::after {
    top: 0px;
    height: calc(100% + 1px); }

.button-item-spelList {
  height: 3.5rem;
  width: 3.5rem;
  flex: 0 0 3.5rem;
  padding: 0;
  z-index: 1;
  position: relative; }

.icon-item-spellsList {
  font-size: 1.25rem;
  line-height: 1.25rem; }
  .icon-item-spellsList.add {
    color: #1B8798; }
  .icon-item-spellsList.remove {
    color: #D61C59; }

.container-empyState-listSpells {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem; }

.content-emptyState-listSpells {
  max-width: 100%;
  width: 15.625rem;
  text-align: center; }

.heading-emptyState-listSpells {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.625rem;
  color: #D61C59;
  text-align: center;
  margin-bottom: 1rem; }

.byline-emptyState-listSpells {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: #CCCCCC;
  text-align: center;
  margin-bottom: 1rem; }

.button-emptyState {
  padding: 0 1rem; }

.container-lazyLoading-listSpells {
  height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% + 2rem);
  position: relative;
  left: -2rem; }
  .container-lazyLoading-listSpells .spinner {
    margin: 0; }

.container-scrollView {
  position: relative;
  height: 100%;
  width: 100%;
  /* Prevent native touch events on Windows */
  -ms-touch-action: none;
  /* Prevent the callout on tap-hold and text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* Prevent text resize on orientation change, useful for web-apps */
  -o-text-size-adjust: none;
  text-size-adjust: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }
  .container-scrollView.is-disabled {
    overflow: hidden;
    -webkit-overflow-scrolling: auto; }

.container-scrollView-inner {
  width: 100%;
  /* Prevent elements to be highlighted on tap */
  -webkit-tap-highlight-color: transparent;
  /* Put the scroller into the HW Compositing layer right from the start */
  -ms-transform: translateZ(0);
  transform: translateZ(0); }

.container-input-search {
  background-color: #49414B;
  color: #E7D84B;
  padding: 0 0 0 1.5rem;
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.625rem;
  display: flex;
  align-items: center;
  border-radius: 6.25rem;
  width: 100%; }

.inputSearch {
  font-size: 1.5rem;
  line-height: 2rem;
  color: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 100%;
  height: 2rem;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; }

.button-submitSearch {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  color: inherit;
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  border-radius: 100%; }

.icon-inputSearch {
  font-size: 1.25rem;
  line-height: 1.25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.container-filtersSpells-inner-first {
  display: flex;
  flex: 0 0 5.5rem;
  height: 5.5rem;
  align-items: flex-start;
  background-color: #0B010E;
  padding: 1rem 2rem 0;
  transition: flex-basis ease 0.4s;
  overflow: hidden; }
  .container-filtersSpells-inner-first.is-active {
    flex-basis: calc(5rem + 14rem + 1rem); }

.container-filtersSpells-inner-first .container-input-search {
  flex: 0 0 calc(100% - 4.5rem);
  transition: flex-basis cubic-bezier(0.45, 0.005, 0, 1.335) 0.4s; }
  .container-filtersSpells-inner-first .container-input-search.is-active {
    flex: 0 0 calc(100% - 9rem); }

.button.container-button-clearFilters {
  position: relative;
  flex: 0 0 3.5rem;
  margin-left: 1rem;
  opacity: 0;
  transition: opacity ease 0.4s; }
  .button.container-button-clearFilters.is-active {
    opacity: 1; }

.icon-buttonClearFilters {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  color: inherit;
  display: block;
  font-size: 1.25rem;
  line-height: 1.25rem; }

.container-button-toggleFilters.button {
  position: relative;
  flex: 0 0 3.5rem;
  margin-right: 1rem;
  border-radius: 0.9375rem;
  padding: 0;
  display: block !important; }
  .container-button-toggleFilters.button.is-active .container-icon-buttonToggleFilters {
    -ms-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg); }

.container-icon-buttonToggleFilters {
  -ms-transform-origin: center center;
      transform-origin: center center;
  transition: transform ease 0.25s;
  -ms-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
  width: 3.5rem;
  height: 3.5rem;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.icon-buttonToggleFilters {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  color: inherit;
  display: block;
  font-size: 1.25rem;
  line-height: 1.25rem;
  width: 1.25rem;
  height: 1.25rem; }

.container-filtersSpells-inner-second {
  position: absolute;
  left: 0;
  top: calc(100% - 4.5rem);
  transition: transform ease 0.4s, opacity ease 0.4s;
  transform: translate3d(0, 0, 0);
  width: 100%;
  opacity: 0;
  pointer-events: none; }
  .container-filtersSpells-inner-second.is-visible {
    transform: translate3d(0, calc(-1 * 19rem + 4.5rem), 0);
    opacity: 1;
    pointer-events: all; }

.container-filtersSpells {
  background-color: #E7D84B;
  padding: 1rem 2rem;
  position: relative; }

.container-filters-spellLevel {
  display: flex;
  flex-wrap: wrap; }

.container-filter-spellLevel {
  width: calc(100% / 5);
  height: 3.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center; }

.container-inner-filter-spellLevel {
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  font-family: "proxima-soft", sans-serif;
  font-weight: 700;
  font-style: normal;
  position: relative;
  transition: background ease 0.25s; }

@media (min-width: 371px) {
  .container-inner-filter-spellLevel {
    width: 3.5rem;
    height: 3.5rem; } }

.content-filter-spellLevel {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  color: inherit; }

.container-select-filtersSpellTypes {
  margin-bottom: 1rem; }
  .container-select-filtersSpellTypes:last-child {
    margin-bottom: 0; }

.container-filtersSpells-inner-third {
  background-color: #0B010E;
  padding: 0 2rem 1rem;
  flex: 0 0 4.5rem; }

.container-segmentedFilter {
  width: 100%;
  display: flex; }

.container-segment-segmentedFilter {
  flex: 1;
  color: #D61C59;
  border: 3px solid #D61C59;
  text-align: center;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.625rem; }
  .container-segment-segmentedFilter.is-active {
    background-color: #D61C59;
    color: #0B010E; }
  .container-segment-segmentedFilter:first-child {
    border-radius: 6.25rem 0 0 6.25rem; }
  .container-segment-segmentedFilter:last-child {
    border-radius: 0 6.25rem 6.25rem 0; }

.button-reset, .button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  outline: none;
  border: none;
  margin: 0; }

.button {
  border-radius: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  font-size: 1.5rem;
  line-height: 1.625rem;
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none; }
  .button .spinner {
    margin: 0; }

.content-button {
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.fill-yellowMedium {
  background-color: #E7D84B; }

.fill-redMedium {
  background-color: #D61C59; }

.fill-redDark {
  background-color: #962349; }

.fill-greyDark {
  background-color: #49414B; }

.fill-purpleDark {
  background-color: #360745; }

[class^="outline-"], [class*=" outline-"] {
  border-width: 3px;
  border-style: solid; }

.outline-yellowMedium {
  border-color: #E7D84B; }

.outline-redMedium {
  border-color: #D61C59; }

.outline-greyDark {
  border-color: #49414B; }

.outline-purpleDark {
  border-color: #360745; }

.width-full {
  width: 100%; }

.copy-heading {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.25rem;
  line-height: 2.5rem; }

.copy-heading2, .copy-byline {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.875rem;
  margin-bottom: 1.875rem; }

.copy-byline {
  margin-bottom: 1rem; }

.copy-title, .container-description-spell h2, .heading-emptyState-spell {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.625rem; }

.copy-body, .container-description-spell p {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.875rem;
  margin: 0 0 1.875rem; }

em {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: italic; }

.copy-body-italic, .container-description-spell em {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.875rem; }

.copy-body-bold, .container-description-spell b {
  font-family: "proxima-soft", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.875rem; }

.copy-small {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.25rem;
  margin: 0 0 1rem; }

.text-center {
  text-align: center; }

.can-wrap {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -webkit-hyphens: auto;
  hyphens: auto; }

.text-white {
  color: #fff; }

.text-yellowMedium {
  color: #E7D84B; }

.text-redMedium {
  color: #D61C59; }

.text-blackMedium {
  color: #221D23; }

.text-blackDark {
  color: #0B010E; }

.text-greyDark {
  color: #49414B; }

.text-purpleDark {
  color: #360745; }

.container-input-select {
  position: relative;
  width: 100%;
  height: 3.5rem;
  border-radius: 6.25rem;
  background-color: transparent;
  border: 3px solid #49414B;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  transition: background-color ease 0.4s; }
  .container-input-select.has-value {
    background-color: #49414B;
    color: #E7D84B; }
  .container-input-select select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    color: inherit;
    font-family: "proxima-soft", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1.625rem;
    background-color: transparent;
    border: none;
    outline: none;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    padding: 0 1rem 0 2rem;
    transition: color ease 0.4s;
    margin: 0;
    height: 3.5rem; }

.icon-inputSelect {
  position: absolute;
  top: 50%;
  -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
  right: 0;
  width: 3.5rem;
  height: 3.5rem;
  color: inherit;
  font-size: 1.25rem;
  line-height: 3.5rem;
  text-align: center;
  pointer-events: none;
  transition: color ease 0.4s; }

.container-buttonHeader {
  flex: 0 0 4.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 4.125rem;
  border-radius: 0 0 0.9375rem 0.9375rem;
  z-index: 5; }
  .container-buttonHeader.is-condensed .group-slots {
    transform: translate3d(calc(100vw / 2 - 100%), 0, 0); }
  .container-buttonHeader.is-condensed .group-user {
    transform: translate3d(100%, 0, 0);
    opacity: 0; }

.group-button-buttonHeader {
  display: flex;
  align-items: center;
  transition: transform cubic-bezier(0.45, 0.005, 0, 1.335) 0.4s, opacity cubic-bezier(0.45, 0.005, 0, 1.335) 0.4s;
  opacity: 1;
  transform: translate3d(0, 0, 0); }

.title-buttonHeader {
  height: 1.8125rem; }

.icon-buttonHeader {
  margin-right: 0.25rem; }

.container-buttonNavigation {
  height: 5.25rem;
  width: 5.25rem;
  border-radius: 100%;
  background-color: transparent;
  position: absolute;
  left: 50%;
  -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
  top: 0;
  transform: translate3d(-50%, 0, 0);
  transition: background-color ease 0.4s, transform cubic-bezier(0.45, 0.005, 0, 1.335) 0.6s; }
  .container-buttonNavigation.hidden {
    background-color: rgba(255, 255, 255, 0);
    transform: translate3d(calc((100vw / 2 - 2rem) * -1), 1.375rem, 0);
    z-index: 1; }
  .container-buttonNavigation.hiddenWhileEditCharacters {
    background-color: transparent;
    color: #D61C59;
    z-index: 7;
    pointer-events: none; }
    .container-buttonNavigation.hiddenWhileEditCharacters .icon-cross2 {
      opacity: 0; }
  .container-buttonNavigation.openSettings {
    background-color: #fff;
    color: #360745;
    transform: translate3d(calc((100vw / 2 - 2rem) * -1), 1.375rem, 0);
    z-index: 7; }
    .container-buttonNavigation.openSettings .icon-cog {
      opacity: 1; }
  .container-buttonNavigation.openChooseCharacter {
    background-color: #fff;
    color: #360745;
    transform: translate3d(-50%, 1.375rem, 0);
    z-index: 7; }
    .container-buttonNavigation.openChooseCharacter .container-avatar-character {
      opacity: 1; }
    .container-buttonNavigation.openChooseCharacter .name-character-buttonNavigation {
      opacity: 1; }
    @media (min-width: 768px) {
      .container-buttonNavigation.openChooseCharacter {
        -ms-transform: translate(calc(((100vw / 2 - 12.9375rem) * -1) - 2.625rem), 1.375rem);
            transform: translate(calc(((100vw / 2 - 12.9375rem) * -1) - 2.625rem), 1.375rem); } }
  .container-buttonNavigation.backToSpells {
    background-color: #0B010E;
    color: #fff;
    transform: translate3d(calc((100vw / 2 - 2rem) * -1), 1.375rem, 0);
    z-index: 7; }
    .container-buttonNavigation.backToSpells .icon-arrow-left {
      opacity: 1; }
  .container-buttonNavigation.closeSpellSlotManager {
    background-color: #fff;
    color: #D61C59;
    transform: translate3d(-50%, calc((100vh - 6rem)), 0);
    z-index: 7; }
    .container-buttonNavigation.closeSpellSlotManager .icon-cross2 {
      opacity: 1; }
    @media (min-width: 768px) {
      .container-buttonNavigation.closeSpellSlotManager {
        transform: translate3d(-50%, calc((100vh - 7.25rem)), 0); } }
  .container-buttonNavigation.editingSpellSlots {
    background-color: #fff;
    color: #D61C59;
    transform: translate3d(-50%, calc((100vh - 6rem)), 0);
    z-index: 1; }
    .container-buttonNavigation.editingSpellSlots .icon-cross2 {
      opacity: 1; }
  .container-buttonNavigation.closeEditCharacter {
    background-color: #fff;
    color: #D61C59;
    transform: translate3d(-50%, calc((100vh / 2 + 8.25rem)), 0);
    z-index: 8; }
    .container-buttonNavigation.closeEditCharacter .icon-cross2 {
      opacity: 1; }
  .container-buttonNavigation.closeSettings {
    background-color: #fff;
    color: #D61C59;
    transform: translate3d(-50%, calc((100vh / 2 + 12.75rem)), 0);
    z-index: 7; }
    .container-buttonNavigation.closeSettings .icon-cross2 {
      opacity: 1; }
  .container-buttonNavigation.closeCreateCharacter {
    background-color: #fff;
    color: #D61C59;
    transform: translate3d(-50%, calc((100vh / 2 + 5.625rem)), 0);
    z-index: 9; }
    .container-buttonNavigation.closeCreateCharacter .icon-cross2 {
      opacity: 1; }

.icon-buttonNavigation {
  font-size: 2.5rem;
  line-height: 2.5rem;
  color: inherit;
  display: block;
  opacity: 0;
  transition: opacity ease 0.4s;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.container-avatar-character {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transition: opacity ease 0.4s;
  color: inherit;
  border: 2px solid #fff;
  border-radius: 100%;
  z-index: 1; }

.img-avatar-character {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.icon-avatar-character {
  font-size: 2.5rem;
  line-height: 2.5rem;
  color: inherit;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  color: inherit; }

.name-character-buttonNavigation {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.25rem;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -100%, 0);
  color: #E7D84B;
  opacity: 0;
  transition: opacity ease 0.4s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200%; }

.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  animation: sk-rotate 2.0s infinite linear; }

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-bounce 2.0s infinite ease-in-out; }

.dot2 {
  top: auto;
  bottom: 0;
  animation-delay: -1.0s; }

@keyframes sk-rotate {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg); } }

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0); }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1); } }

.container-spellSlotsManager-inner {
  background-color: #D61C59;
  position: absolute;
  height: calc(100vh - 3.5rem);
  width: 100%;
  z-index: 5;
  border-radius: 0 0 0.9375rem 0.9375rem;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate3d(0, calc(-100% + 3.5rem), 0);
  transition: transform cubic-bezier(0.45, 0.005, 0, 1.335) 0.6s, opacity ease 0.6s;
  pointer-events: none; }
  .container-spellSlotsManager-inner > .container-scrollView {
    padding: 1.375rem 0 3.5rem; }
  .container-spellSlotsManager-inner.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: all; }

@media (min-width: 768px) {
  .container-spellSlotsManager-inner {
    max-width: 64.125rem;
    height: calc(100vh - 6.625rem);
    left: 50%;
    transform: translate3d(-50%, calc(-100% + 3.5rem), 0);
    border-radius: 0.9375rem; }
    .container-spellSlotsManager-inner.is-active {
      opacity: 1;
      transform: translate3d(-50%, 2rem, 0);
      pointer-events: all; } }

.container-buttonHeader-spell {
  transition: transform cubic-bezier(0.45, 0.005, 0, 1.335) 0.6s;
  transform: translate3d(0, 0, 0); }
  .container-buttonHeader-spell.is-active {
    transform: translate3d(0, calc(100vh - 7.625rem), 0); }

@media (min-width: 768px) {
  .container-buttonHeader-spell {
    transform: translate3d(0, 0, 0) scaleX(1); }
    .container-buttonHeader-spell.is-active {
      transform: translate3d(calc(100vw / 2 - 12.9375rem), calc(100vh - 8.75rem), 0) scaleX(2); } }

.container-controls-spellSlotManager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  padding: 0 2rem;
  background-color: rgba(150, 35, 73, 0.9);
  border-radius: 0 0 0.9375rem 0.9375rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

.icon-button-controls-spellSlotManager {
  font-size: 1.25rem;
  line-height: 1.25rem;
  margin-right: 0.25rem; }

.container-emptyState-spellSlotManager {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem; }

.container-content-emptyState-spellSlotManager {
  text-align: center;
  max-width: 100%;
  width: 15.625rem; }

.heading-emptyState-spellSlotManager {
  color: #fff;
  margin-bottom: 1rem; }

.icon-button-emptyState-spellSlotManager {
  margin-right: 0.5rem; }

.container-levelSpellSlots {
  display: block;
  margin-bottom: 1rem;
  text-align: center; }

.heading-level-spellSlots {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.75rem;
  line-height: 2rem;
  color: #E7D84B;
  margin: 0 0 1rem;
  text-align: center; }

.container-slots-spellSlots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

.container-button-spellSlots {
  width: 3.75rem;
  height: 3.75rem;
  position: relative;
  margin: 0 1rem 1rem 0;
  border: 3px solid #fff;
  border-radius: 100%; }
  .container-button-spellSlots:nth-of-type(5n) {
    margin-right: 0; }

.icon-buttonSpellSlot {
  font-size: 1.625rem;
  line-height: 1.625rem;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.container-modal-editSpellSlots {
  z-index: 7; }

.container-select-editSpellSlots {
  margin-bottom: 1rem;
  border-color: #E7D84B;
  color: #E7D84B; }
  .container-select-editSpellSlots.has-value {
    background-color: #E7D84B;
    color: #D61C59; }

.container-hideShow-editSpells {
  display: none; }
  .container-hideShow-editSpells.is-visible {
    display: block; }

.heading-slots-spellSlots {
  color: #fff;
  margin-bottom: 0.5rem;
  text-align: center; }

.container-inputNumber-editSpells {
  margin-bottom: 2rem; }

.button-submit-editSpellSlots {
  margin-bottom: 1rem; }

.container-modal, .container-spellSlotsManager, .container-panel-chooseCharacter {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  pointer-events: none; }
  .container-modal.is-active, .is-active.container-spellSlotsManager, .is-active.container-panel-chooseCharacter {
    pointer-events: all; }

.container-overlay-modal {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(34, 29, 35, 0);
  width: 100%;
  height: 100%;
  transition: background-color ease 0.4s; }
  .container-overlay-modal.is-active {
    background-color: rgba(34, 29, 35, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); }

.container-modal.no-footer .cotainer-content-modal, .no-footer.container-spellSlotsManager .cotainer-content-modal, .no-footer.container-panel-chooseCharacter .cotainer-content-modal {
  padding-bottom: 2rem; }

.cotainer-content-modal {
  background-color: #D61C59;
  padding: 1rem 2rem 3.75rem;
  border-radius: 0.9375rem;
  max-width: 100%;
  width: 21.875rem;
  opacity: 0;
  transform: scale3d(0, 0, 0);
  transition: opacity ease 0.4s, transform cubic-bezier(0.45, 0.005, 0, 1.335) 0.4s; }
  .cotainer-content-modal.is-active {
    opacity: 1;
    transform: scale3d(1, 1, 1); }
  .cotainer-content-modal .button + .button {
    margin-top: 1rem; }
  .cotainer-content-modal .button + .copy-small {
    margin-top: 1rem; }
  .cotainer-content-modal.has-header {
    padding-top: 0; }
  .cotainer-content-modal .copy-small:last-of-type {
    margin-bottom: 0; }

.heading-modal {
  text-align: center;
  color: #fff;
  margin-bottom: 1rem;
  text-overflow: ellipsis;
  overflow: hidden; }
  .heading-modal.heading-bar {
    background-color: #962349;
    width: calc(100% + 4rem);
    position: relative;
    left: -2rem;
    line-height: 3.5rem;
    border-radius: 0.9375rem 0.9375rem 0 0; }

.cotainer-content-modal.is-loading {
  display: flex;
  align-items: center;
  justify-content: center; }

.container-panel-chooseCharacter {
  z-index: 8;
  display: block;
  padding: 0; }

@media (min-width: 768px) {
  .container-panel-chooseCharacter {
    display: flex; } }

.container-panel-chooseCharacter-inner {
  background-color: #D61C59;
  opacity: 0;
  transform: scale3d(0, 0, 0);
  width: 100%;
  height: calc(100vh - 3.5rem);
  border-radius: 0 0 0.9375rem 0.9375rem;
  padding: 2rem 0;
  transition: opacity ease 0.4s, transform cubic-bezier(0.45, 0.005, 0, 1.335) 0.4s; }
  .container-panel-chooseCharacter-inner.is-active {
    opacity: 1;
    transform: scale3d(1, 1, 1); }

@media (min-width: 768px) {
  .container-panel-chooseCharacter-inner {
    max-width: 100%;
    width: 32.8125rem;
    border-radius: 0.9375rem;
    height: calc(100vh - 7rem); } }

.list-panel-chooseCharacter {
  width: 100%;
  opacity: 1;
  position: relative;
  z-index: 1; }

.item-panel-chooseCharacter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-right: 2rem; }
  .item-panel-chooseCharacter a {
    padding: 0 0 0 2rem;
    display: flex;
    align-items: center;
    height: 5.25rem;
    flex: 1;
    overflow: hidden;
    font-family: "proxima-soft", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 3.5rem;
    color: #fff;
    text-decoration: none; }
    .item-panel-chooseCharacter a .container-avatar-character {
      flex: 0 0 5.25rem;
      height: 5.25rem;
      opacity: 1;
      margin-right: 1rem; }
    .item-panel-chooseCharacter a .content-item-panelChooseCharacter {
      color: inherit;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1; }
  .item-panel-chooseCharacter.is-active .container-avatar-character {
    border-color: #E7D84B; }
  .item-panel-chooseCharacter.is-active .icon-avatar-character {
    color: #E7D84B; }
  .item-panel-chooseCharacter.is-active .content-item-panelChooseCharacter {
    color: #E7D84B; }

.button-editCharacter-panelChooseCharacter {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.625rem;
  color: #E7D84B;
  margin-left: 1rem; }

.button-addCharacter-panel-chooseCharacter {
  width: 5.25rem;
  height: 5.25rem;
  background-color: #1B8798;
  display: block;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, 50%, 0); }

.icon-button-panel-chooseCharacter {
  font-size: 2.5rem;
  line-height: 2.5rem;
  margin-right: 0.25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  left: calc(50% + 2px); }

.container-modal-editCharacter .cotainer-content-modal {
  padding-top: 2.875rem;
  position: relative; }

.container-modal-editCharacter .container-avatar-character {
  width: 5.25rem;
  height: 5.25rem;
  position: absolute;
  left: 50%;
  -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
  top: 0;
  transform: translate3d(-50%, -50%, 0);
  opacity: 1;
  background-color: #fff; }

.container-modal-renameCharacter .button-cancelRenameCharacter {
  margin-top: 1rem; }

.container-modal-createCharacter {
  z-index: 9; }

.container-input-number {
  width: 100%;
  display: flex;
  align-items: center; }

.button-inputNumber {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  margin: 0 !important;
  position: relative; }

.container-input-number input {
  flex: 1 1 auto;
  margin: 0 1rem !important;
  height: 3.5rem;
  width: 100%;
  text-align: center; }

.icon-button-plus,
.icon-button-minus {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.table {
  display: flex; }
  .table .table-column:last-child .table-data {
    border-bottom: 1px solid #D2CEB2; }
  .table .table-data {
    font-size: 1.125rem;
    line-height: 1.375rem;
    font-family: "proxima-soft", sans-serif;
    font-weight: 400;
    font-style: normal;
    border-top: 1px solid #D2CEB2;
    padding: 1rem 1rem;
    display: flex;
    align-items: center; }
  .table .table-data.header {
    font-family: "proxima-soft", sans-serif;
    font-weight: 700;
    font-style: normal;
    background-color: #EFEAC5;
    border-right: 1px solid #D2CEB2; }
  .table.compact {
    flex-direction: column; }
    .table.compact .table-column {
      display: flex;
      width: 100%; }
    .table.compact .table-data {
      flex: 1 1 50%;
      width: 50%; }
      .table.compact .table-data .tableData-content {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }

@media (min-width: 768px) {
  .table .table-data {
    padding: 1rem 2rem; } }

@media (max-width: 767px) {
  .tableit {
    clear: both;
    width: 100%;
    /* Hide table headers (but not display: none;, for accessibility) */
    /* If first row acts as the table header */
    /* Label the data */ }
    .tableit table, .tableit thead, .tableit tbody, .tableit th, .tableit td, .tableit tr {
      display: block; }
    .tableit thead {
      border-top: none !important; }
    .tableit thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px; }
    .tableit.noHead tr:first-child {
      position: absolute;
      top: -9999px;
      left: -9999px; }
    .tableit tr {
      margin-bottom: 1.875rem;
      border-bottom: 1px solid #D2CEB2; }
      .tableit tr:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0; }
    .tableit td {
      /* Behave  like a "row" */
      border: none;
      position: relative;
      padding-left: 50% !important;
      white-space: normal;
      text-align: left;
      float: left;
      width: 100%; }
    .tableit td:before {
      /* Now like a table header */
      position: absolute;
      top: 0px;
      left: 0px;
      width: 45%;
      padding-right: 10px;
      padding-left: 1em;
      text-align: left;
      font-weight: bold;
      background-color: #EFEAC5;
      height: 100%;
      border-right: 1px solid #D2CEB2;
      display: flex;
      align-items: center; }
    .tableit td:before {
      content: attr(data-title); }
    .tableit th:last-of-type, .tableit td:last-of-type {
      border-right: 1px solid #D2CEB2 !important; } }

.tableit-force {
  clear: both;
  width: 100%;
  max-width: 100%;
  /* Hide table headers (but not display: none;, for accessibility) */
  /* If first row acts as the table header */
  /* Label the data */ }
  .tableit-force table, .tableit-force thead, .tableit-force tbody, .tableit-force th, .tableit-force td, .tableit-force tr {
    display: block; }
  .tableit-force thead {
    border-top: none !important; }
  .tableit-force thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; }
  .tableit-force.noHead tr:first-child {
    position: absolute;
    top: -9999px;
    left: -9999px; }
  .tableit-force tr {
    margin-bottom: 1.875rem;
    border-bottom: 1px solid #D2CEB2; }
    .tableit-force tr:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0; }
  .tableit-force td {
    /* Behave  like a "row" */
    border: none;
    position: relative;
    padding-left: 50% !important;
    white-space: normal;
    text-align: left;
    float: left;
    width: 100%; }
  .tableit-force td:before {
    /* Now like a table header */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 45%;
    padding-right: 10px;
    padding-left: 1em;
    text-align: left;
    font-weight: bold;
    background-color: #EFEAC5;
    height: 100%;
    border-right: 1px solid #D2CEB2;
    display: flex;
    align-items: center; }
  .tableit-force td:before {
    content: attr(data-title); }
  .tableit-force th:last-of-type, .tableit-force td:last-of-type {
    border-right: 1px solid #D2CEB2 !important; }

.container-field-form {
  position: relative;
  clear: both;
  width: 100%; }
  .container-field-form.half {
    width: calc(50% - 0.5rem);
    margin-right: 1rem;
    float: left;
    clear: none; }
  .container-field-form.half + .half {
    margin-right: 0;
    clear: right; }

.container-field-form + .container-field-form {
  margin-top: 1.25rem; }

.control-form[type^="text"],
.control-form[type^="number"],
.control-form[type^="tel"],
.control-form[type^="password"],
.control-form[type^="email"] {
  width: 100%;
  height: 3.5rem;
  border-radius: 0.9375rem;
  transition: margin ease 0.4s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 1.5rem;
  line-height: 1.625rem;
  padding: 0 1.5rem;
  color: inherit;
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: block;
  box-shadow: none; }

.label-form {
  color: #E7D84B;
  text-align: left;
  width: 100%;
  display: block;
  margin: 0 0 0.25rem;
  padding: 0 2rem;
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.625rem;
  transition: transform ease 0.4s;
  -ms-transform-origin: center left;
      transform-origin: center left; }

.control-form[type^="text"] + .label-form,
.control-form[type^="number"] + .label-form,
.control-form[type^="tel"] + .label-form,
.control-form[type^="password"] + .label-form,
.control-form[type^="email"] + .label-form {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(0, 0.875rem, 0); }

.control-form[type^="text"]:focus, .control-form[type^="text"]:valid, .control-form[type^="text"].has-error,
.control-form[type^="number"]:focus,
.control-form[type^="number"]:valid,
.control-form[type^="number"].has-error,
.control-form[type^="tel"]:focus,
.control-form[type^="tel"]:valid,
.control-form[type^="tel"].has-error,
.control-form[type^="password"]:focus,
.control-form[type^="password"]:valid,
.control-form[type^="password"].has-error,
.control-form[type^="email"]:focus,
.control-form[type^="email"]:valid,
.control-form[type^="email"].has-error {
  margin-top: 2rem; }
  .control-form[type^="text"]:focus + .label-form, .control-form[type^="text"]:valid + .label-form, .control-form[type^="text"].has-error + .label-form,
  .control-form[type^="number"]:focus + .label-form,
  .control-form[type^="number"]:valid + .label-form,
  .control-form[type^="number"].has-error + .label-form,
  .control-form[type^="tel"]:focus + .label-form,
  .control-form[type^="tel"]:valid + .label-form,
  .control-form[type^="tel"].has-error + .label-form,
  .control-form[type^="password"]:focus + .label-form,
  .control-form[type^="password"]:valid + .label-form,
  .control-form[type^="password"].has-error + .label-form,
  .control-form[type^="email"]:focus + .label-form,
  .control-form[type^="email"]:valid + .label-form,
  .control-form[type^="email"].has-error + .label-form {
    transform: translate3d(-1rem, -1.625rem, 0) scale(0.6); }

.control-form[type^="text"]:focus + .label-form, .control-form[type^="text"]:valid + .label-form,
.control-form[type^="number"]:focus + .label-form,
.control-form[type^="number"]:valid + .label-form,
.control-form[type^="tel"]:focus + .label-form,
.control-form[type^="tel"]:valid + .label-form,
.control-form[type^="password"]:focus + .label-form,
.control-form[type^="password"]:valid + .label-form,
.control-form[type^="email"]:focus + .label-form,
.control-form[type^="email"]:valid + .label-form {
  color: white; }

.control-form[type^="text"].has-error,
.control-form[type^="number"].has-error,
.control-form[type^="tel"].has-error,
.control-form[type^="password"].has-error,
.control-form[type^="email"].has-error {
  margin-bottom: 2.5rem; }
  .control-form[type^="text"].has-error + .label-form,
  .control-form[type^="number"].has-error + .label-form,
  .control-form[type^="tel"].has-error + .label-form,
  .control-form[type^="password"].has-error + .label-form,
  .control-form[type^="email"].has-error + .label-form {
    color: #D61C59; }

select.control-form + .label-form {
  color: #fff;
  position: absolute;
  top: -0.125rem;
  left: 0; }

.icon-input-form {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.25rem;
  position: absolute;
  bottom: 0.625rem;
  right: 0; }

.feedback-form + .icon-input-form,
.hint-form + .icon-input-form {
  bottom: 1.75rem; }

.feedback-form,
.hint-form {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.25rem;
  position: absolute;
  top: 100%;
  left: 0.1875rem; }

.feedback-form + .hint-form {
  display: none; }

.feedback-form {
  color: #D61C59; }

.hint-form {
  color: #fff; }

.button-form {
  height: 3.5rem;
  width: 100%;
  margin-top: 1rem; }

.container-form-modal .label-form {
  color: #E7D84B; }

.container-form-modal .control-form.has-error + .label-form {
  color: #E7D84B; }

.container-form-modal .control-form[type^="text"],
.container-form-modal .control-form[type^="number"],
.container-form-modal .control-form[type^="tel"],
.container-form-modal .control-form[type^="password"],
.container-form-modal .control-form[type^="email"] {
  border: 3px solid #E7D84B;
  color: #E7D84B; }

.container-form-modal .feedback-form {
  color: #E7D84B; }

.container-form-modal .hint-form {
  color: #fff; }

.container-form-modal #button-submitForm {
  background-color: #360745;
  color: #D61C59; }

/*************************************
* Styles for sections of the app.
*************************************/
body {
  height: 100vh;
  overflow: hidden; }
  body > .ember-view {
    height: 100%; }

.container-application {
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column; }

.platform-iOS-11 {
  height: calc(100vh - 1.25rem); }

.container-loading-application {
  background-color: #D61C59;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center; }

.container-listSpells {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 1; }

@media (min-width: 768px) {
  .container-listSpells {
    width: 25.875rem; }
  .container-buttonHeader {
    width: 25.875rem; } }

.container-spell {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  z-index: 3;
  height: 100vh;
  width: 100%;
  padding-top: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #F5F5F5;
  transition: transform ease 0.3s;
  transform: translate3d(0, 0, 0); }
  .container-spell.is-visible {
    transform: translate3d(-100vw, 0, 0); }
    .container-spell.is-visible .container-spell-inner {
      opacity: 1; }

.container-spell-inner {
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  opacity: 0;
  transition: opacity ease 0.4s; }
  .container-spell-inner > .container-scrollView {
    padding: 3.5rem 2rem 10rem; }

.container-content-spell {
  position: relative;
  margin: 0 auto; }

@media (min-width: 768px) {
  .container-spell, .container-spell.is-visible {
    width: calc(100% - 25.875rem);
    transform: translate3d(-100%, 0, 0);
    padding-top: 0; }
  .container-content-spell {
    width: 32.8125rem;
    max-width: 100%; } }

.heading-spell,
.byline-spell {
  text-align: center; }

.container-description-spell h2 {
  color: #D61C59;
  margin-bottom: 1.875rem; }

.container-description-spell ul {
  padding-left: 2rem; }
  .container-description-spell ul li {
    list-style: disc; }

.container-description-spell thead {
  border-top: 1px solid #D2CEB2; }

.container-description-spell th {
  font-family: "proxima-soft", sans-serif;
  font-weight: 700;
  font-style: normal;
  background-color: #EFEAC5; }

.container-description-spell th, .container-description-spell td {
  font-size: 1.125rem;
  line-height: 1.375rem;
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 1rem 2rem;
  border-right: 1px solid #D2CEB2; }
  .container-description-spell th:last-of-type, .container-description-spell td:last-of-type {
    border-right: none; }

.container-description-spell td {
  border-top: 1px solid #D2CEB2; }

.container-description-spell tr:last-of-type {
  border-bottom: 1px solid #D2CEB2; }

@media (min-width: 769px) {
  .container-description-spell table {
    border-right: 1px solid #D2CEB2;
    border-left: 1px solid #D2CEB2; }
  .container-description-spell .tableit-force {
    border-right: none;
    border-left: none; }
    .container-description-spell .tableit-force td:before {
      border-left: 1px solid #D2CEB2; } }

.table-spell, .container-description-spell table {
  width: calc(100% + 4rem);
  max-width: calc(100% + 4rem);
  position: relative;
  left: -2rem;
  margin-bottom: 2rem; }

@media (min-width: 768px) {
  .table-spell, .container-description-spell table {
    width: 100%;
    max-width: 100%;
    left: 0; }
    .table-spell .table-data, .container-description-spell table .table-data {
      border-right: 1px solid #D2CEB2; }
    .table-spell .table-data.header, .container-description-spell table .table-data.header {
      border-left: 1px solid #D2CEB2; } }

.container-button-addRemoveSpell {
  height: 5.25rem;
  width: 5.25rem;
  background-color: #1B8798;
  border-radius: 100%;
  position: relative;
  position: fixed;
  bottom: 4.75rem;
  right: 2rem;
  transition: background-color ease 0.4s, transform cubic-bezier(0.45, 0.005, 0, 1.335) 0.4s;
  transform: translate3d(0, 0, 0); }
  .container-button-addRemoveSpell.is-active {
    transform: translate3d(calc((100vw / 2 - 2.625rem - 2rem) * -1), 0, 0); }
  .container-button-addRemoveSpell.is-remove {
    background-color: #D61C59; }

.icon-button-addRemoveSpell {
  font-size: 2.5rem;
  line-height: 2.5rem;
  color: #fff;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

@media (min-width: 768px) {
  .container-button-addRemoveSpell {
    transform: translate3d(0, 0, 0);
    bottom: 2rem; }
    .container-button-addRemoveSpell.is-active {
      transform: translate3d(calc(((100vw - 25.875rem) / 2 - 2.625rem - 2rem) * -1), 0, 0); } }

.container-emptyState-spell {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity ease 0.3s; }
  .container-emptyState-spell.is-visible {
    opacity: 1; }

.icon-emptyState-spell {
  font-size: 5rem;
  line-height: 5rem;
  color: #C95E81;
  margin-bottom: 1rem;
  display: block; }

.heading-emptyState-spell {
  color: #C95E81; }

.container-page-login {
  width: 100%;
  height: 100%;
  background-color: #360745;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem; }

.logo {
  font-family: "metalista-web", serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 3.375rem; }

.container-options-login {
  background: #360745;
  max-width: 100%;
  width: 21.875rem;
  border-radius: 0.9375rem;
  padding: 1rem 2rem 2rem; }
  .container-options-login .divider {
    margin-top: 1.25rem; }

.heading-login-options {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.625rem;
  color: #fff;
  margin: 0 0 2rem;
  text-align: center; }

.container-form-login .label-form {
  color: #D61C59; }

.container-form-login .control-form {
  border: 3px solid #D61C59;
  color: #E7D84B; }

.container-form-login #button-submitForm {
  color: #360745; }

.divider {
  height: 3px;
  width: 100%;
  background-color: #fff;
  border-radius: 6.25rem; }

.button-registerAccount {
  margin-top: 1.25rem; }