body {
    font-family: Arial;
    font-size: 14px;
    min-height: 90vh;
    /*overflow: hidden;*/ /*!!! Предотвращает обновление страницы свайпом*/
    /*overscroll-behavior: contain;*//*!!! Предотвращает обновление страницы свайпом*/
}
#lang_group, #nick_group, #sex_group, #age_group, #family_group, #debug_group, #hi_group, #qwestionblock, #resume_group, #comment_group, #meta, #break {
    display: none;
}
#debugger {
   
    font-family: 'Courier New';
    font-size: 0.9em;
    line-height: 1.3em;
    display: block;
    clear: both;
    text-align: left;
    max-width: 99% !important;
   /* overflow-x: scroll;*/
    margin: 50px auto auto auto;
}
/*.radios-as-buttons {
    margin: 50px auto auto 50px;
    width: 210px;
    display: block;
}

    .radios-as-buttons div {
        float: left;
        width: 210px;
        clear:both;
        margin-top:20px;
    }

    .radios-as-buttons input {
        position: absolute;
        left: -9999px;
    }

    .radios-as-buttons label {
        display: block;
        margin: 0 0 0 -1px;
        padding: 5px 10px;
        border: 1px solid #BBBBBB;
       
        cursor: pointer;
        width: 210px;
        text-align: center;
        color:#666;
        font-weight:700;
    }

    .radios-as-buttons input:checked + label {
        background:#ccf0fe;
       
        border: 1px solid #0094ff;
    }

    .radios-as-buttons div:first-child label {
        margin-left: 0;
      
    }

    .radios-as-buttons div:last-child label {
     
    }*/
.input-buttons {
    display: block;
    margin: 145px auto auto 0px;
    font-family: Arial;
    font-size: 14px;
    width: 610px;
    padding-top: 50px;

   
/*    border: 1px solid;*/
}
/*.input-buttons div {
    float: left;
    width: 90%;
  text-align:center;
    margin-top: 20px;
}
*/
    .input-buttons input {
        width: 130px;
        /* background: #ccf0fe;*/
        /* border: 1px solid; #BBBBBB;*/
        padding: 5px 10px;
        display: inline-block;
    }
#break{
    float:right;
}
.input-buttons div #send {
    float: right;
}

.txt {
    margin: 50px auto auto auto;
    /*width: 600px;*/
    display: block;
}
#eo_name{
    font-weight:bold;
    font-size:1.2em;
}
#qwtxt {
    min-height: 70px;
    font-size: 1.3em;
    color: #333;
    max-width: 800px;
    display: block;
    margin: 50px auto auto auto;
}
._meta {
    /*margin: 100px auto auto auto;*/
    margin: 100px auto auto 10px;
    width: 210px;
    /*display: block;*/
}
.wmeta {
    margin: 100px auto auto auto;
    width: 610px;
    display: block;
}
.debug {
    margin: 50px auto auto auto;
    width: 210px;
    display: block;
    clear:both;
}
.textfield {
    border: 1px solid #BBBBBB;
    padding: 5px 5px;
}
#part1, #part2 {
    
    width: 85px;
   
}
#part2 {
    clear: both;
}
.fieldtitle {
    display: block;
    clear: both;
    font-size: 1.2em;
    margin-bottom:10px;
}
.fieldinfo {
    display: block;
    clear: both;
    font-size:0.9em;
    font-style:italic;
    color:#777;
    margin:3px auto 5px auto;
}
.fieldmess {
    color: crimson;
    font-size: 0.9em;
    display: block;
    clear: both;
}
.mess {
    color: crimson;
    font-size: 1.1em;
    display: block;
    clear: both;
}
.next {
    width: 120px;
    padding: 5px 10px;
    margin-top: 20px;
    float: left;
}
#sendcode {
    margin-top:130px!important;
    clear:both;
}
#fake_Nick {
    width: 195px;
}
#resume {
    min-height: 110px;
}

/*@font-face {
    font-family: 'Roboto';
    src: url(http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2);
}

body {
  
    min-height: 90vh;
    overflow: hidden;*/ /*!!! Предотвращает обновление страницы свайпом*/
    /*overscroll-behavior: contain;*/ /*!!! Предотвращает обновление страницы свайпом*/
/*}*/

#ls {
    font-family: 'Courier New';
    font-size: 0.85em;
    line-height: 1.0em;
}

.monitor {
    font-size: 1.5em;
}
/* label контейнер */
.holder {
    position: relative;
    display: block;
    padding-left: 28px; /* место под кружок слева */
    cursor: pointer;
}

    /* полностью выключаем нативный radio */
    .holder > input[type="radio"] {
        position: absolute;
        left: 0;
        top: 2px;
        width: 20px;
        height: 20px;
        margin: 0;
        opacity: 0; /* невидим */
        appearance: none; /* ВАЖНО: не рисовать нативный кружок */
        -webkit-appearance: none;
        pointer-events: none; /* кликаем по label */
    }

/* наш кастомный кружок слева */
.checkmark {
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #888;
}

    /* точка внутри */
    .checkmark::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: #2196F3;
        transform: scale(0);
        transition: transform .12s ease-out;
    }

/* показываем точку только когда выбран radio */
.holder > input[type="radio"]:checked ~ .checkmark {
    border-color: #2196F3;
}

    .holder > input[type="radio"]:checked ~ .checkmark::after {
        transform: scale(1);
    }

/* лёгкая подсветка по hover (не влияет на checked) */
.holder:hover .checkmark {
    box-shadow: 0 0 0 3px rgba(33,150,243,.15);
}


@media screen and (max-width: 800px) {

    body {
        font: 0.9em/1.4 'Roboto';
    }

    .holder {
        margin-bottom: 5px;
        font-size: 1.2em;
    }

    .monitor {
        font-size: 1.8em;
    }
}