.card {
    background: #fff;
}

.shadow{
    background: #fff;
}

.bg-blue {
    background-color: #003366;
}

@media screen and (min-width: 0px) {

    .scroll,
    [class*=scroll],
    body {
        --thumb-color: #dbdbdb;
        --thumb-color-hover: #aeaeaf;
        --track-color: #ffffff;
        --scroll-size: 8px;
        --scroll-radius: calc(var(--scroll-size)/2);
        --display: block
    }

    .scroll::-webkit-scrollbar,
    [class*=scroll]::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: var(--display);
        width: var(--scroll-size);
        height: var(--scroll-size)
    }

    .scroll::-webkit-scrollbar-thumb,
    [class*=scroll]::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
        background: var(--thumb-color);
        border-radius: var(--scroll-radius)
    }

    .scroll::-webkit-scrollbar-thumb:active,
    .scroll::-webkit-scrollbar-thumb:hover,
    [class*=scroll]::-webkit-scrollbar-thumb:active,
    [class*=scroll]::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:active,
    body::-webkit-scrollbar-thumb:hover {
        background: var(--thumb-color-hover)
    }

    .scroll::-webkit-scrollbar-track,
    [class*=scroll]::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        background: var(--track-color);
        border-radius: var(--scroll-radius)
    }
}

/* CHECKBOX TOGGLE SWITCH */
/* @apply rules for documentation, these do not work as inline style */
.toggle-checkbox:checked {
@apply: right-0 border-green-400;
    right: 0;
    border-color: #68d391;
}
.toggle-checkbox:checked + .toggle-label {
@apply: bg-green-400;
    background-color: #68d391;
}