@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
  --excel-cell:white;
}



@font-face {
  font-family: 'Nucleo';
  src: url('../fonts/nucleo.eot');
  src: url('../fonts/nucleo.eot') format('embedded-opentype'), url('../fonts/nucleo.woff2') format('woff2'), url('../fonts/nucleo.woff') format('woff'), url('../fonts/nucleo.ttf') format('truetype'), url('../fonts/nucleo.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

svg.automate {
    margin-right: -4px;
}


.Demand-Stats.Challenge {
    background: black;
    filter: drop-shadow(2px 1px 4px white);
    top: 15px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 10;
    padding: 10px;
}


span.bug {
    width: 25px;
    height: 25px;
    display: inline-block;
    transition:color 500ms ease;
}

    span.bug:hover {
        color:lawngreen;
    } 

span.bug svg {
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

a.reload {
    color: #e14eca !important;
    font-size: 1em !important;
    cursor: pointer;
}

a#reload {
    padding-left:10px;
}

.b-reload {
    color: #e14eca;
    font-size: .9em;
    margin: 5px;
}


.global-card-body {
    padding:25px;
}


span.push-pull {
    width: 100%;
    height: 20px;
}


.bg-app {
    background-image: url(../icons/realAccretive-bg.png);
    background-size: cover;
    background-position-x: center;
    background-color: black;
    background-repeat: no-repeat;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}


.sp-price-sequence {
    display: block;
    height: 55px;
    width: 100%;
    transform-style: preserve-3d;
    padding: 10px;
    padding-left: 25px;
}

.sp-price-sequence .pricing-step {
    position: relative;
}




.kpiGrid.Gaming {
    grid-template-columns: 1fr;
    justify-items: start;
}


.streamStorage {
    display: grid;
    grid-template-rows: 30px 20px 20px;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

span.streamMsg {
    font-size: .8em;
    color: rgba(255,255,255,.8);
}

    span.streamMsg:first-letter {
        color:green;
    }

.storage-Interface {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,200px));
    justify-content: end;
    justify-items:center;
    gap:10px;
}

.storage-Interface button {
  background-color: transparent;
    border: none;
    color: rgba(255,255,255,.6);
    font-weight: 300;
    font-size: .9em;
    outline: none;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap:7px;
    transition:color 500ms ease;
}

    .storage-Interface button svg {
        width:100%;
        height:100%; 
    }

 .storage-Interface button:hover {
      color:white;
    }


.workspace-interface {
    display: grid;
    justify-content: end;
}



div#au3 {
   background: black;
    padding: 30px;
    border-radius: 5px;
    margin: 10px;
    min-height: calc(100% - 20px);
    display: grid;
    grid-template-rows: repeat(2,1fr);
    align-items: center;
     filter: drop-shadow(0px -4px 6px grey);
    width:350px;
    user-select:none;
    border: 1px solid #bf00ff;
}

@keyframes update_entry {
    0% {
        transform:translate3d(0px,200px,0px);
    }
    100% {
         transform:translate3d(0px,0px,0px);
    }
}

#AppUpdate.initialwin {
 animation:update_entry 1000ms ease forwards;
}

#AppUpdate {
 display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    width: 100%;
    height: 200px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 20;
    align-items: center;
    justify-items: end;
}


@media(max-width:1000px) {

    #AppUpdate {
        display:none;
    }
}



    #AppUpdate a {
    cursor:pointer;
    display: block;
    background: black;
    color: white;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    filter: drop-shadow(0px 2px 5px grey);
    transition: filter 500ms ease;
    text-transform: uppercase;
    text-align:center;
    margin:0 auto;
    }

        #AppUpdate a:hover {
             filter: drop-shadow(0px 2px 5px white);
        }

div#au3_txt {
    text-align: center;
}

div#init_install {
    display: grid;
    grid-template-rows: repeat(2,1fr);
    gap: 10px 0px;
}

#init_install a {
    display: block;
    background: black;
    color: white;
    text-decoration: none;
    padding: 10px 10px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    width: 150px;
    filter: drop-shadow(0px 2px 5px #e14eca);
    transition: filter 500ms ease;
    text-transform: uppercase;
    text-align:center;
    margin:0 auto;
}

#init_install a:hover {
      filter: drop-shadow(0px 2px 5px white);

}





@media(max-width:1000px) {
    a.inst {
        display:none !important;
    }
    .item svg {
     transform: scale(0.85);
    }
}



@media(max-width:673px) {
    a.login-display {
        display:none;
    }
    .sidebar {
    display: none;
    }
}




.itemlabel p {
    font-size: clamp(12px,3vw,18px);
}


.card.dashboard {
    margin-bottom: 0px;
}
.card.card-wizard {
    margin-bottom: 0px;
}
.card.workspace {
    margin-bottom: 0px;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
    background-color: transparent !important;
}

.copyright {
    font-size:clamp(.85em,1vw,1em);
    color: grey;
    padding:10px;
    text-align:end;
}




.foot {
    grid-row: 3;
    display: grid;
    width: 100%;
    grid-column: 1 /3;
    text-transform: uppercase;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-items:end;
    height:100px;
}

@media(max-width:1200px) {
    .foot {
         justify-items:center;
         grid-template-columns: 1fr;
    }
}


a.j-btn:hover {
    filter: drop-shadow(1px 2px 2px white);
    color: orange !important;
}

.non-member a.navbar-brand {
    font-size:1em;
}

.head {
    margin-bottom:10px;
}

.head .navbar-brand span {
    font-size: 2em;
}


span.lbrnd1 {
    text-decoration-line: underline;
    text-decoration-color: #e14eca;
    text-underline-offset: 5px;
    color: rgba(255,255,255,.85);
    text-transform: lowercase;
    text-decoration-thickness:.1em;
    text-decoration-thickness:.3em;
}

span.lbrnd2 {
    color: rgba(255,255,255,.6);
}


span.realAccretive-logo:before {
    background-image: url(/icons/realAccretive.svg);
    display: inline-block;
    width: 2em;
    height: 2em;
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    margin-bottom: -.5em;
    margin-right: 0em;
    filter: brightness(0) invert(1);
}


a.j-btn {
    border-radius: 5px;
    color: #ffffff !important;
    display: inline-block;
    text-decoration: none;
    position: relative;
    text-transform: uppercase;
    background-image: linear-gradient(to bottom left, #000000, #000000, #000000);
    cursor: pointer;
    padding: 10px 8px;
    line-height: 1.625rem;
    padding-left: 40px;
    padding-right: 40px;
    height: 50px;
    transition: filter 500ms ease, color 500ms ease;
    filter: drop-shadow(1px 2px 2px black);
    border: 1px solid white;
}

span.go {
    font-size: 2.5em;
    line-height: 24px;
    vertical-align: text-bottom;
    animation: go alternate 1s ease-in-out infinite;
    display: inline-block;
    padding-left: 5px;
    color: #ffffff90;
    padding-left: 5px;
}

@keyframes go {
    0% {
        transform: translate3d(5px,0px,0px);
    }
    100% {
        transform: translate3d(0px,0px,0px);
    }
}

.login-non-user svg {
    width: 90px;
    height: 90px;
    display: block;
    fill: transparent !important;
    margin: 0 auto;
}

    .login-non-user svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    stroke: rgba(255,255,255,.7);
    stroke-width: 0.2px;
    animation: connect ease 3s forwards infinite;
    }

