core.css

:root {
    --sidebar-width: 210px;
}

body {
  background-color: #fbfbfb;
}


span#goTop, span#project-version{
  position: fixed;
  right: 1em;
  bottom: 1em;
  background-color: #fafbfc; 
}


.select2-container {
	padding: 5px
}

.select2-selection__choice{
	background-color: #ced4da;
	filter: drop-shadow(-1px 1px 1px rgba(50, 50, 0, 0.5));
}


div#searchbox {
    display: flex;
    margin: 0 auto 0 auto;
}
#process-query {
    font-size: 1.1em;
    height: 2.8em;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    padding-left: .75em;
    outline: none;
}
button#query {
    color: white;
    background-color: #0d6efd;
    border: 0;
    border-radius: 0 5px 5px 0;
    height: 2.8em;
    font-size: 1.1em;
    font-weight: 600;
    flex-grow: 1;
    outline: none;
}
button#query:hover {
    background-color: #2779bd;
}

progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 5px;
    width: 100%;
    background-color: transparent;
    border: 0;
    margin: 5px 0;
}
progress::-webkit-progress-bar {
    background-color: transparent;
}
progress::-webkit-progress-value {
    background-color: #3490dc;
}
progress::-moz-progress-bar {
    background-color: #3490dc;
}
span#status {
    float: right;
    font-size: 80%;
}

.checkbox-type-module{
    margin-left: 5px
}



/*JSON Parser*/
#core-format-picker {
    padding: 5px;
    border-radius: 5px;
    background-color: #f9f9f9;
    border: 1px solid #e1e1e1;
}
#core-format-picker .selectable-key {
    font-weight: bold;
    padding: 2px 3px;
}
#core-format-picker .selectable-key:hover {
    box-shadow: 0 0 5px #00000077;
    cursor: pointer;
}

#core-format-picker .selectable-value {
    padding: 2px 3px;
}
#core-format-picker .selectable-value:hover {
    box-shadow: 0 0 5px #00000077;
    font-weight: bold;
    cursor: pointer;
}

#core-format-picker .children-counter {
    background-color: #6b6b6b;
    color: #ffffff;
    padding: 2px 3px;
    margin: 0px 0.25rem;
    font-size: smaller;
    border-radius: 3px;
}
#core-format-picker .collaspe-button {
    cursor: pointer;
}
#core-format-picker .collaspe-button:hover {
    color: #292929;
    cursor: pointer;
}
/**/



.round-button {
    width: 3%;
}
.round-button-circle {
    padding-bottom: 100%;
    border-radius: 50%;
          
    background: #e13333; 
    box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
    background:#c41313;
    cursor: pointer;
}
.round-button a {
    float:left;
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
    color:#e2eaf3;

    text-decoration:none;
}

.side-panel-config {
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 2px 10px 0px;
    border-radius: 10px;
    height: 75vh;
    position: fixed;
    max-width: calc((100%) / 2 - 1*var(--bs-gutter-x) * .5);
    right: calc(var(--bs-gutter-x) * .5);
}

#sidebar-nav {
    width: var(--sidebar-width);
}
#sidebar .sidebar-menu-wrapper {
    position: fixed;
}
#sidebar.collapsing .sidebar-menu-wrapper {
    position: relative !important;
}

@media (min-width: 992px) {
    .side-panel-config {
        max-width: calc((100% - 200px) / 2 - 1*var(--bs-gutter-x) * .5);
    }
}