body{
  font-size:16px;
  padding-top: 51px;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow:hidden;
}

/*

    Data Table Grid

*/
[data-ui-type="table"] {
  display: table;
  table-layout:fixed;
}
[data-ui-type="row"] {display: table-row;}
[data-ui-type="cell"] {
  display: table-cell;
  vertical-align:top;
}


button:focus, button:active:focus, .btn:focus, .btn:active:focus, .btn.active:focus {
  outline: transparent;
  outline-color: transparent;
}
ul{
  list-style:none;
  padding:0;
}
label {
  font-weight: normal;
}

pre {
  background-color: #F8F8F8;
  border: 1px solid #DDD;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px
}
code {
  color:#000;
}
.center_div{
  margin: 0 auto;
  width:80% /* value of your choice which suits your alignment */
}
/*

    growl

*/
.growl{
  top:60px;
}


.navbar-inverse {
  background-color:@brand-primary;
}
.navbar-inverse .navbar-brand {
  color:#ffffff;
}
.navbar-inverse .navbar-nav > li > a {
  color:#ffffff;
}

.jumbotron {
  background-color:#ffffff;
}
.img-main-splash {
  width:100%;
}










/*

    ide container

*/
[data-id="MainBody"] {

  width:100%;
}
[data-id="MainSidebarContainer"] {
  width:26rem;
  background-color:@main-sidebar-bg-color;
}
[data-id="MainContentContainer"] {



}
.top-level-container {
  border: 0px solid #cccccc;

  /*padding:.5rem;*/
  /*height:600px;
  overflow:scroll;*/

}
/*

    Loading Indicator

*/
.loading-indicator {
  width:180px;
  height:180px;
  margin:35px auto 0 auto;

}
/*

    Modal Window

*/
.app-modal-window .modal-dialog {
  width: 1000px;

}
.app-modal-window .modal-dialog .modal-body {
  height: 550px;
  overflow:scroll;
}


/*

Main Search

*/
#MainNavSearchContainer {

}
.nav-search-list {
  padding:0;
  width:90%;
  margin:0 auto 0 auto;
}
.nav-search-list li {
  display:inline;
}
.main-search-input {
  border:1px solid #ffffff;
  background-color:#444444;
  border-radius:1rem;
  width:20rem;
}


/*[data-id="MainNavSearch"] {*/
/*position:fixed;*/
/*top:0;*/
/*}*/
[data-id="MainNavContainer"] {
  background-color:@main-nav-bg-color;
  color:@main-nav-default-color;
  overflow-y: scroll;
  overflow-x:auto;
}
[data-id="MainControlsContainer"] {
  background-color:@main-sidebar-bg-color;
  color:#ffffff;
  /*position:fixed;*/
  /*bottom:0;*/
}
/*

    Main Controls

*/
/*[data-id="IAMainControlsContainer"] {*/
/*border-top:1px solid #444444;*/
/*padding-top:.6rem;*/
/*background-color:#ffffff;*/
/*position: fixed;*/
/*bottom: 0;*/
/*text-align: center;*/
/*width:25rem;*/
/*}*/
/*
    Nav Tree

*/
[data-id="MainNavContextHelp"] {


}
.nav-tree-item {
  display:inline-block;
  border:0;
  background:transparent;
  text-align:left;
  padding:0;
}
.nav-tree-root {
  background: @main-nav-root-default-bg-color;
  color: @main-nav-root-default-color;
  padding-left:1rem;
  margin-top:.2rem;
  margin-bottom:.3rem;
  font-size:120%;
}
.tree-branch {
  background: @main-nav-branch-default-bg-color;
  padding:.4rem .2rem .2rem 2rem;
  color: @brand-primary;
  font-size:112%;
}
.tree-node {
  padding-left:3rem;
  font-size:100%;
  color: @main-nav-node-default-color;
}
.nav-tree-item-addnew {
  border:0;
  display:inline-block;
  background:transparent;
  color:#444444;
  font-size:80%;
  margin-top:0;
  margin-left:40px;
}
.branch-leaf-list.is-open {
  display:block;
}
.branch-leaf-list .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
  background: transparent;
}
.branch-leaf-list.is-closed {
  display:none;
}
.branch-leaf-list li {
  line-height: 1;
}
.branch-leaf-list li.is-open {
  background-color:@main-nav-node-item-open-bg-color;
}
.branch-leaf-list li.is-selected {
  background-color:#eeeeee;
  border-color:blue;
}
.branch-leaf-list li.is-active {
  background-color:@action-primary;
}
.branch-leaf-list li.is-active button{
  color:#ffffff;
}


[data-id="IAMainControlsContainer"] button{
  /*display:block;*/
}
[data-id="IAMainControlsContainer"] [data-ui-type="table"]{
  width:90%;
  margin:0 auto 0 auto;
}

