@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,600;0,700;0,900;1,100;1,300;1,400;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --nps-color: #fff;
  --nps-color-active: #fff;
  --csat-star-color: #ffc400;
  --csat-smiley-color: #4011c4;
  --placeholder-color: rgba(0,0,0,0.2);
}

textarea {
  resize: none;
  height: 140px;
}

#iframe-rating-area{
  min-width: 450px;
}

#rating-area {
  padding: 2.5em 0;
}

#rating-title,
#rating-description {
  padding: 0 2.5em;
}

.rating-sticky {
  position: sticky;
  top: 48px;
}

#rating-description p,
#rating-description h6,
#rating-description h5 {
  font-weight: normal;
}
#rating-description h6 { font-size: 1.1em; }
#rating-description h5 { font-size: 1.25em; }

#rating-form {
  text-align: center;
  margin-top: 2em;
}

#rating-form.input-text input,
#rating-form.input-text textarea {
  border: 1px solid rgba(0,0,0,0.2);
  outline: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.5);
  padding: 8px 16px;
  font-size: 1.25em;
  color: #000;
  font-weight: normal;
  min-width: 50%;
}

#rating-form.input-text input:-ms-input-placeholder,
#rating-form.input-text textarea:-ms-input-placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}

#rating-form.input-text input::-ms-input-placeholder,
#rating-form.input-text textarea::-ms-input-placeholder {
  color: var(--placeholder-color);
}

#rating-form.input-text input:-moz-placeholder,
#rating-form.input-text textarea:-moz-placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}

#rating-form.input-text input::-moz-placeholder,
#rating-form.input-text textarea::-moz-placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}

#rating-form.input-text input::-webkit-input-placeholder,
#rating-form.input-text textarea::-webkit-input-placeholder {
  color: var(--placeholder-color);
}

#rating-form.input-text input::placeholder,
#rating-form.input-text textarea::placeholder {
  color: var(--placeholder-color);
}

#rating-form.input-text textarea.sm {
  height: 100px;  
}

#rating-form.input-text textarea.lg {
  height: 240px;  
}

#rating-form.input-radio,
#rating-form.input-check,
#rating-form.order-group {
  display: flex;
  justify-content: center;
  font-size: 1.25em;
  line-height: 1.5em;
  font-weight: 500;
}

#rating-form.input-radio-matrix {
  font-size: 1.25em;
  line-height: 1.5em;
  font-weight: 500;
}

#rating-form.input-radio input,
#rating-form.input-check input {
  margin-right: 6px;
}

#rating-form.input-radio label,
#rating-form.input-check label {
  margin-bottom: 0;
}

#rating-form.input-radio label:hover,
#rating-form.input-check label:hover {
  cursor: pointer;
}

#rating-form.input-radio ul,
#rating-form.input-radio li,
#rating-form.input-check ul,
#rating-form.input-check li {
  list-style: none;
}

#rating-form.input-radio ul,
#rating-form.input-radio li,
#rating-form.input-check ul,
#rating-form.input-check li,
#rating-form.order-group ol,
#rating-form.order-group li  {
  padding: 0;
  margin: 0;
  text-align: left;
}

#rating-form.input-radio li,
#rating-form.input-check li,
#rating-form.order-group li  {
  padding-bottom: 18px;
}

#rating-form.input-radio li .description,
#rating-form.input-check li .description,
#rating-form.order-group li .description  {
  display: block;
  margin-top: -3px;
  font-weight: 300;
  font-size: 0.85em;
  margin-left: 24px;
}

#rating-form.order-group li::marker {
  font-weight: bold;
}

#rating-form.order-group li {
  position: relative;
  list-style-position: inside;
  padding-left: 6px;
  border: 1px solid rgba(0,0,0,0.2);
  border-bottom: 0;
  padding: 8px 36px 8px 16px;
}

#rating-form.order-group li::after {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  content: '::';
  opacity: 0.25;
  width: 20px;
}

#rating-form.order-group li:first-of-type {
  border-top: 1px solid rgba(0,0,0,0.2);
  border-radius: 9px 9px 0 0;
}

#rating-form.order-group li:last-of-type {
  border-bottom: 1px solid rgba(0,0,0,0.2);
  border-radius: 0 0 9px 9px;
}

#rating-form.order-group li:hover {
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
}

#rating-form.order-group li.dragging,
#rating-form.order-group li.dragging:hover {
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: grabbing;
  opacity: 0.6;
}

#rating-form.input-radio-matrix table {
  width: calc(100% - 4em);
  margin: 0 auto;
}

