:root {
    --color-1: #00a658;
    --color-1-55: #00a65855;
    --color-1-15: #00a65815;

    --color-glass: #003300aa;
    --color-darkgreen:#003300;


/*    --c-1rgb: 0, 166, 88; /* RGB-версия для rgba()  rgba(var(--c-1rgb), 0.33); */  
}

body {max-width: 1200px; margin: auto; padding: 0 10px 10px 10px; font-family:sans-serif;}
#top { position: sticky; top: 00px;   margin: auto;  border-bottom: 1px solid #666; z-index: 999;}
#top #panel {display: flex; justify-content: space-between;align-items: center; min-height: 50px; background: #fff;height: 100px;}
#top #panel img {height: 100px; margin-right: 10px;}
#top .names {flex: auto;}
#top h1 { color:var(--color-1); margin: 0; }
#top h2 {margin: 5px; opacity: .5; font-size: 1.25em; display: flex;}
#top h2 span {margin: 0 5px;}
#top #user {height: 50px; fill:var(--color-1); cursor: pointer; flex:none;}
#top #user:hover {stroke: #666;}
#main {padding-top: 20px;}

.buttons {margin: 30px; display: flex; justify-content: space-between;align-items: center;}
.buttons .btn {font-size: 1.5em;}
ist-icons {display:flex;align-items: center; justify-content: center;}

/*
ist-radio {border: 1px solid #00000055; border-radius: 8px; display: block; margin-bottom: 20px;}
ist-radio h3 {background: #66666633; margin:0; padding:10px; border-radius: 8px 8px 0 0;}
ist-radio > div {display: flex; margin: 4px;}
ist-radio label {flex: auto; font-size: 1.17em; padding: 4px 6px; border-radius: 8px;}
ist-radio label:hover {background: #66666622;}
ist-radio label:active {background: var(--color-1-55);}
ist-radio input[type="radio"]:checked+label {background:#00a65833}
ist-radio i {margin: 8px;font-size:  1.1em; display: block;}
ist-radio label em {display:inline-block; width: 10px; height: 10px; border-radius: 20px; margin: 0px 5px -2px 5px;
                    outline: 3px solid #666666; border:  3px solid #fff; background: #fff;}
ist-radio label:hover em {background: var(--color-1-55)}
ist-radio label:active em {background: #666666}
ist-radio input[type="radio"]:checked+label em {background: #00a658}
ist-radio input {display: none;}

ist-radio
*/


