@import 'colors.css';

.tr_container {
    position: fixed;
    top: 0;
    width: 270px;
    height: 130px;
    margin: 20px;
    border-radius: 7px;
    animation: fadeInDown 0.5s;
}

.tr-heading {
    padding: 10px;
    border-bottom: 1px solid white;
}

.tr-heading span {
    margin-left: 10px;
    font-weight: bold;
}

.tr-body {
    padding: 20px;
}

.tr-body span {
    font-size: 15px;
}

.tr_left {
    left: 0;
}
.tr_center {
    left: calc(50% - 154px)
}
.tr_right {
    right: 0;
}

#bar {

}


@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}