body {
  padding-top: 50px;
  padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
  padding-left: 15px;
  padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
  white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select {
  max-width: 280px;
}

/* Set the footer to the bottom of the page */
footer {
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  background-color: #004680;
  color: #ffffff;
}

/* --- Custom Hover Styles --- */
.dropArea {
  cursor: pointer;
  /*display: inline-block;*/
  border: 2px dashed #a8a8a8;
  border-radius: 3px;
}

.add-text {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-align: center;
  width: 100px;
  left: 40%;
  position: relative;
}

  .add-text:hover {
    color: black;
  }


/* Custom Navbar Colors to override Bootstrap defaults */
/* From: http://twbscolor.smarchal.com/ */
.navbar-default {
  background-color: #004680;
  border-color: #0080c0;
  background-image: none;
}

  .navbar-default .navbar-brand {
    color: #ffffff;
  }

    .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
      color: #dbdbdb;
    }

  .navbar-default .navbar-text {
    color: #ffffff;
  }

  .navbar-default .navbar-nav > li > a {
    color: #ffffff;
  }

    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
      color: #dbdbdb;
    }

  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #dbdbdb;
    background-color: #0080c0;
  }

  .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #dbdbdb;
    background-color: #0080c0;
  }

  .navbar-default .navbar-toggle {
    border-color: #0080c0;
  }

    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
      background-color: #0080c0;
    }

    .navbar-default .navbar-toggle .icon-bar {
      background-color: #ffffff;
    }

  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border-color: #ffffff;
  }

  .navbar-default .navbar-link {
    color: #ffffff;
  }

    .navbar-default .navbar-link:hover {
      color: #dbdbdb;
    }

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
      color: #dbdbdb;
    }

  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #dbdbdb;
    background-color: #0080c0;
  }
}

@media(min-width:600px) and (max-width:991px){
  #formExport .col-md-4{
    float:left;
    width: 33.33333333%;
  }

  #formExport .col-md-2{
    float:left;
    width: 33.666666667%;
    text-align: right;
    padding-top:7px;
  }
}

.center-table {
  margin-left: auto;
  margin-right: auto;
}

.field-validation-error{
  color: #ff3333;
}

.validation-summary-errors {
  font-weight: bold;
  color: #ff3333;
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 2em;
}

.input-group {
  max-width: 280px;
}

.ui-progressbar.subprogressbar {
  height: 0.8em;
  margin-top: 2px;
}

  .ui-progressbar.subprogressbar .ui-progressbar-value {
    margin: 0px;
    border: 0px;
    background: #308ce7;
  }

#uploader .plupload_view_list div.plupload_file_size {
  right: 18px;
}

#uploader .plupload_view_list div.plupload_file_status {
  right: 75px;
}

#uploader .plupload_view_list td.plupload_file_status {
  text-align: center;
  width: 65px;
}

#uploader .plupload_view_list div.plupload_file_name {
  margin-right: 135px;
}

/* Source file List */
#importResult table th{
  text-align: center;
}

#importResult table tr th:first-child {
  width: 40px;
}

#importResult table tr td:first-child {
  text-align:center;
}

#importResult table tr th:nth-child(2) {
  width: 200px;
}

#importResult table tr td:nth-child(2) {
  text-align:center;
}


#importResult td.logLevel0 {
  color: red;
}

#importResult tr td:nth-child(3){
  word-break:break-all;
}

#importResult td.logLevel1 {
  color: yellow;
}

#importResult td.logLevel2 {
  color: #308ce7;
}

#importResult div.modal-body{
  max-height: 800px;
  overflow-y: auto;
  margin-top:20px;
  padding:0px 10px;
}

#importResult table{
  border-collapse: separate;
}

#importResult table thead th{
  background-color:white;
  position: -webkit-sticky;
  position: sticky;
  top:0;
  z-index: 1;
}

#importResult table thead tr{
  position: -webkit-sticky;
  position: sticky;
  top:0;
  z-index: 1;
}

#importResult table tbody td{
  z-index:0;
}

.pre-scrollable {
  min-height: 50px;
}

