/* new!!!!!! */
* {
    scrollbar-width: thin;
    /*scrollbar-color: rgba(194, 194, 194, 1) rgba(250, 250, 250, 0.5);*/
}  
/* /new!!!!!! */

body {
    margin: 1px;
}

.visualizer * {
    font-family: Ubuntu;
    /*font-size: 18px;*/
}

.visualizer {
    border: 1px solid #000;
    display: flex;
    width: 100%;
    height: calc(100vh - 2px);
    background: #fff;
    box-sizing: border-box;
    user-select: none;
}

.controls-zone {
    border: 1px solid #000;
    display: table-cell;
    width: 320px;
    min-width: 320px;
    vertical-align: top;
}

/*.centered {*/
/*    text-align: center !important;*/
/*}*/

/*.font-less {*/
/*    font-size: 0.8em;*/
/*}*/

/*.no-margin {*/
/*    margin: 0 !important;*/
/*}*/

/*.no-border {*/
/*    border: none !important;*/
/*}*/

/*.no-h-padding {*/
/*    padding-left: 0 !important;*/
/*    padding-right: 0 !important;*/
/*}*/

.v-scrollable {
    font-size: 18pt;
    height: calc(100vh - 70px);
    overflow-y: auto;
    border-top: 1px solid #000;
}

/* Style the tab */
.tab {
    overflow: hidden;
    /*border: 1px solid #ccc;*/
    background-color: #f1f1f1;
    display: flex;
}

/* Style the buttons inside the tab */
.tab button.tablinks {
    flex: 1;
    background-color: inherit;
    float: left;
    border: 1px solid #f1f1f1;
    outline: none;
    cursor: pointer;
    padding: 5px;
    transition: 0.3s;
    font-size: 17px;
}

.tab .load-update {
    flex: 0;
    display: flex;
}

/* Change background color of buttons on hover */
.tab button.tablinks:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.tablinks.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    /*padding: 6px 12px;*/
    /*border: 1px solid #ccc;*/
    /*border-top: none;*/
}

.progress-bar {
    border-radius: 10px;
    background-color: #ddd;
    position: relative;
}
.progress-bar > div {
    width: 0;
    height: 22px;
    border-radius: 10px;
    background-color: #09e;
}
.progress-bar > label {
    position: absolute;
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
    width: 100%;
    text-align: center;
}

/* Tooltips */
/*.tooltip .tooltiptext {*/
/*  visibility: hidden;*/
/*  width: 120px;*/
/*  background-color: #555;*/
/*  color: #fff;*/
/*  text-align: center;*/
/*  border-radius: 6px;*/
/*  padding: 5px 0;*/
/*  position: absolute;*/
/*  z-index: 1;*/
/*  !*bottom: 125%;*!*/
/*  !*left: 50%;*!*/
/*  !*margin-left: -60px;*!*/
/*  opacity: 0;*/
/*  transition: opacity 0.3s;*/
/*}*/

/*.tooltip:hover .tooltiptext {*/
/*  visibility: visible;*/
/*  opacity: 1;*/
/*}*/

.tooltip-text {
    position: absolute;
    display: none;
    background-color: white;
    opacity: 0.8;
    padding: 3px;
    margin-left: -10px;
    pointer-events: none;
    white-space: pre-wrap;
}
/*.tooltip-text:hover {*/
/*    background-color: yellow;*/
/*    transition: all 3s 3s ease;*/
/*}*/

table {
    border-collapse: collapse;
}

table th,td {
    padding: 2px 2px 2px 3px;
}

.left-menu-header {
    font-size: 21px !important;
    border: 1px solid #997950;
    border-radius: 6px;
    padding: 8px !important;
    color: #997950;
}


.left-menu-block {
    position: relative;
    font-size: 16px;
}

.left-menu-block_border {
    border: 1px solid #997950;
    border-radius: 6px;
    padding: 8px;
}

.left-menu-block + .left-menu-block_border {
    margin-top: 8px;
}

.left-menu-block_compact .left-menu-block__main {
    display: none !important;
}

.left-menu-block__short {
    display: none;
}

.left-menu-block__short p {
    padding: 0;
    margin: 0;
}

.left-menu-block_compact .left-menu-block__short {
    display: block;
}

.left-menu-block__header {
    padding-right: 70px;
    padding-left: 20px;
    color: #997950;
    font-size: 21px;
    line-height: 21px;
    margin: 0 !important;
    position: relative;
    display: block;
}

.left-menu-block__header::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #000;
    -webkit-mask-image: url("../icons/down_arrow.svg");
    mask-image: url("../icons/down_arrow.svg");
    background-color: #997950;
}

.left-menu-block_compact .left-menu-block__header::before {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#menu-visuals-view .left-menu-block__header {
    margin-bottom: 10px !important;
}

#menu-visuals-view.left-menu-block_compact .left-menu-block__header {
    margin-bottom: 0 !important;
}

.left-menu-block__short:not(:empty),
.left-menu-block__main {
    margin-top: 10px;
}

.left-menu-block__button {
    position: absolute;
    top: 2px;
    right: 2px;
}

.left-menu-block_compact .menu-visuals-view-class {
    display: none !important;
}