@import url('colors.css');
@import url('sizes.css');

body{
    transition: var(--transition-medium);
    background: var(--dark);
}

h1{color:white}

.navbar, .footer .row{background: var(--dark-soft)}
.navbar-nav .nav-link{color: white}

.navbar-nav .nav-item.active{background: var(--dark)}

.navbar-brand svg{
    transition: var(--transition-slow);
    /* fill: var(--grey-30); */
    fill: white;
}

.form-group, .input-group{ border: 1px solid var(--blue-brand)}
.form-group i, .input-group i{color:white}

.input-group input::placeholder{color:white}
.input-group input::-webkit-input-placeholder{color:white}
.input-group input::-moz-placeholder{color:white}
.input-group input:-ms-input-placeholder{color:white}
.input-group input:-moz-placeholder{color:white}

.form-group input::placeholder{color:white}
.form-group input::-webkit-input-placeholder{color:white}
.form-group input::-moz-placeholder{color:white}
.form-group input:-ms-input-placeholder{color:white}
.form-group input:-moz-placeholder{color:white}


.form-switch .form-check-input:checked{
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-check-input:checked{background-color: var(--dark)}

.form-check-label, .input-group, .navbar-toggler, .nemo, input.form-control{color:white}
/* .form-check-label, .form-control, .navbar-toggler, .input-group > .form-control, .nemo{color:white} */

.instrument, .valor, h6, thead th{color:white}

.table-condensed .dow{color:var(--grey)}

.combo tr, .comment, .listafondos tr, #dataHistorica tr{border-bottom:1px solid var(--soft-gris)}

.label, .number, .puntas, .comment i{color:white}
.head-comment, .textcomment a, .comment .label{color: white}
/* .textcomment a{color: var(--grey-2)} */

.periodo ul{background: var(--2433)}
.periodo .nav-item a{color: var(--blue-71be)}
.periodo .nav-item .active{color: white}

.dropdown-menu{background:var(--dark-soft)}
.dropdown-item{color:white}

.footer p{color: var(--grey-2)}

.navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(230,230,230, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.badge{
    background: var(--dofo);
    color:var(--dark)
}

.btn {
    color: white;
    border: var(--bs-btn-border-width) solid var(--dofo);
}

.modal-content{background-color: var(--2433)}
.modal-content p, #dataHistorica th, #dataHistorica td{color:white}

.datepicker-switch, .prev, .next{color:var(--blue-70)}

.btn-close{
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
}

ul.nav li{border-right: 1px solid var(--dark)}
/* .input-group{background: red} */