@keyframes connect {
    100% {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}
}



a.login-display {
    color: white !important;
    font-size: 15px;
    transition:color 500ms ease;
    cursor:pointer;
}

a.login-display svg {
   width:1.3em;
   height:1.3em;
}

a.login-display.connected svg {
    color: #e14eca;
}


a.login-display:hover {
    color: #e14eca !important;
}

body .yieldLoad #load {
    transform: translate3d(50%, 45%, 0px) scale(8);
}


.F9-Check {
    display: grid;
    justify-content: left;
    grid-template-columns:30px 1fr;
}

    .F9-Check label {
        margin:unset;
    }


input._check {
    display: none;
}

.F9-Check:has(input._check) label {
    display: block;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,.5);
    cursor: pointer;
}

.F9-Check:has(input._check:checked) label {
    display: block;
    width: 20px;
    height: 20px;
    background: black;
    border: 5px solid #e14eca;
    cursor: pointer;
}



.webgl-models {
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
    border-radius: 5px;
}
    .webgl-models canvas {
      opacity:0;
      animation:webgl 3s ease-in forwards;
    }


@keyframes webgl {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }

}


.slogan h1 {
    font-weight: 400;
    margin-bottom:10px;
    font-size: clamp(1.3rem,3vw,2.5rem);
}


span.speak {
     display: inline-block;
    padding-right: .5rem;
    white-space: nowrap;
    font-size: clamp(1rem,3vw,1.8rem);
    line-height: clamp(1.2rem,3vw,2rem);
    opacity: 0;
    font-weight: 200;
    color: rgba(255,255,255,.6);
    animation: speech 500ms ease-in forwards;
}

.s-text {
    display:none;
}



.s-console {
    background: transparent;
    user-select: none;
    max-width: 1100px !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
    z-index: 2;
    padding-bottom:25px;
    min-height:104px;
    line-height: clamp(1.1rem,3vw,2rem);
}



@keyframes speech{
    0% {
        opacity:0;
    }
   
    100% {
        opacity:1;
    }
}


span.pricing-defined {
    color: grey;
    font-weight: 500;
    padding-left: 2px;
    padding-right: 3px;
}


ul.demand-info::before {
    content: "Model Combination";
    display: inline-block;
}

span[class*="fit-model"] {
   padding-left: 5px;
    padding-right:5px;
    font-weight: 600;
}

span.p-delta {
    padding-left: 5px;
    padding-right:0px;
}

span.rec-label {
    padding-left: 5px;
    padding-right:5px;
    display: inline-block;
    font-weight: 600;
    color: forestgreen;
}


span[class*="model-ok"] {
     color: forestgreen;
}

span[class*="model-inferior"] {
    color: red;
}

span[class*="optimal-arrow"] {
    font-size: 1.4em;
    display: inline-block;
    margin-top: -5px;
    margin-bottom:-5px;
}


span.occ-labels {
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
}

ul.demand-info li {
    color: grey;
    font-weight: 600;
}

ul.demand-info {
    padding-left: 15px;
    margin-top: 10px;
}


.pricing-step.challenge.price-step {
    background-image: radial-gradient(red, red) !important;
    color: white;
}


.price-sequence {
    position: relative;
    margin-top: -35px;
    height: Calc(100% + 35px) !important;
    transform-style: preserve-3d;
    perspective: 2000px;
    perspective-origin: top;
}

.pricing-step {
   /* width: 40px;
    height: 40px;
    font-size: 2em;
    border: 1px solid grey;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    position: absolute;
    right: 5px;
    color: grey;
    top: 2px;
    transform: rotate3d(0,0,0,0deg);
    border-radius: 5px;
    filter: drop-shadow(1px 2px 2px white);
    background: black;*/

   width: 40px;
    height: 40px;
    font-size: 2em;
    border: 1px solid white;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    position: absolute;
    right: 5px;
    color: white;
    top: 2px;
    transform: rotate3d(0,0,0,0deg);
    border-radius: 5px;
    filter: drop-shadow(1px 2px 2px white);
    background: forestgreen;
}

.price-reporting {
    margin-top:35px;
}


.price-optimization {
  animation: price-reveal 1000ms ease-in-out forwards;
}

.price-step {
    animation: step-advance 1000ms ease-in-out forwards;
}


@keyframes price-reveal {

    0% {
        
         opacity:0;
         transform:translate3d(0px,10px, 0px);

    }
    100% {
        
         opacity:1;
         transform:translate3d(0px,0px, 0px);
    }

}


@keyframes step-advance {
    0% {
          transform:rotate3d(0,0,0,0deg);
    }

    50% {
        background-image:radial-gradient(rgba(0,255,0,.5),transparent);
        color:white;
    }
    
    100% {
          transform:rotate3d(0,1,0,360deg);
    }
   
}




.grid-menu.demand {
    margin-left: 220px;
}



.UnitViewWrapper {
    display: grid;
    width: 100%;
    overflow: hidden; 
    padding: 10px;
    padding-left:0px;
    border-radius: .5em;
    background: black;
}


.UnitCFViewRefresh {
    animation:3s ease-in-out UnitRefresh;
}


@keyframes UnitRefresh {

    0% {
       filter:blur(10px);
    }
    100% {
        filter:blur(0px)
    }



}

.price-definition {
    display: grid;
    grid-template-columns: 1fr;
    align-items: baseline;
    padding-top:10px;
}

span.price-info {
    display: block;
    color: grey;
}

span.price-info svg {
    width: 1.8em;
    height: 1.8em;
}


