/*********************/

.fs-input {
    position: absolute;
    top: 5px;
    right: 25px;
    background: white;
    padding: 5px 15px 5px 15px;
    cursor: pointer;
    color: black !important;
    font-weight: 700;
    font-size: 1em !important;
    border-radius: 2px;
    border: 1px solid #7b2cbf;
    text-transform: uppercase;
}

body {
    overflow-x:hidden !important;
    background-color:black !important;
    color:rgba(255,255,255,.7);
}

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

h1.d-header {
    margin-bottom: 0;
}

.yieldterminal-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-image: url(/img/yieldTerminal.svg);
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
    vertical-align: bottom;
    margin-right: -0.5em;
}

span.brnd1 {
    text-decoration-line: underline;
    text-decoration-color: #5a189a;
    text-underline-offset: 7px;
    color: white;
    text-transform: lowercase;
    font-size: .8em;
    text-decoration-thickness: 5px;
    font-weight: 300;
    line-height: 2em;
}

span.brnd2 {
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 400;
}

.form-check-radio input[type="radio"]:checked + .form-check-sign::before {
    border-color: #9D4EDD;
}


.form-control {
    border-color:rgba(255,255,255,.5);
}

.form-control:focus {
    border-color: #7b2cbf;
    background-color: transparent;
    box-shadow: none;
}

.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
    width: 6px;
    height: 6px;
    background-color: #9D4EDD;
    border-color: #9D4EDD;
    top: 9px;
    left: 6px;
    opacity: 1;
}


.card-wizard .nav-pills .nav-item .nav-link.active, .card-wizard .nav-pills .nav-item .nav-link.checked:focus, .card-wizard .nav-pills .nav-item .nav-link.checked:hover, .card-wizard .nav-pills .nav-item .nav-link.active:focus, .card-wizard .nav-pills .nav-item .nav-link.active:hover {
    background: #7b2cbf;
}

.fileProcess button.btn.btn-md.btn-outline-light {
    background-color: black !important;
    background: black !important;
    border: 1px solid white;
    transition:filter 500ms ease;
}

    .fileProcess button.btn.btn-md.btn-outline-light:hover {
        filter:drop-shadow(1px 1px 2px white);
    }

.card-wizard .nav-pills .nav-item .nav-link.checked, .card-wizard .nav-pills .nav-item .nav-link.active {
    background: #7b2cbf;
    color: white;
}

.card-wizard .progress-with-circle .progress-bar {
    background: #7b2cbf;
}


body::-webkit-scrollbar-thumb {
    background-color: white;
    outline: 1px solid black;
    border-radius: 5px;
}


.filedrop {
   border: 3px dashed #7b2cbf;
    grid-row: 1;
    width: 100%;
    height: 100%;
    filter:drop-shadow(2px 2px 4px black);
    border-radius: 2em;
    align-items: center;
    justify-content: center;
    display: flex;
    background: black;
    overflow: hidden;
}


.fileInterface {
   display: grid;
    grid-template-columns: 45% 45%;
    gap: 10%;
    width: 100%;
    grid-template-rows: 300px;
    padding: 20px;
   /* border: 3px solid rgba(0,0,0,.5);*/
    background: black;
   /* filter: drop-shadow(2px 4px 6px black);*/
    border-radius: 0.2857rem;
}

.sidebar {
    background:#1e1e2f;
    background-image:none !important;
   
}

.filedrop h4 {
   position:absolute;
   text-align:center;
   text-transform:uppercase;
}

.filedrop.load {
   border: 3px solid #7b2cbf;
    overflow:hidden;
   overflow-y:scroll;
}

.filedrop.load label {
    color:rgba(255,255,255,.7);
}

.fileGrid {
    display:grid;
}


.filedrop.load::-webkit-scrollbar {
  display:none;
}


.excelWrap {
    padding: 30px;
    background: #000000;
    filter: drop-shadow(1px 1px 2px white);
    margin: 25px;
    border-radius: 0.2857rem;
}



.fakeExcel table {
    text-align: center;
   /* background: rgba(255,255,255,.8);*/
    margin-bottom:0px;
    font-size:.8em;
}


.fakeExcel {
   overflow: hidden;
    overflow-x: scroll;
    overflow-y: scroll;
    width:Calc(100vw - 200px);
    max-height: 600px;
    margin:0 auto;
    margin-left:15px;
}


.fakeExcel table {
    border-collapse: separate;
    border-spacing: 0px;
    border: none;
    }

.fakeExcel table td,.fakeExcel table th {      
    height: 40px;
    color: black;
    border: 1px solid white;
    padding: .5rem;
    vertical-align: middle;
}

