@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus,
[type=text].form-control:focus {
    outline: none;
    box-shadow:none !important;
}
body {
    padding: 20px;
    margin: 0;
    line-height: 1.3em;
    background: #f1f1f1;
}

.banner {
    background-image: url(images/dictionary.jpg);
    min-width: 100%;
    height: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.banner-quran {
    background-image: url(images/quran_bg.jpg);
    min-width: 100%;
    height: 10%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
li.current {
    background-color: #f1f1f1;
}
@media (max-width:768px) {
    .d-inline {
        width: 100%;
    }
    /** set the form to 100% instead of horizontal input and button **/
    #dictionaryForm input, #dictionaryForm button {
        display: block;
        width: 100%;
        margin-bottom: 5px;
        border-radius: 0;
    }
}