#rating-form.input-radio-matrix thead th {
  font-size: 0.6em;
  font-weight: normal;
}

#rating-form.input-radio-matrix tbody tr td .description  {
  display: block;
  margin-top: -3px;
  font-weight: 300;
  font-size: 0.85em;
}

#rating-form.input-radio-matrix tbody tr:nth-child(odd) td {
  background-color: rgba(0,0,0,0.05);
}

#rating-form.input-radio-matrix tbody tr td:first-of-type {
  text-align: left;
  font-size: 0.875em;
  padding: 8px 0 8px 16px;
}

#rating-form.input-radio-matrix tbody tr td:not(:first-of-type) label {
  display: block;
}

#rating-form.input-radio-matrix tbody tr td:not(:first-of-type) label:hover {
  cursor: pointer;
}






/* Fonts */
.ff-viga {
  font-family: 'Viga', sans-serif !important;
  font-weight: normal;
}
.ff-montserrat {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400;
}
.ff-raleway {
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
}

.rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.rating input[type=radio] {
  display: none;
}

.rating .icon {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  font-size: 28px;
}

.rating label {
  color: #ddd;
  position: relative;
}

.rating label ~ label {
  margin-right: 0.25em;
}

.rating .icon {
  transition: color 0.5s ease-out, font-size 0.5s ease-out;
}

.rating.xxs .icon {
  /* font-size: 0.625em;
  line-height: 0.1em;
  vertical-align: 0.225em; */
  font-size: 1em;
}

.rating.xs .icon {
  /* font-size: 0.75em;
  line-height: 0.08333em;
  vertical-align: 0.125em; */
  font-size: 1.3em;
}

.rating.sm .icon {
  /* font-size: 0.875em;
  line-height: 0.07143em;
  vertical-align: 0.05357em; */
  font-size: 1.5em;
}

.rating.lg .icon {
  /* font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em; */
  font-size: 2.25em;
}

.rating.xl .icon {
  /* font-size: 1.5em;
  line-height: 0.04167em;
  vertical-align: -0.125em; */
  font-size: 2.75em;
}

.rating.xxl .icon {
  /* font-size: 2em;
  line-height: 0.03125em;
  vertical-align: -0.1875em; */
  font-size: 3.25em;
}

.rating label:hover {
  cursor: pointer;
}

.rating .icon,
.rating.faces .icon,
.rating.stars .icon {
  font-family: 'Font Awesome 6 Free';
}


/* CSAT Stars */
.rating.stars label,
.rating.faces label {
  transition: transform 0.5s ease-out;
}

.rating.stars label {
  color: #ddd;
}

.rating.stars input:checked ~ label,
.rating.stars label:hover,
.rating.stars label:hover ~ label {
  /* color: #ffc400; */
  color: var(--csat-star-color);
}

.rating.stars label:hover {
  transform: scale(1.1, 1.1) !important;
}

.rating.stars .icon::before { content: "\f005"; }

/* CSAT Faces */
.rating.faces label {
  color: #ddd;
}

.rating.faces input:checked + label {
  /* color: #4011c4; */
  color: var(--csat-smiley-color);
}

.rating.faces label:hover {
  /* color: #5008a1; */
  color: var(--csat-smiley-color);
  transform: scale(1.1, 1.1) !important;
}

.rating.faces .icon::before { content: "\f118"; }
.rating.faces label:nth-of-type(1) .icon::before { content: "\f580"; }
.rating.faces label:nth-of-type(2) .icon::before { content: "\f118"; }
.rating.faces label:nth-of-type(3) .icon::before { content: "\f11a"; }
.rating.faces label:nth-of-type(4) .icon::before { content: "\f119"; }
.rating.faces label:nth-of-type(5) .icon::before { content: "\f5b4"; }

/* NPS */
.rating.nps label {
  background-color: #ddd;
  color: var(--nps-color);
  display: inline-block;
  /* overflow: hidden; */
  line-height: 2em;
  min-width: 2.5em;
  padding: 6px 12px;
  text-align: center;
  font-weight: 700;
  font-size: 1em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.5s ease-out;
}

.rating.nps label:not(:first-of-type) {
  border-right: 0;
}

.rating.nps label ~ label {
  margin-right: 0;
}

.rating.nps label:first-of-type { border-radius: 0 9px 9px 0; }
.rating.nps label:last-of-type { border-radius: 9px 0 0 9px; }


