@charset "UTF-8";

body {
  color : #444444;
}

.container {
  width  : 1190px;
  margin : 0 auto;
}

.container h1 {
  font-size : 170%;
  margin    : 20px 0;
}

.tabMenu {
  margin : 0 0 0 5px;
  height : 40px;
}

.tabMenu li {
  margin : 0 1px 0 0;
  float  : left;
}

.tabMenu li a {
  background      : #cccccc;
  color           : #fff;
  text-decoration : none;
  display         : block;
  padding         : 5px 10px;
  font-size       : 120%;
}

.tabMenu li a:hover {
  color           : #fff;
  background      : #999;
  text-decoration : none;
}

.tabMenu li.selected a {
  background      : #999;
  color           : #fff;
  text-decoration : none;
}

.searchBox {
/*  clear                 : both;*/
  background            : #efefef;
  border                : 2px solid #dddddd;
  border-radius         : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius    : 8px;
  padding               : 15px;
}

.searchBoxInbox {
  background    : #efefef;
  border        : 2px solid #dddddd;
  border-radius : 8px;
  padding       : 15px 120px;
  margin        : 0 0 15px 0;
}

.container input {
  padding               : 10px 5px;
  -webkit-border-radius : 3px;
  -moz-border-radius    : 3px;
  border-radius         : 3px;
  border                : solid 1px #ccc;
}

input.keyInput {
  margin : 0 30px 0 15px;
  width  : 350px;
}

.searchBoxInbox table td,
.searchBoxInbox table th {
  padding        : 10px 0;
  vertical-align : middle;
}

.subSearch {
  margin : 0 0 0 140px;
}

.moreOptions {
  margin : 20px 0 0 0;
}

.options {
  margin  : 20px 0 20px 0;
  display : none;
}

.options .parentOptions {
  margin : 0 0 10px 0;
}

.options .optionParent {
  margin : 0 0 0 20px;
}

.options .optionSub {
  float : right;
}

.options img {
  width: 16px;
  height: 16px;
}

.options .optionSubParent {
  overflow: hidden;
}

.options .optionSubRight {
  float: right;
  width: 800px;
}

.options .header {
  font-weight: bold;;
}

.options .optionSub label {
  margin-left : 10px;
}

.btns {
  text-align : center;
  margin     : 15px 0 15px 0;
}

.btns button {
  font-size             : 1.4em;
  padding               : 10px 30px;
  width                 : 200px;
  background-color      : #5896ee;
  color                 : #fff;
  border-style          : none;
  -webkit-border-radius : 5px;
  -moz-border-radius    : 5px;
  border-radius         : 5px;
  margin                : 0 10px;
  cursor                : pointer;
}

.btns button.disabled {
  background-color : #6a717b;
  cursor           : not-allowed;
}

.btns button.reset {
  background-color : #cccccc;
}

.sub {
  text-align : center;
  margin     : 30px 0;
}

.sub select {
  margin     : 0 20px 0 5px;
  border     : solid 1px #ccc;
  background : #fff;
}

.result {
  clear                 : both;
  border                : 2px solid #dddddd;
  border-radius         : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius    : 8px;
  padding               : 15px;
  margin                : 20px 0 20px 0;
  position              : relative;
  min-height            : 800px;
}

.result.rawSql {
  min-height : auto;
}

.result .info {
  float : left;
  width : 60%;
}

.result .info span {
  margin-right: 20px;
}

.result .info .tableName {
  font-size: 1.1rem;
  font-weight: bold;
}

.result .info button {
  margin-top: .5rem;
  border: 1px solid #777;
  height: 2rem;
}

.result .links {
  float      : right;
  width      : 40%;
  text-align : right;
}

.result .links a {
  margin-left : 20px;
}

.result .hidden-cols {
  clear: both;
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
  height: 68px;
  overflow-y: hidden;
}

.result .hidden-cols .hidden-cols-label {
  min-width: 135px;
}

.result .hidden-cols .hidden-cols-label .reset-cols {
  margin-top: .5rem;
  border: 1px solid #777;
  height: 2rem;
}

.result .hidden-cols .table_column_selector_buttons {
  display: inline-flex;
  flex-wrap: wrap;
}

.result .hidden-cols .table_column_selector_buttons span {
  position: relative;
  margin: 3px 0;
  border: 1px solid #777;
  border-radius: 15px;
  padding: 0 8px 0 24px;
  font-size: 0.9rem;
  cursor: pointer;
}

.result .hidden-cols .table_column_selector_buttons span:not(:last-child) {
  margin-right: 0.5rem;
}

.result .hidden-cols .table_column_selector_buttons span:before {
  content: "＋";
  position: absolute;
  left: 7px;
  font-weight: bold;
}

