/* 
    Google FONTS 
    ==============================================
    Standards for text weights:
        Thin            100     
        Extra Light     200
        Light           300
        Regular         400
        Medium          500
        Semi-Bold       600
        Bold            700
        Black           900    

    DEFINED BREAKPOINTS IN BS4 :root { var.... }
    ==============================================
        --breakpoint-xs: 0;
        --breakpoint-sm: 576px;
        --breakpoint-md: 768px;
        --breakpoint-lg: 992px;
        --breakpoint-xl: 1200px;

*/
/* @import url('https://fonts.googleapis.com/css?family=Poppins:200,400,600,900&display=swap'); */
/* 
    Google font 'Yantramanav' 
    comes in: Thin (100 - unreadable), Light(300), Regular(400), Medium(500), Bold(700), Black(900)
*/
@import url('https://fonts.googleapis.com/css?family=Yantramanav:300,400,500,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600,600,700,900&display=swap');

* {
    box-sizing: border-box;
}

html,body{
    overflow-x: clip;
}

:root {
    --default-content-font-size: 11pt;  /* fall back for reset */
    --custom-content-font-size: var(--default-content-font-size);  /* can be changed in UI */
    --app-body-width: 1600px;
    --app-footer-background: #c52977;
    --app-black: #565656;
    --app-color: #E71B6A;
    --app-color-dark: #c52977;
    --app-blue-light: #70BCE7;
    --app-blue-dark: #1d3be6;
    --app-violet: #8e37c4;
    --app-orange: hsl(36, 100%, 62%); /* #ffb13c rgb(255, 177, 60)*/
    /* responsive breakpoints */
    --app-breakpoint-xs: 0;
    --app-breakpoint-sm: 576px;
    --app-breakpoint-md: 768px;
    --app-breakpoint-lg: 992px;
    --app-breakpoint-xl: 1200px;
    /* input control colors */
    --app-input-border: 1px solid #ccc;
    --app-input-focus: hsla(205, 66%, 34%, 40%);
    
    /* project status colors */
    --project-blue: #0000ff;
    --project-orange: #ffb13c;
    --project-grey: #808080;
}

html {
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Yantramanav', sans-serif;
    font-size: 12pt;    /* change font-size to change entire page sizing - all size values are relative to this */
    color: #333;
    /*min-height: 100vh;*/
    max-width: var(--app-body-width);
}

/*
    Special highlight for TRAINING-MODE
*/
body.training-mode{
    outline: 8px dotted hsla(0, 100%, 50%, 30%);
    outline-offset: -8px;
}

/* remove text-decoration for all anchor links */
a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    color:inherit;
}
a:hover {text-decoration: underline;}

/* display-none */
.display-none{ display:none;}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 2em;
    padding-right: 2em;
}

/* hide all data-model-loader templates by default */
[data-model-template] {display: none;}

/* 
    BUSY animation which can be shown in the center of the screen
    Usage:
            <img class="app-busy" src="/images/logo/app-busy.svg">

    Turn off in script after 1 second delay:
            $('.app-busy').delay(1000).fadeOut();
*/
img.app-busy {
    position: fixed;
    width: 150px;
    height: 150px;
    left: 50%;
    top: 50%;
    transform: translate(-75px,-75px);
}

/*
    HEADER FONT DEFINITIONS
*/
h1,h2,h3,h4,h5,h6 {line-height: .7em;}
h1 {
    font-size: 2.0em;
    font-weight: 700;
}
h2 {
    font-size: 1.1em;
    font-weight: 200;
}
h3 {
    font-size: 1.0em;
    font-weight: 600;
}
h4 {
    font-size: 0.9em;
    font-weight: 400;
}
h5 {
    font-size: 0.8em;
    font-weight: 200;
}
h6 {
    font-size: 0.6em;
    font-weight: 200;
}

/*
    ==========================================
    GLOBAL CLASSES
    ==========================================
*/
/* 
    Simple generic hover effects
*/
.grow-5 {
    transition: all 200ms ease-in-out;
}

    .grow-5:hover {
        transform: scale(1.05);
    }

.grow-10 {
    transition: all 200ms ease-in-out;
}

    .grow-10:hover {
        transform: scale(1.1);
    }

.grow-20 {
    transition: all 200ms ease-in-out;
}

    .grow-20:hover {
        transform: scale(1.2);
    }

.hover-shadow:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.32), 0 6px 12px rgba(0, 0, 0, 0.32);
}
/* Wiggle effect (stops on hover) */
@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(0deg);
    }

    85% {
        transform: rotate(5deg);
    }

    95% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.wiggle {
    display: inline-block;
    animation: wiggle 2.5s infinite;
}
    .wiggle:hover {animation: none;}

