.column-select p {
    margin: 0;
}

.column-select {
    margin-bottom: 15px;
    margin-top: 10px;
}

.sidebar {
    background-color: gainsboro;
}

.view-params {
    margin-right: 10px;
    cursor: pointer;
    max-width: 100%;
}

.view-buttons {
    margin-top: 20px;
    color: white;
}

.param-close {
    font-size: 15px
}

.viewer-sections {
    margin-bottom: 30px;
}

.custom.alert {
    position: fixed;
    right: 10px;
    margin-top: 20px;
    z-index: 9999;
}

.btn {
    font-size: 12px;
}

.dropdown-item {
    font-size: 12px;
    font-weight: bold;
}

.table thead th {
    border-bottom: 0px solid #dee2e6;
}

.case_important {
    background-color: rgba(67, 255, 8, 0.1) !important;
}

.sidebar.right {
    position: fixed;
    height: 100%;
    right: 0;
}

.tracer.red {
    color: #FF0000;
}

.tracer.yellow {
    color: #FFFF00;
}

.tracer.violet {
    color: #EE82EE;
}

.tracer.green {
    color: #008000;
}

.tracer.deeppink {
    color: #FF1493;
}

td>img {
    cursor: pointer;
}

.carousel-caption {
    left: 1%;
    right: 1%;
    font-size: 12px;
}

.navbar-text {
    margin-right: 20px;
}

.navbar-text>.badge {
    font-size: 90%;
}

span.badge.badge-pill.clickable {
    cursor: pointer;
}

.tooltip-inner {
    text-align: left;
}

g:hover {
    stroke-width: 40;
}

g.selected {
    stroke-width: 150 !important;
}

/* svg {
    width: 100% !important;
    height: 100% !important;
    display: inline-block;
} */

brain {
    white-space: nowrap;
    overflow: auto;
}

brain>div {
    white-space: nowrap;
    display: inline-block;
}

brain>p {
    text-align: center;
}

.fa-spinner {
    top: 50%;
    left: 50%;
    position: fixed;
    font-size: 50px;
}

.btn-xs {
    padding: 0.15em 0.25em;
}

.toggle-btn {
    background-color: gainsboro;
    color: black;
}

.badge p {
    text-overflow: ellipsis;
    width: 100px;
    overflow: hidden;
    display: inline-block;
}

.badge p,
.add-ellipsis {
    text-overflow: ellipsis;
    max-width: 94%;
    overflow: hidden;
    display: inline-block;
}

.add-ellipsis-table {
    text-overflow: ellipsis;
    max-width: 200px;
    overflow: hidden;
    display: inline-block;
}

#carousel {
    position: relative;
    height: 400px;

    overflow: hidden;
}

#carousel div {
    position: absolute;
    transition: transform 1s, left 1s, opacity 1s, z-index 0s;
    opacity: 0.3;
    width: 100%;
}

#carousel div svg {
    width: 100%;
    transition: width 1s;
}

#carousel div.hideLeft {
    left: 0%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
    width: 100%;
}

#carousel div.hideLeft svg {
    width: 50%;
}

#carousel div.hideRight {
    left: 100%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
    width: 100%;
}

#carousel div.hideRight svg {
    width: 50%;
}

#carousel div.prev {
    z-index: 5;
    left: 30%;
    transform: translateY(10px) translateX(-50%);
    width: 100%;
}

#carousel div.prev svg {
    width: 90%;
}

#carousel div.prevLeftSecond {
    z-index: 4;
    left: 15%;
    transform: translateY(20px) translateX(-50%);
    opacity: 0.1;
    width: 100%;
}

#carousel div.prevLeftSecond svg {
    width: 80%;
}

#carousel div.selected {
    z-index: 10;
    left: 50%;
    transform: translateY(0px) translateX(-50%);
    opacity: 1;
    width: 100%;
}

#carousel div p {
    display: none;
}

#carousel div.selected p {
    display: block;
    text-align: center;
}

#carousel div.next {
    z-index: 5;
    left: 70%;
    transform: translateY(10px) translateX(-50%);
    s width: 100%;
}

#carousel div.next svg {
    width: 90%;
}

#carousel div.nextRightSecond {
    z-index: 4;
    left: 85%;
    transform: translateY(20px) translateX(-50%);
    opacity: 0.1;
    width: 100%;
}

#carousel div.nextRightSecond svg {
    width: 80%;
}

.buttons {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

svg {
    /* width: 100% !important; */
    height: 100% !important;
    display: inline-block;
}

g:not(.active) {
    fill: rgb(102, 100, 100);
}

.home.image {
    height: 50px;
}

.carousel-inner img {
    width: 100%;
    height: 100%;
}

.selected_regions_div {
    height: 50px;
}

.form-check-label {
    cursor: pointer;
}

a {
    cursor: pointer;
}

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
    padding-top: 10px;
    z-index: 1020 !important;
    /* width:calc(100% / 2.85) !important; */
}

.ui-state-focus {
    background: none !important;
    background-color: #f8f9fa !important;
    border: none !important;
    color: navy !important;
}

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
    color: navy !important;
    width: calc(100% / 4.1) !important
}

.tooltip-inner {
    max-width: 600px;
}

.help {
    max-width: 580px;
}

.disable_div {
    opacity: 0.4;
    pointer-events: none;

}

.search-toggles {
    margin-top: 15px;
    margin-bottom: 15px;
}

.viz-search {
    margin-left: 20px;
}

.text-search {
    margin-left: 20px
}

.show_viewer {
    display: block;
    transform: translateX(0%);
    transition: transform 500ms;
}

.hide_viewer {
    transform: translateX(100%);
    transition: transform 500ms;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

span.text_active {
    background-color: darkblue;
    color: white;
}

.custom-range {
    background: #666464;
    border-radius : 30px;
    background-color:none !important;
    height: 14px;
}