.result .hidden-cols-resize {
  height: 5px;
  margin-top: 7px;
  margin-bottom: 10px;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  cursor: grab;
}
.result .hidden-cols-resize div {
  margin: 1px auto;
  height: 1px;
  width: 16px;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

.tableWrap {
  overflow-x : scroll;
  width      : 100%;
  max-height : 690px;
}

.rawSql .tableWrap {
  overflow-x : scroll;
  width      : 100%;
}

.tableWrap table {
  border-collapse: separate;
  border: none;
}

.tableWrap table thead tr th, .tableWrap table thead tr td {
  top: 0;
  position: sticky;
  background-color: #fff;
  border: 1px solid #ccc;
  border-left: none;
}

.tableWrap table thead tr th:nth-child(1), .tableWrap table thead tr td:nth-child(1) {
  border-left: 1px solid #ccc;
}

.tableWrap table tbody tr td {
  border: 1px solid #ccc;
  border-top : none;
  border-left: none;
}

.tableWrap table tbody tr td:nth-child(1) {
  border-left: 1px solid #ccc;
}

.tableWrap table tbody tr:nth-child(odd) td { /* 奇数番目の指定*/
  background-color : #f2f2f2;
}

.resultSelectorShade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000033;
  z-index: 100;
}

.resultSelector {
  background: #efefef;
  margin: 0 1%;
  padding: 15px;
  border: 2px solid #dddddd;
  border-radius: 3px;
  position: absolute;
  top: 10px;
  left: 0;
  box-sizing: border-box;
  width: 98%;
  z-index: 101;
}

.resultSelector .satelite .sateliteName {
  margin: 0;
  font-size: 1.0rem;
}

.resultSelector li {
  float       : left;
  margin      : 1px;
  width       : 280px;
}

.resultSelector li a {
  background      : #cccccc;
  color           : #333;
  text-decoration : none;
  display         : block;
  padding         : 5px 10px;
  height          : 60px;
}

.resultSelector li a:hover,
.resultSelector li.selected a {
  color           : #fff;
  background      : #999;
  text-decoration : none;
}

.disabled {
  color : #cccccc !important;
}

.disabled input {
  background : #cccccc;
}

.sqlViewBox,
.processingBox {
  position              : absolute;
  top                   : -1000px;
  left                  : -1000px;
  margin                : auto;
  width                 : 400px;
  background            : #fff;
  border                : 2px solid #dddddd;
  border-radius         : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius    : 8px;
  padding               : 0;
  z-index               : 100;
  display               : none;
}

.processingBox p {
  margin      : 20px;
  font-weight : bold;
}

.sqlViewBox h2 {
  background : #dddddd;
  font-size  : 100%;
  color      : #fff;
  padding    : 5px;
  margin     : 0 0 15px 0;
}

.sqlViewBox .sql {
  margin     : 10px 10px;
  height     : 400px;
  overflow-y : scroll;
}

#overlay {
  position   : fixed;
  top        : 0;
  left       : 0;
  height     : 100%;
  width      : 100%;
  background : #000;
  opacity    : 0.5;
  z-index    : 1;
  display    : none;
}

.display,
#overlay.display {
  display : block;
}

.errors {
  background            : #dd6e79;
  border                : 2px solid #dddddd;
  border-radius         : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius    : 8px;
  padding               : 10px 10px 5px 10px;
  color                 : #fff;
  margin                : 0 0 20px 0;
}

.errors li {
  list-style-type : disc;
  margin          : 0 0 5px 15px;
}

.error {
  background : #dd6e79 !important;
}

label.error {
  padding : 5px;
}

.examples h2,
.sqlInput h2 {
  font-size : 100%;
  margin    : 0 0 5px 0;
}

.examples {
  float : left;
  width : 490px;
  /*width : 410px;*/
  margin-bottom: 0px;
}

.examples li {
  width : 240px;
  /*width : 200px;*/
  float : left;
}

.examples a {
  color                 : #fff;
  padding               : 5px 5px;
  background            : #cccccc;
  border                : 2px solid #999999;
  border-radius         : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius    : 8px;
  margin                : 1px;
  display               : block;
}

.arrow {
  float  : left;
  width  : 48px;
  margin : 100px 30px 0 30px;
}

.sqlInput {
  float : left;
  width : 539px;
  /*width : 618px;*/
  margin-bottom: 0px;
}

.sqlInput textarea {
  /*height                : 350px;*/
  height                : 320px;
  width                 : 100%;
  border                : 1px solid #999999;
  border-radius         : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius    : 8px;
}

.sqlExamplesTxt {
  display : none;
}

.sqlDescriptionTxt {
  display : none;
}

.desc_syntax {
  float : left;
  width : 100%;
  margin-top: 20px;
  padding-left : 40px;
}
/*
.desc_example {
  float : left;
  margin-top: 10px;
  padding-left : 30px;
}
*/

.thumbnail {
  width: 50px;
  height: 50px;
}

.chkLabel {
  display : inline-block;
  margin-left: 10px;
}

.lnkInfo {
  margin-left: 3px;
  vertical-align: middle;
  filter: grayscale(80%);
}

.noCursorLbl {
  cursor: default;
}