.data-field.data-select:focus {
    cursor:cell;
    background-image: linear-gradient(90deg, var(--excel-cell) 100%, transparent 50%), linear-gradient(90deg, var(--excel-cell) 100%, transparent 50%), linear-gradient(0deg, var(--excel-cell) 100%, transparent 50%), linear-gradient(0deg, var(--excel-cell) 100%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right top;
    animation:border-cell 1500ms infinite linear;
    
    outline:none;
}

 @keyframes border-cell {
    0% {
      background-position: left top, right bottom, left bottom, right   top;
    }
    100% {
      background-position: left 15px top, right 15px bottom , left bottom 15px , right top 15px;
    }
  }


 .cf-header {
    color: rgba(255,255,255,.7);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    font-weight: 300;
    position: absolute;
    padding-left: 10px;
    padding-right: 25px;
    border-bottom-right-radius: 10px;
    background: #000000;
    z-index: 2;
    border-left: 2px solid #e14eca;
    margin-top:10px;

}


 .cf-header ul {
    padding: unset;
    margin: 0;
}
    .cf-header ul li {
        list-style:none;
        color: rgba(255,255,255,.7);
        text-transform:uppercase;
    }

.cf-record.total .data-field {
    border-bottom: 3px double grey;
    font-weight:500;
}

.cf-record .data-field:nth-child(1) {
  position: sticky;
    left: 0px;
   /* background: black;*/
    background-color: black;
    min-width: 250px;
    width: max-content;
    z-index: 2;
    text-align:start !important;
}
.cf-record.data-header .data-field:first-of-type {
    width: 250px;
}

.cf-record .data-field:nth-child(n+2) {
    position: sticky;
    left: 0px;
    background-color:black;
    z-index:0;
}


.UnitCFView {
    display: grid;
    padding-bottom:10px;
    padding-top:10px;
   /* border: 1px dotted grey;*/
    overflow-x: scroll;
    border-radius: .5em;
    scroll-behavior:auto;
}


.cf-record.data-header {
    position: sticky;
    top: 0;
    background: black;
    height: 50px;
    z-index: 1;
}
.cf-record {
    display: grid;
    gap: 10px;
    grid-auto-columns: 160px;
    grid-auto-flow: column;
    grid-template-columns:250px;
    text-align: end;
    position: sticky;
    top: 0;
    padding-right: 40px;
    min-height:1rem;
}

.data-field.cf-category {
    font-weight: 500;

}


.cf-record.space .data-field {
    border: none;
}

.cf-record.data-header .data-field {
    border: none;
}



.realAccretive-alert b {
    font-weight: 600;
    padding-right: 5px;
}

.realAccretive-alert {
     background: black;
    filter: drop-shadow(2px 4px 6px white);
    max-width: 400px;
    min-width: 350px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    text-align: center;
    text-transform:uppercase;
}

.msg-wrapper {
    display: grid;
    grid-template-columns: 35px 1fr;
    font-size: 1em;
    font-weight: 300;
}
.msg-wrapper div:nth-child(1) svg {
    width: 25px;
    height: 25px;
}


.ExcelReader a {
    cursor: pointer;
    color: grey !important;
    font-weight: 400;
}


.card-footer.workspace-footer:before {
    background: black;
   /* border-top: 1px solid #e14eca;*/
    content: "";
    display: block;
    padding-bottom: 20px;
}


.tools {
    margin-top:0px;
    margin-left:0px;
    display:block;
    position:absolute;
    height:inherit;
    width:inherit;
    z-index:3;
}

.raytool:before {
    display: block;
    width: 0;
    height: 0;
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    position: absolute;
    margin-left: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgba(0,0,0,.8);
}

.raytool {
    position: absolute;
    width:max-content;
    background:rgba(0,0,0,.8);
    /*background-color:black;*/
    padding:5px;
    padding-left:20px;
    padding-right:20px;
    z-index: 2;
    display: block;
    cursor:pointer;
    user-select:none;
   /* filter:drop-shadow(2px 2px 2px white);*/
}

.ray-header:before {
    display: inline-block;
    margin-right: 8px;
    width: 10px;
    height: 10px;
    content: "";
    background: #e14eca;
    border:1px solid white;
}

.workspace-interface button {
    background: black;
    border:none;
    color: rgba(255,255,255,.6);
    float: right;
    display: block;
    outline: none;
     transition: color ease 500ms;
}
.workspace-interface button:hover {
       color: rgba(255,255,255,.9);
       transition: color ease 500ms;
}


li.x-report {
    display: grid;
    grid-template-columns: 25px 1fr;
    align-items: baseline;
}

.interface-select.active select {
    background: black;
    color: rgba(255,255,255,.6);
    padding: 5px;
    border: 0px;
    border-top: 1px solid;
    text-align: left;
    padding-left: 0px;
    margin: 0px;
    cursor: pointer;
    outline: none;
}

.x-dim {
    gap:5px;
     transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: left;
}

.y-dim {
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    align-items: baseline;
    transform:rotate3d(0,1,0,45deg);
    animation:expirations forwards ease-in-out 1s;
    padding:10px;
    min-height:100px;
    grid-auto-rows:max-content;
}

.y-dim.y-row-label {
    text-transform: uppercase;
    text-orientation: sideways-right;
    writing-mode: vertical-rl;
    justify-content: center;
    background: black;
    font-weight: 400;
    border-left: 2px solid #e14eca;
}

span.m-icons {
    margin-right: 5px;
}

span.m-icons svg {
    width: 16px;
    height: 16px;
    display:inline-block;
}


.kpiGrid.HeatMap {
    grid-template-columns:1fr;
    padding-left:10px;
    max-height:500px;
}


.z-dim {
    text-align: center;
    font-weight:500;
}

.y-dim:has(.z-dim:nth-child(n+1)) {
    background: linear-gradient(45deg, rgba(255,0,0,1), rgba(255,0,0,0) 100%);
    border:1px solid rgba(255,0,0,1);
  
   
}

.y-dim:has(.z-dim:nth-child(n+1)):hover {
    cursor:pointer;
    transition: transform 500ms ease-in-out;
    background-color: black;
    color: white;
    z-index: 2;
    text-shadow: 0 0 black;
    filter: drop-shadow(10px 10px 2px black);
}




.y-dim:empty {
     background: linear-gradient(45deg, rgba(0,255,0,.5), rgba(0,255,0,0) 100%);
     border:1px solid rgba(0,255,0,1);
}


@keyframes expirations {
    from {
         transform:rotate3d(0,1,0,45deg);
    }
    to {
          transform:rotate3d(0,1,0,0deg);
    }
}


.expirations-wrapper {
    display: grid;
    width:100%;
    margin-top:5px;
    margin-bottom:25px;
    gap:5px;
}

    .expirations-wrapper .x-dim {
        justify-items: center;
    }

.y-dim-header {
    margin-bottom: 10px;
    border-bottom: 5px solid;
    padding-top: 10px;
    font-size:1.1em;
    min-width: 100px;
    text-align: center;
}

.coeffs {
    display: grid;
    grid-template-columns: repeat(2,50px);
}

.rsquared span {
    padding-left: 10px;
}
table.data-table td {
    padding: 0px 5px;
}

table.data-table {
    margin-top: 25px;
}

.rsquared {
    margin-top: 25px;
}

.coeff-wrapper {
}


.slogan p {
    font-size: 1.5em;
    font-weight: 200;
    max-width: 1000px;
    color: rgba(255,255,255,.7);

}

.webgl-content.fred-win canvas {
    background: black;
    border-radius: 5px;
    border: 1px solid black;
    filter: drop-shadow(0px 0px 4px grey);
    cursor:crosshair;
}

.fred-win {
    height: calc(100vh - 390px);
    width: calc(100vw - 330px);
    margin: 0 auto;
    display: grid;
    grid-template-rows: repeat(2,1fr);
}

@media(max-width:1200px) {
    .fred-win {
        width:100%;
    }
}

.FredWrapper input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance: auto;
    appearance:auto;
}

