.output-panel {
    height: calc(50vh - 46px);
    padding-top: 15px;
    font-family: "Lucida Console", Monaco, monospace;
    color: #1f1f1f;
    overflow-y: scroll;
    .embedded & {
        background-color: #585a5e ;
        height: calc(50vh - 60px);
        &.w3-border {
            border: 1px solid #20b6b0!important;
        }
        .data {
            &.output {
               color: #3ad1ca  ; 
            }
            color: #3ad1ca ;
        }
        .error {
            color: rgb(233, 115, 115);
        }
        .control {
            color: rgb(231, 231, 231);
        }
    }
    .control {
        color: gray;
    }
    .data {
        &.output {
           color: #1f1f1f; 
        }
        color: gray;
    }
    .error {
        color: red;
    }
    .loading {
        span {
            animation-name: blink;
            animation-duration: 1.4s;
            animation-iteration-count: infinite;
            animation-fill-mode: both;
        }
        span:nth-child(2) {
            animation-delay: .2s;
        }
        span:nth-child(3) {
            animation-delay: .4s;
        }
    }
}

@keyframes blink {
    0% {
      opacity: .2;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: .2;
    }
}
