@font-face {
  font-family: 'RobotoFlex';
  src: url('/fonts/roboto-mono/RobotoFlex-VariableFont.ttf') format('truetype');
  font-weight: 100 900; /* диапазон доступных весов */
  font-stretch: 75% 125%; /* диапазон ширины (если есть) */
  font-style: oblique 0deg 10deg; /* диапазон наклона (если есть) */
}

.fw-500 {
    font-weight: 500;
}

body {
    font-family: 'RobotoFlex', sans-serif;
    font-weight: 300; /* Тонкий */
}

body{
    background-color: #fefefe;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}
body.register-page {
    background-color: #e6f5ec;
    background-image: url(/images/pattern-green.webp);
    background-size: contain;
    background-position: center;
}


input::-ms-reveal {
  display: none;
}

.error-message {
    font-size: 0.8em;
    padding-left: 5px;
    color: red;
    bottom: 100%;
}
h1 {
    font-weight: 600;
    color: #404244;
    font-size: 3.5em;
    line-height: 1;
}
p {
    font-stretch: 110%;
    color: #525557;
}


.svg-wrapper {
  display: inline-block;
  width: 1.3em;
}

.btn-lg .svg-wrapper {
    vertical-align: bottom;
}

.btn-lg .svg-wrapper svg{
    vertical-align: text-bottom;
}

.otp-input {
    width: 56px;
    height: 64px;
    font-size: 2rem;
    text-align: center;
}

.otp-error .otp-input {
    border-color: var(--bs-danger);
}

.otp-error .otp-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Базовый стиль инпута */
input {
    background-color: #fff;      /* обычный фон */
    color: #000;                 /* цвет текста */
    border: 1px solid #ccc;      /* обычная рамка */
    border-radius: 4px;          /* закругление */
    font-size: 1rem;
    outline: none;
    box-shadow: none;
}

/* Фокус — своя подсветка */
input:focus {
    border-color: #28a745;       /* зелёная рамка при фокусе */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* лёгкая тень */
}

/* Убираем стандартные подсветки для невалидных полей */
input:invalid {
    box-shadow: none;
}

/* Firefox: убираем зелёный или жёлтый фон автозаполненных полей */
input:-moz-placeholder,
input:-moz-focus-inner,
input:-moz-ui-valid {
    background-color: #fff !important;
    box-shadow: none !important;
}

/* Chrome, Safari, Edge: убираем подсветку автозаполнения */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    -webkit-text-fill-color: #000;
    transition: background-color 5000s ease-in-out;
}

.modal-header {
    border: 0;
}
.btn-lg {
    padding: 8px 40px;
}
.btn.bg-mnc {
    background-color: #ea7791;
    color: #fff;
}
.btn.bg-mnc:hover {
    background-color: #c25e74;
}
#fakeLoginForm input {
    opacity:0;
    position:absolute;
    pointer-events:none;
}
.form-container {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    background: #fefdfe;
    border-radius: 30px;
    box-shadow: 3px 3px 20px 1px #ddd, -3px -3px 20px 1px #ddd;
}
.form-container .header {
    font-size: 3.0em;
    text-align: center;
    font-weight: 600;
    color: #4f5658;
    font-stretch: 120%;
    line-height: 0.85;
}

.form-container .input-group.phone-group .input-group-text {
    border-right: 0;
    font-size: 1.25rem;
}
.input-group-text.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.form-container .form-control.is-valid.form-control:focus {
    border-color: var(--bs-form-valid-border-color);
}

#phoneInput, #phoneInputModal {
    padding-left: 0;
    border-left: 0;
}
#phoneCode, #phoneResCode {
    font-size: 1.25rem;
    border-top-left-radius: var(--bs-border-radius-lg);
    border-bottom-left-radius: var(--bs-border-radius-lg);
}

.phone-group.has-error .input-group-text {
  border-color: var(--bs-form-invalid-border-color);
  border-right: 0;
}
#phoneInputModal.is-invalid {
  border-top-right-radius: var(--bs-border-radius-lg);
  border-bottom-right-radius: var(--bs-border-radius-lg);
}

.form-control:focus, .input-group:focus-within .input-group-text {
    box-shadow: none !important;
    border-color: #4f9e66;
    background-color: #F7FEF8;
}

.form-check-input:checked {
  background-color: #4f9e66;
  border-color: #4f9e66;
}

.no-icon.is-invalid {
  background-image: none !important;
  padding-right: .75rem !important;
}
.is-invalid + .btn-link.toggle-password, .text-error {
  color: var(--bs-form-invalid-color);
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4f9e66;
  --bs-btn-border-color: #4f9e66;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #428355;
  --bs-btn-hover-border-color: #428355;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #428355;
  --bs-btn-active-border-color: #428355;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}
.btn-outline-success {
  --bs-btn-color: #4f9e66;
  --bs-btn-border-color: #4f9e66;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4f9e66;
  --bs-btn-hover-border-color: #4f9e66;
  --bs-btn-focus-shadow-rgb: 25,135,84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4f9e66;
  --bs-btn-active-border-color: #4f9e66;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}
.btn-link {
    --bs-btn-color: #4f9e66;
    opacity: 0.8;
}
:root {
    --bs-form-valid-border-color: #aed3c2;
}