@import url(https://fonts.googleapis.com/css?family=Nunito);
@charset "UTF-8";
body .popover {
  display: none !important;
}

.status.acept {
  background-color: #2ecc71;
  width: 90%;
  text-align: center;
  margin: 0 auto;
}
.status.acept span {
  font-size: 14px !important;
}

.status.not-acept {
  background-color: #e74c3c;
  width: 90%;
  text-align: center;
  margin: 0 auto;
}
.status.not-acept span {
  font-size: 14px !important;
}

.btn-link {
  font-family: "Nexa-bold";
  color: black;
  width: 100%;
  text-align: left;
}
.btn-link:hover {
  color: #1a125a;
  text-decoration: none;
}

.loader {
  position: fixed;
  bottom: 2%;
  right: 2%;
  z-index: 999;
  display: none;
}

nav .pagination {
  position: relative;
  z-index: 900;
}

.page-item.active .page-link {
  background-color: #f1c40f;
  border-color: #f1c40f;
  color: #1a125a;
  font-family: "Nexa-light";
}

.page-item .page-link {
  font-family: "Nexa-light";
}

.modal-backdrop.show {
  position: relative;
}

.note-editor.note-frame {
  width: 100%;
  border: 1px solid #2F323A;
}

.note-editor.note-frame .note-editing-area .note-editable {
  font-family: "Nexa-light";
}

.select2-results__option[aria-selected] {
  font-family: "Nexa-light";
}

.form-control {
  font-size: 14px;
  font-family: "Nexa-light";
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 35px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 35px;
  font-family: "Nexa-light";
  font-size: 14px;
}

.select2-container--default .select2-selection--single {
  height: 35px;
  border: 1px solid black;
}

.error-field {
  font-family: "Nexa-light";
  font-size: 1em;
  color: red;
  margin-bottom: 1em;
}

.has-error {
  font-size: 1em;
  color: red;
  margin-right: 5px;
}

.error-message {
  width: 100%;
  height: 30px;
  display: table;
}
.error-message .has-error-message {
  font-size: 12px;
  color: red;
  display: table-cell;
  vertical-align: middle;
  font-family: "Nexa-light";
}

.gradient {
  position: fixed;
  width: 60vw;
  height: 60vh;
  bottom: 0;
  right: -20%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 899;
}

.watermark {
  position: fixed;
  width: 100%;
  margin: 0 auto;
  opacity: 0.5;
  z-index: 99;
  color: red;
  text-align: center;
  font-family: "Nexa-light";
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  font-weight: bold;
  text-transform: uppercase;
  -webkit-transform: rotate(-30deg);
  /* Firefox */
  -moz-transform: rotate(-30deg);
  /* IE */
  -ms-transform: rotate(-30deg);
  /* Opera */
  -o-transform: rotate(-30deg);
}

body {
  background-color: #ECEDEE !important;
  -webkit-print-color-adjust: exact;
}

.container {
  max-width: 1024px;
}

.container-fluid {
  max-width: 1400px;
}

.no-padding {
  padding: 0;
}

.with-margin {
  margin-left: 1px;
  margin-right: 1px;
}

.no-margin {
  margin: 0;
}

.logout {
  height: 50px;
  width: 125px;
  float: right;
  position: absolute;
  right: 0;
  bottom: -2px;
  padding-top: 1em;
}
.logout a {
  color: black;
  font-size: 16px;
}

#ui-datepicker-div {
  background-color: #1a125a;
}

.ui-datepicker-title span {
  font-size: 14px;
  font-family: "Nexa-bold";
}
.ui-datepicker-title .ui-datepicker-month, .ui-datepicker-title .ui-datepicker-year {
  border: none;
  background-color: transparent;
  outline: 0;
}

.ui-datepicker-calendar thead tr th span {
  font-size: 12px;
  font-family: "Nexa-bold";
  color: white;
}
.ui-datepicker-calendar tbody tr td .ui-state-default {
  font-size: 12px;
  font-family: "Nexa-bold";
  border: none;
}
.ui-datepicker-calendar tbody tr td .ui-state-highlight {
  background-color: #B3B3B3;
  color: white;
}
.ui-datepicker-calendar tbody tr td .ui-state-active {
  background-color: #5A5A5A;
  color: white;
}

.ui-timepicker-container {
  z-index: 998 !important;
  background-color: #6AA6AF;
  border: 1px solid #C1C2C7;
}
.ui-timepicker-container .ui-timepicker {
  background-color: #6AA6AF;
  border: none;
}
.ui-timepicker-container .ui-timepicker .ui-timepicker-viewport {
  background-color: #6AA6AF;
  border: none;
}
.ui-timepicker-container .ui-timepicker .ui-timepicker-viewport .ui-menu-item .ui-corner-all {
  font-size: 12px;
  font-family: "Nexa-bold";
}
.ui-timepicker-container .ui-timepicker .ui-timepicker-viewport .ui-menu-item .ui-corner-all:hover {
  background-color: #B3B3B3;
}
.ui-timepicker-container .ui-timepicker .ui-timepicker-viewport .ui-menu-item .ui-state-hover {
  background-color: #B3B3B3;
}

.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1000 !important;
  overflow: hidden;
}
.popup #popup-reference {
  width: 40%;
}
.popup .mdl-card {
  margin: 0 auto;
  left: 0;
  right: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.popup .mdl-card .mdl-card__actions {
  text-align: right;
}
.popup .mdl-card .mdl-card__actions #remove-btn {
  color: #C3272B;
}
.popup .mdl-card .mdl-card__actions #edit-btn {
  color: #26C281;
}

.opacity {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #ecf0f1;
  z-index: 998;
  display: none;
  opacity: 0.5;
}
.opacity .mdl-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 35px;
}

.pagination {
  float: right;
}
.pagination li span, .pagination li a {
  color: #2F323A;
}
.pagination .active span {
  background-color: #2F323A;
  border-color: #2F323A;
}
.pagination .active span:hover {
  background-color: #2F323A;
  border-color: #2F323A;
}

#popup-country .form-group {
  margin-top: 2em;
  width: 100%;
}
#popup-country .form-group label {
  display: table;
}
#popup-country .form-group select {
  width: 100%;
}

/*
   Animation example, for spinners
*/
.animate-spin {
  animation: spin 2s infinite linear;
  display: inline-block;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes pulsate {
  0% {
    background-color: #f44336;
  }
  25% {
    background-color: #E91E63;
  }
  50% {
    background-color: #2196F3;
  }
  75% {
    background-color: #FFC107;
  }
  100% {
    background-color: #FF5722;
  }
}
@keyframes move {
  to {
    stroke-dashoffset: -1200;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.loader-heart {
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
  animation-duration: 80s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

.loader-heart svg {
  left: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.animation {
  fill: none;
  stroke: #1a125a;
  stroke-linecap: square;
  stroke-miterlimit: 10;
  stroke-width: 0.5px;
  opacity: 1;
  stroke-dasharray: 600;
  animation: move 5s linear forwards infinite, fade 5s linear infinite;
}

.top-bar-logo, .top-bar-user {
  width: 100%;
  height: 100px;
}

.top-bar-logo img {
  width: 200px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.top-bar-user .user-name {
  height: 50px;
  display: table;
  float: right;
  margin-right: 2em;
  margin-top: 2em;
}
.top-bar-user .user-name span {
  font-family: "Nexa-bold";
  font-size: 14px;
}
.top-bar-user .user-avatar {
  height: 100%;
  float: right;
}
.top-bar-user .user-avatar .avatar {
  width: 80px;
  height: 80px;
  z-index: 999;
  background-color: #1a125a;
  display: table;
  cursor: pointer;
  border-radius: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.top-bar-user .user-avatar .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-position: unset;
}
.top-bar-user .user-avatar .avatar span {
  color: #b1a268;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 2em;
}

.menu-bar {
  width: 100%;
  height: 60px;
  background-color: #1a125a;
}
.menu-bar .mobile {
  position: absolute;
  height: 60px;
  display: none;
  right: 0;
  margin-right: 2em;
}
.menu-bar .mobile .mobile-button {
  color: white;
  font-weight: 500;
  display: table-cell;
  vertical-align: middle;
  text-transform: none;
}
.menu-bar .mobile .mobile-button span {
  font-size: 2em;
}
.menu-bar .mobile .mobile-button:hover {
  color: #b1a268;
}
.menu-bar ul {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.menu-bar ul .active {
  background-color: #b1a268;
}
.menu-bar ul li {
  height: 50px;
  color: white;
  list-style: none;
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: 1.5em;
  text-align: center;
  cursor: pointer;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.menu-bar ul li .align-item {
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
}
.menu-bar ul li a {
  color: white;
  vertical-align: middle;
  display: table-cell;
  height: 100%;
  text-decoration: none;
  font-family: "Nexa-light";
  font-size: 1em;
}
.menu-bar ul li:hover {
  background-color: #b1a268;
}

.second-menu-bar {
  width: 100%;
  height: 40px;
  background-color: #ffffff;
  margin-top: 1em;
  margin-bottom: 1em;
  border: 2px solid #e7e7e8;
}
.second-menu-bar ul {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.second-menu-bar ul .active {
  border-bottom: 2px solid #b1a268;
}
.second-menu-bar ul li {
  height: 100%;
  color: black;
  list-style: none;
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: 1.5em;
  text-align: center;
  cursor: pointer;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-bottom: 1px solid transparent;
}
.second-menu-bar ul li .align-item {
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
}
.second-menu-bar ul li a {
  color: black;
  vertical-align: middle;
  display: table-cell;
  height: 100%;
  text-decoration: none;
  font-family: "Nexa-light";
  font-size: 14px;
}
.second-menu-bar ul li:hover {
  border-bottom: 2px solid #b1a268;
}

#title-mobile {
  position: absolute;
  height: 60px;
  display: table;
}
#title-mobile span {
  color: #b1a268;
  display: table-cell;
  vertical-align: middle;
  padding-left: 1em;
  font-family: "Nexa-bold";
  text-transform: uppercase;
}

#menu-responsive {
  width: 100%;
  height: auto;
  position: relative;
  border-top: 1px solid #ECEDEE;
  display: none;
}
#menu-responsive .menu {
  background-color: #2e323a;
}
#menu-responsive .menu ul {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 0;
}
#menu-responsive .menu ul .active {
  background-color: #b1a268;
}
#menu-responsive .menu ul li {
  text-align: center;
  list-style: none;
  height: 40px;
  display: table;
  margin: 0 auto;
}
#menu-responsive .menu ul li .align-item {
  min-width: 150px;
  height: 100%;
  display: table;
}
#menu-responsive .menu ul li .align-item a {
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
  font-family: "Nexa-bold";
  font-size: 14px;
  color: white;
}
#menu-responsive .menu ul li .align-item:hover {
  background-color: #b1a268;
}

