body {
  --sb-track-color: #232E33;
  --sb-thumb-color: #cbe0d5;
  --sb-size: 4px;
}

body::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 2px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 2px;
  
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

label.required:after {
    color: #f00;
    content: ' *';
    display: inline;
}

.c-pointer {
    cursor: pointer;
}

.camera-thumb{
    position: relative;
    height: 61px;
    width: 100px;
    object-fit: cover;
    background: #000;
}

.camera-info-thumb {   
    height: 98px;
    width: 160px;
    background: #000;
}

.camera-thumb[alt]:after, .camera-info-thumb[alt]:after, .camera-image-thumb[alt]:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    font-family: 'Helvetica';
    font-weight: 300;
    line-height: 2;
    text-align: center;
    content: attr(alt);
}



.pac-container {
    z-index: 2000 !important;
}

.fs-10{
    font-size: 10px !important;
}

.fs-12{
    font-size: 12px !important;
}

.fs-14{
    font-size: 14px !important;
}

.fw-600{
    font-weight: 600;
}

.pe-click{
    cursor: pointer;
}

.gridjs-wrapper, .gridjs-footer {
    border-radius: 0% !important;
}

.gridjs-container {
    padding: 0 !important;
}

.gridjs-wrapper .dropdown-menu.show {
    position: fixed !important;
}

.gridjs-footer {
    z-index: 0 !important;
}


select .option {
    cursor: pointer;
}

select .option:hover {
    background-color: #f0f0f0;
}

select .option:active {
    background-color: #e0e0e0;
}
    

th.gridjs-th {
    vertical-align: bottom !important;
    border: 1px solid #dee2e6 !important;
    padding: 0.5rem .75rem !important;
    position: relative !important;
    white-space: nowrap !important;
    text-align: -webkit-match-parent !important;
    color: #212529 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

td.gridjs-td {
    padding: 0.5em 0.75em !important;
    vertical-align: middle !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    font-size: 14px !important;
    background-color: transparent !important;
}

tbody.gridjs-tbody tr:nth-child(odd){
    background-color: #f3f4f5;
}

tbody.gridjs-tbody tr:hover{
    color: #212529;
    background-color: rgba(0, 0, 0, .075);
}

@keyframes pulsar-status {
	0% {
		.light {
			box-shadow: 0 0 0 0 rgba(52, 224, 112, .7);
		}

        .low {
			box-shadow: 0 0 0 0 rgba(21, 163, 101, 0.7);
		}

		.moderate {
			box-shadow: 0 0 0 0 rgba(224, 221, 52, 0.7);
		}

        .high {
			box-shadow: 0 0 0 0 rgba(224, 155, 52, .7);
		}

		.critical {
			box-shadow: 0 0 0 0 rgba(224, 52, 52, .7);
		}
	}

	70% {
		box-shadow: 0 0 0 6px rgba(52, 172, 224, 0);
	}

	to {
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
	}
}

.fade-status {
    animation: pulsar-status 2s infinite;
    transform: scale(.95)
}

.fade-status.light {
    color: #17d785;
    background: #17d785;
    box-shadow: 0 0 0 0 #34e07f;
}

.fade-status.low {
    color: #15a366;
    background: #15a366;
    box-shadow: 0 0 0 0 #34e07f;
}

.fade-status.moderate {
    color: #d79417;
    background: #d79417;
    box-shadow: 0 0 0 0 #e09534;
}

.fade-status.high {
    color: #e52e2e;
    background: #e52e2e;
    box-shadow: 0 0 0 0 #e03434;
}

.fade-status.critical {
    color: #e52e2e;
    background: #e52e2e;
    box-shadow: 0 0 0 0 #e03434;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.blink {
    animation: blink 1s infinite;
}