.questionaire-item {
  padding: 0 7.5px !important;
  position: relative;
  margin-bottom: 15px; }
  .questionaire-item .item-container {
    background-color: #eeeeee;
    padding: 20px;
    border-radius: 10px; }
    .questionaire-item .item-container #first-row {
      margin-bottom: 20px; }
    .questionaire-item .item-container #name {
      margin-top: 5px;
      text-align: center;
      word-break: break-word;
      padding-bottom: 35px; }
    .questionaire-item .item-container button, .questionaire-item .item-container a {
      width: 90px; }
    .questionaire-item .item-container .button-row {
      text-align: center; }
      .questionaire-item .item-container .button-row a:first-of-type, .questionaire-item .item-container .button-row button:first-of-type {
        margin-right: 15px; }
  .questionaire-item #active {
    top: 90px;
    left: 95px;
    position: absolute; }

.navbar.navbar-default {
  background-color: #3d468b;
  border: none; }
  .navbar.navbar-default .navbar-brand {
    color: #eeeeee;
    font-weight: bold;
    font-size: 24px; }
  .navbar.navbar-default li a, .navbar.navbar-default li.active a, .navbar.navbar-default li a:hover, .navbar.navbar-default li.active a:focus {
    color: #eeeeee; }

.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus,
.navbar .nav > .active > a {
  background-color: #30386e; }

.navbar-nav > li:hover {
  background-color: #30386e; }

.navbar {
  margin-bottom: 15px; }

#faces a {
  cursor: pointer;
  text-decoration: none;
  margin-right: 40px; }

#faces a:last-of-type, #faces.active {
  margin-right: 0; }

#faces #sad {
  color: #f14b4b; }
  #faces #sad:hover {
    color: #d43232; }

#faces #ok {
  color: #18c842; }
  #faces #ok:hover, #faces #ok.active {
    color: #15b13a; }

#faces #neutral {
  color: #bebec0; }
  #faces #neutral:hover, #faces #neutral.active {
    color: #7b7b7c; }

#createQ {
  padding-top: 5px; }
  #createQ #newQ {
    text-align: center; }
    #createQ #newQ label {
      font-size: 18px;
      color: #373b3f; }
    #createQ #newQ label.btn {
      color: #eeeeee; }
    #createQ #newQ .type label {
      font-size: 14px; }
    #createQ #newQ .type-container {
      height: 70px; }
    #createQ #newQ .question-type {
      line-height: 35px;
      margin-top: 10px; }
    #createQ #newQ input[type="text"] {
      border: 1px solid #3d468b;
      width: 100%;
      margin-bottom: 20px; }
    #createQ #newQ input[type="radio"] {
      margin-top: 10px;
      margin-right: 20px; }
    #createQ #newQ #label-left, #createQ #newQ #label-right, #createQ #newQ #label-middle {
      font-size: 16px;
      font-weight: normal; }
    #createQ #newQ #label-left {
      float: left; }
    #createQ #newQ #label-middle {
      position: relative;
      right: 4px; }
    #createQ #newQ #label-right {
      float: right; }
    #createQ #newQ #addBtn {
      margin-bottom: 20px; }
      #createQ #newQ #addBtn button {
        width: 90px; }
    #createQ #newQ .questionaire .type {
      height: 70px; }
    #createQ #newQ #navigation {
      margin-bottom: 20px; }
      #createQ #newQ #navigation button {
        position: initial; }
        #createQ #newQ #navigation button:first-of-type {
          margin-right: 15px; }
    #createQ #newQ #addQ button {
      width: 100px; }
      #createQ #newQ #addQ button:first-of-type {
        margin-right: 15px; }
  #createQ #stars {
    position: relative;
    top: 10px; }
  #createQ #buttons {
    position: relative;
    top: 10px; }
  #createQ input {
    display: block;
    margin: 0 auto; }
  #createQ #preview .preview-container {
    padding: 0 7.5px;
    margin-bottom: 15px; }
  #createQ #preview .questionaire {
    box-sizing: border-box;
    text-align: center;
    background-color: #eeeeee;
    padding: 20px;
    border-radius: 10px; }
    #createQ #preview .questionaire button {
      width: 90px; }
    #createQ #preview .questionaire #stars {
      position: initial; }
    #createQ #preview .questionaire .type {
      margin-bottom: 10px; }
    #createQ #preview .questionaire #textQ {
      font-size: 16px; }
    #createQ #preview .questionaire:hover {
      cursor: pointer;
      background-color: #ecdcc4; }
  #createQ .alert-success {
    text-align: center; }