/* Pulsating effect (stops on hover) - scale to 110% */
.pulsate {
    display: inline-block;
    animation: pulsate 2.5s infinite;
}
    .pulsate:hover {
        animation: none;
    }
    @keyframes pulsate {
        0% {transform: scale(1);}
        80% {transform: scale(1);}
        85% {transform: scale(1.1);}
        95% {transform: scale(.9);}
        100% {transform: scale(1);}
    }

/* Pulsating effect (stops on hover) - scale to 120% */
.pulsate-120 {
    display: inline-block;
    animation: pulsate-120 2.5s infinite;
}
    .pulsate-120:hover {
        animation: none;
    }
    @keyframes pulsate-120 {
        0% {transform: scale(1);}
        80% {transform: scale(1);}
        85% {transform: scale(1.2);}
        95% {transform: scale(.8);}
        100% {transform: scale(1);}
    }

/* Pulsating with blur effect (stops on hover) */
@keyframes pulsate-blur {
    0% {
        transform: scale(1);
        filter: blur(0);
    }

    80% {
        transform: scale(1);
        filter: blur(0);
    }

    85% {
        transform: scale(1.1);
        filter: blur(0);
    }

    95% {
        transform: scale(.9);
        filter: blur(2px);
    }

    100% {
        transform: scale(1);
        filter: blur(0);
    }
}

.pulsate-blur {
    display: inline-block;
    animation: pulsate-blur 2.5s infinite;
}

.pulsate-blur:hover {
    animation: none;
}

.pulsate-blur-once {
    display: inline-block;
    animation: pulsate-blur 2.5s forwards;
}
    
/*
    Generic overflowing text truncate
*/
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 
    BACKGROUND STRIPES
