.bs { background-color: #333; width: 100vw; height: 100vh; padding: 0px; margin: 0px; color: #f0f0f0; } .bs .bs-left-area { width: 250px; height: 100vh; } .monitorCamera { height: 100vh; } .monitorCamera .big-title { background-color: #43484E; height: 50px; padding-left: 10px; font-size: 16px; line-height: 50px; } .monitorCamera .big-content { background-color: #43484E; margin-top: 1px; height: 50%; overflow-y: scroll; scrollbar-color: #333 #43484E; scrollbar-width: thin; } .monitorCamera .big-content-last { background-color: #43484E; margin-top: 1px; height: -webkit - calc(50% - 110px); height: -moz - calc(50% - 110px); height: calc(50% - 110px); overflow-y: scroll; scrollbar-color: #333 #43484E; scrollbar-width: thin; padding:20px; } .monitorCamera .big-content-last .item{ cursor: pointer; } .monitorCamera .big-content-last .item:hover{ background-color: #5b6068; } .bs .bs-center-area { flex: 1; padding-left: 5px; padding-right: 5px; } .monitorView { width: 100%; height: 100%; font-size: 24px; } .monitorView .monitorView-1 { width: 75%; height: 70vh; padding-bottom: 5px; } .monitorView .monitorView-1 .item { background-color: #43484E; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; } .monitorView .monitorViewOne-1 { width: 100%; height: 95vh; padding-bottom: 5px; } .monitorView .monitorViewOne-1 .item { background-color: #43484E; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; } .monitorView .monitorViewFour-1 { width: 100%; height: 95vh; padding-bottom: 5px; } .monitorView .monitorViewFour-1 .item { background-color: #43484E; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; } .monitorView .monitorViewNine-1 { width: 100%; height: 95vh; padding-bottom: 5px; } .monitorView .monitorViewNine-1 .item { background-color: #43484E; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; } .monitorView .monitorView-2 { width: 25%; height: 70vh; padding-left: 5px; } .monitorView .monitorView-2 .item { height: 23.33vh; padding-bottom: 5px; } .monitorView .monitorView-2 .item .i { background-color: #43484E; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; } .monitorView .monitorView-3 { width: 100%; height: 25vh; } .monitorView .monitorView-3 .item { width: 25%; padding-right: 5px; padding-bottom: 5px; } .monitorView .monitorView-3 .item .i { background-color: #43484E; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; } .monitorView .monitorView-4 { width: 100%; height: 5vh; background-color: #43484E; align-items: center; padding-left: 10px; padding-right: 10px; font-size: 14px; } .monitorView .camera-view-select{ border: 2px solid #1296DB; } .monitorView .monitorView-4 img{ width: 25px; height: 25px; margin-right: 10px; } .bs .bs-right-area { width: 300px; } .cameraAlter { height: 100vh; } .cameraAlter .big-title { background-color: #43484E; height: 50px; padding-left: 10px; font-size: 16px; line-height: 50px; } @keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } .cameraAlter .big-content { background-color: #43484E; margin-top: 1px; height: -webkit - calc(100% - 51px); height: -moz - calc(100% - 51px); height: calc(100% - 51px); padding: 10px; overflow-y: scroll; scrollbar-color: #333 #43484E; scrollbar-width: none; } .cameraAlter .big-content .item { padding: 10px; background-color: #5b6068; margin-bottom: 10px; font-size: 14px; } .cameraAlter .big-content .item .item-title { font-size: 16px; margin-left:5px; } .cameraAlter .big-content .item img { width: 80px; height: 80px; } .jstree-default .jstree-clicked { background: #5b6068 !important; } .jstree-default .jstree-wholerow-clicked { background: #5b6068 !important; background: -webkit-linear-gradient(top, #5b6068 0%, #5b6068 100%) !important; background: linear-gradient(to bottom, #5b6068 0%, #5b6068 100%) !important; }