$menu-color: #333;
$top:0;
$left:228px;
$bottom:240px;

@mixin scrollbar{
&::-webkit-scrollbar{width:4px;height:4px;}
&::-webkit-scrollbar-button:start:decrement, &::-webkit-scrollbar-button:end:increment{ display:block;height:2px;background-color: #232323; }
&::-webkit-scrollbar-track-piece{ background-color: #282828;-webkit-border-radius:0;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px; }
&::-webkit-scrollbar-thumb:vertical{ height:5px;background-color: #6d6d6d;-webkit-border-radius:4px; }
&::-webkit-scrollbar-thumb:horizontal{ width:5px;background-color:#999;-webkit-border-radius:4px; }
}

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  user-select: none;
}

#helpTrigger{
  background-color: rgb(163, 7, 7);
  color: rgb(236, 236, 236);
  border-color: rgb(202, 202, 202);
  text-shadow: 1px 1px black;
}

.introjs-tooltip{ max-width: 350px; }
.introjs-tooltip, .introjs-helperLayer{
  color: #e8e8e8;
  background-color: rgb(70, 71, 77);
  border: 1px solid #b2b2b2;
  p a{
    color:rgb(92, 190, 228);
  }
}
.introjs-helperLayer{
  color: #e8e8e8;
  background-color: rgba(94, 97, 111, 0.51)
}
.introjs-overlay.hidden {
  display: none;
}
.introjs-overlay{
  opacity: 0.3 !important;
}
.introjs-button.wide{
  text-align: center;
  width:100% - 8;
}

.table{
  //font-family:monospace;
  width:350px;
  tr{ border-top:1px solid #747474;}
  th{ text-align: left; }
}

html{
  overflow:hidden;
}
body{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-family:helvetica;
  color:#aaa;
  text-shadow: 0.1em 0.1em #222;
  letter-spacing: 1px;
  font-size:8pt;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

ul{
  list-style-type: none;
  padding:0;
  margin:0;
}
li{
  display:inline-block;
  padding: 0;
}

.header{
  height:50px;
  background-color: #1b1b1b;
  border-bottom:1px solid #545454;
  background-image:-webkit-linear-gradient(top, #222222, #111111);
  box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
  .actions{
    padding-top:13px;
    padding-right:11px;
    a{ padding:2px 1px 1px 1px; }
  }
  a.site{
    font-family:monospace;
    padding-left:10px;
    padding-top:4px;
    color: #dbdbdb;
    font-size:12pt;
    font-weight:bold;
    text-decoration: none;
    display:block;
    img{
      width:40px;
      height:40px;
      float:left;
    }
    span{
      margin-left:10px;
      line-height:42px;
    }
  }
}

.container-left{
  bottom: 0;
  cursor: default;
  background-color:$menu-color;
  left: 0;
  padding: 0 0 0 0px;
  position: absolute;
  border-right:1px solid #555;
  top: $top;
  width: $left;
}

.container-right{
  bottom: $bottom;
  left: $left+1;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: $top;
  background-color: #1d1f20;
}
.container-bottom{
  position:absolute;
  padding:0;
  bottom:0;
  left:$left+1;
  right:0;
  height:$bottom - 1;
  border-top:1px solid #666;
  background-color:#222;
  .fade{
    position:absolute;
    right:0; bottom:0; left:0;
    height:30px; /* adjust it to your needs */
    background: linear-gradient(to bottom, rgba(34, 34, 34, 0) 0%, rgb(34,34,34) 70%)
  }
}
.top{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:$top - 1;
  background-color: #111115;
  border-bottom:1px solid #3f3f3f;
}

.controls{
  @include scrollbar;
  font-size:9pt;
  position:absolute;
  top:51px;
  bottom:0;
  right:1px;
  overflow:hidden;
  overflow-y:auto;

  input[type=text], textarea{
    font-family:monospace;
    color:#bbb;
    border-radius:2px;
    border:1px solid #1d1d1d;
    background-color: #42474a;
    font-size:9pt;
    padding:3px 5px;
  }
  input[type=text]{
    text-align: right;
  }


  &.validation-enabled{
    input:invalid{
      border-color:rgb(219, 43, 43);
      background-color:rgb(207, 169, 176);
      color:black;
    }
  }

  li{
    display:inline-block;
    &.section{
      background-color: #27292c;
      width:100%;
      padding:4px 0px;
      margin-top:6px;
      margin-bottom:5px;
      border-bottom:1px solid #464646;
      border-top:1px solid #191919;
      text-align: center;
      i{
        position:absolute;
        right:0;
        &:hover{
          border-color: #aeaeae;
          color: #cecece;
        }
      }
    }
    &.split{
      display:block;
      width:100%;
      border-bottom: 1px solid #464646;
      border-top: 1px solid #202626;
      margin-top:5px;
      margin-bottom:5px;
    }
    &.group{
      margin-left:4px;
    }
  }
  ul.control-row{
    padding:1px 0px 0px 0px;

    input{
      width:60px;
      margin:0;
    }
    textarea{
      width:132px;
    }
    &.half input{
      margin-left:72px;
    }
    &.single input{
      width:134px;
    }
    li.label {
      width:64px;
      padding-left:8px;
    }
  }
  ul.labels{
    li{
      border:1px solid #222222;
      border-bottom:none;
      border-radius:4px 4px 0px 0;
      width:65px;
      text-align:right;
      font-size:7.5pt;
      padding-bottom:4px;
      padding-top:1px;
      padding-right:5px;
      background-color: #6d6e70;
      color: #d7d7d7;
    }
    &.pair li:first-child{
      margin-left:72px;
      margin-right:0px;
    }
  }
  .recalculate{
    text-align: center;
    padding-top:5px;
    button{
      border:1px solid #787878;
      background-color: #2f3639;
      color: #ececec;
      font-size:11pt;
      text-shadow: 0.1em 0.1em #222;
      padding:8px;
      width:100%;
      margin:6px 0px;
      position:relative;
      &:hover{ background-color: #3b4346; }
      &:active{ background-color: #1a2023; }

      .layer{
        position: absolute;
        top:0;bottom:0;right:0;left:0;
      }
      .sheen{ box-shadow:inset 0px 15px 0 rgba(255, 255, 255, 0.1); }
      .progress{ display:none; background-color: rgba(102, 155, 230, 0.39); }

      .text-cancel { position:relative; display:none; }
      .text-recalculate{ position:relative; display:block; }
      &.recalculating {
        .text-cancel { display:block; }
        .text-recalculate{ display:none; }
        .progress{ display: block; }
      }
    }
  }
}

.system-info {
  position: absolute;
  top:7px;
  left:0;
  right:0;
  text-align: center;
  background-color:rgba(0,0,0,0.3);

  color: #d6d6d6;
  border:1px solid #363636;
  border-left:none;
  border-right:none;
  padding-top: 5px;
  padding-bottom:10px;

  .system-name{
    display:inline;
    font-size:14pt;
    letter-spacing: 2px;
    input {
      background:none;
      text-align: center;
      border:none;
      color:#bbb;
      width:100%;
    }
  }
  .system-author {
    display:none;
    margin:0 auto;
    color: inherit;
    &:hover{
      color: #dce9f5;
    }
  }
}

.actions{
  position:absolute;
  right:0;
  top:0;
  padding-right:6px;
  padding-top:7px;
  height:30px;
  a{
    font-size:8pt;
    padding:2px 0px 1px 1px;
    margin-right:5px;
    display:inline-block;
    position: relative;
    background-color: #1f1f20;

    &.facebook,&.twitter,&.gplus{
      color:rgb(219, 219, 219);
    }
    &.facebook{ border-color: #3B5998;}
    &.twitter{ border-color: #4099FF;}
    &.gplus{ border-color: #d34836;}

    &.open input{
      width:100px;
    }
    input{
      background:transparent;
      color: #dfdfdf;
      border:none;
      width:0px;
      margin:0px;
      padding:0px;
      transition: width .25s ease-in-out;
      -moz-transition: width .25s ease-in-out;
      -webkit-transition: width .25s ease-in-out;
    }
    span{
      margin-left:2px;
      margin-right:4px;
    }
    i{
      font-size:12px;
      padding:0px 0px 0px 0px;
    }
    text-decoration: none;
    line-height:14px;
    color: #808080;
    border:1px solid #797979;
    vertical-align: middle;
    border-radius:2px;
    cursor:pointer;
    &:hover{
      border-color: #aeaeae;
      color: #cecece;
      &.tooltip:after{
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        top: 26px;
        color: #fff;
        border-color:white;
        content: attr(title);
        left: 0;
        padding: 5px 15px;
        position: absolute;
        z-index: 98;
        white-space: nowrap;
      }
    }
  }
}


.drawing-pad{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  #drawingContainer{
    position:relative;
    overflow: hidden;
    height:100%;
  }
  canvas {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    cursor:crosshair;
    &.moving{ cursor: move; }
    &.resizing{ cursor: ne-resize; }
  }
}

.ticker{
  @include scrollbar;
  overflow-y: scroll;
  position:absolute;
  top:0; bottom:0;left:0;right:0;
  margin:1px;
  padding:0px;
  text-align:center;
  .elem{
    border:1px solid #6f6f6f;
    padding:2px;
    margin:1px;
    border-radius:1px;
    position:relative;
    background-color: #2c2e33;

    width:130px;
    height:125px;
    //position:relative;
    font-size:8pt;

    &:hover{
      background-color: #3f444a;
    }
    .img-holder{
      text-align: center;
      img{
        margin:0 auto;
      }
    }
    .elem-author{
      display:none;
    }
    .elem-label{
      display:block;
      position:absolute;
      left:0;
      right:0;
      bottom:5px;

      background-color:rgba(0,0,0,0.3);

      color: #d6d6d6;

      border:1px solid #555555;
      border-left:none;
      border-right:none;
      padding:2px 0;
      text-overflow: ellipsis;
    }
  }
}



