/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2020.01.10., 18:27:21
    Author     : Kulcsár Balázs <kulcsar.balazs69@gmail.com>
*/

/*** Overrides ***/

#optin .custom-control-inline {
    margin-right: auto;
    min-height: 1.2rem;
    /*padding-left: 1rem;*/
}
#optin .custom-checkbox .custom-control-label {
    cursor: pointer;
}
#optin .custom-checkbox .custom-control-label::before {
    border-radius: 0rem;
    border-width: 2px;
}
#optin .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
    border-color: #adb5bd;
    background-color: inherit;
}
#optin {
    font-size: 1.2rem;
}
#optin .questions span.blue-text {
    font-weight: 400;
    font-size: 1.4rem;
}
#optin .answer label {
    display: block;
}

#optin hr {
    border-top: 2px solid rgb(222,222,222);
    margin-top: 0rem;
    margin-bottom: 0rem;
}
#optin h2.test-title + hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
#optin .question,
#optin .answer {
    position: relative;
    min-height: 100px;
    display: flex;
    align-items: center;
}
#optin .question::after {
    content: '';
    height: 70px;
    position: absolute;
    top: 15px;
    right: -16px;
    border-right: 2px solid rgb(222,222,222);
}
#optin .questions:last-child hr {
    display: none;
}

/*** Sliding ***/
#optin .wizard .hide {
    display: none;
}
#optin .wizard [class*="stage_"] {
    position: absolute;
    width: 100%;
}

/*** Progress ***/
#optin .timeline {
  display: flex;
  justify-content: center;
  margin: 0px calc(100% / -3 / 2 + 30px) 1.5rem;
}
#optin .timeline .step {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  min-width: calc(100% / 9);
  padding: 0px 0;
}
@media (max-width: 1250px) {
  #optin .timeline .step {
    min-width: 0;
  }
}
@media (max-width: 991px) {
  #optin .timeline .step {
    padding: 0;
  }
}
#optin .timeline .step .circle-wrapper {
  /*position: relative;*/
  background: #008ddf;
  color: inherit;
  padding: 4px;
  border-radius: 50%;
}
#optin .timeline .step:not(:first-child) .circle-wrapper::before {
  content: "";
  width: 100%;
  height: 4px;
  background: #008ddf;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 0;
}
#optin .timeline .step .circle {
  border-radius: 50%;
  background: #fff;
  height: 30px;
  width: 30px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#optin .timeline .step.active .circle {
  color: #fff;
}
#optin .timeline .step .text {
  margin-top: 15px;
  font-weight: 500;
  text-align: center;
  color: #d6d6d6;
  font-size: 14px;
  position: absolute;
  bottom: 0;
  width: 200%;
  min-height: 2.625rem;
  align-items: center;
  display: flex;
  justify-content: center;
}
@media (max-width: 991px) {
  #optin .timeline .step .text {
    position: relative;
    width: 100%;
  }
}
@media (min-width: 991px) {
  #optin .timeline .step:nth-child(2n) .text {
    bottom: auto;
    top: -10%;
  }
}
#optin .timeline .step.ready .circle-wrapper::before {
  background: #008ddf;
}
#optin .timeline .step.ready .circle {
  background: rgb(235,235,235);
}
#optin .timeline .step.active .circle {
  background: #008ddf;
}
#optin .timeline .step.ready .text {
  color: #008ddf;
}
#optin .timeline .step.ready .circle-wrapper::before {
  background: #008ddf;
}
#optin .timeline .step.danger .circle {
  background: #f26522;
}
#optin .timeline .step.danger .text {
  color: #f26522;
}
@media (max-width: 991px) {
  #optin .timeline {
    display: block;
  }
  #optin .timeline .step .circle {
    width: 40px;
    height: 40px;
  }
  #optin .timeline .step .text {
    margin-bottom: 15px;
  }
  #optin .timeline .step .circle-wrapper::before {
    display: none !important;
  }
}
#optin .wizard.mobile {
    padding-bottom: 50px;
}
#optin .wizard.mobile .radio input[type=radio] {
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

#optin .wizard.mobile .stage_last.active {
    position: relative;
}

#optin .wizard.mobile .stage_last small {
    line-height: 1rem;
}

