/* =========================== */
/* 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;
}

.vf-icon
{
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: cover;
}

.vf-icon.tow-truck
{
    width: 28px;
    background-image: url(/verisurance/images/icons/vf_tow_truck.png);
}

.error-display-custom
{ 
   color: #ff0000; 
   font-weight: bold; 
   text-align: center; 
   background: #fdf7f7; 
   border-left: 3px solid #eed3d7; 
   padding: 15px 20px;
   margin-top: 10px;
}

.notification-bell-container {
   position: fixed;
   top: 70px;
   right: 20px;
   z-index: 1000;
}

.notification-bell {
   position: relative;
   background-color: #fff;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
   transition: all 0.3s ease;
}

.notification-bell:hover {
   box-shadow: 0 4px 8px rgba(0,0,0,0.3);
   transform: translateY(-2px);
}

.bell-icon {
   font-size: 24px;
   color: #333;
}

.notification-count {
   position: absolute;
   top: -5px;
   right: -5px;
   background-color: #C80512;
   color: white;
   border-radius: 50%;
   width: 22px;
   height: 22px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 12px;
   font-weight: bold;
}

.notification-count.green {
   background-color: #76B947;
}

@keyframes bell-ring {
   0% { transform: rotate(0); }
   10% { transform: rotate(15deg); }
   20% { transform: rotate(-15deg); }
   30% { transform: rotate(15deg); }
   40% { transform: rotate(-15deg); }
   50% { transform: rotate(15deg); }
   60% { transform: rotate(-15deg); }
   70% { transform: rotate(15deg); }
   80% { transform: rotate(-15deg); }
   90% { transform: rotate(15deg); }
   100% { transform: rotate(0); }
}

.bell-ringing {
   animation: bell-ring 1s ease-in-out;
   animation-iteration-count: 1;
}

.notification-popup {
   position: absolute;
   top: 60px;
   right: 0;
   width: 300px;
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   z-index: 1001;
   display: none;
   overflow: hidden;
}

.notification-header {
   background-color: #0069ca;
   color: white;
   padding: 10px 15px;
   font-weight: bold;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.notification-tabs {
   display: flex;
   border-bottom: 1px solid #eee;
}

.notification-tab {
   flex: 1;
   text-align: center;
   padding: 10px;
   cursor: pointer;
   background-color: #f9f9f9;
}

.notification-tab.active {
   background-color: white;
   border-bottom: 2px solid #0069ca;
}

.notification-content {
   max-height: 300px;
   overflow-y: auto;
   padding: 0;
}

.notification-item {
   padding: 10px 15px;
   border-bottom: 1px solid #f0f0f0;
   cursor: pointer;
}

.notification-item:hover {
   background-color: #f5f5f5;
}

.notification-item-title {
   font-weight: bold;
   margin-bottom: 5px;
   color: #333;
}

.notification-item-text {
   color: #666;
   font-size: 13px;
}

.notification-footer {
   padding: 10px;
   text-align: center;
   border-top: 1px solid #eee;
}

.notification-footer a {
   color: #0069ca;
   text-decoration: none;
   font-size: 13px;
}