#data{
    background-color:rgba(24,128,232,1);
}

/* STYLES FOR SURVEY */
/* ** site background ******************************************************* */
#bodybackground img{
    /*display:none;*/
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
    height:fit-content;
    width:100%;
    height:100%;
    object-fit:fill;
    overflow:hidden;
}
/*  default state options*/
.state.client,
.state.server,
.state.ready{
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    margin:0px;
    border:none;
    box-shadow: none;
}
.state.server{
    z-index:999;
    position:fixed;
    top:50%;
    left:50%;
    background:rgba(255,0,0,0);
    width:24px;
    height:24px;
    box-shadow:
        45px 45px 2px var(--base-full),
        -45px 45px 2px var(--base-full),
        45px -45px 2px var(--base-full),
        -45px -45px 2px var(--base-full),
        
        0px 64px 2px var(--base-full),
        0px -64px 2px var(--base-full),
        64px 0 2px var(--base-full),
        -64px 0 2px var(--base-full);
    
    border-radius:24px;
    border:0px solid rgba(255,0,0,1);
    
  animation-name:run;
  animation-duration:4s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.state.client{
    z-index:999;
    position:fixed;
    top:50%;
    left:50%;
    background:rgba(255,0,0,0);
    width:24px;
    height:24px;
    box-shadow:
        45px 45px 2px var(--base-light),
        -45px 45px 2px var(--base-light),
        45px -45px 2px var(--base-light),
        -45px -45px 2px var(--base-light),
        
        0px 64px 2px var(--base-light),
        0px -64px 2px var(--base-light),
        64px 0 2px var(--base-light),
        -64px 0 2px var(--base-light);
    
    border-radius:24px;
    border:0px solid rgba(255,0,0,1);
    
  animation-name:run;
  animation-duration:4s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@-webkit-keyframes run {
    from { 
        transform:rotate(0deg) } 
    to 
        { transform:rotate(360deg) }
}
.state_ready{
    display:none;
}

.main_menu{
    background-color:var(--base-full);
    margin:0px;
    padding:0px;
}
.main_menu>*{
    margin-left:12px;
    /*font-weight:bold;*/
    font-size:110%;
    color:rgba(0,0,0,1);
    background:var(--base-light);
    border:1px solid var(--base-middle);
}

.clickable{
    display:initial;
    color:var(--base-full);
    /*background-color:var(--white);*/
    cursor:pointer;
}
.clickable:hover{
    color:var(--white);
    background-color:var(--base-full);
}
.att_val{
    background:var(--base-light);
}
.att_val:nth-child(even){
    background:var(--white);
}
.att,.val{
    display:inline-block;
    border:none;
    background:none;
}
.att{
    width:244px;
}
.val{
    width:calc(100% - 264px);
}
.marked{
    box-shadow:2px 4px 8px var(--base-full)!important;
}
#message_closer{
    position:absolute;
    right:2px;
}
.nulllevel{
    display:none;
}