[data-id="DatasourceDiscoveryContainer"] {

}
.btn-control-ds {
  border:0;
  background:transparent;
  font-size:80%;
  color:@btn-control-ds-default-color;
}

/*

    Main Content

*/
.main-content-item-container {
  position:absolute;
  width:100%;
  /*min-height:3000px;*/
  border-left:0px solid #dddddd;
  overflow:scroll;
}
[data-id="IAMainContentContainer"] {
  position:relative;
  background-color:@main-content-bg-color;
}
[data-id="CommonInstanceContainer"] {
  background-color:#ffffff;
  width:0;
  border-color:#dddddd;
  border-width: 0 @drag-tab-width 0 0;
  border-style: solid;
  margin-left:1.5rem;

}
[data-id="CanvasApiContainer"] {
  position:absolute;
  border-style: solid;
  margin-left:1.8rem; /* TODO variable  */

}
[data-id="ExplorerContainer"] {
  width:0;
  background:#ffffff;
  border-color:#dddddd;
  border-width: 0 @drag-tab-width 0 0;
  border-style: solid;
}
[data-id="PreviewInstanceContainer"] {
  z-index: 113;
  position:absolute;
  top:0;
  left:0;
  background-color: #ffffff;
  /*height:1200px;*/
  width:100%;
  display:none;
}
[data-id="PreviewBackgroundBlur"] {
  position:absolute;
  top:2rem;
  background:rgba(223, 230, 200, .43);
  width:100%;
  padding-top:2.6rem;
}
.preview-instance-body-container {
  border-top:3px solid #dddddd;
  padding-top:1rem;
  background:#ffffff;
}
/*

    Discovery

*/
.discovery-schema-list-grid {
  height:400px;
}
.model-schema-editor-source-table-table {
  border:1px solid #dddddd;
  border-radius:4px;
  width:45rem;
  margin:0 auto 0 auto;

}
.model-schema-editor-source-table-table th {
  background-color:darkgreen;
  color:#ffffff;
  font-weight: bold;
}
.model-schema-editor-source-table-table td{
  font-size:125%;
  border:1px solid #eeeeee;

}
.discovery-schema-selected-table-list {
  width:50rem;
  margin:0 auto 0 auto;
}
/*

    Datasource

*/
[data-id="DatasourceEditorInstanceContainer"] {
  border-top:1px solid #eeeeee;
  padding:3rem 0 0 4rem;
}
form[name="DatasourceForm"] {
  max-width:60rem;
}


/*

    Model Editor Tabs

*/
[data-id="MainContentContainer"] {
  width:100%;

}
.instance-title-container {
  width:100%;
  background-color:#f1f1f1;
  border-top:1px solid #dddddd;
  border-bottom:1px solid #dddddd;
  font-size:90%;
  letter-spacing: .1rem;
  font-style:oblique;
  margin:0 auto .5rem auto;
  text-align: center;
  padding:.3rem 0 .3rem 0;
}
.instance-tabs-view-container {
  border-bottom:0px solid #dddddd;
}
.instance-tabs-list {
  padding: 0 0 0.3em 0;
  margin:0;
  line-height: .9;

}
.instance-tabs-list li {
  display:inline;
  padding:.3rem;
  padding-bottom:.7rem;
  border-left:1px solid #f1f1f1;
  border-right:1px solid #666666;
  border-top:1px solid #cccccc;
  border-bottom:0px solid #cccccc;
}
.instance-tabs-list .instance-tab-item-container {
  background-color:#d7eed7;
}
.instance-tabs-list .instance-tab-item-container.is-active {
  background-color:#ffffff;
  border-bottom: 2px solid #fff;
}
.instance-tab-item-button {
  font-size:100%;
  font-family:monospace, sans-serif;
  border:0;
  background:transparent;
}
.instance-tab-close-button {
  font-size:75%;
  border:0;
  background:transparent;
}



/*

    Registration

*/
#RegisterMainContainer {

}
#RegisterMainContainer .center_div, #LoginMainContainer .center_div{
  padding:4rem;
  border:1px solid #eeeeee;
  border-radius:1rem;
  width:50% /* value of your choice which suits your alignment */
}
#RegisterMainContainer form {
  margin:0 3rem 0 3rem;
}
#LoginMainContainer form {
  margin:0 5rem 0 5rem;
}
/*

    Main Nav Context Menu

*/

/*

    models

*/
.name-not-unique {
  background-color: #CFD496;
}
.warning-message {
  line-height: 1.5rem;
  display:block;
  color:darkgreen;
}
.model-property-editor-container {
  max-width:50rem;
}
.default-model-editor-controls-list li{
  display: inline-block;
  transition: 0.4s all ease-out;
  -webkit-transition: 0.4s ease-out all;

}
.default-model-editor-controls-list li.ng-hide-add,
.default-model-editor-controls-list li.ng-hide-remove {
  display: inline-block !important;
}
.default-model-editor-controls-list li.ng-hide-remove, .default-model-editor-controls-list li.ng-hide-add.ng-hide-add-active{
  margin-left: -80px;
  opacity: 0;
}

