/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/* Colors */
/* Body */
body {
  background: #fff !important;
}

/* Navbar */
.survey-header {
  background: #1f3a60;
  height: 50px !important;
  -webkit-box-shadow: 0px 2px 25px 0px rgba(31, 58, 96, 0.15);
  -moz-box-shadow: 0px 2px 25px 0px rgba(31, 58, 96, 0.15);
  box-shadow: 0px 2px 25px 0px rgba(31, 58, 96, 0.15);
}

/* progressbar */
.progress {
  border-radius: 0px;
  webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.progress-bar {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.survey-progress {
  position: fixed;
  left: 0;
  top: 50px;
  z-index: 1337;
  width: 100%;
  height: 4px;
  background: rgba(31, 58, 96, 0.15);
  padding: 0;
  margin: 0;
}

.survey-progress-bar {
  background: #ffaa52;
  min-width: 0px;
  max-width: 100%;
  height: 100%;
}

/* Top Navigation Bar */
.navbar.navbar-fixed-top .navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  height: 40px;
  width: auto;
  padding-top: 5px !important;
}

.navbar.navbar-fixed-top .navbar-brand img {
  height: 40px !important;
}

.navbar.navbar-fixed-top {
  color: #fff !important;
}

/* Bottom Navigation Bar */
#navigator-container {
  background: #1f3a60;
  -webkit-transition: -webkit-transform 900ms linear;
  transition: transform 900ms linear;
  border: none;
  box-shadow: 0px -2px 25px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px -2px 25px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0px -2px 25px rgba(0, 0, 0, 0.15);
  z-index: 999999999;
  display: block;
  bottom: 0px;
}

body[first-time-initiated="true"] #navigator-container {
  -webkit-animation: unveil-from-bottom 750ms;
  -moz-animation: unveil-from-bottom 750ms;
  -o-animation: unveil-from-bottom 750ms;
  animation: unveil-from-bottom 750ms;
}

.navbar.navbar-fixed-bottom button.btn {
  border: none;
  border-radius: 0px;
  height: 100%;
  width: 20rem;
  max-width: 48%;
  max-width: calc(50% - 8px);
  box-shadow: none;
  height: 50px;
  text-transform: uppercase;
  font-weight: 600;
  outline: none;
  border-radius: 0px;
  width: 24rem;
}

@media (min-width: 768px) {
  .navbar.navbar-fixed-bottom button.btn {
    width: 24rem;
  }
}

@media (max-width: 768px) {
  .navbar.navbar-fixed-bottom button.btn {
    width: 50px;
  }
  .navbar.navbar-fixed-bottom .nextQuestion span {
    display: none;
  }
  .navbar.navbar-fixed-bottom .submitSurvey span {
    display: none;
  }
  .navbar.navbar-fixed-bottom .previousQuestion span {
    display: none;
  }
}

.navbar.navbar-fixed-bottom .nextQuestion {
  position: relative;
  float: right;
  background: #6ea1d4;
  transition: background-color linear 150ms;
  -moz-transition: background-color linear 150ms;
  -webkit-transition: background-color linear 150ms;
  -o-transition: background-color linear 150ms;
  /*background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMTcxIDk2MHEwIDEzLTEwIDIzbC00NjYgNDY2cS0xMCAxMC0yMyAxMHQtMjMtMTBsLTUwLTUwcS0xMC0xMC0xMC0yM3QxMC0yM2wzOTMtMzkzLTM5My0zOTNxLTEwLTEwLTEwLTIzdDEwLTIzbDUwLTUwcTEwLTEwIDIzLTEwdDIzIDEwbDQ2NiA0NjZxMTAgMTAgMTAgMjN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);*/
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: 90% 9px;
  background-size: 35px;
}

.navbar.navbar-fixed-bottom .nextQuestion::after {
  content: "\f105";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 36px;
  text-rendering: auto;
  position: absolute;
  right: 10px;
  top: 48%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.navbar.navbar-fixed-bottom .submitSurvey {
  position: relative;
  float: right;
  background: #ffaa52;
  transition: background-color linear 150ms;
  -moz-transition: background-color linear 150ms;
  -webkit-transition: background-color linear 150ms;
  -o-transition: background-color linear 150ms;
  /*background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMTcxIDk2MHEwIDEzLTEwIDIzbC00NjYgNDY2cS0xMCAxMC0yMyAxMHQtMjMtMTBsLTUwLTUwcS0xMC0xMC0xMC0yM3QxMC0yM2wzOTMtMzkzLTM5My0zOTNxLTEwLTEwLTEwLTIzdDEwLTIzbDUwLTUwcTEwLTEwIDIzLTEwdDIzIDEwbDQ2NiA0NjZxMTAgMTAgMTAgMjN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);*/
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: 90% 9px;
  background-size: 35px;
}

.navbar.navbar-fixed-bottom .submitSurvey::after {
  content: "\f105";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 36px;
  text-rendering: auto;
  position: absolute;
  right: 10px;
  top: 48%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

@media (max-width: 768px) {
  .navbar.navbar-fixed-bottom .submitSurvey::after {
    content: "\f00c" !important;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 29px !important;
  }
}

.navbar.navbar-fixed-bottom .nextQuestion:hover {
  background-color: #77AEE6;
}

.navbar.navbar-fixed-bottom .submitSurvey:hover {
  background-color: #ffbe79;
}

.navbar.navbar-fixed-bottom .previousQuestion {
  background-color: #1b3354;
  -moz-transition: all linear 150ms;
  -webkit-transition: all linear 150ms;
  -o-transition: all linear 150ms;
  transition: all linear 150ms;
  float: left;
}

.navbar.navbar-fixed-bottom .previousQuestion::after {
  content: "\f104";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 36px;
  text-rendering: auto;
  position: absolute;
  left: 10px;
  top: 48%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

@media (max-width: 768px) {
  .navbar.navbar-fixed-bottom .previousQuestion::after {
    left: 16px !important;
  }
  .navbar.navbar-fixed-bottom .nextQuestion::after {
    right: 16px !important;
  }
}

.navbar.navbar-fixed-bottom .nextQuestion:active {
  background-color: #6ea1d4;
}

.navbar.navbar-fixed-bottom .previousQuestion:active,
.navbar.navbar-fixed-bottom .previousQuestion:hover {
  background-color: #254673;
}

.navbar.navbar-fixed-bottom .nextQuestion.disabled,
.navbar.navbar-fixed-bottom .previousQuestion.disabled {
  background-color: rgba(193, 193, 193, 0.3) !important;
  color: #c1c1c1;
}

.navbar.navbar-fixed-bottom .nextQuestion.inactive:active {
  -webkit-animation: click-color-not-valid 800ms;
  -moz-animation: click-color-not-valid 800ms;
  -o-animation: click-color-not-valid 800ms;
  animation: click-color-not-valid 800ms;
}

/* Content */
.outerframe {
  margin-top: 20px;
  margin-bottom: 50px;
  font-size: 1.2em;
}