h2 {
    color: blue;
    text-align: center;
}

:root {
    --gap: 150px;
    --duration: 20s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
}

html, body {
    height: 100%;
    font-family: sans-serif
}

body {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: auto auto max-content;
    overflow: hidden;
}

    body > * {
        overflow: hidden
    }

.navbar {
    margin: 0;
    padding: 0rem 1rem;
    height: 100%;
    justify-content: center;
}

    .navbar > .container {
        height: 100%;
        padding: 0;
        margin: 0;
        max-width: unset !important;
    }

.navbar-brand {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

    .navbar-brand > img {
        height: 100%;
        width: auto;
    }

.navbar-nav .nav-link {
    height: 50px;
}

.navbar-nav img {
    height: 100%;
    cursor: pointer;
}

main {
    display: grid;
    /*grid-template-rows: auto 65px;*/
    row-gap: 0;
    overflow: auto;
    grid-auto-rows: minmax(auto, max-content);
    grid-template-rows: min-content auto;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .footer > .container {
        max-width: unset !important;
        width: 100%;
        text-align: center;
        font-size: 15px;
        height:100%
    }

    .body-header {
    overflow: hidden;
    background-color: #f1f1f1;
}

    .body-header a {
        float: left;
        color: black;
        text-align: center;
        text-decoration: none;
        font-size: 18px;
        line-height: 25px;
        border-radius: 4px;
    }

        .body-header a.logo {
            font-size: 25px;
            font-weight: bold;
        }

        .body-header a:hover {
            background-color: #ddd;
            color: black;
        }

.header-right {
    float: right;
}

.body-content {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid gray;
    overflow-y: hidden;
    align-items: flex-start;
    overflow-y: auto;
}

.body-footer {
    float: right;
}

.card {
    background-color: #f8f9fa;
    color: #343a40;
    height: 168px;
    position: relative;
    display: grid;
    grid-template-areas:
        ' image title'
        ' image description';
    grid-gap: 2px 20px;
    grid-template-rows: min-content 1fr;
    grid-template-columns: 0.6fr 1fr;
}


    .card > .imgFile {
        height: 50px;
        width: 50px;
        background-size: contain;
        background-repeat: no-repeat;
    }

.cards {
    margin: 0 auto;
    display: grid;
    gap: 10px 10px;
}



.imgBox {
    grid-area: image;
    width: 100%;
    height: 100%;
    background: #FFFFFF21;
    display: flex;
}

.imgBox > div {
        height: 100%;
        width: 100%;
        background-size: 90%;
        background-repeat: no-repeat;
        background-position: center center;
        border-right: 1px solid #d9dadb;
    }

.titleBox {
    grid-area: title;
    color: #805474;
    font-weight: 600;
    padding-top: 13px;
}

.titleCategoryBox {
    text-align: center;
    padding-bottom: 12px;
    font-weight: 700;
    font-size: 115%;
}

.categoryBox {
    padding: 0px 0px 0px 5px;
    /*background-color: aliceblue;*/
    /*border-top: 1px solid #dee2e6;*/
}

    .categoryBox:nth-child(2n+1) {
        /* background-color: #cdedff;*/
    }

.descriptionBox {
    grid-area: description;
    overflow: auto;
    text-align: justify;
    padding-right: 14px;
}

.cardsBox {
    display: flex;
    flex-direction: column;
}

.imgBox > div.NoImage {
    background-size: contain;
    background-size: contain;
}

.bodyBox {
    margin: 0 auto;
    overflow-y: auto;
}

    .bodyBox > div:first-child {
        border-top-style: none;
    }

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #AAAAAA;
}

    ::-webkit-scrollbar-thumb:hover {
        border: 4px solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        border-radius: 9999px;
        background-color: #AAAAAA;
    }



.marquee span {
    padding-right: 7px;
    font-weight: bold;
    color: #805474;
}

.footer .navbar > .container > .item1 {
    text-align:left;
}

.row {
    margin:0 auto;
}

.wrapper {
    display: grid;
    align-items: start;
}

.whatsapp-badge {
/*    position: fixed;
    bottom: 0;
    z-index: 10000;*/
    margin: 2px;
    width: auto !important;
}

.whatsapp span {
    border-radius: 4px;
    background: #25D366;
    color: #fff;
    font-size: 13px;
    padding: 6px 8px;
    display: inline-block;
    outline: none;
    cursor: pointer;
}

.whatsapp-icon {
    position: relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAsVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+3mHKcAAAAOnRSTlMA+wPs96LwyQ2be29MGLeoBpAcEvTEYDgqzyDh29iVf3bAi2VXRufTCrFALrs8MyXdhGpUFVDjiKxbh+2tSQAABqlJREFUaN7Fm3f7myAQx0/jjNn5mWX2Tpq9y/t/YX26BAQRkT79/Je2egFufI9LIT+N3nPqH/pR6Qshq/TazOzy8rSFf8ugYw8NxCP6BD34N2yX/gUJWdcXbdCMefQdJIFx6Ojc9db7haQp+d90HWzTQvk4dKE432wD5SesQDGqNlJkVsTJzcBByhhNDxQ59hEfx7Xf5WBxv3eC6dsPS4jPawkqNN6Iw1dtuq9Cgnb39uFar3sKvuwihk25a6Z7YRCyT1xOkJNniY3PY2a8T4fMSU9MyMMcJejf5V6wryWf/GxzeLPPhqV64LsPkMSrJY52D7noHRLPt0CKdkj78aQBealEdNn6JmV3Q0dEFRTw5gblmD2Jskut1wpAkf2ayiWDzLRBne+oQIV7UG8aZmycWUcEdqGibk4o3/bk4/cNBemQB70zRd5I2p1CYVaO3PsGRJ40lqCBLvnGY6pjkQ7dAS10v4hwTnOwJsIEoIkKcc414HIi/skVtPHdyNhGs0+kK9BImchgPMEfENHuaW0GiEzic/Qk9nzrBFp5vLBns4qbSFkL0MzRwILCTNZQQ+x759O3wYCsj6qC5g40Nt5oTiFZDn8HouoZbCO85MSC8ILLwDCJtYQJajxRDK2ifFwJ2f2c4qe+gyI7XKYoXYr7wafg2+Knskn3oRU3xjdsnFEKWznS6tzshHU4W5PoftFWbnex97ZxCcE5y+TvEX7qoX7KbJ4Ys3+W/Dt1ecCuLoyjzInX4zGJdp1sw0xQZBS/48wInnrq0WAqxavUlEloK1avMYZroMjASL4iLsRrdhuviOEMisziruh3kmobgmo5Zg03QRFc8Y+JzPQdRFGM96VwKE8Si6qKBCCmrSpF4hw4g5+EcX0QuiKbr9XTpvPre8TKdwwsS6QvnuAWv2Pw08vjTzdgqTJ2bVBmT335VXoU4/qBcQt0kFWqX1jEn1rA4Z3ImFUogEOG5DUOa34Fpy+7zlAEN+5ZyWjapOYbbcrXJgvUBwdXds9csHcdk5F7yMr+LsKEoALrMGsyf9TTKrihrW0ukxnETZQIcb52sNwvUiYsXBRx1RHrzJmyAiFD15BaMdwRQVnXimdULszebKOi6YxrOKhT8S7kMfe0eDWO44O4w8VcWsXjmP4gYEJdTLaKFuQZue+W+CJDg2XsyB9KwAoLTzuiihTnnFc1eyVbneZUdT6KpZpDzbwY3+5aP/v97w3RlAZrjkR1FrKi27c5baL6+jM6DzyxAsGaoyQrahaJiVCX9IEZrtnldqawblEFd5Qd/xSG3+bLYOf6EHeqJfoZI1PWTJLTt6mH9SPJ15zzLtOhU8adqXnZlrHpyQMfP2V6wdbXRLv4SO1SpQS+Zd+nFm/uaqY/+8c7NvHZmBKVzUKSMC9zk3aauZqEfUlsLzURnvFchAmvD0hwHkkZ7qe32gHTxVlSjaBXlzFsJ306iqMnzvR+3lFEx8kyyyph3CodOKksaoAUrV2WXSO5eQde/z/KL1+fGSc9Tg3iry3vfnYkLSLNRSSwu0mWihr38B+WimI3l2Gq3aRSOCE6e7DutfZy3afM1zy7OyY6Quxaicsv1VmXWaknc9m6I7qn26fOJHKr1+29Tk4Qyx6rm3C2C9Nvh12FJqVxnBxeyLjsynve0z5Kv+8Ya2lSMlvsmWg3IlAkeyxt9EQ1fgxaabiEQhROK46gB1aORR7HNWPHfJmgB1aOPYV3h03QSQdljKU/TErTNKnPGEt71j/x6QqRWaxv3Ek+1/G0/gJlkTGO0jguLyekkHCnh6CLrU8NbxoZvncFTZz7ot8YsfrgG+jhTunB4SOl3TfSOsbWrQcKVGkFHLUyO98Jld2DEP+GtsBvdkfYbqr0xOs7XTd/v28nXxJdbRBFmNomPIzEZbl5bEbUV17Km664SQG2FeZxvNONis/2ZZdpW6oELvuMwDYlpo3o7C3rKe3Jl7/KWvaR/cbOUuSCRvzynbD7LY2fqev2VvMLZyp3FldMeQx3/r1nMv9X5BoaiEOzkTHXzYk1nNnzyfR2m76bfm1opLUTGVKmZSCdyP9mNxA9fbAU7dpV2StVlpJ996DVVDBt7CSK64D/7Gv8tycYNJ2cLuBLDQKniGX07lKhEozkzQ4nODPn2+l+mVOQTk3cjwojvStdr+nDmQWDtJLTvfbFB9tvVhpKusiqLR4ZZfY5D7kH7rjj+wPkIQZtX/WlZN1trW5Xu+b2L9HrMnRr9nyxryooo7+BswXNZN8DR3720ejncz3B/+AHfAHoi1N9tksAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    display: inline-block;
    height: 18px;
    width: 18px;
    top: -1px;
    vertical-align: middle;
    background-size: contain;
}

.TopPadding {
    padding: 8px 0 0 0;
}



.marquee {
    font-size:35px;
    font-family: Montserrat;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    background: #fff;
    color: #000;
    border-top: 1px solid #4a4a4a;
    border-bottom: 1px solid #4a4a4a;
}

.item {
    display: flex;
    align-items: center;
    gap: 0 0.2rem;
    color: #000;
    padding: 0.7rem 1rem;
    margin: 0rem 1rem;
    border-radius: 0.4rem;
    white-space: nowrap;
    box-shadow: 0 0.1rem 0.2rem #00000033, 0 0.1rem 0.5rem #0000004d, 0 0.2rem 01.5rem #00000066;
}
.scroll-bold {
    padding-right: 7px;
    font-weight: bold;
    color: #805474;
}


.right-10 {
    text-align: right;
    padding-right: 10px;
}

#waiting-ol {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}


#waiting {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    border: 10px solid grey;
    border-radius: 50%;
    border-top: 10px solid green;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}