*{
    font-family: Bai Jamjuree;
}


/********************** Navbar infromation**************************/


ul{
    margin-top: 1.5em;
}

.main{
    background-color: #FFEDFB;
    /* z-index: -1; */
}

nav, .sidebar-color{
    background: linear-gradient(90deg, #AC3694 0%, #AC3694 100%);
}

.form-control:focus{
    box-shadow: none;
    /* border: none; */
}

.dropdown-item:focus{
    background: linear-gradient(90deg, #AC3694 0%, #AC3694 100%);
}



/********************** Left sidebar infromation**************************/

.dropdown-menu.show {
    margin-right: 1.5em;
    box-shadow: 0px 0px 17.87px 0px #0000001A;
}

#sidebar{
    box-shadow: 0px 25px 35px 0px #00000040;
    background-image: url('../images/dashboard.png');
    background-repeat: no-repeat;
    background-size: 80% 100%;
    border-top-right-radius: 50px;
    
    
}

#sidebar.expand{
    min-width: 240px;
}

#toggle-btn{
    padding:1rem 1.5rem;
}

#toggle-btn i{
    font-size: 1.5rem;
}

.sidebar-logo{
   margin-left: -1.5em;
}

.sidebar-logo a{
    font-size: 1.15rem;          
}

#sidebar:not(.expand) .sidebar-logo,
#sidebar:not(.expand) a.sidebar-link span{
    display: none;
}

.sidebar-nav{
    flex: 1 1 auto;
}

a.sidebar-link{
    padding: .625rem 1.625rem;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    font-weight: 500;
}

.sidebar-link i,
.dropdown-item i{
    font-size: 1.1rem;
    margin-right: .75rem;
}

a.sidebar-link:hover{
    background-color: #AC3694;
    color:  #ffffff !important;
}

a.sidebar-link:hover .image-container{
    filter: brightness(0) invert(1);
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"]::after{
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 1.3rem;
    transform: rotate(90deg);
    transition: all .2s ease-out;
    background-image: url('../images/arrows.png');
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"].collapsed::after{
    transform: rotate(5deg);
    transition:all .2s ease-out;
}    
 






#sidebar-wrapper{
    min-height: 100vh;
    margin-left: -15rem;
    transition: margin 0.25s ease-out;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width:768px){
    
    #sidebar-wrapper{
        margin-left: 0;
    }
    
    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }
    
}

 /*********************** Right side information ***************************/


.reset-btn{
    background-color: #D9D9D9;
    font-weight: 500;
}

.reset-btn:hover{
    background-color: #D9D9D9;
}

.search-btn{
    background-color: #AC3493;
    color: #ffffff;
    font-weight: 500;
}

.search-btn:hover{
    background-color: #AC3493;
    color: #ffffff;
}

.card-box{
    margin-right: 9px;
}


 
/****************** table ****************/


.head{
    color: #888888 !important;
}

.header{
    font-weight: 600;
    font-size: 14px;
}

.head-info{
    color: #888888 !important;
    margin-top: -5px;
    font-size: 14px;
    margin-left :1.4em;
}

.head-info-clr{
    color: #DC3545 !important;
    margin-top: -6px;
    font-size: 14px;
}

.header-clr{
    color: #888888 !important; 
    
}

.active-btn{
    background-color: #B5EDD7;
    font-size: 14px;
    font-weight: 500;
}

.active-btn:hover{
    background-color: #B5EDD7;
}

.expire-btn{
    background-color: #FF9090;
    font-size: 14px;
    font-weight: 500;
}

.expire-btn:hover{
    background-color: #FF9090;
}

.card-table{
    box-shadow: 0px 0px 17.87px 0px #0000001A;
}


    /************************* Pagination ***********************/

    .active > .page-link{
        background-color: #AC3694 !important;
        color :#ffffff !important;
    }

    .page-link:focus{
        box-shadow: none;
    }


    /*********************** Responsive Design **********************/


    @media (min-width:992px) and (max-width:1199px){
        
        .card-box{
            margin-right: -10px;
        }
        
    }
    
    @media (min-width:768px) and (max-width:991px){
    
        label{
            font-size: 11px;
        }
    }