:root 
{   
    /* BASE SHADES */
    
    --color-bg: #623329;
    --color-bg-light: #FFFFFF;

    --color-bg-dark: #222831;
    --color-shadow: #393E46;
    
    --box-shadow: 1px 1px 5px var(--color-shadow);
    --box-shadow: none;
    
    /* BASIC TRIADIC VARIABLES */
    
    --triadic-step: 120;
    --lighten-percentage: 25%;
    --darken-percentage: var(--lighten-percentage);
    --contrast-threshold: 60%;
    
    /* MANUALLY NEED TO CONVERT PRIMARY HEX TO HSL */
    
    --color-primary-h: 100;
    --color-primary-s: 44%;
    --color-primary-l: 66%;
    
    /* END OF HSL FROM HEX #42ACBD */
    
    /* LIGHT AND DARK SHADES */
    
    --color-primary-l-lighten: calc(var(--color-primary-l) + var(--lighten-percentage));
    --color-primary-l-darken: calc(var(--color-primary-l) - var(--darken-percentage));
    
    /*

    PRIMARY COLOURS
    
    */
    
    --color-primary: hsl(
        var(--color-primary-h), 
        var(--color-primary-s), 
        var(--color-primary-l)
    );
    --color-primary-light: hsl(
        var(--color-primary-h), 
        var(--color-primary-s), 
        var(--color-primary-l-lighten)
    );
    --color-primary-dark: hsl(
        var(--color-primary-h), 
        var(--color-primary-s), 
        var(--color-primary-l-darken)
    );
    
    /*

    SECONDARY COLOURS
    
    */
    
    --color-secondary: hsl(
        calc(var(--color-primary-h) + var(--triadic-step)), 
        var(--color-primary-s), 
        var(--color-primary-l)
    );
    --color-secondary-light: hsl(
        calc(var(--color-primary-h) + var(--triadic-step)), 
        var(--color-primary-s), 
        var(--color-primary-l-lighten)
    );
    --color-secondary-dark: hsl(
        calc(var(--color-primary-h) + var(--triadic-step)), 
        var(--color-primary-s), 
        var(--color-primary-l-darken)
    );

    /*

    TRIAD COLOURS
    
    */
    
    --color-tri: hsl(
        calc(var(--color-primary-h) + calc(var(--triadic-step) * 2)), 
        var(--color-primary-s), 
        var(--color-primary-l)
    );
    --color-tri-light: hsl(
        calc(var(--color-primary-h) + calc(var(--triadic-step) * 2)), 
        var(--color-primary-s), 
        var(--color-primary-l-lighten)
    );
    --color-tri-dark: hsl(
        calc(var(--color-primary-h) + calc(var(--triadic-step) * 2)), 
        var(--color-primary-s), 
        var(--color-primary-l-darken)
    );
    
    /*

    GRADIENTS
    
    */
    
    --gradient-primary: linear-gradient(
        180deg, 
        var(--color-primary-dark) 0%, 
        var(--color-primary) 100%
    );
    --gradient-secondary: linear-gradient(
        180deg, 
        var(--color-secondary-dark) 0%, 
        var(--color-secondary) 100%
    );
    --gradient-tri: linear-gradient(
        180deg, 
        var(--color-tri-dark) 0%, 
        var(--color-tri) 100%
    );
    
    /*
    
    ICONS
    
    */
    
    --brokercompare-menu-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/*

BACKGROUND COLORS

*/

html body .navbar a:hover i.fa-brands,
html body .dt-container.dt-bootstrap5 .row.mt-2.justify-content-between,
html body .modal .modal-content .modal-body,
html body .offcanvas-backdrop,
html body .modal-backdrop,
html body .btn.btn-outline-dark,
html, body,
html body
{
    background-color: var(--color-bg);
}
html body ul.timelines li.year .posts,
html body .navbar i.fa-brands,
html body .btn.btn-outline-dark:hover,
html body alert.alert-secondary
{
    background-color: var(--color-bg-light);
}
html body section.dark,
html body .navbar-expand-lg #loginform input,
html body section.dark .card .card-body,
html body section.dark .card .card-footer
{
    background-color: var(--color-bg-dark);
}
html body ul.timelines:before,
html body .navbar-expand-lg #loginform input.button,
html body input.button,
section .carousel-indicators [data-bs-target],
html body .wp-block-post-comments .reply .comment-reply-link,
html body .btn.btn-primary
{
    background-color: var(--color-primary);
}
html body .card .card-header,
html body alert.alert-primary
{
    background-color: var(--color-primary-light);
}
html body .navbar-expand-lg #loginform input.button:hover,
html body input.button:hover,
html body .wp-block-post-comments .reply .comment-reply-link:hover,
html body .dt-container.dt-bootstrap5 .row.mt-2.justify-content-between:last-child .active .page-link,
html body section.dark .card .card-header,
html body .btn.btn-primary:hover,
html body .btn.btn-primary:active
{
    background-color: var(--color-primary-dark);
}
html body ul.timelines li.year .date,
html body input.wp-element-button,
section .carousel-indicators .active[data-bs-target],
html body .navbar .dropdown-menu,
html body .navbar .dropdown-menu[data-bs-popper],
html body .btn.btn-secondary
{
    background-color: var(--color-secondary);
}
html body alert.alert-danger
{
    background-color: var(--color-secondary-light);
}
html body input.wp-element-button:hover,
html body .offcanvas .offcanvas-header,
html body .modal .modal-header,
html body .navbar .dropdown .dropdown-menu .dropdown-item:hover,
html body .btn.btn-secondary:hover,
html body .btn.btn-secondary:active
{
    background-color: var(--color-secondary-dark);
}
html body .btn.btn-triadic
{
    background-color: var(--color-tri);
}
html body alert.alert-success
{
    background-color: var(--color-tri-light);
}
html body [data-bs-theme="dark"] .card .card-header,
section .accordion-button:after,
html body .btn.btn-triadic:hover,
html body .btn.btn-triadic:active
{
    background-color: var(--color-tri-dark);
}
section .accordion-button:hover,
section .accordion-button:not(.collapsed),
.menu-footer-left-container .list-group.list-group-flush li:first-child::after, 
.menu-footer-middle-container .list-group.list-group-flush li:first-child::after, 
.menu-footer-right-container .list-group.list-group-flush li:first-child::after,
html body .dt-container.dt-bootstrap5 .row.mt-2.justify-content-between
html body .dt-container.dt-bootstrap5 .row.mt-2.justify-content-between
{
    background: var(--color-shadow);
}

/*

BACKGROUND GRADIENTS

*/

html body section.ground
{
    background: linear-gradient(
        180deg, 
        var(--color-bg) 25%, 
        var(--color-bg-dark) 100%
    );
}
html body section.slideshow
{
    background: linear-gradient(
        180deg, 
        #2a371f 10%, 
        var(--color-bg-dark) 50%
    );
}

html body section.fold,
html body section.slim,
html body section.folded
{
    background: var(--gradient-secondary);
}
html body table.dataTable thead tr:first-child th
{
    background: linear-gradient(
        180deg, 
        var(--color-bg-light) -50%, 
        var(--color-primary-light) 300%
    );
}
html body table.dataTable thead tr:nth-child(2) th
{
    background: linear-gradient(
        180deg, 
        var(--color-primary-light) -200%, 
        var(--color-bg-light) 150%
    );
}
html body table.dataTable thead tr:first-child th.dt-ordering-desc
{
    background: linear-gradient(
        180deg, 
        var(--color-bg-light) -50%, 
        var(--color-secondary-light) 300%
    );
}
html body table.dataTable thead tr:first-child th.dt-ordering-asc
{
    background: linear-gradient(
        180deg, 
        var(--color-bg-light) -50%, 
        var(--color-tri-light) 300%
    );
}
html body table.dataTable thead tr:nth-child(2) th.dt-ordering-desc
{
    background: linear-gradient(
        180deg, 
        var(--color-secondary-light) -200%, 
        var(--color-bg-light) 150%
    );
}
html body table.dataTable thead tr:nth-child(2) th.dt-ordering-asc
{
    background: linear-gradient(
        180deg, 
        var(--color-tri-light) -200%, 
        var(--color-bg-light) 150%
    );
}
html body table.dataTable tfoot tr th
{
    background: linear-gradient(
        180deg, 
        var(--color-primary-light) -200%, 
        var(--color-bg-light) 150%
    );
}
html body table.dataTable thead.table-dark tr th
{
    background: linear-gradient(
        180deg, 
        var(--color-primary-dark) -200%, 
        var(--color-shadow) 150%
    );
}
body section.dark .card .card-body,
section .accordion-body
{
    background: linear-gradient(
        180deg, 
        var(--color-bg-dark) -100%, 
        var(--color-shadow) 200%
    );
}

/*

TEXT COLORS

*/

html body .form-select-lg
{
    color: var(--bs-body-color);
}
html body ul.timelines li.year .date,
html body .navbar a:hover i.fa-brands,
body section .card .card-header .col-6 b,
html body section.fold,
html body section.slim,
html body section.folded,
html body .navbar .dropdown .dropdown-menu .dropdown-item,
html body section.dark .card .card-body,
html body section.dark .card .card-footer
{
    color: var(--color-tri-light);
}
html body .navbar i.fa-brands
{
    color: var(--color-tri-dark);
}
html body .notebook-paper header h1 a,
html body section.fold a.btn.btn-primary
{
    color: var(--color-secondary-dark);
}
html body section.fold a.btn.btn-primary:hover
{
    color: var(--color-secondary-light);
}
html body .notebook-paper header h1 a:hover
{
    color: var(--color-secondary);
}
section .accordion-button:not(.collapsed):hover,
html body .dt-container.dt-bootstrap5 .row.mt-2.justify-content-between:last-child .active .page-link,
body section .card .card-header h2 a,
body section .card .card-header h4 a,
body section .card .card-header .wp-block-post-author-name a,
html body .offcanvas .offcanvas-header b,
html body .modal .modal-header b,
html body .navbar .navbar-brand:hover,
html body .navbar .navbar-brand b
{
    color: var(--color-bg-light);
}
section .accordion-button,
html body a
{
    color: var(--color-primary);
}
html body .text-primary
{
    color: var(--color-primary) !important;
}
section.dark .list-group.list-group-flush,
section.dark .list-group.list-group-flush .list-group-item,
section .accordion-button:hover,
html body .navbar .navbar-brand .fa-regular,
html body .navbar .navbar-brand .fa-solid
{
    color: var(--color-primary-light);
}
section.dark .list-group.list-group-flush .list-group-item:hover,
html body .dt-container.dt-bootstrap5 .row.mt-2.justify-content-between:last-child .page-link,
html body table.dataTable tbody tr td i.fa-regular.fa-star-half-stroke,
html body table.dataTable tbody tr td i.fa-regular.fa-star,
html body table.data-table thead tr th.sorter:hover,
html body .navbar .navbar-brand:hover i.fa-solid,
html body .btn.btn-outline-dark,
html body a:hover
{
    color: var(--color-primary-dark);
}
html body h2 b,
.text-body-secondary i,
html body .carousel-control-next i, 
html body .carousel-control-prev i,
html body table.dataTable tbody tr td i.fa-solid.fa-star
{
    color: var(--color-secondary);
}
html body .text-secondary
{
    color: var(--color-secondary) !important;
}
body section .card .card-header h2 a:hover,
body section .card .card-header h4 a:hover,
body section .card .card-header .wp-block-post-author-name a:hover,
section.dark .list-group .list-group-item i
{
    color: var(--color-secondary-light);
}
html body section.ground .polaroid a,
html body section.ground .notebook-paper a,
html body .navbar-expand-lg .navbar-nav .nav-link,
html body .brokercompare-text-secondary-dark
{
    color: var(--color-secondary-dark);
}
body section.dark .card .card-header h2 a:hover,
body section.dark .card .card-header h4 a:hover,
html body .navbar-expand-lg .navbar-nav .nav-link.active:hover,
html body .navbar-expand-lg .navbar-nav li.fa:before
{
    color: var(--color-tri);
}
html body section.fold h4,
html body .navbar-expand-lg #loginform input,
body section.dark .card .card-header h2 a,
body section.dark .card .card-header h4 a,
section.dark .list-group.list-group-flush .list-group-item.list-group-item-dark,
section.dark .list-group.list-group-flush .list-group-item.list-group-item-dark:hover,
section .accordion-button:not(.collapsed),
html body .offcanvas .offcanvas-header,
html body .modal .modal-header,
html body .navbar .dropdown .dropdown-menu .dropdown-item:hover,
html body .navbar .navbar-brand,
html body .navbar .navbar-brand:hover b,
html body alert.alert-dark
{
    color: var(--color-tri-light);
}
html body .navbar-expand-lg .navbar-nav .nav-link:hover,
html body .navbar-expand-lg .navbar-nav .nav-link.active,
html body .brokercompare-text-tri-dark
{
    color: var(--color-tri-dark);
}
html body section.ground .polaroid a:hover,
html body section.ground .notebook-paper a:hover,
section.dark .list-group.list-group-flush li.fa .list-group-item,
html body .navbar-expand-lg form.login label,
html body .navbar-expand-lg #loginform label,
section .accordion-body,
html body section.dark,
html body section.slideshow
{
    color: var(--color-secondary);
}
html body section.dark h2
{
    color: var(--color-secondary-light);
}


/*

BORDER COLORS

*/

html body table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, 
html body table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before
{
    border-left-color: var(--color-bg);
}
body section .card .card-header h2 a:hover,
body section .card .card-header h4 a:hover,
body section .card .card-header .wp-block-post-author-name a:hover,
body section.dark .card .card-header h4 a,
body section.dark .card .card-header h2 a
{
    border-bottom-color: var(--color-bg);
}
html body table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > td.dtr-control::before, 
html body table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > th.dtr-control::before
{
    border-top-color: var(--color-bg);
}
html body .navbar-expand-lg #loginform input,
section.dark .list-group.list-group-flush,
section.dark .list-group.list-group-flush .list-group-item
{
    border-color: var(--color-shadow);
}
html body section
{
    border-bottom-color: var(--color-shadow);
}
html body section
{
    border-top-color: var(--color-bg-dark);
}
html body section.dark .card
{
    border-color: var(--color-bg-dark);
}
html body .navbar-expand-lg #loginform input.button:hover,
html body input.button:hover,
html body .wp-block-post-comments .reply .comment-reply-link:hover,
html body .btn.btn-primary:hover,
html body .btn.btn-primary:active,
html body alert.alert-primary
{
    border-color: var(--color-primary);
}
html body .navbar-expand-lg #loginform input.button,
html body input.button,
html body .wp-block-post-comments .reply .comment-reply-link,
html body .btn.btn-primary
{
    border-color: var(--color-primary-dark);
}
html body ul.timelines li.year:before,
html body input.wp-element-button:hover,
html body .text-bg-secondary,
html body .btn.btn-secondary:hover,
html body .btn.btn-secondary:active,
html body alert.alert-danger
{
    border-color: var(--color-secondary);
}
body section .card .card-header h2 a,
body section .card .card-header h4 a,
body section .card .card-header .wp-block-post-author-name a,
html body table.dataTable tbody tr.child td ul.dtr-details li
{
    border-bottom-color: var(--color-secondary);
}
html body .form-check-input:checked
{
    border-color: var(--color-secondary-dark) !important;
}
html body input.wp-element-button,
html body .btn.btn-secondary
{
    border-color: var(--color-secondary-dark);
}
html body .btn.btn-triadic:hover,
html body .btn.btn-triadic:active,
html body alert.alert-success
{
    border-color: var(--color-tri);
}
body section.dark .card .card-header h4 a:hover,
body section.dark .card .card-header h2 a:hover
{
    border-bottom-color: var(--color-tri-light);
}
html body .btn.btn-triadic
{
    border-color: var(--color-tri-dark);
}
section .accordion-item
{
    border-color: var(--color-shadow);
}

/*

SHADOWS

*/

html body input.wp-element-button,
html body input.button,
html body .wp-block-post-comments .reply .comment-reply-link,
html body .wp-block-post-comments form.comment-form, 
html body .wp-block-post-comments ol.commentlist li.comment,
html body .modal .modal-content,
html body .card,
html body .btn,
html body alert.alert-primary,
html body alert.alert-secondary,
html body alert.alert-success,
html body alert.alert-danger
{
    box-shadow: var(--box-shadow);
}

/*

TRANSPARENT

*/

.list-group-flush .list-group-item
{
    background: transparent;
    border-color: transparent;
}

/*

SPOTLIGHT

*/

.spotlight:before
{
    background: linear-gradient(
        180deg, 
        var(--color-tri-light) 10%, 
        var(--color-tri-dark) 90%
    );
    border: 3px solid var(--color-secondary-dark);
    z-index: 8;
}

/*

ICONS

*/

html body .navbar-toggler-icon
{
    background-image: var(--brokercompare-menu-icon);
}

/*

IMPORTANT

*/

html body .text-bg-secondary,
html body .navbar
{
    background-color: var(--color-secondary-dark) !important;
}

html body table.dataTable thead tr:first-child th.bg-dark
{
    background: var(--color-bg-dark) !important;
}

/* 

CLOUDS 

*/

html body .navbar:before
{
    content: "";
    display: block;
    position: absolute;
    top: -50px;
    width: 100vw;
    height: 140px;
    background: url(../img/clouds.png);
    background-repeat: repeat-x;
    z-index: 666;
    opacity: 0.85;
    
    animation-name: clouds;
    animation-duration: 100s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
html body .navbar .container
{
    z-index: 777;
}

@-webkit-keyframes clouds {
    from {
        background-position-x: 0;
    }
    to { 
        background-position-x: -649px;
    }
}

/*

MUST REMAIN ON THEIR OWN

*/

html body .form-range::-webkit-slider-thumb
{
    background-color: var(--color-secondary-dark) !important;
}
html body .form-range::-moz-range-thumb
{
    background-color: var(--color-secondary-dark) !important;
}
html body .form-range::-moz-range-track
{
    background-color: var(--color-primary-light) !important;
}
html body .form-range::-ms-thumb
{
    background-color: var(--color-secondary-dark) !important;
}
html body .form-check-input:checked
{
    background-color: var(--color-secondary-dark) !important;
}

/*

RESPONSIVE COLOURS

*/

@media (max-width: 991px)
{
    html body .navbar .dropdown .dropdown-menu .dropdown-item:hover,
    html body .navbar-expand-lg .navbar-nav li.fa > a.nav-link:hover,
    html body .navbar-expand-lg .navbar-nav .nav-link:hover
    {
        background: var(--color-secondary) !important;
    }
}