.mdc-button_shortcode-element{color:#fff;font-weight:bold}.fullwidth-image{width:100%}

.offset-button
{
  margin-top:10px;
  margin-botton:10px;
  margin-left:5px;
  margin-right:5px;
}


.mdc-form-field.f-block
{
  display:block;
}


.ck_label
{
  line-height:40px;
}


.vti__dropdown, .vti__input
{
  background-color: rgb(245,245,245);
  font-size:16px;
}
.vti__country-code
{
  font-size:16px;
}
.mdc-form-field .vue-tel-input
{
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px;
  border-left:none;
  border-right:none;
  border-top:none;
  border-bottom-color: rgba(0, 0, 0, 0.87);
  height:56px;
  font-size:16px;
}
.vue-tel-input.is-invalid .vti__input::placeholder
{
}
.vue-tel-input.is-valid .vti__input::placeholder
{
}



.mdc-form-field .radio-item
{
  width:100%;
}



.field-item-gen
{
  margin-top:15px;
  margin-bottom:15px;
  display:inline-block;
  width:100%;
}
.header-element
{
  margin-bottom:5px;
}


body {
    --text-color: #000;
    --second-text-color: #7d7f81;
    --accent-btn-color: #2481cc;
    --accent-color-hover: #1a8ad5;
    --body-bg: #fff;
    --box-bg: #fff;
    --box-bg-blured: rgba(255, 255, 255, .84);
    --tme-logo-color: #363b40;
    --accent-link-color: #2481cc;
    --icon-verified: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20width%3D%2226%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m6%206h12v12h-12z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m14.38%201.51%201.82%201.82c.37.37.86.57%201.38.57h2.57c1.01%200%201.85.77%201.94%201.76l.01.19v2.57c0%20.52.21%201.01.57%201.38l1.82%201.82c.71.71.76%201.84.13%202.61l-.13.15-1.82%201.82c-.37.37-.57.86-.57%201.38v2.57c0%201.01-.77%201.85-1.76%201.94l-.19.01h-2.57c-.52%200-1.01.21-1.38.57l-1.82%201.82c-.71.71-1.84.76-2.61.13l-.15-.13-1.82-1.82c-.37-.37-.86-.57-1.38-.57h-2.57c-1.01%200-1.85-.77-1.94-1.76l-.01-.19v-2.57c0-.52-.21-1.01-.57-1.38l-1.82-1.82c-.71-.71-.76-1.84-.13-2.61l.13-.15%201.82-1.82c.37-.37.57-.86.57-1.38v-2.57c0-1.08.87-1.95%201.95-1.95h2.57c.52%200%201.01-.21%201.38-.57l1.82-1.82c.76-.76%202-.76%202.76%200zm3.2%208.05c-.43-.34-1.03-.31-1.42.06l-.1.11-4.45%205.56-1.75-1.75-.11-.1c-.42-.32-1.03-.29-1.42.1s-.42.99-.1%201.42l.1.11%202.6%202.6.11.1c.42.32%201.02.29%201.4-.08l.1-.11%205.2-6.5.08-.12c.27-.46.17-1.05-.25-1.4z%22%20fill%3D%22%231c93e3%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
}
a.tgme_action_button,
a.tgme_action_button_new {
    font-size: 14px;
    line-height: 17px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    color: var(--botterfly-theme-button_text_color);

    border-radius: 22px;
    overflow: hidden;
    display: inline-block;
    padding: 13px 24px;
    height: 42px;
    text-transform: uppercase;
    vertical-align: top;
}
a.tgme_action_button:hover,
a.tgme_action_button:active,
a.tgme_action_button_new:hover,
a.tgme_action_button_new:active {
    color: var(--botterfly-theme-button_text_color);
    background: var(--botterfly-theme-link_color) !important;
    text-decoration: none;
}
a.tgme_action_button_new {
    background-color: var(--botterfly-theme-button_color);
}
a.tgme_action_button_new.shine {
    background-image: linear-gradient(270deg, rgba(var(--botterfly-theme-link_color), 0) 48.44%, #64b5ef 75.52%, rgba(var(--botterfly-theme-link_color), 0) 100%);
    background-repeat: no-repeat;
    animation: bg-move linear 5s infinite;
}
a.tgme_action_button_new:hover,
a.tgme_action_button_new:active {
    background-color: var(--botterfly-theme-button_color);

}
a.tgme_action_button_new.shine {
    background-image: linear-gradient(270deg, rgba(var(--botterfly-theme-link_color), 0) 48.44%, #64b5ef 75.52%, rgba(var(--botterfly-theme-link_color), 0) 100%);
    background-repeat: no-repeat;
    animation: bg-move linear 5s infinite;
}

.tgme_page_action {
    text-align: center;
    margin-top: 24px;
    line-height: 0;
}
a.tgme_action_button_new
{
    animation-delay: 0s;
    animation-direction: normal;
    animation-duration: 5s;
    animation-fill-mode: none;
    animation-iteration-count: infinite;
    animation-name: bg-move;
    animation-play-state: running;
    animation-timing-function: linear;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: var(--botterfly-theme-button_color);
    background-image: linear-gradient(270deg, rgba(var(--botterfly-theme-link_color), 0) 48.44%, var(--botterfly-theme-link_color) 75.52%, rgba(var(--botterfly-theme-link_color), 0) 100%);
    background-origin: padding-box;
    background-position-x: 376.94px;
    background-position-y: 0px;
    background-repeat: no-repeat;
    background-size: auto;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-optical-sizing: auto;
    font-size: 14px;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 700;
    height: 42px;
    line-height: 17px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 13px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 13px;
    text-align: center;
    text-decoration-color: var(--botterfly-theme-button_text_color);
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-transform: uppercase;
    vertical-align: top;
    width:90%;
}
@keyframes bg-move {
    0%   { background-position: -500px 0; }
    100% { background-position: 1200px 0; }
}


/* используем SCSS здесь */
:root
{
  --botterfly-theme-bg_color: var(--tg-theme-bg-color);
  --botterfly-theme-text_color: var(--tg-theme-text-color);
  --botterfly-theme-link_color: var(--tg-theme-link-color);
  --botterfly-theme-hint_color: var(--tg-theme-hint-color);
  --botterfly-theme-secondary_bg_color: var(--tg-theme-secondary-bg-color);
  --botterfly-theme-button_text_color: var(--tg-theme-button-text-color);
  --botterfly-theme-button_color: var(--tg-theme-button-color);
  --botterfly-theme-destructive_text_color: var(--tg-theme-destructive-text-color);
  --botterfly-theme-color-scheme: var(--tg-color-scheme);
  --botterfly-theme-accent-text-color: var(--tg-theme-accent-text-color);
  --botterfly-theme-header-bg-color : var(--tg-theme-header-bg-color);
  --botterfly-theme-section-bg-color: var(--tg-theme-section-bg-color);
  --botterfly-theme-section-header-text-color: var(  --tg-theme-section-header-text-color);
  --botterfly-theme-subtitle-text-color: var(--tg-theme-subtitle-text-color);
}
.mainbody,#app {
  background-color: var(--botterfly-theme-bg_color);
  color: var(--botterfly-theme-text_color);
}
.pre-page-title
{
  display:flex;
}
.title-header
{
  margin-top: 13px;
  margin-left: 10px;
}
.field-item-gen
{
  margin-top:0px !important;
  margin-bottom:0px !important;
}
/*
bg_color 	String 	Optional. Background color in the #RRGGBB format.
Also available as the CSS variable var(--tg-theme-bg-color).
text_color 	String 	Optional. Main text color in the #RRGGBB format.
Also available as the CSS variable var(--tg-theme-text-color).
hint_color 	String 	Optional. Hint text color in the #RRGGBB format.
Also available as the CSS variable var(--tg-theme-hint-color).
link_color 	String 	Optional. Link color in the #RRGGBB format.
Also available as the CSS variable var(--tg-theme-link-color).
button_color 	String 	Optional. Button color in the #RRGGBB format.
Also available as the CSS variable var(--tg-theme-button-color).
button_text_color 	String 	Optional. Button text color in the #RRGGBB format.
Also available as the CSS variable var(--tg-theme-button-text-color).
secondary_bg_color 	String 	Optional. Bot API 6.1+ Secondary background color in the #RRGGBB format.
Also available as the CSS variable var(--tg-theme-secondary-bg-color).
[WebViewColors explained]
 */
body
{
  background-color: var(--botterfly-theme-bg_color);
  color: var(--botterfly-theme-text_color);
}
h4, label
{
  color: var(--botterfly-theme-text_color);
}
a
{
  color: var(--botterfly-theme-link_color);
}
.tg-hint
{
  color: var(--botterfly-theme-hint_color);
}
#app .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate="true"]) ~ .mdc-checkbox__background
{
  border-color: var(--botterfly-theme-text_color);
}
#app .mdc-text-field--filled:not(.mdc-text-field--disabled)
{
  background-color:var(--botterfly-theme-secondary_bg_color);
  color: var(--botterfly-theme-text_color);
}
#app .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input
{
  color: var(--botterfly-theme-text_color);
}
#app .mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label
{
  color: var(--botterfly-theme-hint_color);
}
:root {
  --mdc-checkbox-checked-color: var(--botterfly-theme-link_color);
}
#app .mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark
{
  color: var(--botterfly-theme-text_color);
}
#app .vti__dropdown, #app .vti__input
{
  background-color: var(--botterfly-theme-secondary_bg_color);
  color: var(--botterfly-theme-text_color);
}
#app .vti__selection .vti__country-code,
#app .vti__dropdown-arrow
{
  color: var(--botterfly-theme-text_color);
}
#app .vti__dropdown-item.highlighted
{
  background-color: var(--botterfly-theme-button_color);
}
#app .vti__dropdown-list
{
  background-color: var(--botterfly-theme-secondary_bg_color);
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--botterfly-theme-hint_color);
}
#app .mdc-button
{
  background-color: var(--botterfly-theme-button_color);
  color: var(--botterfly-theme-button_text_color);
}
body .mdc-snackbar--open .mdc-snackbar__surface
{
  background-color: var(--botterfly-theme-secondary_bg_color);
}
body .mdc-snackbar--open .mdc-snackbar__surface .mdc-snackbar__label
{
  color: var(--botterfly-theme-button_text_color);
}
.c-red
{
  color: var(--botterfly-theme-destructive_text_color);
}