.default-model-editor-controls-list li.ng-hide-remove.ng-hide-remove-active, .default-model-editor-controls-list li.ng-hide-add{
  margin-left: 0;
  opacity: 1;
}




/*


    Model Instance Editor

*/
.sample-show-hide {
  /*padding:10px;*/
  /*border:1px solid black;*/
  /*background:white;*/
}

.sample-show-hide.ng-hide-add, .sample-show-hide.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.sample-show-hide.ng-hide-add.ng-hide-add-active,
.sample-show-hide.ng-hide-remove {
  opacity:0;
}

.sample-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}



[data-id="ModelEditorInstanceContainer"] {
  max-width:90rem;
  margin-left:2rem;
}
.model-editor-body-container {

  padding:1.3rem;
  border-top:1px solid #cccccc;

}
.model-instance-header {
  display:inline;
}
.is-closed {
  display: none;
}
.is-open {
  display: block;
}
.model-instance-header-btn {
  text-align: left;
  padding-left:4rem;
  border:1px solid #f1f1f1;
  border-radius:.2rem;
  margin:.5rem .4rem .5rem 0;
}
.model-instance-editor-input {
  border:1px solid #dddddd;
  border-radius:.3rem;
  margin:.4rem;
}

.model-instance-details-container [data-state="isOpen"] {
  display:block;
}
.model-instance-details-container [data-state="isClosed"] {
  display:none;
}

/*

    model properties table

*/
.property-list-header{
  margin:0 auto 0 auto;
  width:90%;
}
.btn-model-property-spinner {
  border:0;
}
.btn-new-model-property {
  border:0;
  background:transparent;
  color:blue;
  display:inline-block;
  margin:0 auto 0 6rem;
}
.new-model-name.is-duplicate {
  background:yellow;
}
.new-model-name.is-unique {
  background:green;
}
.model-instance-container.is-open {
  background-color:#fafafa;
  padding-bottom:1.4rem;
  border:1px solid #aaaaaa;
  border-radius:1rem;
}
.model-instance-container [data-ui-type="table"]{
  width:100%;
  /*border-right:1px solid #aaaaaa;*/
  /*border-left:1px solid #aaaaaa;*/
}
.model-instance-property-list {
  margin:0 auto 0 auto;
  width:90%;
}

.model-instance-container .model-instance-property-table-header-row {
  background-color:#d2ebb5;
  color:#444444;
  font-size:110%;
}
.model-instance-property-table-header-row [data-ui-type="cell"] {

  border-left:1px solid #eeeeee;

}

.model-instance-property-list [data-ui-type="cell"] {
  text-align:center;
  padding:0;
  margin:0;
}
.model-instance-property-list .table-header-cell {
  padding-left:1.4rem;
  padding-top:.6rem;
  padding-bottom:.6rem;
  padding-right:.4rem;
}


.props-data-type-cell {
  width:7rem;
  text-align:center;

}
.props-name-cell {
  width:26rem;
  padding-left:2rem;
}
.props-name-cell .btn{
  text-align: left;
  padding-left:2rem;
}
.props-index-cell{
  width:5rem;
  text-align:center;
}
.props-default-value-cell{
  width:18rem;
}
.props-required-cell{
  width:5rem;
  text-align:center;
}

.property-doc-textarea {
  height:2.6rem;
  padding-left:.3rem;
  width:22rem;
}
.model-detail-pocket-container {
  width:90%;
  margin:0 auto 0 auto;
}
.model-details-pocket-editor-container {
  margin:.6rem auto 1rem auto;
  width:90%;
  border-left:1px solid #e1e1e1;
  border-bottom:1px solid #e1e1e1;
  border-top-left-radius:1.3rem;
  border-bottom-left-radius:1.3rem;
  border-bottom-rigtht-radius:1.3rem;
  padding-left:1.1rem;

}
.model-details-pocket-editor-container .tab-box-body {
  background:transparent;
  border-right:1px solid #e1e1e1;
  border-top:1px solid #e1e1e1;
  border-top-right-radius:1.3rem;
  border-bottom-rigtht-radius:1.3rem;
  border-bottom-rigtht-radius:1.3rem;
  padding:.4rem;
}