.fakeExcel table tr td:nth-child(n+2):hover {
    border: 2px dashed #7b2cbf;
    background: white;
    cursor:pointer;
}

.customized-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: white;
    border: 1px solid white;
 
}
.customized-scrollbar::-webkit-scrollbar-thumb        
{ 
    border-radius: 0px !important;
    background-color: orange !important;
    outline: none !important;
}
.customized-scrollbar::-webkit-scrollbar-corner       
{ 
    background-color: white;
    width:10px;
    height:10px;
}


table.excelTable {
    background: rgba(255,255,255,.8);
}


.fakeExcel table thead  {
   background: #808080;
    position: sticky;
    top: 0;
    left:0;
}
.fakeExcel table td:nth-child(1) {
   background: #808080;
   position: sticky;
    left: 0;
    top: 40px;
}

.fakeExcel table tr td:nth-child(n+2) {
    min-width: 120px;
    white-space:nowrap;
}


.fakeExcel table th:nth-child(1) {
    position: sticky;
    top: 0;
    left: 0;
    background: #808080;
}


.card.excel-card {
    margin-top:60px;
    box-shadow: none !important;
    background: #000000;
  filter: drop-shadow(2px 2px 4px #5a189a);
}



.fd-label {
    text-transform:uppercase;
    position: absolute;
    top: 5px;
    left: 25px;
    color: rgba(255,255,255,.5);
}


.content {
    height: Calc(100vh - 125px);
}

span.clearFiles {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    color: rgba(255,255,255,0.5);
    cursor:pointer;
}
    span.clearFiles svg {
        width:1.6em;
        height:1.6em;
    }


    


.die-scene.loading {
    position: fixed;
    top: 40%;
    transform: translate(-50%, -40%);
    left: 50%;
}

    .die-scene.loading .die-pitch {
        animation: loadcube ease-in-out 4s alternate infinite;
    }


    .die-scene.loading h3 {
        color:#9d4edd;
    }


@keyframes loadcube {
    0% {
        transform: translateZ(-150px) rotateY(0deg);
    }

    25% {
        transform: translateZ(-150px) rotateY(-90deg);
    }

    50% {
        transform: translateZ(-150px) rotateY(-180deg);
    }

    75% {
        transform: translateZ(-150px) rotateY(-270deg);
    }

    100% {
        transform: translateZ(-150px) rotateY(-360deg);
    }
}



/*test*/

.die-scene {
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 5rem;
    width: 300px;
    height: 300px;
    perspective: 300px;
}

.die-pitch {
    height: 300px;
    width: 300px;
    position: relative;
    transform-style: preserve-3d;
    /* transform: translateZ(-150px);
    transition: transform 1s;*/
    animation: pitch ease-in-out 24s infinite;
}

.die-face {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: rgba(0,0,0,0.2) !important;
    border:1px solid grey;
    color: white;
}

.die-pitch div:nth-child(1) {
    transform: rotateY(0deg) translateZ(150px);
}

.die-pitch div:nth-child(2) {
    transform: rotateY(90deg) translateZ(150px);
}

.die-pitch div:nth-child(3) {
    transform: rotateY(180deg) translateZ(150px);
}

.die-pitch div:nth-child(4) {
    transform: rotateY(270deg) translateZ(150px);
}

.die-pitch div:nth-child(5) {
    transform: rotateX(90deg) translateZ(150px);
}

.die-pitch div:nth-child(6) {
    transform: rotateX(-90deg) translateZ(150px);
}


@keyframes pitch {
    0% {
        transform: translateZ(-150px) rotateY(0deg);
    }

    16.67% {
        transform: translateZ(-150px) rotateY(-90deg);
    }

    33.33% {
        transform: translateZ(-150px) rotateY(-180deg);
    }

    50% {
        transform: translateZ(-150px) rotateY(-270deg);
    }

    66.67% {
        transform: translateZ(-150px) rotateX(-90deg);
    }

    83.33% {
        transform: translateZ(-150px) rotateX(90deg);
    }

    100% {
        transform: translateZ(-150px) rotateY(0deg);
    }
}


.cube-text {
    text-align: center;
    margin-top: 30%;
}


    .cube-text img {
        width: 60px;
        height: 60px;
    }

.card.excel-card {
   opacity:0;
   animation:entrance 1s ease forwards;
}

@keyframes entrance {
    0% {
        opacity: 0;
        transform: translate3d(0px, 25px, 0px);

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

.wizard-wrapper.card-wizard {
    min-height: 200px;
}

.wizard-wrapper .nav-link svg {
    width: 2.2em !important;
    height: 2.2em !important;
    color: #7b2cbf;
    position: absolute;
}

.wizard-wrapper .nav-link.checked svg {
    width: 2.2em !important;
    height: 2.2em !important;
    color: white;
    position: absolute;
}

.fileProcess {
    padding-left: 50px;
}

.filedrop.scope {
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    display: grid;
    text-align: center;
    padding: 20px;
}

input[type=range] {
  -webkit-appearance: none;
    width: 100%;
    background: #9d4edd;
    height: 1px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background:#ffffff;
  width:30px;
  height:15px;
  cursor:pointer;
  transition:all 500ms ease;
}
    input[type=range]::-webkit-slider-thumb:hover {
        transform:scale(1.2);
    }




input[type=range]:focus {
  outline: none; 
}

.input-wrap {
    grid-column: 1;
    width:inherit;
}
.input-wrap-2 {
    grid-column: 2;
}

.refreshAction {
    animation:entrance 500ms ease forwards;
}

.input-wrap .form-check {
    margin-top: 0;
    float: left;
    margin-right: 10px;
}

.input-wrap select {
    background: #1e1e2f;
    border: 1px solid #9d4edd;
    height: 30px;
    color: rgba(255,255,255,.7);
    width:300px;
}
.autoScope svg {
    width: 3.5em;
    height: 3.5em;
    margin-right:10px;
}

.fileInterface2 {
    display: grid;
    grid-template-rows: 300px;
    padding: 20px;
    background: #000000;
    border-radius: 0.2857rem;
}

.scopedValues {
    margin-left:10px;
}

.card-wizard .nav-pills .nav-item .nav-link p {
    min-width: 120px;
}

.building {
    user-select:none;
    width: 600px;
    margin: 0 auto;
}

.stepAction {
    opacity:0;
    animation:entrance 500ms ease forwards;
}

.card-title.build-label svg {
    width: 2em;
    height: 2em;
    margin-right: 10px;
    color:rgba(255,255,255,.7);
}


.autoScope.push svg {
    width: 3.5em;
    height: 3.5em;
    animation: pushing 1500ms ease-in-out infinite;
}

@keyframes pushing {
    0% {
      transform:translate(0px,2px);
    }
    50% {
    transform:translate(0px,-2px) scaleY(.95);
    }
    100% {
         transform:translate(0px,2px);
    }
}


.header-connect {
   height: 50px;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #000000;
   filter: drop-shadow(2px 2px 4px #7b2cbf);
    z-index: 10;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    border-bottom-left-radius: 100%;
}


span.connected-icon {
    grid-column: 4;
     text-align: left; 
    padding: 15px;
}

span.connected-icon svg {
    width:1.5em;
    height:1.5em;
}

span.signalMsg {
    padding-left: 5px;
}

.connected {
    color:#9d4edd;
}

.pushmsg {
    padding: 15px;
    grid-column: 3;
    text-align: right;
    color: rgba(255,255,255,.6);
    font-size: .8em;
}

g.automate {
    animation: build 100ms ease forwards;
    font-size:14px;
}

@keyframes build {
   

    0% {
        transform:translate(0px,0px) rotate3d(0,0,0,0deg);
         opacity:1;
    }
    50% {
          transform:translate(217px,-100px) rotate3d(1,1,0,360deg);
           opacity:1;
    }
    99.99% {
        transform:translate(450px,0px) rotate3d(0,0,0,0deg);
         opacity:1;
    }
    100% {
         transform:translate(450px,0px) rotate3d(0,0,0,0deg);
        opacity:0;
    }

}


.filedrop.load.global.stepAction {
    flex-direction: column;
}

.global-row {
   display: grid;
    grid-auto-columns: 33.33% 1fr;
    width: 100%;
    padding: 0px 20px 0px 40px;
    margin-bottom:10px;
    align-items: center;
    grid-gap: 10px;
}
.global-row div {
   grid-row:1;
   color: rgba(255,255,255,.6);
   font-size: .875rem;
}



span.optionalModel {
    width: 2em;
    height: 2em;
    display: inline-block;
    margin-right:10px;
    cursor: pointer;
}

.optionalModel svg {
    color: white;
    width: 2em;
    height: 2em;
    transition:color 500ms ease;
}

.optionalModel svg:hover {
    color: white;
    width: 2em;
    height: 2em;
    transition:color 500ms ease;
}

.optionalGlobal {
    transform:rotateX(90deg);
    transition:all 500ms ease;
    opacity:0;
    width:100%;
}

.optionalActivate {
    transform:rotateX(0deg);
    transition:transform 500ms ease;
    opacity:1;
}