*/
.bg-stripes {
    background: repeating-linear-gradient( 45deg, transparent, transparent 10px, #eee 10px, #eee 20px);
}

/*
    Standard Non-BS input elements DEFAULT AND FOCUS HIGHLIGHTING
*/
input, textarea, select {
    border:var(--app-input-border);
    border-radius: .3em;
}
/* focus highlight for all focused, writeable input elements  */
input:focus-visible:not(:read-only), textarea:focus-visible:not(:read-only), select:focus-visible:not(:read-only) {
    border-color: var(--app-input-focus);
    box-shadow: 0 1px 1px var(--app-input-focus) inset, 0 0 4px var(--app-input-focus);
    outline: 0 none;
    color:hsl(205, 66%, 34%);
    font-weight: 600;
}

/*

//                  __        __  
//  |\ |  /\  \  / |__)  /\  |__) 
//  | \| /~~\  \/  |__) /~~\ |  \ 
//                                

*/
.acme-navbar {
    --brand-color: #E71B6A;
    --link-color: #9F9F9F;
    --link-hover-color: hsl(0, 0%, 75%);
    --toggle-color: hsl(0, 0%, 40%);
    --link-padding: .5em;
    margin: 1em 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    
    /*overflow:hidden;*/
    /*overflow-clip-margin: 5em;*/
    /* important or ::after background forces a horizontal scrollbar */
    /*overflow-x: hidden;*/ 
}
    .acme-navbar::after{
        content: "";
        position: absolute;
        background: url('/images/acme-icon-grey.svg') center center no-repeat;
        background-size: contain;
        background-attachment: fixed;
        transform: rotate(-8deg);   /*have to use scale or the image will be cut off due to rotating*/
        opacity: .5;
        top: .5em;
        right:-1.4em;   /* exact position or page shows scrollbar because of overflow horizontally or use position:fixed */
        width: 15rem;
        height: 8rem;
        pointer-events: none;
    }


      /* 
        BACKGROUND ART
      */
    .acme-navbar .background-art{
        position: absolute;
        display:flex;
        gap:6vw;
        left:-7vw;
        top:0;
        z-index: -1;
        pointer-events: none;
        filter: drop-shadow(3px 5px 12px rgb(0 0 0 / 0.4));
        transform: rotate(10deg);
        transform-origin: 50% 50%;
    }
    .acme-navbar .background-art .rect {
        width:17vw;
        height:17vw;
        border: 2.5vw solid hsla(202, 41%, 43%, .1);
    }

      /* 
        BRAND
      */
      .acme-navbar .brand { 
        display: flex;
        align-items: center; 
        column-gap: .5em;
        color: var(--brand-color);
      }
      .acme-navbar .brand .brand-block { display: flex;flex-direction: column;}
      .acme-navbar .brand .title { 
        font-weight: 600;
        font-size: 2em;
        line-height:1.5rem;
      }
      .acme-navbar .brand .subtitle { 
        font-weight: 300;
        font-size: 20px;
        padding-top: .625em;
        line-height:.8rem;
        letter-spacing: .1em;
      }
      /* add gap before last item (user avatar) */
      .acme-navbar .links li.extra-distance:not(:blank) {padding:0;margin-left: 2em;}

      /* 
        LINKS TOGGLE
      */
      .acme-navbar .links-toggle {
        display:none; /* set to FLEX when turned on */
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
      }
      .acme-navbar .links-toggle .bar {width: 100%; height:3px; background-color: var(--toggle-color); border-radius: 10px;}

      /* 
        LINKS
      */
      .acme-navbar .links ul {
        margin:0;
        padding:0;
        display:flex;
        align-items: center;
      }
      .acme-navbar .links li { list-style: none; padding:var(--link-padding); }
      /*.acme-navbar .links li:hover { box-shadow: 0 1px 0 var(--brand-color); }*/
      .acme-navbar .links a.navigation-link  { display:block; position: relative; text-decoration: none; color:var(--link-color); font-weight: 600;}
      /* .acme-navbar .links li[active] a { border-top: 3px solid var(--brand-color); margin-bottom: 3px; } */
      .acme-navbar .links li[active] a.navigation-link::before { 
        content: '';
        width:calc(100% + 1em);
        height:3px;
        background-color: var(--brand-color);
        top: -.5em;
        left: -.5em;
        position: absolute;
       }
       .acme-navbar .links a.navigation-link:active { color: var(--brand-color); }
        /* link hover animation (grey bar below) */
        .acme-navbar .links li:not(.no-underline):hover a.navigation-link::after {
            content: '';
            width: calc(100% + 1em);
            height: 0;
            background-color: var(--link-hover-color);
            left: -.5em;
            bottom: -.5em;
            position: absolute;
            animation: nav-link-hover-effect 200ms ease-in 50ms forwards;
        }

        @keyframes nav-link-hover-effect {
            0% {height: 0;}
            100% {height: 3px;}
        }
        
        .acme-navbar .user-avatar{
            display:grid;
            place-items: center;
            background-color: hsla(209,76%,23%, 60%);
            padding:.5em;
            border: 1px solid white;
            border-radius: 50%;
            color: hsl(0, 0%, 95%);
        }
        .acme-navbar .user-avatar.no-user{
            /*background-color: hsl(0, 0%, 70%);*/
            background-color: transparent;
            color: hsl(0, 0%, 90%);
            border-color: hsl(0, 0%, 70%);
            border-radius: .2em 1em .2em 1em;
            width:4ch;
        }
        /* 
            ACTIVE PROJECT CONTROL 
        */
        .acme-navbar .active-project {
            --padding-y: .1em;
            --background: #FFB13C;
            --border-radius: .3em;
            display:flex;
            justify-content: center;
            font-family: 'Yantramanav', sans-serif;
            /*font-size: .9em;*/
            font-weight: 400;
            border:1px solid hsl(36, 50%, 62%);
            border-radius: var(--border-radius)
        }
        .acme-navbar .active-project .prefix {
            display:grid;place-items: center;
            background-color: white;
            padding: var(--padding-y) .5em;
            border-radius: var(--border-radius) 0 0 var(--border-radius);
        }
        .acme-navbar .active-project .prefix .icon {height:1em;width:auto;opacity: .5;}
        .acme-navbar .active-project .prefix .icon path {fill: #767676;}
        .acme-navbar .active-project .project-name {
            /* set flux-dropdown vars */
            --arrow-width: .2em;
            --arrow-color: white;
            padding: var(--padding-y) .5em;
            padding-right: 2em;
            min-width: 20ch;
            text-transform: uppercase;
            background-color: var(--background);
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
            color:white;
            text-align: left;
        }
        .acme-navbar .active-project .flux-dropdown.project-name {--border:0;--border-radius: .25em;}
        /* adjust text margin to center */
        .acme-navbar .active-project .project-name > span {display:block;padding-top: .1em;}  
        .acme-navbar .active-project .dropdown-items flux-project{color:#666;cursor:default;font-size: 1.1em;}  
        .acme-navbar .active-project .dropdown-items flux-project[selected]{color:var(--background);text-transform: uppercase;}  
        .acme-navbar .active-project .dropdown-items flux-project:not([selected]):hover{color:#333;font-weight: 600;cursor:pointer;}
        /* PROJECT INFO @ BASELINE */
        .acme-navbar .active-project.is-baseline { --background: #48A400;}
        
        
        /*
            GLOBAL FONT-RESIZERS
        */
        .acme-navbar .font-size-action {
            position: absolute;
            right:1.5em;
            /*left:.5em;*/
            bottom:-.5em;
            display:flex;
            align-items: center;
            gap:.3em;
            /*transition: transform 80ms linear 300ms;*/
            transition: all 80ms linear 300ms;
        }
        .acme-navbar .font-size-action > a {color:#ddd;font-weight:300;line-height: .8em;font-size: 1.1em;}
        .acme-navbar .font-size-action:hover {transform:scale(1.6);}
        .acme-navbar .font-size-action > a:hover {text-decoration: underline;font-weight: 600;color:#aaa;}
        /* font-reset only shows up on hover */
        .acme-navbar .font-size-action > a.font-reset {font-size: .8em;width:0px;opacity:0;transition: opacity 80ms linear;}
        .acme-navbar .font-size-action:hover > a.font-reset {width:auto;opacity: 1;}
        


        /* 
            RESPONSIVE
            at 1035 place brand in center and menu links below with active indicator below instead of above
            at 650px put all menus vertically
        */
        @media (max-width: 1050px) {

            .acme-navbar .links-toggle {display:flex;}
            .acme-navbar .links {display:none;}

            .container-fluid {
                padding:0 .5em;
                margin:0;
            }
            
            /* .acme-navbar .links-toggle {display:flex;} */
            .acme-navbar .links {
                margin-top: 2em;
            }
            /* hide font-resizer */
            .acme-navbar .font-size-action{display:none;}

            .acme-navbar {
                flex-direction: column;
            }
                /* move active inddicator down */
                .acme-navbar .links li[active] a::before {
                    top: unset;
                    bottom: -.5em;
                }
                /* move hover indicator up */
                .acme-navbar .links li:hover {
                    box-shadow: 0 -1px 0 var(--brand-color);
                }
        }
        @media (max-width: 650px) {
            .acme-navbar .links ul {flex-direction: column;}
            /* remove extra left margin from last child (avatar) to center correctly */
            .acme-navbar .links li:last-child {margin: 0;}
        }

/*
//   __   __       ___  ___      ___ 
//  /  ` /  \ |\ |  |  |__  |\ |  |  
//  \__, \__/ | \|  |  |___ | \|  |  
//                                   
*/
#masterContent {font-size: var(--custom-content-font-size);}

/* 
   ___  __   __  ___  ___  __  
  |__  /  \ /  \  |  |__  |__) 
  |    \__/ \__/  |  |___ |  \ 
                               
*/
#MainFooter {
    position: relative;
    background-color: var(--app-footer-background);
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* border-radius: 0 0 .5em .5em; */
    overflow: hidden;
}

    #MainFooter::after {
        content: "";
        background: url('/images/acme-icon-white.svg') center center no-repeat;
        opacity: .15;
        transform: rotate(-15deg) scale(.8) translateY(-.5em); /* have to use scale or the image will be cut off due to rotating */
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        margin: 0 auto;
        pointer-events: none;
    }

    #MainFooter a {
        text-decoration: none;
        color: white;
        font-size: .9em;
    }

    #MainFooter label {
        color: white;
        font-size: 1.2em;
        font-weight: 600;
        margin-bottom: 0px;
    }

    #MainFooter p {
        color: white;
        font-size: 0.7rem;
        margin-bottom: 0;
    }

/* 
      acme Checkbox
      Scalable styled checkbox which can be stacked horizontally or vertically
      and will align perfectly.
      Sample:
              <label class="acme-checkbox" style="font-size: 2em;">Checkbox 2
                <input type="checkbox" checked>
                <span class="checkmark"></span>
              </label>        
*/
.acme-checkbox {
    display: block;
    position: relative;
    padding-left: 1.7em;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    /* Hide the browser's default checkbox */
    .acme-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    /* Create a custom checkbox */
    .acme-checkbox .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 1.25em;
        width: 1.25em;
        background-color: #eee;
    }
    /* On mouse-over, add a grey background color */
    .acme-checkbox:hover input ~ .checkmark {
        background-color: #ccc;
    }
    /* When the checkbox is checked, add a blue background */
    .acme-checkbox input:checked ~ .checkmark {
        /* background-color: #2196F3; */
        background-color: var(--app-color);
    }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.acme-checkbox input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.acme-checkbox .checkmark:after {
    left: .5em;
    top: .2em;
    width: .3em;
    height: .7em;
    border: solid white;
    border-width: 0 .12em .12em 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*
    RadioButtons
    Scalable styled radio-buttons which can be stacked horizontally or vertically
    and will align perfectly.
    Sample:
            <label class="acme-radio" style="font-size: 2em;">Three
              <input type="radio" name="radio2">
              <span class="checkmark"></span>
            </label>
*/
.acme-radio {
    display: block;
    position: relative;
    padding-left: 1.7em;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.2em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    /* Hide the browser's default radio button */
    .acme-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
    /* Create a custom radio button */
    .acme-radio .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 1.2em;
        width: 1.2em;
        background-color: #eee;
        border-radius: 50%;
    }
    /* On mouse-over, add a grey background color */
    .acme-radio:hover input ~ .checkmark {
        background-color: #ccc;
    }
    /* When the radio button is checked, add a blue background */
    .acme-radio input:checked ~ .checkmark {
        /* background-color: #2196F3; */
        background-color: var(--app-color);
    }
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.acme-radio input:checked ~ .checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.acme-radio .checkmark:after {
    /* top: .385em; */
    /* left: .402em; */
    top: 30%; /* 50% - 20% of circle) */
    left: 30%; /* 50% - 20% of circle) */
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: white;
}


/* 
    Collapsing input labels
    Url: https://w3bits.com/labs/css-floating-labels/

    Sample use:

    <div class="floating-label-wrap">
        <input type="email" class="floating-label-field" id="field-2" placeholder="Email">
        <label for="field-2" class="floating-label">Email</label>
    </div>

*/

.floating-label-field,
.floating-label-wrap {
    position: relative;
}

/* Making the label break the flow */
.floating-label {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    z-index: 1500;
}

/* Hide the browser-specific focus styles */
.floating-label-field {
    color: rgba(44, 62, 80, .75);
    border-width: 0;
    z-index: 2000;
}

    .floating-label-field:focus-visible {
        outline: 0;
        box-shadow: 0;
    }

    .floating-label-field::placeholder {
        color: rgba(44, 62, 80, .5);
    }

/* Make the label and field look identical on every browser */
.floating-label,
.floating-label-field {
    font: inherit;
    line-height: 1;
    display: block;
    width: 100%;
}

/* FRAMED STYLE */
.floating-label-field {
    padding: 0.6em; /* gap for the floating label on top */
    transition: border-color .25s ease-in-out;
    color: #333; /* input text color */
    border: 1px solid rgba(0, 0, 0, .4); /* FRAME COLOR */
    border-radius: 5px;
    background-color: transparent;
}

    .floating-label-field + .floating-label {
        position: absolute;
        top: .8em;
        left: .25em;
        display: inline-block;
        width: auto;
        margin: 0;
        padding-left: .5em; /* padding when placeholder is shown to center text */
        transition: transform .25s, opacity .25s, padding .25s ease-in-out;
        transform-origin: 0 0;
        color: #aaa; /* placeholder color */
        font-weight: 400; /* placeholder bolder */
    }

    .floating-label-field:focus,
    .floating-label-field:not(:placeholder-shown) {
        border-color: rgba(0, 0, 0, .4);
    }

        .floating-label-field:focus + .floating-label,
        .floating-label-field:not(:placeholder-shown) + .floating-label {
            z-index: 2500;
            padding: 0.55em;
            transform: translate(0, -1.5em) scale(.9);
            color: #c52977; /* collapsed label color */
            font-weight: 700;
            text-transform: uppercase;
            line-height: 0;
            background-color: white; /* collapsed label block color */
        }

    /* Common Styles */
    /* Identical inputs on all browsers */
    .floating-label-field:not(textarea) {
        max-height: 4em;
    }

    .floating-label-field::placeholder {
        color: transparent;
    }


/*

    Generic styles
    
*/

/*
    Generic arrow which is font-size dependent
    Sample:
    <span class="arrow down" style="--color:red"></span>
    <span class="arrow left" style="font-size:2em;"></span>
*/
.arrow {
    --header-background: darkgrey;
    border: solid var(--header-background);
    /*border-width: 0 3px 3px 0;*/
    border-width: 0 calc(1em / 6) calc(1em / 6) 0;
    display: inline-block;
    padding: calc(1em / 6);
}

.arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.arrow.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.arrow.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/*
    Custom buttons
*/
a.acme-btn, button.acme-btn
{
    background-color: blue;
    color:whitesmoke;
    border-radius: .3em;
    padding: .2em 1em;
    font-weight: 500;
    text-decoration: none;
    border:none;
}
a.acme-btn:hover, button.acme-btn:hover{
    text-decoration: none;
    font-weight: 700;
}

/* 
    ACME dropdown button
    Works for button and anchor links and displays the drop down indicator on the right side.
    Can be used with other setup like lookups, where the control show the indicator but a click starts a different process.
    
    Variations:
        div.flux-dropdown           - simply shows the drop-down indicator on any anchor or button
        div.flux-dropdown.button    - shows a button styled drop-down indicator on any anchor or button
    
    Vars:
        .dropdown-container .dropdown-items {
            --offset-y: 2em;
            --feature-background: red;
        }
    
        a.flux-dropdown, button.flux-dropdown {
            --padding: .16em;
            --arrow-color: hsl(0, 0%, 40%); 
            --arrow-width: .2em;
        } 
    
    Sample:
    --------
    <div class="dropdown-container">
        <a href="#" class="flux-dropdown button" style="--arrow-color:blue;">Action</a>
        <div class="dropdown-items --no-feature-- --arrow-bottom-- --arrow-left-- --arrow-right--" style="display:none;">
            <a href="/project/create">New Project</a>
            <a href="#">Action 2 with long text</a>
            <a href="#">Action 3</a>
            <a href="#" disabled>Disabled Action 4</a>
        </div>
    </div>

    JS templates whereas all anchor items are in div.dropdown-items:
    ----------------------------------------------------------------
    // dropdown toggle of the .dropdown-items
    $(".flux-dropdown").click(function (){
        $(this).siblings(".dropdown-items").toggle();
    })
    //
    // make sure to close all .dropdown-container if clicked outside
    //
    // Event only needs to be in single place for all containers to close
    //
    $('body').on('click',function(event){
       if($(event.target).is('.dropdown-container .flux-dropdown') === false)
         $(".dropdown-container .dropdown-items").hide();
    });        

*/
.dropdown-container {position:relative;}
    .dropdown-container .dropdown-items {
        --offset-y: 2em;
        --feature-background: #666;
        position: absolute;
        font-weight: 500;
        top:var(--offset-y);
        right:0;
        z-index:99999999;
        white-space: nowrap;
        display:flex;
        flex-direction: column;
        min-width: 20ch;
        isolation: isolate;
        padding-top: .5em;
        padding-bottom: 2em;
        filter:drop-shadow(0 0 3px rgb(0 0 0 / .5));
    }
    /* items container with bottom feature */
    .dropdown-container .dropdown-items::before
    {
        content: '';
        position: absolute;
        inset:0;
        color:white;
        background-color: white;
        border-radius: .2em .2em 0 0;
        padding-top:.5em;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - .8em), 0% 100%);
        border-bottom: 1.5em solid var(--feature-background);
        z-index:-2;
    }
    /* NO BOTTOM FEATURE */
    .dropdown-container.no-feature .dropdown-items {padding-bottom: .5em;background-color: white;border-radius: .3em;}
    .dropdown-container.no-feature .dropdown-items::before {content:unset;}
    /* ARROW BOTTOM FEATURE */
    .dropdown-container.arrow-bottom .dropdown-items::before {
        border-radius: .3em;
        clip-path: polygon(100% 0, 100% 100%, calc(100% - .3em) 100%, 50% calc(100% - 1em), .3em 100%, 0 100%, 0 0);
    }
    /* ARROW LEFT FEATURE */
    .dropdown-container.arrow-left .dropdown-items {padding-bottom: .5em;padding-left: 2em;}
    .dropdown-container.arrow-left .dropdown-items::before {
        border-radius: .3em;
        border-bottom: unset;
        border-left: 2em solid var(--feature-background);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 1em 50%, 0 0);
    }
    /* ARROW RIGHT FEATURE */
    .dropdown-container.arrow-right .dropdown-items {padding-bottom: .5em;padding-right: 2em;}
    .dropdown-container.arrow-right .dropdown-items::before {
        border-radius: .3em;
        border-bottom: unset;
        border-right: 2em solid var(--feature-background);
        clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 50%, 100% 100%, 0 100%);
    }
    /* trial for a rotated title MENU*/
    /*
    .dropdown-container.arrow-left .dropdown-items::after {
        content: 'MENU';
        position: absolute;
        font-size: .9em;
        font-weight: 300;
        left:.8em;
        letter-spacing: .4em;
        top:50%;
        transform: translateY(-50%);
        color:white;
        writing-mode: vertical-lr;
    }
    */
    

