/* =========================== */
/* css override for client app */
/* =========================== */

/* navbar - menu bar */
.navbar-brand
{
   float: left;
   height: 50px;
   padding: 15px 15px;
   font-size: 18px;
   line-height: 20px;
   margin-top: -8px;   /* shifting image a bit... */
}

/* overrides "width" of content area, making it wider from 1170 */
@media (min-width: 1200px) {
  .container {
    width: 1400px;
  }
}

/*
   for fields that require user's attention!!
*/
.vf-attention
{
   color: red;
}

.vf-background-attention
{
   background-color: pink;
}

.vf-background-offwhite
{
   background-color: #fdfdfd;
}

.vf-background-bright-green
{
   background-color: #7fffd4;
}

.vf-background-even-row
{
   background-color: #eaf3fc;
}

.vf-background-odd-row
{
   background-color: #ffffff;
}

/* ****************************************************************************
 *  GRID-related classes
 * ****************************************************************************/

.vf-grid
{
   /* grid widget shows horizonal scroll bar randomly when page is changed.
      this is caused by very slight increase in width upon grid refresh.
      this is somehow prevented when the size of grid is shrunk just a bit...
   */
   width: 99%;
}

.vf-grid-header
{
   font-size: 16px;
   color: white;
   white-space: nowrap;
   background-color: #2f6d8c;
}

.vf-grid-header a
{
   color: white;
}

.vf-grid table > tbody > tr:nth-of-type(odd)
{
    background-color: #eaf3fc;
}

.grid-view td
{
   white-space: normal;
}

vf-grid-issue
{
   /* grid widget shows horizonal scroll bar randomly when page is changed.
      this is caused by very slight increase in width upon grid refresh.
      this is somehow prevented when the size of grid is shrunk just a bit...
   */
   width: 99%;
}

.vf-grid-issue-header
{
   /* for risk issues */
   font-size: 16px;
   color: white;
   white-space: nowrap;
   background-color: #ff6347;
}

.vf-grid-issue-header2
{
   /* for information issues */
   font-size: 16px;
   color: white;
   white-space: nowrap;
   background-color: #f8d065;
}

.vf-grid-issue table > tbody > tr
{
    background-color: white;
}

/* ****************************************************************************
 *  APPSETTING-related classes
 * ****************************************************************************/

.vf-table-app-setting tbody > tr:nth-of-type(odd){
    background-color: #eaf3fc;
}

/* ****************************************************************************
 *  Panels
 * ****************************************************************************/

.vf-panel {
   border-color: #006B8C;
}

.vf-panel .panel-heading {
   color: #E4FAFF;
   background-color: #2f6d8c;
   border-color: #006B8C;
}

.vf-panel .panel-body {
   padding: 0;
}

/* ****************************************************************************
 *  TAB-related classes
 * ****************************************************************************/

/* ===== ABOVE ===== */

/* INACTIVE tab */
.tabs-above > .nav-tabs > li
{
   background: white;
   color: #31708f;
   font-weight: bold;
   font-size: 14px;
}

.tabs-above > .nav-tabs > li > a:hover
{
   background: white;
   color: #31708f;
   font-weight: bold;
   font-size: 14px;
}

/* ACTIVE tab */
.tabs-above > .nav-tabs > .active > a,
.tabs-above > .nav-tabs > li.active > a:hover,
.tabs-above > .nav-tabs > li.active > a:focus
{
   background: #31708f;
   color: white;
   font-weight: bold;
   font-size: 14px;
}

/* ===== LEFT ===== */

.tabs-left > .nav-tabs > li
{
   background: white;
   color: #31708f;
   font-weight: bold;
   font-size: 14px;
}

.tabs-left > .nav-tabs > li > a:hover
{
   background: white;
   color: #31708f;
   font-weight: bold;
   font-size: 14px;
}

/* ACTIVE tab */
.tabs-left > .nav-tabs > .active > a,
.tabs-left > .nav-tabs > li.active > a:hover,
.tabs-left > .nav-tabs > li.active > a:focus
{
   background: #31708f;
   color: white;
   font-weight: bold;
   font-size: 14px;
}


/* CLEAR */

.clear
{
   clear:both;
}

/*
   2019-09-15 - dwada

      this .datepicker style is needed to display calendar widget in modal dialog.
      without this, calender will no display.

      https://stackoverflow.com/questions/17694456/jquery-daterangepicker-not-working-in-modal
*/

.datepicker
{
   z-index: 1100 !important;
}