/* [data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-background: #090a0c;
    --bs-body-background-rgb: 9, 10, 12;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
}
[data-bs-theme=light] {
    color-scheme: light;
    --bs-body-color-rgb: 222, 226, 230; 
    --bs-body-background: #FFF;
    --bs-body-background-rgb: 255, 255, 255;    
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
} */
:root .dark-mode, :root  .light-mode{
    --bs-body-background: var(--clr-blue-secondary);
}

:root .dark-mode{
    color-scheme: dark;
    --bs-body-bg: #202329;
    /* --bs-body-background: #292a2e;
    --bs-body-background-rgb: 9, 10, 12; */
    /* #090a0c */  
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;    
    --bs-emphasis-color-rgb: 255, 255, 255; /* color links de nav*/
}
:root .light-mode {
    color-scheme: light;
    /* --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230; */
    --bs-body-bg: #FFF;
    /* --bs-body-background: #FFF;
    --bs-body-background-rgb: 255, 255, 255;    */
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33,37,41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;    
    --bs-emphasis-color-rgb: 0, 0, 0;
}

:root {
    /* fonts */

    --font-poppins: Poppins;
    --font-inter: Inter;
    --texto: DINPro;

    /* font sizes */
    --texto-size: 0.75rem;
    --font-size-smi: 0.81rem;
    --font-size-base: 1.06rem;
    --pie-de-foto-size: 0.63rem;
    --font-size-sm: 0.88rem;
    --font-size-lg: 1.13rem;
    --ttulo-size: 1.5rem;
    --font-size-mini: 1rem;
    --font-size-3xl: 1.38rem;
    --font-size-15xl: 2.13rem;
    --font-size-5xs: 0.5rem;
    
    --clr-blue-primary: #4360ff;
    --clr-blue-primary-rgb: 67,96, 255;
    --clr-blue-secondary: #14325a;
    --clr-blue-secondary-rgb: 20, 50, 90;
    --clr-blue-terciary: #1c4dae;
    --clr-blue-terciary-rgb: 28,77,174;

    
    --clr-blue-quaternary: #2a64b2;
    --clr-blue-quaternary-rgb: 42, 100, 178;
    
    --bs-body-background: var(--clr-blue-secondary);

    --clr-gray: #747b84;
    --clr-gray-secondary: #666c74;
    --clr-info: #c9defa;
    --bs-info: var(--clr-info);
    --bs-info-bg-subtle: var(--clr-info);
    --bs-info-border-subtle: var(--clr-info);
    --bs-info-text-emphasis: #055160;
    --bs-info-rgb: 201, 222, 250;
    --bs-warning:#07efff;
    --bs-warning-rgb: 7, 239, 255;
    /* --bs-success: #70c6ff;
    --bs-success-rgb: 112, 198, 255; */

    --bs-success-bg-subtle: #aedef4;
    --bs-success-border-subtle: #aedef4;
    /* --bs-success-rgb: 25, 135, 84;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41; */

    /* --clr-white: #eeeff0; */
    --clr-white: #fff;
    --clr-gray:#747b84; 
    --clr-gray-secondary: #565c62;

    --bs-blue: var(--clr-blue-primary);
    --bs-primary: var(--clr-blue-primary);
    --bs-primary-rgb: var(--clr-blue-primary-rgb);
    
    /******************************************* Enlaces *******************************************/
    --bs-link-color: var(--clr-blue-primary);
    --bs-link-color-rgb: var(--clr-blue-primary-rgb);
    --bs-link-hover-color: var(--clr-blue-terciary);
    --bs-link-hover-color-rgb: var(--clr-blue-terciary-rgb);

}

/* [data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
    --bs-btn-border-color: var(--clr-blue-primary); 
    --bs-primary-rgb: 13, 110, 253;    
    --bs-secondary-rgb: 108, 117, 125;
}  */

a {
    text-decoration: none; 
}

a:hover{
    --bs-link-hover-color: var(--clr-blue-terciary);
    --bs-link-hover-color-rgb: var(--clr-blue-terciary-rgb);
}

.btn-primary, .btn-outline-primary{
    /******************************************* Botones *******************************************/
    --bs-btn-border-color: var(--clr-blue-primary);
    --bs-btn-hover-bg: var(--clr-blue-terciary);
    --bs-btn-hover-border-color: var(--clr-blue-terciary);
    /* --bs-btn-active-bg: var(--clr-blue-secondary);
    --bs-btn-active-border-color: var(--clr-blue-secondary); */
    --bs-btn-active-bg: var(--clr-blue-primary);
    --bs-btn-active-border-color: var(--clr-blue-primary);

}