/* each item itself is a flex, space-between, center */
    .dropdown-container .dropdown-items > *{padding:.1em .75em;display:flex;justify-content: space-between;align-items: center;gap:.5em;}
    /* disabled items will be greyed out and not clickable */
    .dropdown-container .dropdown-items > *[disabled]{color:lightgray;font-weight:400;pointer-events: none;}
    /* disabled items within items (in case a wrapper is used) will be greyed out and not clickable */
    .dropdown-container .dropdown-items > * > *[disabled]{color:lightgray;font-weight:400;pointer-events: none;}
    .dropdown-container .dropdown-items > *:hover {background: #dbeaff;}
    .dropdown-container .dropdown-items a:hover {text-decoration: none;}
    
    a.flux-dropdown, button.flux-dropdown
    {
        --padding: .16em;
        --arrow-color: hsl(0, 0%, 40%); 
        --arrow-width: .2em;
        --border:1px solid hsl(0, 0%, 80%);
        --border-radius: .3em;
        
        background-color: white;
        color:#333;
        border:var(--border);
        border-radius: var(--border-radius);
        padding: .2em 1em;
        padding-right:2em;
        font-weight: 700;
        text-decoration: none;
        position: relative;
    }
    /*  
        .button
        flux-dropdown.button display greyed out button style on the right side 
    */
    a.flux-dropdown.button::before, button.flux-dropdown.button::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width:calc(2em + var(--padding));
        height:100%;
        background-color: #eee;
    }
    a.flux-dropdown::after, button.flux-dropdown::after {
        content: '';
        position: absolute;
        right: 1em;
        top: calc(50% - var(--padding));
        border: solid var(--arrow-color);
        /*border-width: 0 3px 3px 0;*/
        border-width: 0 var(--arrow-width) var(--arrow-width) 0;
        padding: var(--padding);
        transform: rotate(45deg) translateY(-50%);
        -webkit-transform: rotate(45deg) translateY(-50%);
    }
    a.flux-dropdown:hover, button.flux-dropdown:hover{
        outline:1px solid hsl(0, 0%, 70%);
        text-decoration: none;
        font-weight: 700;
    }
    a.flux-dropdown:focus, button.flux-dropdown:focus{
        outline:1px solid var(--app-input-focus);
    }

