.active {
    padding:4px;
    cursor:pointer;
    border-bottom:2px solid transparent ;
}
.active:hover{
    border-bottom:2px solid #ff6500; 
}
input[type=text]{
    border:1px solid transparent;
    background-color:#f3f3f3;
    outline: 0px;
    padding:8px;
    font-weight:normal;
    font-family:sans-serif;
    color:black;
}
.active-button {
    display:grid;
    grid-template-columns: 32px auto;
    gap:2px;
    align-items:center;
    border:2px solid #CAD5E0;
    cursor:pointer;
    
}
.active-button i {padding:4px;;}
.active-button:hover { border-color:#ff6500}

.system {display:grid; grid-template-columns: 45% 1px auto; gap:20px;  margin-left:5%; width:90%;}
.system .status .item {display:grid; grid-template-columns: 75px 8px auto; gap:2px;}
.input-form {display:grid; gap:2px;}
.input-form .item {display:grid; grid-template-columns: 125px auto; gap:2px; align-items:center;}
.input-form .item .label { font-weight:bold; padding-left:10px}
.fa-cog {color:#4682B4}
.fa-check {color:#00c6b3}
.fa-times {color:maroon}

.code {
    margin:4px;
    background:#000000 ;
    padding:8px;
    font-family: 'Courier New', Courier, monospace;
    color:#d3d3d3;
    font-size:12px;
    line-height: 2;
}

.tabs {display:grid; grid-template-columns: repeat(3,1fr) auto; gap:0px; align-items:center; text-align: center;}
.tab {border:1px solid transparent; border-bottom-color:#D3D3D3; font-weight:bold; padding:4px}

.tabs .selected {border-color:#CAD5E0; border-bottom-color:transparent; }
.system iframe {width:100%; height:100%; border:1px solid transparent;}
.data-info {height:90%; padding:8px;}
.fa-cloud {color:#4682B4}
.fa-database{color:#cc8c91}