.btn-danger, .btn-outline-danger{
    --bs-btn-bg: #3F51B5;
    --bs-btn-border-color: #3F51B5;
    --bs-btn-hover-bg: #28336e;
    --bs-btn-hover-border-color: #28336e;
}


.btn-primary{
    --bs-btn-bg: var(--clr-blue-primary);
}
.btn-outline-primary{
    --bs-btn-color: var(--clr-blue-primary);
}


.fs-11 {font-size: 11px;}
.fs-12 {font-size: 12px;}
.fs-13 {font-size: 13px;}


body {
    font-family: var(--texto);
    font-size: var(--font-size-base);
    background-color: var(--bs-body-background) !important;
}

.btn {
    --bs-btn-font-size: var(--font-size-lg);
}

.dropdown-menu{
    --bs-dropdown-font-size: var(--font-size-lg);
}

.small, small {
    font-size: .905rem;
}


@media (min-width: 768px) {
    body {
        background: url('../../../static/images/backgrounds/background-white.png') no-repeat top left,
        url('../../../static/images/backgrounds/background-white.png') no-repeat bottom right;
        background-repeat: no-repeat;
        background-position: left 0 top 100px, right 0 bottom -150px;
        background-size: 150px, 150px, 200px, 200px;
    }
}

/* Ocultar elementos */
.hidden {display: none;}

.title-gray-Montserrat{
    color: var(--clr-gray);
    font-family: var(--texto);
}

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

.bg-secondary-blue{ background: var(--clr-blue-secondary); }
.text-secondary-blue{ color: var(--clr-blue-secondary); }


/* A_Kyc + A_Perfil index */

.f_bac {
    border-radius: 2px;
    box-shadow: 0px 4px 25px #00000026;
}

/* A_ticket select, A_Kyc/index.html, A_Kyc/empresa/documentacion_empresa.html */

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

/* se usa en A_Operar comprar/vender transferencia & header top */

.component {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    width: 41px;
    height: 41px;
    background-color: var(--clr-blue-primary);
    border-radius: 20.5px;
    box-shadow: 0px 2px 2px #00000040;
}

/* styles.css */
.wizard-step {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 10px;
    width: 425px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.component .div {
    width: 74px;
    position: relative;
    height: 30px;
}

.component .img {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
}


.nav-link {
    transition: 0.3s;
}

.nav-tabs .nav-link {
    border: unset;
}

/* ################### FOOOTER ################### */

footer{
    font-size: var(--font-size-mini);
    color: var(--clr-white); /*#e5e5e5*/
    background-color: var(--clr-blue-quaternary);
}

footer .nav-item a, footer li {
    padding: 0.25rem 0.5rem;
    margin: 0;
}
footer .nav-item:hover {
    background-color: var(--clr-white); 
    color: #000!important;
    border-radius: 5px; 
    top: 1px;
    display: inline-block;
}

footer .nav-item:hover .nav-link {
    color: #000!important; 
    text-decoration: none; 
}

footer .nav-item:hover .frame {
    opacity: 0.8; 
}
footer footer div, footer li, footer a, footer li p {
    color: var(--clr-white)!important; 
}
footer #riscos-footer{
    background-color: var(--clr-blue-terciary);
}

/* ################### HEADER ################### */

#btc-price-container{
    display: flex;
    align-items: center;
    font-size: 15px;
    margin-top: 0;
    min-height: 1.75rem;
    padding-top: 0.5rem;
}
#help-container {
    font-size: 15px;
    padding-top: 0.5rem;
}

@media (max-width: 912px) {
    .header_top {
        font-size: 15px;
    }
}
@media (max-width: 767px) {
    #btc-price-container {
        display: none;
    }
    #header-container {
        display: none;
    }
    header {
        margin-top: 0;
    }
    #announcement-text {
        margin-top: 0.80rem!important;
        font-size: 0.80rem!important;
    }
}
@media (max-width: 992px) {
    #header-help-text, #header-phone-text, #btc-price {
        font-size: 0.92rem;
    }
    #btc-price-container {
        margin-top: 0.5rem;
    }
}

/* ################### HEADERTOP ################### */

.estilo_boton.active {
    padding-left: 100px;
}

 .dropdown-menu {
    width: 250px;
}
@media (max-width: 767px) {
    .dropdown {
    display: block;
    }
    .dropdown-menu {
        width: 100%;
    }
}
#header-user-email {
    word-break: break-all;
    padding: 0.75rem;
}
header .icon-container {
    width: 25px;
    height: 25px;
    background-color: var(--clr-blue-primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-right: 1rem;
}

header .icon {
    color: white;
    font-size: 14px;
}

.component .person {
    position: absolute;
    width: 27px;
    height: 27px;
    top: 7px;
    left: 7px;
}


header .icon-container:hover, header .component:hover{
    background: var(--clr-blue-terciary);
}