/*
    ACME BADGES AND PILLS
*/
.pill{
    font-weight: 700;
    font-size: .8em;
    background-color: hsl(0, 0%, 80%);
    color:#666;
    border-radius: 2em;
    min-width: 5ch;
    display:grid;
    place-items: center;
    padding: .1em .5em;
}

/*
    ACME LAYOUT
*/
.acme-row-centered{
    display:flex;
    justify-content: start;
    align-items: center;
    column-gap: .5em;
}
.acme-col-centered{
    display:flex;
    justify-content: center;
    column-gap: .5em;
}
.acme-centered{
    display:grid;
    place-items: center;
}
.debug-outline{outline:3px solid red;}
.debug-outline-red{outline:3px solid tomato;}
.debug-outline-blue{outline:3px solid dodgerblue;}
.debug-outline-green{outline:3px solid forestgreen;}

/*

//  ___  __   __       ___    __  
//   |  /  \ /  \ |     |  | |__) 
//   |  \__/ \__/ |___  |  | |    
//          
// Url: http://www.menucool.com/tooltip/css-tooltip       

Variables:
    
    .acme-tooltip {
        --distance: 20px;
        --pos: -50%;
        --border:1px solid #999;
    }

Sample use:

    // top positioned (by default) with custom pos and offset from active element
    <div class="btn btn-primary acme-tooltip" style="--pos: -10%;--distance: -10px;">
        Hover Me to Preview
        <div class="tooltip-content">
            <h3>Lorem Ipsum</h3>
            <p>Dolor sit amet, consectetur adipiscing elit.</p>
            <i></i>
        </div>
        <div class="tooltip-content right">
            <h3>Right tooltip</h3>
            <p>Dolor sit amet, consectetur adipiscing elit.</p>
            <i></i>
        </div>
    </div>
*/
.acme-tooltip {
    --distance: 20px;
    --pos: -50%;
    --border:1px solid #999;
    
    display:inline-block;
    position:relative;
    text-align:left;
}

    .acme-tooltip:hover > .tooltip-content {
        visibility:visible; opacity:1;
    }

    /* TOP (default) placement: arrow on bottom */
    .acme-tooltip > .tooltip-content {
        min-width:40ch;
        max-width:50vw;
        top:calc( var(--distance) * -1);
        left:50%;
        transform:translate(var(--pos), -100%);
        padding:10px 20px;
        color:#F29408;
        background-color:#EEEEEE;
        font-weight:normal;
        font-size:13px;
        border-radius:.4em;
        border:var(--border);
        position:absolute;
        z-index:99999999;
        box-sizing:border-box;
        filter: drop-shadow(3px 5px 4px rgb(0 0 0 / 0.3));
        visibility:hidden; opacity:0; transition:opacity 0.8s;
        overflow: hidden;
    }
    .acme-tooltip > .tooltip-content i {
        position:absolute;
        top:100%;
        left:calc( var(--pos) * -1);
        margin-left:-12px;
        width:24px;
        height:12px;
        overflow:hidden;
    }
    .acme-tooltip > .tooltip-content i::after {
        content:'';
        position:absolute;
        width:12px;
        height:12px;
        left:50%;
        transform:translate(-50%,-50%) rotate(45deg);
        background-color:#EEEEEE;
        box-shadow:0 1px 8px rgba(0,0,0,0.5);
    }
    /* RIGHT placement: arrow on the left*/
    .acme-tooltip > .tooltip-content.right {
        min-width:40ch;
        max-width:35%;
        top:50%;
        left:100%;
        margin-left:var(--distance);
        transform:translate(0, var(--pos));
        padding:10px 20px;
        color:#444444;
        background-color:#EEEEEE;
        font-weight:normal;
        font-size:13px;
        border-radius:8px;
        position:absolute;
        z-index:99999999;
        box-sizing:border-box;
        box-shadow:0 1px 8px rgba(0,0,0,0.5);
    }
        .acme-tooltip > .tooltip-content.right i {
            position:absolute;
            top:50%;
            left:unset;
            right:100%;
            margin-top:-12px;
            width:12px;
            height:24px;
            overflow:hidden;
        }
        .acme-tooltip > .tooltip-content.right i::after {
            content:'';
            position:absolute;
            width:12px;
            height:12px;
            left:0;
            top:50%;
            transform:translate(50%,-50%) rotate(-45deg);
            background-color:#EEEEEE;
            box-shadow:0 1px 8px rgba(0,0,0,0.5);
        }
    /* BOTTOM placement: arrow on the left*/
    .acme-tooltip > .tooltip-content.bottom {
        min-width:40ch;
        max-width:50vw;
        bottom:calc( var(--distance) * -1);
        left:50%;
        transform:translate(var(--pos), 100%);
        padding:10px 20px;
        
    }
        .acme-tooltip > .tooltip-content.bottom i {
            position:absolute;
            top:100%;
            left:calc( var(--pos) * -1);
            margin-left:-12px;
        }
        .acme-tooltip > .tooltip-content.bottom i::after {
            content:'';
            position:absolute;
            left:50%;
            transform:translate(-50%,-50%) rotate(45deg);
        }

