:root {
  --pink-light: #FEFEFE;
  --pink-primary: #CC9F44;
  --pink-dark: #D5A952;
}

.card {
    background-color: var(--pink-light) !important;
}

.bg-pink-light {
  background-color: var(--pink-light);
}

.bg-pink-primary {
  background-color: var(--pink-primary);
}

.bg-pink-dark {
  background-color: var(--pink-dark);
}

.bg-pink-radial-gradient {
  background: radial-gradient(var(--pink-primary), var(--pink-light), var(--pink-primary));
}

label > input[type="file"] {
    display: none;
}

span[validation-for]:empty {
    display: none;
}

span[validation-for] {
    background-color: var(--yellow);
    padding: 2px 12px;
    display: inline-block;
    border-radius: 4px;
    font-size: .75rem;
    color: var(--dark);
    margin-top: .25rem;
    text-align: left;
    text-wrap: inherit;
}

.ar-1-1 {
    aspect-ratio: 1/1 !important;
}

.ar-16-9 {
    aspect-ratio: 16/9 !important;
}

.ar-16-75 {
    aspect-ratio: 16/7.5 !important;
}

table.dataTable tbody td.sorting_1 {
    background-color: unset !important;
}

.flex-gap-05 {
    gap: 0.5rem !important;
}

.flex-gap-1 {
    gap: 1rem !important;
}

.datepicker {
    padding: 4px !important;
}

.datepicker td, .datepicker th {
    padding: .4rem;
}

body.vertical-collpsed #side-profile {
    display: none !important;
}

.img-cover-center {
    object-fit: cover !important;
    object-position: center !important;
}

.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.form-group {
    margin-bottom: .75rem;
}

.tx-24-f {
    font-size: 24px !important;
}

.network-border {
    border-radius: 10px;
    width: 140px;
    padding: 4px;
}

.network-card {
    overflow: hidden;
    border-radius: 10px;
    color: #fff !important;
    width: 100%;
}

.network-card-header {
    padding: .5rem;
    text-align: center;
    position: relative;
    /* background: linear-gradient(180deg, #0000009c, transparent); */
}

.network-card-header .img-badge{
    width: 28px;
    position: absolute;
    right: 4px;
    top: 3rem;
}

.network-card-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
}

.network-card-photo img {
    width: inherit;
    height: inherit;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}

.network-card-body {
    text-align: center;
}

.network-card-body table {
    width: 100%;
}

.network-card-body table td {
    background-color: var(--bs-primary-border);
}

.network-card-body table th {
    background-color: var(--bs-primary);
}

.network-card-body table td,
.network-card-body table th {
    width: 33.33%;
    padding: 6px 0;
    border: solid 1px #fff;
}

.network-card-footer {
    text-align: center;
    padding: .5rem;
}

.network-border.register {
    border: solid 2px var(--pink-primary);
    color: var(--bs-white);
}

.network-border.register .network-card {
    background: linear-gradient( to right, var(--pink-dark), var(--pink-primary));
}

.network-border.blank {
    border: solid 2px #a92424;
    color: var(--bs-white);
}

.network-border.blank .network-card {
    background: linear-gradient( to right, #a92424, #741919);
}

.network-border.reg1 {
    border: solid 2px var(--bs-primary);
}

.network-border.reg1 .network-card-body table th {
    background-color: var(--bs-primary-border);
}

.network-border.reg1 .network-card-body table td {
    background-color: var(--bs-primary-hover);
}

.network-border.reg1 .network-card {
    background: radial-gradient(circle, var(--bs-primary), var(--bs-primary-hover), var(--bs-primary-border));
}

#vertical-menu-btn,
.header-item span,
.header-item i {
    color: var(--bs-white) !important;
}

.navbar-header .dropdown .show.header-item {
    background-color: var(--bs-primary);
}

/* light side */

body[data-sidebar="light"] #side-profile a.icon {
    background: var(--bs-gradient-primary) !important;
    color: var(--bs-white) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    text-align: center;
    line-height: 2rem;
}

body[data-sidebar="light"] #side-profile a.icon i {
    color: var(--bs-white) !important;
}

body[data-sidebar="light"] .navbar-brand-box {
    background: var(--bs-white);
}

