/**
* Theme/Base
*/
*, ::before, ::after {
    /* border-color: var(--vv-neutral-200); */
    border-width: 0;
    border-style: solid;
}

/* :root[data-theme="dark"] *, 
:root[data-theme="dark"] ::before, 
:root[data-theme="dark"] ::after {
    border-color: var(--vv-neutral-700);
} */

img {
    max-width: 100%;
}

:root {
    --vv-headings-font-family: var(--vv-body-font-family);
    --vv-body-font-size: var(--vv-root-font-size);
    --vv-module-pad: 1rem;
    --vv-component-pad-x: 1rem;
    --vv-component-pad-y: 1rem;
    --vv-body-bg-hover: var(--vv-neutral-200);
    --vv-nav-link: var(--vv-neutral-700);
    --vv-nav-link-accent: var(--vv-neutral-900);
    --vv-nav-link-active: var(--vv-neutral-900);
    --vv-form-border-focus: var(--vv-primary-800);
    --vv-body-text-muted: var(--vv-neutral-600);
    --vv-secondary-text: var(--vv-primary-700);
    --vv-secondary-border: var(--vv-primary-700);
    --vv-secondary-border-hover: var(--vv-primary-700);
    --vv-primary: var(--vv-primary-600);
    --vv-info: var(--vv-blue-600);
    --vv-success: var(--vv-green-700);
    --vv-danger: var(--vv-red-600);
    --vv-primary-bg-hover: var(--vv-primary-700);
    --vv-info-bg-hover: var(--vv-blue-700);
    --vv-success-bg-hover: var(--vv-green-800);
    --vv-danger-bg-hover: var(--vv-red-700);

    --vv-tag-bg: var(--vv-sky-700);
    --vv-tag-bg-hover: var(--vv-sky-800);
}

:root:not([data-theme="dark"]) {
    --vv-info-rgb: var(--vv-blue-rgb-800);
    --vv-success-rgb: var(--vv-green-rgb-800);
    --vv-danger-rgb: var(--vv-red-rgb-800);
    --vv-warning-rgb: var(--vv-yellow-rgb-800);
}

:root[data-theme="dark"] {
    --vv-body-color: var(--vv-neutral-100);
    --vv-nav-link: var(--vv-neutral-300);
    --vv-body-bg-active: var(--vv-primary-700);
    --vv-form-bg: var(--vv-neutral-dark-700);
    --vv-form-border: var(--vv-neutral-dark-700);
    --vv-form-text: var(--vv-neutral-dark-100);
    --vv-body-text-muted: var(--vv-neutral-400);
    --vv-secondary-text: var(--vv-primary-300);
    --vv-secondary-text-hover: var(--vv-primary-400);
    --vv-secondary-border: var(--vv-primary-300);
    --vv-secondary-border-hover: var(--vv-primary-300);
    --vv-body-link: var(--vv-primary-400);
    --vv-form-bg-disabled: var(--vv-neutral-dark-600);
    --vv-form-border-disabled: var(--vv-neutral-dark-600);
    --vv-primary: var(--vv-primary-700);
    --vv-form-bg-addon: var(--vv-neutral-400);
    --vv-primary: var(--vv-primary-700);
    --vv-primary-bg-hover: var(--vv-primary-800);
}

:root[data-theme="dark"] .backdrop:not(.no-backdrop) {
    --vv-body-link: var(--vv-primary-secondary);
    color: var(--vv-neutral-200);
}

:root[data-theme="dark"] .dropdown-menu {
    --vv-body-bg: var(--vv-neutral-900);
}

/* Align footer to the bottom of the page */
html, body {
    min-height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
}
footer {
    margin-top: auto;
}

[hidden] {
    display: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vv-headings-font-family);
}

.mono {
    font-family: var(--vv-font-family-monospace);
}

.vivaz-default-theme {
    background-color: var(--vv-body-bg);
}

[data-theme="dark"] .vivaz-contrast-theme {
    background-color: var(--vv-light);
}

[data-theme="light"][data-theme-bg="off-white"] body {
    background-color: var(--vv-neutral-100);
}

