div.table { 
    display: block;
     background-color:; 
}

/*
select {
    border: 2px solid var(--osl-blue);
    border-radius:var(--default-border);
    background-color:white;
    color: var(--osl-blue);
    box-sizing: border-box;
}*/
  
input {
    border: 1px solid var(--osl-blue);
    border-radius: var(--default-radius);
}

input[type=text], input[type=password] {
    box-sizing: border-box;
    padding:1px 3px;
    background-color: white;
    color: var(--osl-blue);
    text-align:left;
}
  
input[type=submit] {
    background-color:white;
    padding:5px;
    color: var(--osl-blue);
    cursor: pointer;
    text-align:center;
}

input[type=submit]:hover {
    background-color: var(--osl-blue);
    color: #fff;
}
  
div.tr { 
    display:table-row; 
}
    
div.td, 
#login-top p { 
    display:table-cell; 
    padding:5px 10px;   
}
  
input[type="range"] {
    height: 23px;
    width: 200px;
    background: repeating-linear-gradient(90deg, black, black 3px, transparent 1px, transparent 100px) repeat-x scroll 5.8% -7% / 91.9px 7px transparent;
    border: 0;
}
  
input[type="range"]::-moz-range-thumb {
    height:10px;
    width:15px;
}

input[type="range"]::-moz-range-thumb:active {
    border: 3px solid var(--osl-blue);
}
  
input[type="range"]::-moz-range-track {
    background-color:white;
    border: 2px solid var(--osl-blue); 
}

.range:active {
    height: 23px;
    width: 200px;
    background: repeating-linear-gradient(90deg, black, black 3px, transparent 1px, transparent 100px) repeat-x scroll 3% 17px / 23.3px 7px transparent;
}
  
.positive {
    color: #00AD00;
    color: var(--osl-green);
    padding: 3px;
    font-size: 1.1em;
}

.negative {
    color: red;
    color: var(--osl-red);
    border-width: 1px;
    border-style: solid;
    border-color: red;
    border-color: var(--osl-red);
    padding: 3px;
}

/* div result err msg as opposed to input.negative */
#lucalc_form div.negative {
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
    margin: 4px 0;
}

#lucalc_form div.table {
    padding-bottom: 3px;
}

.lucalc-table input[type='radio'] {
    margin-right: 5px;
    vertical-align: text-top;
}

@media (max-width: 480px) {
    
    #lucalc_form div.tr.tr-ranged,
    #lucalc_form div.tr.tr-ranged > div.td > input,
    #lucalc_form div.tr.tr-submit-result {
        display: block;
    }
    
    #lucalc_form div.tr.tr-ranged > div.td.td-propname {
        display: block;
        padding-bottom: 0;
    }
    
    #lucalc_form div.tr.tr-submit-result > div.td.td-empty {
        display: none;
    }
    
    #lucalc_form div.negative {
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 5px;
    }
    
    #lucalc_form  div.positive {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 359px) {

    #lucalc_form div.tr.tr-ranged > div.td {
        display: block;
    }
    
    #lucalc_form div.tr.tr-ranged > div.td > input {
        margin-left: 38px;
    }
    
}