html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.main-green{
    background-color: var(--green-color) !important;
}
.bg-linear{
    background: #00c853;
    background: linear-gradient(
        to bottom,
        #19422e,
        #133324,
        #0f271c,
        #0c1f16,
        #091610,
        #000000 
    ) !important;
}
.text-green{
    color: var(--green-color);
}
.text-green-emphasis{
    color: #21C45D !important;
}
.bg-green-emphasis{
    background-color: #21C45D !important;
}
.bg-red{
    background-color: #200F10 !important;
}
.bg-black{
    background-color: #09090B !important;
}
.text-red{
    color: #200F10 !important;
}
.border-red{
    border : 2px solid #491A1C !important;
}
.text-black{
    color: black;
}
.border-link{
    border: 1px solid #21C45D !important;
    color: white;
    transition: 0.4s;
}
.border-link:hover{
    color: white !important;
    background-color: #21C45D !important;
    transition: 0.4s;
}
.border-cards{
    border: 3px solid black !important;
}
.shadow-custom{
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    position: relative;
}
.eye-margin{
    margin-top: 10px;
}
.pointer{
    cursor: pointer;
}
.bg-hover{
    transition: .4s;
}
.bg-notif{
    background-color: #16A249 !important;
}
.bg-hover:hover{
    background-color: #16A249 !important;
}
.app-hover{
    transition: 0.3s;
}
.app-hover:hover{
    color: white !important;
    transition: 0.3s;
}
.fs-7{
    font-size: 0.8rem !important;
}
.wrapper{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content{
    flex: 1 0 auto;
}
.footer{
    text-align: center;
    flex-shrink: 0;
}
.form-switch .form-check-input{
    width: 3em !important;
    height: 1.4em !important;
}
.btn-outline-success{
    --bs-btn-color: #212529 !important;
    --bs-btn-border-color: #DEE2E6 !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--green-color) !important;
    --bs-btn-hover-border-color: var(--green-color) !important;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--green-color);
    --bs-btn-active-border-color:  var(--green-color) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--green-color) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--green-color) !important;
    --bs-gradient: none;
}
.btn-outline-form{
    --bs-btn-color: white !important;
    --bs-btn-border-color: #DEE2E6 !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--green-color) !important;
    --bs-btn-hover-border-color: var(--green-color) !important;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--green-color);
    --bs-btn-active-border-color:  var(--green-color) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--green-color) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--green-color) !important;
    --bs-gradient: none;
}
.active{
    color: #21C45D !important;
    background-color: #0B1C13 !important;
    font-weight: bold;
}
.transition{
    transition: 0.4s;
}
.scrollable-container{
    position: sticky;
    top: 0;
    overflow-y: scroll; 
    scrollbar-width: thin;
}
.scrollable-container-laptop{
    position: sticky;
    top: 0;
    height: calc(110vh - 10vh);
    overflow-y: scroll; 
    scrollbar-width: thin;
}
.active_admin{
    background-color: #21C45D !important;
    border-radius: 5px;
}
.w-5{
    width: 5%;
}
.w-6{
    width: 6%;
}
.w-8{
    width: 8%;
}
.w-10{
    width: 10%;
}
.w-15{
    width: 15%;
}
.w-15{
    width: 15%;
}
.w-20{
    width: 20%;
}
.w-80{
    width: 80%;
}
.table-responsive{
    width: 100%;
    overflow-x: auto;
}
.btn-brown{
    background-color: #635910 !important;
    color: #D9C43C !important;
}
.btn-brown-active{
    background-color: #58500f !important;
    color: #D9C43C !important;
}
.bg-brown{
    background-color: #58500f !important;
}
.btn-brown:hover{
    background-color: #58500f !important;
}
.btn-blue{
    background-color: #105963 !important;
    color: #3CE1FD !important;
}
.btn-blue-active{
    background-color: #0f5058 !important;
    color: #3CE1FD !important;
}
.btn-blue:hover{
    background-color: #0f5058 !important;
}
.btn-green{
    background-color: #186510 !important;
    color: #43B935 !important;
}
.btn-green-active{
    background-color: #14550d !important;
    color: #43B935 !important;
}
.btn-green:hover{
    background-color: #14550d !important;
}
.btn-pink{
    background-color: #633C39 !important;
    color: #DC959A !important;
}
.btn-pink-active{
    background-color: #50302e !important;
    color: #DC959A !important;
}
.btn-pink:hover{
    background-color: #50302e !important;
}
.btn-black{
    background-color: #212529 !important;
    color: white !important;
}
.btn-black-active{
    background-color: #08090a !important;
    color: white !important;
}
.btn-black:hover{
    background-color: #08090a !important;
}
.btn-yellow{
    background-color: #FFCA2C !important;
}
.btn-yellow-active{
    background-color: #e4b527 !important;
}
.btn-yellow:hover{
    background-color: #e4b527 !important;
}
.btn-red{
    background-color: #d63636 !important;
    color: white !important;
}
.btn-red:hover{
    background-color: #9e0d0d !important;
    color: white !important;
}
.pe-icon{
    padding-right: 18px !important
}
.mt-profile{
    margin-top: 8rem !important;
}
.bold{
    color: #21C45D !important;
    font-weight: bold !important;
}
table th, table td {
    text-align: center;
    vertical-align: middle;
}
.table-black th, .table-black td{
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    color: white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}
.disable{
    cursor: default;
    pointer-events: none;        
    text-decoration: none;
    color: grey;
}
.dashboard-card {
    background: linear-gradient(to bottom right, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 30px 20px;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    text-align: center;
    height: 100%;
    color: #fff;
}
.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}
.dashboard-icon {
    font-size: 2rem;
    margin-bottom: 15px;
}
.dashboard-label {
    font-size: 1rem;
    font-weight: 600;
}
.card-faq       { background-color: #0d1c3e; }
.card-trans     { background-color: #3a0d0d; }
.card-company   { background-color: #0d3e1c; }
.card-task      { background-color: #0d3e1c; }
.card-buy       { background-color: #1a1a2e; }
.card-exchange  { background-color: #1e1e1e; }
.card-earn      { background-color: #0d1c3e; }
.card-logout    { background-color: #3e2f0d; }
.card-team      { background-color: #1f1f1f; }
.icon-blue      { color: #3abef9; }
.icon-red       { color: #ff6b6b; }
.icon-green     { color: #4caf50; }
.icon-yellow    { color: #ffca28; }
.icon-gray      { color: #cccccc; }
.w-auth-button{
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.w-auth-button:hover{
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    transform: scale(1.03);
}
.input-form.form-control:focus{
    border-color: #00ff99;
    box-shadow: 0 0 8px #00ff99;
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.input-form.form-control:focus::placeholder{
    color: #fff;
    opacity: 1;
}
.bg-header{
    background-color: #222224 !important;
}
.p-accordion{
    padding : 5px 10px 5px 10px;
}
.raduis{
    border-radius : 16px !important;
}
.border-green{
    border-left : 5px solid #028f50;
}
.bg-green{
    background-color: #adffda;
}
.border-yellow{
    border-left : 5px solid #e4b527;
}
.bg-yellow{
    background-color: #fde7a3;
}
.border-red-emphasis{
    border-left : 5px solid #9E0D0D;
}
.bg-red-emphasis{
    background-color: #af6d6d;
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-size: 1rem;
    width: 1rem;
    height: 1rem;
    content: '';
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg); /* rotates when opened */
}
.modal-content{
    background-color: transparent !important;
}
.contain{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.bg-text-gold {
    background: #b8930d;
    background: linear-gradient(
        to bottom,
        #F4C413,
        #daae10,
        #caa20f,
        #b8930d
    ) !important;
    color: #000000 !important;
}
.bg-text-silver {
    background: #979a9e;
    background: linear-gradient(
        to bottom,
        #CACED5,
        #b8bcc2,
        #a5a8ad,
        #979a9e
    ) !important;
    color: #000000 !important;
}
.bg-text-platinum {
    background: #5a5e66;
    background: linear-gradient(
        to bottom,
        #989FAB,
        #838994,
        #6e737c,
        #5a5e66
    ) !important;
}
.mt-notification{
    margin-top: 40px;
}
.bg-unread-notification{
    background-color: rgba(0, 0, 0, 0.1) !important;
}
.show{
    display: block !important;
}