/*! Шкала */
ist-scale {width: 100%;display: flex; background: #fff;}
ist-scale div {display: flex; flex:auto; margin: 0 1px;}
ist-scale > div {margin: 0 3px;}
ist-scale .nil { border-top: 3px solid silver;  }
ist-scale .fill {border-color:var(--color-1); }

/*! Опрос */
.rezPage {background-color: #66666615; border: 1px solid #666 ; padding: 10px; max-width: 800px; margin: 10px auto;}
.rezPage h3 {border-top: 1px solid #666; padding-top: 20px; margin-bottom: 10px;}
.rezPage .right {text-align: right;}
.rezPage .warning {color: #700000;}

.opros1 .formInput .labelBox {display: block; position: relative; padding-right:20px ;}
.opros1 .formInput .labelBox .btnBox {position: absolute; top:0; right: 0;}
.opros1 .formInput .labelBox .comment{display: block; white-space: normal;margin: 5px 0;}
.opros1 .formInput .inputBox {display: flex;flex-direction: column;}

.opros1 .formInput .inputBox label {flex: auto; font-size: 1.17em; padding: 4px 6px; border-radius: 8px;}
.opros1 .formInput .inputBox label:hover {background: #66666622;}
.opros1 .formInput .inputBox label:active {background: var(--color-1-55);}
.opros1 .formInput .inputBox label:has( input:checked) {background:#00a65833}
.opros1 .formInput .inputBox label input::before {display:inline-block; width: 10px; height: 10px; border-radius: 20px;
                    outline: 3px solid #666666; border:  3px solid #fff; background: #fff; content:'';}
.opros1 .formInput .inputBox label:hover input::before {background: #666}
.opros1 .formInput .inputBox label:active input::before {background: #000}
.opros1 .formInput .inputBox label input:checked::before {background: var(--color-1)}
.opros1 .formInput .inputBox input {margin-right:15px ;}

.opros1 label span {display: inline-block; width: 40px; height: 16px; margin: 0 4px -3px 4px; border: 1px solid; } /*цвет мочи*/

svg.inputBox input {width: 96%; margin:0 2%}
svg.inputBox text {font-size: 24px;}
svg.inputBox .areas {fill:#60606066; cursor: pointer;}
svg.inputBox .areas.hover, svg.inputBox .areas.active {fill:#00a65855;}
svg.inputBox.user .areas, svg.inputBox.user .areas.hover, svg.inputBox.user .areas.active {fill:transparent;}
svg.inputBox .opt {cursor: pointer;}
svg.inputBox .opt .cir-0 {fill:#666}
svg.inputBox .opt .cir-1, svg.inputBox .opt .cir-2 {fill:#fff}
svg.inputBox .opt.hover .cir-2  {fill:#666}
svg.inputBox .opt.active .cir-2 {fill:#00a658}
svg.inputBox .imgs {z-index: 0;position: absolute;}
svg.inputBox .imgs.hover {z-index: 100;}


.editor .name {margin-top: 5px; border-top: 1px solid #00000011; padding-top: 5px;}
.editor .n {width: 75px; display: inline-block;font-size: 90%; color: #444;}
.editor .img {display: none;}
.editor .name .v {font-weight: bold; color: #00a658;}

/*
.user {display: grid; grid-gap: 10px; background-color: var(--color-1-55); border: 1px solid var(--color-1) ; padding: 10px; max-width: 400px; margin: 0 auto 10px;}
.user .fields {display: grid; grid-gap: 10px;}
.input {background-color: #ffffff55;  border: 1px solid #fff; padding: 5px; display: grid; }
.user label {font-size:  1.1em;}
.user i.comment { margin-bottom:.5em;  font-size: .9em;}
.user i.s_comment {margin: 3px 5px;}
.user h2 {margin: 10px 0 0; display: flex;}
.user h2 .flex {flex: 1;}
.user h2 .btn {cursor: pointer; font-weight: normal; color: var(--color-1);}
ist-input-sex > div {display: flex;}
ist-input-sex > div label {flex: 1; cursor: pointer;}

ist-input-sex label em {display:inline-block; width: 8px; height: 8px; border-radius: 20px; margin: 0px 5px -2px 5px;
    outline: 3px solid #666666; border:  3px solid #fff; background: #fff;}
ist-input-sex label:hover em {background: var(--color-1-55)}
ist-input-sex label:active em {background: #666666}
ist-input-sex input[type="radio"]:checked+label em {background: var(--color-1)}
ist-input-sex input {display: none;}

.input .input-box { display: flex; align-items: center; position: relative;}
.input .input-box input, .input .input-box select{ flex:1; }
.input .input-box .btn-box {position: absolute; right:3px;}
.input .input-box .btn-box b {font-weight: normal; cursor: pointer;}
.input .input-box .btn-box b.disabled {cursor:auto; opacity:0.5;}
*/
/*! Формы */
.formInput { display: flex; flex-direction: column; border: 1px solid silver; margin: 10px; padding: 5px;}
.formInput .labelBox {display: flex; align-items: baseline; justify-content: space-between; font-size: 130%;}
.formInput .btnBox b {font-weight: normal; cursor: pointer;}
.formInput .btnBox b.disabled {cursor:auto; opacity:0.5;}
.formInput .labelBox .comment {flex: 1;font-size: 75%; margin-left: 10px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}

.form-box { display: block; background-color: var(--color-1-15); border: 1px solid var(--color-1) ; padding: 10px; max-width: 800px; margin: 10px auto; }
.form-box .header {margin: 10px;}
.form-box .message, .form-box .other .comment {margin: 10px; font-size: 130%;}
.form-box .buttons {margin: 10px;}
.form-box .buttons .btn {width: 180px; }
.form-box .form-hidden {position: absolute; left: -9999px; width: 1px; height: 1px;} /* Скрываем в форме */
.inputBox input {min-width: 80px;}
form-radio-check .inputBox input {min-width: auto;}
form-radio-check label {cursor: pointer;}

/*! Кабинет */
user-registration form-radio-check .inputBox {display: flex; justify-content: space-between;}
.kab_rec {width: 100%;border-collapse: collapse;}
.kab_rec td,.kab_rec th {border:  var(--color-1) 1px solid; padding: 1px .5em;}

/*
.user.of_line {border-color: red;}
.user.of_line .s_comment, .user.of_line  .buttons {display: none;}
.user .buttons, .extend .buttons { margin:0px 6px 20px;}
.user .buttons .btn {width: 180px;}
.user .buttons .btn.disabled {cursor:auto; opacity:0.5;}
*/
/*! Меню */
.glass.hidden {display: none;}
body.blur {filter: blur(2px);}
.glass {position: fixed; background: var(--color-glass); width: 100%; height: 100vh; top:0;left: 0;  }
.glass .m_menu {background:#fff; width: 200px; margin:0; padding: 0; position:absolute;top:0;right: 0;height: 100vh; border-left:2px solid var(--color-1);
    list-style-type:  none; font-size: larger;}
.glass .m_menu li {padding:5px 10px; transition: .5s; cursor: pointer; display: flex;justify-content: space-between; border-bottom:1px solid var(--color-1);}
.glass .m_menu li.void, .glass .m_menu li.void:hover {cursor: default; background: #66666666}
.glass .m_menu li:hover {background: var(--color-1-55)}
.glass .m_menu li.active {background: var(--color-1-55); cursor: default;}
.glass .m_menu .icons {height:25px ; width: auto; fill:var(--color-darkgreen);}
.glass .m_menu .icons#close {fill:red}


/*! Результаты */
table.opros1view { width: 100%;border-spacing: 0px 6px;}
table.opros1view td, table.opros1view th {border: 1px solid silver; padding: 4px 2px; }
table.opros1view.self .login { display: none; }
table.opros1view tr.b {cursor: pointer;}
table.opros1view tr.b:hover {background: var(--color-1-55)}

/*
.extend {display: grid; grid-gap: 10px; background-color: #66666622; border: 1px solid var(--color-1) ; padding: 10px; margin-bottom:20px;}
.extend h3 {margin: 10px 0 0 0;}
.extend .kab_rec {width: 100%; border-collapse: collapse;}
.extend .kab_rec th, .extend .kab_rec td {border: 1px solid #66666699; padding: 2px;text-align: center;}
*/

/*! media */
@media screen and (max-width: 600px) {
    #top h1 {font-size: 1.6em;}
}
@media screen and (max-width: 450px) {
    #top h1 {font-size: 1.1em;}
    #top #panel img {height: 60px;}
    #top #user {height: 30px;}
}

@media print {
    #top {position: fixed; height: 1.1cm; border-bottom: 1px solid ; width: 100%;}
    #top #panel {border-bottom: 1px solid ;height: 1cm;}
    #top h1 {font-size: 1.6em; color:var(--color-1);}
    #top #panel img {height: 1cm; margin-right: 1cm;}
    ist-scale, .buttons, #top #user {display: none;}
    ist-result .section {page-break-inside: avoid; padding-top: 0.8cm;}
    h2 {position: relative; top:1.1cm}
}