* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    border: border-box;
}

body {
    background-color: #3a4f55;
}

/* HEADING PANELS  - START */
.navbar {
    display: flex;
    /* flex-wrap: wrap;     */
    justify-content: space-evenly;
    height: 80px;
    background-color: #000000;
    color: white;
    cursor: pointer;
    align-items: center;
    /* flex-wrap: wrap; */
    /* padding-left: 4px;
    padding-right: 4px; */
}

.nav-logo {

    height: 70px;
    width: 70px;
    align-items: center;
    justify-content: center;
}

.logo {
    background-image: url("logos.gif");
    background-size: cover;
    height: 65px;
    width: 65px;

}

.logo-naac {
    background-image: url("NAAC_LOGO.png");
    background-size: cover;
    height: 65px;
    width: 65px;
}

.logo-nba {
    background-image: url("nba_logo.png");
    background-size: cover;
    height: 65px;
    width: 65px;
}

.border {
    border: 1.5px solid transparent;
}

.border:hover {
    border: 1.5px solid white;

}

.nav-address {
    /* padding-left: 2px;
    padding-right: 2px; */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.add-small {
    color: #cccccc;
    font-size: 0.75rem;
}

.add-name {
    text-transform: capitalize;
    font-size: 1rem;
    font-weight: 700;
}

.add-kc {
    font-size: 1.3rem;
    letter-spacing: 0.2cm;
}

/** Search Box **/

.title {
    letter-spacing: 1.7px;
    text-transform: uppercase;
    font-size: 1.3rem;
    text-align: center;
    margin: 0 5px 0 5px;
    font-weight: 700;
}

.title-tag {
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 5px;
    /* color: #cccccc; */
    -webkit-text-fill-color: #febd69;
    font-weight: 700;
    margin-bottom: 2px;
}

.nav-search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: pink;
    max-width: 400px;
    height: 35px;
    border-radius: 4px;

}

.search-input {
    min-width: 350px;
    height: 35px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: none;
    font-size: 0.75rem;
    text-align: center;
}

.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 35px;
    font-size: 0.8rem;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #febd69;
    color: white;

}

.nba-text {
    /* margin: 12px; */
    width: 72px;
    font-size: 0.4rem;
    text-align: center;
}

.panel {
    display: flex;
    align-items: center;
    height: 40px;
    background-color: #232f3e;
    color: white;
    justify-content: space-evenly;
    ;
}

.panel-all {
    width: 5%;
    font-size: 0.8rem;
}

.panel-ops {
    display: flex;
    width: 60%;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 20px 0 20px;

}

.panel-ops a {
    text-decoration: none;
    color: white;

}

.panel-ops p {
    display: inline;
    font-size: 0.8rem;
    /* margin-left: 10px;
    margin-right: 10px; */
    padding: 10px;
}

.panel-deals {
    width: 30%;
    display: flex;
    justify-content: space-around;
    font-size: 0.85rem;
    font-weight: 600;

}

.web-opac,
.mobile-app {
    /* width: 50%; */
    display: flex;
    align-items: center;
    /* justify-content:space-evenly; */
    /* padding: 4px; */
}

.web-opac p,
.mobile-app p {
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.web-opac a {
    text-decoration: none;
    color: white;
}

.web-opac i,
.mobile-app i {
    font-size: 1.2rem;
}

/* HEADING PANELS  - END */

/* MIDDLE SECTION  START */

.middle-section {
    background-image: url("library-image.png");
    background-size: cover;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: flex-start;

}


.dept-section {
    display: flex;
    flex-wrap: wrap;
    flex-flow: column wrap;
    justify-content: space-evenly;
    background-color: #a2c7bc;

}

.section-one {
    width: 100%; 
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: space-around;
    background-color: #3a4f55;
    align-content: flex-start;

}

.box {
    /* border: 2px solid white; */
    border-radius: 5px;
    width: 18%;
    height: 250px;
    background-color: #fff;
    margin: 5px;
}

.msg {
    background-color: white;
    color: black;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    width: 80%;
    margin-top: 10px;
    border-radius: 4px;
}

.msg a {
    color: #007185;
    text-decoration: none;
}

.box-img {
    height: 180px;
    /* width: 200px; */
    background-image: cover;
    display: flex;
    align-content: center;
    justify-content: center;
    background-size: cover;
    margin: 0px 0px;

}

.box-img1 {
    height: 180px;
    width: 180px;
    /* background-image: cover; */
    display: flex;
    align-content: center;
    justify-content: center;
    background-size: cover;
    /* margin:10px 0; */
}


.box-contents {
    margin: 0 1rem 0 1rem;
}

.box-contents h5 {
    font-size: 0.8rem;
    margin: 5px 0 5px 0;
}

.a-box {
    color: #000000;
    text-decoration: none;
}

.h5-text {
    padding: 5px;
}



/* buttons */

button:hover {
    /* border: 4px solid rgb(0, 0, 0); */
    background-color: #063671e7;
    font-size: .92rem;
    transform: scale(1.3)
}

/* TOP SEARCHES */
.searches {
    position: relative;
    top: 0vh;
    width: 100%;
}

.searches1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    top: 0vh;
    width: 300px;
}

