.content-body {
    background-color: var(--dashboard-background_color);
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}
.dashboard-alignment-assist {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}

.dashboard-buttons {
    position: absolute;
    right: 10px;
    top: 65px;
    display: flex;
    height: 22em;
    flex-direction: column;
    justify-content: space-between;
}
.dashboard-buttons .dashboard-config {
    width: 23px;
    color: var(--dashboard-font_color);
    font-size: 23px;
    text-align: center;
    z-index: 100;
}
.dashboard-buttons .dashboard-config div{
    cursor: pointer;
    margin-top: 12px;
    margin-bottom: 12px;
}

#dashboard_config:hover{
    animation: spin 500ms linear;
}
#dashboard_config_popup, #change_dashboard_popup {
    width: 215px;
    max-height: 80%;
    padding: 0;
    border: 0;
    border-radius: 5px;
    position: fixed;
    right: 50px;
    z-index: 101;
}
#dashboard_config_popup {
    overflow-y: auto;
}
#change_dashboard_popup {
    width: 290px;
    height: 100px;
}
#change_dashboard_popup .panel-actions {
    width: 90%;
    display: flex;
    justify-content: space-between;
}

.custom-dashboard > .shadow-chart {
    min-width: 2%;
    min-height: 20px;
}

.custom-dashboard > .chart-div {
    min-width: 4%;
    min-height: 35px;
}

.custom-dashboard > .chart-div > .chart-inner {
    background-color: var(--dashboard-panel_color);
}

.custom-dashboard > .chart-div:hover .resize-handle-skin {
    border-bottom: 2px solid var(--dashboard-font_color);
    border-right: 2px solid var(--dashboard-font_color);
}
.custom-dashboard > .chart-div > .chart-inner > .chart-header.hidden-header {
    position: absolute;
    width: 100%;
}

.custom-dashboard > .chart-div > .chart-inner > .chart-content {
    background-color: var(--dashboard-panel_color);
}
.custom-dashboard > .chart-div > .chart-inner > .chart-content.hidden-header {
    background-color: var(--dashboard-panel_color);
    height: 100%;
}

.panel-primary .panel-heading {
	background-color: var(--panel-head-background) !important;
	border-color: var(--panel-border-color) !important;
}

.panel-featured-primary {
	border-color: var(--panel-featured-border-color);
}
.panel-featured-primary .panel-title {
    color: var(--panel-featured-color);
}

.panel-actions i{
	margin-left: 10px;
	color: var(--panel-body-color);
	margin-bottom: 10px;
    font-size: 20px;
}

.panel-actions:hover i{
	cursor: pointer;
}

.modal-block {
    margin-top: 5vh;
	max-width: 900px;
	margin-right: 0;
}

#edit_popup section .panel-body{
    max-height: 85vh;
    overflow: auto;
}

#chart_preview_background {
    background-color: var(--dashboard-background_color);
    padding: 10px;
}
#chart_preview_background > #chart_preview_div {
    position: relative;
	min-height: 300px;
    max-height: 300px;
}
#chart_preview_background > #chart_preview_div > #chart_preview_header {
    background-color: var(--dashboard-panel_color);
    height: 25px;
    color: #ffffffaa;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}
#chart_preview_background > #chart_preview_div > #chart_preview_content {
    background-color: var(--dashboard-panel_color);
    height: calc(300px - 25px);
    color: #ffffffaa;
    text-align: center;
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    overflow: hidden;
}
#chart_preview_background > #chart_preview_div > #chart_preview_header.hidden-header {
    position: absolute;
    width: 100%;
    z-index: -1;
}
#chart_preview_background > #chart_preview_div > #chart_preview_content.hidden-header {
    background-color: var(--dashboard-panel_color);
    height: 300px;
}

#chart_style {
    max-height: 300px;
	overflow-y: auto;
}

.custom-dashboard > .chart-div > .chart-config {
    height: 18px;
    position: absolute;
    width: 18px;
    right: 7px;
    top: 5px;
	cursor: pointer;
    color: var(--dashboard-font_color);
    display: none;
}
.custom-dashboard > .chart-div:hover .chart-config {
    display: inherit;
}
.custom-dashboard > .chart-div > .transparent-background {
    background-color: transparent !important;
    border: none;
}
.custom-dashboard > .chart-div > .chart-inner > .transparent-background {
    background-color: transparent !important;
    border: none;
}

#chart_preview_div > .transparent-background {
    background-color: transparent !important;
    border: none;
}