#login {
  width: 100%;
  height: 100%;
  background-color: #ECEDEE;
}
#login .login-gradient {
  position: absolute;
  width: 100%;
  height: 45vh;
  bottom: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#login .box {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#login .box .logo {
  width: 100%;
  height: 80px;
}
#login .box .logo img {
  width: 100%;
}
#login .box .content {
  width: 100%;
  margin-top: 3em;
}
#login .box .content form {
  width: 100%;
}
#login .box .content form input, #login .box .content form select {
  background-color: transparent;
  border: 1px solid black;
  color: black;
}
#login .box .content form .login-btn {
  position: absolute;
  right: -2em;
  height: 35px;
  width: 35px;
}
#login .box .content form .login-btn button {
  width: 35px;
  height: 35px;
  border-radius: 100%;
  background-color: transparent;
  border: 1px solid black;
  padding: 0;
}
#login .box .content form .login-btn button span {
  text-align: center;
  color: #7f8c8d;
}
#login .box .content form .forget-password {
  text-align: right;
}
#login .box .content form .forget-password a {
  padding: 0;
  color: #7f8c8d;
}
#login .box .content form select {
  color: #7f8c8d;
}
#login .box .content form select option {
  color: #7f8c8d;
}
#login .box .content form ::-webkit-input-placeholder { /* Chrome */
  color: #7f8c8d;
}
#login .box .content form :-ms-input-placeholder { /* IE 10+ */
  color: #7f8c8d;
}
#login .box .content form ::-moz-placeholder { /* Firefox 19+ */
  color: #7f8c8d;
  opacity: 1;
}
#login .box .content form :-moz-placeholder { /* Firefox 4 - 18 */
  color: #7f8c8d;
  opacity: 1;
}

.table-common {
  width: 100%;
}

/*
.dataTables_wrapper .dataTables_paginate .paginate_button:hover
{
    background-color:$menu-hover !important;
}*/
.paginate_button {
  font-family: "Nexa-light";
  line-height: 1.25;
}
.paginate_button.current {
  background-color: #b1a268 !important;
}
.paginate_button:hover {
  background: #b1a268 !important;
}

.table td {
  vertical-align: middle;
}

#header-table {
  color: #b1a268 !important;
  font-family: "Nexa-light" !important;
  font-size: 12px !important;
}

.legends-mentes {
  position: absolute;
  width: 100%;
  left: 0;
  max-width: 1200px;
}
.legends-mentes tr {
  height: 60px;
  display: table;
  width: 100%;
}
.legends-mentes tr td {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}
.legends-mentes tr td .elements {
  width: 100%;
  text-align: center;
  position: relative;
}
.legends-mentes tr td .elements span {
  font-size: 10px;
  font-family: "Nexa-light";
  display: block;
}

.link-video {
  color: black;
  margin-top: 1em;
  font-family: "Nexa-light";
  font-size: 1em;
  display: block;
}
.link-video:hover {
  color: #2dbfc2;
}

.remove-all {
  background-color: white;
  border: 1px solid #2F323A;
  color: #2F323A;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Nexa-light";
  border-radius: 10px;
  padding: 8px;
  float: right;
  margin-bottom: 1em;
}
.remove-all:hover {
  background-color: #b1a268;
  color: white;
}

.icon-size {
  font-size: 20px !important;
}

.dashboard {
  margin-top: 2em;
  margin-bottom: 2em;
}
.dashboard .header-1-dashboard, .dashboard .header-2-dashboard {
  width: 100%;
  height: 40px;
  background-color: #2e323a;
  display: table;
}
.dashboard .header-1-dashboard span, .dashboard .header-2-dashboard span {
  display: table-cell;
  vertical-align: middle;
  font-family: "Nexa-bold";
  font-size: 14px;
  color: white;
  text-transform: uppercase;
  padding-left: 2em;
}
.dashboard .graph-1-dashboard, .dashboard .graph-2-dashboard {
  width: 100%;
  margin-top: 2em;
  border: 2px solid #e7e7e8;
  background-color: white;
  min-height: 100px;
}
.dashboard .graph-1-dashboard {
  height: 600px;
}
.dashboard .graph-1-dashboard #dashboardCircles .title {
  width: 95%;
  height: 40px;
  display: table;
  margin: 0 auto;
}
.dashboard .graph-1-dashboard #dashboardCircles .title span {
  display: table-cell;
  vertical-align: middle;
  font-size: 12px;
  font-family: "Nexa-bold";
  color: black;
}
.dashboard .graph-1-dashboard .circle {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background-color: #2dbfc2;
  margin-top: 3em;
  margin-bottom: 1em;
  display: table;
  text-align: center;
  border: 2px solid #2dbfc2;
}
.dashboard .graph-1-dashboard .circle .value {
  width: 100%;
  height: 75px;
  text-align: center;
}
.dashboard .graph-1-dashboard .circle .number {
  position: relative;
}
.dashboard .graph-1-dashboard .circle .number span {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  vertical-align: middle;
  font-family: "Nexa-bold";
  font-size: 40px;
  color: white;
}
.dashboard .graph-1-dashboard .circle .text {
  position: relative;
  padding-top: 1em;
}
.dashboard .graph-1-dashboard .circle .text span {
  vertical-align: middle;
  font-family: "Nexa-light";
  font-size: 12px;
  color: white;
  width: 70%;
  word-break: break-word;
  display: block;
  margin: 0 auto;
}
.dashboard .graph-1-dashboard .circle:hover {
  background-color: white;
}
.dashboard .graph-1-dashboard .circle:hover span, .dashboard .graph-1-dashboard .circle:hover .value {
  color: black;
}
.dashboard .graph-1-dashboard #linear {
  width: 95%;
  height: 300px;
  margin: 0 auto;
  margin-top: 3em;
}
.dashboard .graph-1-dashboard #linear .linearChart {
  margin-top: 2em;
}
.dashboard .graph-1-dashboard #linear .title {
  width: 100%;
  height: 40px;
  display: table;
}
.dashboard .graph-1-dashboard #linear .title span {
  display: table-cell;
  font-size: 12px;
  font-family: "Nexa-bold";
  color: black;
}
.dashboard .graph-1-dashboard #linear #linearChart {
  width: 100%;
  max-height: 200px;
}
.dashboard #range, .dashboard #genre {
  height: 285px;
}
.dashboard #range .title, .dashboard #genre .title {
  width: 90%;
  height: 40px;
  display: table;
  margin: 0 auto;
}
.dashboard #range .title span, .dashboard #genre .title span {
  display: table-cell;
  vertical-align: middle;
  font-size: 12px;
  font-family: "Nexa-bold";
  color: black;
}
.dashboard #genre span.title {
  font-family: "Nexa-light";
  font-size: 12px;
  color: black;
  text-align: center;
}
.dashboard #genre .mar {
  margin-top: 2em;
}
.dashboard .graph-2-dashboard {
  height: 600px;
  /*
      .circle-out
      {
        position: absolute;
        border-radius: 50%;
      	width: 150px;
      	height: 150px;
        background-color: white;
        margin-top: 2em;
        margin-bottom: 1em;
        display: table;
        text-align: center;
        border: 2px solid #ECEDEE;

      }

      .circle-in
      {
        position: absolute;
        border-radius: 50%;
      	width: 150px;
      	height: 150px;
        background-color: transparent;
        margin-top: 2em;
        margin-bottom: 1em;
        display: table;
        text-align: center;
        border: 2px solid #34BFC2;
        border-width: 150px*0.7;
      }*/
}
.dashboard .graph-2-dashboard .title {
  width: 90%;
  height: 40px;
  display: table;
  margin: 0 auto;
}
.dashboard .graph-2-dashboard .title span {
  display: table-cell;
  vertical-align: middle;
  font-size: 12px;
  font-family: "Nexa-bold";
  color: black;
}
.dashboard .graph-2-dashboard .rangeAgeChart {
  width: 100%;
  height: auto;
  margin-top: 2em;
  padding-left: 1em;
}
.dashboard .graph-2-dashboard .rangeAgeChart #rangeAgeChart {
  width: 100%;
  max-height: 200px;
}

