body {
  background: #000000;
}
html {
    background: #000000;
}
.fs-form-overview {
    background: #000000;
}

.fs-form-wrap {
    color: #ea1b29;
        color: #ffffff;
}

.fs-form-overview {
     color: #d7f4ec;
}

/*---------- NAV -----------*/
.fs-nav-dots button:hover::before, .fs-nav-dots button.fs-dot-current::before {
    background: #ea1b29;
    border: 1px solid #ed1827;
}

.fs-nav-dots button::after {
    background-color: #F44336;
}

.fs-nav-dots button::before, .fs-nav-dots button::after {
border: 1px dashed #fff;
    background-color: #fff;
}
/*--------------------------------*/
.fs-fields input {
    border-bottom:2px dashed #fff;
}

 .fs-fields input {
    color: #fff;
}
 .fs-fields textarea {
border: 2px solid #ffffff;
    color: #ffffff;
        padding: 14px;
        min-height: 210px;
}

/*---------- Continue Button ----------*/
button.fs-submit, button.fs-continue {
border: 3px solid #ffffff;
    color: #ea1b29;
    background: #ffffff
}

button.fs-submit:hover, button.fs-submit:focus, button.fs-continue:hover {
    background: #fff;
    /* border: 3px dashed #518b0f; */
}

.fs-continue::after {
    color: #ffffff;
}

@media screen and (max-width: 52.5em) {
    button.fs-continue::before {
        color: #000 !important;
    }
}

/*----------------Progress Bar--------------*/
.fs-progress {
    background: #ea1b29;

    border: 1px solid #a50e18;
    border: px solid #fff;
    background: #fff url(../../public-assets/images/progress_bg.png);
/*    padding: 5px;*/
height: 0.85em;
    border-radius: 20px;
}
/*---------------------------------------------*/

 /*-----------Raing----------*/
.rating:not(:hover) label input:checked ~ .icon, .rating:hover label:hover input ~ .icon {
    color: #f57c00;
}

.overview .rating:not(:hover) label input:checked ~ .icon{
    color: #FB8C00;
}

.rating label:last-child .icon {
    color: #6767674a;
}

 /*-------------- placeholder --------*/
.fs-fields input::-webkit-input-placeholder,
.fs-fields textarea::-webkit-input-placeholder {
    color: rgba(0,0,0,0.1);
    color: #67676742;
}

.fs-fields input:-moz-placeholder,
.fs-fields textarea:-moz-placeholder {
    color: rgba(0,0,0,0.1);
    color: #67676742;
}

.fs-fields input::-moz-placeholder,
.fs-fields textarea::-moz-placeholder {
    color: rgba(0,0,0,0.1);
    color: #67676742;
}

.fs-fields input:-ms-input-placeholder,
.fs-fields textarea:-ms-input-placeholder {
    color: rgba(0,0,0,0.1);
    color: #67676742;
}
/*-------------------------------------*/

/*.js .fs-form-full .fs-fields > li.single-q {
        vertical-align: middle;
    }
*/

/*@media screen and (max-width: 52.5em) {
    .js .fs-form-full .fs-fields > li.single-q {
        margin-top: 10%;
    }
}*/



.fs-fields input:focus {
    background-color: #22222261; /* Fixes chrome bug with placeholder */
}

.fs-form-overview .fs-fields input:focus {
    background-color: #37373761; /* Fixes chrome bug with placeholder */
}

.checkmark {
border: 5px solid #ffffff;
    background-color: #2b2b2b;

}


.fs-form-overview .fs-submit {
    color: #ffffff;
    background: #ea1b29;
}
button.fs-submit:hover, button.fs-submit:focus, button.fs-continue:hover {
        color: #fff;
    background: #adadad;
}

.fs-form-overview .fs-fields textarea:focus {
    background: #2c2d2d;
}

.fs-numbers {
    color: rgb(255 255 255 / 74%);
}

.q-group {

    background: red;
}

.q-group {
    font-size: 18px;
    color: #000;
    padding: 5px 14px;
    margin: 0;
    margin-bottom: 10px;
    display: table;
    background: #ffffff;
    clear: both;
    border-radius: 80px;
}

@media screen and (max-width: 52.5em) {
    .q-group {
        font-size: 14px;
    }

    .fs-fields input {
        padding: .56em 0 0.65em;
        font-size: 1.1em;
       
    }
}

.fs-form-overview .q-group {
    display: none;
}

.fs-form-overview .fs-fields input {
    border-bottom-color: transparent;
        color: #2e7d32e6;
}

.fs-form-overview  .fs-fields > li label.fs-field-label {
    color: #ffffff;
}

.fs-form-overview .checkmark {
    border: 5px solid #8b8b8b;
    background-color: #ffffff;
}

.fs-form-overview .fs-fields > li, .no-js .fs-form .fs-fields > li {
   border-bottom: 2px dashed rgb(255 255 255 / 25%);
    /* border-top: 1px solid #000000; */
}

.fs-form-overview .fs-fields textarea {
    height: 120px;
    color: #80ae83;
    border: 1px solid #ffffff;
    background: #2424247d;
}

.fs-form-overview .fs-fields textarea {
        padding: 15px;
    border-color: #ffffffcf;
}

.fs-form-overview .fs-submit {
    color: #ffffff;
    background: #4CAF50;
}

}
.fs-form-overview .fs-submit:hover, .fs-form-overview .fs-submit:focus, .fs-form-overview .fs-continue:hover {
    color: #fff;
    background: #ea1b29;
    border: 2px solid #ea1b29;
}

