@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic);

/***************************************************************************************************
  User interface for embedded snippets (dialog and global font setting) 
***************************************************************************************************/

.thegamma *, .thegamma *:before, .thegamma *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.thegamma {
  font-family:'Roboto',verdana,sans-serif;
}

.thegamma-sizer {
  z-index:-99999;
  height:90%;
  background:transparent;
  width:80%;
  position:fixed;
}

.thegamma-dialog {
  display:none;
  opacity:0;
  transition: opacity 400ms linear;
  position:fixed;
  z-index:99999;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.4);
}

.thegamma-dialog-window {
  transition:top 400ms linear;
  top:-500px;
  position:relative;
  overflow:hidden;
  background-color:#fefefe;
  margin:auto;
  border:1px solid #888;
  width:80%;
  height:90%;
  margin-top:5%;
  border-radius:5px;
  border:1px solid rgba(0,0,0,0.2);
  -webkit-box-shadow:5px 5px 15px 0px rgba(0,0,0,0.5);
  -moz-box-shadow:5px 5px 15px 0px rgba(0,0,0,0.5);
  box-shadow:5px 5px 15px 0px rgba(0,0,0,0.5);
  border-style:none;
  background:#f0f0f0;
}

.thegamma-dialog-window .header {
  border-bottom:1px solid #e5e5e5;
  padding:10px 15px 10px 15px;
  font:14pt roboto;
}
.thegamma-dialog-window .header a {
  float:right;
  font:16pt roboto;
  color:black;
  text-decoration:none;
}

.thegamma-dialog-window .body {
  position:relative;
  padding:10px;
}

.thegamma .placeholder {
  text-align:center;
  color:#a0a0a0;
  font-size:15pt;
  background:white;
  padding:100px 20px 100px 20px
}

/***************************************************************************************************
  Live preview for the pivot type provider (embedded inside Monaco editor)
***************************************************************************************************/

.thegamma .monaco-editor .view-zones {
  z-index:1000;
}
.thegamma .pivot-preview {
  font-family:'Roboto',verdana,sans-serif;
  background:#ffffff;
  min-height:200px;
  padding-top:10px;
  border-bottom:solid 3px #F4C300;
  z-index:1000;
}
.thegamma .pivot-preview .table {
  margin-bottom:0px;
}

/** tabs that list the operations applied so far and "+" button **/
.thegamma .pivot-preview ul.tabs {
  padding:0px;
  margin:0px;
  background:white;
  width:100%;
  height:32px;
  font-family:'Roboto',verdana,sans-serif;
  font-size:12pt;  
  border-bottom:solid 3px #F4C300;
}
.thegamma .pivot-preview ul.tabs li {
  list-style-type:none;
  float:left;
  margin:0px 5px 0px 5px;
  background:#f0f0f0;
  text-decoration:none;
  height:32px;
}
.thegamma .pivot-preview ul.tabs li a {
  color:#202020;
  padding:5px 10px 5px 10px;
  cursor:pointer !important;
  display:inline-block;
  height:22px;
}
.thegamma .pivot-preview ul.tabs li.add {
  float:right;
  margin-right:30px;
  background:white;
}
.thegamma .pivot-preview ul.tabs li.add a {
  color:#F4C300;
  background:transparent;
}
.thegamma .pivot-preview ul.tabs li.selected a {
  background:#F4C300;
  color:white;
}

/** drop down menu below the "+" button for adding operations **/
.thegamma .pivot-preview .add-menu {
  position:relative;
  z-index:1100;
}
.thegamma .pivot-preview .add-menu ul {
  position:absolute;
  background:#F4C300;
  top:-3px;
  right:0px;
  margin:0px 35px 0px 0px;
  padding:5px 0px 5px 0px;
  max-height:200px;
  overflow:auto;
}  
.thegamma .pivot-preview .add-menu li {
  margin:0px;
  padding:0px;
  font-size:10pt;
  list-style-type:none;
}
.thegamma .pivot-preview .add-menu li a {
  color:white;
  display:block;
  padding:2px 20px 2px 20px;
}
.thegamma .pivot-preview .add-menu li a:hover, .thegamma .pivot-preview .add-menu li a:active  {
  background:#C49E15;
  text-decoration:none;
}