.container-fluid .box-half {
  width: 100%;
  border: 2px solid #e7e7e8;
  margin-top: 2em;
  margin-bottom: 1em;
  background-color: white;
}
.container-fluid .box-half table thead th:nth-child(1) {
  border-right: 2px solid #e7e7e8;
}
.container-fluid .box-half table thead th {
  height: 50px;
  width: 5%;
  text-align: center;
  border-right: 1px solid #e7e7e8;
  border-bottom: 2px solid #e7e7e8;
}
.container-fluid .box-half table thead th span {
  color: black;
  text-transform: capitalize;
}
.container-fluid .box-half table tbody tr td:nth-child(1) {
  border-right: 2px solid #e7e7e8;
}
.container-fluid .box-half table tbody tr td {
  height: 35px;
  width: 5%;
  text-align: center;
  border-right: 1px solid #e7e7e8;
  border-bottom: 1px solid #e7e7e8;
}
.container-fluid .box-half table tbody tr td span {
  color: black;
  text-transform: capitalize;
}

.container-letter {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #FFFFFF;
}
.container-letter .header-letter-row {
  margin-top: 2em;
  height: 100px;
}
.container-letter .header-letter-row .logo {
  position: relative;
  width: 300px;
  height: 100px;
  display: table;
}
.container-letter .header-letter-row .logo img {
  width: 100%;
  margin: 0 auto;
  display: block;
  position: relative;
}
.container-letter .header-letter-row .letter-title {
  width: 100%;
  height: 100%;
  display: table;
}
.container-letter .header-letter-row .letter-title span {
  display: table-cell;
  text-align: right;
  font-size: 3em;
}
.container-letter .first-letter-row, .container-letter .second-letter-row, .container-letter .third-letter-row {
  width: 100%;
  height: auto;
  margin-top: 2em;
}
.container-letter .first-letter-row .personal-info, .container-letter .first-letter-row .four-pilars, .container-letter .second-letter-row .personal-info, .container-letter .second-letter-row .four-pilars, .container-letter .third-letter-row .personal-info, .container-letter .third-letter-row .four-pilars {
  width: 100%;
  height: auto;
}
.container-letter .first-letter-row .personal-info .info, .container-letter .second-letter-row .personal-info .info, .container-letter .third-letter-row .personal-info .info {
  width: 100%;
  height: auto;
  margin-top: 2em;
  padding-left: 1em;
}
.container-letter .first-letter-row .personal-info .info .name, .container-letter .second-letter-row .personal-info .info .name, .container-letter .third-letter-row .personal-info .info .name {
  font-size: 22px;
  color: black;
  text-transform: inherit;
  font-family: "Nexa-bold";
  color: #2F323A;
}
.container-letter .first-letter-row .personal-info .info .form-group, .container-letter .second-letter-row .personal-info .info .form-group, .container-letter .third-letter-row .personal-info .info .form-group {
  height: 50px;
  border-top: 1px solid #BCBEC0;
  border-bottom: 1px solid #BCBEC0;
  position: relative;
}
.container-letter .first-letter-row .personal-info .info .power-title, .container-letter .second-letter-row .personal-info .info .power-title, .container-letter .third-letter-row .personal-info .info .power-title {
  border-bottom: none;
  display: table;
  width: 100%;
  height: 20px;
  padding-top: 1em;
}
.container-letter .first-letter-row .personal-info .info .power-title label, .container-letter .second-letter-row .personal-info .info .power-title label, .container-letter .third-letter-row .personal-info .info .power-title label {
  vertical-align: middle;
  height: 100%;
  display: table-cell;
  text-align: center;
}
.container-letter .first-letter-row .personal-info .info .power-chart, .container-letter .second-letter-row .personal-info .info .power-chart, .container-letter .third-letter-row .personal-info .info .power-chart {
  margin-top: 0;
}
.container-letter .first-letter-row .personal-info .info label, .container-letter .second-letter-row .personal-info .info label, .container-letter .third-letter-row .personal-info .info label {
  color: #898989;
  font-size: 14px;
  text-transform: uppercase;
  font-family: "Nexa-light";
}
.container-letter .first-letter-row .personal-info .info span, .container-letter .second-letter-row .personal-info .info span, .container-letter .third-letter-row .personal-info .info span {
  right: 0;
  position: absolute;
  bottom: 0;
  color: #898989;
  text-transform: lowercase;
  font-family: "Nexa-light";
  font-size: 14px;
}
.container-letter .first-letter-row .four-pilars .info, .container-letter .second-letter-row .four-pilars .info, .container-letter .third-letter-row .four-pilars .info {
  width: 100%;
  height: auto;
  margin-top: 2em;
  padding-left: 1em;
}
.container-letter .first-letter-row .four-pilars .info table, .container-letter .second-letter-row .four-pilars .info table, .container-letter .third-letter-row .four-pilars .info table {
  width: 100%;
}
.container-letter .first-letter-row .four-pilars .info table thead tr th, .container-letter .second-letter-row .four-pilars .info table thead tr th, .container-letter .third-letter-row .four-pilars .info table thead tr th {
  height: 30px;
  text-align: center;
  color: #8A8B8B;
  font-family: "Nexa-bold";
  font-size: 14px;
  text-transform: uppercase;
}
.container-letter .first-letter-row .four-pilars .info table thead tr:first-child, .container-letter .second-letter-row .four-pilars .info table thead tr:first-child, .container-letter .third-letter-row .four-pilars .info table thead tr:first-child {
  border-bottom: none;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr, .container-letter .second-letter-row .four-pilars .info table tbody tr, .container-letter .third-letter-row .four-pilars .info table tbody tr {
  text-align: center;
  border-bottom: 1px solid #BCBEC0;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td:nth-child(2), .container-letter .second-letter-row .four-pilars .info table tbody tr td:nth-child(2), .container-letter .third-letter-row .four-pilars .info table tbody tr td:nth-child(2) {
  background-color: #ddd;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td:nth-child(2) span, .container-letter .second-letter-row .four-pilars .info table tbody tr td:nth-child(2) span, .container-letter .third-letter-row .four-pilars .info table tbody tr td:nth-child(2) span {
  color: white;
  font-family: "Nexa-light";
  font-size: 12px;
  text-transform: uppercase;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td.directions, .container-letter .second-letter-row .four-pilars .info table tbody tr td.directions, .container-letter .third-letter-row .four-pilars .info table tbody tr td.directions {
  height: 40px;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td:nth-child(2).directions span, .container-letter .second-letter-row .four-pilars .info table tbody tr td:nth-child(2).directions span, .container-letter .third-letter-row .four-pilars .info table tbody tr td:nth-child(2).directions span {
  font-size: 1.5em;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td, .container-letter .second-letter-row .four-pilars .info table tbody tr td, .container-letter .third-letter-row .four-pilars .info table tbody tr td {
  width: 50px;
  height: 70px;
  border-right: 1px solid #BCBEC0;
  color: #898989;
  position: relative;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td span, .container-letter .second-letter-row .four-pilars .info table tbody tr td span, .container-letter .third-letter-row .four-pilars .info table tbody tr td span {
  display: block;
  word-wrap: break-word;
  color: #898989;
  font-family: "Nexa-light";
  font-size: 12px;
  text-transform: uppercase;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td .qi, .container-letter .second-letter-row .four-pilars .info table tbody tr td .qi, .container-letter .third-letter-row .four-pilars .info table tbody tr td .qi {
  position: absolute;
  text-align: right;
  padding-top: 5px;
  padding-right: 5px;
  right: 0;
  font-family: "Nexa-bold";
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td .pd, .container-letter .second-letter-row .four-pilars .info table tbody tr td .pd, .container-letter .third-letter-row .four-pilars .info table tbody tr td .pd {
  position: absolute;
  text-align: right;
  padding-top: 5px;
  padding-left: 5px;
  left: 0;
  font-family: "Nexa-bold";
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td .description, .container-letter .second-letter-row .four-pilars .info table tbody tr td .description, .container-letter .third-letter-row .four-pilars .info table tbody tr td .description {
  font-size: 10px;
  text-transform: uppercase;
  color: #ddd;
  font-family: "Nexa-light";
  font-size: 10px;
  text-transform: uppercase;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td:last-child, .container-letter .second-letter-row .four-pilars .info table tbody tr td:last-child, .container-letter .third-letter-row .four-pilars .info table tbody tr td:last-child {
  border-right: none;
  color: #8A8B8B;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr td:last-child span, .container-letter .second-letter-row .four-pilars .info table tbody tr td:last-child span, .container-letter .third-letter-row .four-pilars .info table tbody tr td:last-child span {
  width: 70px;
  word-wrap: break-word;
  text-align: center;
  display: block;
  margin: 0 auto;
  font-family: "Nexa-bold";
  text-transform: uppercase;
  font-size: 10px;
}
.container-letter .first-letter-row .four-pilars .info table tbody tr:last-child, .container-letter .second-letter-row .four-pilars .info table tbody tr:last-child, .container-letter .third-letter-row .four-pilars .info table tbody tr:last-child {
  border-bottom: none;
}
.container-letter .first-letter-row .lucky-pilars, .container-letter .second-letter-row .lucky-pilars, .container-letter .third-letter-row .lucky-pilars {
  width: 100%;
  height: auto;
  margin-top: 2em;
}
.container-letter .first-letter-row .lucky-pilars table, .container-letter .second-letter-row .lucky-pilars table, .container-letter .third-letter-row .lucky-pilars table {
  width: 100%;
}
.container-letter .first-letter-row .lucky-pilars table thead tr th, .container-letter .second-letter-row .lucky-pilars table thead tr th, .container-letter .third-letter-row .lucky-pilars table thead tr th {
  height: 30px;
  text-align: right;
  color: #8A8B8B;
  font-family: "Nexa-bold";
  font-size: 14px;
  text-transform: uppercase;
  padding-right: 4px;
}
.container-letter .first-letter-row .lucky-pilars table thead tr th:last-child, .container-letter .second-letter-row .lucky-pilars table thead tr th:last-child, .container-letter .third-letter-row .lucky-pilars table thead tr th:last-child {
  width: 100%;
  word-wrap: break-word;
  text-align: center;
  display: block;
  margin: 0 auto;
  font-family: "Nexa-bold";
  text-transform: uppercase;
  font-size: 10px;
}
.container-letter .first-letter-row .lucky-pilars table thead tr:first-child, .container-letter .second-letter-row .lucky-pilars table thead tr:first-child, .container-letter .third-letter-row .lucky-pilars table thead tr:first-child {
  border-bottom: none;
}
.container-letter .first-letter-row .lucky-pilars table thead:nth-child(2) tr th:last-child, .container-letter .second-letter-row .lucky-pilars table thead:nth-child(2) tr th:last-child, .container-letter .third-letter-row .lucky-pilars table thead:nth-child(2) tr th:last-child {
  border-bottom: 1px solid #BCBEC0;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr:nth-child(1), .container-letter .second-letter-row .lucky-pilars table tbody tr:nth-child(1), .container-letter .third-letter-row .lucky-pilars table tbody tr:nth-child(1) {
  text-align: right;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr:nth-child(1) td, .container-letter .second-letter-row .lucky-pilars table tbody tr:nth-child(1) td, .container-letter .third-letter-row .lucky-pilars table tbody tr:nth-child(1) td {
  padding-right: 4px;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr:nth-child(1) td .description, .container-letter .second-letter-row .lucky-pilars table tbody tr:nth-child(1) td .description, .container-letter .third-letter-row .lucky-pilars table tbody tr:nth-child(1) td .description {
  font-size: 10px;
  text-transform: uppercase;
  color: #ddd;
  font-family: "Nexa-light";
  text-transform: uppercase;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr:nth-child(1) td:last-child, .container-letter .second-letter-row .lucky-pilars table tbody tr:nth-child(1) td:last-child, .container-letter .third-letter-row .lucky-pilars table tbody tr:nth-child(1) td:last-child {
  border-right: none;
  color: #8A8B8B;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr:nth-child(1) td:last-child span, .container-letter .second-letter-row .lucky-pilars table tbody tr:nth-child(1) td:last-child span, .container-letter .third-letter-row .lucky-pilars table tbody tr:nth-child(1) td:last-child span {
  width: 70px;
  word-wrap: break-word;
  text-align: center;
  display: block;
  margin: 0 auto;
  font-family: "Nexa-bold";
  text-transform: uppercase;
  font-size: 10px;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr:nth-child(3) td:last-child, .container-letter .second-letter-row .lucky-pilars table tbody tr:nth-child(3) td:last-child, .container-letter .third-letter-row .lucky-pilars table tbody tr:nth-child(3) td:last-child {
  border-right: none;
  color: #8A8B8B;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr:nth-child(3) td:last-child span, .container-letter .second-letter-row .lucky-pilars table tbody tr:nth-child(3) td:last-child span, .container-letter .third-letter-row .lucky-pilars table tbody tr:nth-child(3) td:last-child span {
  width: 70px;
  word-wrap: break-word;
  text-align: center;
  display: block;
  margin: 0 auto;
  font-family: "Nexa-light";
  text-transform: uppercase;
  font-size: 10px;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr, .container-letter .second-letter-row .lucky-pilars table tbody tr, .container-letter .third-letter-row .lucky-pilars table tbody tr {
  text-align: center;
  border-bottom: 1px solid #BCBEC0;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr .mask, .container-letter .second-letter-row .lucky-pilars table tbody tr .mask, .container-letter .third-letter-row .lucky-pilars table tbody tr .mask {
  background-color: #ddd;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr .mask span, .container-letter .second-letter-row .lucky-pilars table tbody tr .mask span, .container-letter .third-letter-row .lucky-pilars table tbody tr .mask span {
  color: white;
  font-family: "Nexa-light";
  font-size: 12px;
  text-transform: uppercase;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr .mask .description, .container-letter .second-letter-row .lucky-pilars table tbody tr .mask .description, .container-letter .third-letter-row .lucky-pilars table tbody tr .mask .description {
  color: white;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr td, .container-letter .second-letter-row .lucky-pilars table tbody tr td, .container-letter .third-letter-row .lucky-pilars table tbody tr td {
  max-width: 50px;
  height: 70px;
  border-right: 1px solid #BCBEC0;
  color: #898989;
  position: relative;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr td span, .container-letter .second-letter-row .lucky-pilars table tbody tr td span, .container-letter .third-letter-row .lucky-pilars table tbody tr td span {
  display: block;
  word-wrap: break-word;
  color: #898989;
  font-family: "Nexa-light";
  font-size: 12px;
  text-transform: uppercase;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr td .qi, .container-letter .second-letter-row .lucky-pilars table tbody tr td .qi, .container-letter .third-letter-row .lucky-pilars table tbody tr td .qi {
  position: absolute;
  text-align: right;
  padding-top: 5px;
  padding-right: 5px;
  right: 0;
  font-family: "Nexa-bold";
}
.container-letter .first-letter-row .lucky-pilars table tbody tr td .pd, .container-letter .second-letter-row .lucky-pilars table tbody tr td .pd, .container-letter .third-letter-row .lucky-pilars table tbody tr td .pd {
  position: absolute;
  text-align: right;
  padding-top: 5px;
  padding-left: 5px;
  left: 0;
  font-family: "Nexa-bold";
}
.container-letter .first-letter-row .lucky-pilars table tbody tr td .description, .container-letter .second-letter-row .lucky-pilars table tbody tr td .description, .container-letter .third-letter-row .lucky-pilars table tbody tr td .description {
  font-size: 10px;
  text-transform: uppercase;
  color: #ddd;
  font-family: "Nexa-light";
  text-transform: uppercase;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr td:last-child, .container-letter .second-letter-row .lucky-pilars table tbody tr td:last-child, .container-letter .third-letter-row .lucky-pilars table tbody tr td:last-child {
  border-right: none;
  color: #8A8B8B;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr td:last-child span, .container-letter .second-letter-row .lucky-pilars table tbody tr td:last-child span, .container-letter .third-letter-row .lucky-pilars table tbody tr td:last-child span {
  width: 70px;
  word-wrap: break-word;
  text-align: center;
  display: block;
  margin: 0 auto;
  font-family: "Nexa-bold";
  text-transform: uppercase;
  font-size: 10px;
}
.container-letter .first-letter-row .lucky-pilars table tbody tr:last-child, .container-letter .second-letter-row .lucky-pilars table tbody tr:last-child, .container-letter .third-letter-row .lucky-pilars table tbody tr:last-child {
  border-bottom: none;
}
.container-letter .first-letter-row .chartMentes, .container-letter .second-letter-row .chartMentes, .container-letter .third-letter-row .chartMentes {
  width: 100%;
  height: auto;
  height: auto;
  margin-top: 2em;
  padding-left: 1em;
}
.container-letter .first-letter-row .chartMentes canvas, .container-letter .second-letter-row .chartMentes canvas, .container-letter .third-letter-row .chartMentes canvas {
  width: 100%;
  max-height: 400px;
}
.container-letter .first-letter-row .chartQuemSou, .container-letter .first-letter-row .chartPapeis, .container-letter .second-letter-row .chartQuemSou, .container-letter .second-letter-row .chartPapeis, .container-letter .third-letter-row .chartQuemSou, .container-letter .third-letter-row .chartPapeis {
  width: 100%;
  height: auto;
  height: auto;
  margin-top: 2em;
  padding-left: 1em;
  margin-bottom: 2em;
}
.container-letter .first-letter-row .chartQuemSou canvas, .container-letter .first-letter-row .chartPapeis canvas, .container-letter .second-letter-row .chartQuemSou canvas, .container-letter .second-letter-row .chartPapeis canvas, .container-letter .third-letter-row .chartQuemSou canvas, .container-letter .third-letter-row .chartPapeis canvas {
  width: 100%;
  max-height: 500px;
}
.container-letter .first-letter-row .firstChart, .container-letter .second-letter-row .firstChart, .container-letter .third-letter-row .firstChart {
  width: 100%;
  height: auto;
  height: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}
.container-letter .first-letter-row .firstChart canvas, .container-letter .second-letter-row .firstChart canvas, .container-letter .third-letter-row .firstChart canvas {
  width: 100%;
  max-height: 40px;
}
.container-letter .first-letter-row .firstChart canvas #race, .container-letter .second-letter-row .firstChart canvas #race, .container-letter .third-letter-row .firstChart canvas #race {
  position: relative;
  z-index: 999;
}
.container-letter .third-letter-row {
  width: 50%;
}
.container-letter .third-letter-row-premium {
  width: 100%;
}
.container-letter .title {
  width: 100%;
  height: 40px;
  border-left: 2px solid #BCBEC0;
  display: table;
  padding-left: 8px;
}
.container-letter .title span {
  display: table-cell;
  vertical-align: middle;
  font-weight: 500;
  text-transform: uppercase;
  color: #898989;
  font-size: 15px;
  font-family: "Nexa-bold";
}
.container-letter .footer-letter {
  position: relative;
  padding-top: 1em;
  width: 100%;
  height: 60px;
  border-top: 1px solid #BCBEC0;
}
.container-letter .footer-letter .title {
  height: 30px;
  display: table;
  border: none;
}
.container-letter .footer-letter .title span {
  display: table-cell;
  vertical-align: middle;
  font-size: 15px;
  font-family: "Nexa-bold";
  color: #898989;
}
.container-letter .footer-letter .info {
  height: 30px;
  display: table;
}
.container-letter .footer-letter .info span {
  display: table-cell;
  vertical-align: middle;
  font-size: 14px;
  font-family: "Nexa-light";
  color: #898989;
}
.container-letter .footer-letter .logo {
  position: relative;
  width: 150px;
  height: 30px;
  display: table;
  float: right;
  padding-right: 8px;
}
.container-letter .footer-letter .logo img {
  width: 100%;
  margin: 0 auto;
  display: block;
  position: relative;
}
.container-letter .footer-letter .copyright {
  width: 100%;
  height: 30px;
  display: table;
  text-align: right;
}
.container-letter .footer-letter .copyright span {
  display: table-cell;
  vertical-align: middle;
  font-size: 12px;
  font-family: "Nexa-light";
  color: #898989;
}

.letter-user {
  width: 100%;
  margin-top: 2em;
}
.letter-user .mdl-spinner {
  width: 60px;
  height: 60px;
  display: none;
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 0;
  margin: 0 auto;
}
.letter-user table {
  width: 100%;
}
.letter-user table thead {
  padding-bottom: 2em;
  border-bottom: 2px solid #ECEDEE;
}
.letter-user table thead tr {
  height: 40px;
  background-color: white;
  border: 2px solid #e7e7e8;
}
.letter-user table thead tr th {
  font-size: 14px;
  font-family: "Nexa-bold";
  color: #2F323A;
  text-transform: uppercase;
  padding-left: 1em;
}
.letter-user table tbody {
  border: 2px solid #e7e7e8;
}
.letter-user table tbody tr {
  height: 40px;
  background-color: white;
}
.letter-user table tbody tr td:nth-child(4), .letter-user table tbody tr td:nth-child(6) {
  padding-left: 0;
  text-align: center;
  cursor: pointer;
}
.letter-user table tbody tr td:nth-child(4):hover, .letter-user table tbody tr td:nth-child(6):hover {
  color: #007C89;
}
.letter-user table tbody tr td {
  font-size: 14px;
  font-family: "Nexa-light";
  color: #2F323A;
  border: 1px solid #e7e7e8;
  padding-left: 1em;
}
.letter-user table tbody tr td span {
  font-size: 20px;
  vertical-align: middle;
}
.letter-user table tbody tr td:last-child {
  text-align: center;
}
.letter-user .view-letter {
  background-color: white;
  border: 1px solid #2F323A;
  color: #2F323A;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Nexa-light";
  border-radius: 10px;
  padding: 8px;
}
.letter-user .view-letter:hover {
  background-color: #007C89;
  color: white;
}
.letter-user a {
  text-decoration: none;
}

.medium-button {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #2dbfc2;
  margin-top: 2em;
  border: 2px solid #e7e7e8;
  display: table;
  text-align: center;
}
.medium-button a {
  display: table-cell;
  vertical-align: middle;
  color: white;
  font-size: 16px;
  font-family: "Nexa-light";
  text-transform: uppercase;
  text-decoration: none;
}

.big-button {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #2dbfc2;
  margin-top: 2em;
  border: 2px solid #e7e7e8;
  display: table;
  text-align: center;
}
.big-button a {
  display: table-cell;
  vertical-align: middle;
  color: white;
  font-size: 30px;
  font-family: "Nexa-light";
  text-transform: uppercase;
  text-decoration: none;
}

.search-bazi {
  width: 100%;
  margin-top: 2em;
  border: 2px solid #e7e7e8;
  background-color: white;
}
.search-bazi form {
  width: 80%;
  margin: 0 auto;
  margin-top: 1em;
}
.search-bazi form .form-group {
  width: 100%;
  margin-bottom: 1em;
}
.search-bazi form .form-group label {
  min-width: 100px;
  font-size: 14px;
  font-family: "Nexa-light";
  color: #2F323A;
  text-transform: uppercase;
  display: block;
}
.search-bazi form .form-group input {
  width: 100%;
  border-radius: 0;
  border: 1px solid #2F323A;
}
.search-bazi form .form-group select {
  width: 100%;
  height: 35px;
  border-radius: 0;
  background-color: transparent;
  border: 1px solid #2F323A;
  color: #555;
}
.search-bazi form .btn-search {
  width: 100%;
  height: 50px;
  background-color: #b1a268;
  border-radius: 0;
  margin-top: 1em;
  margin-bottom: 1em;
  color: white;
  font-family: "Nexa-light";
  font-size: 20px;
  text-transform: uppercase;
}

#table-payments {
  width: 100%;
}
#table-payments thead {
  padding-bottom: 2em;
  border-bottom: 2px solid #ECEDEE;
}
#table-payments thead tr {
  height: 40px;
  background-color: white;
  border: 2px solid #e7e7e8;
}
#table-payments thead tr th:first-child {
  width: 90px;
}
#table-payments thead tr th:nth-child(2) {
  width: 90px;
}
#table-payments thead tr th:nth-child(3) {
  width: 70px;
}
#table-payments thead tr th:nth-child(4) {
  width: 200px;
}
#table-payments thead tr th:nth-child(5) {
  width: 70px;
}
#table-payments thead tr th:nth-child(6) {
  width: 70px;
}
#table-payments thead tr th:nth-child(7) {
  width: 110px;
}
#table-payments thead tr th {
  font-size: 14px;
  font-family: "Nexa-bold";
  color: #2F323A;
  text-transform: uppercase;
  padding-left: 1em;
}
#table-payments tbody {
  border: 2px solid #e7e7e8;
}
#table-payments tbody tr {
  height: 40px;
  background-color: white;
}
#table-payments tbody tr td:first-child {
  width: 90px;
}
#table-payments tbody tr td:nth-child(2) {
  width: 90px;
}
#table-payments tbody tr td:nth-child(3) {
  width: 70px;
}
#table-payments tbody tr td:nth-child(4) {
  width: 200px;
  text-align: left;
}
#table-payments tbody tr td:nth-child(5) {
  width: 70px;
}
#table-payments tbody tr td:nth-child(6) {
  width: 70px;
}
#table-payments tbody tr td:nth-child(7) {
  width: 110px;
  padding-left: 0;
  text-align: center;
  cursor: pointer;
  color: black;
}
#table-payments tbody tr td:nth-child(7):hover {
  color: #007C89;
}
#table-payments tbody tr td {
  font-size: 14px;
  font-family: "Nexa-light";
  color: #2F323A;
  border: 1px solid #e7e7e8;
  padding-left: 1em;
}
#table-payments tbody tr td span {
  font-size: 20px;
  vertical-align: middle;
}
#table-payments tbody tr td:last-child {
  text-align: center;
}
#table-payments a {
  text-decoration: none;
  color: black;
}
#table-payments a:hover {
  color: #007C89;
}
#table-payments .no-download {
  cursor: default;
  font-size: 12px;
}
#table-payments .no-download:hover {
  color: black;
}

