.bts {
    display: inline-block;
    width: 39px;
    text-align: center;
    padding: .25rem;
    border-radius: 4px;
}

.greens {
    color: green;
    font-weight: 600;
    font-size: 20px;
}

.bts-style {
    background: #3a5926;
    border-radius: 50px;
    padding: 3px 7px;
    width: 20px;
    color: #fff !important;
    height: 20px;
    font-size: 11px;
}

.reds {
    color: red;
    font-weight: 600;
    font-size: 20px;
}

.task-date {
    border-radius: 6px;
    padding: 2px 10px;
    margin-bottom: 8px;
}

.orange {
    color: orange;
    font-weight: 600;
    font-size: 20px;
}

.notification--reminder {
    width: 300px;
    right: 40%;
    padding: 10px;
    position: fixed;
    top: 100px;
    border-radius: 50px;
    z-index: 9999999999999;
    transform: translateY(80px);
    animation: notification--in linear 500ms;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    /*when the spec is finished*/
    -webkit-animation: notification--in linear 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    /*Chrome 16+, Safari 4+*/
    -moz-animation: notification--in linear 500ms;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    /*FF 5+*/
    -o-animation: notification--in linear 500ms;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    /*Not implemented yet*/
    -ms-animation: notification--in linear 500ms;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
    /*IE 10+*/
}

@keyframes notification--in {
    0% {
        transform: translate(0px, 80px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes notification--in {
    0% {
        -moz-transform: translate(0px, 80px);
    }
    100% {
        -moz-transform: translate(0px, 0px);
    }
}

@-webkit-keyframes notification--in {
    0% {
        -webkit-transform: translate(0px, 80px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
    }
}

@-o-keyframes notification--in {
    0% {
        -o-transform: translate(0px, 80px);
    }
    100% {
        -o-transform: translate(0px, 0px);
    }
}

@-ms-keyframes notification--in {
    0% {
        -ms-transform: translate(0px, 80px);
    }
    100% {
        -ms-transform: translate(0px, 0px);
    }
}

.notification--reminder h3 {
    font-weight: 500;
}

.notification--reminder h3 a {
    text-decoration: none;
    margin-left: 15px;
    background: #1a22b8;
    border: 1px solid #1a22b8;
    color: #fff;
    display: inline-block;
    height: 40px;
    letter-spacing: 1px;
    line-height: 40px;
    padding: 0 40px;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.notification--reminder h3 a:hover {
    border: 1px solid #aaaaaa;
    color: #8b8b8b;
    background: transparent;
}

.notification--wrapper {
    position: fixed;
    height: 200px;
    width: 300px;
    z-index: 99999;
    top: 0;
}

@media (max-width: 767px) {
    .notification--reminder h3 {
        font-size: 14px;
    }
    .notification--reminder {
        padding: 30px;
    }
    .notification--reminder h3 a {
        display: inline-block !important;
        margin-top: 15px;
        margin-left: 0px;
    }
}