.sensor-list button{
    overflow: hidden;
}

#value-mapping_list tbody {
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.item-list-div {
    padding: 8px;

}
.item-list-div table {
    min-width: 700px
}
.item-list-div tbody > tr > .general-remove-item:hover{
    color: #d32e2e;
}

#chart_style label{
    margin-top: 5px;
}
.chart-style label {
    margin-top: 5px;
}
#text_style .text-font-style, #gauge_style .gauge-font-style, #value_style .value-font-style{
    font-size: 25px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--panel-body-color);
    text-align: center;
    cursor: pointer;
    box-shadow: 2px 2px var(--panel-body-color);
}
#text_style .text-font-style.selected, #gauge_style .gauge-font-style.selected, #value_style .value-font-style.selected{
    background-color: var(--primary-site-color);
    color: var(--auxiliar-text-color);
}

.switch-div {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bubble {
    position: absolute;
    right: 60px;
    top: 222px;
    font-family: system-ui;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    width: 300px;
    background: #2F5680;
    /* background: #802F31; */
    border-radius: 40px;
    padding: 24px;
    text-align: center;
    color: #ffffff;
}
.bubble-bottom-right:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 12px solid transparent;
    border-right: 24px solid #2F5680;
    border-top: 12px solid #2F5680;
    /* border-right: 24px solid #802F31;
    border-top: 12px solid #802F31; */
    border-bottom: 20px solid transparent;
    right: -14px;
    bottom: 0px;
    transform: rotate(-39deg);
}

div.dropdown-menu.open {
    position: relative !important;
    top: 1px !important;
    max-height: 250px !important;
    min-height: 20px !important;
    max-width: 300px !important;
}
  
ul.dropdown-menu.inner {
    max-height: 200px !important;
    min-height: 20px !important;
    max-width: 300px !important;
}

.fullscreen-display {
    display: none;
}

.fullscreen-bg {
    background: transparent;
}

.fullscreen-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 20px;
}

.editing-header {
    border: 1px dashed #0000ff77;
    border-left-style: solid;
    border-right-style: solid;
    padding: 3px 0;
    background-color: #0000ff33;
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}
.editing-div {
    padding: 0;
    padding-bottom: 5px;
}
.editing-div.on-edit {
    border: 1px solid blue;
    border-top: none;
    transition: border-color 200ms linear;
}

.chart-range-label {
    position: absolute;
    right: 16px;
    bottom: 25px;
    text-align: right;
}

.fake-select {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    color: var(--form-control-color);
}

.fake-select-icon-options, .fake-select-options {
    display: flex;
    font-size: 25px;
    flex-flow: row wrap;
    overflow-y: auto;
    background-color: var(--select-background);
    border: 1px solid #cccccc;
    max-height: 90px;
    overflow-y: auto;
}
.fake-select-icon-options.hidden, .fake-select-options.hidden {
    display: none;
}
.fake-select-icon-options div {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fake-select-icon-options div:hover, .fake-select-options div:hover {
    background-color: #ff5100;
    color: #d6d6d6;
}
.fake-select-options div {
    width: 100%;
    height: 30px;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    padding-left: 5px;
}

#context_menu {
    position: absolute;
    background-color: var(--select-background);
    color: var(--form-control-color);
    display: flex;
    z-index: 9999999999999999;
    flex-direction: column;
    border-radius: 2px;
    border: 1px solid #9d938f;
    font-size: 1.2em;
    font-family: system-ui;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}
#context_menu.hidden {
    display: none;
}
#context_menu span {
    padding: 0.3em;
    cursor: pointer;
}
#context_menu span:hover {
    background-color: #ff5100;
    color: #d6d6d6;
}
#context_menu span i {
    margin-right: 0.2em;
}


.sortable {
    cursor: ns-resize;
}
.sortable label {
    cursor: ns-resize;
}
.sortable label, .sortable input {
    margin: 0 !important;
}
.sortable span {
    font-size: smaller;
    font-weight: bold;
}
.sortable div {
    margin: 2px;
    border: 1px solid var(--form-control-border);
    border-radius: 3px;
}
.sortable div:hover {
    background-color: var(--table-row-background);
}


#dashboard-background_image_div {
    position: absolute;
    left: 0;
    top: 54px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.help-header {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
  }
