* {
     box-sizing:border-box;
     position:relative;
     font-family:'Open Sans'
}



.listContainer {
     display:flex;
     flex-wrap:wrap;
}

.screenContainer {
     padding-top:50px
}

.list {
     width:100%;
     display:flex;
     justify-content:space-between;
     margin-bottom:5px;
     padding-bottom:5px;
     align-items:center;
     border-bottom:1px solid black
}

.list.header {
     background-color:gray;
     color:white
}





.clientsList {
     width:320px;
     margin:0 auto
}

.center {
     text-align:center
}

input[type='text'],input[type='number'],input[type='date'] {
     width:100%
}


h3 {
     padding:0;
     margin:0;
     margin-bottom:10px;
     text-align:center;
}

.w5 {
     width:5%;
     min-width:5%;
     max-width:5%
}


.w10 {
     width:10%;
     min-width:10%;
     max-width:10%
}

.w15 {
     width:15%;
     min-width:15%;
     max-width:15%
}

.w20 {
     width:20%;
     min-width:20%;
     max-width:20%
}

.w25 {
     width:25%;
     min-width:25%;
     max-width:25%
}

.w30 {
     width:30%;
     min-width:30%;
     max-width:30%
}

.w33 {
     width:33.333%;
     min-width:33.333%;
     max-width:33.333%
}

.w40 {
     width:40%;
     min-width:40%;
     max-width:40%
}

.w45 {
     width:45%;
     min-width:45%;
     max-width:45%
}

.w50 {
     width:50%;
     min-width:50%;
     max-width:50%
}

.w60 {
     width:60%;
     min-width:60%;
     max-width:60%
}

.w66 {
     width:66.6666%;
     min-width:66.6666%;
     max-width:66.6666%
}

.w70 {
     width:70%;
     min-width:70%;
     max-width:70%
}

.w75 {
     width:75%;
     min-width:75%;
     max-width:75%
}

.w100 {
     width:100%;
     min-width:100%;
     max-width:100%
}



.button {
     text-decoration:none;
     background-color:olive;
     color:white;
     border-radius:5px;
     display:inline-block;
     padding:2px 4px;
     cursor:pointer
}

.hide {
     display:none !important;
     visibility:hidden !important;
     opacity:0 !important;
     left:-999999px !important;
     top:-999999px !important
}

.lb {
     background-color:#c0c0c0;
     position:fixed;
     width:90%;
     left:5%;
     overflow:hidden;
     overflow-Y:auto;
     padding:20px;
}

.sTop {
     position:absolute;
     top:3px;
     right:5px;
     width: calc(100% - 5px);
     height:30px;
     display:flex;
     justify-content:flex-end;
     align-items:center;
     z-index:999999
}

.stp {
     margin:3px
}

.closeLB:before {
     content:"x";
     text-align:center;
     width:20px;
     height:20px;
     position:absolute;
     line-height:18px;
     top:0; left:0;
}

.closeLB {
     background-color:black;
     color:white;
     border-radius:5px;
     text-align:center;
     width:20px;
     height:20px;
}

.screen {
     background-color:#c1c1c1;
     padding:10px;
     margin:5px;
     border:1px solid black;
     display:flex;
     justify-content:space-between;
     flex-wrap:wrap;
}

.openScreen {
     width:50px
}

.screenContent:empty {
     display:none
}

.screenContent {
     margin-top:20px;
     width:100%;
}


.screen_groups {
     display:flex;
     flex-wrap:wrap;
}

.screen_group.active {
     height:auto;
}

.screen_group {
     width:100%;
     height:30px;
     overflow:hidden;
     margin:10px;
     background-color:rgba(1,1,1,.1);
     border-radius:10px;
     display:flex;
     flex-wrap:wrap;
     justify-content:flex-end
}

.openClose {
     width:100%;
}

.screen_group .openClose[data-g='screen_group']:before {
     content:" \0025BA";
     cursor:pointer;
     width:25px;
     height:25px;
     font-size:18px;
     display:block;
     position:absolute;
     left:2.5px;
     top:-2px;
}

.choice .openClose[data-g='choice']:before {
     content:" \0025BA";
     cursor:pointer;
     width:18px;
     height:18px;
     font-size:14px;
     display:block;
     position:absolute;
     left:2.5px;
     top:-2px;
}