.FredWrapper input[type="date"]{
    background: white;
    color: black;
    padding-right: 5px;
    border: none;
    appearance:auto !important;
    -webkit-appearance:auto !important;
    color-scheme:dark;
}


.FredInterface select,.FredInterface input {
    height: 30px;
    width: 100%;
    height: 30px;
    border-radius: 5px;
}

.FredWrapper {
    display: grid;
    grid-template-rows: 30px repeat(2,1fr);
}

.FredError {
   padding: 10px;
    color: black;
    font-style: italic;
    font-size: 0.8em;
    max-width: 1000px;
    border-radius: 10px;

}

    .FredError b {
        padding-right:5px;
    }


.FredInterface {
    border: 1px solid black;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    display: grid;
    background: #000000;
    padding: 10px;
    border-radius: 10px;
    align-items: center;
    color: white;
    filter: drop-shadow(1px 2px 4px white);
}


.timeWrapper {
    padding:10px;
    color:white;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0px 10px;   
}

 

 .FredInterface > div {
        padding:0px 10px 0px 10px;
  }


 .card-wizard .card-header.text-center {
    border-bottom: 1px solid #e14eca;
}

 
.wizard-win {
    max-height: calc(100vh - 575px);
    overflow-y: scroll;
    margin-right: 5px;
    margin-top:5px;
    font-size:12px !important;
}



.workspace-win {
    max-height: calc(100vh - 445px);
    overflow-y: scroll;
    margin-right: 5px;
}

.chat-wrapper {
    display:grid;
    grid-template-rows:500px 1fr;
    padding:25px;

}

hr {
   /* border-top: 1px solid #e14eca;*/
    margin-top: 1rem;
    margin-bottom: 1rem;
}

fieldset {
    display: grid;
    gap: 10px;
    font-size: .8em;
    grid-template-rows: 25px;
    padding: 10px;
    justify-items: left;
}


.chat-receipt div.chat-special {
    grid-template-columns: 1fr;
}


.chat-model svg {
    width: 20px;
    height: 20px;
}

.chat-user {
    display: block;
    font-size: .9em;
    margin-left: 25px;
    margin-top: -2.5px;
}

.chat-receipt .chat-model {
    display: grid;
    grid-template-columns: 80px auto 25px;
    justify-content: left;
}

button.chat-btn.inner-chat {
    max-width: 250px;
    margin: 10px 0px 10px 0px;
}


.chat-win hr {
    background: grey;
    margin: 10px 0px;
}

button.chat-btn {
    color: rgba(255,255,255,.7);
    background: black;
    padding: 0.5rem 0.7rem;
    width: 100%;
    border-radius: 0.4285rem;
    filter: drop-shadow(1px 2px 4px grey);
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
    transition:filter 500ms ease;
}
    