#table-user {
  width: 100%;
  z-index: 900;
  position: relative;
}
#table-user thead {
  padding-bottom: 2em;
  border-bottom: 2px solid #ECEDEE;
}
#table-user thead tr {
  height: 40px;
  background-color: white;
  border: 2px solid #e7e7e8;
}
#table-user thead tr th {
  font-size: 14px;
  font-family: "Nexa-bold";
  color: #2F323A;
  text-transform: uppercase;
  padding-left: 1em;
  padding-right: 1em;
}
#table-user thead tr th table {
  border-collapse: initial;
}
#table-user thead tr th table tbody {
  border: none;
}
#table-user thead tr th table tbody tr td {
  border: none;
}
#table-user tbody {
  border: 2px solid #e7e7e8;
}
#table-user tbody tr {
  height: 40px;
  background-color: white;
}
#table-user tbody tr td.center-item {
  padding-left: 0;
  text-align: center;
}
#table-user tbody tr td {
  font-size: 14px;
  font-family: "Nexa-light";
  color: #2F323A;
  border: 1px solid #e7e7e8;
  padding-left: 1em;
}
#table-user tbody tr td span, #table-user tbody tr td i {
  font-size: 20px;
  vertical-align: middle;
}
#table-user tbody tr td i {
  min-width: 70px;
  font-size: 16px;
}
#table-user tbody tr td i:hover {
  color: #b1a268;
}
#table-user tbody tr td .view-btn {
  background-color: white;
  border: 1px solid #1a125a;
  color: #1a125a;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Nexa-light";
  border-radius: 10px;
  padding: 8px;
}
#table-user tbody tr td .view-btn:hover {
  background-color: #b1a268;
  color: white;
}
#table-user tbody tr td table {
  border-collapse: initial;
  width: 100%;
}
#table-user tbody tr td table tbody {
  border: none;
}
#table-user tbody tr td table tbody tr td {
  text-align: center;
  border: none;
}
#table-user a {
  text-decoration: none;
  color: black;
}
#table-user a:hover {
  color: #007C89;
}
#table-user .no-download {
  cursor: default;
  font-size: 12px;
}
#table-user .no-download:hover {
  color: black;
}

