/*********************************************** 
----> VARIABLES
***********************************************/

:root {
    --color-body: #e2ddd9;
    --color-topmenu: #212529;
    --color-topmenu-dropdown: #292e33;
    --color-topmenu-dropdown-hover: #25292e;
    --color-footer: #212529;
    --color-footermenu: #181c1f;
    --color-primary-1: #0d2e45;
    --color-primary-2: #0d2e45;
    --color-primary-2-light: #33546b;
    --color-primary-2-lighter: #3a5c73;
    --color-primary-3: #4b6e97;
    --color-primary-3-light: #6489b7;
    --color-primary-4: #feb737;
    --color-white: #ffffff;
    --color-gray-1: #f8f9fa;
    --color-gray-2: #e9ecef;
    --color-gray-3: #dee2e6;
    --color-gray-4: #ced4da;
    --color-gray-5: #adb5bd;
    --color-gray-6: #6c757d;
    --color-gray-7: #495057;
    --color-gray-8: #343a40;
    --color-gray-9: #212529;
    --color-black: #000000;
}

/*********************************************** 
----> GRID
***********************************************/

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

@media all and (max-width: 575px) {
    body {
        background-color: var(--color-white);
    }
}

/*********************************************** 
----> SITE
***********************************************/

#site-wrapper {
    background-color: var(--color-white);
}
#site-footer {
    color: var(--color-gray-5);
    background-color: var(--color-footer);
}
#site-footer a {
    color: var(--color-gray-5);
    text-decoration: none;
}
#site-footer a:hover, #site-footer a:focus {
    color: var(--color-white);
}

/*********************************************** 
----> TYPOGRAPHY
***********************************************/

h1, h1 a, h1 a:hover,
h2, h2 a, h2 a:hover,
h3, h3 a, h3 a:hover,
h4, h4 a, h4 a:hover,
h5, h5 a, h5 a:hover {
    color: var(--color-primary-1);
}
a {
    color: var(--color-primary-3);
}
a:hover {
    color: var(--color-primary-3-light);
}
.text-custom-primary {
    color: var(--color-primary-1);
}
.text-custom-muted {
    color: var(--color-gray-5);
}
.color-inherit, a.color-inherit {
    color: inherit;
}

/*********************************************** 
----> ELEMENTS
***********************************************/