button.chat-btn:hover {
     filter: drop-shadow(1px 2px 4px #e14eca);

}

.ex-border {
    border-bottom: none !important;
}

select.F9ModelSelect {
   background: black;
    padding: 0.5rem 0.7rem;
    width: 100%;
    border-radius: 0.4285rem;
    filter: drop-shadow(1px 2px 4px grey);
    border: 1px solid transparent;
    outline: none;
     transition:filter 500ms ease;
     cursor:pointer;
}
    select.F9ModelSelect:hover {
          filter: drop-shadow(1px 2px 4px #e14eca);
    }

.chat-receipt span {
    padding-right: 5px;
    color: #e14eca;
}

.chat-receipt {
    padding:20px;
    background:#000000;
    margin:20px;
    filter:drop-shadow(1px 2px 4px white);
    border-radius:10px;
}

.chat-form input {
    border: transparent;
    padding: 0;
    font-size:0.875rem;
}


.chat-receipt div {
    display: grid;
    grid-template-columns: 80px 1fr;
}

.chat-form .input-grid-3 {
    grid-template-columns: minmax(0,300px) 1fr 1fr;
    width: 100%;
    column-gap:20px;
    align-items:baseline;
}

span.model-clip svg {
    width: 20px;
    height: 20px;
}

.chat-form {
   display: grid;
    padding: 25px;
    justify-items: left;
    gap: 2px;
    justify-content: left;
}

.chat-wrapper h4 svg {
    color: grey;
    width: 1.2em;
    height: 1.2em;
}

.chat-wrapper {
    display: grid;
    grid-template-rows: 20px 500px 1fr;
    padding: 25px;
    filter: drop-shadow(1px 2px 4px );
    background: black;
    border-radius: 5px;
}

.chat-header {
    margin-bottom: 10px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
}

.chat-header svg {
    width: 22px;
    height: 22px;
}

.chat-msgs {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    max-height:400px;
    overflow-y:scroll;
}

.chat-inner {
display:grid;grid-template-columns:300px 1fr;padding:25px;gap:25px;
}

.chat-inner .chat-win {
    border-radius: 10px;
    padding: 10px;
    border: solid 1px grey;
    max-height: 500px;
    overflow: hidden;
    padding-right:5px;
    display:grid;
    grid-template-rows:25px 1fr;
}

.matrix-wrapper {
    padding:10px;
    margin-top:25px;
}


.ExcelReader {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    color: #e14eca;
    text-align: center;
    justify-items: center;
    border-bottom: 1px dashed grey;
    padding: 10px;
    padding-bottom: 0px;
    max-width: 1000px;
    margin: 0 auto;
    font-size:15px;
}


 .ExcelReader span {
     color:#e14eca !important;
  }

.ExcelReader h4 {
    margin: 0;
}

.btn, .navbar .navbar-nav > a.btn {
    border-width: 2px;
    border: none;
    position: relative;
    overflow: hidden;
    margin: 4px 1px;
    border-radius: 0.4285rem;
    cursor: pointer;
    background: black !important;
    background-image: none !important;
    background-size: 210% 210%;
    background-position: top right;
    background-color: black;
    transition: all 0.15s ease;
    box-shadow: none;
     filter:drop-shadow(1px 2px 4px grey);
    color: #ffffff;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn:active:focus, .btn:active:hover, .btn.active:focus, .btn.active:hover, .navbar .navbar-nav > a.btn:hover, .navbar .navbar-nav > a.btn:focus, .navbar .navbar-nav > a.btn:active, .navbar .navbar-nav > a.btn.active, .navbar .navbar-nav > a.btn:active:focus, .navbar .navbar-nav > a.btn:active:hover, .navbar .navbar-nav > a.btn.active:focus, .navbar .navbar-nav > a.btn.active:hover {
    background-color: black !important;
    background-image: none !important;
    color: #ffffff;
    filter:drop-shadow(1px 2px 4px #e14eca);
    box-shadow: none;
}


html, body {
    font-family: Poppins;
    height:100%;
    width:100%;
    background-color:black !important;
    color:rgba(255,255,255,.7);
}


body {
    /*background-image: url(../icons/realAccretive-bg.png);
    background-size: 100vw 100vh;
    background-position-x: center;
    background-color: black;
    background-repeat: no-repeat;*/
}




#app {
    height: inherit;
    width: inherit;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: black;
    bottom: 0;
    left: 0;
    padding: 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    filter: drop-shadow(-1px 0px 5px grey);
    color:gray;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        display: inline-block;
        margin: 0 auto;
        float: right;
        user-select:none;
        outline:none;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


.sidebar, .off-canvas-sidebar {
    background: black;
    background: black;
    height: Calc(100% - 5px);
    width: Calc(100% - 20px);
    grid-column:1;
    grid-row:2;
    top: 0;
    left: 0;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    display: block;
    box-shadow: none !important;
    filter: drop-shadow(1px 2px 4px grey);
    margin-top: 0px !important;
    position:unset !important;
    margin-left: 20px;
    border-radius: 5px;
}

    .sidebar:before, .off-canvas-sidebar:before {
       
        border-bottom: 5px solid black;
      
    }

.navbar {
    width: 100%;
    z-index: 1050;
    background: black;
}

    .navbar .navbar-brand {
        position: relative;
        padding-top: .3125rem;
        padding-bottom: .3125rem;
        color: #ffffff;
        margin-left: 17px;
        text-transform: none !important;
        font-size: 1rem;
    }

span.brnd2 {
   color:rgba(255,255,255,.6);
}

.sidebar .nav-item {
    background: rgba(255,255,255,.15);
    margin: 10px 10px;
    border-radius: 3px;
    transition:background 500ms ease;
    padding:3px;
    user-select:none;
}
   .sidebar .nav-item:hover {
        background: rgba(255,255,255,.3);
    }


   .sidebar .nav-item a {
        color:rgba(255,255,255,.7);
        transition:color 500ms ease;
    }
   .sidebar .nav-item a:hover {
        color: rgba(255,255,255,1);
        transition: color 500ms ease;
    }

span.brnd1 {
    text-decoration-line: underline;
    text-decoration-color: #e14eca;
    text-underline-offset: 5px;
    color: rgba(255,255,255,.85);
    text-transform:lowercase;
}

.top-row.auth {
     height: 50px;
    background: black;
    padding: 15px;
    border-bottom-left-radius: 100%;
    grid-row: 1;
    grid-column: 1 / 3;
    filter: drop-shadow(1px 2px 4px grey);
}

    .top-row.auth a {
        float: right;
        margin-right: 25px;
    }

.page {
    display: grid;
    grid-template-rows: 90px Calc(100% - 205px) 100px;
    grid-template-columns: 270px 1fr;
    gap: 10px 20px;
    min-height: Calc(100% - 5px);
    position:relative;
}

.content {
    grid-row: 2;
    grid-column: 2;
    padding-right:20px;
}

.MonoLogo {
   position: absolute;
    width: 170px;
    top: -65px;
    left: 25px;
    display: block;
}

.MainPage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    width: 100%;
    min-height: 600px;
    align-items: center;
    gap:25px;
    user-select:none;
}

.MainPage .item {
    text-align: center;
}


.head h1 {
    font-size: 3rem;
}
.slogan h2 {
    font-weight: 400;
    color: rgba(255,255,255,.6);
}
.item g.maxima {
    fill: rgba(255,255,255,.7);
}
.item .curve path {
    stroke: #e14eca;
    stroke-dasharray: 25;
    stroke-dashoffset:0;
    animation:optimize 3000ms ease-in-out infinite;
}

.item .max path {
    stroke: #e14eca;
    stroke-dasharray: 5;
     stroke-dashoffset:0;
       animation:optimize 3000ms ease-in-out infinite;
}


@keyframes optimize {
    0% {
        stroke-dasharray: 25;
    stroke-dashoffset:0;
    }
    100% {
        stroke-dasharray: 25;
        stroke-dashoffset:-100;
    }
}

.itemlabel {
    font-size: 1.3em;
    text-align: center;
    text-transform:uppercase;
}

a {
    color: #e14eca;
    font-weight: 300;
}
    a svg {
        margin-right:5px;
    }

.card-wizard .nav-pills .nav-item .nav-link p {
    white-space:nowrap;
}
.oi {
    margin-right:10px;
}

ul.nav.nav-pills a svg {
    width: 2em;
    height: 2em;
    position: absolute;
}

@media (max-width: 1199.98px){
    .navbar {
        top: 0px;
    }
    .top-row.ps-3.navbar.navbar-dark {
  /*  transform: translate3d(220px, 0, 0);*/
    width: 180px;
    }
    .sidebar {
        transform: translate3d(-280px, 0, 0);
    }
}

@media (max-width: 1199.98px) {
    .content {
      grid-column: 1/3;
        padding: 25px;
    }
    .page {
        grid-gap:0px;
    }
}

.input-grid-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(auto-fill,minmax(35px, auto));
    grid-gap: 10px;
    padding-bottom:5px;
    padding-top:5px;
    align-items: center;
    border-bottom: 1px solid #ffffff20;
   
}


.input-grid-8 {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-template-rows: repeat(auto-fill,minmax(35px, auto));
    grid-gap: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    align-items: center;
    border-bottom: 1px solid #ffffff20;
    align-items: center;
     justify-items: stretch;
    padding-left: 25px;
    padding-right: 0px;
}


.input-grid-9 {
    display: grid;
    grid-template-columns: repeat(9,1fr);
    grid-template-rows: repeat(auto-fill,minmax(35px, auto));
    grid-gap: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    align-items: center;
    border-bottom: 1px solid #ffffff20;
     align-items: center;
    
}

.input-grid-12 {
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(auto-fill,minmax(35px, auto));
    grid-gap: 10px;
    padding-bottom: 5px;
    padding-top:5px;
    align-items: center;
    border-bottom: 1px solid #ffffff20;
    justify-items: stretch;
    padding-left: 25px;
    padding-right: 0px;

}


.input-grid-15 {
    display: grid;
    grid-template-columns: repeat(15,1fr);
    grid-template-rows: repeat(auto-fill,minmax(35px, auto));
    gap: 10px;
    padding-bottom: 4px;
    padding-top: 3px;
    align-items: center;
    border-bottom: 1px solid #ffffff20;
    align-items: center;
}

.input-grid-18 {
    display: grid;
    grid-template-columns: repeat(18,1fr);
    grid-template-rows: repeat(auto-fill,minmax(35px, auto));
    gap: 10px;
    padding-bottom: 4px;
    padding-top: 3px;
    align-items: center;
    border-bottom: 1px solid #ffffff20;
    justify-items:center;
}



.input-grid-21 {
    display: grid;
    grid-template-columns: repeat(21,1fr);
    grid-template-rows: repeat(auto-fill,minmax(35px, auto));
    gap: 10px;
    padding-bottom: 4px;
    padding-top: 3px;
    align-items: center;
    border-bottom: 1px solid #ffffff20;
    justify-items:center;
}


.input-grid-24 {
    display: grid;
    grid-template-columns: repeat(24,1fr);
    grid-template-rows: repeat(auto-fill,minmax(35px, auto));
    gap: 10px;
    padding-bottom: 4px;
    padding-top: 3px;
    align-items: center;
    border-bottom: 1px solid #ffffff20;
    justify-items:center;
}

.input-grid-27 {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(22,1fr);
    gap: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    align-items: center;
    border-bottom: 1px solid #ffffff20;
    justify-items:center;
}


.form-control {
    border-color: grey;
    border-radius: 0.4285rem;
    font-size: 0.75rem;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    color: rgba(255,255,255,.7);
}


 [class^="input-grid-"] .c {
    color: rgba(255,255,255,.7);
    font-weight: 300;
}

 [class^="input-grid-"] .c input {
    color: rgba(255,255,255,.7);
    font-weight: 300;
}

 [class^="input-grid-"] .c select {
    color: rgba(255,255,255,.7);
    font-weight: 300;
}

 
 [class^="input-grid-27"] .c {
     font-size:.9em;
    color: rgba(255,255,255,.7);
    font-weight: 300;
}

 [class^="input-grid-27"] .c input {   
    color: rgba(255,255,255,.7);
    font-weight: 300;
}

 [class^="input-grid-27"] .c select {
    color: rgba(255,255,255,.7);
    font-weight: 300;
}


 
 [class^="input-grid-12"] .c {
     font-size:.9em;
    color: rgba(255,255,255,.7);
    font-weight: 300;
}

 [class^="input-grid-12"] .c input {   
    color: rgba(255,255,255,.7);
    font-weight: 300;
}

 [class^="input-grid-12"] .c select {
    color: rgba(255,255,255,.7);
    font-weight: 300;
}





 h4.grid-title {
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 3em;
    margin-top: .5em;
    font-weight: 300;
    text-decoration-color: #e14eca;
    text-decoration-thickness: 1px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-offset: 10px;
    text-transform: uppercase;
}

 ::placeholder {
    color: rgba(255,255,255,.5) !important;
}

.card-wizard {
    background:#000000 !important;
    filter: drop-shadow(2px 4px 6px black);
}
.card-wizard .card-footer, .card-wizard .card-body {
    background-color: transparent !important;
}

.accretiveBtn {
    background: rgba(255,255,255,.15);
    margin: 10px 10px;
    border-radius: 3px;
    transition: background 500ms ease;
    padding: 3px;
}

.content {
     padding-top: unset; 
}

.card.card-wizard .card-body {
    min-height: 400px;
    min-width:50vw;
    margin:0 auto;
}


.wizard-win .card-body {
   padding: 25px;
}




input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1);
}
.card-wizard .nav-link {
    cursor:pointer;
}