#user-popup {
  width: 60%;
}
#user-popup .mdl-card__supporting-text {
  width: 100%;
}

#editUser img {
  margin-top: 1em;
  width: 50px;
  border-radius: 100%;
}

.get-user {
  cursor: pointer;
}

.title-premium {
  display: block;
  margin: 0 auto;
  text-align: left;
  font-family: "Nexa-bold";
  text-transform: uppercase;
  font-size: 10px;
  color: #898989;
  margin-top: 2em;
  margin-bottom: 2em;
  padding-left: 1em;
  padding-right: 1em;
}

.content-premium {
  display: block;
  color: #898989;
  font-family: "Nexa-light";
  font-size: 12px;
  text-align: justify;
  padding-left: 1em;
  padding-right: 1em;
  margin-bottom: 2em;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  opacity: 1;
  font-size: 15px;
  font-family: "Nexa-light";
  color: black;
}

::-moz-placeholder { /* Firefox 19+ */
  opacity: 1;
  font-size: 15px;
  font-family: "Nexa-light";
  color: black;
}

:-ms-input-placeholder { /* IE 10+ */
  opacity: 1;
  font-size: 15px;
  font-family: "Nexa-light";
  color: black;
}

:-moz-placeholder { /* Firefox 18- */
  opacity: 1;
  font-size: 15px;
  font-family: "Nexa-light";
  color: black;
}