[data-theme="light"][data-theme-bg="white"] .vivaz-contrast-theme {
    background-color: var(--vv-neutral-100);
}

[data-theme="light"][data-theme-bg="off-white"] .vivaz-contrast-theme {
    background-color: var(--vv-white);
}

/**
* Utilities 
*/
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: var(--vv-max-w) !important;
    }		
}

@media (min-width: 640px) {
    .w-sm-auto {
        width: auto !important;
    }
}

.space-x-1 > :not([hidden]) ~ :not([hidden]){
    --vv-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--vv-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--vv-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --vv-space-x-reverse: 0;
    margin-right: calc(1rem * var(--vv-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--vv-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden])  {
    --vv-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--vv-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--vv-space-x-reverse)));
}

@media (min-width: 640px) {
    .space-sm-x-4 > :not([hidden]) ~ :not([hidden]) {
        --vv-space-x-reverse: 0;
        margin-right: calc(1rem * var(--vv-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--vv-space-x-reverse)));
    }
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --vv-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--vv-space-y-reverse)));
    margin-bottom: calc(1rem * var(--vv-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --vv-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--vv-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--vv-space-y-reverse));
}

@media (min-width: 640px) {
    .space-sm-y-0 > :not([hidden]) ~ :not([hidden]) {
        --vv-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--vv-space-y-reverse)));
        margin-bottom: calc(0px * var(--vv-space-y-reverse));
    }
}

.tracking-wide {
    letter-spacing: 0.025em;
}

/**
* Template-specific
**/
header p, #topbar p, footer p {
    margin-bottom: 0;
}

#logo:hover {
    text-decoration: none;
}
#above-fold {
    z-index: 1020;
}
#main-secondary-sidebar {
    max-width: calc(var(--vv-max-w) - var(--vv-w-primary-sidebar, 0) - 1.5rem);
}
#offline .card {
    width: 100%;
    max-width: 400px;
}
@media (min-width: 640px) {
    #offline .card {
        width: 400px;
    }
}


.module-padding {
    padding-left: var(--vv-module-pad);
    padding-right: var(--vv-module-pad);
    padding-top: var(--vv-module-pad);
    padding-bottom: var(--vv-module-pad);
}
.component-padding {
    padding-left: var(--vv-component-pad-x);
    padding-right: var(--vv-component-pad-x);
    padding-top: 0;
    padding-bottom: 0;
}

[class*="-bg-img"] .backdrop:not(.no-backdrop) {
    --vv-body-link: var(--vv-brand-secondary);
    color: var(--vv-dark-text);
	background-color: rgba(var(--vv-neutral-dark-rgb-800), 0.85);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.w-primary-sidebar {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .w-md-primary-sidebar {
        width: var(--vv-w-primary-sidebar, 0);
    }
}

@media (min-width: 992px) {
    .w-lg-primary-sidebar {
        width: var(--vv-w-primary-sidebar, 0);
    }
}

@media (min-width: 1200px) {
    .w-xl-primary-sidebar {
        width: var(--vv-w-primary-sidebar, 0);
    }
}

.svg-base {
    width: 1.25rem;
    height: 1.25rem;
}

.svg-sm {
    width: 1rem;
    height: 1rem;
}
.svg-md {
    width: 1.5rem;
    height: 1.5rem;
}
.svg-lg {
    width: 2rem;
    height: 2rem;
}

.scroll-to-top {
    display: none;
    position: fixed;
    z-index: 9000;
    right: 10px;
    bottom: 10px;
    font-size: 20px;
    background: #555;
    background: rgba(0,0,0,.5);
}

#topbar-inner,
#navbar-inner {
    min-height: 4rem;
}

/**
* System Message
*/
#system-message-container {
    padding-top: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0;
}

/**
* Smartsearch module
*/
.mod-finder .awesomplete {
    display: block;
}

/**
* Breadcrumbs module
*/
.mod-breadcrumbs__divider.float-start {
    display: none;
}
.breadcrumb-item.active {
    --vv-secondary: var(--vv-neutral-light-600);
}
:root[data-theme="dark"] .breadcrumb-item.active {
    --vv-secondary: var(--vv-neutral-light-500);
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
}

