.offer-form * { box-sizing: border-box; }

.offer-form .pull-left { float: left; }
.offer-form .pull-right { float: right; }

.offer-form .b-column { padding: 0.40rem; }
.offer-form .b-columns { margin-left: -0.40rem; margin-right: -0.40rem; margin-top: -0.40rem; }


.offer-form a { color: #0095D0; }
.offer-form a:hover { text-decoration: underline; }

.offer-form .steps { position: relative; display: flex; justify-content: space-around; border-top: 1px dashed #dbdbdb; border-bottom: 1px solid #ddd; padding-bottom: 25px; margin: 30px 0 35px 0; }
.offer-form .steps .step { display: flex; margin-top: -47px; width: 172px; cursor: pointer; flex-direction: column; align-items: center; position: relative; }

.offer-form .steps .step .number { display: flex; align-items: center; justify-content: center; background: #fff; font-weight: 800; font-size: 36px; color: #fff; border-radius: 50px; width: 80px; height: 80px; text-align: center; }
.offer-form .steps .step .number .blue { line-height: 60px; justify-content: center; background: #B7B7B7; border-radius: 50px; width: 60px; height: 60px; }
.offer-form .steps .step .text { margin-top: 0; color: #B7B7B7; text-align: center; font-size: 17px; }

.offer-form .steps .step.active .number .blue,
.offer-form .steps .step.done .number .blue { background: #0095D0; font-weight: bold; }
.offer-form .steps .step.active .text { color: #0095d0; }

.offer-form__buttons { display: block; overflow: hidden; text-align: center; padding: 15px 0 0 0; }
.offer-form__buttons button { padding: 15px 36px !important; font-size: 18px !important; border-radius: 0; }
.offer-form__buttons button.back { background: #999; }

.offer-form__help { margin: 50px 0 0 0; text-align: right; background: #eee; padding: 20px 40px !important; font-size: 18px; line-height: 25px; }
.offer-form__help span { color: #333; display: inline-block; padding: 2px 10px; font-weight: 600; background: #FFC12E; font-size: 1.4em; }

.offer-form .distance-meters { font-size: 14px; padding-top: 15px; }

.new-form17 { position: relative; }
.new-form17 * { box-sizing: border-box; }
.new-form17 button, .new-form17 input[type=submit] { border-radius: 0; transition: all 0.2s; background: #0097CE; padding: 10px 24px; color: #fff; border: 0; font-size: 14px; font-weight: 800; }
.new-form17 button:not([class*='ql-']):hover { background: #016dab; border-color: #016dab; }
.new-form17 button.delete { background: #ee0000; border-color: #ee0000; }
.new-form17 button.delete:hover { background: #bb0000; border-color: #bb0000; }
.new-form17.loading button { background: #999; }

.new-form17 h2 { color: #09c; font-size: 20px; margin: 40px 0 10px 0; }
.new-form17 h3 { color: #000; font-size: 14px; margin: 10px 0 10px 0; }

.new-form17 label { margin: 5px 0; display: inline-block; font-weight: 500; }
.new-form17 label span { font-weight: 400; }
.new-form17 label.inline { margin: 0; display: inline-block; }

.new-form17 input[type=text],
.new-form17 input[type=password],
.new-form17 input[type=number],
/*.new-form17 select, */
.new-form17 textarea { width: 100%; border: 1px solid #ddd; color: #666; padding: 8px 8px; font-size: 14px; }
/*.new-form17 select[multiple] option[selected] { background: #ddd; }*/
.new-form17 .select-wrapper { position: relative; }
.new-form17 .select-wrapper select { width: 100%; background: #fff; border-radius: 0; border: 1px solid #ccc; color: #666; padding: 8px 8px; font-size: 14px; -webkit-appearance: none; }
.new-form17 .select-wrapper:after { content: " "; position: absolute; right: 1px; top: 1px; pointer-events: none; width: 30px; height: calc(100% - 1px); background: #ccc; }
.new-form17 .select-wrapper:before { z-index: 1; content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #888; position: absolute; right: 10px; top: 14px; pointer-events: none; }
.new-form17 .select-wrapper .select2-selection--multiple { border-radius: 0; font-size: 13px; border: 1px solid #ddd; min-height: 34px; }
.new-form17 .select-wrapper .select2-selection__choice { border-radius: 0; margin-top: 6px; padding: 2px 5px; background: #ddd; border: 1px solid #ccc; }
.new-form17 .select-wrapper .select2-search__field { font-size: 14px; margin-top: 7px; }
.select2-results__option { font-weight: 400; }
.new-form17 input.error, .new-form17 textarea.error { border: 1px solid #ff3333; }

.new-form17 .number-wrapper {
    display: flex;
}

.new-form17 .number-wrapper .control {
    background: #ddd;
    width: 30px;
    font-size: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-weight: 800;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.new-form17 .number-wrapper .control-plus {
}

.new-form17 .number-wrapper .control-minus {
}

.new-form17 .number-wrapper input[type=number] {
    display: inline-block;
    width: 45px;
    font-size: 14px;
    text-align: center;
}
.new-form17 .number-wrapper input[type=number]::-webkit-outer-spin-button,
.new-form17 .number-wrapper input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.new-form17 .number-wrapper input[type=number] {
    -moz-appearance: textfield !important;
    margin: 0;
}

.new-form17 ::placeholder { color: #ccc; }

.new-form17 div.error, .new-form17 div.input-error { color: #ff3333; font-weight: 600; margin: 3px 0 0 0; }

.new-form17__alert { background: #FFB327; color: #fff; font-weight: 400; margin: 0 0 10px 0; padding: 10px; font-size: 12px; }
.new-form17__info { background: #0090cc; color: #fff; font-weight: 400; margin: 0 0 10px 0; padding: 10px; font-size: 12px; }

#offer-form .auth-panel {
    font-size: 1.2em;
}

#offer-form .fb-login {
    cursor: pointer;
}

.statements-popup {
    position: relative;
    background: #048fcd;
    color: #fff;
    padding: 15px;
    box-shadow: 1px 1px 3px #666;
    width: 330px;
    font-size: 12px;
    font-weight: 500;
    /*margin-top: 30px;*/
}
.statements-popup > p {
    margin: 10px 0;
    display: flex;
    padding: 0 5px;
}

.statements-popup > p > * {
    margin: 0 5px;
}

.statements-popup:after {
    bottom: 100%;
    left: 14%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(4, 143, 205, 0);
    border-bottom-color: #048fcd;
    border-width: 26px;
    margin-left: -26px;
}

.payment-methods { font-size: 16px; color: #555; margin-top: 25px; }
.payment-methods > .title { font-size: 20px; font-weight: bold; text-align: center;  }
.payment-methods .method { }
.payment-methods .method > .title { color: #09c; margin-top: 0; font-size: 20px; font-weight: bold; }
.payment-methods p { margin: 20px 0; }
.payment-methods > .footer-info { text-align: center; font-size: 18px;  }


.offer-packet-choose { margin-top: 40px; }
.offer-packet-choose b { font-weight: 600; }
.offer-packet-choose table { width: 100%; border: 1px solid #eee; border-left: 0; border-bottom: 0; font-size: 15px; }
.offer-packet-choose table tr > * { padding: 15px; text-align: center; vertical-align: middle; border-left: 1px solid #eee; }
.offer-packet-choose table tr th { text-align: left; font-weight: 400; }
.offer-packet-choose table thead tr td p { margin: 0 0 10px 0; }
.offer-packet-choose table thead tr td .best-choose { color: #f8bf19; font-weight: 500; padding: 10px 0; border-top: 5px solid #f8bf19; }
.offer-packet-choose table thead tr td .months { font-size: 1.2em; font-weight: 600; }
.offer-packet-choose table thead tr td .price { font-size: 1.2em; }
.offer-packet-choose table thead tr td .price b { font-size: 1.2em; }
.offer-packet-choose table thead tr td .price .per-month { font-size: 0.8em; color: #999; }
.offer-packet-choose table thead tr td .choose { margin: 30px 0; }
.offer-packet-choose table tbody tr.points td { font-size: 1.1em; font-weight: 500; }
.offer-packet-choose table tbody tr td.yes { background: url(../img/feature-available.png) no-repeat; background-position: center center; }
.offer-packet-choose table tbody tr td.no { background: url(../img/feature-unavailable.png) no-repeat; background-position: center center; }
.offer-packet-choose table tbody tr:nth-child(odd) > * { background-color: #f7f7f7 !important; }
.offer-packet-choose table tfoot tr > * { border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-weight: 500; }
.offer-packet-choose table tfoot tr td.choose:hover { cursor: pointer; background: #0097CE; color: #fff; }

/*.offer-packet-choose {*/
    /*margin-top: 80px;*/
/*}*/

/*.offer-packet-choose .packet { font-size: 17px; margin: 0 20px; border: 1px solid #ddd; text-align: center; padding-bottom: 40px !important;*/
    /*!* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#398235+0,8ab66b+56,ffffff+100 *!*/
    /*background: #F5F5F5; !* Old browsers *!*/
    /*background: -moz-linear-gradient(top, #F5F5F5 20%, #ffffff 100%); !* FF3.6-15 *!*/
    /*background: -webkit-linear-gradient(top, #F5F5F5 20%,#ffffff 100%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: linear-gradient(to bottom, #F5F5F5 20%,#ffffff 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5F5F5', endColorstr='#ffffff',GradientType=0 ); !* IE6-9 *!*/
/*}*/
/*.offer-packet-choose .packet-gold {*/
    /*!* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#398235+0,8ab66b+56,ffffff+100 *!*/
    /*background: #FFFBF0; !* Old browsers *!*/
    /*background: -moz-linear-gradient(top, #FFFBF0 20%, #ffffff 100%); !* FF3.6-15 *!*/
    /*background: -webkit-linear-gradient(top, #FFFBF0 20%,#ffffff 100%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: linear-gradient(to bottom, #FFFBF0 20%,#ffffff 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFBF0', endColorstr='#ffffff',GradientType=0 ); !* IE6-9 *!*/
/*}*/
/*.offer-packet-choose .packet .circle { display: flex; flex-direction: column; justify-content: center; font-size: 26px; border-radius: 500px; width: 215px; height: 215px; background: #E1E1E1; box-shadow: 0px 3px 4px #999; margin: auto; text-align: center; color: #242424; position: relative; margin-top: -50px; }*/
/*.offer-packet-choose .packet-gold .circle { background: #F8BF19; color: #fff;  }*/
/*.offer-packet-choose .packet .circle b { font-weight: 800; font-size: 1.4em; }*/

/*.offer-packet-choose .features { margin: 30px 0; }*/
/*.offer-packet-choose .features > p { text-align: left; padding: 0 0 10px 30px; width: 65%; margin: auto; text-align: left; }*/
/*.offer-packet-choose .features p.available { background: url(../img/feature-available.png) no-repeat; }*/
/*.offer-packet-choose .features p.unavailable { background: url(../img/feature-unavailable.png) no-repeat;}*/

/*.offer-packet-choose .packet .periods { font-size: 22px; border: 1px solid #ccc; border-top: 0; width: 65%; margin: auto; }*/
/*.offer-packet-choose .packet .periods > p { border-top: 1px solid #ccc; padding: 10px 0; cursor: pointer; }*/
/*.offer-packet-choose .packet .periods > p:hover,*/
/*.offer-packet-choose .packet .periods > p.active { background: #E1E1E1; color: #242424; }*/

/*.offer-packet-choose .packet-gold .periods > p:hover,*/
/*.offer-packet-choose .packet-gold .periods > p.active { background: #F8BF19; color: #fff; }*/

.offer-packet-choose .testing {
    text-align: center;
    position: relative;
    width: 615px;
    margin: auto;
}

.offer-packet-choose .testing .first-line { margin: 50px 0 0 0; font-size: 32px; font-weight: 500; }
.offer-packet-choose .testing .second-line { font-size: 26px; }
.offer-packet-choose .testing span { /*background: #F8BF19; color: #252525;*/ padding: 2px 5px; }
.offer-packet-choose .testing p { margin: 15px 0; }
.offer-packet-choose .testing p b { font-weight: 700; }

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
    top: 8px;
    bottom: 10px;
    left: 20px;
    font-size: 11px;
    opacity: 1;
}

/*.inputText {*/
    /*font-size: 14px;*/
    /*width: 200px;*/
    /*height: 35px;*/
/*}*/

.floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top: 18px;
    transition: 0.2s ease all;
}


.sk-circle {
    width: 40px;
    height: 40px;
    right: 20px;
    top: 20px;
    position: fixed;
    display: none;
}
.loading .sk-circle {
    display: block;
}
.sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.sk-circle .sk-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #0099CD;
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg); }
.sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg); }
.sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }
.sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg); }
.sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg); }
.sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg); }
.sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg); }
.sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg); }
.sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg); }
.sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg); }
.sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s; }
.sk-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1);
          transform: scale(1);
      }
}

@keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1);
          transform: scale(1);
      }
}

/* offer condition css */
.condition-with-input .hour_option  label{
    font-weight: 400;
    margin-left: 5px;
}
.condition-with-input .hour_option  select{
    margin-left: 20px;
}
.condition-just-text .value{
    margin-left: 5px;
}
.condition-with-input .input_option input[type="text"]{
    max-width: calc(100% - 30px);
    margin-left: 5px;
}
.condition-with-input .clockpicker {
    max-width: 4em;
    width: 100%;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 8px;
    font-size: 14px;
    text-align: center;
    margin-left: 10px;
}
.condition-just-text .flaticon-confirm1,
.condition-with-input .flaticon-confirm1{
    color:green;
    vertical-align: sub;

}