.rect-auto, .c100.p100 .slice, .c100.p99 .slice, .c100.p98 .slice, .c100.p97 .slice, .c100.p96 .slice, .c100.p95 .slice, .c100.p94 .slice, .c100.p93 .slice, .c100.p92 .slice, .c100.p91 .slice, .c100.p90 .slice, .c100.p89 .slice, .c100.p88 .slice, .c100.p87 .slice, .c100.p86 .slice, .c100.p85 .slice, .c100.p84 .slice, .c100.p83 .slice, .c100.p82 .slice, .c100.p81 .slice, .c100.p80 .slice, .c100.p79 .slice, .c100.p78 .slice, .c100.p77 .slice, .c100.p76 .slice, .c100.p75 .slice, .c100.p74 .slice, .c100.p73 .slice, .c100.p72 .slice, .c100.p71 .slice, .c100.p70 .slice, .c100.p69 .slice, .c100.p68 .slice, .c100.p67 .slice, .c100.p66 .slice, .c100.p65 .slice, .c100.p64 .slice, .c100.p63 .slice, .c100.p62 .slice, .c100.p61 .slice, .c100.p60 .slice, .c100.p59 .slice, .c100.p58 .slice, .c100.p57 .slice, .c100.p56 .slice, .c100.p55 .slice, .c100.p54 .slice, .c100.p53 .slice, .c100.p52 .slice, .c100.p51 .slice {
  clip: rect(auto, auto, auto, auto);
}

.pie, .c100.p100 .fill, .c100.p99 .fill, .c100.p98 .fill, .c100.p97 .fill, .c100.p96 .fill, .c100.p95 .fill, .c100.p94 .fill, .c100.p93 .fill, .c100.p92 .fill, .c100.p91 .fill, .c100.p90 .fill, .c100.p89 .fill, .c100.p88 .fill, .c100.p87 .fill, .c100.p86 .fill, .c100.p85 .fill, .c100.p84 .fill, .c100.p83 .fill, .c100.p82 .fill, .c100.p81 .fill, .c100.p80 .fill, .c100.p79 .fill, .c100.p78 .fill, .c100.p77 .fill, .c100.p76 .fill, .c100.p75 .fill, .c100.p74 .fill, .c100.p73 .fill, .c100.p72 .fill, .c100.p71 .fill, .c100.p70 .fill, .c100.p69 .fill, .c100.p68 .fill, .c100.p67 .fill, .c100.p66 .fill, .c100.p65 .fill, .c100.p64 .fill, .c100.p63 .fill, .c100.p62 .fill, .c100.p61 .fill, .c100.p60 .fill, .c100.p59 .fill, .c100.p58 .fill, .c100.p57 .fill, .c100.p56 .fill, .c100.p55 .fill, .c100.p54 .fill, .c100.p53 .fill, .c100.p52 .fill, .c100.p51 .fill, .c100 .bar {
  position: absolute;
  border: 0.08em solid #34BFC2;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  transform: rotate(0deg);
}

.pie-fill, .c100.p100 .fill, .c100.p100 .bar:after, .c100.p99 .fill, .c100.p99 .bar:after, .c100.p98 .fill, .c100.p98 .bar:after, .c100.p97 .fill, .c100.p97 .bar:after, .c100.p96 .fill, .c100.p96 .bar:after, .c100.p95 .fill, .c100.p95 .bar:after, .c100.p94 .fill, .c100.p94 .bar:after, .c100.p93 .fill, .c100.p93 .bar:after, .c100.p92 .fill, .c100.p92 .bar:after, .c100.p91 .fill, .c100.p91 .bar:after, .c100.p90 .fill, .c100.p90 .bar:after, .c100.p89 .fill, .c100.p89 .bar:after, .c100.p88 .fill, .c100.p88 .bar:after, .c100.p87 .fill, .c100.p87 .bar:after, .c100.p86 .fill, .c100.p86 .bar:after, .c100.p85 .fill, .c100.p85 .bar:after, .c100.p84 .fill, .c100.p84 .bar:after, .c100.p83 .fill, .c100.p83 .bar:after, .c100.p82 .fill, .c100.p82 .bar:after, .c100.p81 .fill, .c100.p81 .bar:after, .c100.p80 .fill, .c100.p80 .bar:after, .c100.p79 .fill, .c100.p79 .bar:after, .c100.p78 .fill, .c100.p78 .bar:after, .c100.p77 .fill, .c100.p77 .bar:after, .c100.p76 .fill, .c100.p76 .bar:after, .c100.p75 .fill, .c100.p75 .bar:after, .c100.p74 .fill, .c100.p74 .bar:after, .c100.p73 .fill, .c100.p73 .bar:after, .c100.p72 .fill, .c100.p72 .bar:after, .c100.p71 .fill, .c100.p71 .bar:after, .c100.p70 .fill, .c100.p70 .bar:after, .c100.p69 .fill, .c100.p69 .bar:after, .c100.p68 .fill, .c100.p68 .bar:after, .c100.p67 .fill, .c100.p67 .bar:after, .c100.p66 .fill, .c100.p66 .bar:after, .c100.p65 .fill, .c100.p65 .bar:after, .c100.p64 .fill, .c100.p64 .bar:after, .c100.p63 .fill, .c100.p63 .bar:after, .c100.p62 .fill, .c100.p62 .bar:after, .c100.p61 .fill, .c100.p61 .bar:after, .c100.p60 .fill, .c100.p60 .bar:after, .c100.p59 .fill, .c100.p59 .bar:after, .c100.p58 .fill, .c100.p58 .bar:after, .c100.p57 .fill, .c100.p57 .bar:after, .c100.p56 .fill, .c100.p56 .bar:after, .c100.p55 .fill, .c100.p55 .bar:after, .c100.p54 .fill, .c100.p54 .bar:after, .c100.p53 .fill, .c100.p53 .bar:after, .c100.p52 .fill, .c100.p52 .bar:after, .c100.p51 .fill, .c100.p51 .bar:after {
  transform: rotate(180deg);
}

