.btn-primary {
    background-color: #3fa9f5;
    border-color: #3fa9f5;
  }
    
  .btn-primary:hover {
    background-color: #00387a;
    border-color: #00387a;
  }
  
  .navbar-toggler {
    background-color: #3fa9f5;
    border-color: #3fa9f5;
  }
  
  .card-header {
    background-color: #3c3c3b;
  }
  
  .card {
    background-color: #575756;
  }
  
  .card-body {
    background-color: #575756;
    max-width: 100%;
  }
  
  .body {
      margin: 40px;
    }
    
    .h1 {
      white-space: nowrap;
    }
    
    a:not(.white), a:not(.white):link, a:not(.white):visited, a:not(.white):hover {
      color: yellow !important;
    }
    
    .footer {
      margin: 20px;
    }
    
    .form-control {
      /* max-width: 350px; */
      min-width: 200px;
    }
    
    .form-control-file {
      /* max-width: 350px; */
      min-width: 200px;
    }
    
    .invalid-feedback {
      color:yellow !important;
    }
    
    input {
      padding: 10px;
      /* width: 100%; */
      font-size: 17px;
      /* font-family: Raleway; */
      border: 1px solid #aaaaaa;
      /* position:absolute; */
      border:1px solid black;
      width: 300px;
      min-width:100px;  
    }
    
    /* Hide all steps by default: */
    #tab1, #tab2, #tab3 {
       display: none; 
    }
    
    button {
      background-color: #4CAF50;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      font-size: 17px;
      /* font-family: Raleway; */
      cursor: pointer;
      min-width: 100px;
      text-align: center;
    }
    
    button:hover {
      opacity: 0.8;
    }
    
    .btn-default{
        background-color: #949494;
    }
    
    /* fix date input colours for zebra_calendar */
    
    #dob {
      background-color: #ffffff;
    }
    
    #expiry_date {
      background-color: #ffffff;
    }
    
    #fica_accept_field,
    #fica_accept_anti_terrorism_field {
        margin-bottom: 20px;
    }
    
    .show{
        display:block;
    }
    
    .hide{
        display:none !important;
    }
    
    /* Mark input boxes that get errors during validation: */
    /* input.invalid {
      background-color: red;
      color: white;
    } */
    
    .form-control[readonly] {
        background-color: #c7c5c5;
    }
    
    #imageViewer{width:80%; margin:20px auto; display:none}
    .imageContainer{margin:20px; display: block;}
    .imageLabel{color:#ffffff;}
    
    /* START - POP-UP WINDOW STYLING */
    /* Button used to open the popup form - fixed at the bottom of the page */
    .open-button {
      background-color: #888;
      color: white;
      padding: 16px 20px;
      border: none;
      cursor: pointer;
      opacity: 0.8;
      position: fixed;
      bottom: 23px;
      right: 28px;
      width: 180px;
    }
    
    /* The window-popup - hidden by default */
    .window-popup {
      display: none;
      position: fixed;
      bottom: 0;
      right: 15px;
      border: 3px solid #f1f1f1;
      z-index: 9;
    }
    
    /* Add styles to the form container */
    .form-container {
      max-width: 300px;
      padding: 10px;
      background-color: white;
    }
    
    /* Full-width textarea */
    .form-container textarea {
      width: 100%;
      padding: 15px;
      margin: 5px 0 22px 0;
      border: none;
      background: #f1f1f1;
      resize: none;
      min-height: 200px;
    }
    
    /* When the textarea gets focus, do something */
    .form-container textarea:focus {
      background-color: #ddd;
      outline: none;
    }
    
    /* Set a style for the submit/send button */
    .form-container .btn {
      background-color: #4CAF50;
      color: white;
      padding: 16px 20px;
      border: none;
      cursor: pointer;
      width: 100%;
      margin-bottom:10px;
      opacity: 0.8;
    }
    
    /* Add a red background color to the cancel button */
    .form-container .cancel {
      background-color: red;
    }
    
    /* Add some hover effects to buttons */
    .form-container .btn:hover, .open-button:hover {
      opacity: 1;
    }
    
    /* END - POP-UP WINDOW STYLING */
    
    /* Admin Css - START*/
    table#applicant_table {
      overflow-x: auto;
      display: block;
    
    }
    label.error {
      color: yellow;
    }
    div#message_area:empty {
      background: none;
    }
    input#fica_accept,
    input#fica_accept_anti_terrorism_checkbox {
      width: auto;
      min-width: auto;
    }
    div.alert:empty { 
      background:none; 
    } 
    
    img.img-small {
      border-radius: 5px;
      margin: 15px 0;
      height: auto;
      display: block;
      width: auto;
      object-fit: contain;
      max-width: 100%;
    }
    
    img.img-small[src=""] {
      display:none;
    }
    
    .white { color:white !important; } 
    
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    *:before,
    *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    body {
      background-color: #00387a !important;
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
    }
    
    .noteswindow.nav a {
      text-decoration: none;
    }
    
    .noteswindow.nav,
    .noteswindow.nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      float: left;
    }
    
    .nav li {
      display: block;
      float: left;
      clear: both;
    }
    
    .noteswindow.nav > li {
      color: #000;
    }
    
    .noteswindow.nav > li > ul {
      position: absolute;
      left: -1px;
      display: none;
      width: 350px;
      border: 1px solid #ccc;
      margin-top: 15px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 1);
      -webkit-box-reflect : none;
    }
    
    .noteswindow.nav > li > ul:before,
    .noteswindow.nav > li > ul:after {
      display: block;
      position: absolute;
      top: -10px;
      left: 15px;
      content: '';
      width: 8px;
      height: 8px;
      border-style: solid;
    }
    
    .noteswindow.nav > li > ul:before {
      border-width: 0 10px 10px 10px;
      border-color: transparent transparent #ccc transparent;
      z-index: 1px;
    }
    
    .noteswindow.nav > li > ul:after {
      top: -9.5px;
      left: 16px;
      border-width: 0 9px 9px 9px;
      border-color: transparent transparent #fff transparent;
      z-index: 2px;
    }
    
    .noteswindow.nav > li > ul > li {
      width: 100%;
      font-size: 14px;
      border-top: 1px solid #ccc;
      padding: 15px;
    }
    
    .noteswindow.nav > li > ul > li.title {
      font-size: 16px;
      font-weight: bold;
      color: #000;
      padding: 8px 15px;  
    }
    
    .noteswindow.nav > li > ul > li.footer {
      font-size: 14px;
      font-weight: bold;
      color: #000;
      background-color: #eee;
      text-align: center;
      padding: 8px;
    }
    
    .noteswindow.nav > li > ul > li:first-child {
      border-top: 0;
    }
    
    
    
    .noteswindow.nav > li > ul > li a {
      display: block;
      color: #444;
    }
    
    .noteswindow.nav > li > ul {
      position: absolute;
      left: auto;
      display: none;
      width: 350px;
      border: 1px solid #ccc;
      margin-top: 15px;
      right: 0;
      background: #eee;
      height: 300px;
      overflow-y: auto;
    }
    .note-wrap {
      float: right;
    }
    table#applicant_table td.sorting_1 {
      cursor: pointer;
      font-size: 19px;
      background: #3fa9f5;
      color: white;
      text-align: center;
    }
    .noteswindow.nav > li {
      position: relative;
      cursor: pointer;
      font-size: 20px;
      border: 1px solid #ccc;
      text-align: left;
    }
    
    select.unchange option {
       display:none;
    }
    select.unchange {
      pointer-events: none;
    }
    select.unchange option[selected] {
      display: block !important;
    }
    
    .noteswindow.nav > li .num {
      border-radius: 100%;
      background-color: #eee;
      color: #999;
      text-align: center;
      padding: 0px 4px;
    }
    /* Admin Css - END*/ 
    
    /* BA CSS - START*/
    /* VERTICAL BUTTON BAR CSS, e.g. ba.php */
    
    .btn-group button {
      /* background-color: #4CAF50; Green background */
      border: 1px solid black; 
      /* color: white; White text */
      padding: 24px 24px; /* Some padding */
      /* cursor: pointer; Pointer/hand icon */
      width: 50%; /* Set a width if needed */
      display: block; /* Make the buttons appear below each other */
    }
    
    .btn-group button:not(:last-child) {
      border-bottom: none; /* Prevent double borders */
    }
    
    /* Add a background color on hover */
    .btn-group button:hover {
      background-color: black;
    }
    
    .btn-group-vertical.center {
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    
    fieldset[disabled] input, fieldset[disabled] select {
      border: 1px solid white;
      color: white;
      background: transparent !important;
    }
    
    /* BA CSS - END*/
    
    /* Add Logout button to ba_logout.php styling to match vertical button group*/
    /* TODO*/
    
    
    .responsive-img {
      width: 100%;
      height: auto;
    }
    
    .brand-img {
      width: 32px;
      height: auto;
    }
    
    .logo-img {
      width: 8vw;
      margin-top: 10px;
      height: auto;  
    }
  
    .logo-img-acf {
      width: 9vw;
      margin-top: 12px;
      height: auto;  
    }
    
    .header-title {
      font-size: 5vw;
    }
    
    
    /* START BA MENU */
    
    
    * Customize the navbar links to be fill the entire space of the .navbar */
    .navbar .navbar-inner {
        padding: 0;
    }
    
    .navbar .nav {
        margin: 0;
        display: table;
        width: 100%;
    }
    
    .navbar .nav li {
        display: table-cell;
        width: 1%;
        float: none;
    }
    
    .navbar .nav li a {
        font-weight: bold;
        text-align: center;
        border-left: 1px solid rgba(255, 255, 255, .75);
        border-right: 1px solid rgba(0, 0, 0, .1);
    }
    
    .navbar .nav li:first-child a {
        border-left: 0;
        border-radius: 3px 0 0 3px;
    }
    
    .navbar .nav li:last-child a {
        border-right: 0;
        border-radius: 0 3px 3px 0;
    }
    
    .navbar {
        outline-width: 2px;
        outline-color: #000;
    }
    
    .navbar-toggler {
      background: #3fa9f5;
    }
    
    button.clearme {
      padding: 5px;
      font-size: 12px;
      margin: -10px 0 0 0;
      border-radius: 100px !important;
      top: 0;
      left: 0;
    }
    
    .relDiv {
      position: relative;
    }
    
    img.img-small[src^="data"]~.preview_loader {
      display: none !important;
    }
    
    .loadingIcon {
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 3px solid rgba(255,255,255,.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s ease-in-out infinite;
      -webkit-animation: spin 1s ease-in-out infinite;
    }
    
    .loadingScreen {
      background: rgba(0,0,0,0.5);
      width: 100%;
      height: 100%;
      position: fixed; 
      left:0;
      z-index: 99999;
      top: 0;
      justify-content: center;
      align-items: center;
    }
    .loadingScreen.active {
      display: flex;
    }
    .loadingScreen:not(.active) {
      display: none;
    }
    .hideME { opacity:0; height:0; } 
    .padBtn {
      padding:5px;
    }
    div#cancelOtpModal .modal-header {
      display: block;
    }
    @keyframes spin {
      to { -webkit-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin {
      to { -webkit-transform: rotate(360deg); }
    }
    div#inviteModal .modal-header {
      display: block;
    }
    
    .checkDiv input[type='checkbox'] {
       min-width:auto;
       width:auto;
    }
    .form-group.checkDiv.disabled {
      pointer-events: none;
      opacity: 0.5;
    }
    .btnGroup {
      margin: 5px auto;
      text-align: center;
    }
    .btnGroup .btn {
      display: block;
      width: 100%;
    }
    label.btn-file.btn-block {
      display: inline;
    }
    /* END OF BA MENU */