@charset "UTF-8";

@font-face {
  font-family: 'Iqos-Light';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/iqos/IQOS-Light.woff) format("woff");
}

@font-face {
  font-family: 'Iqos-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/iqos/IQOS-Regular.woff) format("woff");
}

@font-face {
  font-family: 'Iqos-Bold';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/iqos/IQOS-Bold.woff) format("woff");

}

body {
  font-family: "Iqos-Regular", sans-serif;
}

/* checkbox */

.form-group input[type="checkbox"],
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  vertical-align: top;
  border: 1px solid #232029;
  border-radius: 3px;
  background: #fff no-repeat center center;
  background-size: 80%;
  padding: 0;
  box-sizing: border-box;
  transition: 0.1s all ease;
}

.form-group input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
  background-image: url("/images/global/check.svg");
  background-color: #232029;
}

/* hover */

.form-group input[type="checkbox"]:checked:hover,
input[type="checkbox"]:checked:hover {
  border: 1px solid #7B7881;
  background: #7B7881 no-repeat center center;
  background-image: url("/images/global/check.svg");
  background-size: 80%;
}

.form-group input[type="checkbox"]:not(:checked):hover,
input[type="checkbox"]:not(:checked):hover {
  border: 1px solid #7B7881;
}

/* white theme */

input[type="checkbox"].input-white {
  border: 1px solid var(--soft-white);
  background: transparent no-repeat center center;
}

input[type="checkbox"].input-white:checked {
  background-image: url("/images/global/check-dark.svg");
  background-color: var(--turquoise);
  border: 1px solid var(--turquoise);
}

/* disabled */

.form-group input[type="checkbox"]:checked:disabled,
input[type="checkbox"]:checked:disabled {
  background-image: url("/images/global/check.svg");
  background-color: #E1E0E2;
  border: 1px solid #E1E0E2;
}

.form-group input[type="checkbox"]:not(:checked):disabled,
input[type="checkbox"]:not(:checked):disabled {
  border: 1px solid #E1E0E2;
}

/* error */

.form-group input[type="checkbox"].error,
input[type="checkbox"].error {
  border: 2px solid #C73636;
}

.form-group input[type="checkbox"].error:hover,
input[type="checkbox"].error:hover {
  border: 2px solid #C73636;
}

/* radio */
.form-group input[type="radio"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  vertical-align: top;
  border: 1px solid #34303D;
  border-radius: 3px;
  background: #fff no-repeat 52% 50%;
  background-size: 50%;
  padding: 0;
  box-sizing: border-box;
  transition: 0.1s all ease;
  border-radius: 50%;
}

.form-group input[type="radio"]:checked,
input[type="radio"]:checked {
  background: #fff no-repeat 52% 50%;
  background-image: url("/images/global/radio.svg");
  background-size: 50%;
}

/* hover */

.form-group input[type="radio"]:checked:hover,
input[type="radio"]:checked:hover {
  background: #fff no-repeat 52% 50%;
  background-image: url("/images/global/radio-hover.svg");
  background-size: 50%;

}

.form-group input[type="radio"]:not(:checked):hover,
input[type="radio"]:not(:checked):hover {
  border: 1px solid #7B7881;
}

/* PICB-1690 */

/* disabled */

.form-group input[type="radio"]:checked:disabled,
input[type="radio"]:checked:disabled {
  background-image: url("/images/global/radio-disabled.svg");
  border: 1px solid var(--slate-t-15);
}

.form-group input[type="radio"]:not(:checked):disabled,
input[type="radio"]:not(:checked):disabled {
  border: 1px solid var(--slate-t-15);
}

/* error */

.form-group input[type="radio"].error,
input[type="radio"].error {
  border: 2px solid var(--alert-red);
}

.form-group input[type="radio"].error:hover,
input[type="radio"].error:hover {
  border: 2px solid var(--alert-red);
}

.form-control-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form-control-check {
  margin-right: 12px;
}

.form-control-radio {
  margin-right: 12px;
}

.form-control-label {
  font-family: "Iqos-Regular", sans-serif;
  font-size: 16px;
  line-height: 24px;
}

/* stepper block styles */

.stepper {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}


.stepper.hide {
  display: none;
}

.stepper-step {
  position: relative;
}

.stepper-step img {
  display: none;
  width: 44px;
  height: 44px;
}

.stepper-step img.stepper-step-finish-check {
  width: 20px;
  height: 20px;
  position: absolute;
  right: -4px;
  bottom: -4px;
}

.stepper-step-line {
  width: 100%;
  height: 2px;
  background-color: #E1E0E2;
}

/* step 1 */

.stepper[data-step="1"] .stepper-step[data-step="1"] .stepper-step-active {
  display: block;
}

