.narrow-scrollbar::-webkit-scrollbar {width: .3rem;background: hsla(0, 0%, 100%, 0.6);}
.narrow-scrollbar::-webkit-scrollbar-track {border-radius: 0;}
.narrow-scrollbar::-webkit-scrollbar-thumb {border-radius: 0;background-color: rgba(95, 95, 95, .4);transition: all .2s;border-radius: .5rem;}
.bg-purple{background-color: #6f42c1;}
.text-purple{color: #6f42c1;}
.text-bg-purple{color: #FFF; background-color: #6f42c1;}
.border-purple{border-color: #6f42c1!important;}


.btn-purple{background-color: #6f42c1; color: #FFF;}
.btn-purple:hover{background-color: #4c0bce; color: #FFF;}

/*
.btn-loading{display: none;}
.btn.disabled .btn-loading{display: inline-block;}
.btn.disabled .btn-text{display: none;}
.btn:disabled .btn-loading{display: inline-block;}
.btn:disabled .btn-text{display: none;}*/

.cursor-pointer{cursor: pointer;}
#offcanvasNav .sub-menu li{border-bottom: 1px solid var(--bs-border-color)}
#offcanvasNav .sub-menu li:last-child{border-bottom: 0!important;}
#offcanvasNav a{text-decoration: none; color: var(--bs-dark);}
#offcanvasNav a.active{background-color: var(--bs-dark); color: var(--bs-white)}
#offcanvasNav a:hover{background-color: var(--bs-dark); color: var(--bs-white)}
#offcanvasNav .sub-menu a:hover{background-color: var(--bs-light); color: var(--bs-dark)}
#offcanvasNav>ul>li{border-bottom: 1px solid var(--bs-border-color)}

#content img{max-width: 100%;}

#content a{word-break: break-word;}

@media (min-width: 768px) {
    #offcanvasNav{position: relative; visibility: visible; top: unset; left: unset; right: unset; bottom: unset; border: 0px; width: unset; z-index: unset; background-color: unset; transform: unset;}
    #offcanvasNav>ul>li:hover .sub-menu{display: block;}
    #offcanvasNav>ul>li{border-bottom: unset}
    #offcanvasNav .sub-menu{position: absolute; top: 100%; left: 0; background-color: #FFF; min-width: 200px; box-shadow: 0 .5rem 1rem rgba(var(--bs-body-color-rgb),.15); border-radius: 10px; display: none;}
}

@media (max-width: 576px) {
    h1{font-size: 1.75rem!important;}
    h2{font-size: 1.65rem!important;}
    .lead{font-size: 1.15rem}
}

@media (min-width: 576px) {
    .list-circle{position: relative; border-left: #9ec5fe 2px solid; margin-left: 10px; padding-left: 1rem!important;}
    .list-circle li::before{content: ''; display: block; width: 20px; height: 20px; background-color: #f8f9fa; border-radius: 50%; position: absolute; top: 2px; left: -27px; border: #4c0bce solid 3px;}
    .list-circle li{margin-bottom: 1rem; position: relative;}
}