body{
overflow-x:hidden;
}
div.one-value{
    position:relative;
    height:4em;
}
div.one-value div#emailm{
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    text-align:center;
}
div.values-of-a-type{
    position:relative;
  
}

div#container{
    min-height:calc(100vh - 10em);
    width:calc(100% - 16px);
    margin:0 8px;
}
a#settings{
 /*   pointer-events:none;*/
}
a#settings span{
    color:#aaa;
}
a.button.cancel{
    margin-left:1em;
}
div.head{
    font-size:1.5em;
    height:2em;
}
div.head a{
    float:right;
    font-size:12px;
    margin:10px 36px 0 0;
}
div.info-of-1-type{
    position:relative;
 width:40%;
 margin: 0 30%;
 
 border:1px solid #ddd;
}


span.type{
    width:10em;
}

span.info{
    position:absolute;
    left:10em;
    width:calc(100% - 13em);
}
div.info-of-1-type span{
    display:inline-block;
}
div.info-of-1-type span.edit{
    position:absolute;
    right:1px;
}
span.info{
    font-family:'Courier New', Courier, 'Nimbus Mono L', monospace;
}
div.info-of-1-type.no-edit{
    color:#555;
}

@media only screen and (max-width:25.9em){
    div.info-of-1-type{
        width:100%;
        margin: 0;
        height:7em;
}
    div.info-of-1-type span, div.info-of-1-type span.info{
        position:relative!important;
        left:0;
        width:100%;
        height:1.5em;
    }
    div.info-of-1-type span.info{
        height:3em;
    }
        div.info-of-1-type span.info input {
            width:calc(100% - 6px);
        }
    span.edit{
        text-align:right;
    }
   
}


@media only screen and (max-width:39.9em) and (min-width:26em){
    div.info-of-1-type{
        width:100%;
        margin: 0;
        height:3em;
}
}
@media only screen and (max-width:62em) and (min-width:40em) {
       div.info-of-1-type{
        width:60%;
        margin: 0 20%;
}
}