.panel-heading h2 a {
  color: #777;
}

  .panel-heading h2 a:hover {
    color: #337ab7;
    text-decoration: none;
  }

.table > tbody > tr > td {
  vertical-align: middle;
}

.table > tbody > tr > th {
  vertical-align: middle;
}

table.fixedwidth {
  table-layout: fixed;
}

td.breakword {
  word-wrap: break-word;
}

td.comment {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-group .form-control.datepicker {
  z-index: auto;
}

.pagination > .active > a {
  z-index: auto;
}

.pagination > li > a {
  width: 42px;
  padding: 6px 0px;
  text-align: center;
}

table.tqt-table {
  position: relative;
  clear: both;
}

  table.tqt-table pre {
    height: 80px;
    margin: 0px;
  }

  table.tqt-table .rslt-td {
    position: relative;
  }

.rslt-td .glyphicon-ok-circle {
  font-size: 20px;
  color: green;
  position: absolute;
  top: 5px;
  right: 5px;
}

.rslt-td img {
  position: absolute;
  left: -31px;
  top: 4px;
  opacity:0.5;
}

table.tqt-table .fixword-td {
  position: relative;
}

.fixword-td img {
  position: absolute;
  left: -31px;
  top: 4px;
  opacity:0.5;
}

table.tqt-table tr.otherpj {
  background-color: #ccc;
}

  table.tqt-table tr.otherpj pre {
    background-color: #ddd;
  }

table.tqt-table pre.trans {
  background-color: #CEE3F6;
}

  table.tqt-table pre.trans:hover {
    background-color: #c8d6e2;
    cursor: pointer;
  }

  table.tqt-table pre.trans:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }

table.tqt-table pre.fixedword, table.tqt-table pre.itpdesc {
  display: none;
}

#preITPDescInShorten{
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 510px;
}

table.tqt-table textarea.form-control {
  height: 80px;
  resize: none;
  z-index: auto;
}

table.tqt-table .btn {
  margin-top: 5px;
}

#updateTrans textarea {
  width: 100%;
  height: 120px;
  white-space: pre;
  word-wrap: normal;
}

h3 .badge {
  position: relative;
  top: -7px;
}

#divSetMultiTransOK input {
  position: relative;
  top: 2px;
}

#divSetMultiTransOK .checkbox {
  margin: 0 0 15px 0;
}

h3 .title-icon {
  font-size: 48px;
  position: relative;
  top: 8px;
  margin-right: 10px;
}

h3 .rev-title-icon {
  font-size: 48px;
  position: relative;
  top: 8px;
  margin-right: 10px;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

div#confirmed .btn-noerror {
  display: none;
}

div#wait4confirm .glyphicon-ok-circle {
  display: none;
}

div.verificationbox div.modal-dialog {
  width: auto;
  margin-left: 30px;
  margin-right: 30px;
}

div.screen {
  margin-bottom: 15px;
  flex: 0 0 auto;
}

  div.screen img {
    max-height: 450px;
  }

div.verificationbox .form-inline {
  margin-bottom: 15px;
}

  div.verificationbox .form-inline .form-group {
    margin-right: 20px;
  }

    div.verificationbox .form-inline .form-group .form-control-static {
      position: relative;
      top: 1px;
    }

.verificationbox .form-horizontal .checkbox,
.checkbox2 {
  padding-top: 0px;
}

.verificationbox .form-horizontal .checkbox2 label{
  font-weight:normal;
  cursor:pointer;
}

  .verificationbox .form-horizontal .checkbox:hover {
    background-color: #bbddbb;
  }

  .verificationbox .form-horizontal .checkbox#cbxSpellCheckDiv:hover,
  .verificationbox .form-horizontal .checkbox#cbxMostShortenDiv:hover {
    background-color: transparent;
  }

  .verificationbox .form-horizontal .checkbox label
  , .checkbox2 label {
    min-height: 27px;
  }

.shortcut {
  color: #ff3333;
}

.veri-left {
  height: 700px;
  display: flex;
  flex-direction: column;
}

.veri-history {
  overflow-y: scroll;
  overflow-x: hidden;
}

  .veri-history table {
    margin-right: 15px;
  }

