.breadcrumb {
    display: none;
}

.container{
    background-color: transparent;
}

.widget {
    background: none;
    margin: 0;
    position: relative;
}

.widget.widget-5 .widget-head {
    border-bottom: 5px solid #eee;
    height: 30px;
    line-height: 30px;
}

.widget.widget-5 .widget-head .heading {
    text-transform: uppercase;
    color: #222;
    font-family: "Raleway", sans-serif;
    text-shadow: none;
    padding: 0;
    margin: 0;
    height: 30px;
    line-height: 30px;
    border-bottom: 5px solid var(--azul-claro);
}

.widget.widget-5 .widget-head .details {
    font-size: 8pt;
}

#wrapper>.navbar {
    background-color: transparent;
}

#wrapper>.navbar>.container {
    background-color: transparent;
}

.innerLR>.widget>.widget-head {
    background-color: transparent;
}

.innerLR {
    margin-top: 1rem;
}



.widget-stats {
    background-color: transparent;
    border-radius: 10px;
    color: var(--azul-claro);
    border: 0.5px solid var(--azul-claro);

    & .txt>strong {
        color: var(--azul-claro);
    }

    & span::before {
        color: var(--azul-claro);
    }

    &:hover {
        transform: scale(1.05);
        background-color: var(--azul-escuro);
        color: #ffffff;

        & .txt>strong {
            color: #ffffff;
        }

        & span::before {
            color: #ffffff;
        }
    }
}

.widget-stats.active {
    background-color: var(--azul-escuro);
    color: #ffffff;

    & .txt>strong {
        color: #ffffff;
    }

    & span::before {
        color: #ffffff;
    }
}

.panel-primary {
    border-color: var(--azul-escuro);
}

.panel-primary>.panel-heading {
    background-color: var(--azul-escuro);
    border-color: var(--azul-escuro);
}

.metro {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: unset;

    & a {
        transition: filter 0.1s, transform 0.3s;
        border-radius: 15px;
        min-height: 120px;
        align-content: center;
        box-shadow: 0px 0px 9px 0px #9896969c;

        /* color: #999999; */
        & i {
            /* font-size: 30px; */
        }
    }
}

.navbar-brand.heading {
    color: var(--azul-claro) !important;
}

.metro a:link,
.metro div {
    background-color: transparent;
}

.metro a:hover {
    background-color: var(--azul-escuro);
    color: #fff;
}

.metro>a:visited {
    color: var(--azul-claro);
}

.metro>a:visited:hover {
    color: #fff;
}

.navbar-default .navbar-nav>li>a>i {
    color: var(--azul-claro);
}

.widget.widget-4 .widget-head .heading {
    border-color: var(--azul-escuro);
}

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

.new-modal {
    transition: .5s;
    top: -100%;
    align-content: center;
}

.new-modal > .modal-dialog > .modal-content{
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 90vh;
}

.new-modal.in {
    animation: new-modal-in .5s forwards;
}

@keyframes new-modal-in {
    from {
        top: -100%;
    }

    to {
        top: 0%;
    }
}



.toggle-theme-dark-light{
    border: 1px solid transparent;
    border-radius: 100px;
    width: 7rem;
    height: 3rem;
    position: relative;
    transition: .5s;
    cursor: pointer;
    background-color: #fbedb6;
}

.toggle-theme-dark-light>.fa {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 .5rem;
}
/* sun */

@keyframes change-sun-to-moon {
    from {left: 0%;}
    to {left: 80%;}
}

.toggle-theme-dark-light>.fa-sun-o {
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: 10px;
    height: 2rem;
    width: 2rem;
    z-index: 1;
    opacity: 1;
    background-color: #f4ca25;
    transition: left 1s, opacity .5s;
    left: 0;
}

.toggle-theme-dark-light>.fa-sun-o:before {
    position: absolute;
    left: 2px;
    transform: translateY(-50%);
    top: 50%;
}

/* moon */
.toggle-theme-dark-light>.fa-moon-o {
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: 10px;
    height: 2rem;
    left: 0;
    width: 2rem;
    background-color: #25b6f4;
    opacity: 0;
    z-index: 0;
    transition: left 1s, opacity .5s;
}

.toggle-theme-dark-light>.fa-moon-o:before {
    position: absolute;
    right: -2px; 
    transform: translate(-50%, -50%);
    top: 50%;
}

.modal-primary>.modal-header{
    background-color: var(--azul-escuro);
}