*{
    margin:0;
    padding:0;
    /* font-size: .9rem; */
    color: white;
    /* overflow: hidden; */
}
body{
    background-color: gainsboro;
    max-width: 25rem;
    height:100%;
    margin: 0 auto;
}
.main{
    background-color: #3F000F;
}
.btn{
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #F0C059 !important;
    color: white;
}
.btn-outline{
    background-color: rgba(0, 0, 0, 0) !important;
    color: #F0C059;
    border: .1rem solid #F0C059;
}
.btn-outline:hover{
    color: #F0C059;
    border: .1rem solid #F0C059;
}
.alert, .alert-light{
    font-size: 1rem;
    padding:.5rem 1rem .5rem 1rem !important;
    display: flex;
    justify-content: space-between;
    margin: 0 !important;
    background-color: white;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #F0C059;
}
.btn-close{
    font-size: .8rem;
    padding: .7rem 0 .7rem 1rem !important;
    /* filter: invert(); */
}
.btn-close + .btn{
    font-size: .5rem;
    border: 0;
}
.download-now{
    background-color: #3F000F !important;
}
.navbar{
    display: flex !important;
    justify-content: space-between;
    background-color: #3F000F !important;
}
.navbar-brand{
    color: white;
}
.category-bar {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    border-bottom: 1px solid gainsboro !important;
    padding-top: .2rem !important;
    background-color: #3F000F !important;
}
.category-bar > a {
    font-size: 1rem;
    padding: .2rem;
    color: gainsboro;
}
.category-bar > a > i{
    color: gainsboro;
}
/* Hide Scrollbar */
.overflow-auto::-webkit-scrollbar {
    display: none;
}
.section-active {
    font-size: .8rem;
    padding: .2rem;
    border-bottom: 3px solid white;
    color: #F0C059 !important;
    font-weight: 600;
}
.section-active > i {
    color: #F0C059 !important;
}
.section {
    margin: 0 1rem;
}
.section-head {
    padding-top: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.section-body > .row > .col {
    padding-top: 1rem;
    border-radius: .5rem;
}

.section-body > .row > .col > .card {
    border: none !important;
    border-radius: .5rem;
    background-color: #3F000F !important;
}
.section-body > .row > .col > .card > img {
    border-radius: .5rem;
}
.section-body > .row > .col > .card > img + div{
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
}
.footer-bar {
    color: white;
    display: grid;
    grid-template-rows: 1fr;
    display: flex;
    justify-content: center;
    background-color: #3F000F;
}
.footer-bar > ul > li{
    margin: 0 .5rem;
}
.footer-bar > ul > li > a{
    color: gainsboro;
}
.footer-bar > ul > li > a.active{
    color: gainsboro;
}
.footer-bar > ul > li > .nav-link:hover{
    color: #F0C059;
    border-bottom-color: #F0C059 !important;
}
.footer-bar > ul > li > .nav-link > i{
    color: #F0C059;
}
.sticky{
    position:sticky !important;
    top: 3.5rem !important;
    z-index: 1000 !important;
}
.fade:not(.show){
    display: none !important;
}
.modal{
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal-dialog{
    width: 22rem;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-right: 1.1%;
    margin-left: 0;
}
.modal-content{
    background-color: #3F000F;
}
.modal-header{
    padding-bottom: .2rem;
    border: none;
}
.modal-title{
    font-size: 1rem;
}
.modal-title + button{
    filter: invert();
}
.modal-body{
    padding-top: .5rem !important;
}
.modal-body .nav-link{
    color: white !important;
    border: none;
    text-align: center;
}
.modal-body .nav-link.active{
    background-color: #F0C059 !important;
}
.nav-tabs{
    border: none;
}
.tab-pane > form > div > input{
    /* margin-top: .8rem; */
    background-color: #3F000F !important;
    color: white !important;
    border: 1px solid gainsboro;
}
.tab-pane > form > div > input::placeholder{
    color: gainsboro;
    font-size: .8rem;
}
.form-label{
    font-size: .8rem;
    /* color: gainsboro; */
}
.form-check-label{
    font-size: .8rem;
}

.speaker{
    padding:7px 2.2px 6px 9px;
    background-color:#3F000F;
}
.speaker i{
    font-size: 20px;
    color:#F0C059;
}

/* Responsive styling */
    @media (max-width: 768px) {
        body{
            background-color: #3F000F;
            max-width: 100%;
            height:100%;
            margin: 0 auto;
        }
    }