@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --theme-colour-1-values: 61, 67, 193; /* Blue */
  --theme-colour-2-values: 168, 0, 150; /* Purple */
  --theme-colour-3-values: 28, 5, 59; /* Dark Blue */
  --met-colour-values: 0, 49, 160; /* MET Blue */

  --theme-colour-1: rgb(var(--theme-colour-1-values));
  --theme-colour-2: rgb(var(--theme-colour-2-values));
  --theme-colour-3: rgb(var(--theme-colour-3-values));
  --met-colour: rgb(var(--met-colour-values));

  --theme-gradient: linear-gradient(
    to right,
    var(--theme-colour-2) 0,
    var(--theme-colour-1) 100%
  );
}
/* FONTS */
body,
body .site-menubar {
  font-family: "Urbanist", sans-serif !important;
  font-optical-sizing: auto !important;
}

/* GENARAL BACKGROUNDS AND BUTTONS */
.bg-gold {
  background: var(--theme-gradient) !important;
  border-color: var(--theme-colour-1) !important;
  background-attachment: fixed !important;
}

.navbar.bg-gold,
.navbar .bg-gold {
  background: var(--met-colour) !important;
  border-color: var(--met-colour) !important;
}

.btn-gold,
.btn-success:not(.ics),
.btn-primary:not(.ics),
/* .btn-danger, */
.btn-info:not(.ics),
.btn-warning:not(.ics),
.btn-primary.btn-outline:not(.ics),
.btn-dark:not(.ics),
.label-success:not(.ics) {
  color: #fff !important;
  background: var(--theme-gradient) !important;
  border: 1px solid var(--theme-gradient) !important;
}

#all_user_notification .btn-success:not(.ics) {
  background: #526069 !important;
  border: 1px solid #526069 !important;
}
#delivery_status .panel-title {
  padding-top: 12px;
  padding-bottom: 12px;
}
#account_setup .panel-title {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
#groups-none-bar,
#groups-active-bar {
  background-color: var(--theme-colour-1) !important;
}

#contacts .badge {
  background-color: #526069 !important;
}
.page-aside .btn.btn-icon {
  color: #fff !important;
  background: var(--theme-colour-1) !important;
}

.btn:hover,
.btn-gold:hover,
.btn-success:hover {
  opacity: 0.8 !important;
}

.text-gold {
  color: var(--theme-colour-1) !important;
}

.badge-success:not(.ics),
.badge-danger:not(.ics),
.badge-info:not(.ics) {
  color: #fff;
  background: rgba(var(--theme-colour-1-values), 1) !important;
}

.pagination > ul.pagination > li.active > a {
  color: #fff;
  background-color: var(--theme-colour-1) !important;
  border-color: var(--theme-colour-1) !important;
}

/* TOP MENUBAR */
body .site-menubar,
body .site-menubar .site-menu .dropdown-menu {
  background-color: var(--theme-colour-3);
}

/* PAGE HEADER */
.page-header.bg-grey-200,
:not(.page-header) > .page-title {
  background: linear-gradient(
    to right,
    rgba(var(--theme-colour-2-values), 0.05) 0,
    rgba(var(--theme-colour-1-values), 0.05) 100%
  ) !important;
}
.page-header .page-title i.icon {
  color: var(--theme-colour-2) !important;
}

/* SIDEBAR */
:not(.superadmin) > .page-aside {
  color: #fff !important;
  background: linear-gradient(
    to bottom,
    var(--theme-colour-2) 0,
    var(--theme-colour-1) 800px
  ) !important;
}

.page-aside .panel,
.page-aside .panel-heading,
.page-aside .bg-white,
.page-aside .bg-grey-300,
.page-aside .bg-grey-600,
.page-aside .light {
  color: #fff !important;
  background: transparent !important;
}
.panel-heading i.icon,
:not(.superadmin) > .page-aside #admin_nav .list-group-item > .icon,
:not(.superadmin) > .page-aside .list-group-item,
:not(.superadmin) > .page-aside .list-group-item i.icon,
:not(.superadmin) > .page-aside .list-group-item > i.icon,
:not(.superadmin) > .page-aside #admin_nav .nav-pills > li.active > a > i.icon {
  color: #fff !important;
}
.page-aside .list-group-item.active {
  color: #fff !important;
  border-left: none !important;
  background: var(--theme-colour-3) !important;
}
.page-aside .list-group-item.active:focus,
.page-aside .list-group-item.active:hover {
  color: #fff;
  background: rgba(var(--theme-colour-3-values), 0.3) !important;
  /* border-left: 5px solid var(--theme-colour-3) !important; */
}
.page-aside .list-group-item:focus,
.page-aside .list-group-item:hover,
.page-aside .table-hover > tbody > tr:hover {
  background: rgba(var(--theme-colour-3-values), 0.3) !important;
}

/* SIDEBAR CLOCK */
.page-aside .display {
  background: rgba(0, 0, 0, 0.3) !important;
  box-shadow: none !important;
}
#clock.light .digits div span {
  background-color: #fff !important;
  border-color: #fff !important;
}
#clock.light .digits div.dots::before,
#clock.light .digits div.dots::after {
  background-color: #fff !important;
}

/* PROFILE PAGE */
#admin_nav .nav-pills > li.active > a {
  background: var(--theme-colour-3) !important;
  color: #fff !important;
}
.panel-heading.bg-grey-800 {
  background: var(--theme-gradient) !important;
}
div.panel-heading.bg-gold {
  border-color: var(--theme-gradient) !important ;
}

/* BROADCAST BUILDER */
.progress-bar-info {
  background: var(--theme-gradient) !important;
}
.message_channel .btn-outline.btn-default.active {
  background: var(--theme-gradient) !important;
  background-attachment: fixed !important;
}
.message_channel .btn-outline.btn-default {
  background-color: transparent !important;
}

/* DASHBOARD */
.widget-header.bg-gold.white,
.panel-dark > .panel-heading,
.panel-dark > .panel-heading > .panel-title {
  color: #fff;
  background: var(--theme-gradient) !important;
  border-color: var(--theme-gradient) !important ;
}
.widget-header .btn,
.panel-heading:not(.note-toolbar) .btn,
.panel-dark .panel-actions .btn {
  color: #fff;
  background: rgba(var(--theme-colour-2-values), 1) !important;
  border-color: rgba(var(--theme-colour-2-values), 1) !important ;
}

/* SIDEBAR RECENT ACTIVITY */
.page-aside .page-aside-title.bg-grey-600 {
  background: rgba(0, 0, 0, 0.2) !important;
}
.page-aside #activity-stream li:after {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.page-aside #activity-stream li:hover {
  background: rgba(var(--theme-colour-3-values), 0.3) !important;
  color: #fff !important;
}
/* SIDEBAR SETTINGS */
.page-aside .overlay-background .list-group-item:focus,
.page-aside .overlay-background .list-group-item:hover {
  color: #fff;
  background: rgba(var(--theme-colour-2-values), 0.7) !important;
}

/* LOGIN PAGE */
.page-brand-info {
  background: linear-gradient(
    135deg,
    var(--theme-colour-1) 0,
    var(--theme-colour-2) 100%
  ) !important;
}

.page-login-main {
  background: rgba(var(--theme-colour-1-values), 0.1) !important;
}

.slidePanel .bg-gold .list-text,
.slidePanel .bg-gold .item-actions {
  color: #fff !important;
}