:root {
    --primary: #01bcbc !important;
    --primary-100: #e6fffa !important;
    --primary-200: #b2f5ea !important;
    --primary-300: #122c2a !important;
    --primary-400: #4dd1c4 !important;
    --primary-600: #319694 !important;
    --primary-700: #2d7a7c !important;
    --primary-800: #285f62 !important;
    --primary-900: #234e52 !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #464646;
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: #464646 !important;
    background-color: #464646 !important;
}

.text-primary-600 {
    color: #b5b5b5 !important;
}

.bg-primary-100 {
    background-color: #e3e3e3 !important;
}

*, *::before, *::after {
    box-sizing: border-box
}

b, strong {
    font-weight: 500;
}

/* Cancel the bg white for dark mode */
body[data-theme-style="dark"].bg-white {
    background: var(--body-bg) !important;
}

.modal-header {
    padding: 1rem;
    border-bottom: 0;
}

.modal-subheader {
    padding: 0 1rem;
    border-bottom: 0;
    margin: 0;
}

.modal-content {
    padding: 1rem;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Forms */
.input-group-text {
    font-size: 0.9rem;
}

/* Footer */
.footer {
    padding: 2rem 0;
    margin: 2rem 0 0 0;
    font-size: 0.95rem;
    background: var(--footer-bg);
}

.footer {
    color: rgba(255, 255, 255, 0.65);
}

.footer a:not(.dropdown-item), .footer a:hover:not(.dropdown-item) {
    color: rgba(255, 255, 255, 0.65);
}

.footer a.icon {
    color: rgba(255, 255, 255, 0.65);
}

.footer-logo {
    width: 75px;
    max-width: 75px;
    height: auto;
    filter: grayscale(100%);
}

/* Filters */
.filters-dropdown {
    width: 18rem;
    max-height: 30rem;
    overflow-y: auto;
}

/* Custom breadcrumbs */
.custom-breadcrumbs {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.custom-breadcrumbs > li {
    margin-right: .5rem;
}

.custom-breadcrumbs > li > a {
    color: var(--gray);
}

.custom-breadcrumbs > li > svg {
    color: var(--gray-400);
    margin-left: .5rem;
}

.custom-breadcrumbs > li.active {
}

/* Helper classes */
.list-style-none {
    list-style: none;
    padding: 0;
}

.clickable {
    cursor: pointer;
}

.no-underline, .no-underline:hover {
    text-decoration: none;
}

.icon-favicon {
    width: 1rem;
    height: 1rem;
}

/* Index navbar */
.navbar-index {
    min-height: 0 !important;
    background: transparent;
}


.navbar-index .navbar-nav > li {
    padding: .5rem !important;
}

/* Navbar custom menu */
.navbar .dropdown-item svg {
    color: var(--gray-700);
}

.navbar .dropdown-item:active svg {
    color: var(--white);
}

.navbar-main {
    min-height: 0 !important;
    background: var(--white);
    border-bottom: 2px solid var(--gray-200);
}


.navbar-main .navbar-nav > li {
    padding: .5rem !important;
}

.navbar-logo {
    max-height: 2.5rem;
    height: 2.5rem;
}

.navbar-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.navbar-custom-toggler {
    padding: 0.5rem .8rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border-radius: .25rem;

    color: var(--gray-700);
    border-color: var(--gray-300);
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .85);
}

.chart-container {
    position: relative;
    margin: auto;
    height: 250px;
    width: 100%;
}

/* Dropdown */
.dropdown-toggle-simple::after {
    display: none;
}

/* Nav pills custom */
.nav-custom .nav-link {
    font-size: .95rem;
    background: var(--white);
    border-radius: .25rem;
    border: 2px solid var(--gray-200);
    color: var(--gray-700);
}

.nav-custom .nav-link:hover {
    color: var(--primary-900);
    /*background: var(--primary-100);*/
    border-color: var(--primary-700);
}

.nav-custom .nav-link.active {
    color: var(--primary-800);
    border-color: var(--primary-800);
}

/* Index */
.index-container {
    width: 100%;
    padding: 0 0 4rem 0;
    background: linear-gradient(125.95deg, #C700BF 10.95%, #7DA900 100%), linear-gradient(341.1deg, #00C2FF 7.52%, #4E00B1 77.98%), linear-gradient(222.34deg, #A90000 12.99%, #00FFE0 87.21%), linear-gradient(130.22deg, #8FA600 18.02%, #5A31FF 100%);
    background-blend-mode: screen, color-dodge, color-dodge, normal;
}

[data-theme-style="dark"] .index-container {
    background: linear-gradient(130deg, #ad90c1 0%, rgb(3, 0, 84) 100%), linear-gradient(130deg, #09007b 0%, rgba(15, 0, 66, 0) 30%), linear-gradient(129.96deg, rgb(255, 47, 47) 10.43%, rgb(0, 4, 96) 92.78%), radial-gradient(100% 246.94% at 100% 0%, rgb(255, 255, 255) 0%, rgba(37, 0, 66, 0.8) 100%), linear-gradient(121.18deg, rgb(20, 0, 255) 0.45%, rgb(27, 0, 62) 100%), linear-gradient(154.03deg, rgb(206, 0, 0) 0%, rgb(255, 0, 61) 74.04%), linear-gradient(341.1deg, rgb(178, 91, 186) 7.52%, rgb(16, 0, 119) 77.98%), linear-gradient(222.34deg, rgb(169, 0, 0) 12.99%, rgb(0, 255, 224) 87.21%), linear-gradient(150.76deg, rgb(183, 213, 0) 15.35%, rgb(34, 0, 170) 89.57%);
    background-blend-mode: overlay, normal, overlay, color-burn, screen, overlay, difference, difference, normal;
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
    .index-container {
        padding: 0 0 8rem 0;
    }
}

.index-image {
    width: 100%;
    height: auto;
    position: absolute;
    top: -5rem;
}

@media (min-width: 1375px) {
    .index-image {
        width: 115%;
        top: -6.5rem;
    }
}

.index-header {
    font-size: 4rem;
    font-weight: bold;
    color: var(--black);
}

.index-subheader {
    font-size: 1.35rem;
    color: var(--gray-700);
}

.index-button {
    padding: 1rem 1.7rem;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}

.index-background-one {
    background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
    background-size: cover;
}

[data-theme-style="dark"] .index-background-one {
    background: linear-gradient(115deg, #000000 0%, #00C508 55%, #000000 100%), linear-gradient(115deg, #0057FF 0%, #020077 100%), conic-gradient(from 110deg at -5% 35%, #000000 0deg, #FAFF00 360deg), conic-gradient(from 220deg at 30% 30%, #FF0000 0deg, #0000FF 220deg, #240060 360deg), conic-gradient(from 235deg at 60% 35%, #0089D7 0deg, #0000FF 180deg, #240060 360deg);
    background-blend-mode: soft-light, soft-light, overlay, screen, normal;
}

.user-avatar {
    border-radius: 50%;
    max-width: 80px;
    max-height: 80px;
}

/* Basic wrapper */
.basic-wrapper-body {
    background: linear-gradient(180deg, #FFB7B7 0%, #727272 100%), radial-gradient(60.91% 100% at 50% 0%, #FFD1D1 0%, #260000 100%), linear-gradient(238.72deg, #FFDDDD 0%, #720066 100%), linear-gradient(127.43deg, #00FFFF 0%, #FF4444 100%), radial-gradient(100.22% 100% at 70.57% 0%, #FF0000 0%, #00FFE0 100%), linear-gradient(127.43deg, #B7D500 0%, #3300FF 100%);
    background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal;
    background-attachment: fixed;
}

[data-theme-style="dark"].basic-wrapper-body {
    background: linear-gradient(320.54deg, #00069F 0%, #120010 72.37%), linear-gradient(58.72deg, #69D200 0%, #970091 100%), linear-gradient(121.28deg, #8CFF18 0%, #6C0075 100%), linear-gradient(121.28deg, #8000FF 0%, #000000 100%), linear-gradient(180deg, #00FF19 0%, #24FF00 0.01%, #2400FF 100%), linear-gradient(52.23deg, #0500FF 0%, #FF0000 100%), linear-gradient(121.28deg, #32003A 0%, #FF4040 100%), radial-gradient(50% 72.12% at 50% 50%, #EB00FF 0%, #110055 100%);
    background-blend-mode: screen, color-dodge, color-burn, screen, overlay, difference, color-dodge, normal;
    background-attachment: fixed;
}

/* Link Settings page */
.link-background-type-preset {
    width: 100%;
    height: 4rem;
    border-radius: .25rem;
    opacity: .75;
    transition: .3s opacity;
}

.link-background-type-preset:hover {
    cursor: pointer;
}

input[type="radio"]:checked ~ .link-background-type-preset {
    opacity: 1;
}

.link-background-type-image {
    border-radius: .25rem;
    margin-bottom: .5rem;
}

/* Biolink preview iframe */
.biolink-preview-container {

}

.biolink-preview {
    position: relative;
    margin: 0 auto;
    height: auto;
    width: auto;
    display: inline-block;
    text-align: left;
    border-radius: 4rem;
    padding: .7rem;
    background: linear-gradient(45deg, #444, #111);
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.20);
    border: .3rem solid #444546;
}

@media (min-width: 768px) {
    .biolink-preview {
        position: sticky;
        top: .5rem;
    }
}

.biolink-preview-iframe-container {
    overflow: hidden;
    width: 300px;
    height: 625px;
    border-radius: 3rem;
    position: relative;
}

@media (min-width: 768px) {
    .biolink-preview-iframe-container {
        width: 375px;
        height: 825px;
    }
}

.biolink-preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}


/* Others */
.container-disabled {
    pointer-events: none;
    opacity: .5;
}

.container-disabled-simple {
    pointer-events: none;
}

/* Custom dropdown */
.dropdown .dropdown-menu {
    border: 2px solid var(--gray-200);
    box-shadow: none;
}

.dropdown-divider {
    border-top: 2px solid var(--gray-200);
}

/* Animate dropdown menu */
.dropdown .dropdown-menu {
    animation-name: opacityIn;
    animation-duration: 0.3s;
}

@keyframes opacityIn {
    from {
        opacity: .3;
    }
    to {
        opacity: 1;
    }
}

/* Custom row */
.custom-row {
    border-radius: .25rem;
    padding: .75rem;
    position: relative;
    border: 2px solid var(--gray-200);
    background: var(--white);
}

@media (min-width: 992px) {
    .custom-row {
        padding: 1.5rem;
    }
}

.custom-row-inactive {
    background: var(--gray-200);
}

.custom-row-side-controller {
    right: 100%;
    top: 25%;
    font-size: 1.2em;
    padding: .2em .2em;
}

[dir="rtl"] .custom-row-side-controller {
    right: initial;
    left: 100%;
}

@media (min-width: 992px) {
    .custom-row-side-controller {
        position: absolute;
        padding: .4em .8em;
    }
}

.custom-row-side-controller-grab {
    cursor: grab;
}


/* Tables */
.table-custom-container {
    /*box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;*/
    border-radius: .25rem;
    border: 2px solid var(--gray-200);
}

.table-custom {
    margin-bottom: 0;
}

.table-custom thead th {
    border-top: 0;
    border-bottom: 0;
    background: var(--gray-100);
    color: var(--gray-900)
}

.table-custom th {
    padding: 1.25rem 1rem;
}

.table-custom td {
    padding: 1.75rem 1rem;
    background: var(--white);
    vertical-align: middle;
}

.table-custom tbody tr {
    transition: all .3s ease-in-out;
}

.table-custom tbody tr:hover td {
    background: var(--gray-100);
}

/* Custom PRE container */
.pre-custom {
    box-shadow: 0px 0px 20px #0000001a;
    background: white;
    padding: 2rem;
    font-size: 0.75rem;
}

/* Helpers */
.appearance-none {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.select-custom-altum {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232D3748' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    padding: .375rem 1.75rem .375rem .75rem;
    background-color: var(--gray-200);
}

[data-theme-style="dark"] .select-custom-altum {
    background-color: var(--gray-100);
}

/* Highlight color pickers */
.pickr .pcr-button {
    border: 1px solid var(--gray-300)
}

/* Pricing */
.pricing-plan {
    border: 2px solid var(--gray-300);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.2rem 2.2rem 0 2.2rem;
    border-bottom: 1px solid var(--gray-200);
}

[data-theme-style="dark"] .pricing-header {
    border-color: var(--gray-100);
}

.pricing-name {
    background: var(--primary-200);
    padding: .15rem 1.25rem;
    color: var(--primary-600);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5rem;
}

.pricing-price {
    margin: 1rem 0;
}

.pricing-price-amount {
    font-size: 3.3rem;
    font-weight: bold;
}

.pricing-price-currency {
    font-size: .9rem;
    color: var(--gray);
}

.pricing-details {
    text-align: center;
    font-size: .85rem;
    color: var(--primary-800);
    margin-bottom: 1.5rem;
}

.pricing-body {
    padding: 0 2.2rem 2.2rem 2.2rem;
    background: var(--white);
    height: 100%;
}

.pricing-features {
    margin: 3rem 0;
    list-style: none;
    padding: 0;
}

.pricing-features li {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 1rem 0;
}

/* Custom Radio Boxes */
.custom-radio-box {
    cursor: pointer;
}

.custom-radio-box .custom-radio-box-main-text {
    font-size: 2.25rem;
}

.custom-radio-box .custom-radio-box-main-icon {
    font-size: 2.5rem;
}

.custom-radio-box input[type="radio"] + div {
    transition: all .3s ease-in-out;
    border: 2px solid var(--gray-200);
    background: var(--white);
}

.custom-radio-box input[type="radio"]:checked + div {
    border: 2px solid var(--primary);
}

/* Projects */
.project-avatar {
    width: 45px;
    height: 45px;
}

/* QR Codes */
.qr-code {
    width: 100rem;
}

.qr-code-loading {
    animation: opacity-loading 3s infinite ease-in-out;
}

@keyframes opacity-loading {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.qr-code-avatar {
    width: 65px;
    height: 65px;
    border-radius: .25rem;
    padding: .25rem;
    border: 2px solid var(--gray-200);
}

/* Round circles */
.round-circle-md {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.round-circle-lg {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

/* Badge colors */
.badge-primary {
    color: hsl(211, 100%, 35%);
    background-color: hsl(211, 100%, 85%);
}

[data-theme-style="dark"] .badge-primary {
    background-color: hsl(211, 100%, 35%);
    color: hsl(211, 100%, 85%);
}

.badge-secondary {
    color: hsl(208, 7%, 35%);
    background-color: hsl(208, 7%, 85%);
}

[data-theme-style="dark"] .badge-secondary {
    background-color: hsl(208, 7%, 35%);
    color: hsl(208, 7%, 85%);
}

.badge-success {
    color: hsla(134, 50%, 30%, 1);
    background-color: hsla(134, 50%, 85%, 1);
}

[data-theme-style="dark"] .badge-success {
    background-color: hsla(134, 50%, 30%, 1);
    color: hsla(134, 50%, 85%, 1);
}

.badge-danger {
    color: hsla(354, 70%, 35%, 1);
    background-color: hsla(354, 70%, 85%, 1);
}

[data-theme-style="dark"] .badge-danger {
    background-color: hsla(354, 70%, 35%, 1);
    color: hsla(354, 70%, 85%, 1);
}

.badge-warning {
    background-color: hsla(45, 100%, 85%, 1);
    color: hsla(40, 80%, 30%, 1);
}

[data-theme-style="dark"] .badge-warning {
    background-color: hsla(50, 10%, 20%, 1);
    color: hsla(45, 100%, 85%, 1);
}

.badge-info {
    color: hsla(188, 60%, 30%, 1);
    background-color: hsla(188, 78%, 85%, 1);
}

[data-theme-style="dark"] .badge-info {
    background-color: hsla(188, 60%, 30%, 1);
    color: hsla(188, 78%, 85%, 1);
}

.badge-light {
    color: hsla(210, 15%, 35%, 1);
    background-color: hsl(210, 17%, 95%);
}

[data-theme-style="dark"] .badge-light {
    background-color: hsla(210, 15%, 35%, 1);
    color: hsl(210, 17%, 95%);
}

.badge-dark {
    color: hsla(210, 10%, 90%, 1);
    background-color: hsla(210, 10%, 20%, 1);
}

[data-theme-style="dark"] .badge-dark {
    background-color: hsla(210, 10%, 90%, 1);
    color: hsla(210, 10%, 20%, 1);
}

/* Invoice css */
.invoice-table th {
    border-top: 0 !important;
}

@media print {
    .invoice-logo {
        filter: grayscale(100%);
    }
}