.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: #ECEDEE;
}
.c100 *, .c100 *:before, .c100 *:after { /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */
  box-sizing: content-box; /* Opera/IE 8+ */
}
.c100.center {
  float: none;
  margin: 0 auto;
}
.c100.big {
  font-size: 240px;
}
.c100.small {
  font-size: 80px;
}
.c100 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #ECEDEE;
  display: block;
  text-align: center;
  white-space: nowrap;
  transition-property: all;
  transition-property: 0.2s;
  transition-timing-function: ease-out;
  font-family: "Nexa-bold";
}
.c100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-color: white;
  width: 0.84em;
  height: 0.84em;
  transition-property: all;
  transition-property: 0.2s;
  transition-timing-function: ease-in;
}
.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p1 .bar {
  transform: rotate(3.6deg);
}
.c100.p2 .bar {
  transform: rotate(7.2deg);
}
.c100.p3 .bar {
  transform: rotate(10.8deg);
}
.c100.p4 .bar {
  transform: rotate(14.4deg);
}
.c100.p5 .bar {
  transform: rotate(18deg);
}
.c100.p6 .bar {
  transform: rotate(21.6deg);
}
.c100.p7 .bar {
  transform: rotate(25.2deg);
}
.c100.p8 .bar {
  transform: rotate(28.8deg);
}
.c100.p9 .bar {
  transform: rotate(32.4deg);
}
.c100.p10 .bar {
  transform: rotate(36deg);
}
.c100.p11 .bar {
  transform: rotate(39.6deg);
}
.c100.p12 .bar {
  transform: rotate(43.2deg);
}
.c100.p13 .bar {
  transform: rotate(46.8deg);
}
.c100.p14 .bar {
  transform: rotate(50.4deg);
}
.c100.p15 .bar {
  transform: rotate(54deg);
}
.c100.p16 .bar {
  transform: rotate(57.6deg);
}
.c100.p17 .bar {
  transform: rotate(61.2deg);
}
.c100.p18 .bar {
  transform: rotate(64.8deg);
}
.c100.p19 .bar {
  transform: rotate(68.4deg);
}
.c100.p20 .bar {
  transform: rotate(72deg);
}
.c100.p21 .bar {
  transform: rotate(75.6deg);
}
.c100.p22 .bar {
  transform: rotate(79.2deg);
}
.c100.p23 .bar {
  transform: rotate(82.8deg);
}
.c100.p24 .bar {
  transform: rotate(86.4deg);
}
.c100.p25 .bar {
  transform: rotate(90deg);
}
.c100.p26 .bar {
  transform: rotate(93.6deg);
}
.c100.p27 .bar {
  transform: rotate(97.2deg);
}
.c100.p28 .bar {
  transform: rotate(100.8deg);
}
.c100.p29 .bar {
  transform: rotate(104.4deg);
}
.c100.p30 .bar {
  transform: rotate(108deg);
}
.c100.p31 .bar {
  transform: rotate(111.6deg);
}
.c100.p32 .bar {
  transform: rotate(115.2deg);
}
.c100.p33 .bar {
  transform: rotate(118.8deg);
}
.c100.p34 .bar {
  transform: rotate(122.4deg);
}
.c100.p35 .bar {
  transform: rotate(126deg);
}
.c100.p36 .bar {
  transform: rotate(129.6deg);
}
.c100.p37 .bar {
  transform: rotate(133.2deg);
}
.c100.p38 .bar {
  transform: rotate(136.8deg);
}
.c100.p39 .bar {
  transform: rotate(140.4deg);
}
.c100.p40 .bar {
  transform: rotate(144deg);
}
.c100.p41 .bar {
  transform: rotate(147.6deg);
}
.c100.p42 .bar {
  transform: rotate(151.2deg);
}
.c100.p43 .bar {
  transform: rotate(154.8deg);
}
.c100.p44 .bar {
  transform: rotate(158.4deg);
}
.c100.p45 .bar {
  transform: rotate(162deg);
}
.c100.p46 .bar {
  transform: rotate(165.6deg);
}
.c100.p47 .bar {
  transform: rotate(169.2deg);
}
.c100.p48 .bar {
  transform: rotate(172.8deg);
}
.c100.p49 .bar {
  transform: rotate(176.4deg);
}
.c100.p50 .bar {
  transform: rotate(180deg);
}
.c100.p51 .bar {
  transform: rotate(183.6deg);
}
.c100.p52 .bar {
  transform: rotate(187.2deg);
}
.c100.p53 .bar {
  transform: rotate(190.8deg);
}
.c100.p54 .bar {
  transform: rotate(194.4deg);
}
.c100.p55 .bar {
  transform: rotate(198deg);
}
.c100.p56 .bar {
  transform: rotate(201.6deg);
}
.c100.p57 .bar {
  transform: rotate(205.2deg);
}
.c100.p58 .bar {
  transform: rotate(208.8deg);
}
.c100.p59 .bar {
  transform: rotate(212.4deg);
}
.c100.p60 .bar {
  transform: rotate(216deg);
}
.c100.p61 .bar {
  transform: rotate(219.6deg);
}
.c100.p62 .bar {
  transform: rotate(223.2deg);
}
.c100.p63 .bar {
  transform: rotate(226.8deg);
}
.c100.p64 .bar {
  transform: rotate(230.4deg);
}
.c100.p65 .bar {
  transform: rotate(234deg);
}
.c100.p66 .bar {
  transform: rotate(237.6deg);
}
.c100.p67 .bar {
  transform: rotate(241.2deg);
}
.c100.p68 .bar {
  transform: rotate(244.8deg);
}
.c100.p69 .bar {
  transform: rotate(248.4deg);
}
.c100.p70 .bar {
  transform: rotate(252deg);
}
.c100.p71 .bar {
  transform: rotate(255.6deg);
}
.c100.p72 .bar {
  transform: rotate(259.2deg);
}
.c100.p73 .bar {
  transform: rotate(262.8deg);
}
.c100.p74 .bar {
  transform: rotate(266.4deg);
}
.c100.p75 .bar {
  transform: rotate(270deg);
}
.c100.p76 .bar {
  transform: rotate(273.6deg);
}
.c100.p77 .bar {
  transform: rotate(277.2deg);
}
.c100.p78 .bar {
  transform: rotate(280.8deg);
}
.c100.p79 .bar {
  transform: rotate(284.4deg);
}
.c100.p80 .bar {
  transform: rotate(288deg);
}
.c100.p81 .bar {
  transform: rotate(291.6deg);
}
.c100.p82 .bar {
  transform: rotate(295.2deg);
}
.c100.p83 .bar {
  transform: rotate(298.8deg);
}
.c100.p84 .bar {
  transform: rotate(302.4deg);
}
.c100.p85 .bar {
  transform: rotate(306deg);
}
.c100.p86 .bar {
  transform: rotate(309.6deg);
}
.c100.p87 .bar {
  transform: rotate(313.2deg);
}
.c100.p88 .bar {
  transform: rotate(316.8deg);
}
.c100.p89 .bar {
  transform: rotate(320.4deg);
}
.c100.p90 .bar {
  transform: rotate(324deg);
}
.c100.p91 .bar {
  transform: rotate(327.6deg);
}
.c100.p92 .bar {
  transform: rotate(331.2deg);
}
.c100.p93 .bar {
  transform: rotate(334.8deg);
}
.c100.p94 .bar {
  transform: rotate(338.4deg);
}
.c100.p95 .bar {
  transform: rotate(342deg);
}
.c100.p96 .bar {
  transform: rotate(345.6deg);
}
.c100.p97 .bar {
  transform: rotate(349.2deg);
}
.c100.p98 .bar {
  transform: rotate(352.8deg);
}
.c100.p99 .bar {
  transform: rotate(356.4deg);
}
.c100.p100 .bar {
  transform: rotate(360deg);
}
.c100:hover {
  cursor: default;
}
.c100:hover > span {
  width: 3.33em;
  line-height: 3.33em;
  font-size: 0.3em;
  color: #34BFC2;
}
.c100:hover:after {
  top: 0.04em;
  left: 0.04em;
  width: 0.92em;
  height: 0.92em;
}
.c100.dark {
  background-color: #777;
}
.c100.dark .bar,
.c100.dark .fill {
  border-color: #c6ff00 !important;
}
.c100.dark > span {
  color: #777;
}
.c100.dark:after {
  background-color: #666;
}
.c100.dark:hover > span {
  color: #c6ff00;
}
.c100.green .bar, .c100.green .fill {
  border-color: #4db53c !important;
}
.c100.green:hover > span {
  color: #4db53c;
}
.c100.green.dark .bar, .c100.green.dark .fill {
  border-color: #5fd400 !important;
}
.c100.green.dark:hover > span {
  color: #5fd400;
}
.c100.orange .bar, .c100.orange .fill {
  border-color: #dd9d22 !important;
}
.c100.orange:hover > span {
  color: #dd9d22;
}
.c100.orange.dark .bar, .c100.orange.dark .fill {
  border-color: #e08833 !important;
}
.c100.orange.dark:hover > span {
  color: #e08833;
}

