.bk-web {
    background-color: #f5f5f7e0
}

.bk-web-secundary {
    background: #f8f9fa
}

.square {
    box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);
    transition: all .3s cubic-bezier(0, 0, .5, 1);
    background: rgba(22, 22, 23, .8) !important;
    padding: 0.3em;
    margin-bottom: 5em
}

.text-color {
    color: rgba(255, 255, 255, .8)
}

.footer {
    padding-left: 1em;
    padding-right: 1em;
    margin: 0 !important;
    margin-top: 3rem !important;
    background: #fff !important
}

h1 {
    font-size: 32px;
    font-weight: 700
}

i,
.nav-link,
.btn-refresh .text-muted,
.btn-send .text-muted,
.btn-repeat .text-muted,
.btn-login .text-muted,
.btn-upgrade-pro .text-muted,
.btn-home,
.btn-send-err {
    color: rgba(255, 255, 255, .8) !important
}

hr:not(.separador) {
    border: none
}

.card-header {
    background: #f8f9fc !important;
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f8f9fc !important;
    border-bottom: 1px solid #e3e6f0;
}

footer p {
    font-size: 14px
}

.jumbotron p {
    font-size: 16px
}

.card {
    box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);
    transition: all .3s cubic-bezier(0, 0, .5, 1)
}

.lead.card {
    padding: 30px;
    color: var(--bs-body-color) !important
}

.center-margin {
    margin: 0 auto
}

.input-group.mb-3.center-margin {
    width: 35em
}

nav.navbar.navbar-expand-lg.bg-body-tertiary.fixed-top {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
    transition: all .3s cubic-bezier(0, 0, .5, 1);
    background: #fff!important;
    padding: 0.3em;
    margin-bottom: 5em
}

#notificaMail {
    margin: 1.5em;
    height: 30rem
}

.btn-copy,
.btn-refresh,
.btn-send,
.btn-repeat,
.btn-home,
.btn-send-err,
.btn-login,
.btn-upgrade-pro {
    background: #15a362 !important;
    border-color: #15a362 !important
}

.btn-premium {
    background: #FFEB3B !important;
    border-color: #FFEB3B !important;
}

.btn-premium:hover {
    background: #FFEB3B !important;
    border-color: #FFEB3B !important;
}

.card[data-numeroaadjunto] {
    width: 10rem
}

@media only screen and (max-width: 600px) {
    #notificaMail {
        margin: 1.5em 0 2em 0
    }
    .input-group.mb-3.center-margin {
        width: auto
    }
    .card[data-numeroaadjunto] {
        width: 6rem
    }
    .footer ul.nav {
        justify-content: center !important;
        margin-top: 1em
    }
    .footer a.col-md-4 {
        display: none !important
    }
}

@media only screen and (max-width: 767px) {
    footer.footer {
        flex-direction: column
    }
}

@media (min-width: 600px) {
    .home-index .blog .col-md-3,
    .home-index .blog .col-md-4 {
        padding-left: 2%
    }
}

#cajaMensajes.card-body .row {
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
    padding-bottom: .8em;
    padding-top: .8em
}

#cajaMensajes.card-body .row[data-number],
div#arrow-left,
div[data-numeroaadjunto] {
    cursor: pointer
}

#cajaMensajes.card-body {
    padding-top: 0
}

pre {
    text-align: justify;
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

#arrow-left {
    text-align: left
}

#arrow-left i {
    color: #454545 !important
}

.btn-repeat {
    border-radius: 6px !important
}

button#copy {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word
}

.jumbotron.text-start a,
footer p,
footer .nav-link {
    color: #000000 !important;
    text-decoration: none !important
}

#cc-main .cm {
    background: #454545
}

#cc-main .cm__desc {
    color: rgba(255, 255, 255, .8) !important
}

#cc-main .cm__btn {
    background: #FFFFFF
}

#cc-main .cm__btn--secondary {
    background: #000000;
    border-color: #000000;
    color: rgba(255, 255, 255, .8)
}

.no-leido {
    font-weight: 700
}

i.fa.fa-file,
i.fa.fa-download {
    color: #454545 !important;
    font-size: xx-large;
    padding-top: 0.5em;
    padding-bottom: 0.5em
}

.card.mx-1:hover>.fa-file:before {
    content: "\f019";
    color: rgb(255 255 255 / 75%) !important
}

.card.mx-1:hover>#cajaMensajes.card-body.p-0 .text-muted,
.card[data-nombremail]:hover #cajaMensajes.card-body,
.color-text {
    color: rgb(255 255 255 / 75%) !important
}

.card.mx-1:hover {
    background: #454545bd
}

.card.mx-1 {
    transition-duration: .5s
}

.card[data-nombremail] #cajaMensajes.card-body {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.card[data-nombremail] #cajaMensajes.card-body small {
    font-size: .775em
}

a.dropdown-item {
    color: #000000 !important
}

ul.dropdown-menu.show {
    --bs-dropdown-min-width: auto
}

ul.dropdown-menu img.img-fluid.img-thumbnail {
    width: 50px;
    padding: 0
}

ul.dropdown-menu li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0.1em
}

ul.dropdown-menu a.dropdown-item {
    padding: 0 0 0 0.3em
}

.dropdown .dropdown-item:active {
    color: #FFFFFF !important;
    background-color: #434343
}

button#dropdownMenuButton1 {
    padding: 0.2em;
    display: flex;
    align-items: center;
    background: none;
    border: 0;
    color: black
}

#dropdownMenuButton1 img.img-fluid.img-thumbnail {
    width: 27px;
    padding: 0;
    margin-right: 0.3em
}

button.cm__btn[data-role="all"] {
    background: #2A652A !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important
}

button.cm__btn[data-role="necessary"] {
    background: #454545 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important
}

button.cm__btn.cm__btn--secondary[data-role="show"] {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important
}

#cc-main .cm__btn:hover {
    filter: brightness(0.8) !important
}

#blogCat a {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) !important
}

.blog .col-md-3,
.blog .col-md-4 {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.spinner-border {
    --bs-spinner-animation-speed: 1.25s;
    border: var(--bs-spinner-border-width) solid #80808033;
    border-right-color: #000000
}

iframe#iframeMail {
    height: 90%;
    width: 100%;
}

.blog-home img.img-fluid {
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
}

.logo {
    max-width: 65%;
}

.asunto {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

i.fa.fa-envelope {
    color: black !important;
}

i.fa.fa-exclamation-circle {
    color: #FF5733!important;
    font-size: xx-large
}

#notificarError small:hover {
    text-decoration: underline;
    cursor: pointer
}

#notificarError {
    margin: 0.3em 1.5em 1.5em 1.5em;
}

.toast-header {
    background: #d1e7dd
}

button#servicioPremium {
    display: none
}