:root {
    --sg-primary: #037d36;
    --sg-secondary: #222222;
}

/* override bootstrap alert */
.sg-alert {
    background: var(--sg-primary);
    color: white;
    margin:8px auto;
}

.badge-sg {
    background: var(--sg-primary);
    color: white;
}

.sg-notification-unread {
    background: #f4f3ef;
}

.sg-notification-read {
    /**  **/
}

.sg-shake-bell {
    animation: shakeBell .5s infinite ease-in-out;
    color: #68B3C8;
}

.sg-scrollable ::-webkit-scrollbar {
    width: 12px;
}

.sg-scrollable ::-webkit-scrollbar-track {
    background:#f5f5f5;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.sg-scrollable ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px var(--sg-primary);;
}

#beamerSelector {
    background-color: var(--sg-primary) !important;
}

@keyframes shakeBell {
    0%,
    100% {
        transform: rotate(0deg);
    }
    10%,
    40% {
        transform: rotate(15deg);
    }
    40%,
    60% {
        transform: rotate(0deg);
    }
    60%,
    90% {
        transform: rotate(-15deg);
    }
}