/* .rating.nps input:nth-of-type(1):checked ~ input + label, */
.rating.nps label:hover{
  transform: scale(1.05, 1.05) !important;
}

.rating.nps.colored input:nth-of-type(1):not(:checked) + label,
.rating.nps input:nth-of-type(1):checked + label,
.rating.nps label:hover ~ label:nth-of-type(1),
.rating.nps label:nth-of-type(1):hover { background-color: #4da84e; }

.rating.nps.colored input:nth-of-type(2):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(2) + label,
.rating.nps input:nth-of-type(2):checked + label,
.rating.nps label:hover ~ label:nth-of-type(2),
.rating.nps label:nth-of-type(2):hover { background-color: #9cbd32; }

.rating.nps.colored input:nth-of-type(3):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(3) + label,
.rating.nps input:nth-of-type(3):checked + label,
.rating.nps label:hover ~ label:nth-of-type(3),
.rating.nps label:nth-of-type(3):hover { background-color: #b4c723; }

.rating.nps.colored input:nth-of-type(4):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(4) + label,
.rating.nps input:nth-of-type(4):checked + label,
.rating.nps label:hover ~ label:nth-of-type(4),
.rating.nps label:nth-of-type(4):hover { background-color: #e1d93a; }

.rating.nps.colored input:nth-of-type(5):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(5) + label,
.rating.nps input:nth-of-type(5):checked + label,
.rating.nps label:hover ~ label:nth-of-type(5),
.rating.nps label:nth-of-type(5):hover { background-color: #edd200; }

.rating.nps.colored input:nth-of-type(6):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(6) + label,
.rating.nps input:nth-of-type(6):checked + label,
.rating.nps label:hover ~ label:nth-of-type(6),
.rating.nps label:nth-of-type(6):hover { background-color: #ffbb05; }

.rating.nps.colored input:nth-of-type(7):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(7) + label,
.rating.nps input:nth-of-type(7):checked + label,
.rating.nps label:hover ~ label:nth-of-type(7),
.rating.nps label:nth-of-type(7):hover { background-color: #ff9d10; }

.rating.nps.colored input:nth-of-type(8):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(8) + label,
.rating.nps input:nth-of-type(8):checked + label,
.rating.nps label:hover ~ label:nth-of-type(8),
.rating.nps label:nth-of-type(8):hover { background-color: #ff7418; }

.rating.nps.colored input:nth-of-type(9):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(9) + label,
.rating.nps input:nth-of-type(9):checked + label,
.rating.nps label:hover ~ label:nth-of-type(9),
.rating.nps label:nth-of-type(9):hover { background-color: #ff5c1e; }

.rating.nps.colored input:nth-of-type(10):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(10) + label,
.rating.nps input:nth-of-type(10):checked + label,
.rating.nps label:hover ~ label:nth-of-type(10),
.rating.nps label:nth-of-type(10):hover { background-color: #ec2129; }

.rating.nps.colored input:nth-of-type(11):not(:checked) + label,
.rating.nps input:checked ~ input:nth-of-type(11) + label,
.rating.nps input:nth-of-type(11):checked + label,
.rating.nps label:hover ~ label:nth-of-type(11),
.rating.nps label:nth-of-type(11):hover { background-color: #ca2324; }

.rating.nps input:checked + label {
  transform: scale(1.1, 1.1);
  border: 3px solid rgba(0, 0, 0, 0.1);
}

.rating.nps.circle label {
  border-radius: 50%;
  min-width: 2.75em;
  height: 2.75em;
}

.rating.nps.circle label ~ label {
  margin-right: 0.25em;
}

.rating.nps.square label {
  border-radius: 3px;
  min-width: 2.75em;
  height: 2.75em;
}

.rating.nps.square label ~ label {
  margin-right: 0.25em;
}

.rating.nps label:first-of-type > .label-caption  {
  display: block;
  position: absolute;
  color: #000;
  top: 100%;
  right: 0;
  text-align: right;
  white-space: nowrap;
  font-size: 0.75em;
  font-weight: normal;
  text-shadow: none;
}

.rating.nps label:last-of-type > .label-caption {
  display: block;
  position: absolute;
  color: #000;
  top: 100%;
  left: 0;
  text-align: left;
  white-space: nowrap;
  font-size: 0.75em;
  font-weight: normal;
  text-shadow: none;
}

.accordion-results {
  overflow: auto;
  max-height:580px;
}

@media (min-width: 768px) {
  .accordion-results {
    max-height: none;
  }
}

#buttonMenu {
  display:flex;
  justify-content: center;
  gap:8px;
}