/**
* Offcanvas
**/

.offcanvas .nav-item {
    padding: 0.5rem 1rem !important;
}
 
/**
* Navbar
*/
.collapse-menu {
    padding: 0 1rem;
}
.dropdown-menu {
    border-radius: 0.5rem;
    border: 0;
    font-size: inherit;
    min-width: 220px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
:root[data-theme="dark"] .dropdown-menu {
    box-shadow: rgba(180, 180, 180, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.dropdown-menu-start,
.dropdown-menu-end,
.dropdown-menu-center {
    margin-top: 0.75rem !important;
}
.dropdown-menu-center {
    right: auto !important;
    left: 50% !important;
}
.dropdown-menu[data-popper-placement="right-start"] {
    margin-top: -0.25rem !important;
    margin-left: 1.25rem !important;
}
.dropdown-menu[data-popper-placement="left-start"] {
    margin-top: -0.25rem !important;
    margin-right: 1.25rem !important;
}
.dropdown-menu-start,
.dropdown-menu-end,
.dropdown-menu-center {
    /* opacity: 0; */
    transition: .25s cubic-bezier(0.4, 0.0, 0.2, 1);
}
/* .dropdown-menu-start,
.dropdown-menu-end {
    transform: scale(.8) translateY(-10%);
}
.dropdown-menu-center {
    transform: scale(.8) translateY(-10%) translateX(-60%);
} */
.dropdown-menu[data-popper-placement] {
    opacity: 1;
}
.dropdown-menu[data-popper-placement="bottom-start"]:not(.dropdown-menu-center),
.dropdown-menu[data-popper-placement="bottom-end"]:not(.dropdown-menu-center) {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    -o-transform: translate3d(0, 0, 0) !important;
}
.dropdown-menu-center[data-popper-placement="bottom-start"],
.dropdown-menu-center[data-popper-placement="bottom-end"] {
    transform: translate3d(-50%, 0, 0) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;
    -o-transform: translate3d(-50%, 0, 0) !important;
}
.navbar-toggler {
    border: none;
}
.navbar-light .navbar-toggler,
.navbar-dark .navbar-toggler {
    border-color: transparent;
    padding: var(--vv-space-xs) var(--vv-space-s);
}
.navbar-toggler:focus {
    box-shadow: none;
    background-color: var( --vv-body-bg-medium);
}
.nav-link.active,
a.nav-link:focus, 
a.nav-link:hover {
    --vv-nav-link-accent: var(--vv-primary-700);
    color: var(--vv-nav-link-accent);
}
:root[data-theme="dark"] .nav-link.active,
:root[data-theme="dark"] a.nav-link:focus, 
:root[data-theme="dark"] a.nav-link:hover {
    --vv-nav-link-accent: var(--vv-primary-400);
    color: var(--vv-nav-link-accent);
}
.dropdown-item.active,
.dropdown-item:active {
    --vv-body-bg-active: transparent;
}
/* Reset link padding because it will be applied to the <li> tag */
.dropdown-item, 
.nav-link:not([role="tab"]) {
    padding: 0;
}
/* Padding for items within dropdown menu */
.nav .nav-item.dropdown-item {
    padding: 0.5rem 1.5rem;
}

/**
* Tabs
*/
.nav-tabs .nav-link {
    border: 0;
}
.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active {
    --vv-body-border-medium: var(--vv-body-bg-active);
}

/**
* Accordion
*/
.accordion-button {
    font-size: 1rem;
}

/**
* Forms 
*/

form .control-group {
    margin-top: var(--vv-space-m);
}
form .control-label ~ .controls {
    margin-top: var(--vv-space-xs);
}
form .control-label label > span:not(.star) {
    margin-left: var(--vv-space-xs);
}
.control-label .red,
.control-label .star {
    color: var(--vv-red-700);
}
form .form-control-feedback {
    color: var(--vv-red-700);
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238B949E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.input-group .btn-secondary {
    --vv-secondary-border: var(--vv-form-border);
    --vv-secondary-border-hover: var(--vv-form-border);
}