@font-face {
    font-family: "Fira Code Arturo";
    src: url('../fonts/FiraCode-Regular.ttf') format('truetype');
  }

#editor {
    height: calc(100vh - 103px); /* navbar: 52 + tabs+margin: 51 */
    font-family: 'Fira Code Arturo', monospace !important;
    text-shadow: 0 1px rgba(0,0,0,.3);
    line-height: 1.5;
    font-size: 1em;
    -webkit-font-smoothing: auto;
}

#terminal {
    padding: 1em;
    background: black;
    font-family: 'Fira Code Arturo', monospace !important;
    white-space: pre-wrap;
    color: white;
}

#runbutton {
    position: absolute;
    top: calc(52px + (100vh - 52px)/2 - 70px);
    left: calc(50vw - 90px);
    width: 60px;
    z-index: 5;
    background: darkorange;
    height: 60px;
    border-radius: 50px;
    color: white;
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;

    &.working {
        background: gray;
    }

    &:not(.working):hover {
        box-shadow: 0px 0px 6px 3px grey;
    }
}

#sharebutton {
    position: absolute;
    top: calc(52px + (100vh - 52px)/2 + 10px);
    left: calc(50vw - 90px);
    width: 60px;
    z-index: 5;
    background: #15AABF;
    height: 60px;
    border-radius: 50px;
    color: white;
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;

    &.working {
        background: gray;
    }

    &:not(.working):hover {
        box-shadow: 0px 0px 6px 3px grey;
    }
}

#expander {
    position: absolute;
    top: 59px;
    left: calc(50vw - 40px);
    color: white;
    z-index: 5;

    a {
        color: #777;
        border: 0;
        
        &:hover {
            color: #BBB;
        }
    }
}

#wordwrapper {
    position: absolute;
    top: 59px;
    left: calc(50vw - 70px);
    color: white;
    z-index: 5;

    a {
        color: #777;
        border: 0;
        
        &:hover {
            color: #BBB;
        }
    }
}

@media (max-width: 768px) {
    #runbutton {
        left: calc(100vw - 90px);
    }

    #sharebutton {
        left: calc(100vw - 90px);
    }

    #expander {
        left: calc(100vw - 40px);
    }

    #wordwrapper {
        left: calc(100vw - 70px);
    }
}

#runbutton.expanded {
    left: calc(100vw - 90px);
}

#sharebutton.expanded {
    left: calc(100vw - 90px);
}

#expander.expanded {
    left: calc(100vw - 40px);
}

#wordwrapper.expanded {
    left: calc(100vw - 70px);
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  
  /* Tooltip text */
  .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1000;

    &::after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 100%; /* To the right of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent black;
      }
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  &:hover .tooltiptext {
    visibility: visible;
  }
}

.tabs {
    margin-bottom: 10px !important;

    ul {
        border-bottom-color: #6b6b6b;
    }
    
    li.is-active a {
        border-bottom-color: #20d929;
        color: #20d929;
    }
}

.ace_editor {
    ::-webkit-scrollbar {
        background: none;
        width: 16px;
        height: 16px;
    }
    ::-webkit-scrollbar-thumb {
        border: solid 0 rgba(0, 0, 0, 0);
        border-right-width: 4px;
        border-left-width: 4px;
        -webkit-border-radius: 9px 4px;
        border-radius: 9px 4px;
        -webkit-box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2), inset 0 0 0 4px rgba(128, 128, 128, 0.2);
        box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2), inset 0 0 0 4px rgba(128, 128, 128, 0.2);
    }
    ::-webkit-scrollbar-track-piece {
        margin: 4px 0;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        border-right-width: 0;
        border-left-width: 0;
        border-top-width: 4px;
        border-bottom-width: 4px;
        -webkit-border-radius: 4px 9px;
        border-radius: 4px 9px;
    }
    ::-webkit-scrollbar-thumb:hover {
        -webkit-box-shadow:
        inset 0 0 0 1px rgba(128,128,128,0.9),
        inset 0 0 0 4px rgba(128,128,128,0.9);
        box-shadow:
        inset 0 0 0 1px rgba(128,128,128,0.9),
        inset 0 0 0 4px rgba(128,128,128,0.9);
    }
    ::-webkit-scrollbar-corner {
        background: transparent;
    }
    .ace_scrollbar-h{margin: 0 2px}    
}

#terminal_output {
    -webkit-transition: opacity .75s ease-in-out;
   -moz-transition: opacity .75s ease-in-out;
   -ms-transition: opacity .75s ease-in-out;
   -o-transition: opacity .75s ease-in-out;
   transition: opacity .75s ease-in-out;
   height: calc(100vh - 165px);
   overflow-y: auto;
   line-break: anywhere !important;

   ::-webkit-scrollbar {
        background: none;
        width: 16px;
        height: 16px;
    }
    ::-webkit-scrollbar-thumb {
        border: solid 0 rgba(0, 0, 0, 0);
        border-right-width: 4px;
        border-left-width: 4px;
        -webkit-border-radius: 9px 4px;
        border-radius: 9px 4px;
        -webkit-box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2), inset 0 0 0 4px rgba(128, 128, 128, 0.2);
        box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2), inset 0 0 0 4px rgba(128, 128, 128, 0.2);
    }
    ::-webkit-scrollbar-track-piece {
        margin: 4px 0;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        border-right-width: 0;
        border-left-width: 0;
        border-top-width: 4px;
        border-bottom-width: 4px;
        -webkit-border-radius: 4px 9px;
        border-radius: 4px 9px;
    }
    ::-webkit-scrollbar-thumb:hover {
        -webkit-box-shadow:
        inset 0 0 0 1px rgba(128,128,128,0.9),
        inset 0 0 0 4px rgba(128,128,128,0.9);
        box-shadow:
        inset 0 0 0 1px rgba(128,128,128,0.9),
        inset 0 0 0 4px rgba(128,128,128,0.9);
    }
    ::-webkit-scrollbar-corner {
        background: transparent;
    }
}