.question .openClose[data-g='question']:before {
     content:" \0025BA";
     cursor:pointer;
     width:18px;
     height:18px;
     font-size:14px;
     display:block;
     position:absolute;
     left:2.5px;
     top:-2px;
}


.question.active .openClose[data-g='question']:before {
     content:"	\0025BC";
}

.screen_group.active .openClose[data-g='screen_group']:before {
     content:"	\0025BC";
}

.choice.active .openClose[data-g='choice']:before {
     content:"	\0025BC";
}




.questions {
     width:100%
}


.leftRight {
     width:50%;
     margin:5px;
     text-align:center;
     display:flex;
     justify-content:space-between
}

.leftRight span {
     padding:0 5px;
     display:block;
     white-space:nowrap;
     height:22px;
     line-height:22px
}

.leftRight span:first-child {
     text-align:right;
     font-size:11px
}

.leftRight span:last-child {
     width:100%;
     text-align:left;
}

.updateDiv {
     display:inline-block !important;
     border:1px solid #f0f0f0;
     padding:2px;
     font-size:12px;
     color:black !important
}



.updateDiv:active,.updateDiv:focus, .updateDiv:not(:empty) {
     background-color:#f0f0f0
}

.screen_group[data-state='_NEW'] .questions{
     display:none
}

.question[data-state='_NEW'] .q {
     display:none
}

.choice[data-state='_NEW'] .c {
     display:none !important
}



.questions {
     padding:20px;
     background-color:tan;
     border-bottom:1px solid black
}

.question.active {
     height:auto;
     background-color:gray;
     color:white;
}

.question {
     height:30px;
     overflow:hidden;
     padding:0 20px;
     padding-bottom:20px;
}


.question textarea[name='QUESTION']{
     width:100%;
     min-height:50px
}

textarea[name='C_TEXT'],textarea[name='COMMANDS'],textarea[name='C_FIELD_NAME'],textarea[name='C_FIELD_VALUE'] {
     display:block;
     min-height:25px;
     width:100%
}



.choices {
     padding:20px
}

.choice.active {
     height:auto;
}

.choice {
     padding:0 20px;
     padding-bottom:20px;
     height:30px;
     overflow:hidden;
     background-color:rgba(1,1,1,.3);;
     border-bottom:1px solid white
}


.input {
     padding:2px;
     margin-top:15px
}

.input label {
     position:absolute;
     font-size:10px;
     top:-15px;
     right:-2px;
}


.deleteChoice {
     cursor:pointer;
     width:18px;
     height:18px;
     background-color:black;
     color:white;
     text-align:center;
     line-height:17px;
     position:absolute;
     top:3px;
     font-size:9px;
     font-weight:bold;
     right:3px;
     z-index:99999;
     border-radius:50%
}

.deleteChoice:before {
     content:"del";
}

.handle {
     padding:0 !important;
     border:0 !important;
      background-image: linear-gradient(45deg, white 25%, transparent 25%), linear-gradient(-45deg, white 25%, transparent 25%), linear-gradient(45deg, transparent 75%, white 75%), linear-gradient(-45deg, transparent 75%, white 75%);
      background-size: 4px 4px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
     height:15px !important;
     width:15px !important;
     position:absolute;
     opacity:.6;
     top:6px;
     left:4px;
     z-index:999999;
     cursor:move
}

.handle.screen_group {
     top:-3px;;
     left:2px
}

.handle.screens {
     top:15px;
     left:5px
}

.screen > .leftRight {
     margin-left:30px
}

.screen.current {
     background-color:gray;
     color:white
}

.selectScreen {
     width:60%
}


.opacityLow {
     opacity:.2
}

.svars {
     width:100%;
     height:auto;
     display:flex;
     justify-content:space-between;
     align-items:center;
     flex-wrap:wrap
}

.svar {
     width:100%;
     margin-bottom:10px;
     display:flex;
     justify-content:space-between;
     align-items:center;
}

.svar div {
     width:100%
}

.svar div select,.svar div input {
     width:100%
}

.loginScreen {
    width:300px;
    height:auto;
    margin:0 auto
}