/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "./variables";
@import "mixins";
@import "print";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";

html, body{
  width: 100%;
  height: 100%;
}
header{
  position: fixed;
  left:0;
  top:0;
  width: 100%;
  height: 50px;
  background-color: #eee;
}
main{
  width: 100%;
  height: 100%;
  padding-top: 50px;

  .frame{
    display: inline-block;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .gutter{
    height: 100%;
    display: inline-block;
    background-color: #eee;
    border-bottom:0;
    cursor: ew-resize;
  }
  margin: 0 !important;
}
.embed{
  iframe{
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
  }
}

#Controller{
  .toolbar{
    position: absolute;
    left:0;
    bottom:0;
    width: 100%;
    height: 40px;

    background-color: red;
  }
}

.sortable{
  ul{
    list-style: none;
    padding: 0 0 0 10px;
    margin: 0;
    border:1px solid transparent;

    &.sortable__group{

    }

    .placeholder{
      width: 100%;
      height: 2px;
      background-color: #aaa;
    }
    li{

    }
    .dragged{
      border-color: #333;
    }
  }
  button{
    border: 0;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    &:hover{
      background-color: #f2f2f2;
    }
  }
  .sortable--selected{
    background-color: theme-color("primary") !important;
    color:#fff !important;
  }
}