/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/*! locomotive-scroll v4.1.1 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
/*html.has-scroll-smooth{overflow:hidden}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.has-scroll-smooth body{overflow:hidden}.has-scroll-smooth [data-scroll-container]{min-height:100vh}[data-scroll-direction=horizontal] [data-scroll-container]{height:100vh;display:inline-block;white-space:nowrap}[data-scroll-direction=horizontal] [data-scroll-section]{display:inline-block;vertical-align:top;white-space:nowrap;height:100%}.c-scrollbar{position:absolute;right:0;top:0;width:11px;height:100%;transform-origin:center right;transition:transform .3s,opacity .3s;opacity:0}.c-scrollbar:hover{transform:scaleX(1.45)}.c-scrollbar:hover,.has-scroll-dragging .c-scrollbar,.has-scroll-scrolling .c-scrollbar{opacity:1}[data-scroll-direction=horizontal] .c-scrollbar{width:100%;height:10px;top:auto;bottom:0;transform:scaleY(1)}[data-scroll-direction=horizontal] .c-scrollbar:hover{transform:scaleY(1.3)}.c-scrollbar_thumb{position:absolute;top:0;right:0;background-color:#000;opacity:.5;width:7px;border-radius:10px;margin:2px;cursor:-webkit-grab;cursor:grab}.has-scroll-dragging .c-scrollbar_thumb{cursor:-webkit-grabbing;cursor:grabbing}[data-scroll-direction=horizontal] .c-scrollbar_thumb{right:auto;bottom:0}*/

/* Fixes the draggable scroll issue.....  */
:root {
    scroll-behavior: auto !important;
}

.post-type-archive-ta_surveys footer {
  margin: 100px;
}

.post-type-archive-ta_surveys {
  background-color: rgb(35, 39, 42);
}

.ta-survey {
  background: linear-gradient(90deg, rgba(0,96,171,0.1) 0%, rgba(0,96,171,0.25) 100%);
}

/* Bootstrap code  */

.ta-survey .btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.ta-survey .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left: calc(var(--bs-gutter-x) / -2);
}

.ta-survey .row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

.ta-survey .col {
  flex: 1 0 0%;
}

.ta-survey .col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* Custom code */

.ta-survey .container {
  max-width: 490px;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 0px;
  padding-right: 0px;
}

.ta-survey h2 {
  text-align: center;
  font-family: 'FFDINStdCondensedBold' !important;
  font-size: 31px;
}

.ta-survey h4 {
  text-align: center;
  margin-bottom: 25px;
  font-weight: normal;
}

.ta-survey .buttons {
  margin-top: 25px;
}

.ta-survey form {
  background: #FFFFFF;
  padding: 40px;
  border-radius: 7px;
  margin-top: 30px;
}

/*.ta-survey form .question.hidden {
  display: none;
}*/

/* START Question Slide */

.ta-survey form {
  position: relative;
  overflow: hidden;
  width: 100%;  /* Set the width as per your design */
  min-height: 500px;
  transition: height 0.5s ease-in-out;
}

.ta-survey form .question {
  position: absolute;
  top: 0;
  left: 0;  /* Start off the screen */
  width: 100%; 
  transition: transform 0.5s cubic-bezier(0.81, 0, 0.175, 1);
  transform: translateX(100%);
  visibility: hidden;
  padding: 25px;
  height: 100%;
  z-index: 1;
}

.ta-survey form > .current {
  transform: translateX(0);
  visibility: visible;
  z-index: 3;
}

.ta-survey form > .previous {
  transform: translateX(-100%);
  visibility: visible;
  z-index: 2;
}

.ta-survey form > .next {
  transform: translateX(100%);
  visibility: visible;
  z-index: 2;  /* Medium z-index for the next slide */
}

.ta-survey .buttons {
  margin-top: 25px;
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
}

.ta-survey .d-none {
  display: none;
}

/* END Question Slide */

.ta-survey form .question .error {
  text-align: center;
  color: rgb(197, 28, 28);
}

.ta-survey form .question .error.hidden {
  display: none;
}

.ta-survey form .question .options .option label,
.ta-survey form .question .options-multiple .option label {
  width: 80%;
  margin: auto;
  display: block;
  margin-bottom: 10px;
  line-height: 2;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 3px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1.25rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background: #1D3C77 !important;
}

.ta-survey form .question .options.yesno .option {
  display: inline-block;
  width: 50%;
}

.ta-survey form .question .options .option label.label-no {
  background: rgba(60, 161, 213, 0.75) !important;
}

.ta-survey form .question .options .option label.label-0 {
  background: rgba(60, 161, 213, 0.75);
}

.ta-survey form .question .options .option label.label-1 {
  background: rgba(60, 161, 213, 1);
}

.ta-survey form .question .options .option label.label-2 {
  background: rgba(0, 96, 171, 0.75);
}

.ta-survey form .question .options .option label.label-3 {
  background: rgba(0, 96, 171, 1);
}

.ta-survey form .question .options .option label.label-4 {
  background: rgba(29, 60, 119, 1);
}

.ta-survey form .question .options .option input:checked + label,
.ta-survey form .question .options-multiple .option input:checked + label
 {
  color: #1D3C77;
  border: 3px solid #1D3C77;
  background: #fdef3b !important;
}

.ta-survey form .question .extra-group {
  width: 90%;
  margin: 15px auto 0px;
}

.ta-survey form .question textarea {
  width: 100%;
}

.ta-survey .buttons .btn {
  position: relative;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  font-family: 'FFDINStdCondensedBold' !important;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  border-width: 0px;
  color: rgb(255,255,255);
  padding: 7px 50px 4px 18px;
  text-shadow: none;
  width: auto;
  font-size: 1.25rem;
  line-height: 1.5em;
}

.ta-survey .buttons .btn:after {
  content: " ";
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHlJREFUeNpi/P//PwNtABMDzcCo0aNGU2r05Gnz1m3YTo7Z/4kAZVWta9dv+08iYCBSHRmmMxCvlFTTGUhyCEmmM5AagsSbTrLRxJtOw3Q9aAKEVtFIq8RHqyxDXkZnJFjtAosnaSnJoABPUhMI42iNPmr0MDQaIMAAnSfPVYg/29kAAAAASUVORK5CYII=);
  background-size: cover;
  background-position: center;
  width: 24px;
  height: 24px;
  display: block;
  position: absolute;
}

.ta-survey .buttons .btn.previous {
  background: rgb(60, 161, 213);
  padding: 4px 18px 7px 50px;
}

.ta-survey .buttons .btn.next,
.ta-survey .buttons .btn.submit {
  background: rgb(29, 60, 119);
}

.ta-survey .buttons .btn.previous:after {
  top: 8px;
  left: 10px;
  transform: rotateZ(180deg);
}

.ta-survey .buttons .btn.next:after,
.ta-survey .buttons .btn.submit:after {
  top: 8px;
  right: 10px;
}

.ta-survey .logo {
  max-width: 150px;
  margin: 40px auto;
  display: block;
}