@charset "utf-8";
/* CSS Document */
body{font-family: "GothaProReg";
src:url("GothaProReg.otf");background-color:#f8f9fa;font-size:12px;

}
  @font-face{
font-family: "GothaProReg";
src:url("GothaProReg.otf");

}

 * p ,h1,h2,h3,h4,h5,h6,lable,a,span,btn {
font-family: "GothaProReg";
src:url("GothaProReg.otf");

}
.bg-blueGradient{background: linear-gradient(to right,#255b94 50%,#4e7fb4 100%);}
.bg-darkGradient{background: linear-gradient(to right,#191919 50%,#1c1c1c 100%);}
.bg-blue{background-color:#275d97;}
.bg-tabgrey{background-color:#eeeeee;}
.bg-grey{background-color:#ececec;}
.bg-brown{background: linear-gradient(to bottom, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%);}
.bg-lightGrey{background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);}

.customGrey-btn{background: linear-gradient(to right,#e9e9e9 50%,#d5d5d5 100%);}
.customGrey-btn:hover{background: linear-gradient(to right,#d5d5d5 50%,#ccc 100%);}
.SkyBG {
    border-color: #446d99;
    background: url(images/bg-information.png) repeat-x #a5c8f4;
}

::placeholder {
    font-size: 10px;
    padding-left: 10px;
    font-style: italic;
}

.common-font{font-size:12px !important;font-family: "GothaProReg";}
.small-font{font-size:10px !important;font-family: "GothaProReg";}
select.form-control:not([size]):not([multiple]) {
    height: calc(1.3rem + 1px);
}
.form-control {
    display: block;
    width: 100%;
    font-size: 1rem;
	padding: 0px !important;
    line-height: 1.5;
    color: #495057;
    border: 1px solid #ccc;
    border-radius:0px;
	
}
.common-margin{margin-bottom: 0px;}
label{font-size:12px !important; font-weight:bold !important;}

.loginBG{
  background: url(../images/1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#col-Login{
  align-items: center;
  flex-direction: column; 
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 20px;
}

#tab-button {
  display: table;
  table-layout: fixed;
  width: 30%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#tab-button li {
  display: table-cell;
  width: 20%;
}
#tab-button li a {
  display: block;
  padding: .5em;
  background: #eee;
  border: 1px solid #ddd;
  text-align: center;
  color: #000;
  text-decoration: none;
}
#tab-button li:not(:first-child) a {
  border-left: none;
}
#tab-button li a:hover,
#tab-button .is-active a {
  border-bottom-color: transparent;
  background: #fff;
}
.tab-contents {
  padding: .5em 2em 1em;
  border: 1px solid #ddd;
}



.tab-button-outer {
  display: none;
}
.tab-contents {
  margin-top: 20px;
}

/* DataTables - match template table styling */
table.dataTable thead th {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
    font-size: 10px !important;
    border: 1px solid #dee2e6;
}
table.dataTable tbody td {
    font-size: 12px !important;
}
table.dataTable {
    border-collapse: collapse;
    border: 1px solid #dee2e6;
}
table.dataTable thead th, table.dataTable tbody td {
    padding: 0.5rem;
}
table.dataTable tbody tr:hover {
    background-color: #f1f3f5;
}

/* Responsive app shell nav (module tabs + quick-link cards) — flex-wrap instead of a
   Bootstrap col-md-N grid, so items wrap into extra rows on narrow screens instead of
   each one going full-width/stacking vertically. */
.app-nav__item {
    display: block;
    flex: 0 1 90px;
    margin: 0 6px 8px;
    padding: 6px 8px;
    text-decoration: none;
}
.app-nav__label {
    display: block;
    font-size: 12px;
    white-space: nowrap;
}
/* QA-AUDIT-2026-09 BUG-025: the main nav gave no indication which module the user was
   currently in — this is the highlight for the item matching the current route. */
.app-nav__item--active {
    background-color: rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 -3px 0 #1e3a8a;
}
.app-quicklinks__item {
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    max-width: 260px;
    margin: 0 8px 8px 0;
    padding: 10px;
    text-decoration: none;
}
@media (max-width: 575.98px) {
    .app-nav__item {
        flex: 0 1 72px;
        padding: 4px 4px;
    }
    .app-nav__label {
        font-size: 10px;
    }
    .app-quicklinks__item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Any wide table not already inside an overflow wrapper gets one automatically, and any
   dropdown/menu panel positioned absolutely is clamped to the viewport width so it can't
   push the page into horizontal scroll on a narrow screen. */
@media (max-width: 767.98px) {
    .table-responsive, table.table {
        font-size: 11px;
    }
}

@media screen and (min-width: 768px) {
  .tab-button-outer {
    position: relative;
    z-index: 2;
    display: block;
  }
  .tab-select-outer {
    display: none;
  }
  .tab-contents {
    position: relative;
    top: -1px;
    margin-top: 0;
  }
}

/* Themed loading spinner — a ring in the app's own blue-gradient palette (see .bg-blueGradient
   above), not Bootstrap's default spinner-border: this is Bootstrap 4.0.0 (confirmed in
   bootstrap.min.css's own header comment), which predates that utility (added in 4.2). */
@keyframes app-spin {
  to { transform: rotate(360deg); }
}
.app-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #d7e0ea;
  border-top-color: #255b94;
  border-right-color: #4e7fb4;
  border-radius: 50%;
  animation: app-spin 0.7s linear infinite;
}
.app-spinner--sm {
  width: 15px;
  height: 15px;
  border-width: 2px;
}
.app-spinner--lg {
  width: 44px;
  height: 44px;
  border-width: 4px;
}
.app-spinner-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  width: 100%;
}
.app-spinner-overlay--fixed {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  background: #f8f9fa;
  z-index: 1100;
}

/* QA-AUDIT-2026-09 BUG-026: buttons/inputs sized for desktop's dense tables/forms (.form-control
   was 0 padding, select boxes ~21px tall) were hard to tap accurately on a phone. Scoped to small
   viewports only — the compact desktop density (common-font/small-font, dense tables) is a
   deliberate choice elsewhere in this app, not something to change globally. 44px matches
   Apple/Android's own minimum tap-target guidance. */
@media (max-width: 480px) {
  .btn,
  .form-control,
  select.form-control:not([size]):not([multiple]) {
    min-height: 44px;
  }
}