@media(max-width:768px) {
    #optin .progress {
        margin: 30px 30px 30px;
    }
    #optin .progress-bar {
        -webkit-transition: all 400ms;
        -o-transition: all 400ms;
        transition: all 400ms;
        background-color: rgb(71,162,241);
    }
    #optin .wizard fieldset {
        padding: 0 0px;
    }
    #optin .wizard .mobile-questions {
        padding: 0 20px;
        min-height: 320px;
    }
    #optin .mobile-questions .qst > span {
        display: block;
        margin-bottom: 2rem;
        font-size: 1.4rem;
        line-height: 1.6rem;
    }
    #optin .mobile-questions .qst {
        position: absolute;
        width: 100%;
        left: 0;
        /*padding: 0 20px;*/
        font-size: 1.8rem;
    }
    #optin .grp {
        /*max-width: 600px;*/
        margin: 0 auto 0px;
    }
    #optin .grp > div > span {
        max-width: calc(100% - 120px);
        display: inline-block;
    }
    #optin .group_x {
        display: none;
    }
    #optin .group_x .radio {
        min-width: 55px;
    }
    #optin .radio {
        padding-left: 10px;
        padding-right: 10px;
        display: inline-block;
        float: none;
        margin: 0px !important;
    }
    #optin .radio label {
        position: relative;
        min-height: 20px;
        padding-left: 0;
        margin-bottom: 5px;
        font-weight: 300;
        line-height: 20px;
        cursor: pointer;
        vertical-align: middle;
    }
    #optin .radio label span{
        left: 0px;
    }
    #optin .radio label .circle {
        border: 2px solid #999;
        height: 60px;
        width: 60px;
        /*border-radius: 100%;*/
        font-size: 55px;
        line-height: 51px;
        text-align: center;
        background-color: #efefef;
        display: block;
    }
    #optin .circle .fa {
        margin: auto auto auto 1px;
    }
    #optin .circle .fa-check {
        /*margin-top: 4px;*/
        color: green;
        /*color: rgb(71,162,241);*/
    }
    #optin .circle .fa-times {
        color: red;
        /*color: rgb(71,162,241);*/
    }
    #optin .radio label .check {
        height: 40px;
        width: 40px;
    }
    #optin .radio input[type="radio"]:checked ~ .check {
        -webkit-transform: scale3d(0.15, 0.15, 1);
        transform: scale3d(0.15, 0.15, 1);
    }
    #optin .wizard h2.text-center {
        width: 100%;
        margin: 0px auto 1rem;
    }
    #optin .wizard .form-group label {
        display: inline-block;
        max-width: 100%;
        width: 100%;
        text-align: center;
        height: auto;
        line-height: 1.4rem;
        padding: 0px;
        margin-top: 7px;
    }
    #optin .wizard .form-group {
        padding-right: 0;
        margin-bottom: 0px;
    }
    #optin .wizard .form-group .form-control {
        display: inline-block;
        max-width: 350px;
        width: 100%;
        float: none;
    }
    #optin .wizard .form-group .form-control:focus {
        background: transparent;
        padding: 6px 12px;
        border: 1px solid #66afe9;
        border-radius: 4px;
    }
    #optin .btn:not(.btn-link):not(.btn-flat), .btn-default:not(.btn-link):not(.btn-flat), .sf-btn.sf-btn-finish {
        height: 40px;
        line-height: 40px;
        padding: 0 40px;
        border: 1px solid #c1c1c1;
        color: #929292;
        text-decoration: none;
        background: #FFF;
        background: #319DB5;
        color: #FFF;
        border-color: #319DB5;
        display: block;
        float: none;
        margin: auto !important;
    }
    #optin .sf-btn.sf-btn-finish:hover {
        background: #FFF;
        color: #319DB5;
        border-color: #319DB5;
    }
    #optin ul.parsley-errors-list {
        list-style-type: none;
        font-size: 0.7em;
        line-height: 0.7em;
        color: #AA0000;
        list-style-image: none;
        padding-left: 22px;
        font-weight: 400;
        text-align: right;
        margin-top: 0px;
        height: 30px;
    }
    #optin ul.parsley-errors-list li {
        text-align: center;
    }

}