a, button {
  text-transform: uppercase;
  font-family: 'Open Sans';
}
a {
  color: #999;
}
.title.is-striked {
  text-transform: uppercase;
  font-family: 'Open Sans';
  font-size: 14px;
  letter-spacing: 2px;
  color: #8D8D8D;

  width:100%;
  border-bottom: 1px solid #8D8D8D;
  line-height:0.1em;
  margin: 3em 0;
}
.title.is-striked span {
  background: #fff;
  padding: 0 12px;
  margin-left: 16px;
}

span.logged-user {
  text-transform: none;
}

/* Breadcrumb */
nav.breadcrumb ul {
  text-transform: uppercase;
  font-family: "Open Sans";
  font-size: 14px;
  color: #8D8D8D;
  font-weight: 400;
  letter-spacing: 1px;
}
nav.breadcrumb ul li {
  line-height: 1.75em;
}
nav.breadcrumb ul i {
  font-size: 16px;
}
nav.breadcrumb ul li::after {
  content: '/';
  margin: 0 11px;
}
nav.breadcrumb ul li::before {
  content: '';
}
nav.breadcrumb h1 {
  font-family: "Poppins";
  margin-bottom: 1em;
}

/* NavMenu */
@media screen and (max-width: 1087px) {
  .navbar-menu .navbar-end > .navbar-item > .navbar-link > figure {
    float: left;
  }
}
@media screen and (min-width: 1088px) {
  .navbar {
    min-height: 4em; 
  }
}
a.navbar-item {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
}
a.navbar-item:hover {
  background: inherit;
  color: #1A73E8;
}
a.navbar-item.is-selected {
  font-weight: 600;
}
a.navbar-item.is-disabled {
  cursor: not-allowed;
  color: #ccc;
}
.navbar-brand > .navbar-item > img {
  /*width: 194px;*/
  /*height: 46px;*/
  /*max-height: 46px;*/
}
.navbar-brand .navbar-item {
  padding-right: 20px;
}
.navbar-start .navbar-item,
.navbar-end .navbar-item {
  /*padding: 12px 20px;*/
  padding: 12px 20px;
}
.navbar {
  box-shadow: 0 3px 24px rgba(0,0,0, .1);
}
.navbar-item.has-dropdown:hover .navbar-link {
  background: #fff;
  /*color: #4a4a4a;*/
}
.navbar-link:not(.is-arrowless)::after {
  border-color: #4a4a4a;
}
.navbar-link:not(.is-arrowless):hover::after {
  border-color: #3273dc;
}
.navbar-link figure + span {
  margin-left: .5em;
}
.navbar-end .navbar-dropdown .navbar-divider {
  margin-right: 2em;
  margin-left: 2em;
  height: 1px;
}
.navbar-item.has-dropdown {
  border: 1px solid transparent;
  border-top: none;
  border-bottom: none;
}
.navbar-item.has-dropdown:hover {
  border-color:#f5f5f5;
}
.navbar-dropdown .navbar-item {
  padding-left: 2.2em;
}
@media screen and (min-width: 1088px) {
  .navbar-dropdown {
    border-top: 1px solid #f5f5f5;
  }
}
/* arrumar bug hover cor usuario*/