.help-header:hover, .help-header:hover .help-header-arrow {
    color: var(--primary-site-color);
}
.help-header .help-header-arrow{
    transition: 500ms ease-in-out;
    color: var(--panel-body-color);
}
.help-header .help-header-arrow.flip{
    transform: rotateZ(180deg);
}

[data-tip] {
	position:relative;

}
[data-tip]:before {
	content:'';
	/* hides the tooltip when not hovered */
	display:none;
	content:'';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #1a1a1a;	
	position:absolute;
	top:30px;
	left:35px;
	z-index:8;
	font-size:0;
	line-height:0;
	width:0;
	height:0;
}
[data-tip]:after {
	display:none;
	content:attr(data-tip);
	position:absolute;
	top:35px;
	left:0px;
	padding:5px 8px;
	background:#1a1a1a;
	color:#fff;
	z-index:9;
	font-size: 12px;
	height: auto;
	line-height: 18px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space:pre-line;
	word-wrap:normal;
    max-width: 184px;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
	display:block;
}


.profile-menu {
    position: absolute;
    top: -70px;
    right: -20px;
    z-index: 9999;
}


.charmap {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}
.charmap .charmap-border{
    margin: 10px;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
}
.charmap .charmap-border:hover{
    background: linear-gradient(to left, var(--secondary-site-color), #ddd, var(--secondary-site-color));
}
.charmap .charmap-border.selected{
	background: linear-gradient(to left, var(--primary-site-color), #bacffc, var(--primary-site-color));
}
.charmap .charmap-border.selected .charmap-symbol{
    color: var(--primary-site-color);
    border: none;
}
.charmap .charmap-border .charmap-symbol {
    display: flex;
    flex-direction: column;
    height: 130px;
    width: 100px;
    align-items: center;
    justify-content: center;
    color: var(--panel-body-color);
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: var(--form-control-background) !important;
}
.charmap .charmap-border .charmap-symbol .ascii-char {
    font-size: 18px;
    height: 30px;
}
.charmap .charmap-border .charmap-symbol .font-symbol {
    font-size: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}


/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 100%;
      -webkit-appearance: none;
      background-color: var(--alert-info-background);
      height: 8px;
      border-radius: 4px;
      margin-top: 10px;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: var(--alert-info-background);
      margin-top: -5px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 15px;
      -webkit-appearance: none;
      height: 15px;
      cursor: ew-resize;
      background: var(--alert-info-color);
      box-shadow: -200px 0 0 200px var(--alert-info-color);
      border-radius: 50%;
    }

}

/* Mozilla */
input[type=range]{
    /* fix for FF unable to apply focus style bug  */
    border: 1px solid var(--alert-info-background); 

    /*required for proper track sizing in FF*/
    width: 300px;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: var(--alert-info-background);
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    cursor: ew-resize;
    background: var(--alert-info-color);
    box-shadow: -200px 0 0 200px var(--alert-info-color);
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid var(--alert-info-background);
    outline-offset: -1px;
}

input[type=range]:focus::-moz-range-track {
    background: var(--alert-info-background);
}


@font-face {
    font-family: 'journal-dingbats-3';
    src: url('../../static/imports/font-journal-dingbats-3/JournalDingbats3.ttf');
}
@font-face {
    font-family: 'hazard-signs';
    src: url('../../static/imports/hazard-signs/HazardSigns.ttf');
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

/* CUSTOM VALUE ANIMATIONS */
@keyframes horizontal_scroll {
    from {transform: translateX(100%); }
    to {transform: translateX(-100%); }
}
@keyframes blink {
    0% {opacity: 1;}
    12.5% {opacity: 0;}
    25% {opacity: 1;}
    37.5% {opacity: 0;}
    50% {opacity: 1;}
    62.5% {opacity: 0;}
    75% {opacity: 1;}
    87.5% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes popoutin {
    0% {
      transform: scale(1);
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    25% {
      transform: scale(1.7);
      text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
    }
    50% {
      transform: scale(1);
      text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
    }
    75% {
        transform: scale(1.7);
        text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
      }
    100% {
    transform: scale(1);
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
    }
  }

  @keyframes glow {
    0% {
        text-shadow: none;
        filter: brightness(0.8);
    }
    25% {
        text-shadow: 0 0 8px;
        filter: brightness(1)
    }
    50% {
        text-shadow: none;
        filter: brightness(0.8);
    }
    75% {
        text-shadow: 0 0 8px;
        filter: brightness(1)
    }
    100% {
        text-shadow: none;
        filter: brightness(0.8);
    }
  }