.box-content {
  position: relative;
  z-index: 991;
  width: 100%;
  margin-top: 2em;
  border: 2px solid #e7e7e8;
  background-color: white;
  overflow: auto;
  padding: 20px;
}
.box-content .pagination {
  float: right;
}
.box-content .pagination li span, .box-content .pagination li a {
  color: #2F323A;
}
.box-content .pagination .active span {
  background-color: #1a125a;
  border-color: #1a125a;
}
.box-content .pagination .active span:hover {
  background-color: #1a125a;
  border-color: #1a125a;
}
.box-content .title {
  width: 100%;
  height: 50px;
  display: table;
  margin-bottom: 1em;
}
.box-content .title span {
  display: table-cell;
  vertical-align: middle;
  font-family: "Nexa-bold";
  font-size: 1.2em;
}
.box-content #float_l {
  float: left;
}
.box-content #float_r {
  float: right;
}
.box-content #btn-cancel-top {
  width: 38%;
  float: right;
  padding-top: 1em;
}
.box-content #title {
  display: inline;
  width: 50%;
}
.box-content #buttons-box-top {
  border-top: 0;
}
.box-content .buttons-box {
  position: relative;
  width: 100%;
  height: 100px;
  margin-top: 1em;
  border-top: 1px solid #1a125a;
}
.box-content .buttons-box .btn-cancel.remove {
  background-color: #e74c3c;
  color: white;
  float: left;
}
.box-content .buttons-box .btn-cancel.remove:hover {
  background-color: #b1a268;
}
.box-content .buttons-box .btn-cancel {
  background-color: white;
  border: 1px solid #2F323A;
  color: #2F323A;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Nexa-light";
  border-radius: 10px;
  padding: 8px;
  float: right;
  margin-bottom: 1em;
  margin-right: 2em;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.box-content .buttons-box .btn-cancel:hover {
  background-color: #b1a268;
  color: white;
}
.box-content .buttons-box .btn-confirm {
  background-color: #1a125a;
  border: 1px solid #2F323A;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Nexa-light";
  border-radius: 10px;
  padding: 8px;
  float: right;
  margin-bottom: 1em;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.box-content .buttons-box .btn-confirm:hover {
  background-color: #b1a268;
  color: white;
}
.box-content form {
  width: 90%;
  margin: 0 auto;
  margin-top: 1em;
}
.box-content form .form-group {
  margin-bottom: 1em;
}
.box-content form .form-group label {
  min-width: 100px;
  font-size: 14px;
  font-family: "Nexa-light";
  color: #2F323A;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.box-content form .form-group label.votes-minute {
  float: right;
  font-family: "Nexa-bold";
  min-width: auto;
  position: absolute;
  top: 0;
  right: 2em;
  font-size: 14px;
  text-transform: inherit;
}
.box-content form .form-group input {
  width: 100%;
  height: 35px;
  border-radius: 0;
  border: 1px solid #2F323A;
}
.box-content form .form-group select {
  width: 100%;
  height: 35px;
  border-radius: 0;
  background-color: transparent;
  border: 1px solid #2F323A;
  color: #555;
}
.box-content form .btn-form {
  width: 100%;
  height: 50px;
  background-color: #b1a268;
  border-radius: 0;
  margin-top: 1em;
  margin-bottom: 1em;
  color: white;
  font-family: "Nexa-light";
  font-size: 20px;
  text-transform: uppercase;
}
.box-content .list-group li a {
  font-size: 1em;
  font-family: "Nexa-light";
  color: black;
  display: block;
  text-decoration: none;
}
.box-content .list-group li:hover {
  background-color: #b1a268;
}
.box-content .list-group li:hover a {
  color: white;
}
.box-content .list-group li.active {
  border-color: #1a125a;
  background-color: #b1a268;
}
.box-content .list-group li.active a {
  color: white;
}
.box-content table tbody tr.sync-tr td:last-child {
  width: 5% !important;
  text-align: center;
}
.box-content table tbody tr.sync-tr td:last-child i {
  min-width: inherit !important;
  font-size: 1.2em !important;
  opacity: 0;
}
.box-content table tbody tr.sync-tr td:last-child i:hover {
  color: inherit !important;
}
.box-content table tbody tr.sync-tr td:last-child i.icon-spin1 {
  color: #f1c40f;
}
.box-content table tbody tr.sync-tr td:last-child i.icon-ok {
  color: #2ecc71;
}
.box-content table tbody tr.sync-tr td:last-child i.icon-cancel {
  color: #e74c3c;
}

@media print {
  @page {
    margin: 1cm;
  }
  /* Or: */
  @page :left {
    margin: 0.5cm;
  }
  @page :right {
    margin: 0.5cm;
  }
  /* The first page of a print can be manipulated as well */
  @page :first {
    margin: 1cm 1cm;
  }
  .container-letter .print-1, .print-2, .print-3 {
    page-break-inside: avoid;
  }
  .container-letter .first-letter-row .four-pilars .info table tbody tr td:nth-child(2), .container-letter .second-letter-row .four-pilars .info table tbody tr td:nth-child(2), .container-letter .third-letter-row .four-pilars .info table tbody tr td:nth-child(2) {
    background: #ddd !important;
  }
  .print-color {
    background: #ddd !important;
  }
}
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {
  #table-letter-user {
    min-width: 900px;
  }
  .c100 {
    float: none;
    margin: 0 auto;
  }
  .dashboard #genre span.title {
    margin-top: 1em;
  }
  #genre {
    height: 450px !important;
  }
  .dashboard .graph-1-dashboard .circle {
    width: 125px;
    height: 125px;
  }
  .dashboard .graph-1-dashboard .circle .value {
    height: 60px;
  }
  .dashboard #genre span.title {
    margin-top: 1em;
  }
  #genre {
    height: 450px !important;
  }
}
@media only screen and (max-width: 1024px) {
  .popup #popup-reference {
    width: 60%;
  }
}
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
  .remove-all {
    float: left;
    margin-top: 1em;
  }
  .scroll-arrow-tables {
    display: block !important;
  }
  #letter-user {
    overflow: auto;
  }
  .menu-bar ul {
    display: none;
  }
  .menu-bar .mobile {
    display: table !important;
  }
  .dashboard .graph-1-dashboard .circle {
    width: 150px;
    height: 150px;
    margin: 0 auto;
  }
  .dashboard .graph-1-dashboard .circle .value {
    height: 75px;
  }
  .dashboard .header-1-dashboard, .dashboard .header-2-dashboard {
    margin-top: 2em;
  }
  #genre {
    height: 285px !important;
  }
}
@media only screen and (max-width: 767px) {
  .scroll-arrow {
    display: block !important;
  }
  .third-letter-row {
    height: 580px !important;
  }
  .popup {
    overflow: auto;
  }
  .lucky-pilars {
    overflow: auto;
  }
  .lucky-pilars table {
    min-width: 740px;
  }
  .container-letter .third-letter-row {
    width: 100%;
  }
  .container-letter .footer-letter {
    margin-top: 10em;
  }
  .container-letter .footer-letter .info {
    width: 100%;
    height: 50px;
    text-align: right;
  }
  .container-letter .footer-letter .title {
    height: 50px;
  }
  .container-letter .footer-letter .logo {
    padding-left: 1em;
    float: none;
  }
  #user-popup {
    width: 100%;
  }
  .popup .mdl-card {
    top: 0;
    transform: none;
  }
  .popup #popup-reference {
    width: 100%;
  }
  .letter-user {
    overflow: auto;
  }
  #table-payments, #table-user {
    min-width: 708px;
  }
  #table-letter-user {
    min-width: 900px;
  }
}
@media only screen and (max-width: 580px) {
  #dashboardCircles .col-xs-4 {
    width: 100%;
  }
  .container-fluid .box-half {
    overflow: auto;
  }
  .container-fluid .box-half table {
    min-width: 525px;
  }
  .col-xs-6.search-payment-form {
    width: 100%;
  }
  .dashboard .graph-1-dashboard .circle {
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .graph-1-dashboard {
    height: auto !important;
  }
  .footer-letter .col-xs-8 {
    width: 100%;
  }
  .footer-letter .col-xs-4 {
    width: 100%;
  }
  .container-letter .footer-letter .info {
    text-align: left;
    padding-left: 1em;
    height: 30px;
  }
  .container-letter .footer-letter .title {
    height: 30px;
  }
  .container-letter .footer-letter .logo {
    float: right;
  }
  .container-letter .footer-letter .title {
    height: 50px;
  }
  .container-letter .header-letter-row .letter-title span {
    font-size: 2em;
  }
}
/* Extra Small Devices, Phones */
@media only screen and (max-width: 400px) {
  .four-pilars .info {
    overflow: auto;
  }
  .four-pilars .info table {
    min-width: 400px;
  }
}
/* Custom, iPhone Retina */
@font-face {
  font-family: "sl";
  src: url("/fonts/sl.eot?78111247");
  src: url("/fonts/sl.eot?78111247#iefix") format("embedded-opentype"), url("/fonts/sl.woff2?78111247") format("woff2"), url("/fonts/sl.woff?78111247") format("woff"), url("/fonts/sl.ttf?78111247") format("truetype"), url("/fonts/sl.svg?78111247#sl") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'sl';
    src: url('../font/sl.svg?78111247#sl') format('svg');
  }
}
*/
[class^=icon-]:before, [class*=" icon-"]:before {
  font-family: "sl";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-edit:before {
  content: "\e800";
} /* '' */
.icon-plus:before {
  content: "\e801";
} /* '' */
.icon-minus:before {
  content: "\e802";
} /* '' */
.icon-user:before {
  content: "\e803";
} /* '' */
.icon-cancel-circled-outline:before {
  content: "\e804";
} /* '' */
.icon-cancel:before {
  content: "\e805";
} /* '' */
.icon-ok:before {
  content: "\e806";
} /* '' */
.icon-cog-alt:before {
  content: "\e807";
} /* '' */
.icon-off:before {
  content: "\e808";
} /* '' */
.icon-logout:before {
  content: "\e809";
} /* '' */
.icon-spin1:before {
  content: "\e830";
} /* '' */
.icon-angle-left:before {
  content: "\f104";
} /* '' */
.icon-angle-right:before {
  content: "\f105";
} /* '' */
.icon-minus-squared-alt:before {
  content: "\f147";
} /* '' */
.icon-plus-squared-alt:before {
  content: "\f196";
} /* '' */
.icon-file-pdf:before {
  content: "\f1c1";
} /* '' */
@font-face {
  font-family: "Nexa-Rust-Sans-Black";
  src: url("/fonts/NexaRustSans-Black.eot");
  src: url("/fonts/NexaRustSans-Black.eot?#iefix") format("embedded-opentype"), url("/fonts/NexaRustSans-Black.woff") format("woff"), url("/fonts/NexaRustSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Nexa-Rust-Extras-Free";
  src: url("/fonts/NexaRustExtras-Free.eot");
  src: url("/fonts/NexaRustExtras-Free.eot?#iefix") format("embedded-opentype"), url("/fonts/NexaRustExtras-Free.woff") format("woff"), url("/fonts/NexaRustExtras-Free.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Nexa-Rust-Handmade-Extended";
  src: url("/fonts/NexaRustHandmade-Extended.eot");
  src: url("/fonts/NexaRustHandmade-Extended.eot?#iefix") format("embedded-opentype"), url("/fonts/NexaRustHandmade-Extended.woff") format("woff"), url("/fonts/NexaRustHandmade-Extended.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Nexa-Light";
  src: url("/fonts/NexaLight.eot");
  src: url("/fonts/NexaLight.eot?#iefix") format("embedded-opentype"), url("/fonts/NexaLight.woff") format("woff"), url("/fonts/NexaLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Nexa-Rust-Script-L0";
  src: url("/fonts/NexaRustScriptL-0.eot");
  src: url("/fonts/NexaRustScriptL-0.eot?#iefix") format("embedded-opentype"), url("/fonts/NexaRustScriptL-0.woff") format("woff"), url("/fonts/NexaRustScriptL-0.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Nexa-bold";
  src: url("/fonts/NexaBold.eot");
  src: url("/fonts/NexaBold.eot?#iefix") format("embedded-opentype"), url("/fonts/NexaBold.woff") format("woff"), url("/fonts/NexaBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
.container-footer {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  bottom: 0;
}
.container-footer footer {
  width: 100%;
  height: 50px;
  display: table;
  text-align: right;
}
.container-footer footer span {
  font-family: "Nexa-bold";
  font-size: 12px;
  display: table-cell;
  vertical-align: middle;
}