/*
    ACME custom scrollbar
    <div class="acme-scrollbar"> ...  </div>
*/
/* scrollbar width */
.acme-scrollbar {
    --width: 6px;
    --scroll-color: hsla(210, 76%, 43%,20%);
    --scroll-hover-color: hsla(210, 76%, 43%,50%);
    --margin: 1em;
    overflow-y: auto;
}
    .acme-scrollbar::-webkit-scrollbar {width: var(--width);}
    /* Track */
    .acme-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: calc(var(--width) / 2);
        background-clip: content-box; /* THIS IS IMPORTANT */
        margin:var(--margin) 0;
    }
    /* Handle */
    .acme-scrollbar::-webkit-scrollbar-thumb {
        background: var(--scroll-color);
        /*border-radius: 0 5px 5px 0;*/
        border-radius: calc(var(--width) / 2);
    }
    /* Handle on hover */
    .acme-scrollbar::-webkit-scrollbar-thumb:hover {background: var(--scroll-hover-color);}
    /* textarea version with bigger thumb and no margin */
    textarea.acme-scrollbar{--width:10px;--margin:0;}    

/*
    Active Project Dialog (on body)    
 */
.active-project-dialog{
    --delay: 300ms;
    --content-font-size: 1.3rem;

    min-width: clamp(80ch, 120ch, 80%);
    padding: 1.5em;
    padding-top: 0;
    max-width: 50%;
    border: 0;
    border-radius: .5em;
    box-shadow: 0 0 1em rgb(0 0 0 / .3);

    /* prepare for fading in */
    display:block;
    opacity:0;
    pointer-events: none;
}
    /*
    .active-project-dialog:has(.container:hover){opacity:1;}
    .active-project-dialog:has(.container:not(:hover)){opacity:.1;}
    */
    /* remove all focus highlights */
    .active-project-dialog a:focus{box-shadow: unset;}
    .active-project-dialog a:focus-visible{box-shadow: unset;outline:unset;}

    /* fading in when opening, no delay on closing */
    .active-project-dialog[open]{opacity:1;pointer-events: inherit;transition: opacity var(--delay);}
    .active-project-dialog::backdrop{
        background: steelblue;
        opacity: .1;
    }
    .active-project-dialog .content {margin-top:1em;font-size: var(--content-font-size);}
    /* Dialog top */
    .active-project-dialog .top {
        display:flex;
        justify-content: space-between;
        gap:1em;
        font-size: .8em;
    }
    .active-project-dialog .top .title {
        display:flex;
        flex-direction: column;
        padding-top: .5em;
        font-size: 2em;
        color: #999;
        font-weight: 700;
    }
    .active-project-dialog .top small {
        font-size: .5em;
        font-weight: 400;
    }
    .active-project-dialog .top .actions {
        display: flex;
        gap:.5em;
        align-items: flex-start;
        margin-top: .5em;
        /*margin-right: -1em;*/
    }
    .active-project-dialog .top .actions .btn {
        font-size: 2.5em;
        cursor: pointer;
        padding:0;
    }
    .active-project-dialog .top .actions .btn-close-dialog{color: #ddd;}
    .active-project-dialog .top .actions .btn:hover{color:var(--app-input-focus);text-decoration: none;}
    .active-project-dialog .CodeMirror-wrap {border-radius: .3em;padding:.5em;}
    .active-project-dialog .CodeMirror-wrap .editor-preview-active {padding:1em;/* background: white; */}