ul li a{
    color: #fff;
    background: #3802a6;
    transition: all 0.2s ease-in-out;
}

ul li a:hover{
    background: transparent;
    border: 1px solid #fa0000;
    color: #fa0000;
}

.saveBtn{
    background: #4702d1;
}

.saveBtn:hover{
    background: #5b17e3;
}

.nextBtn{
    background: #e30505;
}

.nextBtn:hover{
    background: #e31717;
}

.search-form input{
    width: 25%;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.search-form button{
    border-top: 1px solid #ddd;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    color: #979c97;
}

.search-form button:hover{
    color: #4702d1;
}

.page-form select{
    width: 15%;
}

.pagination .prev-btn, .pagination .next-btn{
    color: #fff;
    background: #4702d1;
}

.pagination .prev-btn:hover, .pagination .next-btn:hover{
    background: #5b17e3;
}

.pagination .page-btn{
    color: #4702d1;
}

.pagination .active{
    background: #4702d1;
    color: #fff;
}

.login-page{
    background-image: url("../image/b1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.login-page .login-content{
    margin-top: 85px;
}

.addBtn{
    background: #f50505;
}

.addtoggleBtn{
    background: #d60404;
}

.addtoggleBtn:hover{
    background: #e30505;
}

.transcriptBtn{
    background: #3900ab;
}

.transcriptBtn:hover{
    background: #4100c2;
}

.data-table img{
    width: 28%;
    filter: grayscale(100%) opacity(50%);
}

@media(max-width: 768px){
    .page-form select{
        width: 90%;
    }

    .search-form input{
        width: 90%;
    }

    .login-page .login-content{
        margin-top: 0;
    }

    .data-table img{
        width: 85%;
        filter: grayscale(100%) opacity(50%);
    }
}