.map-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 30px; } .map-frame { border: 2px solid black; height: 90%; } #map { height: 100%; } p { margin: 0 0 0 16px !important; } .box-custom { color: #F33152; padding: 3px 2px; background-color: rbg(243,49,82,0.1); } ::ng-deep.sensor-on { width: 30px; height: 30px; position: relative; background: linear-gradient(#ff0000, #C70039); display: flex !important; justify-content: center; align-items: center; border-radius: 50%; img{ z-index: 9; } &:before, &:after { position: absolute; content: ''; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; } &:before { animation: sensor-on 2s ease-out infinite; } &:after { animation: sensor-on 2s 1s ease-out infinite; } } .sensor-off{ display: inline-block; } @keyframes sensor-on { 100% { transform: scale(2); opacity: 0; } } ::ng-deep .tooltip { display: flex; flex-direction: column; gap: 5px; .dynamic-button{ cursor: pointer; } } ::ng-deep.icon { width: 200px; display: flex; flex-direction: column; align-items: center; }