#visual-console-container { margin: 0px auto; position: relative; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; margin-top: 5px; z-index: 0; } .is-maintenance { background-image: url(maintenanceMode.png) !important; } .is-maintenance :nth-child(1) { display: none; } .visual-console-item { position: absolute; display: flex; flex-direction: initial; justify-items: center; align-items: center; user-select: text; z-index: 1; } .visual-console-item.is-on-top { z-index: 2; } .visual-console-item * { overflow: visible; font-family: inherit; } .visual-console-item.is-editing { border: 2px dashed #b2b2b2; transform: translateX(-2px) translateY(-2px); user-select: none; } .visual-console-item.is-editing:hover { border-color: #82b92e; } .visual-console-item.is-editing.is-selected { border: 2px dashed #2b2b2b; cursor: move; z-index: 10; } .visual-console-item.is-editing > .resize-draggable { float: right; position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIAoJeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAKCXhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE1cHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDE1IDE1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNSAxNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+Cgk8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNCMkIyQjIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwLjU2MiIgeTE9IjM2LjMxNyIgeDI9IjE0LjIzMSIgeTI9IjIyLjY0OCIvPgoJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjJCMkIyIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNC45NzEiIHkxPSIzNi41OTUiIHgyPSIxNC40MDkiIHkyPSIyNy4xNTUiLz4KCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IyQjJCMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjEwLjAxNyIgeTE9IjM2LjQzMyIgeDI9IjE0LjIzMSIgeTI9IjMyLjIxOCIvPgoJPGcgaWQ9ImpHRWVLbl8xXyI+CgoJCTxpbWFnZSBvdmVyZmxvdz0idmlzaWJsZSIgd2lkdGg9IjQ2IiBoZWlnaHQ9IjM3IiBpZD0iakdFZUtuIiB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80QUFRU2taSlJnQUJBZ0VBU0FCSUFBRC83QUFSUkhWamEza0FBUUFFQUFBQUhnQUEvKzRBSVVGa2IySmxBR1RBQUFBQUFRTUEKRUFNQ0F3WUFBQUdSQUFBQnN3QUFBZ0wvMndDRUFCQUxDd3NNQ3hBTURCQVhEdzBQRnhzVUVCQVVHeDhYRnhjWEZ4OGVGeG9hR2hvWApIaDRqSlNjbEl4NHZMek16THk5QVFFQkFRRUJBUUVCQVFFQkFRRUFCRVE4UEVSTVJGUklTRlJRUkZCRVVHaFFXRmhRYUpob2FIQm9hCkpqQWpIaDRlSGlNd0t5NG5KeWN1S3pVMU1EQTFOVUJBUDBCQVFFQkFRRUJBUUVCQVFQL0NBQkVJQUNZQUx3TUJJZ0FDRVFFREVRSC8KeEFCNUFBRUJBUUVCQUFBQUFBQUFBQUFBQUFBQUFRUUNCZ0VCQUFBQUFBQUFBQUFBQUFBQUFBQUFBQkFBQVFRREFBQUFBQUFBQUFBQQpBQUFBQVFBeEFnTVFNQklSQUFFQkJnVUZBUUFBQUFBQUFBQUFBQUVDQUJFaFFXRURFQ0J4a1JJd01ZRXlFd1FTQVFBQUFBQUFBQUFBCkFBQUFBQUFBQURELzJnQU1Bd0VBQWhFREVRQUFBUGZBUzV6VFpUa0dQclVMWlFBQUQvL2FBQWdCQWdBQkJRRFQvOW9BQ0FFREFBRUYKQU5QLzJnQUlBUUVBQVFVQXpKZzJTUUJDMmQwdzJiWlN2Vk5jNW9NdUF1UXVBdVJwLzlvQUNBRUNBZ1kvQUIvLzJnQUlBUU1DQmo4QQpILy9hQUFnQkFRRUdQd0RFNlpYbUFZcXR3c0pCSEk5MUdsTXFudlQrZTM3UUwxa1MwYjdYQndBRHJWb1FDUlhHZTVhZTVhZTVhZms5CkgvL1oiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTQ2Ljg3NSAtOS44OTA2KSI+CgkJPC9pbWFnZT4KCTwvZz4KCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IyQjJCMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjEzLjQ4MyIgeTE9IjAuNjQ0IiB4Mj0iMC44MjgiIHkyPSIxMy4zMDEiLz4KCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IyQjJCMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjEzLjczNCIgeTE9IjUuMTQxIiB4Mj0iNS4zMjUiIHkyPSIxMy41NDkiLz4KCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IyQjJCMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjE0LjIzMSIgeTE9IjkuMzg4IiB4Mj0iOS44MDYiIHkyPSIxMy44MTMiLz4KPC9zdmc+Cg==); cursor: se-resize; z-index: 10; } .visual-console-item.is-editing :first-child { pointer-events: none; } @keyframes spinner-loading { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } .visual-console-item.is-alert-triggered { border: 3px solid #f36201; } .visual-console-spinner { background-color: transparent; margin: 0px auto; border-top: 5px solid rgb(82, 85, 87); border-right: 5px solid rgb(82, 85, 87); border-bottom: 5px solid rgb(82, 85, 87); border-left: 5px solid rgba(82, 85, 87, 0.2); animation-name: spinner-loading; animation-duration: 0.8s; animation-iteration-count: infinite; animation-timing-function: linear; } .visual-console-spinner, .visual-console-spinner :after { display: block; width: 32px; height: 32px; border-radius: 50%; } .visual-console-spinner.small, .visual-console-spinner.small :after { width: 12px; height: 12px; } .div-visual-console-spinner { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; opacity: 0.7; background: rgb(212, 215, 218); z-index: 10; } .show-elements { display: inline-block; } .hide-elements { display: none; } /*Forms*/ .div-input-group label { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; font-size: 12pt; font-weight: 600; color: #343434; margin-right: 10px; } .div-input-group label img { margin-left: 4px; } .div-input-group input[type="text"], .div-input-group input[type="number"] { height: 25px; font-size: 10pt; background-color: transparent; border: none; border-radius: 0; border-bottom: 1px solid #ccc; font-weight: lighter; padding: 0px 0px 2px 0px; box-sizing: border-box; margin-right: 10px; padding-left: 2px; } .div-input-group input[type="radio"] { margin-right: 10px; width: 17px; height: 17px; } .div-input-group select { font-weight: lighter; font-size: 10pt; } .input-groups { display: flex; flex-direction: column; flex-wrap: wrap; } .input-group { width: 100%; margin-bottom: 25px; padding-left: 20px; } .div-ranges-input-group { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; } .div-ranges-input-group > div { padding-left: 20px; margin-top: 10px; } .div-input-group, .div-input-group div div { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } .div-input-group h3 { text-transform: initial; text-align: center; font-style: italic; text-decoration: underline; margin: 0 auto; } .div-input-group div div a { margin-left: 10px; } .div-input-group-autocomplete-agent { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; height: 70px; } .div-input-group-inside { padding-left: 20px; } .input-group-link-console { height: 70px; } .show-elements > div.div-input-group-autocomplete-agent { margin-left: 20px; } .img-vc-elements { margin-left: 10px; } input.error-input-validate[type="number"], input.error-input-validate[type="text"], select.error-input-validate { border: 1px solid #c00; } select.error-input-validate:focus { outline-color: #c00; } p.error-p-validate { width: 100%; color: #c00; } /* Styles for the solid icons */ .fa { display: inline-block; margin: 0; } .fa, .fa > svg, .fa.medium, .fa.medium > svg { width: 28px; height: 28px; } .fa.fa-small, .fa.fa-small > svg { width: 14px; height: 14px; } .fa.fa-large, .fa.fa-large > svg { width: 44px; height: 44px; } .fa-spin { animation: fa-spin 2s infinite linear; } .fa-pulse { animation: fa-spin 1s infinite steps(8); } @keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .autocomplete { /*the container must be positioned relative:*/ position: relative; display: inline-block; } .autocomplete input { /*background: pink;*/ } .autocomplete-items { border: 1px solid #d4d4d4; border-bottom: none; border-top: none; /*position the autocomplete items to be the same width as the container:*/ position: absolute; z-index: 1; overflow: auto; max-height: 150px; max-width: 250px; } .autocomplete-items div { width: 100%; padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4; } .autocomplete-items div:hover { width: 100%; background-color: #e9e9e9; } .autocomplete-active { /*when navigating through the items using the arrow keys:*/ background-color: DodgerBlue !important; color: #ffffff; } /* Digital clock */ .visual-console-item .digital-clock { display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; justify-content: center; justify-items: center; align-content: center; align-items: center; } .visual-console-item .digital-clock > span { /* To improve legibility */ text-rendering: optimizeLegibility; text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; } .visual-console-item .digital-clock > span.time { font-size: 50px; } .visual-console-item .digital-clock > span.date { font-size: 25px; } .visual-console-item .digital-clock > span.timezone { font-size: 25px; } /* Analog clock */ .visual-console-item .analogic-clock { text-align: center; } .visual-console-item .analogic-clock .hour-hand { animation: rotate-hour 43200s infinite linear; } .visual-console-item .analogic-clock .minute-hand { animation: rotate-minute 3600s infinite linear; } .visual-console-item .analogic-clock .second-hand { animation: rotate-second 60s infinite linear; } #html-tabs .ui-widget-header { background-color: #ffffff; border: 0px; } #html-tabs .ui-tabs-anchor { float: none; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } #html-tabs .ui-tabs-anchor img { margin-right: 10px; } #html-tabs .ui-tabs-nav li { border-radius: 5px 5px 0px 0px; } label span.p-slider { width: 30px; } li.interval-color-ranges > label, li#li-default-ranges > label { margin-right: 15px; } li.interval-color-ranges > input[type="number"], li#li-default-ranges > input[type="number"] { width: 80px; } li.interval-color-ranges > label:not(:first-child), li#li-default-ranges > label:not(:first-child), li#li-size-item > label:not(:first-child), li#li-position-item > label:not(:first-child) { width: initial; margin-left: 15px; } li#li-image-item label { display: flex; flex-direction: row; justify-content: flex-end; } li#li-image-item label img { flex: initial; } .discovery.modal * { font-weight: normal; color: #343434; } .discovery.modal select { width: 100px; } .discovery.modal div#period_manual select, .discovery.modal div#period_manual input, .discovery.modal div#period_default select, .discovery.modal div#cacheExpiration_manual select, .discovery.modal div#cacheExpiration_manual input, .discovery.modal div#cacheExpiration_default select { font-size: inherit !important; } .discovery.modal div#period_default select#period_select, .discovery.modal div#cacheExpiration_default select#cacheExpiration_select { max-width: 230px; width: inherit; } li#li-timeZone-item > label:not(:first-child), .discovery.modal li#div-textarea-label > label { flex: inherit; } li#li-timeZone-item > select:not(:first-child) { margin-left: 10px; } .discovery.modal li#div-textarea-label table tbody td.mceIframeContainer { background-color: #ededed; } /*style item group show statistic*/ .group-container { display: flex; flex-direction: column; width: 100%; height: 100%; } .group-container .group-item-title { width: 100%; height: 30%; background-color: #9d9ea0; color: black; font-weight: bold; display: flex; flex-direction: row; align-items: center; justify-content: center; } .group-container .group-item-info { width: 100%; height: 70%; display: flex; flex-direction: row; flex-wrap: wrap; padding: 2%; align-items: center; } .group-container .group-item-info .group-item-info-container { flex: 1 1 20%; display: flex; flex-direction: row; border-radius: 2px; max-height: 50px; min-height: 35px; margin: 1%; } .group-container .group-item-info .group-item-info-container .value-style { flex: 1; color: #fff; font-size: 100%; padding: 0%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; } .group-container .group-item-info .group-item-info-container .name-style { flex: 1; background-color: white; color: black; font-size: 100%; padding: 0%; width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; } div.label, div.simple-value { min-width: fit-content; min-height: fit-content; display: flex; flex-direction: column; justify-content: center; } div.simple-value > div { max-height: -webkit-fill-available; } div.module-graph .parent_graph p table tr { height: 25px; } div.module-graph { width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; } div.basic-chart { width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: center; } .basic-chart-header { height: 40%; width: 100%; display: flex; } .basic-chart-header-name { margin: 0; padding: 0; height: 100%; width: 80%; display: flex; align-items: center; font-size: 2.5vmin; margin-left: 3%; } .basic-chart-header-value { margin: 0; padding: 0; height: 100%; width: 20%; display: flex; align-items: center; justify-content: center; font-size: 2.5vmin; } div.module-graph .gauge_d3_class { flex: 1 1 100px; float: none !important; overflow: inherit !important; text-align: center; } .textDecorationNone:hover { text-decoration: none; } .vc-item-nl-label { border-radius: 5px; background-color: #fff; padding: 5px; padding-left: 1em; font-size: 14px; } .odometer { overflow: hidden !important; } .odometer-container { width: 100%; height: 100%; overflow: hidden; text-align: center; display: flex; align-items: flex-end; } .odometer-a { z-index: 5; position: absolute; width: 65%; height: 65%; left: calc(17.5%); border-radius: 1000px 1000px 0px 0px; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; line-height: 0px; } .odometer-b { z-index: 4; position: relative; width: 95%; height: 95%; border-radius: 0px 0px 1000px 1000px; transform-origin: center top; transition: all 1.3s ease-in-out; top: calc(95%); left: calc(2.5%); } .odometer-c { z-index: 3; position: absolute; width: 96%; height: 96%; left: calc(2%); background-color: #202226; margin-left: auto; margin-right: auto; border-radius: 1000px 1000px 0px 0px; transform-origin: center top; transition: all 1.3s ease-in-out; } .odometer-d { z-index: 0; position: absolute; width: 100%; height: 100%; background-color: #82b92e; margin-left: auto; margin-right: auto; border-radius: 1000px 1000px 0px 0px; transform-origin: center top; transition: all 1.3s ease-in-out; } .gauge-data { z-index: 4; color: #fff; font-size: 1.5em; width: 100%; height: 100%; transition: all 1s ease-out; position: absolute; display: flex; justify-content: center; align-items: flex-end; } .svg_warning { fill: #f3b200; } .svg_warning_hide { fill: #fff !important; } .gauge-data #percent { color: #000; } .orange_background { background: #ffa631; } .red_background { background: #e63c52; } .yellow_background { background: #f3b200; } .grey_background { background: #b2b2b2; } .blue_background { background: #4a83f3; } .green_background { background: #82b92e; } /* Styles for the solid icons */ .fa { display: inline-block; margin: 0; } .fa, .fa > svg, .fa.medium, .fa.medium > svg { width: 28px; height: 28px; } .fa.fa-small, .fa.fa-small > svg { width: 14px; height: 14px; } .fa.fa-large, .fa.fa-large > svg { width: 44px; height: 44px; } .fa-spin { animation: fa-spin 2s infinite linear; } .fa-pulse { animation: fa-spin 1s infinite steps(8); } @keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .autocomplete { /*the container must be positioned relative:*/ position: relative; display: inline-block; } .autocomplete input { /*background: pink;*/ } .autocomplete-items { border: 1px solid #d4d4d4; border-bottom: none; border-top: none; /*position the autocomplete items to be the same width as the container:*/ position: absolute; z-index: 1; overflow: auto; max-height: 150px; max-width: 250px; } .autocomplete-items div { width: 100%; padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4; } .autocomplete-items div:hover { width: 100%; background-color: #e9e9e9; } .autocomplete-active { /*when navigating through the items using the arrow keys:*/ background-color: DodgerBlue !important; color: #ffffff; } /* Digital clock */ .visual-console-item .digital-clock { display: flex; flex-direction: column; justify-content: space-evenly; justify-items: center; align-content: center; align-items: center; } .visual-console-item .digital-clock > span { /* To improve legibility */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; } .visual-console-item .digital-clock > span.time { font-size: 50px; } .visual-console-item .digital-clock > span.date { font-size: 25px; } .visual-console-item .digital-clock > span.timezone { font-size: 25px; } /* Analog clock */ .visual-console-item .analogic-clock { text-align: center; } .visual-console-item .analogic-clock .hour-hand { animation: rotate-hour 43200s infinite linear; } .visual-console-item .analogic-clock .minute-hand { animation: rotate-minute 3600s infinite linear; } .visual-console-item .analogic-clock .second-hand { animation: rotate-second 60s infinite linear; } /*# sourceMappingURL=vc.main.css.map*/