#questionaire-container .questionaire-live {
  text-align: center; }
  #questionaire-container .questionaire-live #textQ {
    font-size: 28px; }
  #questionaire-container .questionaire-live #navigation {
    position: relative;
    margin-top: 10px; }
    #questionaire-container .questionaire-live #navigation button {
      width: 100px; }
    #questionaire-container .questionaire-live #navigation #prev, #questionaire-container .questionaire-live #navigation #next, #questionaire-container .questionaire-live #navigation #send {
      position: absolute; }
    #questionaire-container .questionaire-live #navigation #prev {
      left: calc(50.5% - 105px); }
    #questionaire-container .questionaire-live #navigation #next, #questionaire-container .questionaire-live #navigation #send {
      left: 50.5%; }
  #questionaire-container .questionaire-live #stars {
    cursor: pointer;
    font-size: 40px; }
    #questionaire-container .questionaire-live #stars span {
      outline: none; }
    #questionaire-container .questionaire-live #stars i {
      color: #efb023; }
  #questionaire-container .questionaire-live #buttons {
    padding-top: 5px; }
  #questionaire-container .questionaire-live #stars, #questionaire-container .questionaire-live #buttons {
    height: 50px; }
  #questionaire-container .questionaire-live #faces, #questionaire-container .questionaire-live #finished {
    height: 70px; }
  #questionaire-container .questionaire-live #chart {
    margin-top: 50px; }

.questionaire .type {
  height: 50px; }

.questionaire #textQ {
  word-break: break-word;
  font-size: 26px; }

.questionaire #stars {
  cursor: pointer;
  font-size: 40px; }
  .questionaire #stars span {
    outline: none; }
  .questionaire #stars i {
    color: #efb023; }

.questionaire #buttons {
  padding-top: 5px; }

.questionaire #chart {
  margin-top: 50px; }

@media (max-width: 640px) {
  .questionaire #textQ {
    font-size: 22px; }
  .questionaire #stars {
    font-size: 30px; } }

#navigation {
  margin-bottom: 50px;
  position: relative;
  margin-top: 10px; }
  #navigation button {
    width: 100px; }
  #navigation #prev, #navigation #next {
    position: absolute; }
  #navigation #prev {
    left: calc(50.5% - 105px); }
  #navigation #next {
    left: 50.5%; }

#resultsQ #calendars-row {
  border-radius: 5px;
  margin-bottom: 15px;
  height: 40px;
  background-color: #eeeeee; }
  #resultsQ #calendars-row #calendars p {
    border-radius: 4px;
    padding-top: 8px;
    font-size: 16px;
    font-weight: bold; }
  #resultsQ #calendars-row #calendars #actualization {
    height: 27px;
    padding-top: 3px;
    margin-top: 7px; }
  #resultsQ #calendars-row input {
    height: 27px;
    padding-top: 6px; }
  #resultsQ #calendars-row .input-group {
    margin-bottom: 0px;
    padding-top: 6px; }

#resultsQ #charts-row .chart-container {
  margin-bottom: 15px;
  padding: 0 7.5px !important; }

#resultsQ #charts-row .chart-container div {
  position: relative;
  text-align: center;
  padding: 20px;
  background-color: #eeeeee;
  border-radius: 4px; }
  #resultsQ #charts-row .chart-container div p {
    word-break: break-word;
    height: 50px;
    font-size: 18px; }
  #resultsQ #charts-row .chart-container div #percent {
    position: absolute;
    left: 15px;
    top: 75px;
    font-weight: bold; }

#resultsQ #charts-row .chart-container div canvas {
  margin: 0 auto;
  width: 95% !important;
  height: auto !important; }

body {
  padding: 20px; }

#logo {
  display: block;
  margin: 0 auto; }

.admin-bg {
  background-color: #95a3b3; }

.user-bg {
  background-color: #EEEEEE; }

.hidden {
  display: none; }

.transparent {
  opacity: 0; }

h1, h2, h3, h4, h5, a, p {
  font-family: 'Source Sans Pro', sans-serif; }

@media (max-width: 640px) {
  #logo {
    width: 260px; } }

@media (max-width: 420px) {
  #logo {
    width: 220px; } }

.btn.btn-active-q {
  box-sizing: border-box;
  background-color: #eeeeee;
  color: #00bb59;
  border: 1px solid #00bb59; }

.btn.btn-next-q {
  box-sizing: border-box;
  background-color: #eeeeee;
  color: #00bb59;
  border: 1px solid #007fba; }

.pulse {
  animation: pulse 1s infinite;
  animation-duration: 1s;
  animation-play-state: running;
  animation-iteration-count: infinite; }

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1); }
  50% {
    transform: scale3d(1.05, 1.05, 1.05); }
  100% {
    transform: scale3d(1, 1, 1); } }