option {
    background:#000000;
    color:rgba(255,255,255,.7);
    cursor:pointer;
}

.f9Select {
    border-color: grey;
    border-radius: 0.4285rem;
    font-size: 0.7rem;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    color: rgba(255,255,255,.5);
    background-color: #000000;
    height: 38px;
    width: 100%;
    transition:border-color 500ms ease;
    outline:none;
    padding-left:5px;
    padding-right:5px;
    min-width: max-content;
    text-transform:uppercase;

}
    .f9Select:hover {
         border-color: #e14eca;
    }

.card-wizard .nav-pills {
   flex-flow: row !important;
}


.alert.alert-info.animated.fadeInDown.alert-with-icon {
    position: fixed;
    bottom: 50px;
    z-index: 50;
    right: 50px;
    min-width: 300px;
    background-color: #000000 !important;
    color: #ffffff;
    filter: drop-shadow(2px 4px 6px white);
    box-shadow: none;

}

/*Icons*/


/*------------------------
	base class definition
-------------------------*/

.tim-icons {
  display: inline-block;
  font: normal normal normal 1em/1 'Nucleo';
  vertical-align: middle;
  speak: none;
  text-transform: none;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-icon-detail {
  text-align: center;
  padding: 45px 0 30px;
  border: 1px solid #e44cc4;
  border-radius: .1875rem;
  margin: 15px 0;
  min-height: 168px;
}

.font-icon-detail i {
  color: #FFFFFF;
  font-size: 1.5em;
}

.font-icon-detail p {
  color: #e44cc4 !important;
  margin-top: 30px;
  padding: 0 10px;
  font-size: .7142em;
}

/*------------------------
  change icon size
-------------------------*/

.tim-icons-sm {
  font-size: 0.8em;
}

.tim-icons-lg {
  font-size: 1.2em;
}

/* absolute units */

.tim-icons-16 {
  font-size: 16px;
}

.tim-icons-32 {
  font-size: 32px;
}

/*----------------------------------
  add a square/circle background
-----------------------------------*/

.tim-icons-bg-square,
.tim-icons-bg-circle {
  padding: 0.35em;
}

.tim-icons-bg-circle {
  border-radius: 50%;
}

/*------------------------
  list icons
-------------------------*/

/*------------------------
  spinning icons
-------------------------*/

.tim-icons-is-spinning {
  -webkit-animation: tim-icons-spin 2s infinite linear;
  -moz-animation: tim-icons-spin 2s infinite linear;
  animation: tim-icons-spin 2s infinite linear;
}

@-webkit-keyframes tim-icons-spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes tim-icons-spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@keyframes tim-icons-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*------------------------
  rotated/flipped icons
-------------------------*/

/*------------------------
	icons
-------------------------*/

.icon-alert-circle-exc::before {
  content: "\ea02";
}

.icon-align-center::before {
  content: "\ea03";
}

.icon-align-left-2::before {
  content: "\ea04";
}

.icon-app::before {
  content: "\ea05";
}

.icon-atom::before {
  content: "\ea06";
}

.icon-attach-87::before {
  content: "\ea07";
}

.icon-badge::before {
  content: "\ea08";
}

.icon-bag-16::before {
  content: "\ea09";
}

.icon-bank::before {
  content: "\ea0a";
}

.icon-basket-simple::before {
  content: "\ea0b";
}

.icon-bell-55::before {
  content: "\ea0c";
}

.icon-bold::before {
  content: "\ea0d";
}

.icon-book-bookmark::before {
  content: "\ea0e";
}

.icon-bulb-63::before {
  content: "\ea0f";
}

.icon-bullet-list-67::before {
  content: "\ea10";
}

.icon-bus-front-12::before {
  content: "\ea11";
}

.icon-button-pause::before {
  content: "\ea12";
}

.icon-button-power::before {
  content: "\ea13";
}

.icon-calendar-60::before {
  content: "\ea14";
}

.icon-camera-18::before {
  content: "\ea15";
}

.icon-caps-small::before {
  content: "\ea16";
}

.icon-cart::before {
  content: "\ea17";
}

.icon-chart-bar-32::before {
  content: "\ea18";
}

.icon-chart-pie-36::before {
  content: "\ea19";
}

.icon-chat-33::before {
  content: "\ea1a";
}

.icon-check-2::before {
  content: "\ea1b";
}

.icon-cloud-download-93::before {
  content: "\ea1c";
}

.icon-cloud-upload-94::before {
  content: "\ea1d";
}

.icon-coins::before {
  content: "\ea1e";
}

.icon-compass-05::before {
  content: "\ea1f";
}

.icon-controller::before {
  content: "\ea20";
}

.icon-credit-card::before {
  content: "\ea21";
}

.icon-delivery-fast::before {
  content: "\ea22";
}

.icon-double-left::before {
  content: "\ea23";
}

.icon-double-right::before {
  content: "\ea24";
}

.icon-email-85::before {
  content: "\ea25";
}

.icon-gift-2::before {
  content: "\ea26";
}

.icon-globe-2::before {
  content: "\ea27";
}

.icon-headphones::before {
  content: "\ea28";
}

.icon-heart-2::before {
  content: "\ea29";
}

.icon-html5::before {
  content: "\ea2a";
}

.icon-image-02::before {
  content: "\ea2b";
}

.icon-istanbul::before {
  content: "\ea2c";
}

.icon-key-25::before {
  content: "\ea2d";
}

.icon-laptop::before {
  content: "\ea2e";
}

.icon-light-3::before {
  content: "\ea2f";
}

.icon-link-72::before {
  content: "\ea30";
}

.icon-lock-circle::before {
  content: "\ea31";
}

.icon-map-big::before {
  content: "\ea32";
}

.icon-minimal-down::before {
  content: "\ea33";
}

.icon-minimal-left::before {
  content: "\ea34";
}

.icon-minimal-right::before {
  content: "\ea35";
}

.icon-minimal-up::before {
  content: "\ea36";
}

.icon-mobile::before {
  content: "\ea37";
}

.icon-molecule-40::before {
  content: "\ea38";
}

.icon-money-coins::before {
  content: "\ea39";
}

.icon-notes::before {
  content: "\ea3a";
}

.icon-palette::before {
  content: "\ea3b";
}

.icon-paper::before {
  content: "\ea3c";
}

.icon-pencil::before {
  content: "\ea3d";
}

.icon-pin::before {
  content: "\ea3e";
}

.icon-planet::before {
  content: "\ea3f";
}

.icon-puzzle-10::before {
  content: "\ea40";
}

.icon-satisfied::before {
  content: "\ea41";
}

.icon-scissors::before {
  content: "\ea42";
}

.icon-send::before {
  content: "\ea43";
}

.icon-settings-gear-63::before {
  content: "\ea44";
}

.icon-settings::before {
  content: "\ea45";
}

.icon-simple-add::before {
  content: "\ea46";
}

.icon-simple-delete::before {
  content: "\ea47";
}

.icon-simple-remove::before {
  content: "\ea48";
}

.icon-single-02::before {
  content: "\ea49";
}

.icon-single-copy-04::before {
  content: "\ea4a";
}

.icon-sound-wave::before {
  content: "\ea4b";
}

.icon-spaceship::before {
  content: "\ea4c";
}

.icon-square-pin::before {
  content: "\ea4d";
}

.icon-support-17::before {
  content: "\ea4e";
}

.icon-tablet-2::before {
  content: "\ea4f";
}

.icon-tag::before {
  content: "\ea50";
}

.icon-tap-02::before {
  content: "\ea51";
}

.icon-tie-bow::before {
  content: "\ea52";
}

.icon-time-alarm::before {
  content: "\ea53";
}

.icon-trash-simple::before {
  content: "\ea54";
}

.icon-triangle-right-17::before {
  content: "\ea55";
}

.icon-trophy::before {
  content: "\ea56";
}

.icon-tv-2::before {
  content: "\ea57";
}

.icon-upload::before {
  content: "\ea58";
}

.icon-user-run::before {
  content: "\ea59";
}

.icon-vector::before {
  content: "\ea5a";
}

.icon-video-66::before {
  content: "\ea5b";
}

.icon-volume-98::before {
  content: "\ea5c";
}

.icon-wallet-43::before {
  content: "\ea5d";
}

.icon-watch-time::before {
  content: "\ea5e";
}

.icon-wifi::before {
  content: "\ea5f";
}

.icon-world::before {
  content: "\ea60";
}

.icon-zoom-split::before {
  content: "\ea61";
}

.icon-refresh-01::before {
  content: "\ea62";
}

.icon-refresh-02::before {
  content: "\ea63";
}

.icon-shape-star::before {
  content: "\ea64";
}

.icon-components::before {
  content: "\ea65";
}

/*Icons*/

.ws-item span {
    text-transform: capitalize;
}

.ws-item {
    grid-row: 1;
    text-align: center;
    padding: 5px;
    align-self: center;
}

.workspace-record {
   display: grid;
    grid-auto-columns: 1fr;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px dotted grey;
    background-color: transparent;
    transition: background-color 500ms ease;
    font-size: .85em;
    gap: 10px 10px;
    min-height: 90px;
}



.workspace-record .form-check {
    margin-top: 0;
    padding-left: 0;
}

.workspace-record:hover {
    color: white;
    cursor: pointer;
    background-color:rgba(0,0,0,.1);
    transition: background-color 500ms ease;
}

.workspace-record.ws-header {
  border-bottom: 1px solid #e14eca;
    min-height: 30px;
    height: 50px !important;
    background: black;
}


.workspace-record .form-check-input {
    position: relative;
    margin-top: 0;
    margin-left: 0;
}

.card {
    background: #000000 !important;
    filter: drop-shadow(1px 2px 4px grey) !important;
}

.workspace-record .form-check .form-check-label {
  padding-left:0px;
}

.interface {
    display:block;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.5);
    float: right;
    outline:none !important;
    transition:color 500ms ease;
}