.veri-hint {
  float: right;
  font-size: 16px;
  margin-right: 30px;
  margin-top: 9px;
  color: #d86330;
}

#veri-hint-dialog label {
  display: table;
}

#veri-hint-dialog .modal-body > p {
  margin-left: 10px;
  font-size: 16px;
}

  #veri-hint-dialog .modal-body > p i.fa-circle {
    font-size: 10px;
    vertical-align: middle;
    margin-right: 15px;
  }

#veri-hint-dialog .modal-body ul {
  line-height: 2em;
}

.padding {
  display: table-cell;
}

.keyboard {
  display: table-cell;
  width: 30px;
  height: 30px;
  border: 1px solid #666;
  font-size: 14px;
  box-shadow: rgba(0,0,0,0.2) 2px 2px;
  border-radius: 3px 3px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  top: -5px;
}

  .keyboard.small {
    font-size: 12px;
  }

.inline-keyboard {
  display: inline-block;
  height: 20px;
  min-width: 20px;
  text-align: center;
  padding: 0px 5px;
  border: 1px solid #666;
  border-radius: 3px 3px;
  box-shadow: rgba(0,0,0,0.2) 2px 2px;
  margin: 0px 5px;
  line-height: 1.4em;
}

.inline-keyboard i.fa-level-down{
  position:relative;
  left:-0.1em;
}

.trans-status {
  font-size: 0.9em;
}

.tasktable .fa-angle-right {
  margin: 0 15px;
  position: relative;
  top: -2px;
}

.tasktable h4 img {
  position: relative;
  top: -2px;
}

.form-inline .form-group.search-cond {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

  .form-inline .form-group.search-cond input {
    width: 200px;
  }

#chars-result {
  font-size: 1.4em;
  display:inline-block;
  position:relative;
}

  #chars-result .label {
    font-size: 0.4em;
    position: absolute;
    top: 0.4em;
    left: calc(100% + 7px);
  }

#lines-result {
  font-size: 1.7em;
}

  #lines-result .label {
    font-size: 0.4em;
    position: relative;
    top: -1.2em;
  }


.width-result-tbl th:first-child{
  width:50px;
}

.width-result-tbl td{
  white-space:nowrap;
}

.width-result-tbl span.label{
  margin-right:10px;
}

.width-result-tbl i.width-checking{
  margin-left:10px;
}

.width-result-tbl img.shortenImg{
  max-width: calc(100% - 80px);
}

#verification-result .checkbox{
  margin-top:5px;
}
#verification-result .checkbox label.btn.focus{
  outline:8px auto Navy;
}

#verification-result .checkbox:last-child label{
  text-wrap:wrap;
  line-height:11px;
}

.veri-header{
  display:table-cell;
  width:95px;
}

.veri-header-sm{
  display:table-cell;
  width:170px;
}

.veri-header .btn, .veri-header-sm .btn{
  padding-top:6px;
  width:80px;
  height:32px;
}

.veri-header .btn.active, .veri-header-sm .btn.active{
  background-color:#419641;
  border-color:#3e8f3e;
  color:#fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
}

.veri-item{
  display:table-cell;
  vertical-align: middle;
}

@font-face {
  font-family: 'Tfont_T1S';
  src: url("../fonts/Tfont_T1S.otf");
}

@font-face {
  font-family: 'Tfont_T2S';
  src: url("../fonts/Tfont_T2S.otf");
}

@font-face {
  font-family: 'Tfont_T3S';
  src: url("../fonts/Tfont_T3S.otf");
}

@font-face {
  font-family: 'THSarabun-Bold';
  src: url("../fonts/THSarabun-Bold.ttf");
}

@font-face {
  font-family: 'Lfont1502_L1S';
  src: url("../fonts/Lfont1502_L1S.otf");
}

.twitter-typeahead,
.typeahead,
.tt-query,
.tt-hint {
  width: 100%;
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 100%;
  max-height: 140px;
  overflow-y: auto;
  margin: 2px 0;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  white-space:nowrap;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2);
     -moz-box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2);
          box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  height: 26px;
  white-space:pre;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 0;
}

/* styles for difference compare. */
.cmptbl{
  table-layout:fixed;
}

