body,
main.main-auth {
    min-height: 100vh;
    background-color: black;
}

.form-control::placeholder {
    color: #ffffff40;
}

.modal-content {
    background-color: #00000010;
    border: 1px solid white;
    backdrop-filter: blur(5px);
    border-radius: 0;
}

.modal-header,
.modal-footer {
    border: 0 !important;
}

.btn-close {
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

nav.navbar {
    background-color: #00000099;
    backdrop-filter: blur(5px);
}

#gif-loader {
    opacity: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: fixed;
    z-index: -1;
    top: 0;
    transition: .3s;
}

#gif-loader.shown {
    opacity: 1;
    z-index: 999;
}

.card-login,
.main-col,
.navbar > .container {
    position: relative;
    padding: 20px;
}

.form-floating > label {
    color: white !important;
    background: transparent !important;
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: transparent !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

.navbar {
    position: sticky;
    z-index: 99;
    top: 0;
}

.navbar > .container {
    padding: 10px 20px;
}

.main-col {
    padding: 20px;
}

a.nav-link:not(.dropdown-toggle) {
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.navbar-nav:not(.simple) a.nav-link:not(.dropdown-toggle)::after {
    content: "";
    position: absolute;
    background-color: white;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transition: transform 0.4s;
}

.navbar-nav:not(.simple) a.nav-link:not(.dropdown-toggle)::after {
    bottom: 0;
    right: 0;
    transform-origin: right;
}

.navbar-nav:not(.simple) a.nav-link:not(.dropdown-toggle).active::after,
.navbar-nav:not(.simple) a.nav-link:not(.dropdown-toggle):hover::after {
    transform: scaleX(1);
}

.navbar-nav.simple a.nav-link:hover {
    transform: scale(1.1);
}

.navbar .nav-item.dropdown .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(-10px);
}

.navbar .nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-pet {
    background: none;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 5px 10px;
    color: #2e3047;
    transition: .3s;
}

.btn-pet:not(.active):hover {
    background: lightgray;
}

.btn-pet.active {
    color: white;
    background: #2e3047;
}

.home-chart {
    height: auto !important;
    width: 100% !important;
}

.home-card {
    color: white;
    background-color: #212529;
}

.home-card p {
    font-weight: 500;
    margin-bottom: 7px;
}

.home-card span {
    display: inline-block;
    font-weight: 600;
}

.home-card span.percent {
    color: #078d4e;
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    font-size: 13px;
}

.home-card span.percent i {
    font-size: 10px;
}

.home-card span.num {
    font-size: 50px;
    color: #078d4e;
    margin-right: 6px;
}

.home-card span.text {
    font-weight: normal;
}

.product-info p {
    text-decoration: underline solid 1px lightgray;
    margin: 0;
}

.product-info span {
    color: #078d4e;
    font-size: 25px;
}

.docs-breadcrumb span {
    cursor: pointer;
}

.docs-breadcrumb span:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.tr-doc td:first-child i {
    display: inline-block;
    min-height: 20px;
    max-height: 20px;
    min-width: 20px;
    min-width: 20px;
}

.tr-doc {
    cursor: pointer;
}

.doc-col > div,
.folder-col > div {
    color: white;
    cursor: pointer;
    width: min-content;
    text-align: center;
}

.doc-col i,
.folder-col i {
    font-size: 45px;
}

.folder-col i.open,
.tr-doc.folder td:first-child i.open {
    display: none;
}

.folder-col:hover i.open,
.tr-doc.folder:hover td:first-child i.open {
    display: inline-block;
}

.folder-col:hover i:not(.open),
.tr-doc.folder:hover td:first-child i:not(.open) {
    display: none;
}

.actions-menu,
.dropdown-menu {
    width: min-content;
    background-color: #00000099;
    backdrop-filter: blur(5px);
    border-radius: 0;
    border: 1px solid white;
    padding: 0;
}

.actions-menu .dropdown-item,
.dropdown-menu .dropdown-item {
    color: white;
    position: relative;
    padding: .5rem 1rem;
}

.actions-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
    color: white;
    background-color: var(--bs-body-color) !important;
}

.actions-menu .dropdown-item::after,
.dropdown-menu .dropdown-item::after {
    content: "";
    position: absolute;
    background-color: white;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transition: transform 0.4s;
}

.actions-menu .dropdown-item::after,
.dropdown-menu .dropdown-item::after {
    bottom: 0;
    right: 0;
    transform-origin: right;
}

.actions-menu .dropdown-item:hover::after,
.dropdown-menu .dropdown-item:hover::after {
    transform: scaleX(1);
}

.table-dark th,
.table-dark td {
    background-color: black !important;
}