:root {
    --background-image-btn1: linear-gradient(to right,#045942, #0d7275, #199DD2);
    /* --background-image-btn1: linear-gradient(#045942, #028EC7); */
    --background-image1: linear-gradient(#052E3F, #000000);
    --green-color: #009769;
    --bg-light-blue: #a3dcf38b;
    --bg-light-green: #BEFFFC;
    --bg-dark-green: #06807B;
    --bg-dark-blue: #17a0e0;
    --bg-footer: #181818;
}
header-component{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.color-1{
    background-color:#FFD7B0 !important ;
}
.color-2{
    background-color:#B0FFF6 !important ;
}
.color-3{
    background-color:#FFC5C5 !important ;
}
.color-4{
    background-color:#6a9ae287 !important ;
}
.color-5{
    background-color:#E5C5FF !important ;
}
.color-6{
    background-color:#C0FFB0 !important ;
}
.color-7{
    background-color:#D1FCFA !important ;
}
.color-8{
    background-color:#fcd6d6a0 !important ;
}
.color-9{
    background-color:#06807B !important ;
}
.color-10{
    background-color:#CA3333 !important ;
}
.color-11{
    background-color:#353E8D !important ;
}
.color-12{
    background-color:#ED8000 !important ;
}
.color-13 {
    background-color: #ffed9cc9 !important;
}
@media (max-width:530px) {
    .small-hide {
        display: none !important;
    }

    .large-hide {
        display: block !important;
    }
}

.large-hide {
    display: none;
}

.navbar button:hover {
    color: black !important;
}

.dropdown-menu li:hover a {
    color: var(--bg-dark-green) !important;
}

.nav-item:hover a {
    color: var(--bg-dark-green) !important;
}
.container-small{
    max-width: 1100px !important;
  }

.bottom-nav {
    position: fixed;
    background-color: white;
    z-index: 999;
    bottom: 0;
    width: 100%;
    box-shadow: 2rem 2rem 2rem 2rem rgba(0, 0, 0, 0.864) !important;
}

.bottom-nav .row button span {
    font-size: x-large;
}

.bottom-nav .row button p {
    font-size: smaller;
    font-weight: 600;
}

.bottom-nav-active {
    color: #17a0e0 !important;
}

.bottom-btn {
    background-color: transparent;
    border: none;
    color: rgb(74, 74, 74);
    padding: 9px 2px;
}
/* start-learning */
#bg-question {
    background-image: url(../assets/question-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}
#bg-question h3{
    color: #ffffff;
    font-weight: 700;
}

.bg-gradient1 {
    background-image: var(--background-image-btn1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.greenbg {
    background-color: var(--bg-dark-green) !important;
}

.btn-gradient2 {
    background-image: linear-gradient(to right, #009769, #17a0e0) !important;
}
/* main section */
.input-custom{
    border: none;
    background-color: transparent;
    outline: none;
    padding: 5px 10px;
    width: 100%;
}
.purple-bg {
    background-color: purple !important;
}

.purple-blue-bg {
    background-color: #5E09A1 !important;
}

#doubt{
    background: #f7e9f06c !important;
}
.scrollar {
    overflow-x: auto;
    width: 100% !important;
    padding-bottom: 10px;
}

.scrollar::-webkit-scrollbar {
    height: 10px;
    cursor: pointer;
}
@media (max-width:530px) {
    .scrollar::-webkit-scrollbar {
        display: none;
    }
}
.scrollar::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
}

.scrollar::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 100px;
}

#enroll{
    background-image: url(../assets/enroll-bg.jpg);
    background-size: 100%;
    /* background-repeat: no-repeat; */
}

/* new */
#past-class{
    display: none;
}
.upcoming-class-btn, .past-class-btn{
    cursor: pointer;
}
#test .container{
    overflow-x: hidden;
}
.color-purple{
    color: #7f3eb0 !important;
}
.bg-purple{
    background-color: #7f3eb0 !important;
}

#completed {
    display: none;
}

#tests-btn,
#completed-btn {
    cursor: pointer;
}

.orange-card {
    border: 3px solid #FFC700 !important;
    background-color: #fff3c463 !important;
}

.green-card {
    border: 2px solid #068713;
    background-color: #d7eef79c !important;
}

.img-custom {
    width: 50%;
}

@media (max-width:530px) {
    .img-custom {
        width: 100%;
    }
}
.full-height{
    min-height: 100vh;
}