/* CC */
.card-holder {
  position: relative;
  width: 376px;
  height: 238px;
  margin: 2em auto;
}
.card-holder.is-empty {
  background-image: url('../img/cards-empty.png');
}
.card-holder.has-back {
  width: 595px;
  height: 255px;
}
.credit-card {
  font-family: "Open Sans";
  box-shadow: 0 5px 10px rgba(0,0,0, 0.1);
  width: 376px;
  height: 238px;
  border-radius: 1em;
  position: relative;
}
.credit-card {
  color: #fff;
  z-index: 10;
  background:
    url('../img/card-front.png'),
    linear-gradient(45deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
}
.credit-card.is-back {
  z-index: 5;
  background:
    url('../img/card-back.png'),
    linear-gradient(45deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
}
.credit-card.is-black,
.credit-card-mini.is-black,
.is-dot.is-black {
  background-color: #333333;
}
.credit-card.is-lead,
.credit-card-mini.is-lead,
.is-dot.is-lead {
  background-color: #6E6E6E;
}
.credit-card.is-gray,
.credit-card-mini.is-gray,
.is-dot.is-gray {
  background-color: #AAAAAA;
}
.credit-card.is-light-gray,
.credit-card-mini.is-light-gray,
.is-dot.is-light-gray {
  background-color: #DDDDDD;
}
.credit-card.is-dark-blue,
.credit-card-mini.is-dark-blue,
.is-dot.is-dark-blue {
  background-color: #2E47B2;
}
.credit-card.is-blue,
.credit-card-mini.is-blue,
.is-dot.is-blue {
  background-color: #0084CB;
}
.credit-card.is-light-blue,
.credit-card-mini.is-light-blue,
.is-dot.is-light-blue {
  background-color: #58C5FF;
}
.credit-card.is-red,
.credit-card-mini.is-red,
.is-dot.is-red {
  background-color: #E81A1A;
}
.credit-card.is-pink,
.credit-card-mini.is-pink,
.is-dot.is-pink {
  background-color: #FF658F;
}
.credit-card.is-brown,
.credit-card-mini.is-brown,
.is-dot.is-brown {
  background-color: #8D1515;
}
.credit-card.is-violet,
.credit-card-mini.is-violet,
.is-dot.is-violet {
  background-color: #6C2E9A;
  } 
.credit-card.is-purple,
.credit-card-mini.is-purple,
.is-dot.is-purple {
  background-color: #911AE8;
}
.credit-card.is-hot-pink,
.credit-card-mini.is-hot-pink,
.is-dot.is-hot-pink {
  background-color: #E81AB1;
}
.credit-card.is-lime-green,
.credit-card-mini.is-lime-green,
.is-dot.is-lime-green {
  background-color: #1AE83A;
}
.credit-card.is-green,
.credit-card-mini.is-green,
.is-dot.is-green {
  background-color: #298E39;
}
.credit-card.is-yellow,
.credit-card-mini.is-yellow,
.is-dot.is-yellow {
  background-color: #E8C81A;
}
.credit-card.is-orange,
.credit-card-mini.is-orange,
.is-dot.is-orange {
  background-color: #EC8F00;
}
.credit-card.is-gold,
.credit-card-mini.is-gold,
.is-dot.is-gold {
  background-color: #BC8C4C;
}

.credit-card .card-name {
  position: absolute;
  display: table;
  top: 10px;
  right: 32px;

  width: 270px;
  height: 84px;
  
  font-size: 29px;
  font-weight: 800;
  text-align: right;
  line-height: 1.2em;
}
.credit-card .card-name span {
  display: table-cell;
  vertical-align: middle;
}
.credit-card .card-number {
  position: absolute;
  top: 118px;
  left: 32px;

  height: 40px;
  
  font-size: 29px;
  font-weight: 400;
  letter-spacing: 1px;
  word-spacing: 2px;
}
.credit-card input.card-number {
  width: 313px;
}
.credit-card .card-username {
  position: absolute;
  bottom: 17px;
  left: 32px;

  height: 26px;
  
  font-size: 18px;
  font-weight: 600;
}
.credit-card input.card-username {
  width: 55%;
}
.credit-card .card-issued-at {
  position: absolute;
  bottom: 48px; /* era pra ser 52px, mas css leva em consideração font-size */
  left: 32px;

  height: 26px;

  font-size: 16px;
  font-weight: 400;
}
.credit-card input.card-issued-at {
  width: 62px;
  left: 114px;
}
.credit-card .card-issued-at::before {
  content: "Expedição: ";
}
.credit-card .card-issued-at.n-a,
.credit-card .card-issued-at.n-a::before {
  color: rgba(255, 255, 255, 0.3);
}
.credit-card .card-expires-at {
  position: absolute;
  bottom: 52px;
  right: 32px;

  height: 26px;

  font-size: 20px;
  font-weight: 400;
}
.credit-card .card-expires-at.has-input {
  right: 104px;
}
.credit-card input.card-expires-at {
  width: 70px;
}
.credit-card .card-expires-at::before {
  content: "Vencimento: ";
  font-size: 16px;
}
.credit-card .card-operator {
  position: absolute;
  bottom: 8px;
  right: 32px;
}
.credit-card .card-operator-input {
  position: absolute;
  bottom: 10px;
  right: 32px;
}
.credit-card.is-back .card-cvv {
  margin-top: 97px;
  margin-left: 200px;
  padding: 2px 10px;
  padding-bottom: 1px;
  background: #eee;
  color: #000;
  width: 57px;
  height: 30px;
  position: absolute;
}

.credit-card.is-overlaping {
  position: absolute;
}
.credit-card.is-back.is-overlaping {
  position: absolute;
  left: 220px;
  top: 1em;
}

.credit-card-mini {
  width: 192px;
  height: 122px;
  border-radius: 8px;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
  color: #FFFFFF;
  padding: 1em;
  font-family: 'Open Sans';
  font-size: 16px;
  font-weight: 400;
}
.credit-card-mini .issued-at::before {
  content: 'Vencimento: ';
  font-size: .75em;
}

.credit-card input,
.credit-card textarea {
  background: rgba(0, 0, 0, .1);
  border-radius: 5px;
  border-width: 1px;
  color: #fff;
  border-color: #999;
}
.credit-card input:focus,
.credit-card textarea:focus {
  border-color: #fff;
}
.credit-card input[name="card[issued_at]"],
.credit-card input[name="card[expires_at]"] {
  text-align: right;
}
.credit-card.is-back input {
  border-radius: 0;
}

.card-extra-info {
  transition: all .3s ease-in-out;
}

.card-extra-info.is-open {
  margin-top: -4.5em;
  border: 1px solid #cacaca;
  border-radius: 1em;
  box-shadow: 0 3px 24px rgba(0,0,0, .1);
  padding: 4em 1em;
  z-index: 1;
}

.card-round {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #cacaca;
  border-radius: 1em;
  box-shadow: 0 3px 24px rgba(0,0,0, .1);
  padding: 1em 1em 4em 1em;
  z-index: 1;
}

.button.is-dot {
  border-radius: 290486px;
  padding: 1px;
  height: 1em;
  width: 1em;
}


/* */
table.is-resource-index th {
  padding: 1.5em 1.2em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "Open Sans";
  font-size: 14px;
}
table.is-resource-index tbody td {
  padding: 1.5em 1em;
}

table td .media-left {
  margin-right: 1.7em;
}
table tr.is-clickable,
.card-holder.is-clickable {
  cursor: pointer;
}


/* footer */
footer.footer {
  background-color: #EAEDF1;
  padding: 0;
}
footer .navbar-menu a.navbar-item {
  font-weight: 600;
  text-transform: none;
}
footer .navbar-menu .navbar-end {
  font-size: 12px;
  font-family: 'Open Sans';
  font-weight: 400;
}
footer .navbar-menu .navbar-end a {
  font-weight: 600;
  color: #303030;
  margin-left: 4px;
}
footer .navbar-menu .navbar-end a:hover {
  color: #1A73E8;
}
footer .navbar-end img {
  margin-right: .25em;
}

/* Flex (Sticky Footer) */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
body > section.section {
  flex: 1;
}