/*

    Model Properties / Pocket Editor

*/
.pocket-editor-table [data-ui-type="cell"] {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.model-config-tab-list {

}
.model-config-tab-list li {
  display:inline-block;
}

/*

    Pocket Popover

*/
.pocket-popover-container {
  position: relative;
}
.pocket-popover {
  position:absolute;
  padding:1rem;
  border:1px solid #dddddd;
  border-radius:2rem;
  background-color:#efefef;
  z-index: 4000;
}
.popover-header-container {

}
.popover-content-container {

}

/*

    API Canvas View

*/

.canvas-model-container {
  position:absolute;
  border:1px solid #dddddd;
  margin:2rem;
  padding:.4rem;
  background-color:#ffffff;
  border-radius:1rem;
  width:200px;
}
.canvas-model-container .model-header {
  text-align: center;
}
.canvas-model-container .model-header-title {
  padding:0;
  margin:0;
  font-size:110%;
  color:#777777;

}
.ia-drag-view-title-container {
  position:absolute;
  top:0;
  left:0;
  padding:0;
  margin:0;
  background:#000000;
  width:100%;
}
.ia-drag-view-title-container .title{
  color:#ffffff;
  font-size:75%;
}
.canvas-footer {
  clear:both;
}
.model-connection-point {
  width:20px;
  height:20px;
  background-color:#ffffff;
  border:2px solid #dddddd;
  border-radius:.7rem;
  position:relative;
  margin-left:-10px;
  height:3rem;
  /*position:absolute;*/
  /*bottom:0;*/
  /*right:0;*/
}
.model-body {
  display:none;
}



/*
    Explorer View


*/
.explorer-view-body {
  padding-top:2rem;
}

.explorer-model-list {

}
.explorer-model.is-open {
  display:block;
}
.explorer-model.is-closed {
  display:none;
}
.explorer-model.is-active {
  background:#dddddd;
}
.explorer-model-api-parameters {

}
.explorer-model-api-parameters.is-open {
  display:block;
}
.explorer-model-api-parameters.is-closed {
  display:none;
}

.explorer-model-api-details.is-closed {
  display:none;
}
.explorer-model-api-details.is-open {
  display:block;
  margin-left:2.5rem;
  width:90%;
}
.explorer-model-list button.btn-explorer-model-main {
  border:0;
}
.explorer-model-list button.btn-explorer-model-main,  .explorer-model-list button.explorer-endpoint-title{
  text-align: left;
  padding:0;
  margin:0;
  padding-left:2rem;
}
.btn-explorer-property-toggle {
  border:0;
  background:transparent;
  color:blue;
  text-decoration: underline;
}
.explorer-endpoint-title {
  background:#ffffff;
  padding-left:1rem;
  color:blue;
  font-size:110%;

}
.btn-explorer-model-main {
  font-size:130%;
}
.btn-explorer-model-main.is-active {
  background:@action-primary;
  color:#ffffff;
}
.explorer-api-container {
  padding-left:2rem;
}
.explorer-api-endpoint-summary-table {
  width:90%;
  margin-left:3rem;
  background-color:#ffffff;
}
.explorer-api-endpoint-httpmethod-cell {
  width:8rem;
  padding:.5rem 0 .5rem 1.4rem;
}
.explorer-item-form-layout {
  width:100rem;
}
.explorer-api-detail-item {

  border-bottom:1px solid #aaaaaa;
  padding:0;
  margin:0;
}
.explorer-api-method {
  display:inline-block;
  width:6rem;
  font-size:80%;
  padding:.6rem;
  color:#444444;
}

.explorer-api-method-POST {
  background-color:#cccccc;
}
.explorer-api-method-GET {
  background-color:#aaaaaa;
}
.explorer-api-method-PUT {
  background-color:#eeeeee;
}
.explorer-api-method-DELETE {
  background-color:#bbbbbb;
}
.explorer-parameters-container {
  border:1px solid #dddddd;
  border-radius:1rem;
  padding:.6rem;
}
.explorer-endpoint-form {
  padding:4rem;
  width:400px;
}
.explorer-endpoint-summary-text {
  font-size:75%;
  color:#333333;
  margin:.2rem 1rem .2rem 1rem;
  display:inline-block;
}
.explorer-parameter-item-parameter-list {
  border:1px solid #888888;
  margin:1rem;
  border-radius:2rem;
  padding:1rem;

}
.explorer-endpoint-form label.is-required {
  color:red;
}
.explorer-api-textarea {
  margin-top: 8%;
  height: 75%;
  border: 1px solid #cccccc;
  width:400px;
}
.btn-explorer-api-submit {
  display:block;
}


/*

    FunDoo Rating Demo
    [marked for deletion]
*/
.rating{
  color: #a9a9a9;
  margin: 0;
  padding: 0;
}

ul.rating {
  display: inline-block;
}

.rating li {
  list-style-type: none;
  display: inline-block;
  padding: 1px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.rating .filled {
  color: #21568b;
}

#CoordinateInstrumentationContainer {
  display:none;
  position:absolute;
  top:0;
  left:350px;
  border:1px solid grey;
  height:40px;
  width:400px;
  background:transparent;
  z-index:3040;
  color:#ffffff;
}