:root {
    --main-bg-color: #020b15;
    --sec-bg-color: #031d39;
    --info-color: #0dcaf0;
    --dark-color: #000;
    --sec-bg-color-overlay: #031d398f;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ffffff3a; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #020b15; 
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #031d39; 
}

body {
    background-color: var(--main-bg-color) !important;
    background-image: url(https://r2.fivemanage.com/1HmlXP8c0itFbXHi4ACgz/tebex-background-main.png);
    background-size: cover;
}

.navbar-brand {
    min-width: 50px;
    max-width: 150px;
    
}

.navbar-brand img {
    width:auto;
}

.custom-tooltip {
    --bs-tooltip-bg:  var(--info-color) !important;
    --bs-tooltip-color: var(--dark-color) !important;
}
.dropdown-menu {
    --bs-dropdown-bg: var(--sec-bg-color-overlay) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 2px 2px #6fa8dc;
}
.badge {
    --bs-badge-font-size: 8px !important;
    --bs-badge-padding-y: 3px !important;
    --bs-badge-padding-x: 6px !important;
}

.dropdown-menu-xl {
    min-width: 30rem !important;
}
.table-striped {
    --bs-table-bg: transparant !important;    
}
.btn-sm{
    padding: 0.05rem 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    border-radius: 50rem !important;
}

.index-description {
    a {
        color: #e24f98;
        list-style: none;
        text-decoration: none;
        font-weight: 600;
    }
}
.footer-copyright {
    a {
        color: #e24f98;
        list-style: none;
        text-decoration: none;
    }
}

.module {
    background-color: var(--sec-bg-color-overlay);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 2px 2px #6fa8dc;
}
.card {
    --bs-card-bg: var(--sec-bg-color-overlay) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 2px 2px #6fa8dc;
}
.bg-main-content {
    background-color: var(--sec-bg-color-overlay) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 2px 2px #6fa8dc;
}
.content {
    background-color: var(--sec-bg-color-overlay) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 2px 2px #6fa8dc;
}
.btn.btn-outline-info {
    border: 0 !important;
    box-shadow: 0 0 2px 2px #6fa8dc;
    transition: 0.2s !important;
    color: #6fa8dc !important;
    --bs-btn-active-bg: var(--sec-bg-color-overlay) !important;
}
.btn.btn-outline-info:hover {
    background-color: var(--sec-bg-color-overlay) !important;
    color: #4f779c !important;
}
.btn.btn-outline-info:active {
    background-color: var(--sec-bg-color-overlay) !important;
    color: #4f779c !important;
}
.btn-show {
    background-color: var(--sec-bg-color-overlay) !important;
    color: #4f779c !important;
}
.alert.alert-error {
    --bs-alert-bg: #9c4f4f8f !important;
    --bs-alert-color: #ffffff !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 2px 2px #d56d6d;
}

.package-description {
    a {
        color: #e24f98;
        list-style: none;
        text-decoration: none;
        font-weight: 600;
    }
}
.package-image {
    box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.45);
}
.gift-fields {
    background-color: var(--sec-bg-color-overlay) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 2px 2px #6fa8dc;
}

.bg-dark-custom {
    background-color: var(--sec-bg-color-overlay) !important;
    backdrop-filter: blur(10px);
}

.btn.btn-custom {
  --bs-btn-font-weight: 600;
  --bs-btn-color: #ffffff !important;
  --bs-btn-bg: #e24f98 !important;
  --bs-btn-hover-bg: #b7407b;
  --bs-btn-hover-border-color: #b7407b;
  --bs-btn-active-bg: #923363;
  --bs-btn-active-border-color: #923363;
}
.module-text-box {
    a {
        color: #e24f98;
        list-style: none;
        text-decoration: none;
        font-weight: 600;
    }
}
.link {
    a {
        color: #e24f98;
        list-style: none;
        text-decoration: none;
        font-weight: 600;
    }
}