.lightblue-bg {
    background: #9c27b021; 
}       

.lightgreen-bg {
   background: #8bc34a38; 
}       

.overlaycc {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #22222278;
    z-index: 99999;
    display: none;
}

.overlaycc__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlaycc__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinnercc {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 4px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}


btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}

label {
    font-size: 10px;
    font-weight: 100;
}

.awb-sub-title {
        margin: 2px 0px 15px 0px;
    border-bottom: 1px solid;
    padding: 0px 0px 6px 0px;
    color: #495864;
    font-weight: 600;
}

select {
    width: 100%;
    height: 25px;
}

.form-group-custom {
    margin-bottom: 8px;
}

.width-100p { width: 100%; }
.pr-4p { padding-right: 5px; padding-bottom: 5px;}
.fs-9p { font-size: 9px; }

input:read-only {
    background: #9e9e9e1f;
    border: 1px solid gray;
    width: 100%;
}

.form-control-custom {
    width: 100%;
}
    
/* Add a black background color to the top navigation */

/* Style the links inside the navigation bar */
.topnav a {
    text-align: center;
    padding: 14px 10px !important;
        color: white;
}

.navbar-default {
    background: #495864!important;
    border-color: #495864 !important;
}

.navbar-top-links li { color: white; }

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: white;
    border-color: #337ab7;
    color: #495864 !important;
}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #eee;
    color: #495864 !important;
}

#side-menu {
   background: #f8f8f8 !important;
}

.btn-info {
    color: #fff !important;
    background-color: #5bc0de !important;
    border-color: #46b8da !important;
}

/* === FLEX LAYOUT FOR DESKTOP === */
@media (min-width: 768px) {
  .navbar-collapse.flex-nav {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }

  .navbar-nav-centered {
    margin: 0 auto;
    float: none !important;
    display: flex;
    gap: 10px;
  }

  .navbar-nav-right {
    margin-left: auto;
    float: none !important;
    display: flex;
    align-items: center;
  }
}

/* === MOBILE RESPONSIVE FIXES === */
@media (max-width: 767px) {
  .navbar-nav-centered,
  .navbar-nav-right {
    float: none !important;
    display: block;
    text-align: left;
    width: 100%;
  }
}

/* Navbar links color */
.navbar-default .navbar-text, .navbar-default .navbar-nav > li > a {
  color: #fff !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: white !important;
}

@media (max-width: 767px) {
  .text-right {
    text-align: left !important;
  }

  .text-right label {
    display: block;
    width: 100%;
    margin: 5px 0px -6px 0px;
  }
}


.custom-brand {
    padding-left: 12px;
}

.brand-container {
    display: flex;
    align-items: center;   /* vertical alignment */
    gap: 2px;              /* space between logo and text */
}

.brand-logo {
    width: 50px;
}

.brand-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
}