body[data-theme="dark"] {
    --primary: #264b5d;
    --primary-fg: #f7f7f7;
    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-bg-hover: #151515;
    --soccer-cell-bg: #151515;
    --body-quiet-color: #e0e0e0;
    --body-loud-color: #ffffff;
    --body-loud-color-rgb: 255,255,255;
    --breadcrumbs-link-fg: #e0e0e0;
    --breadcrumbs-bg: var(--primary);
    --link-fg: #81d4fa;
    --link-hover-color: #4ac1f7;
    --link-selected-fg: #6f94c6;
    --hairline-color: #272727;
    --border-color: #353535;
    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;
    --darkened-bg: #212121;
    --darkened-bg-hover: 33,33,33;
    --selected-bg: #1b1b1b;
    --selected-row: #00363a;
    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
    --primary-loader-bg: #4182f2;
    --acc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='whitesmoke'  stroke-linecap='round' stroke-linejoin='round'><path%20d='M2%205L8%2011L14%205'/></svg>");
}

body[data-theme="light"] {
    --primary: #79aec8;
    --secondary: #417690;
    --accent: #f5dd5d;
    --primary-fg: #fff;
    --body-fg: #333;
    --body-bg: #f1f1f1;
    --body-bg-hover: #ececec;
    --body-quiet-color: #666;
    --body-loud-color: #000;
    --body-loud-color-rgb: 0,0,0;
    --header-color: #ffc;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);
    --breadcrumbs-fg: #c4dce8;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: var(--primary);
    --link-fg: #417893;
    --link-hover-color: #036;
    --link-selected-fg: #5b80b2;
    --hairline-color: #e8e8e8;
    --border-color: #ccc;
    --error-fg: #ba2121;
    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;
    --darkened-bg: #fefefe;
    --darkened-bg-hover: 254,254,254;
    --selected-bg: #e4e4e4;
    --selected-row: #ffc;
    --button-fg: #fff;
    --button-bg: var(--primary);
    --button-hover-bg: #609ab6;
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: #205067;
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;
    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);
    --primary-loader-bg: var(--body-fg);
    --soccer-cell-bg: #f7e6e9;
    --acc-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

body {
    background-color: var(--body-bg);
}

* {
    box-sizing: border-box;
}

a {
    cursor: pointer;
}

a.nav-link {
    text-transform: uppercase;
}

body {
    font-family: sans-serif;
    font-size: 17px;
    line-height: 25.6px;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    letter-spacing: normal;
    vertical-align: baseline;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
}

@media only screen and (max-width: 992px) {
    body {
        font-size: 17px;
    }
}

div#main {
    color: var(--body-fg);
    background-color: var(--body-bg);

    table.table {
        --bs-table-color: var(--body-quiet-color);
        --bs-table-bg: var(--darkened-bg);
        --bs-table-border-color: var(--border-color);
        --bs-table-accent-bg: transparent;
        --bs-table-striped-color: var(--body-quiet-color);
        --bs-table-striped-bg: rgba(var(--darkened-bg-hover), 0.05);
        --bs-table-active-color: var(--body-loud-color);
        --bs-table-active-bg: rgba(var(--darkened-bg-hover), 0.1);
        --bs-table-hover-color: var(--body-loud-color);
        --bs-table-hover-bg: rgba(var(--darkened-bg-hover), 0.075);
    }

    .card {
        --bs-card-border-color: var(--border-color);
        --bs-card-cap-bg: rgba(var(--darkened-bg), 0.03);
        --bs-card-bg: var(--darkened-bg);
        color: var(--body-fg);
        background-color: var(--darkened-bg);
        border: var(--bs-card-border-width) solid var(--border-color);
    }
}

.atswins-navbar-container {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
}

.atswins-navbar-container .atswins-nav-bar {
    height: 60px;
    width: 100%;
}

#offcanvasNavbar {
    width: 50%;
}

@media only screen and (max-width: 768px) {
    #offcanvasNavbar {
        width: 100%;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.atswins-container {
    border-radius: 7px;
    color: var(--body-fg);
    background-color: var(--darkened-bg);
    box-shadow: 0px 1px 1px 1px var(--border-color);
}

.atswin-past-fixtures,
.atswin-past-fixture,
.atswins-pred-today,
#preds-today-header {
    box-shadow: 0px 1px 1px 1px var(--darkened-bg);
}

.atswin-pred-today:hover {
    box-shadow: 0px 2px 3px 3px var(--darkened-bg);
}

#preds-today-header {
    overflow: hidden;
    padding: 20px;
}

.atswins-text-muted {
    color: var(--body-quiet-color);
}

.border {
    border: var(--bs-border-width) var(--bs-border-style) var(--border-color) !important;
}

.accordion {
    --bs-accordion-color: var(--body-quiet-color);
    --bs-accordion-bg: var(--body-bg);
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-btn-color: var(--body-loud-color);
    --bs-accordion-btn-bg: var(--body-bg);
    --bs-accordion-btn-icon: var(--acc-icon);
}


#sim-loading,
#signin-loading,
#signup-loading {
    width: 2rem;
    height: 2rem;
    border: 5px solid #f3f3f3;
    border-top: 6px solid #4182f2;
    border-radius: 100%;
    margin: auto;
    visibility: hidden;
    animation: spin 1s infinite linear;
}

#sim-loading.display,
#signin-loading.display,
#signup-loading.display {
    visibility: visible;
}

.password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}

.iti {
    width: 100%;
}

#more-articles p:hover {
    text-decoration: underline;
    text-decoration-color: #fff !important;
    text-decoration-thickness: 1px;
}

div.h-background {
    background-color: var(--body-bg);
    opacity: 50%;
    width: 100%;
    margin: 80px auto 60px auto;
}

.notifications {
    position: fixed;
    bottom: 100px;
    right: 20px;
    max-width: 360px;
    text-align: right;
    z-index: 1;
}

.atswins-plan:hover {
    box-shadow: 0px 2px 5px 5px var(--body-bg-hover);
}

.atswins-locked-content {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-control:focus {
    box-shadow: none;
}

@media only screen and (max-width: 576px) {
    div.h-background {
        margin-top: 60px;
        margin-bottom: 80px;
    }

    #login-f-container {
        min-width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    article.card {
        width: 100%;
    }

    .articles-widget-container {
        width: 100%;
    }

    .atswins-home-container .atswins-video-container .atswins-call-to-action-container .atswins-call-to-action-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .atswins-home-container .atswins-video-container .atswins-call-to-action-container .atswins-call-to-action-buttons .atswins-call-to-action {
        width: 75%;
    }

    #offcanvasNavbar {
        width: 100%;
    }

    div.h-background {
        margin-top: 70px;
        margin-bottom: 70px;
    }

    .atswins-home-container .atwins-profits-container {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }
}

@media only screen and (max-width: 992px) and (min-width: 768px) {
    #offcanvasNavbar {
        width: 60%;
    }

    div.h-background {
        margin-top: 70px;
        margin-bottom: 70px;
    }

    #atswins-home-tab-image {
        height: 300px;
    }
}