.flex-container {
    display: flex;
    /* flex-wrap: wrap; */
    /* font-size: 30px; */
    text-align: center;
    justify-content: space-evenly;
    /* width: 600px; */
    /* top: 20vh; */
}

.flex-item-left {
    background-color: #ffffff;
    /* padding: 10px; */
    /* flex: 50%; */
}

/* .flex-item-right {
            background-color: dodgerblue;
            padding: 10px;
            flex: 30%;
        } */

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {

    .flex-item-right,
    .flex-item-left {
        flex: 100%;
    }
}

button {
    height: 30px;
    width: 130px;
    margin: 4px;
    background-color: rgb(13,110,253);
    /* background-color: rgb(18, 140, 156); */
    border: none;
    padding: 4px;
    border-radius: 5px;
    color: whitesmoke;
    font-size: 0.9rem;

}

legend {
    width: auto;
    margin: 0 auto;
    background-color: #007bff;
    border: none;
    padding: 2px;
    color: whitesmoke;
    border-radius: 3px;

}

fieldset {
    border: 2px solid #32a1ce;
    padding: 2px;
    /* margin: 4px; */
}

.fstop {
    text-align: center;
    width: 250px;
    font-size: 1rem;
    background-color: #232f3ee7;
    border: 3px solid rgb(18, 140, 156);
    border-radius: 10px;
    color: white;
    text-shadow: 2px 2px 4px #000000;
    margin: 5px 0 5px 0;

}

.fsdept {

    text-align: center;
    width: 40x;
    font-size: 1rem;
    color: #000000;
    background-color: rgb(255,193,7);
    /* background-color: #424c58e7; */
    border: 2px solid rgb(18, 140, 156);
    margin: 10px 0 10px 0;
    padding: 0px 20px 0px 20px;
}

.dept-head {
    text-align: center;
    letter-spacing: 5px;
    /* width: 250px; */
    font-size: 1.6rem;
    font-weight: 600;
    background-color: rgb(18, 140, 156);
    /* border: 3px solid white; */
    /* border-radius: 10px; */
    color: white;
    text-shadow: 2px 2px 4px #a2f7f7;
    padding: 10px 0 10px 0;
}

.all-side {
    height: 530px;
    width: 80%;
    /* background-color: #aadac2; */
    /* display:flexbox; */
    justify-content: space-evenly;
    align-items: center;

    margin: 0 100px;
    margin-top: 10px;
}

.first-side {
    /* margin:0 100px 0 100px; */

    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    margin-top: 8px;

    /* background-color: #f2e9e4; */


}

.second-side {
    margin-bottom: 10px;
    width: 100%;
    /* width: 100%; */
    /* background-color: rgb(167, 236, 245); */
    /* margin-bottom: 200px; */
}

button:disabled {
    background: #7b7b7b;
}


.custom-search {
    width: 100%;
}

.select-values {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;

}

.sem-select {
    margin: 7px;

}



.lastpage {
    height: 200px;
    width: 100%;
    /* display:flex;
        justify-content:center;
        align-items: center; */


}

.part1 {
    width: 45%;

}

.part2 {
    width: 45%;

}


.pageheading {
    width: 100%;
    font-size: 1.5rem;
    text-align: center;
    margin-left: 5px;
}

.Copyright {
    width: 100%;
    font-size: 0.8rem;
    text-align: center;
    margin: 10px;
    text-decoration: none;
    color: white;
    /* font-weight: 600; */
}



.autocomplete-items {
    position: absolute;
    /* border: 1px solid #ffffff; */
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%; left: 0; right: 0;
    max-width: 350px; max-height: 500px;
    display: flex;flex-wrap: nowrap;  
    flex-direction: column; overflow: scroll;
    background-color: #fff;
    text-decoration: none;
    }

.autocomplete-items div {
    
    padding: 2px;
    cursor: pointer;
    background-color: #ffffff;
    color: black;
    border-bottom: 1px solid #ffffff;
    font-size: 0.8em;
    
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #096a90;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #000000;
}

.autocomplete {
    position: relative;
    display: inline-block;
}

.cover-item {
    padding: 5px;
    /* border: 1px solid white; */
    /* background-color: rgba(255, 255, 255, 0.382); */
    border-radius: 10px;
    width: 80%;
    margin: auto;
    /* border:2px solid rgba(255, 255, 255, 0.262); */
    margin-bottom: 2px;
    padding: 5px;
        background-color: rgba(0, 0, 0, 0.281);
        /* border-radius: 10px; */
}

.counter {
    /* border: 5px solid whitesmoke; */
     margin: auto;
    padding: 5px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.623);
    border-radius: 10px;
    width: 30%;
    margin: auto;
    font-weight: 800;
    border:0.5px solid rgba(255, 255, 255, 0.262);
}

#view, #downloads{
    background-color: rgb(255, 255, 255);
    padding:2px 5px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 800;
    margin:10px;
    color:rgb(11, 91, 118);
    
}