/* ===============================
   NAVBAR THEME
=================================*/

.navbar {
  background: linear-gradient(135deg, #a31818, #c91f1f) !important;
  border: none;
  box-shadow: 0 4px 15px rgba(163,24,24,0.25);
}

.navbar-brand {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 1px;
}

.navbar-brand:hover {
  color: #ffffff !important;
  opacity: 0.9;
}

.navbar-nav > li > a {
  color: #fff !important;
  font-weight: 600;
  transition: 0.3s ease;
}

.navbar-nav > li > a:hover {
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #fff !important;
}

/* Toggle button */
.navbar-toggle {
  border-color: rgba(255,255,255,0.6);
}

.navbar-toggle .icon-bar {
  background-color: #fff;
}

/* ===============================
   FOOTER SECTION
=================================*/

.panel-footer-section {
  margin-top: 40px;
}

/* Footer cards */
.footer-card {
  background: linear-gradient(135deg, #a31818, #c91f1f);
  padding: 28px;
  border-radius: 18px;
  color: #fff;
  margin-bottom: 20px;

  box-shadow:
  0 10px 25px rgba(163,24,24,0.28);
}

.footer-title {
  font-weight: 700;
  margin-bottom: 10px;
}

.footer-card p {
  opacity: 0.92;
  margin-bottom: 15px;
}

/* Footer buttons */
.footer-btn {
  display: flex;
  align-items: center;
  gap: 10px;

  background: rgba(255,255,255,0.15);

  padding: 12px 18px;
  border-radius: 40px;

  color: #fff;
  text-decoration: none;

  margin-top: 12px;
  font-weight: 600;

  transition: 0.3s ease;
  position: relative;
}

.footer-btn:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Icon */
.footer-icon {
  width: 20px;
  height: 20px;
}

/* ===============================
   NOTIFICATION BADGE
=================================*/

.footer-btn.notification::after {
  content: "1";

  position: absolute;
  right: 15px;
  top: 50%;

  transform: translateY(-50%);

  background: #ff3b3b;
  color: #fff;

  font-size: 11px;
  font-weight: 700;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===============================
   FORCE NAVBAR RED GRADIENT
=================================*/

.navbar-default {
  background: linear-gradient(135deg, #a31818, #c91f1f) !important;
  border: none !important;
}

/* Remove grey border */

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border: none !important;
}

/* Navbar links */

.navbar-default .navbar-nav > li > a {
  color: #ffffff !important;
  font-weight: 600;
}

/* Hover */

.navbar-default .navbar-nav > li > a:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border-radius: 6px;
}

/* Brand text */

.navbar-default .navbar-brand {
  color: #ffffff !important;
  font-weight: 700;
}

/* Mobile toggle */

.navbar-default .navbar-toggle {
  border-color: rgba(255,255,255,0.5) !important;
}

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

/* ===============================
   ACTIVE MENU STYLE
=================================*/

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {

  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;

  border-radius: 8px;
  font-weight: 700;
}

/* ===============================
   MENU HOVER
=================================*/

.navbar-default .navbar-nav > li > a:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff !important;

  border-radius: 8px;
  transition: 0.2s ease;
}

/* ===============================
   BODY MESSAGE BOX
=================================*/

.panel-body-box {
  border: 1px solid #e5e5e5;
  border-radius: 14px;

  padding: 25px;

  background: #fff;
  margin-top: 20px;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.05);
}

/* spacing for lines */

.panel-body-box p {
  margin-bottom: 8px;
}

/* Scroll area */

.main-message-scroll {
  max-height: 180px;
  overflow-y: auto;
}

/* ===============================
   SCROLLBAR
=================================*/

.main-message-scroll::-webkit-scrollbar {
  width: 6px;
}

.main-message-scroll::-webkit-scrollbar-thumb {
  background: #c91f1f;
  border-radius: 10px;
}

/* ===============================
   MOBILE NAV PILLS
=================================*/

@media (max-width: 768px) {

  .nav-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }

  .nav-pills li {
    float: none !important;
    display: inline-block;
  }

}

/* ===============================
   MOBILE SEARCH
=================================*/

@media (max-width:768px){

  .nav-pills li.search{
    float:none !important;
    width:100%;
    margin-top:10px;
  }

  .nav-pills li.search form{
    width:100%;
  }

}

/* ===============================
   EXTRA PREMIUM TOUCHES
=================================*/

.footer-card,
.panel-body-box,
.navbar {
  transition: all .3s ease;
}

.footer-card:hover {
  transform: translateY(-3px);
}

.panel-body-box:hover {
  box-shadow:
  0 14px 28px rgba(163,24,24,0.08);
}
/* =========================================================
   LOGIN CARD STYLE
========================================================= */

.login-card{
  background: #f3f3f3;

  border-radius: 10px;
  border: 1px solid #d7d7d7;

  padding: 42px 48px;
  margin-top: 55px;

  box-shadow:
  0 2px 6px rgba(0,0,0,0.05);
}

/* =========================================================
   INPUT STYLE
========================================================= */

.form-control{
  height: 62px;

  border-radius: 10px;
  border: 1px solid #cfd7e3;

  background: #dfe6f1;

  color: #111827;
  font-size: 15px;
  font-weight: 500;

  padding: 0 18px;

  box-shadow:
  inset 0 1px 2px rgba(0,0,0,0.04);

  transition: all .25s ease;
}

.form-control::placeholder{
  color: #7b8794;
}

.form-control:focus{
  background: #e7edf6;
  border-color: #a31818;

  box-shadow:
  0 0 0 3px rgba(163,24,24,0.08) !important;
}

/* =========================================================
   BUTTON STYLE
========================================================= */

.login-btn{
  height: 56px;

  border: 0 !important;
  border-radius: 8px;

  background:
  linear-gradient(135deg,#a31818,#c91f1f) !important;

  color: #ffffff !important;

  font-size: 15px;
  font-weight: 700;

  padding: 0 38px;

  box-shadow:
  0 6px 14px rgba(163,24,24,0.18);

  transition: all .25s ease;
}

.login-btn:hover{
  background:
  linear-gradient(135deg,#8d1414,#b71c1c) !important;

  transform: translateY(-1px);
}