body[data-sidebar="light"] .metismenu .menu-title,
body[data-sidebar="light"] .metismenu > li > a * {
    color: var(--bs-body-color) !important;
}

body[data-sidebar="light"] .metismenu li ul.sub-menu li a {
    color: var(--bs-body-color) !important;
}

body[data-sidebar="light"] .metismenu > li > a.navside-link.nuxt-link-exact-active,
body[data-sidebar="light"] .metismenu > li > ul > li > a.navside-link.nuxt-link-exact-active {
    border-top-right-radius: var(--bs-radius);
    border-bottom-right-radius: var(--bs-radius);
    background: var(--bs-gradient-primary) !important;
    color: var(--bs-white) !important;
}

body[data-sidebar="light"] .metismenu > li > a.navside-link.nuxt-link-exact-active *,
body[data-sidebar="light"] .metismenu > li > ul > li > a.navside-link.nuxt-link-exact-active * {
    color: var(--bs-white) !important;
}

body[data-sidebar="light"] .vertical-menu {
    background: var(--bs-white) !important;
}

/* dark side */

body[data-sidebar="dark"] #side-profile a.icon {
    background: var(--bs-white) !important;
    color: var(--bs-primary) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    text-align: center;
    line-height: 2rem;
}

body[data-sidebar="dark"] #side-profile a.icon i {
    color: var(--bs-primary) !important;
}

body[data-sidebar="dark"] .metismenu .menu-title,
body[data-sidebar="dark"] .metismenu > li > a * {
    color: var(--bs-white) !important;
}

body[data-sidebar="dark"] .metismenu li ul.sub-menu li a {
    color: var(--bs-white) !important;
}

body[data-sidebar="dark"] .metismenu > li > a.navside-link.nuxt-link-exact-active,
body[data-sidebar="dark"] .metismenu > li > ul > li > a.navside-link.nuxt-link-exact-active {
    border-top-right-radius: var(--bs-radius);
    border-bottom-right-radius: var(--bs-radius);
    background: var(--bs-white) !important;
    color: var(--bs-primary) !important;
    font-weight: bold !important;
}

body[data-sidebar="dark"] .metismenu > li > a.navside-link.nuxt-link-exact-active *,
body[data-sidebar="dark"] .metismenu > li > ul > li > a.navside-link.nuxt-link-exact-active * {
    color: var(--bs-primary) !important;
    font-weight: bold !important;
}

body[data-sidebar="dark"] .vertical-menu {
    background: var(--bs-gradient-primary) !important;
}

body[data-sidebar="dark"] .logo-lg {
    color: var(--bs-white) !important;
}

body[data-sidebar="dark"] #side-profile {
    color: var(--bs-white) !important;
}

.card {
    overflow: hidden;
}

.card-border-top-bg-primary {
    border-top: solid 4px var(--bs-primary) !important;
    border-bottom: solid 4px var(--bs-primary) !important;
}

.card-border-top-bg-secondary {
    border-top: solid 4px var(--bs-secondary) !important;
    border-bottom: solid 4px var(--bs-secondary) !important;
}

.card-border-top-bg-info {
    border-top: solid 4px var(--bs-info) !important;
    border-bottom: solid 4px var(--bs-info) !important;
}

.card-border-top-bg-warning {
    border-top: solid 4px var(--bs-warning) !important;
    border-bottom: solid 4px var(--bs-warning) !important;
}

.card-border-top-bg-success {
    border-top: solid 4px var(--bs-success) !important;
    border-bottom: solid 4px var(--bs-success) !important;
}

.card-border-top-bg-danger {
    border-top: solid 4px var(--bs-danger) !important;
    border-bottom: solid 4px var(--bs-danger) !important;
}

header,
footer {
    color: #ffffff !important;
    background-color: var(--bs-primary-border) !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.bg-page-content {
    width: 100%;
    height: 240px;
    position: absolute;
    background: linear-gradient(to bottom, var(--bs-primary-border), var(--bs-primary-border), var(--bs-primary));
    top: 0;
    left: 0;
    z-index: -1;
}

.card-title {
    margin-bottom: 0 !important;
}

.card {
    box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 25%) !important;
}

.select2-container--default .select2-selection--single {
    border-radius: var(--bs-radius) !important;
}