::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar:horizontal { height: 3px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-track:horizontal { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #bdbdbd; border-left: 1.5px solid transparent; border-right: 1.5px solid transparent; }
::-webkit-scrollbar-thumb:horizontal { background: #bdbdbd; border-top: 1.5px solid transparent; border-bottom: 1.5px solid transparent; }
::-webkit-scrollbar-thumb:hover { background: #9e9e9e; border-left: 1.5px solid #bdbdbd; border-right: 1.5px solid #bdbdbd; }
::-webkit-scrollbar-thumb:horizontal:hover { background: #9e9e9e; border-top: 1.5px solid #bdbdbd; border-bottom: 1.5px solid #bdbdbd; }

body {
 margin: 0;
 padding: 0;
 overflow: hidden;
 /* background: #f0f0f0; */
}
body::before {
 content: "";
 /* background-image: url('../../heartbeat.png'); */
 background-size: contain;
 background-repeat: no-repeat;
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 35%;
 right: 0;
 opacity: 0.05;
 mix-blend-mode:luminosity;
}
.version {
 top: 75px;
 right: 30%;
}
.bg-red {
 background: red;
}
.bg-yellow {
 color: black !important;
 background: yellow;
}
.bg-green {
 background: green;
}
.bg-black {
 background: black;
}
.bg-dark-grey {
 background-color: darkgrey;
}
.fa-stack.small { 
 font-size: 9px; 
}
i { 
 vertical-align: middle; 
}
.col-md-1.extend-1 {
 width: 12%;
}
.col-md-2.extend-1 {
 width: 16%;
}
.col-md-3.extend-1 {
 width: 20%;
}
.col-xl-1.shrink-1 {
 width: 6.33%;
}
.col-xl-1.shrink-2 {
 width: 4.33%;
}
.level:hover, .btn-check:checked ~.level, .skala:hover, .btn-check:checked ~.skala {
 cursor: pointer !important;
 box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.75);
 -webkit-box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.75);
}
a, a:hover {
 color: inherit;
}
.form-select {
 background-position: right 8px center !important;
}
.list-pasien p > small {
 display: block;
}
.table.table-hover.row-select > tbody > tr {
 cursor: pointer;
}
svg.svg-inline--fa {
 pointer-events: none;
}
.overlay {
 position: absolute;
 height: 100%;
 width: 100%;
 background: rgba(0,0,0,0.75);
 top: 0;
 left: 0;
 z-index: 99; 
}
canvas#status_lokalis {
 width: 288px;
 height: 265px;
}
canvas.pen:hover {
 cursor: url('../../img/pen-solid.svg') 0 32, pointer;
}
canvas.eraser:hover {
 cursor: url('../../img/eraser-solid.svg') 0 32, pointer;
}
.collapseInfoBox {
 animation: slideUp 1s ease 0s 1 normal forwards;
}
@keyframes slideUp {
	0% {
  height: 200px;
  /* height: 150px; */
	}
	100% {
  height: 35px;
	}
}
.unCollapseInfoBox {
 animation: slideDown 1s ease 0s 1 normal forwards;
}
@keyframes slideDown {
 0% {
  height: 35px;
	}
	100% {
		height: 200px;
		/* height: 150px; */
	}
}
.collapseInfoToggle {
 animation: rotateDown 1s ease 0s 1 normal forwards;
}
@keyframes rotateDown {
 0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(180deg);
	}
}
.unCollapseInfoToggle {
 animation: rotateUp 1s ease 0s 1 normal forwards;
}
@keyframes rotateUp {
 0% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.collapseInfoBoxNew {
animation: slideLeft 1s ease 0s 1 normal forwards;
}
@keyframes slideLeft {
	0% {
		width: 100%;
	}
	100% {
		width: 50%;
	}
}
.unCollapseInfoBoxNew {
animation: slideRight 1s ease 0s 1 normal forwards;
}
@keyframes slideRight {
	0% {
		width: 100%;
	}
	100% {
		width: 50%;
	}
}
.collapseInfoToggleNew {
animation: rotateLeft 1s ease 0s 1 normal forwards;
}
@keyframes rotateLeft {
0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(-90deg);
	}
}
.unCollapseInfoToggleNew {
animation: rotateRight 1s ease 0s 1 normal forwards;
}
@keyframes rotateRight {
0% {
		transform: rotate(-270deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}