table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

@media (min-width: 576px) {
    .jumbotron {
        padding: 2rem 2rem;
    }
}

body {
    min-height: 90vh;
    display: flex;
    /* place-items: center; */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

svg.tea {
    --secondary: #33406f;
    top: 50%;
    position: absolute;
}

    svg.tea #teabag {
        transform-origin: top center;
        transform: rotate(3deg);
        animation: swing 2s infinite;
    }

    svg.tea #steamL {
        stroke-dasharray: 13;
        stroke-dashoffset: 13;
        animation: steamLarge 2s infinite;
    }

    svg.tea #steamR {
        stroke-dasharray: 9;
        stroke-dashoffset: 9;
        animation: steamSmall 2s infinite;
    }

@-moz-keyframes swing {
    50% {
        transform: rotate(-3deg);
    }
}

@-webkit-keyframes swing {
    50% {
        transform: rotate(-3deg);
    }
}

@-o-keyframes swing {
    50% {
        transform: rotate(-3deg);
    }
}

@keyframes swing {
    50% {
        transform: rotate(-3deg);
    }
}

@-moz-keyframes steamLarge {
    0% {
        stroke-dashoffset: 13;
        opacity: 0.6;
    }

    100% {
        stroke-dashoffset: 39;
        opacity: 0;
    }
}

@-webkit-keyframes steamLarge {
    0% {
        stroke-dashoffset: 13;
        opacity: 0.6;
    }

    100% {
        stroke-dashoffset: 39;
        opacity: 0;
    }
}

@-o-keyframes steamLarge {
    0% {
        stroke-dashoffset: 13;
        opacity: 0.6;
    }

    100% {
        stroke-dashoffset: 39;
        opacity: 0;
    }
}

@keyframes steamLarge {
    0% {
        stroke-dashoffset: 13;
        opacity: 0.6;
    }

    100% {
        stroke-dashoffset: 39;
        opacity: 0;
    }
}

@-moz-keyframes steamSmall {
    10% {
        stroke-dashoffset: 9;
        opacity: 0.6;
    }

    80% {
        stroke-dashoffset: 27;
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 27;
        opacity: 0;
    }
}

@-webkit-keyframes steamSmall {
    10% {
        stroke-dashoffset: 9;
        opacity: 0.6;
    }

    80% {
        stroke-dashoffset: 27;
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 27;
        opacity: 0;
    }
}

@-o-keyframes steamSmall {
    10% {
        stroke-dashoffset: 9;
        opacity: 0.6;
    }

    80% {
        stroke-dashoffset: 27;
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 27;
        opacity: 0;
    }
}

@keyframes steamSmall {
    10% {
        stroke-dashoffset: 9;
        opacity: 0.6;
    }

    80% {
        stroke-dashoffset: 27;
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 27;
        opacity: 0;
    }
}

.loading {
    width: 100%;
    height: 100%;
    /* min-height: 100%; */
    text-align: center;
    background: rgba(236,236,236,0.8);
    position: absolute;
    display: none;
    top: 0;
    left: 0;
}

div.hideMe{
    display:none;
}

div.showMe{
    display:block;
}

.loading img {
    top: 40%;
    position: relative;
    width: 64px;
    height: 64px;
}