:root {
    --color-datascan-1: #F6E8FC;
    --color-datascan-2: #EDD1F9;
    --color-datascan-3: #DBA4F3;
    --color-datascan-4: #CA76EE;
    --color-datascan-5: #B849E8;
    --color-datascan-6: #A61DE1;
    --color-datascan-7: #8517B4;
    /*nueva paleta colores pastel*/
    --color-datascan2-6: #4962E7;
    --color-datascan2-7: #E7EAFC;
    --color-datascan2-8: #4962e705;
    --color-datascan2-9: #CA76EE;
    /*COLORES PARA FAJU*/
    --footer-bg: #1D3CE0;
    --sidebar-text-color: #FFFFFF;
    --sidebar-bg-color: #2DC4C5;
    --sidebar-hover: #A1E9EA;
    --sidebar-active-hover: #4ED6D7;
    --icons-color: #2DC4C5;
    --hero-bg: #4962e7;
    --color-botom-bg: #2DC4C5;
    --color-botom-bg-hover: #249B9B;
    --shadow-inputs: #CBF3F3;
    --color-border-inputs: #2DC4C5;
}


/*
    ================
    BACKGROUND-COLOR
    ================
*/
.bg-datascan-1 {
    background-color: var(--color-datascan-1);
}
.bg-datascan-2 {
    background-color: var(--color-datascan-2);
}
.bg-datascan-3 {
    background-color: var(--color-datascan-3);
}
.bg-datascan-4 {
    background-color: var(--color-datascan-4);
}
.bg-datascan-5 {
    background-color: var(--color-datascan-5);
}
.bg-datascan-6 {
    background-color: var(--color-datascan-6);
}
.bg-datascan-7 {
    background-color: var(--color-datascan-7);
}
/*nueva paleta colores pastel*/
.bg-datascan2-7 {
    background-color: var(--color-datascan2-8);
}

/*
    ==========
    TEXT COLOR
    ==========
*/
.text-datascan-1 {
    color: var(--color-datascan-1);
}
.text-datascan-2 {
    color: var(--color-datascan-2);
}
.text-datascan-3 {
    color: var(--color-datascan-3);
}
.text-datascan-4 {
    color: var(--color-datascan-4);
}
.text-datascan-5 {
    color: var(--color-datascan-5);
}
.text-datascan-6 {
    color: var(--color-datascan-6);
}
.text-datascan-7 {
    color: var(--color-datascan-7);
}

/*
    =======
    BUTTONS
    =======
*/
.btn-datascan {
    background-color: var(--color-botom-bg) !important;
    color: #FFFFFF !important;
}
    .btn-datascan:hover {
        background-color: var(--color-botom-bg-hover) !important;
    }
    .btn-datascan:active {
        background-color: var(--color-botom-bg) !important;
        border-color: var(--color-botom-bg) !important;
    }

.btn-outline-datascan {
    background-color: #FFFFFF !important;
    border-color: var(--color-datascan-5) !important;
    color: var(--color-datascan-5) !important;
}
    .btn-outline-datascan:hover,
    .btn-outline-datascan:active {
        background-color: var(--color-datascan-5) !important;
        border-color: var(--color-datascan-5) !important;
        color: #FFFFFF !important;
    }

/*
    ====================
    INPUT [TYPE = TEXT]
    ====================
*/
.form-control:active {
    border-color: var(--color-border-inputs) !important;
}

.form-control:focus {
    border-color: var(--color-border-inputs) !important;
    box-shadow: 0 0 0 .25rem var(--shadow-inputs) !important;
}