/** toolbar with commands related to current operation **/
.thegamma .pivot-preview .toolbar {
  font-size:12pt;  
  background:#F4C300;
  color:white;
  height:23px;
  padding:3px 5px 3px 5px;
}
.thegamma .pivot-preview .toolbar span {
  margin:0px 10px 0px 10px;
}
.thegamma .pivot-preview .toolbar a {
  color:white;
}
.thegamma .pivot-preview .toolbar .right {
  margin-right:35px;
  float:right;
}
.thegamma .pivot-preview .toolbar .gfa {
  margin-left:8px;
}
.thegamma .pivot-preview .toolbar .navig .gfa {
  margin:0px 5px 0px 0px;
}
.thegamma .pivot-preview .toolbar input {
  border:solid 0px #C49E15;
  background-color:#FBE697;
  color:#505050;
  font-size:10pt;
  padding:2px 10px 2px 10px;
  position:relative;
  top:-2px;
  margin:0px 0px 0px 10px;
  width:80px;
}
.thegamma .pivot-preview .toolbar select {
  font-family:'Roboto',verdana,sans-serif;
  border:solid 0px #C49E15;
  background-color:#FBE697;
  color:#505050;
  font-size:10pt;
  padding:2px 10px 2px 2px;
  position:relative;
  top:-1px;
  margin:0px 0px 0px 10px;
}
.thegamma .pivot-preview .toolbar input:invalid {
  background:#F9CBA9;
}

/** all links have pointer cursor **/
.thegamma .pivot-preview a {
  cursor:pointer !important;
}

/***************************************************************************************************
  Icons that appear in the pivot preview (FontAwesome inspired)
***************************************************************************************************/

.thegamma .gfa { 
  display: inline-block; 
  width:12px;
  height:12px;
  color:transparent !important;
}
.thegamma .gfa-circle {
  background:url(gfa/cw.png) no-repeat center center;
  background-size:cover;
}
.thegamma .tabs .gfa-plus {  
  background:url(gfa/py.png) no-repeat center center;
  background-size:cover;
}
.thegamma .tabs .gfa-times {
  background:url(gfa/xg.png) no-repeat center center;
  background-size:cover;
}
.thegamma .gfa-times, .thegamma .tabs .selected .gfa-times {
  background:url(gfa/xw.png) no-repeat center center;
  background-size:cover;
}
.thegamma .gfa-plus, .thegamma .tabs .selected .gfa-plus {  
  background:url(gfa/pw.png) no-repeat center center;
  background-size:cover;
}
.thegamma .gfa-chevron-left {
  background:url(gfa/lw.png) no-repeat center center;
  background-size:cover;
}
.thegamma .gfa-chevron-right {
  background:url(gfa/rw.png) no-repeat center center;
  background-size:cover;
}

/***************************************************************************************************
  Error list below the code editor
***************************************************************************************************/

.thegamma .errors {
  padding:5px;
  width:100%;
  font:12pt Roboto;
}
.thegamma .errors ul, .thegamma .errors li {
  list-style:none;
  margin:0px;
  padding:0px;
}
.thegamma .errors li .err {
  background:#D16159;
  color:white;
  padding:2px 5px 2px 5px;
  margin-right:5px;
  font-weight:bold;
}
.thegamma .errors li .loc {
  color:#a0a0a0;
}
.thegamma .errors li {
  color:#303030;
  font-size:10pt;
  margin:2px 0px 2px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/***************************************************************************************************
  Nicer formatting for tables and buttons
***************************************************************************************************/

.thegamma tr {
  background-color:#ffffff;
}
.thegamma tbody tr:nth-child(odd) {
  background-color:#f8f8f8;
}
.thegamma thead tr {
  background:white;
}
.thegamma table {
  width:100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.thegamma td, .thegamma th {
  border-bottom:1px solid #dddddd;
  padding:8px 10px 8px 10px;
  min-width:50px;
}
.thegamma thead th {
  border-bottom:3px solid #dddddd;
}
.thegamma th {
  padding:4px 20px 4px 10px;
  text-align:left;
  font-weight:bold;
}
.thegamma button {
  border-style:solid;
  margin-top:10px;
  border-color:#606060;
  background:#404040;
  color:#e0e0e0;
  padding:10px 30px 10px 30px;
  border-radius:6px;
  cursor:pointer;
}
.thegamma button:hover, .thegamma button:focus {
  border-color:#606060;
  color:#e0e0e0;
  background:#606060;
}
.thegamma button:disabled {
  border-color:#606060 !important;
  color:#e0e0e0 !important;
  background:#606060 !important;
  opacity:0.5;
}

/***************************************************************************************************
  You Draw It visualization
***************************************************************************************************/

.youdraw {
  background:white;
  padding:50px;
}
.youdraw svg{
	overflow: visible;
}
.youdraw .axis{
  opacity:0.5;
}
.youdraw .line{
  fill: none;
}
.youdraw .area{
  fill: transparent;
}