.hr-custom {
    border-color: var(--color-gray-2);
    background-color: var(--color-gray-2);
    opacity: 1;
}
.btn-custom-primary {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-primary-2);
    --bs-btn-border-color: var(--color-primary-2);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-primary-2-light);
    --bs-btn-hover-border-color: var(--color-primary-2-light);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-primary-2-lighter);
    --bs-btn-active-border-color: var(--color-primary-2-lighter);
    --bs-btn-disabled-color: var(--color-gray-7);
    --bs-btn-disabled-bg: var(--color-gray-2);
    --bs-btn-disabled-border-color: var(--color-gray-2);
}
.btn-custom-primary-light {
    --bs-btn-color: var(--color-primary-2);
    --bs-btn-bg: var(--color-gray-1);
    --bs-btn-border-color: var(--color-gray-1);
    --bs-btn-hover-color: var(--color-primary-2);
    --bs-btn-hover-bg: var(--color-gray-2);
    --bs-btn-hover-border-color: var(--color-gray-2);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--color-primary-2);
    --bs-btn-active-bg: var(--color-gray-3);
    --bs-btn-active-border-color: var(--color-gray-3);
    --bs-btn-disabled-color: var(--color-gray-7);
    --bs-btn-disabled-bg: var(--color-gray-2);
    --bs-btn-disabled-border-color: var(--color-gray-2);
}
.btn-custom-primary-light-muted {
    --bs-btn-color: var(--color-gray-5);
    --bs-btn-bg: var(--color-gray-1);
    --bs-btn-border-color: var(--color-gray-1);
    --bs-btn-hover-color: var(--color-gray-5);
    --bs-btn-hover-bg: var(--color-gray-1);
    --bs-btn-hover-border-color: var(--color-gray-1);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--color-gray-5);
    --bs-btn-active-bg: var(--color-gray-1);
    --bs-btn-active-border-color: var(--color-gray-1);
    --bs-btn-disabled-color: var(--color-gray-5);
    --bs-btn-disabled-bg: var(--color-gray-1);
    --bs-btn-disabled-border-color: var(--color-gray-1);
}
.btn-custom-light {
    --bs-btn-color: var(--color-black);
    --bs-btn-bg: var(--color-gray-1);
    --bs-btn-border-color: var(--color-gray-1);
    --bs-btn-hover-color: var(--color-black);
    --bs-btn-hover-bg: var(--color-gray-2);
    --bs-btn-hover-border-color: var(--color-gray-2);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--color-black);
    --bs-btn-active-bg: var(--color-gray-3);
    --bs-btn-active-border-color: var(--color-gray-3);
    --bs-btn-disabled-color: var(--color-gray-7);
    --bs-btn-disabled-bg: var(--color-gray-2);
    --bs-btn-disabled-border-color: var(--color-gray-2);
}
.btn-custom-white {
    --bs-btn-color: var(--color-black);
    --bs-btn-bg: var(--color-white);
    --bs-btn-border-color: var(--color-gray-2);
    --bs-btn-hover-color: var(--color-black);
    --bs-btn-hover-bg: var(--color-white);
    --bs-btn-hover-border-color: var(--color-gray-2);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--color-black);
    --bs-btn-active-bg: var(--color-white);
    --bs-btn-active-border-color: var(--color-gray-2);
    --bs-btn-disabled-color: var(--color-gray-7);
    --bs-btn-disabled-bg: var(--color-gray-2);
    --bs-btn-disabled-border-color: var(--color-gray-2);
}
.badge-custom {
    color: var(--color-white);
    background-color: var(--color-primary-4);
}
.badge-custom-light, .badge-custom-light a {
    color: var(--color-primary-1);
    background-color: var(--color-gray-1);
}
.popover-custom {
    --bs-popover-body-color: inherit;
}
.tooltip-custom .tooltip-inner {
    color: inherit;
}

/* Bootstrap select title */
.bootstrap-select .dropdown-toggle .filter-option {
    color: var(--color-black);
}

/*********************************************** 
----> ACCORDION
***********************************************/

/*
.accordion-button.collapsed {
    color: var(--color-primary-1);
    background: var(--color-gray-1);
}
.accordion-button:not(.collapsed) {
    color: var(--color-primary-1);
    background: var(--color-gray-1);
}
*/

/*********************************************** 
----> TOPMENU
***********************************************/

.topmenu {
    background-color: var(--color-topmenu);
}
.topmenu a {
    color: var(--color-gray-2);
}
.topmenu a:hover, .topmenu a:focus {
    color: var(--color-white);
}
.topmenu .toggler-label {
    color: var(--color-gray-2);
}
.topmenu .toggler-custom {
    color: var(--color-gray-2);
    border-color: var(--color-gray-2);
}
.topmenu .dropdown-toggle-custom.active, .topmenu .dropdown-toggle-custom.show {
    color: var(--color-white);
}
.topmenu .dropdown-menu-custom {
    background-color: var(--color-topmenu-dropdown);
}
.topmenu .dropdown-menu-custom a {
    color: var(--color-gray-2);
}
.topmenu .dropdown-menu-custom a:hover, .dropdown-menu-custom a:focus {
    color: var(--color-white);
    background-color: var(--color-topmenu-dropdown-hover);
}

/*********************************************** 
----> SUBMENU
***********************************************/

.submenu,
.submenu a {
    color: var(--color-primary-1);
    background-color: var(--color-gray-1);
}
.submenu .btn,
.submenu .btn:hover,
.submenu .btn:focus {
    color: var(--color-primary-1);
    border: 1px solid var(--color-primary-1);
}

/*********************************************** 
----> FOOTERMENU
***********************************************/

.footermenu {
    background-color: var(--color-footermenu);
}
.footermenu a {
    color: var(--color-gray-2);
}
.footermenu a:hover, .footermenu a:focus {
    color: var(--color-white);
}

