/* -------------------------- VARIABLES -------------------------- */
[v-cloak] {
  display: none;
}
.aL {
  text-align: left !important;
}
.aR {
  text-align: right !important;
}
.aL2 {
  text-align: left !important;
  padding-left: 5px;
}
.aC {
  text-align: center !important;
}
.vMiddle {
  display: inline-block;
  vertical-align: middle;
  float: none;
}
.noMarginPadding {
  margin: 0px !important;
  padding: 0px !important;
}
@media only screen and (max-width: 500px) {
  .signIn {
    width: 80% !important;
    margin: 0px auto !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  .signIn {
    width: 70% !important;
    margin: 0px auto !important;
  }
}
@media only screen and (min-width: 801px) {
  .signIn {
    width: 40% !important;
    margin: 0px auto !important;
  }
}
@media only screen and (max-width: 500px) {
  .hideSm {
    display: none !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  .hideMed {
    display: none !important;
  }
}
@media only screen and (min-width: 801px) {
  .hideLg {
    display: none !important;
  }
}
input {
  max-width: 100%;
}
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select,
  textarea,
  input {
    font-size: 16px;
  }
}
*/
textarea {
  resize: none;
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
body {
  margin: 0px;
  padding: 0px;
}
@media only screen and (max-width: 500px) {
  body {
    font-size: 10px !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  body {
    font-size: 12px !important;
  }
}
@media only screen and (min-width: 801px) {
  body {
    font-size: 14px !important;
  }
}
@media only screen and (max-width: 500px) {
  h3,
  .h3 {
    font-size: 17px !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  h3,
  .h3 {
    font-size: 21px !important;
  }
}
@media only screen and (min-width: 801px) {
  h3,
  .h3 {
    font-size: 24px !important;
  }
}
@media only screen and (max-width: 500px) {
  h4,
  .h4 {
    font-size: 13px !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  h4,
  .h4 {
    font-size: 15px !important;
  }
}
@media only screen and (min-width: 801px) {
  h4,
  .h4 {
    font-size: 18px !important;
  }
}
@media only screen and (max-width: 500px) {
  h5,
  .h5 {
    font-size: 10px !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  h5,
  .h5 {
    font-size: 12px !important;
  }
}
@media only screen and (min-width: 801px) {
  h5,
  .h5 {
    font-size: 14px !important;
  }
}
@media only screen and (max-width: 500px) {
  h6,
  .h6 {
    font-size: 9px !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  h6,
  .h6 {
    font-size: 11px !important;
  }
}
@media only screen and (min-width: 801px) {
  h6,
  .h6 {
    font-size: 12px !important;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .btn-group-sm > .btn {
    padding: 5px 5px !important;
    font-size: 1.1em !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  .btn-group-sm > .btn {
    padding: 5px 5px !important;
    font-size: 0.9em !important;
  }
}
@media only screen and (max-width: 500px) {
  .btn,
  .btn-group > .btn {
    padding: 5px 5px !important;
    font-size: 1.1em !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  .btn,
  .btn-group > .btn {
    padding: 5px 5px !important;
    font-size: 0.9em !important;
  }
}
.bootstrap-switch {
  color: red !important;
}
@media only screen and (min-width: 801px) {
  .nav-tabs > li > a {
    font: bold 0.95em 'Arial' !important;
    padding: 15px !important;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .nav-tabs > li > a {
    font: bold 1.1em 'Arial' !important;
    padding: 10px !important;
  }
}
.badge-danger {
  background-color: #b94a48 !important;
}
.badge-danger:hover {
  background-color: #953b39 !important;
}
.badge-warning {
  background-color: #f89406 !important;
}
.badge-warning:hover {
  background-color: #c67605 !important;
}
.badge-success {
  background-color: #468847 !important;
}
.badge-success:hover {
  background-color: #356635 !important;
}
.badge-info {
  background-color: #3a87ad !important;
}
.badge-info:hover {
  background-color: #2d6987 !important;
}
.badge-inverse {
  background-color: #333333 !important;
}
.badge-inverse:hover {
  background-color: #1a1a1a !important;
}
.legendBgSuccess {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #dff0d8;
  border: 1px solid #636363;
  display: inline-block;
  margin: 5px 5px 5px 15px;
}
.legendBgWarning {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #fcf8e3;
  border: 1px solid #636363;
  display: inline-block;
  margin: 5px 5px 5px 15px;
}
/*
#twoWkDetailConfig {
  background-color: #ffffff;
  width: 350px;
  padding: 10px;
  display: none;
  border: 1px solid @colorLightGrey;
  margin-top: 3px;
}
*/
.calConfig {
  width: 325px;
  height: 155px;
  border: 1px solid #cccccc;
  margin: 10px;
  display: none;
  background-color: #ffffff;
}
.configTable {
  width: 100%;
}
.configTable .cap {
  font: 9pt 'Arial' !important;
  color: #525252;
  text-align: left;
  height: 28px;
}
.configTable .fld {
  font: 9pt 'Arial' !important;
  color: #525252;
  text-align: left;
}
.configTable .fld {
  font: 9pt 'Arial' !important;
  color: #525252;
  text-align: left;
}
.twoWkDetailActivity {
  margin: 5px 0px 0px 0px;
  padding: 0px;
  line-height: 11pt;
  font: 1.2em 'Arial';
}
.calCrewActivity {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  height: 20px;
  display: none;
}
.acRON {
  display: inline-block;
  margin-left: 5px;
  color: #ffffff !important;
  font-size: 0.65em !important;
  font-weight: normal !important;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  #acTimesAndCycles {
    width: 90% !important;
    margin: 0px auto !important;
  }
}
@media only screen and (min-width: 801px) {
  #acTimesAndCycles {
    width: 500px  !important;
    margin: 0px auto !important;
  }
}
#acTimesAndCycles .normal td {
  padding-top: 5px;
  padding-bottom: 5px;
}
#acTimesAndCycles .spacer td {
  padding-top: 10px;
  border-top: 1px solid #cccccc !important;
}
#acTimesAndCycles td input {
  width: 50%;
}
#acTimesAndCycles .static {
  font-family: Arial;
  font-size: 9pt;
  color: #000000;
}
.btnBlue {
  background-color: #0D83DD;
  color: #ffffff;
}
.btnBlue span {
  padding-right: 10px;
}
.btnNew {
  background-color: #8ed221 !important;
  color: #ffffff !important;
  border: 1px solid #71A81A;
}
.btnBack {
  background-color: #cccccc;
  color: #525252;
  margin-right: 7px;
}
.btnGrey {
  background-color: #cccccc !important;
  color: #000000 !important;
  border: 1px solid #525252;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .btnActions {
    padding: 5px 7px 5px 7px  !important;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .btnTextActions {
    margin: 3px 7px 4px 3px  !important;
  }
}
.btnShowHide {
  padding: 0px 5px 0px 5px!important;
  line-height: 20px !important;
  margin-top: -5px;
}
.btnRptCrit {
  float: left;
  margin: 4px;
}
.btnEmailAddr {
  background-color: #f2f2f2;
  border-color: #cccccc !important;
}
.btnEmailAddr i {
  margin-left: 8px;
  color: #525252;
}
.grdCalSelDay {
  background-color: #E7F3FD;
}
.grdCal {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cccccc;
}
.grdCal tbody td {
  border: 1px solid #cccccc;
  min-height: 150px;
  text-align: left;
  font: 9pt 'Arial';
  cursor: pointer;
}
.grdCal tbody td p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0px;
}
.grdCal thead th {
  font: 9pt 'Arial';
  background-color: #0D83DD;
  text-align: center;
  height: 30px;
  color: #ffffff !important;
}
.grdCal .inactive {
  background-color: #E6E6E6;
}
.calF {
  color: #000000;
}
.calM {
  color: #ff0000;
}
.calR {
  color: #0066CC;
}
.calH {
  color: #66CC00;
}
.calXld {
  text-decoration: line-through !important;
  color: #999999 !important;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .calDetailStatus {
    font-size: 0.85em !important;
    margin-right: 1px;
  }
}
@media only screen and (min-width: 801px) {
  .calDetailStatus {
    font-size: 0.9em !important;
    margin-right: 5px;
  }
}
.grdCPU {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cccccc;
}
.grdCPU tbody td {
  border: 1px solid #cccccc;
  text-align: left;
  cursor: pointer;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdCPU tbody td {
    font: 0.85em 'Arial' !important;
  }
}
@media only screen and (min-width: 801px) {
  .grdCPU tbody td {
    font: 9pt 'Arial' !important;
  }
}
.grdCPU tbody td p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0px;
  margin: 0px;
}
.grdCPU thead th {
  font: 9pt 'Arial';
  background-color: #0D83DD;
  text-align: center;
  height: 30px;
  color: #ffffff !important;
}
.grdCPUACTail {
  width: 25px;
  text-align: center;
  padding: 3px;
  margin: 0px;
}
@media only screen and (min-width: 801px) {
  .grdCPUACTail {
    font: bold 1em 'Arial' !important;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdCPUACTail {
    font: bold 1.3em 'Arial' !important;
  }
}
.grdCPUCrew {
  background-color: #0D83DD;
  color: #ffffff;
  width: 25px;
  text-align: center;
  padding: 3px;
  margin: 0px;
}
@media only screen and (min-width: 801px) {
  .grdCPUCrew {
    font: bold 1em 'Arial' !important;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdCPUCrew {
    font: bold 1.3em 'Arial' !important;
  }
}
.grdCPUACDesc {
  text-align: left;
  padding: 3px;
}
@media only screen and (min-width: 801px) {
  .grdCPUACDesc {
    font: 9pt 'Arial' !important;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdCPUACDesc {
    font: 1em 'Arial' !important;
  }
}
.grdCPULegs {
  width: 100%;
}
.configCPU {
  background-color: #ffffff;
  width: 400px;
  height: 415px;
  padding: 20px 10px 10px 10px;
  display: none;
  border: 1px solid #cccccc;
  margin-top: 3px;
}
.configCrewCal {
  background-color: #ffffff;
  width: 400px;
  height: 215px;
  padding: 20px 10px 10px 10px;
  display: none;
  border: 1px solid #cccccc;
  margin-top: 3px;
  z-index: 99;
}
.settingHdr {
  font: bold 10pt 'Arial';
  text-align: left;
  padding: 1px !important;
  color: #525252;
  border-bottom: 1px #cccccc dotted;
  height: 25px;
  margin: 0px 0px 10px 0px;
}
.crewCalContainer {
  margin: 0px 0px 3px 0px;
}
.crewCalSep {
  width: 100%;
  border-bottom: 1px dotted #525252;
  margin: 5px 0px 5px 0px;
}
.crewCalActivity {
  color: #525252;
}
.crewCalFlight {
  cursor: auto;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .crewCalFlight {
    font: 1em 'Arial' !important;
    height: 35px;
  }
}
@media only screen and (min-width: 801px) {
  .crewCalFlight {
    font: 0.9em 'Arial' !important;
    height: 30px;
  }
}
.calDate {
  margin: 5px;
  color: #0D83DD;
  text-align: right;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .calDate {
    font: 0.85em 'Arial';
  }
}
@media only screen and (min-width: 801px) {
  .calDate {
    font: 1.4em 'Arial';
  }
}
.seriesCalTable {
  display: block;
}
.seriesCalAcRow {
  display: block;
  margin-bottom: 4px;
}
.seriesCalCell {
  display: inline-block;
}
.seriesCalTripDetailsCell {
  display: inline-block;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}
.seriesCalAcRow {
  display: block;
}
.truncate-ellipsis {
  display: table;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
.truncate-ellipsis > * {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
}
.noScrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
.noScrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-y: scroll;
  overflow-x: hidden;
}
.fldErr {
  background-color: #ff0000;
  color: #ffffff;
  border: 1px solid #ff0000;
}
.fldErrMsg {
  font: 0.7em 'Arial';
  color: #ff0000 !important;
  display: none;
}
.fldEntry {
  font-family: Arial;
  font-size: 9pt;
  text-align: left;
  padding: 1px !important;
  height: 25px !important;
  margin: 3px 0px 3px 0px;
  border: 1px solid #cccccc;
}
.fldEntryStatic {
  font-family: Arial;
  font-size: 9pt;
  text-align: left;
  padding: 1px !important;
  height: 25px;
  line-height: 30px !important;
  margin: 3px 0px 3px 0px;
}
.fldEntryUCase {
  text-transform: uppercase;
}
.fldEntryReq {
  border-left: 3px solid #ff0000 !important;
}
.fldEntryReqHdr {
  color: #525252;
}
@media only screen and (min-width: 501px) and (max-width: 800px) , only screen and (min-width: 801px) {
  .fldEntryReqHdr {
    font: bold 0.9em 'Arial';
  }
}
@media only screen and (max-width: 500px) {
  .fldEntryReqHdr {
    font: bold 1.1em 'Arial';
  }
}
.fldEntryOther {
  border-left: 3px solid #0D83DD !important;
}
.sectHdrEntryCollapsed {
  border-bottom: 0px !important;
}
.sectHdrEntry {
  border-bottom: 1px solid #0D83DD;
  margin: 10px 0px 10px 0px !important;
  cursor: pointer;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .sectHdrEntry {
    height: 20px;
  }
}
@media only screen and (min-width: 801px) {
  .sectHdrEntry {
    padding: 5px 0px 5px 0px;
  }
}
.sectHdrEntry div {
  display: inline-block;
}
.lblEntryNewBtn {
  font: bold 0.9em 'Arial';
  color: #ffffff;
}
.lblEntryDisabled {
  color: #cccccc !important;
}
.lblEntry {
  padding: 0px 8px 0px 0px;
  margin: 0px;
  line-height: 25px !important;
  text-align: right;
  color: #525252;
  white-space: nowrap;
  width: 100%;
  display: block;
}
@media only screen and (min-width: 501px) and (max-width: 800px) , only screen and (min-width: 801px) {
  .lblEntry {
    font: bold 0.88em 'Arial';
  }
}
@media only screen and (max-width: 500px) {
  .lblEntry {
    font: bold 1.1em 'Arial';
  }
}
.lblEntryMiddle {
  padding: 0px 8px 0px 0px;
  margin: 0px;
  line-height: 30px !important;
  text-align: right;
  color: #525252;
  white-space: nowrap;
  width: 100%;
  display: block;
}
@media only screen and (min-width: 501px) and (max-width: 800px) , only screen and (min-width: 801px) {
  .lblEntryMiddle {
    font: bold 0.88em 'Arial';
  }
}
@media only screen and (max-width: 500px) {
  .lblEntryMiddle {
    font: bold 1.1em 'Arial';
  }
}
.lblEntryAdHoc {
  display: inline;
  padding: 0px 8px 0px 0px;
  margin: 0px;
  line-height: 25px;
  color: #525252;
}
@media only screen and (min-width: 501px) and (max-width: 800px) , only screen and (min-width: 801px) {
  .lblEntryAdHoc {
    font: bold 0.88em 'Arial';
  }
}
@media only screen and (max-width: 500px) {
  .lblEntryAdHoc {
    font: bold 1em 'Arial';
  }
}
.lblEntryNonBold {
  font-family: Arial;
  font-size: 9pt;
  padding: 0px;
  margin: 0px;
  line-height: 25px;
  color: #525252;
}
.lblEntryChange {
  font: bold 0.9em 'Arial';
  padding: 0px 8px 0px 0px;
  margin: 0px;
  text-align: right;
  width: 100%;
  color: #0D83DD;
  cursor: pointer;
  text-decoration: underline;
}
@media only screen and (min-width: 801px) {
  .lblEntryChange {
    line-height: 25px;
  }
}
.lblEntryTip {
  margin-left: 5px;
  font-size: 11pt;
  background-color: #ffffff;
  color: #0D83DD;
  cursor: pointer;
}
.comboBox {
  position: relative;
  width: 200px;
}
.comboBox select {
  width: 100%;
}
.comboBox > * {
  box-sizing: border-box;
  height: 1.5em;
}
.comboBox input {
  position: absolute;
}
.disabled {
  border: 1px solid #999;
  color: #333;
  opacity: 0.5;
}
.disabled option {
  color: #000;
  opacity: 1;
}
​ .disabled2 {
  color: #333;
  opacity: 0.5;
}
.lblTip {
  background-color: #8ed221 !important;
  color: #ffffff !important;
  padding: 4px !important;
}
@media only screen and (min-width: 801px) {
  .lblTip {
    font: bold 0.75em 'Arial' !important;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .lblTip {
    font: bold 0.95em 'Arial' !important;
  }
}
@media only screen and (min-width: 801px) {
  .lblTipText {
    font: 0.8em 'Arial' !important;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .lblTipText {
    font: 0.8em 'Arial' !important;
  }
}
.sectHdrEntry2 {
  border-bottom: 1px solid #0D83DD;
  cursor: pointer;
}
.fldMenuDropDown {
  display: block;
  margin: 2px 0px 0px 0px ;
  border: 1px solid #cccccc;
  cursor: pointer;
}
@media only screen and (min-width: 801px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .fldMenuDropDown {
    font: 0.85em 'Arial';
  }
}
@media only screen and (max-width: 500px) {
  .fldMenuDropDown {
    font: 1.2em 'Arial' !important;
  }
}
.fldMenuDropDown div {
  display: inline-block;
  margin: auto 0px auto 5px;
  height: 22px;
  line-height: 22px;
}
.btnLegNav {
  font-weight: bold;
}
@media only screen and (max-width: 500px) {
  .btnLegNav {
    font-size: 1.5em !important;
    width: 20px;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px) , only screen and (min-width: 801px) {
  .btnLegNav {
    font-size: 1.5em !important;
  }
}
.grid {
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
}
.grid th {
  height: 28px;
  background-color: #0D83DD;
  padding: 8px 4px 8px 0px !important;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grid th {
    font: 1em 'Arial' !important;
  }
}
@media only screen and (min-width: 801px) {
  .grid th {
    font: 0.9em 'Arial' !important;
  }
}
.grid th a {
  color: #ffffff;
  text-transform: none;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
}
.grid td {
  color: #000000;
  border-bottom: 1px dotted #cccccc;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grid td {
    font: 1em 'Arial' !important;
    height: 35px;
  }
}
@media only screen and (min-width: 801px) {
  .grid td {
    font: 0.9em 'Arial' !important;
    height: 30px;
  }
}
.gridValChanged td {
  border-bottom: 1px dotted #0D83DD !important;
}
.grid td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0px 2px 0px 2px;
}
.grid tr:hover {
  background-color: #D4EBFC !important;
}
.grid .highlight td {
  font-weight: bold !important;
  color: #0D83DD;
}
.grid .groupBy td {
  color: #0D83DD;
  border-bottom: 1px solid #0D83DD;
  cursor: pointer;
  padding-bottom: 3px;
  font-weight: bold;
}
.grid .groupByTitle {
  color: #0D83DD;
  cursor: pointer;
  margin-left: 5px;
  font-weight: bold;
  height: 35px;
  line-height: 50px;
  vertical-align: bottom;
}
.grid .sep td {
  border-top: 2px solid #cccccc;
  padding-top: 5px;
}
.gridTitleBar {
  width: 100%;
  margin: 0px 0px 5px 0px;
}
.gridTitleBar button {
  background-color: #cccccc;
  color: #000000;
}
@media only screen and (min-width: 801px) {
  .gridTitleBar button {
    padding: 6px 12px;
    font-size: 0.9em;
  }
}
@media only screen and (max-width: 500px) {
  .gridTitleBar button {
    font-size: 0.9em;
  }
}
.gridActionBar {
  background-color: #e3e3e3;
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
}
.grdDelBtn {
  background-color: #919191;
  color: #ffffff;
  border: 1px solid #595959;
  margin-bottom: 2px;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdDelBtn {
    padding: 1px 5px !important;
    font-size: 1.2em !important;
    line-height: 1.5 !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdDelBtn {
    padding: 1px 5px !important;
    font-size: 1em !important;
    line-height: 1.5 !important;
  }
}
@media only screen and (min-width: 801px) {
  .grdDelBtn {
    padding: 5px 10px 3px 5px !important;
    font-size: 0.8em !important;
    line-height: 1.42857143 !important;
  }
}
@media only screen and (max-width: 500px) {
  .grdDelBtnArrow {
    margin: 10px 0px 0px 10px;
  }
}
@media only screen and (min-width: 801px) {
  .grdDelBtnArrow {
    margin: 10px 0px 0px 23px;
  }
}
.gridSearchBtn {
  background-color: #0D83DD;
  color: #ffffff;
}
.gridClearBtn {
  background-color: #cccccc;
  color: #525252;
}
@media only screen and (max-width: 500px) {
  .gridSearchInput {
    margin-right: 5px;
    width: 95px;
    height: 30px;
  }
}
@media only screen and (min-width: 801px) {
  .gridSearchInput {
    margin-right: 5px;
    width: 175px;
    height: 30px;
  }
}
.gridPgBtns {
  background-color: #0D83DD;
  color: #ffffff;
}
.gridPgNums {
  font: 0.9em 'Arial';
}
.grdBradBox {
  width: 100%;
  border: 1px solid #cccccc;
  margin: auto;
}
.grdBrad {
  width: 100%;
  border-collapse: collapse;
}
.grdBradCurrRow {
  background-color: #E7F3FD;
}
.grdBradAdd {
  color: #8ed221;
  cursor: pointer;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdBradAdd {
    font-size: 14px !important;
    margin: 0px 2px 0px 2px;
  }
}
@media only screen and (min-width: 801px) {
  .grdBradAdd {
    font-size: 18px !important;
    margin: 0px 1px 0px 2px;
  }
}
.ghead {
  border-bottom: 1px solid #cccccc;
  height: 30px;
  background-color: #0D83DD;
}
.grdBrad thead th {
  text-align: center;
  height: 30px;
  font-weight: normal !important;
  color: #ffffff !important;
  background-color: #0D83DD;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdBrad thead th {
    font: 1em 'Arial' !important;
  }
}
@media only screen and (min-width: 801px) {
  .grdBrad thead th {
    font: 0.9em 'Arial' !important;
  }
}
.grdBrad thead th .clickCol {
  cursor: pointer;
}
.grdBrad tbody td {
  padding-top: 3px;
  padding-bottom: 3px;
  text-align: center;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdBrad tbody td {
    font: 1em 'Arial' !important;
    height: 35px;
  }
}
@media only screen and (min-width: 801px) {
  .grdBrad tbody td {
    font: 0.9em 'Arial' !important;
    height: 23px;
  }
}
.grdBradMenuIcon {
  padding: 0px;
  margin: 0px 0px 0px 3px;
  font-size: 1em;
  cursor: pointer;
}
.grdBradFld {
  font-size: 0.9em;
  text-align: center;
  padding-left: 3px;
  padding-right: 3px;
  width: 95%;
  text-transform: uppercase;
}
.grdBradFld2 {
  font-size: 0.9em;
  text-align: left;
}
.grdBradFldStatic {
  font-size: 0.9em;
  text-align: center;
  padding-left: 3px;
  padding-right: 3px;
}
.grdBradSearch {
  cursor: pointer;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdBradSearch {
    font-size: 10px !important;
    margin: 0px 1px 0px 2px;
  }
}
@media only screen and (min-width: 801px) {
  .grdBradSearch {
    font-size: 14px !important;
    margin: 0px 1px 0px 2px;
  }
}
.grdBradStatic {
  width: 100%;
  border-collapse: collapse;
}
.grdBradStatic thead {
  border-bottom: 1px solid #cccccc;
  height: 30px;
  background-color: #0D83DD;
}
.grdBradStatic thead th {
  text-align: center;
  height: 30px;
  color: #ffffff !important;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdBradStatic thead th {
    font: 1em 'Arial' !important;
  }
}
@media only screen and (min-width: 801px) {
  .grdBradStatic thead th {
    font: 0.9em 'Arial' !important;
  }
}
.grdBradStatic tbody td {
  text-align: center;
  border-bottom: 1px dotted #cccccc;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdBradStatic tbody td {
    font: 1em 'Arial' !important;
    height: 35px;
  }
}
@media only screen and (min-width: 801px) {
  .grdBradStatic tbody td {
    font: 0.9em 'Arial' !important;
    height: 30px;
  }
}
.grdBradStatic tbody tr:hover {
  background-color: #E7F3FD;
}
.grdBradStatic .sep td {
  border-top: 2px solid #cccccc;
  padding-top: 5px;
}
.grdBradEntry {
  width: 100%;
  border-collapse: collapse;
}
.grdBradEntry tbody td {
  padding: 5px 0px 5px 0px;
  height: 30px;
  font-family: Arial;
  font-size: 9pt;
}
.lblGridBlue {
  font: '.8em' 'Arial';
  color: #0D83DD;
  text-align: center;
}
.grdOverride td {
  color: #ff0000 !important;
}
.grdBradRow tr {
  border-bottom: 1px dotted #cccccc;
}
.grdBradRow tr:nth-child(even) {
  background-color: #F2F2F2;
}
.grdDisclaimer {
  margin-top: 5px;
  font: 0.7em 'Arial' !important;
}
.grdNoRows {
  margin-top: 5px;
  font: 0.9em 'Arial' !important;
}
.grdYesCheck {
  font-size: 1.3em !important;
  color: #525252 !important;
}
.sectHdrCollapse {
  margin-bottom: 5px;
}
.sectHdrCollapse div {
  display: inline-block;
  4color: #000000;
  cursor: pointer;
}
.sectHdrCollapse a:hover {
  color: #000000;
}
.sectHdrCollapse span:first-child {
  color: #000000;
  margin-right: 3px;
}
.bootstrapGrid .bootstrapGridRow:nth-child(odd) {
  background-color: #f2f2f2;
}
.bootstrapGrid .bootstrapGridHdr {
  height: 28px;
  background-color: #0D83DD;
  padding: 8px 4px 8px 0px !important;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .bootstrapGrid .bootstrapGridHdr {
    font: 1em 'Arial' !important;
  }
}
@media only screen and (min-width: 801px) {
  .bootstrapGrid .bootstrapGridHdr {
    font: 0.9em 'Arial' !important;
  }
}
.mnuItem li {
  line-height: 25px;
  margin: 2px 2px 2px 10px;
}
.mnuItem button {
  padding: 5px 4px 5px 4px !important;
  margin: 0px 0px 0px -1px;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .mnuItem button {
    font-size: 0.85em !important;
  }
}
.mnuItem button:first-child {
  margin: 0px 0px 0px 15px !important;
}
.mnuItem button:last-child {
  margin: 0px 15px 0px 0px !important;
}
@media only screen and (max-device-width: 767px), only screen and (min-device-width: 768px) {
  .mnuItem {
    font: 1.3em 'Arial';
  }
}
@media only screen and (min-device-width: 992px), only screen and (min-device-width: 1200px) {
  .mnuItem {
    font: 1em 'Arial';
  }
}
.mnuHeader {
  font-weight: bold;
  color: #000000 !important;
}
#hdrMenus {
  display: inline-block;
  padding: 0px;
  margin: 10px 0px 5px 0px;
}
.menuCenter {
  left: -40px !important;
}
.msgErr {
  font-weight: bold;
  color: #C70011 !important;
}
.msgErrText {
  color: #C70011 !important;
}
.msgErrIcon {
  color: #C70011 !important;
  margin-right: 7px;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .msgErrIcon {
    font-size: 13pt !important;
  }
}
@media only screen and (min-width: 801px) {
  .msgErrIcon {
    font-size: 17pt !important;
  }
}
.popUpListRow td {
  height: 32px;
  cursor: pointer;
}
.loader {
  border: 5px solid #f3f3f3;
  -webkit-animation: spin 1s linear infinite;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
}
.loaderLight {
  border: 2px solid #f3f3f3;
  -webkit-animation: spin 1s linear infinite;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
}
.loaderCell {
  border: 3px solid #c2c2c2;
  -webkit-animation: spin 1s linear infinite;
  border-top: 3px solid #0D83DD;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.divLoadingMsg {
  z-index: 5000;
  opacity: 0.5;
  position: absolute ;
  text-align: center;
  background-color: #E6E6E6;
  padding: 50px;
}
.modalBART {
  display: none;
  position: fixed;
  /* Stay in place */
  z-index: 5000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}
.popUpBaseFont {
  font: 9pt 'Arial' !important;
}
.boxRefresh {
  display: none;
  margin: 15px auto 15px auto !important;
  font: 0.75em 'Arial';
  color: #525252;
  width: 100px;
  height: 35px;
  background-image: url('../images/reload.gif');
  background-repeat: no-repeat;
}
.boxRefresh p {
  margin-left: 40px;
  line-height: 35px;
}
.mainRefresh {
  display: none;
  margin: 75px auto 15px auto !important;
  font: 0.75em 'Arial';
  color: #525252;
  width: 100px;
  height: 35px;
  background-image: url('../images/reload.gif');
  background-repeat: no-repeat;
}
.mainRefresh p {
  margin-left: 40px;
  line-height: 35px;
}
.smRefresh {
  width: 25px;
  height: 25px;
  background-image: url('../images/reloadmd.gif');
  background-repeat: no-repeat;
}
.simpleRefresh {
  color: #525252;
  width: 100px;
  height: 35px;
  background-image: url('../images/reload.gif');
  background-repeat: no-repeat;
}
.simpleRefresh p {
  font: 0.75em 'Arial';
  margin-left: 40px;
  line-height: 35px;
}
.suggest {
  background-color: red ;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  padding: 5px;
  margin-top: 4px;
  display: none;
  color: #757575;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .suggest {
    font: 1.2em 'Arial';
    width: 250px;
    height: 225px;
  }
}
@media only screen and (min-width: 801px) {
  .suggest {
    font: 1em 'Arial';
    width: 350px;
    height: 375px;
  }
}
.suggLine {
  display: block;
  font: 1em 'Arial';
  color: #000000;
  height: 25px;
  line-height: 25px;
  cursor: pointer !important;
  margin: 0px;
  padding: 2px;
}
.suggLine:hover {
  background-color: #D4EBFC !important;
}
.suggEntry {
  margin: 3px 0px 10px 0px;
  color: #000000;
}
.suggWithHdrs {
  width: 95%;
}
.suggWithHdrs thead th {
  text-align: left;
  padding-bottom: 3px;
}
@media only screen and (min-width: 801px) {
  .suggWithHdrs thead th {
    font: bold 0.85em 'Arial' !important;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .suggWithHdrs thead th {
    font: bold 0.95em 'Arial' !important;
  }
}
.suggWithHdrs tbody td {
  text-align: left;
  border-bottom: 1px dotted #cccccc;
  cursor: pointer;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .suggWithHdrs tbody td {
    font: 0.9em 'Arial' !important;
    height: 30px;
  }
}
@media only screen and (min-width: 801px) {
  .suggWithHdrs tbody td {
    font: 1em 'Arial' !important;
    height: 30px;
  }
}
.suggActive {
  background-color: #F2F2F2;
  color: #000000;
}
.suggY {
  font-size: 1.2em;
  color: #8ed221;
}
.suggN {
  font-size: 1.2em;
  color: #C70011;
}
.schedNoteTextAreaBEFORE {
  overflow: hidden;
  word-wrap: break-word;
  height: 52px;
  width: 100%;
  min-height: 50px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  resize: none;
}
.schedNoteServices {
  vertical-align: top;
  margin-left: 5px;
}
.schedNoteTextArea {
  height: 52px;
  width: 93%;
  min-height: 50px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  resize: none;
}
.schedNoteShort {
  max-height: 47px;
  cursor: pointer;
  overflow: hidden;
}
.schedNoteLong {
  cursor: pointer;
}
.schedNoteShort:hover {
  text-decoration: underline;
}
.schedNoteLong:hover {
  text-decoration: underline;
}
.schedNoteNotDone {
    color: #000000;
    cursor: pointer;
    white-space: pre-line;
}
.schedNoteDone {
  color: #009900;
  cursor: pointer;
}
.schedNoteInst {
  color: #8F8F8F;
  cursor: pointer;
}
.grdLegCol {
  padding: 0px 5px 0px 5px;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdLegCol {
    width: 35px;
  }
}
@media only screen and (min-width: 801px) {
  .grdLegCol {
    width: 55px;
  }
}
.grdLegColNum {
  font-weight: bold;
}
.grdLegColRoute {
  color: #ffffff;
  white-space: nowrap;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .grdLegColRoute {
    font: 0.8em 'Arial' !important;
  }
}
@media only screen and (min-width: 801px) {
  .grdLegColRoute {
    font: 0.9em 'Arial' !important;
  }
}
#grdSchedPOBNames thead th {
  height: 38px;
}
#grdSchedPOBNames tbody .firstRow {
  height: 30px;
  border-bottom: 1px dotted #cccccc;
  background-color: #cccccc;
}
#grdSchedPOBLegs thead th {
  height: 38px;
}
#grdSchedPOBLegs tbody .firstRow {
  height: 30px;
  border-bottom: 1px dotted #cccccc;
  background-color: #cccccc;
}
.onBoardName {
  text-align: left !important;
  height: 30px !important;
}
.onBoardRow td {
  height: 30px !important;
  border-bottom: 1px dotted #cccccc;
}
.waitListName td {
  text-align: left !important;
  vertical-align: middle;
  height: 43px !important;
  line-height: 43px !important;
  border-bottom: 1px dotted #cccccc;
}
.waitListRow td {
  height: 43px !important;
  border-bottom: 1px dotted #cccccc;
}
.pobIcon {
  font-size: 9pt;
  cursor: pointer;
}
#grdSchedFBOs tbody td {
  border-bottom: 1px dotted #cccccc;
}
#schedEditSects {
  border-top: 2px solid #8ed221;
  margin-bottom: 15px;
  padding-top: 5px;
}
#schedEditSects div {
  display: inline-block;
  margin-right: 20px;
  font: 10pt 'Arial';
  color: #525252;
}
.schedEditSubGrid tbody td {
  border-bottom: 1px dotted #cccccc;
}
#grdSchedAPDetails {
  border: 1px solid #cccccc;
  border-collapse: collapse;
  background-color: #e3e3e3;
  color: #000000;
}
#grdSchedAPDetails td {
  border-right: 1px solid #cccccc;
  padding-left: 3px;
}
.fldOverridden {
  color: #ff0000 !important;
}
.legNumConf {
  background-color: #FF9142 !important;
  color: #ffffff !important;
}
.tsaNFLSoundsLike {
  color: #FF9900;
}
.tsaNFLExactMatch {
  color: #ff0000;
}
.tsaNFLApproved {
  color: #000000;
}
.tsaClearedExact {
  color: #009900;
}
.tsaSelecteeSoundsLike {
  color: #0099CC;
}
.tsaSelecteeExact {
  color: #0033CC;
}
.tsaNotEnoughInfo {
  color: #9933CC;
}
.tsaLegend {
  display: inline-block;
  margin-right: 10px;
  font: 8pt 'Arial';
  width: 90px;
  text-align: center;
}
.tsaLegendLabel {
  display: inline-block;
  font-family: Arial;
  font-size: 9pt;
  font-weight: bold;
  padding: 0px 8px 0px 0px;
  margin: 0px;
  color: #525252;
  margin-right: 10px;
  width: 125px;
  line-height: 30px;
  height: 30px;
}
.tsaChecking {
  font: 8pt Arial;
  color: #525252 !important;
}
.tsaChecking img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.tsaBox {
  cursor: pointer;
}
.grdSchedEditErrs thead {
  border-bottom: 1px solid #cccccc;
  height: 30px;
  background-color: #C70011;
  font-family: Arial;
  font-size: 10pt;
  font-weight: normal;
}
.grdSchedEditErrs thead th {
  text-align: left;
  height: 30px;
  font-weight: normal !important;
  color: #ffffff !important;
}
.grdSchedEditErrs tbody td {
  padding-top: 7px;
  padding-bottom: 7px;
  height: 30px;
  font-family: Arial;
  font-size: 9pt;
  text-align: left;
  border-bottom: 1px solid #cccccc;
}
.msgBoxConflict {
  font-family: arial;
  font-weight: bold;
  color: white;
  font-size: 75%;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  width: 150px;
  padding: 5px;
  background-color: #d9534f;
}
.schedMoveTip {
  font: 9pt 'Arial';
}
.schedEditMsg {
  font: 0.9em 'Arial';
  margin: 10px 0px 10px 10px;
}
.eAPISPerson {
  display: inline-block;
  margin-right: 10px;
  width: 200px;
  text-align: center;
  vertical-align: top;
  min-height: 200px;
}
.eAPISPerson .icon {
  margin: 0px auto 5px auto;
}
.eAPISPerson .name {
  margin: 0px auto 0px auto;
  font-weight: bold;
}
.eAPISPerson .missing {
  margin: 15px auto 5px auto;
  padding: 0px;
  font-weight: bold;
  line-height: 15px;
}
.eAPISNotFiled {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  color: #cccccc !important;
}
.eAPISLegend {
  border: 1px solid #dddddd !important;
}
.grdSchedNonFlightEdit {
  width: 100%;
}
.grdSchedNonFlightEdit td {
  padding: 2px;
}
.grdSchedNonFlightEditCrew td {
  padding: 0px !important;
}
.tBar {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #0D83DD;
  margin: 0px 0px 15px 0px;
  padding: 0px 0px 0px 20px;
}
@media only screen and (min-device-width: 768px), only screen and (min-device-width: 992px), only screen and (min-device-width: 1200px) {
  .tBar {
    height: 35px;
    width: 100%;
  }
}
@media only screen and (max-device-width: 767px) {
  .tBar {
    height: 45px;
    width: 95%;
  }
}
.tBarSel {
  display: inline;
  position: relative;
  float: left;
  padding: 12px 15px 0px 15px;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  background-color: #ffffff;
  color: #0D83DD;
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
  margin-top: -5px;
}
@media only screen and (min-device-width: 768px), only screen and (min-device-width: 992px), only screen and (min-device-width: 1200px) {
  .tBarSel {
    font: bold 1em 'Arial';
    height: 40px;
  }
}
@media only screen and (max-device-width: 767px) {
  .tBarSel {
    font: bold 1.3em 'Arial';
    height: 50px;
  }
}
.tBarUnSel {
  display: inline-block;
  position: relative;
  float: left;
  height: 100%;
  text-align: center;
  padding: 8px 20px 0px 20px;
}
.tBarUnSel a {
  color: #ffffff;
  text-decoration: none;
}
@media only screen and (min-device-width: 768px), only screen and (min-device-width: 992px), only screen and (min-device-width: 1200px) {
  .tBarUnSel a {
    font: bold 1em 'Arial';
    line-height: 1.2em;
  }
}
@media only screen and (max-device-width: 767px) {
  .tBarUnSel a {
    font: bold 1.3em 'Arial';
    line-height: 1.5em;
  }
}
.tBarSel a {
  text-decoration: none;
}
@media only screen and (min-device-width: 768px), only screen and (min-device-width: 992px), only screen and (min-device-width: 1200px) {
  .tBarSel a {
    font: bold 1em 'Arial';
    line-height: 1.2em;
  }
}
@media only screen and (max-device-width: 767px) {
  .tBarSel a {
    font: bold 1.3em 'Arial';
    line-height: 1.5em;
  }
}
.tBarUnSel a span {
  margin-left: 5px;
}
.tBarUnSel:hover {
  background-color: #0A67AE;
  cursor: hand;
}
.tBarSep {
  display: inline;
  position: relative;
  float: left;
  width: 1px;
  height: 100%;
  border-left: 1px solid #6EBCF7;
  border-right: 1px solid #0D1BDE;
}
.hdrTop td {
  background-color: #0D83DD;
  height: 50px;
}
.hdrTopTitle {
  display: inline-block;
  color: #ffffff;
  text-shadow: 1px 1px 1px #525252;
  padding: 0;
  margin: 0px 5px 0px 0px;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .hdrTopTitle {
    font: 2.6em 'Trebuchet MS';
  }
}
@media only screen and (min-width: 801px) {
  .hdrTopTitle {
    font: 1.9em 'Trebuchet MS';
  }
}
.hdrTopIcon {
  margin: 0px 5px 0px 10px;
  padding: 0px;
  text-shadow: 1px 1px 1px #525252;
  display: inline-block;
  color: #ffffff;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .hdrTopIcon {
    font-size: 1.7em;
  }
}
@media only screen and (min-width: 801px) {
  .hdrTopIcon {
    font-size: 1.8em;
  }
}
.hdrBottom td {
  background-color: #ffffff;
  border-bottom: 1px solid #cccccc;
}
@media only screen and (max-width: 500px) {
  .hdrBottom td {
    text-align: center;
  }
}
.hdrTabSel {
  display: inline-block;
  background-color: #ffffff;
  color: #0D83DD;
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
}
@media only screen and (min-width: 801px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .hdrTabSel {
    font: 1.3em 'Arial';
    margin: 7px 0px 0px 0px;
    padding: 10px 10px 10px 0px;
    height: 40px;
  }
}
@media only screen and (max-width: 500px) {
  .hdrTabSel {
    font: 1.7em 'Arial';
    margin: 10px 0px 0px 0px;
    padding: 10px 10px 3px 10px;
    height: 40px;
  }
}
.hdrTabUnSel {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  border: 1px;
}
@media only screen and (min-width: 801px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .hdrTabUnSel {
    font: 1.3em 'Arial';
    margin: 10px 0px 0px 10px;
    padding: 10px 10px 10px 0px;
    height: 40px;
  }
}
@media only screen and (max-width: 500px) {
  .hdrTabUnSel {
    font: 1.7em 'Arial';
    margin: 10px 0px 0px 1px;
    padding: 3px 10px 13px 10px;
    height: 30px;
  }
}
.hdrTabUnSel a {
  color: #ffffff !important;
}
.hdrTabIcon {
  padding: 0px 5px 0px 10px;
}
.hdrMenu {
  display: inline;
  position: relative;
  float: left;
  cursor: pointer;
  color: #0D83DD;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .hdrMenu {
    font: bold 1.15em 'Arial';
    margin: 0px 3px 0px 3px;
  }
}
@media only screen and (min-width: 801px) {
  .hdrMenu {
    font: bold 1.05em 'Arial';
    margin: 0px 7px 0px 7px;
  }
}
.hdrLink {
  display: inline-block;
  margin: 0px 7px 0px 7px;
  cursor: pointer;
  color: #ffffff;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .hdrLink {
    font: 1.3em 'Arial';
  }
}
@media only screen and (min-width: 801px) {
  .hdrLink {
    font: 0.85em 'Arial';
  }
}
.hdrSettings {
  cursor: pointer;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .hdrSettings {
    font: bold 1.3em 'Arial' !important;
    margin: 0px 5px 0px 5px !important;
  }
}
@media only screen and (min-width: 801px) {
  .hdrSettings {
    font: bold 1.1em 'Arial' !important;
    margin: 0px 7px 0px 7px !important;
  }
}
.quoteEditAcOrAdHoc {
  font-family: Arial;
  font-size: 10pt;
  margin: 5px 0px 5px 0px;
  color: #cccccc;
}
.quoteEditTotals {
  font-family: Arial;
  font-size: 9pt;
}
.quoteEditLineItemTotals {
  display: inline-block;
  font: 1em 'Arial';
  margin-right: 15px;
}
.quoteChargeTotals {
  height: 25px;
}
.bartPopUpCal {
  font: 10pt 'Arial' !important;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  width: 225px;
  min-height: 250px;
  padding: 5px;
  display: none;
}
.bartPopUpCal table {
  width: 100%;
}
.bartPopUpCal table th {
  font: 10pt 'Arial' !important;
  font-weight: bold !important;
}
.bartPopUpCal table td {
  height: 30px;
  text-align: center;
  cursor: pointer;
  font: 10pt 'Arial' !important;
}
.bartPopUpCalOff {
  color: #8F8F8F;
}
.bartPopUpCalSel {
  background-color: #0D83DD !important;
}
.barGraphContainer {
  vertical-align: middle;
  margin: 3px 0px 3px 0px;
  padding: 0px;
}
.barGraphLine {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 0px;
  margin: 0px;
  vertical-align: middle;
  display: inline-block;
  height: 7px;
  background-color: #0D83DD;
}
.barGraphNum {
  padding: 0px;
  margin: 0px;
  display: inline-block;
}
.barLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#flogEditLegs div.even {
  background: #F2F2F2;
}
.flogEditCol {
  float: left;
  min-width: 90px;
  padding-left: 5px !important;
  padding-right: 5px !important;
  min-height: 28px;
}
.flogEditRowDivider {
  border-top: 1px dotted #B3B3B3;
}
.flogEditLegColActive {
  background-color: #E7F3FD !important;
}
.flogEditLegColAlt {
  border-right: 1px dotted #cccccc;
}
.flogEditLegHdr {
  background-color: #0D83DD !important;
}
.flogEditLegHdr div {
  padding-top: 5px;
  height: 28px;
  background-color: #0D83DD;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .flogEditLegHdr div {
    font: 1em 'Arial' !important;
  }
}
@media only screen and (min-width: 801px) {
  .flogEditLegHdr div {
    font: 0.9em 'Arial' !important;
  }
}
.flogEditLegHdr div span {
  cursor: pointer;
  vertical-align: middle;
}
.flogEditLegHdr div input[type="checkbox"] {
  margin: 0px 5px 0px 0px;
  vertical-align: middle;
}
.flogEditLegHdr div:first-child {
  background-color: #ffffff;
}
.flogEditSectHdr {
  margin: 15px 0px 5px 0px;
  border-bottom: 1px solid #0D83DD;
  cursor: pointer;
}
.flogEditLegHidden div {
  display: none;
}
.flogEditLegTotal {
  font: bold 0.9em 'Arial' !important;
  padding: 1px !important;
  margin: 3px 0px 3px 0px;
  line-height: 30px !important;
  color: #0D83DD;
}
.flogExpImage {
  height: auto;
  width: auto;
  max-width: 300px;
  max-height: 300px;
  padding: 5px;
  border: 1px solid #cccccc;
  display: block;
  margin: 10px auto 0px auto;
}
.flogExpImagePlaceholder {
  height: auto;
  width: auto;
  width: 300px;
  height: 300px;
  padding: 5px;
  border: 1px solid #cccccc;
  display: block;
  margin: 10px auto 0px auto;
}
.flogExpImagePlaceholder div {
  background-color: #cccccc;
}
.flogExpImageThumb {
  height: auto;
  width: auto;
  max-width: 100px;
  max-height: 100px;
  padding: 2px;
  border: 1px solid #cccccc;
}
#cboMultiSelLegItems input {
  margin-right: 5px;
}
#cboMultiSelLegItems a {
  cursor: pointer !important;
  width: 100%;
}
.flogLegTotal {
  color: #0D83DD !important;
}
.flogEditMenu {
  cursor: pointer;
  margin: 0px 0px 2px 0px !important;
  padding: 4px 0px 4px 15px !important;
}
.flogEditMenu:hover {
  background-color: #F2F2F2;
}
.costsTotalRow {
  border-top: 1px solid #0D83DD !important;
}
.costsTotalRow td {
  height: 40px;
  line-height: 40px;
}
.costsTotalRowAmount {
  text-align: right !important;
}
@media only screen and (min-width: 501px) and (max-width: 800px) , only screen and (min-width: 801px) {
  .costsFixedCol {
    border-left: 1px dotted #cccccc;
  }
}
.stepwizard-step p {
  margin-top: 10px;
}
.stepwizard-row {
  display: table-row;
}
.stepwizard {
  display: table;
  width: 100%;
  position: relative;
  margin: auto;
}
.stepwizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
  top: 20px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  z-order: 0;
}
.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
  width: 20%;
}
.btn-circle {
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 0px 0 !important;
  font-size: 1.3em !important;
  line-height: 1.42857143 !important;
  border-radius: 20px !important;
}
@media only screen and (max-width: 500px) {
  .bit-settingsBox {
    width: 50%;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  .bit-settingsBox {
    width: 33.33333%;
  }
}
@media only screen and (min-width: 801px) {
  .bit-settingsBox {
    width: 25%;
  }
}
@media only screen and (min-width: 1201px) {
  .bit-settingsBox {
    width: 20%;
  }
}
.relNotesHighlights {
  margin: 0px;
  background-color: #f2f2f2 !important;
  border-top: 3px solid #337ab7 !important;
}
.relNotesFixes {
  margin: 0px;
  background-color: #f2f2f2 !important;
  border-top: 3px solid #707B7C !important;
}
.relNotesSoon {
  margin: 0px;
  background-color: #d6e9c6 !important;
  border-top: 3px solid #3c763d !important;
}
.relNotesDesc {
  color: #707B7C;
}
@media only screen and (max-width: 500px) {
  .bit-WebinarsBox {
    width: 100%;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  .bit-WebinarsBox {
    width: 50%;
  }
}
@media only screen and (min-width: 801px) {
  .bit-WebinarsBox {
    width: 25%;
  }
}
@media only screen and (min-width: 1201px) {
  .bit-WebinarsBox {
    width: 25%;
  }
}
.page {
  margin: 0 auto;
  width: 100%;
}
.lnkEdit {
  text-decoration: underline !important;
  padding: 0px 3px 0px 3px;
}
.lnkEdit:hover {
  color: #ffffff;
  text-decoration: none !important;
  background-color: #0D83DD;
}
.lnkBasic {
  font-family: Arial;
  font-size: 9pt;
  color: #0D83DD;
}
.lnkColorOnly {
  color: #0D83DD !important;
}
@media only screen and (max-width: 500px) {
  #pageBody {
    margin: 5px 5px 10px 5px;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px)  {
  #pageBody {
    margin: 10px 10px 10px 10px;
  }
}
@media only screen and (min-width: 801px) {
  #pageBody {
    margin: 10px 30px 10px 30px;
  }
}
#popUpCal {
  display: none;
  margin-top: 12px;
  font: 10pt 'Arial' !important;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.smText {
  font: 0.8em 'Arial';
  color: #000000;
}
.signInTopTitle {
  display: inline-block;
  color: #ffffff;
  text-shadow: 1px 1px 1px #525252;
  padding: 0;
  margin: 0px 5px 0px 0px;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .signInTopTitle {
    font: 1.7em 'Trebuchet MS';
  }
}
@media only screen and (min-width: 801px) {
  .signInTopTitle {
    font: 1.7em 'Trebuchet MS';
  }
}
.signInTopIcon {
  margin: 10px 5px 0px 10px;
  padding: 0px;
  text-shadow: 1px 1px 1px #525252;
  display: inline-block;
  color: #ffffff;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .signInTopIcon {
    font-size: 1.4em;
  }
}
@media only screen and (min-width: 801px) {
  .signInTopIcon {
    font-size: 1.7em;
  }
}
td input[type="checkbox"] {
  margin-top: 5px;
}
@media (min-width: 30em) {
  .bartRow {
    width: 100%;
    display: table;
    table-layout: fixed;
  }
  .bartCol {
    display: table-cell;
  }
}
u.dotted {
  font: 0.9em Arial !important;
  color: #0D83DD;
  border-bottom: 1px dashed #0D83DD;
  text-decoration: none;
}
.imptText {
  color: #0D83DD !important;
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .tipIcon {
    width: 5%;
  }
}
@media only screen and (min-width: 801px) {
  .tipIcon {
    width: 3%;
  }
}
@media only screen and (min-width: 801px) {
  .tipIcon i {
    margin-left: 5px;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .tipText {
    width: 80%;
  }
}
@media only screen and (min-width: 801px) {
  .tipText {
    width: 87%;
  }
}
@media only screen and (max-width: 500px), only screen and (min-width: 501px) and (max-width: 800px)  {
  .tipClose {
    width: 15%;
  }
}
@media only screen and (min-width: 801px) {
  .tipClose {
    width: 10%;
  }
}
.legendBox {
  float: right;
  border-spacing: 0px !important;
  height: 16px;
  margin-top: 2px;
}
.chkAndLabel input,
.chkAndLabel label {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  /* Fixes any weird issues in Firefox and IE */
}
.calCircleMaint {
  display: inline-block;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background-color: #f2dede;
  color: #a94442;
  text-align: center;
  line-height: 27px;
  border: 1px solid #cccccc;
  cursor: pointer;
}
.calCircleNotes {
  display: inline-block;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background-color: #d9edf7;
  color: #31708f;
  text-align: center;
  line-height: 27px;
  border: 1px solid #cccccc;
  cursor: pointer;
}

/* This is for bootstrap */
.modal-backdrop {
    opacity: 0.5 !important
}

li.nav-item > a.active {
    border-color: #eee #eee #ddd;
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    cursor: default
}


/*  End This is for bootstrap */

.modal-bart-xl { /* I believe this class is added on later version with a different width */
    width: 85%!important;
    margin: auto!important;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.blink {
    animation: blink 1s step-start infinite;
}

.pointer {
    cursor:pointer
}

.grid .delete-column {
    padding: 2px 0px 0px 0px !important;
    width: 6%
}