.stepper[data-step="1"] .stepper-step[data-step="2"] .stepper-step-default {
  display: block;
}

.stepper[data-step="1"] .stepper-step[data-step="3"] .stepper-step-default {
  display: block;
}

.stepper[data-step="1"] .stepper-step[data-step="4"] .stepper-step-default {
  display: block;
}

/* step 2 */

.stepper[data-step="2"] .stepper-step[data-step="1"] .stepper-step-finish {
  display: block;
}

.stepper[data-step="2"] .stepper-step[data-step="1"] .stepper-step-finish-check {
  display: block;
}

.stepper[data-step="2"] .stepper-step[data-step="2"] .stepper-step-active {
  display: block;
}

.stepper[data-step="2"] .stepper-step[data-step="3"] .stepper-step-default {
  display: block;
}

.stepper[data-step="2"] .stepper-step[data-step="4"] .stepper-step-default {
  display: block;
}

.stepper[data-step="2"] .stepper-step-line[data-line="1"] {
  background-color: var(--turquoise);
}

/* step 3 */

.stepper[data-step="3"] .stepper-step[data-step="1"] .stepper-step-finish {
  display: block;
}

.stepper[data-step="3"] .stepper-step[data-step="1"] .stepper-step-finish-check {
  display: block;
}

.stepper[data-step="3"] .stepper-step[data-step="2"] .stepper-step-finish {
  display: block;
}

.stepper[data-step="3"] .stepper-step[data-step="2"] .stepper-step-finish-check {
  display: block;
}

.stepper[data-step="3"] .stepper-step[data-step="3"] .stepper-step-active {
  display: block;
}

.stepper[data-step="3"] .stepper-step[data-step="4"] .stepper-step-default {
  display: block;
}

.stepper[data-step="3"] .stepper-step-line[data-line="1"] {
  background-color: var(--turquoise);
}

.stepper[data-step="3"] .stepper-step-line[data-line="2"] {
  background-color: var(--turquoise);
}

/* step 4 */

.stepper[data-step="4"] .stepper-step[data-step="1"] .stepper-step-finish {
  display: block;
}

.stepper[data-step="4"] .stepper-step[data-step="1"] .stepper-step-finish-check {
  display: block;
}

.stepper[data-step="4"] .stepper-step[data-step="2"] .stepper-step-finish {
  display: block;
}

.stepper[data-step="4"] .stepper-step[data-step="2"] .stepper-step-finish-check {
  display: block;
}

.stepper[data-step="4"] .stepper-step[data-step="3"] .stepper-step-finish {
  display: block;
}

.stepper[data-step="4"] .stepper-step[data-step="3"] .stepper-step-finish-check {
  display: block;
}

.stepper[data-step="4"] .stepper-step[data-step="4"] .stepper-step-active {
  display: block;
}

.stepper[data-step="4"] .stepper-step-line[data-line="1"] {
  background-color: var(--turquoise);
}

.stepper[data-step="4"] .stepper-step-line[data-line="2"] {
  background-color: var(--turquoise);
}

.stepper[data-step="4"] .stepper-step-line[data-line="3"] {
  background-color: var(--turquoise);
}

/* form group styles */

.form-group {
  text-align: center;
  position: relative;
  width: 100%;
}

.form-group label,
.auth-modal-content label {
  text-align: left;
  display: block;
  margin-bottom: 16px;
}

.form-group small.form-text {
  color: var(--alert-red);
  margin-top: 7px;
  display: none;
  text-align: left;
}

.form-group.invalid small.form-text {
  display: block;
}

.form-group.invalid input {
  border: 2px solid var(--alert-red) !important;
  outline: none;
}

.form-group small.helper-text {
  text-align: left;
  display: block;
  margin-top: 16px;
}


.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--slate-t-30);
  border-radius: 4px;
  background-color: var(--soft-white);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate);
  box-sizing: border-box;
  font-family: "Iqos-Regular", sans-serif;
}

.form-group input::placeholder {
  color: var(--slate-t-50);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.form-group .form-warn {
  display: none;
}

.form-group.invalid .form-warn {
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 12px;
  right: 16px;
}

.form-group.invalid.with-label .form-warn {
  top: 50px;
}

.form-group.invalid .form-warn svg {
  width: 100%;
  height: 100%;
}

.form-group .form-valid {
  display: none;
}

.form-group.valid .form-valid {
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 12px;
  right: 16px;
}

.form-group.valid .form-valid svg {
  width: 100%;
  height: 100%;
}

.form-group.password .show-password {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 16px;
  bottom: 12px;
  cursor: pointer;
}

.form-group.password .show-password svg {
  width: 100%;
  height: 100%;
}

.form-group.password.invalid .show-password {
    top: 50px;
}

/* custom select input */

.form-group.select .custom-select {
  width: 100%;
  cursor: pointer;
}

.form-group.select .custom-select select {
  display: none;
}

.form-group.select .custom-select .custom-select__wrapper {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--slate-t-30);
  border-radius: 4px;
  background-color: var(--soft-white);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate);
  box-sizing: border-box;
  line-height: 1.4;
  font-family: "Iqos-Regular", sans-serif;
  position: relative;
}

