/* 
  Template Name: Admin Press Admin
  Author: Themedesigner
  Email: niravjoshi87@gmail.com
  File: scss
*/

/* 
  Importando la fuente 'Poppins' desde Google Fonts en varios pesos (300, 400, 500, 600, 700) 
  para usarla en diferentes elementos de la página.
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");

/* ----------- Colores y Estilos Generales ----------- */

/* Preloader: Pantalla de carga que se muestra mientras se carga el contenido de la página */
.preloader {
    width: 100%;                /* Ocupa el 100% del ancho de la ventana */
    height: 100%;               /* Ocupa el 100% de la altura de la ventana */
    top: 0px;                   /* Posición en la parte superior */
    position: fixed;            /* Fijo en la ventana */
    z-index: 99999;             /* Muy alto para estar encima de otros elementos */
    background: #fff;           /* Fondo blanco */
}

/* Estilo para el círculo de carga (animación de preloader) */
.preloader .cssload-speeding-wheel {
    position: absolute;         /* Posición absoluta dentro del contenedor */
    top: calc(50% - 3.5px);      /* Centrado verticalmente */
    left: calc(50% - 3.5px);     /* Centrado horizontalmente */
}

/* ----------- Barra Superior (Topbar) ----------- */
.topbar {
    background: #3e515a;        /* Color de fondo de la barra superior */
}

.topbar .navbar-header {
    background: #ffffff;       /* Fondo blanco para el encabezado del navbar */
}

.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
    display: none;              /* Ocultar el logo cuando se usa la clase light-logo */
    color: rgba(255, 255, 255, 0.8); /* Color blanco con opacidad */
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
    color: #ffffff !important;  /* Color blanco para los enlaces del navbar */
}

/* Estilo para el estado hover/focus de los enlaces en la barra superior */
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover,
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
    color: rgba(255, 255, 255, 0.8) !important;  /* Color blanco con opacidad cuando el enlace está enfocado o en hover */
}

/* ----------- Estilos Generales para Elementos ----------- */

/* Enlaces con la clase 'link': color del enlace en hover/focus */
a.link:hover,
a.link:focus {
    color: #5c4ac7 !important; /* Color púrpura en el hover */
}

/* Fondo temático para elementos con la clase 'bg-theme' */
.bg-theme {
    background-color: #5c4ac7 !important; /* Fondo púrpura */
}

/* Estilos para la paginación activa */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #5c4ac7;   /* Fondo púrpura */
    border-color: #5c4ac7;        /* Borde púrpura */
}

/* Estilo para el título del panel derecho */
.right-sidebar .rpanel-title {
    background: #5c4ac7;          /* Fondo púrpura para el título del panel */
}

/* Estilo para las filas activas o en hover en una tabla estilizada */
.stylish-table tbody tr:hover,
.stylish-table tbody tr.active {
    border-left: 4px solid #5c4ac7;  /* Borde izquierdo púrpura cuando la fila está activa o en hover */
}

/* Estilo para el texto temático (color púrpura) */
.text-themecolor {
    color: #5c4ac7 !important; /* Color púrpura */
}

/* Estilo para los enlaces activos en las pestañas del perfil o personalizadas */
.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
    border-bottom: 2px solid #5c4ac7;  /* Borde inferior púrpura */
    color: #5c4ac7;                    /* Color púrpura */
}

/* Estilo para el hover de los enlaces en las pestañas del perfil o personalizadas */
.profile-tab li a.nav-link:hover,
.customtab li a.nav-link:hover {
    color: #5c4ac7;                    /* Color púrpura en hover */
}

/* ----------- Estilos para Botones ----------- */

/* Estilo base para botones con la clase 'btn-themecolor' */
.btn-themecolor,
.btn-themecolor.disabled {
    background: #5c4ac7;  /* Fondo púrpura */
    color: #ffffff;       /* Texto blanco */
    border: 1px solid #5c4ac7;  /* Borde púrpura */
}

/* Estilo para el estado hover de los botones */
.btn-themecolor:hover,
.btn-themecolor.disabled:hover {
    background: #5c4ac7;  /* Fondo púrpura */
    opacity: 0.7;         /* Opacidad en hover */
    border: 1px solid #5c4ac7;  /* Borde púrpura */
}

/* Estilo para el botón cuando está activo o en foco */
.btn-themecolor.active,
.btn-themecolor:focus,
.btn-themecolor.disabled.active,
.btn-themecolor.disabled:focus {
    background: #028ee1;  /* Fondo azul */
}

/* ----------- Estilos para la Navegación en la Barra Lateral (Sidebar) ----------- */

/* Etiquetas con el color temático (púrpura) */
.label-themecolor {
    background: #5c4ac7;  /* Fondo púrpura */
}

/* Estilo para los elementos activos en la barra lateral */
.sidebar-nav > ul > li.active > a {
    color: #5c4ac7;  /* Color púrpura para el enlace activo */
    border-color: #3e515a;  /* Borde gris oscuro para el enlace activo */
}

/* Estilo para los iconos de los elementos activos en la barra lateral */
.sidebar-nav > ul > li.active > a i {
    color: #5c4ac7;  /* Iconos de color púrpura */
}

/* Estilo para los enlaces activos y hover en la barra lateral */
.sidebar-nav ul li a.active,
.sidebar-nav ul li a:hover {
    color: #5c4ac7;  /* Color púrpura en hover y activo */
}

/* Estilo para los iconos de los enlaces activos y hover en la barra lateral */
.sidebar-nav ul li a.active i,
.sidebar-nav ul li a:hover i {
    color: #5c4ac7;  /* Iconos de color púrpura en hover y activo */
}