:root{
    --bg-transparent-primary: rgb(152 187 255 / 8%);
    --bg-transparent-secondary: rgb(45 45 45 / 22%);
    --bg-transparent-tertiary: rgb(76 102 141 / 18%);

    --bg-hover-primary:rgba(23, 23, 23, 0.12);
}

.blur-before-primary::before{
    z-index: -10;
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(8px);
}

main,
html,
body {
    height: auto !important;
    width: 100%;
}

body {
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
}

.image-light{
    background-image: url("../assets/images/background2.png");
}

.image-dark{
    background-image: url("../assets/images/background1.png");
}

.blur-secondary{
    backdrop-filter: blur(100px);
}

.blur-primary{
    backdrop-filter: blur(8px);
}

.input-background-transparent-light,
.input-background-transparent,
.background-transparent,
.button-background-transparent{
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.button-background-transparent:hover {
    background: var(--bg-hover-primary) !important;
    transition: all .25s ease;
}

.input-background-transparent:focus, .input-background-transparent:active,
.input-background-transparent, .button-background-transparent{
    background: var(--bg-transparent-secondary) !important;
}

.input-background-transparent-light:focus, .input-background-transparent-light:active,
.input-background-transparent:focus, .input-background-transparent:active,
.input-background-transparent, .button-background-transparent,
.input-background-transparent-light{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.icon-background{
    background: var(--bg-transparent-tertiary) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.input-background-transparent-light:focus, .input-background-transparent-light:active,
.input-background-transparent-light,
.background-transparent {
    background-color: var(--bg-transparent-primary);
    inset: 0;
}

.table, .table > :not(caption) > * > *{
    background: transparent;
}

.input-background-transparent-light,
.input-background-transparent {
    caret-color: #fff;
}

.input-background-transparent-light,
.input-background-transparent-light:focus,
.input-background-transparent-light:active,
.input-background-transparent,
.input-background-transparent:focus,
.input-background-transparent:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.input-background-transparent-light::placeholder ,
.input-background-transparent::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
    opacity: 1;
}

/* Chrome, Edge, Safari */
.input-background-transparent-light:-webkit-autofill,
.input-background-transparent-light:-webkit-autofill:hover,
.input-background-transparent-light:-webkit-autofill:focus,
.input-background-transparent-light:-webkit-autofill:active,
.input-background-transparent:-webkit-autofill,
.input-background-transparent:-webkit-autofill:hover,
.input-background-transparent:-webkit-autofill:focus,
.input-background-transparent:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgb(45 45 45 / 22%) inset !important;
    box-shadow: 0 0 0 1000px rgb(45 45 45 / 22%) inset !important;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
}

.table th,
.table td {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.123);
}

.table-scroll{
    max-height: 500px;
    overflow-y: auto;
}

.sections_users_cards tbody{
    transition: opacity .22s ease, transform .22s ease;
    opacity: 1;
    transform: translateY(0);
}

.sections_users_cards tbody.changing{
    opacity: 0;
    transform: translateY(12px);
}

.bg-transparent-warning {
    --bs-bg-opacity: 1;
    background-color: #00000046 !important;
}

.bg-transparent-modal {
    background-color: rgb(152 187 255 / 11%) !important;
    backdrop-filter: blur(100px);
}