.form-group.select .custom-select .custom-select__wrapper.active {
  outline: 1px solid var(--slate);
  border: 1px solid var(--slate);
}

.form-group.select .custom-select .custom-select__wrapper .custom-select__list {
  display: none;
}

.form-group.select .custom-select .custom-select__wrapper.active .custom-select__list {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(0,calc(100% + 4px));
  width: 100%;
  list-style-type: none;
  overflow-y: scroll;
  background-color: var(--soft-white);
  z-index: 2;
  height: 280px;
  text-align: left;
  outline: 2px solid var(--slate);
  border-radius: 4px;
}

.form-group.select .custom-select .custom-select__wrapper.active .custom-select__list::-webkit-scrollbar {
  width: 4px;
  background-color: rgba(52, 48, 61, 0.15);
  border-radius: 2px;
  position: fixed;
  right: 2px;
}

.form-group.select .custom-select .custom-select__wrapper.active .custom-select__list::-webkit-scrollbar-thumb {
  width: 4px;
  background-color: rgba(52, 48, 61, 0.77);
  border-radius: 2px;
}

.form-group.select .custom-select .custom-select__wrapper .custom-select__current {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-group.select .custom-select .custom-select__wrapper .custom-select__arrow {
  width: 16px;
  height: 16px;
}

.form-group.select .custom-select .custom-select__wrapper .custom-select__arrow svg {
  width: 100%;
  height: 100%;
}

.form-group.select .custom-select .custom-select__wrapper.active .custom-select__arrow {
  transform: rotate(180deg);
}

.form-group.select .custom-select__wrapper .custom-select__item {
  padding: 12px 16px;
}

.form-group.select .custom-select__wrapper .custom-select__item:hover {
  background-color: var(--turquoise);
}

.form-group.select .custom-select__wrapper .custom-select__item.selected {
  background-color: var(--turquoise);
}

.form-group.select .custom-select .custom-select__placeholder {
  text-align: left;
  color: var(--slate-t-65);
}

.form-group.select .custom-select .custom-select__placeholder.selected {
  color: var(--slate);
}

/* sms code input */

.form-group.sms-input small.form-text {
  position: absolute;
  left: 0;
  right: 0;
  margin-bottom: 6px;
  line-height: 1.2;
  display: none !important;
  margin-top: 10px;
  text-align: center;
}

.form-group.sms-input.invalid small.form-text {
  display: block !important;
}

.form-group.sms-input.invalid {
  padding-bottom: 25px;
}

.form-group.sms-input input[type="number"] {
  width: 51px;
  height: 66px;
  line-height: 40px;
  border-radius: 5px;
  font-size: 30px;
  padding: 10px 14px;
  border: 1px solid #33303C;
  text-shadow: 0 0 var(--slate);
  color: transparent;
  text-align: center;
  box-sizing: border-box;
}

.form-group.sms-input input[type="number"]:focus {
  animation: blinkingCaret;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.form-group.sms-input input[type="number"]::placeholder {
  text-align: center;
  text-shadow: 0 0 #B3B3B3;
  text-decoration: underline;
  color: transparent;
}

.form-group.sms-input input[type="number"]:focus::placeholder {
  text-shadow: transparent;
  text-decoration: none;
}

.form-group.sms-input .number_input:not(:last-of-type) {
  margin-right: 30px;
}

.form-group input[type=number]::-webkit-inner-spin-button,
.form-group input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}


@keyframes blinkingCaret {
  0%   {text-decoration: #B3B3B3 underline;}
  25%   {text-decoration: #B3B3B3 underline;}
  50%   {text-decoration: #B3B3B3 underline;}
  75% {text-decoration: #B3B3B3 none;}
}

@media (max-width:767px) {
  .form-group.select .custom-select .custom-select__wrapper.active .custom-select__list {
    height: 300px;
  }

  .form-group.sms-input .number_input:not(:last-of-type) {
    margin-right: 16px;
  }
}

@media (max-width: 319px) {
  .form-group.sms-input .number_input:not(:last-of-type) {
    margin-right: 6px;
  }
}

.form-group.form-group-datapicker {
  position: relative;
}

.form-group.form-group-datapicker .form-group-datapicker-label {
  position: absolute;
  width: 14px;
  height: 15px;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  cursor: pointer;
}

.form-group.form-group-datapicker .form-group-datapicker-icon {
  width: 100%;
  height: 100%;
}