/*********************************************** 
----> FACEBOOK FEED
***********************************************/

#fb-fan .fb-page {
    background-color: var(--color-white);
}

/*********************************************** 
----> COOKIECONSENT
***********************************************/

.cc-window {
    border-top: 1px solid var(--color-gray-2);
}

/*********************************************** 
----> NAV PAGINATION
***********************************************/

nav .pagination .page-item a {
    color: var(--color-primary-1);
}
nav .pagination .page-item a:hover {
    background-color: var(--color-gray-1);
}
nav .pagination .page-item a.aspNetDisabled {
    color: var(--color-gray-5);
}
nav .pagination .page-item a.aspNetDisabled:hover {
    background-color: var(--color-white);
}
nav .pagination .page-item .pager-text {
    color: var(--color-primary-1);
}
nav .pagination .page-item .pager-text:hover {
    background-color: var(--color-white);
}

/*********************************************** 
----> TOOLTIP
***********************************************/

.tooltip-inner {
    color: inherit;
    background-color: var(--color-white);
    box-shadow: 0 0 4px var(--color-gray-4);
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--color-white);
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: var(--color-white);
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: var(--color-white);
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: var(--color-white);
}

/*********************************************** 
----> NAV TABS
***********************************************/

.nav-tabs-custom .nav-item .nav-link {
    color: inherit;
}
.nav-tabs-custom .nav-item .nav-link.active {
    color: var(--color-primary-1);
}

/*********************************************** 
----> INDEX PAGE
***********************************************/

#index-page .forum a {
    color: inherit;
}
#index-page .forum a:hover {
    color: inherit;
}
#index-page .fa-quote-left, #index-page .fa-quote-right {
    color: var(--color-gray-2);
}
#index-page .ad-link {
    background-color: var(--color-gray-1);
}

/*********************************************** 
----> OVERVIEW PAGE
***********************************************/

#overview-page .random-profile .renew a {
    color: var(--color-white);
}

/*********************************************** 
----> STATEMENT PAGE
***********************************************/

#statement-page .buy-statements .btn,
#statement-page .buy-statements .btn:hover,
#statement-page .buy-statements .btn:focus {
    color: var(--color-primary-1);
    border: 1px solid var(--color-primary-1);
    background-color: inherit;
}
#statement-page .buy-statements .aspNetDisabled,
#statement-page .buy-statements .aspNetDisabled:hover,
#statement-page .buy-statements .aspNetDisabled:focus {
    color: var(--color-gray-5) !important;
    border: 1px solid var(--color-gray-4) !important;
}
#statement-page .statements .aspNetDisabled {
    color: var(--color-gray-5) !important;
}

/*********************************************** 
----> PROFILE PAGE
***********************************************/

#profile-page .nav-link .badge {
    color: inherit !important;
}
#profile-page .profile-image .buttons-left .delete-button a, #profile-page .gallery-image .buttons-left .delete-button a {
    color: var(--color-primary-1);
}
#profile-page .profile-image .buttons-left .rotate-button a, #profile-page .gallery-image .buttons-left .rotate-button a {
    color: var(--color-primary-1);
}
#profile-page .profile-image .button-right .upload-button i, #profile-page .gallery-image .button-right .upload-button i {
    color: var(--color-primary-1);
}

/*********************************************** 
----> MESSAGE PAGE
***********************************************/

#message-page .message a {
/*    color: inherit;*/
}
#message-page .message a:hover {
/*    color: var(--color-primary-2);*/
}

/*********************************************** 
----> PAYMENT PAGE
***********************************************/

#payment-page .card-price {
    color: var(--color-primary-4);
}
#payment-page .sms-price, #payment-page .invoice-price {
    color: inherit;
}

/*********************************************** 
----> FORUM
***********************************************/

#forum-thread .aspNetDisabled {
    color: var(--color-gray-5);
}
#forum-thread .quote {
    color: var(--color-gray-6);
    background-color: var(--color-gray-1);
}