/**
 * This file is for any css that you may want for this visualizer.
 *
 * Ideally, you would use the scss file also provided in this directory 
 * and then generate this file automatically from that. However, you can 
 * simply write css if you prefer
 */

.formula-editor {
    outline: none;
}

.formula-editor .button-group {
    margin-left: 0;
    margin-right: 0;
    height: 25px;
    background-color: #F7FAFF;
}

.formula-editor .toolbar-button {
    display: inline-block;
    position: relative;
    padding-top: 4px;
}

.formula-editor .toolbar-button .active {
    color: black;
}
.formula-editor .toolbar-separator {
    margin-left: 0;
    margin-right: 0;
    border-right: 1px solid #DADFE7;
    width: 0;
    height: 26px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.formula-editor .button {
    padding: 0px;
}

.formula-editor .dropdown-menu {
    min-width: auto;
}

.formula-editor .clist-elem {
    white-space: nowrap;
    padding-left: 2px;
    padding-right: 2px;
}

.formula-editor .clist-true {
    background-color: #00A000;
}

.formula-editor .clist-false {
    background-color: #A00000;
}

.formula-editor .dropdown-menu {
    padding: 0px;
    border: none;
}

.formula-editor .all-ok {
    color: #008000;
}

.formula-editor .hook-btn {
    position: absolute;
    right: 10px;
}

.formula-editor .network-status-btn {
    position: absolute;
    right: 30px;
}

.formula-editor .floating-btn-group {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 999;
    padding: 0px;
    height: 0px;
    margin: 0px;
    border: 0px;
}
.formula-editor .floating-translate-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1000;
    padding: 5px;
}

.formula-editor .configuration-dialog {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1000;
    padding: 5px;
    max-height: 50%;
    max-width: 50%;
    background-color: #C0C0C0;
    color: black;
    opacity: 0.75;
}