.cmptbl i{
  color:red;
  font-style:normal;
}

.cmptbl div{
  height:1.4em;
  white-space: nowrap;
  display:table-row;
}

.cmptbl .diff{
  background-color: #fee;
}

.cmptbl .orphane{
  background-color: #fee;
  color:red;
}

.cmptbl .none {
  background-image: url(../Media/img/bgmid.gif);
  background-repeat: repeat;
}

.table.cmptbl td{
  overflow-x:auto;
  vertical-align:top;
}

span.red{
  color: mediumvioletred;
}

div#tqtdetails{
  margin-top:8px;
}

div.chklabel{
  position: absolute;
  right: 20px;
  top: -20px;
  padding-left: 3px;
  padding-right: 3px;
  color: white;
  background-color: red;
}

div.chkoklabel{
  color: white;
  background-color: green;
}

div#filecontainer{
  position:relative;
  width:600px;
  height:60px;
}

div.filecontainer{
  position:relative;
  width:600px;
  height:60px;
}

#SearchingExcel, #vehicleInfo, #supplierList, #msgList{
  position:absolute;
  max-width:600px;
  width:600px;
  height:60px;
  top:0px;
  left:0px;
  z-index:2;
  opacity:0;
}

#btnGetTemplate{
  margin-left:2em;
}

#project-list{
  margin-top:10px;
}

#vehicle-list{
  margin-top:10px;
}

#vehicle-list td{
  word-break:break-all;
}

.modal-footer{
  padding: 5px 10px 5px 0px;
}

.modal-footer p{
  margin:0;
}

.old-warning{
  position:absolute;
  left: -18px;
  top:-5px;
}

span#zipfile div{
  max-width:350px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}


.kubunNoSelect ul.dropdown-menu.inner span.text{
  width:400px;
}

.kubunNoSelect ul.dropdown-menu.inner span.text small{
  display:inline-block;
  width:250px;
  float:right;
  overflow: hidden;
  text-overflow:ellipsis;
  padding-left: 0em;
}

.kubunNoSelect ul.dropdown-menu.inner span.text div.marquee {
  display:inline-block;
  width:250px;
  float:right;
  position:relative;
  overflow: hidden;
  height: 1em;
}

.kubunNoSelect ul.dropdown-menu.inner span.text div.marquee small {
  width:auto;
  position:absolute;
  animation-name: marquee;
  animation-timing-function: linear;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes marquee {
  100% {transform: translate(-100%);}
}

td.screenId {
  color:#337ab7;
  cursor:pointer;
}

.change-table{
  table-layout:fixed;
  margin-top:50px;
}

.change-table > tbody > tr > th,
.change-table > tbody > tr > td
{
  padding:4px;
  border-color: #d0d0d0;
}

.change-table > tbody > tr > th:nth-child(5),
.change-table > tbody > tr > td:nth-child(5)
{
  text-align:center;
  white-space: pre;
  text-overflow: ellipsis;
  overflow: hidden;
}

.change-table > tbody > tr > td:nth-child(4)
{
  white-space: pre-line;
}

.change-table .change-div
{
  max-height:200px;
  overflow-y:auto;
}

.change-table table{
  table-layout:fixed;
  margin-bottom:10px;
}

  .change-table table col:last-child {
    width:200px;
  }

.change-table table tr:first-child td{
  border-top: none;
}

.change-table table tr:last-child td:last-child{
  text-align: center;
  white-space:pre;
  text-overflow: ellipsis;
  overflow: hidden;
}

.change-table table.change-table-inner tr td{
  padding:0px;
  vertical-align:top;
}

table.change-detail-title > tbody > tr > th,
table.change-detail-title > tbody > tr > td
{
  white-space:pre;
  border-top:none;
}

.change-detail-table td:first-child{
  white-space:pre;
}

.change-detail-table td:nth-child(3){
  white-space:pre-line;
}

.change-detail-table th:nth-child(4),
.change-detail-table th:nth-child(5),
.change-detail-table td:nth-child(4),
.change-detail-table td:nth-child(5)
{
  white-space:pre;
  text-align:center;
}

.message{
  white-space:pre;
  text-align:center;
}

.search-table{
  table-layout:fixed;
  margin-bottom:5px;
}

.search-table label{
  margin-bottom:0px;
}

.search-table input[type="checkbox"]{
  margin-right:5px;
}

.search-table .checkbox{
  padding-top: 2px;
}

.search-table td:first-child,
.search-table td:nth-child(4)
{
  text-align:right;
}

table.search-table > tbody > tr > td
{
  border-top:none;
}

.search-footer .form-group{
  height:15px;
}

.search-result-table{
  table-layout:fixed;
  margin-right:10px;
}

.search-result-table .scroll-header th{
  top:50px;
  position: sticky;
  background-color:whitesmoke;
}

.search-result-table th,
.search-result-table td
{
  text-align:center;
  white-space: pre-wrap;
}

.search-result-table > thead > tr > th{
  border-bottom-width: 1px;
}

.search-result-table td:nth-child(38),
.search-result-table td:nth-child(41){
  direction: rtl;
}

.search-result-table td:nth-child(7){
  word-break:break-all;
}

.search-result-table .scroll-header{
  display:none;
}

.search-result .pagination{
  position:sticky;
  float:right;
  right: 50px;
}

@media (max-width: 920px) {
    #toppager .pagination {
        margin-top: 55px;
    }
}