.interface:hover {
        color:white;
    }


.interface-select.active {
    display:inline-block;
}

.interface-select {
    display: none;
    padding: 25px;
    min-width:200px;
    background: #000000;
    color: black !important;
    border-radius: 4px;
    position: fixed;
    right: 55px;
    border: 1px solid #000000;
    filter: drop-shadow(1px 2px 4px white);
    z-index:5;
}

    .interface-select ul li {
        list-style: none;
        color: rgba(255,255,255,.7);
        padding-top: 4px;
        cursor: pointer;
        font-size:13px;

    }
.interface-select ul {
    padding:0px;
    margin-bottom:0px;
}

.interface-select .menu-header {
    padding: 0px;
}


.interface-select::before {
   content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: #000000;
    position: absolute;
    right: -6px;
    top: 15px;
    z-index: -1;
    transform: rotate(45deg);
    border-top: 1px solid #e14eca;
    border-right: 1px solid #e14eca;
}

.realButton {
    background: rgba(255,255,255,.15);
    margin: 10px 10px;
    border-radius: 3px;
    transition: background 500ms ease;
    padding: 12px 40px 12px 40px;
    color: white !important;
    cursor:pointer;
}


.realButton:hover {
      background: rgba(255,255,255,.30);
}


.pull-right-ws {
    float: right;
    padding: inherit;
}



