img {
        max-width: 100%;
        height: auto;
        border: 1px solid black;
    }

    .thumbnails {
        background-color: #FFF;
        display: inline-block;
        border: 1px solid #02a056;
        border-radius: 4px;
        padding: 5px;
        transition: 0.3s;
    }

    .thumbnails:hover {
        background-color: #0e8b98 !important;
        box-shadow: 1px 1px 1px 1px rgba (0, 140, 186, 0.5);
    }

    .borderClass {
        border-color: black;
        border-width: 1px;
        border-style: solid;
        /** OR USE INLINE
    border: 1px solid #C1E0FF;
    **/
    }

    .btn {
        font-size: 10px !important;
    }

    .btn-success {
        color: #fff;
        background-color: #0e8b98;
        border-color: #0e8b98;
    }

    .btn-success:hover {
        color: #fff;
        background-color: #0e8b98;
        border-color: #0e8b98;
    }

    .loading-main {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / 50%);
        z-index: 10;
        display: none;
    }

    .loader {
        position: relative;
        top: 50%;
        left: 50%;

        width: 60px;
        aspect-ratio: 2;
        --_g: no-repeat radial-gradient(circle closest-side, #ffffff 90%, #ffffff00);
        background:
            var(--_g) 0% 50%,
            var(--_g) 50% 50%,
            var(--_g) 100% 50%;
        background-size: calc(100%/3) 50%;
        animation: l3 1s infinite linear;
    }

    @keyframes l3 {
        20% {
            background-position: 0% 0%, 50% 50%, 100% 50%
        }

        40% {
            background-position: 0% 100%, 50% 0%, 100% 50%
        }

        60% {
            background-position: 0% 50%, 50% 100%, 100% 0%
        }

        80% {
            background-position: 0% 50%, 50% 50%, 100% 100%
        }
    }