/*
 * PerfexCRM custom branding
 * Primary: #003a4c
 * Secondary: #4fa6b3
 * Kept contrast-forward for readability and accessibility.
 */

 :root {
  --brand-primary: #003a4c;
  --brand-primary-hover: #002a36;
  --brand-secondary: #4fa6b3;
  --brand-secondary-hover: #3e93a0;
  --brand-surface: #eaf5f7;
  --brand-text-on-dark: #ffffff;
}

/* Global links */
a,
a:focus,
a:active {
  color: var(--brand-primary);
}

a:hover {
  color: var(--brand-secondary);
}

/* Primary actions */
.btn-primary,
.btn-info {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-text-on-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-info {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-text-on-dark);
}

/* Secondary actions */
.btn-default {
  color: var(--brand-primary);
  border-color: #c7dbe1;
  background-color: #ffffff;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: var(--brand-primary);
  border-color: var(--brand-secondary);
  background-color: var(--brand-surface);
}

/* Top header and side navigation */
#header {
  background: var(--brand-primary);
}

#header .navbar-nav > li > a,
#header .navbar-nav > li > a .fa {
  color: var(--brand-text-on-dark);
}

/* Scrollbar customization:
 * - scrollbar-width and scrollbar-color: Firefox support
 * - ::-webkit-scrollbar: Chrome, Safari, Edge support
 */
#side-menu,
.sidebar,
#wrapper .content {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-secondary) transparent;
}

#side-menu::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
#wrapper .content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#side-menu::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
#wrapper .content::-webkit-scrollbar-track {
  background: transparent;
}

#side-menu::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
#wrapper .content::-webkit-scrollbar-thumb {
  background-color: var(--brand-secondary);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#side-menu > li.active > a,
#side-menu > li > a:hover,
#side-menu > li > a:focus {
  background-color: rgba(69, 171, 187, 0.18);
  border-left-color: var(--brand-secondary);
  color: var(--brand-primary);
}

/* Tabs and pagination */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-top-color: var(--brand-secondary);
  color: var(--brand-primary);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-text-on-dark) !important;
}

/* Forms and focus states */
.form-control:focus,
select.form-control:focus,
.bootstrap-select .dropdown-toggle:focus {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 2px rgba(79, 166, 179, 0.22);
}

.checkbox input[type="checkbox"]:focus + label::before,
.radio input[type="radio"]:focus + label::before {
  outline: 2px solid rgba(79, 166, 179, 0.5);
  outline-offset: 1px;
}

/* Labels and badges */
.label-info,
.badge-info {
  background-color: var(--brand-secondary);
  color: var(--brand-text-on-dark) !important;
}

.label-primary,
.badge-primary {
  background-color: var(--brand-primary);
  color: var(--brand-text-on-dark) !important;
}

/* Tables, cards and highlights */
.panel_s .panel-body,
.card,
.table > thead > tr > th {
  border-color: #d7e6ea;
}

.table-hover > tbody > tr:hover {
  background-color: var(--brand-surface);
}

.text-info {
  color: var(--brand-secondary) !important;
}

.text-primary {
  color: var(--brand-primary) !important;
}

/* Settings for the switches */
.onoffswitch-checkbox:checked+.onoffswitch-label {
    background-color: var(--brand-primary);
}

.onoffswitch-checkbox:checked+.onoffswitch-label, .onoffswitch-checkbox:checked+.onoffswitch-label:before {
    border-color: var(--brand-secondary);
}

.onoffswitch-label:before {
    background-color: var(--brand-secondary);
  }

.tw-bg-primary-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(79 166 179/var(--tw-bg-opacity));
}

/* Targets the element when the parent '.tw-group' is hovered */
.tw-group:hover .group-hover\:\!tw-bg-primary-700 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(79 166 179 / var(--tw-bg-opacity)) !important;
}

.tw-group:hover .group-hover\:tw-text-neutral-800 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
}

.tw-w-4 {
    width: 1.5rem;
}

.tw-h-4 {
    height: 1.5rem;
}

.tw-text-neutral-700 {
    --tw-text-opacity: 1;
    color: var(--brand-primary);
}
/* Remove this if you dont want background overlay over the image or adjust per your needs */
body.login_admin:before {
    content: " ";
    background: rgba(31, 31, 31, 0.7);
    min-height: 100%;
    min-width: 100%;
    position: absolute;
}
body.login_admin {
  background: url('https://my.provcon.co.za/media/public/crm_login_page.png') no-repeat center center fixed; /* The full image url*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}