.d-item {
  background: rgba(0,0,0,.1);
  border-radius: 0.3em;
}

.dashboard {
    display: grid;
    min-height: Calc(100vh - 275px);
    gap: 10px;
}
.r-1 {
    grid-row:1;
    grid-column: span 3;
    overflow:hidden;
    
}
.r-2 {
    grid-row:2;
      overflow:hidden;
}
.r-3 {
    grid-row:3;
    grid-column: span 3;
      overflow:hidden;
}
.r-4 {
    grid-row:5;
     grid-column: span 3;
      overflow:hidden;
}

.r-5 {
    grid-row:4;
    overflow:hidden;
}

.r-6 {
    grid-row:6;
    grid-column: span 3;
    overflow:hidden;
}



.d-header {
    font-size: .9em;
    color: rgba(255,255,255,.7);
    padding: 10px;
    text-decoration-line: underline;
    text-decoration-color: #e14eca;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    font-weight:200;
    position:absolute;
    padding-left:25px;
    padding-right:25px;
    border-bottom-right-radius:10px;
    background:#000000;
    border-bottom: 1px dotted grey;
    border-right: 1px dotted grey;
    z-index:1;
}

.d-item.r-1, .d-item.r-2 {
    min-height:200px;
}

.d-item.r-3, .d-item.r-4, .d-item.r-5 {
    min-height: 500px;
}

/* width */
::-webkit-scrollbar {
  width: 7px;
  height:7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #00000020;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.5);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:rgba(255,255,255,.7);
}
::-webkit-scrollbar-corner {
  width:10px;
  height:10px;
  background:#00000020
}


/*Data*/


.data-record:last-of-type {
    display: none;
}

.data-view {
    overflow-x: scroll;
    overflow-y: scroll;
    background: black;
    padding: 10px;
    border-radius: 5px;
    border:1px dotted grey;
    padding:10px;
    padding-bottom:20px;
    padding-top:60px;
    max-height:800px;
}

.data-projections {
    display: grid;
    gap: 3px;
    
}

.data-record {
    display: grid;
    gap: 10px;
    grid-auto-columns: 150px;
    grid-auto-flow:column;   
    text-align:end;
    position:sticky;
    top:0;
    padding-right:40px;
}

.r-4 { 
    overflow: hidden;
}

.data-field {
 border-bottom: 1px solid grey;
 color: rgba(255,255,255,.65);
 text-shadow: 0 0 black;
 font-weight:300;
}

.data-record hr {
    border-top: 2px
   solid #525f7f !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 120%; 
}
.data-record.data-header {
    position: sticky;
    top: 0;
    background: black;
    height:50px;
    z-index:1;
}
.data-record.data-header .data-field {
    border-bottom: none;
    font-weight: 500;
}
.data-field.no-data {
   border-bottom: none;
    border-top: none;
    border-bottom: 3px double grey;
    height: 22px;
}

.data-field.label {
    font-weight: 500;
}

.data-record .data-field:nth-child(1) {
    position: sticky;
    background: black;
    left: 0;
    z-index:2;
}
.data-record .data-field:nth-child(n+2) {
    position:sticky;
    left:0;
    background:black;
    z-index:0;
}

.dash-r1-chart {
     max-width:200px;
     min-height:200px;
     padding:5px;
     margin:auto;
     position:relative;
     cursor:pointer;
}
.dashboard-profile {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-auto-flow: row;
    text-align: center;
    gap:5px;
    width:100%;
    margin-top: auto;
    margin-bottom: auto;
}

.dashboard-profile-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-flow: row;
    text-align: center;
    gap:5px;
    width:100%;
    margin-top: auto;
    margin-bottom: auto;
}



div[class^="dashboard-item"] {
    color: rgba(255,255,255,.7);
    border-bottom: 1px dotted rgba(255,255,255,0.3);
    font-weight:200;
}




.kpiGrid {
  display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: flex-end;
    justify-items: center;
    padding: 5px;
    border: 1px dotted grey;
    border-radius: .5em;
    font-size: .9em;
    height: 100%;
    width: 100%;
    overflow: overlay;
    padding-top:40px;
}

.kpiGrid.Profile {
    grid-template-columns: 1fr .25fr;
}

.kpiGrid.Demand {
   grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: flex-start;
    justify-items: baseline;
    overflow:hidden;
}


.kpiGrid.Demand > div {
 height: 100%;
 width: 100%;

}

.Demand-Stats {
    position: relative;
    text-transform: uppercase;
    border-left: 2px solid #e14eca;
    padding: 5px;
    padding-left:10px;
    opacity:0;
    transform:translate3d(0px,10px 0px);
}

.Demand-Stats p {
    text-transform: initial;
}


span.stat-label {
    color: grey;
    font-weight: 500;
    text-transform: uppercase;
    margin-right:2px;
}


.kpiGrid.Demand > div:nth-child(1) {
    padding: 5px;
}



.dashboard-item.header {
    font-weight: 400;
    text-transform: uppercase;
}
canvas:hover {
    cursor: pointer;
}

.d-header .interface {
  margin-left: 10px;
  color: #e14eca;
  transition:color 500ms ease;
}
.d-header .interface:hover {
  margin-left: 10px;
  color: #ffffff;
}

.wizard-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0px 25px;
}

.wizard-grid .grid-col-1 {
    grid-column:1;
}
.wizard-grid .grid-col-2 {
    grid-column:2;
}

h4.grid-header {
    font-weight: 200;
    text-underline-offset: 5px;
    text-decoration: underline;
    text-decoration-color: #e14eca;
    text-decoration-thickness: 1px;
}

.grid-menu {
    background: #000000;
    display: inline-block;
    position: absolute;
    margin-top: 10px;
    margin-left: 250px;
    padding: 10px;
    z-index: 10;
    color: black;
    border-radius: 5px;
    border: 1px solid #000000;
    font-weight: 200;
    filter: drop-shadow(1px 2px 4px white);
    min-width:200px;
}

.grid-menu.demand-1 {
    margin-left: 190px;
}

.grid-menu.demand-2 {
    margin-left: 220px;
}



.ul-menu {
    padding:10px;
    margin-bottom:0;
}

.ul-menu li {
    list-style:none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    padding-bottom:5px;
}

.menu-header {
    position: relative;
    margin-bottom: 10px;
    font-size: .9em;
    color: rgba(255,255,255,.7);
    padding: 10px;
    text-decoration-line: underline;
    text-decoration-color: #e14eca;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    font-weight: 200;
    border-bottom-right-radius: 10px;
    background: #000000;
   
}