body {
    margin: 5;
    background-color: #bdbdbd;
    font-family: 'Lucida Sans';
}

.notebook{
    background-color: white;
    padding: 2%;
}

.notebook-title {
    color: #01080e;
    margin: 2%;
}

.notebook-sub-title {
    color: #a3a3a3;
    margin: 2%;
}

.notebook-cell {
    margin: 0px 15px 15px 15px;
    border: 1px solid #e0e0e0;
}

.notebook-cell:hover {
    border-left: solid 2px #2196f5;
}

#notebook-show-data table {
    
    border: solid 1px #bdbdbd;

}

#notebook-show-data  {
    margin: 5px 15px;
    text-align: right;
}

#notebook-show-data tr:nth-child(even) {
    background-color: #f5f5f5;
}

#notebook-show-data p {
    color: #64423d;
    background-color: #f2dedf;
    text-align: left;
    font-weight: bold;
    padding: 10px;
}

.fas {
    font-size: 75px;
    margin: 50px  auto;
}

.fas:hover {
    cursor: pointer;
    color: #2196f5;
}

.fa-keyboard {
    cursor: none;
    font-size: 16px;
    margin: 0 0 0 2%;
}

.fa-database {
    margin: 1% auto 2% 43%;
    padding: 2%;
}
div.der img{
    float: left;
    position: relative;
    border-radius: 1%;
    margin: 1%;
}

.help {
    float: right;
    position: relative;
    background: black;
    border-radius: 1%;
    margin: 1%;
    color: white;
    width: 33%;
    padding: 50px;
}

/* CODEMIRROR */

.CodeMirror {
    font-size:2em;
    border: 1px solid #eee;
    height: auto;
}

.CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}