.fs-form-overview  .fs-submit:hover, .fs-form-overview  .fs-submit:focus, .fs-form-overview .fs-continue:hover {
    color: #fff;
    background: #ea1b29;
}

.fs-fields [required] {
    background-image: url(../../assets/images/asterik.svg);
    background-position: top right;
    background-size: 18px;
    background-repeat: no-repeat;
}
.fs-numbers
 {

    width: 3em;
}
.fs-nav-dots {
    display:   none;
    overflow: hidden;
/*    height: 75%;
    top: 45%;*/
}

$colors: (
  red: #DB2828,
  orange: #F2711C,
  yellow: #FBBD08,
  olive: #B5CC18,
  green: #21BA45,
  teal: #00B5AD,
  blue: #2185D0,
  violet: #6435C9,
  purple: #A333C8,
  pink: #E03997
);

.scale-group input[type="radio"] {
  display: none;
  &:checked + label {
    span { transform: scale(1.25); }
    @each $name, $value in $colors {
      .#{$name} {
        border: 2px solid darken($value, 25%);
      }
    } // !@each
  } // !&:checked + label
}

.scale-group label {
  display: inline-block;

  cursor: pointer;
  &:hover {
    span { 
      transform: scale(1.25); 
    }
  }
  .scale-ss {
   
    transition: transform .2s ease-in-out;
    @each $name, $value in $colors {
      &.#{$name} {
        background: $value;
      }
    }
  }
}

.scale-ss {
font-size: 18px;
    font-weight: 600;
    color: #000;
    background: #ffffff2b;
    display: inline-block;
    cursor: pointer;
    margin: 0px;
    align-items: center;
    vertical-align: middle;
    margin-right: 10px;
    display: block;
    padding: 10px 20px;
    /* width: 75px; */
    /* height: 75px; */
    margin: 0 10px 10px;
    line-height: 25px;
}
.scale-ss:hover {
    background: #558B2F;
    color: #fff;
}

.radio-container input:checked ~ .scale-ss {
       color: #fff;
    background-color: #558B2F;
/*    border: 3px solid #004D40;*/
    -webkit-animation: ripple 0.2s linear forwards;
    animation: ripple 0.2s linear forwards;
}
.scale-group .radio-container{
    padding: 0;
    margin: 0;
}

.fs-nav-dots button {

    margin: 15px 0;
    width: 12px;
    height: 12px;
}
.back-to-web {
border-radius: 40px 0px 0px 40px;
    font-size: 16px;
    color: #fff;
    margin-top: 40px;
    background: #ea1b29;
    padding: 5px 10px;
}
.fs-numbers {
    top: 160px;
}

.fs-progress {
    top: 180px;
}

@media only screen and (max-width: 760px) {
    .fs-numbers {
    top: 125px;
        }


}

 button.fs-prev {
    border: 3px solid #ffffff;
    color: #ea1b29;
    background: #ffffff;
}

button.fs-prev {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0 40px 60px 0;
    font-size: 1.25em;
}

    body {
    background-size: cover !important;
        background: url(../../public-assets/images/bg_desktop.jpg) center center no-repeat;
        vertical-align: middle;
    } 

@media only screen and (max-width: 760px) {
    body {
    background-size: cover !important;
        background: url(../../public-assets/images/bg.jpg) center center no-repeat;
        vertical-align: middle;
    } 
}
  


.fs-fields input {
    background-color: #00000091;
}

button.fs-prev {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0 0px 60px 40px;
    font-size: 1.25em;
}
button.fs-prev {
    padding: 13px 15px;
    /* border: 3px solid #004d40; */
    border-radius: 40px;
    font-weight: 700;
    /* color: rgba(0, 0, 0, 0.4); */
}


@media screen and (max-width: 52.5em) {
    .fs-form {
          padding: 0px 1em 0px 1em;
    }
}

@media screen and (max-width: 52.5em) {
    button.fs-prev::before {
        font-family: inherit !important;
        font-weight: 600;
        /* content: "\f178"; */
        content: "Prev" !important;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        /* content: '\27A1'; */
        text-align: center;
        font-size: .85em;
        line-height: 60px;
        color: #000000 !important;
        background: transparent !important;
    }
}

@media screen and (max-width: 52.5em) {
    button.fs-prev {
        left: 10px;
        bottom: 20px;
        margin: 0;
        padding: 60px 0 0 60px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        font-size: 2em;
        content:"Prev";
    }

    .prev-step { display:none; }
}

@media screen and (max-width: 52.5em) {
    .fs-message-error {
        bottom: 1.75em;
        left: 13%;
        padding: 0 90px 0 2em;
        width: 100%;
        margin: 0 auto;
        font-size: 1.5em;
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
}

@media screen and (max-width: 52.5em) {
    .fs-form {
        font-size: 1.85em;
    }
}

.fs-prev::after {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    line-height: 1.3;
    text-align: center;
    background: transparent;
    color: rgba(0, 0, 0, 0.3);
    content: 'or press LEFT ARROW';
    font-size: 0.65em;
    pointer-events: none;
    margin-top:  10px;
}

.fs-prev::after {
    color: #ffffff;
}

@media screen and (max-width: 52.5em) {
    .prev-step {
        display: none;
    }

    .fs-prev::after {
        content: '';
    }
}