:root {

    /* Colors */
    --black: #000000;
    --white: #ffffff;
    --primary-black: #181C32;
    --secondary-white: #F5F8FA;
    --grey: #A1A5B7;

    --light-blue: #00E5BA;
    --aqua: #009A9C;
    --primary-blue: #006999;
    --purple: #29366D;
    --dark-blue: #00284C;


    /* Fonts */
    --primary-font-family: "Segoe UI";
}

/* Backgrounds */

.bg-secondary-white {
    background-color: var(--secondary-white);
    border-color: var(--secondary-white);
}

.bg-primary-blue {
    background-color: var(--primary-blue) !important;
}

/* Texts */

.text-primary-black {
    color: var(--primary-black);
}

.color-aqua {
    color: var(--aqua);
}

.color-aqua {
    color: var(--purple);
}

.color-primary-blue {
    color: var(--primary-blue);
}

.border-purple {
    border-color: var(--aqua) !important;
}

.color-black {
    color: var(--black);
}

.color-white {
    color: var(--white) !important;
}

.fw-regular {
    font-weight: 400 !important;
}

/* Login */

.img-cover {
    background-image: url("../media/custom/cover_login.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.remember-password-section {
    display: flex;
    justify-content: space-between;
}

.remember-checkbox {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.btn-aqua {
    padding: 10.3px 19px;
    outline: 0;
    border: none;
    border-radius: 0.475rem;
    color: var(--white);
    background-color: var(--aqua);
    border-color: var(--aqua);
}

.btn-aqua:hover {
    background-color: var(--aqua);
    color: var(--white);
}

/* Template */

[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background-color: var(--dark-blue) !important;
    /* width: 250px; */
}

/* [data-kt-app-sidebar-hoverable=true] .app-sidebar .app-sidebar-wrapper{
    width: 250px;
} */

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link {
    color: var(--white) !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: var(--white) !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
    background-color: var(--white) !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: var(--white) !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-arrow::after {
    background-color: var(--white) !important;
}

/* .menu-state-bg .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    color: var(--secondary-red) !important;
    background-color: var(--secondary-red-hover) !important;
} */

/* .menu-state-bg-light-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    color: var(--secondary-red) !important;
    background-color: var(--secondary-red-hover) !important;
} */
.menu-state-bg-light-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) i {
    color: var(--secondary-red) !important;
}

.app-sidebar-menu .overflow-hidden .flex-column-fluid {
    width: 200px !important;
}

.btn-primary {
    background-color: var(--primary-blue) !important;
}

.title-icon {
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.btn-bg-aqua {
    background-color: var(--aqua);
}

.btn-bg-aqua:hover {
    background-color: var(--aqua);
    color: var(--secondary-white);
}

.bg-light-secondary {
    background-color: #FBFFFE !important;
}


.card-client-info {
    display: flex;
    column-gap: 10px;
}

.card-client-info-l {
    width: 60%;
}

.card-client-info-r {
    width: 40%;
}

.image-content {
    display: flex;
    justify-content: space-between;
}

.content-l {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-r {
    width: 50%;
}

.content-header {
    background-color: var(--primary-blue);
    border-top-right-radius: .475rem;
    border-top-left-radius: .475rem;
    padding: 5px;
    /* border-radius: .475rem 0  .475rem  0!important; */
}

.content-body {
    padding: 5px;
    display: flex;
    justify-content: space-between;
}

.content-body-textarea {
    padding: 5px;
    display: flex;
    column-gap: 5px;
}

.body-item-l {
    width: 50%;
}

.body-item-r {
    width: 50%;
}

.toolbar-top {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}

.top-item {
    text-align: center;
}

.top-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
 CHARTS
*/

/* No Contact Result Pie Chart */
#chartdiv {
    width: 100%;
    height: 300px;
}

/* No Contact Result Pie Chart */

/* Contact Result Pie Chart */
#chartdiv2 {
    width: 100%;
    height: 300px;
}

/* Contact Result Pie Chart */


/* Top 5 Executives Bar Chart */
#chartdiv3 {
    width: 100%;
    height: 500px;
}

/* Top 5 Executives Bar Chart */

/* Classification Status Bar Chart */
#chartdiv4 {
    width: 100%;
    height: 500px;
}

/* Classification Status Bar Chart */

/* Work Queue Segmentation Bar Chart */
#chartdiv5 {
    width: 100%;
    height: 400px;
}

/* Work Queue Segmentation Bar Chart */

/* Work Queue Bar Chart */
#chartdiv6 {
    width: 100%;
    height: 400px;
}

/* Work Queue Bar Chart */

/*  Work Queue Pie Chart */
#chartdiv7 {
    width: 100%;
    height: 350px;
}

/*  Work Queue Pie Chart */

/* Portfolio Segmentation Bar Chart */
#chartdiv8 {
    width: 100%;
    height: 800px;
}

/* Portfolio Segmentation Bar Chart */

/* % Advance */
#chartdiv9 {
    width: 100%;
    height: 400px;
}


/* Penetration total by status */
#ptotalByStatus {
    width: 100%;
    height: 450px;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}
/* % Advance */

/*
 CHARTS
*/

.number-marker {
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.header__table__bg {
    background-color: #006999;
    color: white;
    text-align: center;
}
.tbody__table{
    text-align: center !important;
}


.sweet_loader {
	width: 140px;
	height: 140px;
	margin: 0 auto;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-name: ro;
	transform-origin: 50% 50%;
	transform: rotate(0) translate(0,0);
}
@keyframes ro {
	100% {
		transform: rotate(-360deg) translate(0,0);
	}
}

#scrollModal {
    height: 400px; /* Ajusta este valor según tus necesidades */
    overflow-y: scroll;
}

.disabled-option {
    color: gray; /* Color del texto en gris */
    background-color: #f0f0f0; /* Color de fondo más claro para resaltarlo */
}

/* Definir el tamaño mínimo y máximo del modal */
.modal-custom .modal-content {
    min-height: 500px; /* Altura mínima del modal */
    max-height: 80vh;  /* Altura máxima relativa al viewport */
    overflow-y: auto;  /* Hacer el contenido scrollable si excede la altura máxima */
}

.modal-content-move {
    position: relative;
    z-index: 1051; /* Asegura que esté por encima de otros elementos */
}

.modal-header-move {
    cursor: move; /* Cambia el cursor para indicar que se puede arrastrar */
}