/*
  Place your custom style overrides here.
  Checkout /src/assets/global.scss for an overview of all globally available css variables you
    can override

  NOTE: The main application's styling is included through JavaScript. Therefore, it gets added to
    the head _after_ this file. If you want to override the globally used CSS variables, you can either
    use !important, or increase the specificity from :root
*/

@font-face {
    font-family: 'FiraSans-Regular';
    src: url('fonts/FiraSans-Regular/FiraSans-Regular.eot');
    src: url('fonts/FiraSans-Regular/FiraSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'),
        url('fonts/FiraSans-Regular/FiraSans-Regular.woff2') format('woff2'),
        url('fonts/FiraSans-Regular/FiraSans-Regular.ttf') format('truetype'),
        url('fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'FiraSans-Medium';
    src: url('fonts/FiraSans-Medium/FiraSans-Medium.eot');
    src: url('fonts/FiraSans-Medium/FiraSans-Medium.eot?#iefix') format('embedded-opentype'),
    url('fonts/FiraSans-Medium/FiraSans-Medium.woff') format('woff'),
    url('fonts/FiraSans-Medium/FiraSans-Medium.woff2') format('woff2'),
    url('fonts/FiraSans-Medium/FiraSans-Medium.ttf') format('truetype'),
    url('fonts/FiraSans-Medium/FiraSans-Medium.svg') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'FiraSans-Bold';
    src: url('fonts/FiraSans-Bold/FiraSans-Bold.eot');
    src: url('fonts/FiraSans-Bold/FiraSans-Bold.eot?#iefix') format('embedded-opentype'),
    url('fonts/FiraSans-Bold/FiraSans-Bold.woff') format('woff'),
    url('fonts/FiraSans-Bold/FiraSans-Bold.woff2') format('woff2'),
    url('fonts/FiraSans-Bold/FiraSans-Bold.ttf') format('truetype'),
    url('fonts/FiraSans-Bold/FiraSans-Bold.svg') format('svg');
    font-weight: 700;
    font-style: normal;
}


.art {
    background-image: url("img/background.jpg");
    background-position: right !important;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
.v-logo.logo img,
.v-logo.logo .logo {
    display: none;
}

.v-logo.logo {
    background-image: url("img/logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #f5f6f7 !important;
}

body {

    --brand: #f7bb3c;

    --bmg-orange: #f49200;
    --bmg-magenta: #ff1053;
    --bmg-yellow: #f7bb3c;

    --bmg-yellow-dark: #d39f33;
    --bmg-magenta-dark: #993955;

    --bmg-cyan: #15b7c3;
    --bmg-cyan-dark: #1598a4;
    --bmg-cyan-medium: #8bc9d1;
    --bmg-cyan-light: #a1dfe7;
    --bmg-cyan-lighter: #dbeaf1;

    --bmg-grey: #efeff4;
    --bmg-grey-dark: #c1c1c1;
    --bmg-grey-light: #f5f6f7;
    --bmg-grey-border: #dddddd;
    --bmg-grey-border-dark: #8d8d8d;

    --bmg-perfect: #42af27;
    --bmg-good: #eef325;
    --bmg-okay: #f7c514;
    --bmg-bad: #e05b42;

    --bmg-perfect-label: white;
    --bmg-good-label: black;
    --bmg-okay-label: black;
    --bmg-bad-label: white;

    --bmg-keyword-a: #81b581;
    --bmg-keyword-b: #6aa9ff;
    --bmg-keyword-c: #d77cff;
    --bmg-keyword-d: #eec963;
    --bmg-keyword-e: #d95a59;

}

/* BMG */
body.public .logo {
    display: none !important;
}
body.public input {
    /*background-color: var(--bmg-green-50) !important;*/
}
body.public button:hover {
    background-color: var(--bmg-cyan) !important;
    border-color: var(--bmg-cyan) !important;
}
body {

    --family-monospace: "FiraSans-Regular", monospace !important;
    --family-serif: 'FiraSans-Regular', serif !important;
    --family-sans-serif: "FiraSans-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol" !important;

    /* App specific colors */

    /*--off-white: #dde3e6;*/

    /* Module bar (Global, not based on theme) */

    /*--module-background-color: var(--bmg-green-900) !important;
    --module-text-color: var(--bmg-green-400) !important;
    --module-background-color-active: #13181A !important;
    --module-text-color-active: var(--white) !important;

    --sidebar-background-color: var(--bmg-green-50) !important;
    --sidebar-background-color-alt: #dde3e6 !important;
    --sidebar-text-color: var(--bmg-green-800) !important;
    --sidebar-text-color-alt: var(--bmg-green-600) !important;

    --page-text-color: var(--bmg-green-800) !important;
    --page-background-color: var(--white) !important;

    --heading-text-color: var(--bmg-green-800) !important;
    --note-text-color: var(--bmg-green-400) !important;

    --breadcrumb-text-color: var(--bmg-green-400) !important;
    --breadcrumb-glue-color: var(--bmg-green-100) !important;

    --modal-header-background-color: var(--bmg-green-50) !important;
    --modal-background-color: var(--white) !important;
    --modal-smoke-color: var(--bmg-green-900) !important;
    --modal-tab-text-color: var(--bmg-green-400) !important;
    --modal-tab-text-color-active: var(--bmg-green-900) !important;
    --modal-tab-text-color-disabled: var(--bmg-green-300) !important;

    --notice-text-color: var(--page-text-color) !important;
    --notice-text-color-alt: var(--bmg-green-400) !important;
    --notice-background-color: var(--bmg-green-50) !important;

    --tooltip-background-color: var(--bmg-green-900) !important;
    --tooltip-text-color: var(--white) !important;

    --popover-background-color: var(--page-background-color) !important;
    --popover-text-color: var(--bmg-green-600) !important;
    --popover-text-color-hover: var(--bmg-green-700) !important;
    --popover-text-color-disabled: var(--bmg-green-300) !important;

    --card-background-color: var(--bmg-green-100) !important;
    --card-background-color-hover: var(--bmg-green-600) !important;
    --card-text-color: var(--white) !important;
    --card-text-color-disabled: var(--bmg-green-50) !important;

    --progress-background-color: var(--bmg-green-100) !important;
    --progress-background-color-accent: var(--bmg-green-900) !important;

    --loading-background-color: var(--bmg-green-800) !important;
    --loading-background-color-accent: var(--bmg-green-700) !important;

    --input-text-color: var(--bmg-green-800) !important;
    --input-icon-color: var(--bmg-green-300) !important;
    --input-placeholder-color: var(--bmg-green-300) !important;
    --input-border-color: var(--bmg-green-300) !important;
    --input-border-color-hover: var(--bmg-green-300) !important;
    --input-border-color-focus: var(--bmg-green-600) !important;
    --input-background-color: var(--white) !important;
    --input-background-color-alt: var(--off-white) !important;
    --input-background-color-alt-hover: var(--bmg-green-100) !important;
    --input-background-color-disabled: var(--bmg-green-50) !important;
    --input-background-color-active: var(--bmg-green-700) !important;
    --input-text-color-active: var(--white) !important;
    --input-required-color: var(--bmg-green-400) !important;*/

    /* Main buttons, solid with background hover */

    --button-primary-background-color: var(--bmg-cyan-dark) !important;
    --button-primary-text-color: var(--white) !important;
    --button-primary-background-color-hover: var(--bmg-cyan) !important;
    --button-primary-background-color-disabled: var(--bmg-grey-light) !important;
    --button-primary-text-color-disabled: var(--bmg-grey-dark) !important;

    /* Alternate buttons */

    --button-secondary-background-color: var(--bmg-cyan-light) !important;
    --button-secondary-text-color: var(--bmg-cyan-dark) !important;
    --button-secondary-background-color-hover: var(--bmg-cyan-medium) !important;

    /* Used on Header/Cancel/Back buttons (outlined with text hover) */

    /*--button-tertiary-background-color: var(--bmg-green-50) !important;
    --button-tertiary-text-color: var(--bmg-green-400) !important;
    --button-tertiary-text-color-hover: var(--bmg-green-600) !important;
    --button-tertiary-background-color-disabled: var(--bmg-green-400) !important;
    --button-tertiary-text-color-disabled: var(--bmg-green-600) !important;*/

    /* Table */

    /*--table-head-border-color: var(--bmg-green-200) !important;
    --table-row-border-color: var(--off-white) !important;

    --empty-value: var(--bmg-green-100) !important;
    --highlight: var(--off-white) !important;*/

    /* Public pages are shared across light/dark themes */

   /* --project-background-color: var(--bmg-green-900) !important;*/
}
body .nav-menu .router-link-active,
body .nav-menu .router-link-exact-active:hover,
body .nav-menu a:hover {
    background-color: var(--bmg-yellow-dark) !important;
}
body .nav-menu h3 {
    color: black !important;
}
body .menu-section + .menu-section {
    border-top-color: var(--bmg-yellow-dark) !important;
}
body .content.has-tooltip {
    background-color: var(--bmg-yellow-dark) !important;
}
body .main-bar {
    background-color: var(--bmg-yellow);
}
body .module-bar {
    background-color: var(--bmg-magenta-dark) !important;
    /*color: var(--white) !important;*/
}
body .module-bar svg {
    /*fill: var(--white) !important;*/
}
body .module-bar .v-icon.icon {
    color: var(--white) !important;
}

/**
 * Fullscreen
 */
body.fullscreen {
    padding-left: 0 !important;
}
body.fullscreen .nav-sidebar {
    display: none;
}

/**
 * Accordions
 */
body .accordion_toggler {
    cursor: pointer;
}
body .accordion_toggler h2 {
    position: relative;
}
body .accordion_toggler h2::after {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 19px;
    content: ' ';
    border: solid var(--heading-text-color);
    border-width: 0 3px 3px 0;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
body .accordion_toggler.on h2::after {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
body .accordion_content {
    padding: 20px;
    background-color: var(--bmg-grey-light);
    margin: 0;
    border: 1px solid var(--bmg-grey-border);
    display: none;
}
body .accordion_content.on {
    display: block;
}

body .interface-tags .buttons button {
    background-color: var(--success);
    color: var(--white);
}
body .interface-tags .buttons button:hover {
    background-color: var(--danger);
}

body .body {
    padding: 20px !important;
}

/**
 * Bugs
 */
.tox-tinymce-aux {
    z-index: 9999 !important;
}