.result-buttons {
    display: none;
    width: 750px;
    position: sticky;
    left: calc(50% - 455px);
    margin-top: 40px;
}

@media (max-width: 1630px) {
  .result-buttons {
    margin-top:70px;
  }
  #botpager .pagination {
      margin-top:0px;
  }
}

#search-result .popover.right{
  top:-32px!important;
}

#search-result .popover.right > .arrow {
  margin-top:-30px;
}

.search-result-table tr.loading td{
  text-align:left;
}

.search-result-table i.fa-spinner{
  position:sticky;
  left: calc(50% - 30px);
}

.search-result-table thead tr:first-child th:first-child, 
.search-result-table thead tr:last-child th:first-child, 
.search-result-table tbody td:first-child{
  cursor:pointer;
}

.search-result-table td.notTarget {
  background: #404040;
}

.search-result-table td.finished {
  background: transparent;
}

.search-result-table td.pending {
  background: #ff66cc;
}

.search-result-table td.notTrans {
  background: #ffff00;
}

.search-result-table td:nth-child(9) {
    word-break:break-all;
}

.schedule-table{
  table-layout:fixed;
}

.schedule-table tr td{
  white-space: pre-wrap;
}

.schedule-table.itp-table td:nth-child(7):hover,
.schedule-table.itp-table td:nth-child(8):hover
{
  background-color: #c8d6e2;
  cursor: pointer;
}

.schedule-table.itp-table td:nth-child(7):active,
.schedule-table.itp-table td:nth-child(8):active
{
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.breadcrumb.search-crumb,
.panel.search-panel
{
  width:1180px;
  position:sticky;
  left: calc(50% - 590px);
  z-index:3;
}
.search-table td{
    padding:5px;
}

.table.current-projects th {
    text-align: center;
}

.table.current-projects td:first-child,
.table.current-projects td:nth-child(2){
  white-space:pre;
  text-align: center;
}

.label-danger2{
  background-color:#d8704f;
}

.icon-tooltip,
.icon-tooltip:hover{
  background-color: #fff0;
  color: #666;
}

.icon-tooltip:focus{
  color: #AAA;
}

.fa-calendar-times-o {
  color: #ff4b00;
}

.fa-calendar-minus-o {
  color: #f6aa00;
}

.fa-calendar-check-o {
  color: #00b06b;
}

.fa-sort,
.fa-sort-desc,
.fa-sort-asc {
  margin-left: 5px;
}

.sort-btn{
  background-color: #fff0;
  border:solid #fff0;
}

.schedule-table td.start-delayed{
  color:#fff;
  background-color:#f6aa00;
}

.schedule-table td.completion-delayed{
  color:#fff;
  background-color:#ff7c80;
}

span.highlight{
  background-color: #FFFF00; 
  padding:1px; 
  border-bottom: solid;
  border-bottom-color: #ffCC00; 
  border-width:2px;
}