/* ===============================
    CSS INDEX (Table of Contents)
==================================
1. Reset & Base Styles
2. Typography & Links
3. Images
4. Preheader
5. User Login Button
6. Header
7. Banner Section (.bubanner)
8. About Section (.aboutbu)
9. Service Buttons
10. Navigation & Dropdown Menu
11. Sections (Home, Features)
12. Contact Section
13. Footer
14. Inner Pages (Inside Wrapper)
15. Tables (Service, Form, Application)
16. Buttons
17. Login Page Styles
18. Instruction Button
19. Responsive (Mobile Styles)
================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div:after {
    content: '';
    display: block;
    clear: both;
}

body {
    font-family: "Quicksand", sans-serif !important;
    font-size: 14px;
    font-weight: 500 !important;
}

a {
    text-decoration: none !important;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

.preheader {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #f2f2f2 !important;
    color: #000;
}

    .preheader a {
        color: #000;
    }

        .preheader a:hover {
            color: #fff;
        }

.lft_lnks a {
    position: relative;
    padding: 0 4px;
}

    .lft_lnks a:after {
        content: '|';
        position: absolute;
        right: -4px;
        top: -9px;
    }

    .lft_lnks a:last-child:after {
        content: '';
    }

.userlogin {
    width: 100px;
    border-radius: 8px;
    background: orange;
    transform: skewX(10deg);
    text-align: center;
}

    .userlogin:hover {
        background: #2d5979;
    }

    .userlogin a {
        transform: skewX(-10deg);
        display: block;
        width: 100%;
        height: 100%;
    }

    .userlogin:hover a {
        color: #fff !important;
    }

.left-top a {
    font-size: 13px;
}

    .left-top a:after {
        content: '|';
        margin-left: 5px;
    }

    .left-top a:last-child:after {
        content: '';
    }

    .left-top a:hover {
        opacity: .3;
        color: #000;
    }

/* Header */
.dept_logo img {
    height: 60px;
}

.mpo-logo img {
    height: 55px;
    margin-top: 3px;
}

.bu_header {
    padding: 5px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    background-color: #fff;
}
/* Banner BU */
.bubanner {
    height: 200px;
    position: relative;
    z-index: 0;
    padding: 100px 0;
    text-align: center;
    background-image: url('../images/bubanner.jpg');
    background-size: cover;
    background-position: center 30%;
}

    /*.bubanner:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
        opacity: .5;
    }*/

    .bubanner h1 {
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        color: #ffe88c;
        font-family: "Nunito", sans-serif !important;
    }

    .bubanner p {
        text-align: center;
        color: #fff;
        font-size: 17px;
    }

.aboutbu {
    width: 95%;
    margin: 0 auto;
    padding: 0 40px;
}

.service-btn-col {
    margin-top: 30px;
}

.servicebtn {
    padding: 15px 20px;
    border-radius: 50px;
    text-align: center;
    color: #FFF;
    font-size: 15px;
    background-color: #fc9928;
    font-weight: 600;
    border: 2px solid transparent;
    transition: .5s all;
}

    .servicebtn:hover {
        background-color: #fff !important;
        border: 2px solid #fc9928;
        color: #fc9928;
    }

/* Menu */
/* Multi-level dropdown support */
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%; /* submenu opens to the right */
        margin-left: 0;
        display: none;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

/* Left-align main dropdown */


.verticaldropdown .dropdown-menu {
    display: none;
    width: 100% !important;
    min-width: 25rem !important;
    left: 0 !important;
    right: auto !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    line-height: 1.4 !important;
}

.navbar.bg-dark {
    padding: 0 !important;
    --bs-bg-opacity: 1;
    /*background-color: rgb(22, 41, 55) !important;*/
    background: #7F7FD5; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    margin: 0 !important;
    min-height: auto !important;
}

.navbar-nav .nav-item:last-child {
    border: 0 !important;
}

.nav-link {
    color: #000 !important;
    padding: 10px 25px !important;
}


    .nav-link:hover {
        opacity: .7;
        background: #7F7FD5; /* fallback for old browsers */
        background: -webkit-linear-gradient(to bottom, #91EAE4, #86A8E7, #7F7FD5); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #91EAE4, #86A8E7, #7F7FD5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

.dropdown-item {
    white-space: normal !important;
}

.bunavigation .dropdown-item {
    font-size: 14px;
    font-weight: 500;
    padding: 0 5px 0 18px;
    border-bottom: 1px dashed #ddd;
    text-indent: -20px;
}

.verticaldropdown .dropdown-item:last-child {
    border-bottom: 0 !important;
}

.verticaldropdown .dropdown-item {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 5px 5px 10px;
    border-bottom: 1px dashed #ddd;
    text-indent: 0px !important;
}

.navbar-nav .nav-item {
    border-right: 1px solid #86a6e6;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: transparent !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
}

.bunavigation .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 transparent !important;
}

.bunavigation h3 {
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid #1528361a;
}

    .bunavigation h3 img {
        width: 27px;
        vertical-align: middle;
    }

.bunavigation .nav-icn {
    width: 18px;
}
/* Section home */
.section {
    padding: 40px 0;
}

    .section h2 {
        font-size: 70px;
        font-weight: 600;
        color: #1b304c;
        letter-spacing: -3px;
    }

.objectives-content {
    padding: 7% 0 0 0;
}

.objectives-image img {
    border-radius: 20px;
}
/* Features Section */
.section-features {
    background-color: #fafafa;
    padding: 40px 0 20px;
    position: relative;
    z-index: 0;
}

    .section-features:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background-image: url('../images/bubgsvg.svg');
        z-index: -1;
        background-position: center;
        background-size: cover;
        height: 100%;
    }

    .section-features a {
        color: #000 !important;
    }

.features-box a {
    padding: 20px 15px 15px;
    display: block;
    width: 100%;
    height: 100%;
}

.features-box {
    text-align: center;
    background: #fff;
    margin-bottom: 40px;
    width: 100%;
    -webkit-transition: .4s;
    transition: .4s;
    -webkit-box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, .06);
    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, .06);
    margin-bottom: 20px;
    border: 2px solid transparent;
    border-radius: 20px;
}

    .features-box:hover {
        border: 2px solid #1b304c47;
        background: #fff;
        -webkit-box-shadow: 0 40px 44px 0 rgba(0, 0, 0, .06), 0 40px 44px 0 rgba(0, 0, 0, .06);
        box-shadow: 0 40px 44px 0 rgba(0, 0, 0, .06), 0 40px 44px 0 rgba(0, 0, 0, .06);
    }

    .features-box p {
        font-size: 15px;
        text-transform: capitalize;
        font-weight: 800;
        margin: 10px auto 0;
    }

    .features-box span {
        font-size: 14px;
        font-weight: 500;
    }

    .features-box img {
        height: 50px;
    }

.section-title h2 {
    font-size: 50px;
    font-weight: 600;
    color: #1b304c;
    letter-spacing: -3px;
}

.contact-info h3 {
    font-size: 20px;
    font-weight: 700;
}

.contact-info h4 {
    font-size: 20px;
    font-weight: 700;
}

.contact-info h6 {
    font-size: 17px;
    font-weight: 700;
}

.address-col p {
    margin: 0 !important;
    padding: 0;
}

.contact-image img {
    border-radius: 20px 20px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    transition: .5s all;
}

.location-link {
    padding: 7px 20px;
    background-color: #fff;
    box-shadow: 0 0 4px #ddd;
    display: inline-block;
    margin-top: 5px;
    font-weight: 600;
    border-radius: 5px;
}

    .location-link:hover {
        color: #213d53;
    }

    .location-link img {
        height: 25px;
    }

.footer {
    width: 100%;
    padding: 6px;
    text-align: center;
    color: #fff;
    background-color: #213d53;
}

/* Inner pages */
.insidewrapper {
    min-height: 100vh;
    height: 100%;
}

.innerheader {
    height: 150px;
    text-align: center;
    padding: 20px 0;
    background-image: url('../images/headerbanner.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 0;
}

    .innerheader:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: #1b304c;
        opacity: .7;
    }

    .innerheader h3 {
        color: #fff;
        font-size: 24px;
        font-weight: 700;
    }
/* Breadcrum styles */
.breadcrumb {
    background-color: #fff !important;
    padding: 8px !important;
    font-size: 15px;
    color: #fff !important;
    border-radius: 8px !important;
}

    .breadcrumb a {
        color: #000;
    }

    .breadcrumb li a:focus, .breadcrumb li a:active {
        outline: none !important;
        box-shadow: none !important;
    }

    .breadcrumb img {
        vertical-align: middle;
        opacity: 0.5;
        cursor: pointer;
    }



@media (max-width: 767px) {
    .mponlinelink, .universitylink {
        display: none;
    }

    .mpo_logo_header img {
        display: none;
    }

    .breadcrumb {
        font-size: 11px;
    }

    .breadcrumb-item + .breadcrumb-item {
        padding-left: 0;
    }

    .breadcrumb img {
        margin-top: 2px !important;
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding: .15em !important;
    }
}

.active-1 {
    color: #000 !important;
    font-weight: bolder;
}

/******************/

.services-table td.maintable-head {
    background-color: none !important;
    font-weight: 600;
    font-size: 16px;
}

.services-table th {
    /* background-color: rgba(72, 145, 174, 0.07) !important*/;
    background-color: transparent !important;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #dee2e6;
}

.service_head {
    background-color: rgba(72, 145, 174, 0.07) !important;
    font-weight: 600;
    font-size: 15px;
}

.services-table td {
    font-size: 14px;
    border-bottom: 1px solid #dee2e6;
}

.download img, .apply img {
    height: 30px;
}

.services-table td span a {
    color: #000;
    line-height: 1.8;
}

.apply a img {
    transition: .5s all;
}

.apply a:hover img {
    transform: translateY(-5px);
    transition: .5s all;
}

.download img {
    transition: .5s all;
}

.download:hover img {
    transform: translateY(-5px);
    transition: .5s all;
}

.application-title h3 {
    font-size: 25px;
    font-weight: 600;
}

.services-table td:nth-child(2) {
    width: 15%;
}

.services-table td:nth-child(3) {
    width: 15%;
}

/* Form design css */
.Ctable {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 10px 0;
}

    .Ctable th {
        padding: 10px;
        border: 1px solid rgba(0, 0, 0, 0.07) !important;
        color: #fff;
        font-weight: normal;
        text-align: left;
        background-color: #304155;
        font-size: 16px;
    }

    .Ctable td {
        padding: 10px;
        border: 1px solid rgba(0, 0, 0, 0.07) !important;
        text-align: left;
        background-color: #fff;
    }
    /* provide some minimal visual accomodation for IE8 and below */

    .Ctable input[type="text"], input[type="password"], textarea, select {
        width: 100%;
        padding: 7px;
        border-radius: 4px;
        background-color: #fff;
        border: #ddd 1px solid;
    }

    .Ctable input:focus {
        outline: none;
        box-shadow: 0px 0px 5px #ddd;
        border: #ddd 1px solid;
    }

    .Ctable input:hover {
        border-radius: 5px;
    }

    .Ctable select:focus {
        outline: none;
        border: #ddd 1px solid;
    }

    .Ctable select:hover {
        border: #ddd 1px solid;
        border-radius: 5px;
    }

    .Ctable textarea:focus {
        outline: none;
        box-shadow: 0px 0px 5px #ddd;
    }

    .Ctable textarea {
        height: 35px;
    }

        .Ctable textarea:hover {
            border: 1px solid #eaeaea;
            border-radius: 5px;
        }

    .Ctable input[type="button"], .Ctable input[type="submit"] {
        padding: 5px 20px;
        text-align: center;
        color: #fff;
        border: 0 !important;
        border-radius: 5px;
        background-color: #304155;
    }

        .Ctable input[type="button"]:hover, .Ctable input[type="submit"]:hover {
            opacity: .8;
        }

    .Ctable input[type="checkbox"], .Ctable input[type="radio"] {
        margin-right: 4px;
        vertical-align: middle;
    }

    .Ctable .btn {
        background-color: #304155 !important;
        border: none !important;
        padding: 6px 8px;
        color: #fff;
        font-size: 14px;
        border-radius: 5px 5px;
    }

        .Ctable .btn:hover {
            opacity: .9;
            color: #fff !important;
        }

.Ctable4 td {
    width: 25%;
}

.btnRest {
    background-color: #461815;
    border: none !important;
    padding: 8px 8px;
    color: #fff;
    font-size: 14px;
    border-radius: 5px 5px;
    transition: all .4s;
    cursor: pointer;
}

    .btnRest:hover {
        background-color: #BD450F;
        border: none !important;
        padding: 8px 8px;
        color: #fff;
        font-size: 14px;
        border-radius: 5px 5px;
    }

.bu_newtable .btn:hover, .btn:active {
    background-color: #F9E281;
    border: none !important;
    padding: 8px 8px;
    color: #000 !important;
    font-size: 14px;
    border-radius: 5px 5px;
    cursor: pointer;
    transition: 1s;
}
/*table css end*/
/* Login CSS design */
/*Login*/

.log_bg {
    background-image: url('../images/login-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px 0;
}

.container_login {
    margin: 4% 0 0 0;
    background-color: rgba(238, 238, 238, 0.8);
    border: 2px solid #e7e6e6;
    padding: 2%;
    width: 100%;
}

.heading {
    text-align: center;
    font-size: 23px;
    font-weight: 700;
}

.form-content {
    width: 90%;
    margin: 10px auto;
}

    .form-content input[type="text"], .form-content input[type="password"] {
        background-color: #FFF;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 10px;
        margin: 6px 0;
        width: 100% !important;
    }

        .form-content input[type="text"]:focus, .form-content input[type="password"]:focus, .form-content select:focus {
            box-shadow: 0 0 4px #eee;
            border: solid 1px #eee;
        }

    .form-content select {
        width: 100%;
        background-color: #FFF;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 10px;
        margin: 6px 0;
    }

.btn_cntr .log_btn {
    background-color: #1e6fb3 !important;
    border-radius: 4px;
    padding: 10px;
    margin: 6px 0;
    width: 100% !important;
    cursor: pointer;
    border: 0 !important;
    color: #fff;
}

    .btn_cntr .log_btn:hover {
        background-color: #0a4c83 !important;
    }

.inputlogin-captcha {
    padding: 0px 20px !important;
}

.for_pass {
    width: 100%;
    color: #000;
    text-align: center;
}

    .for_pass a {
        text-decoration: none !important;
        font-size: 11px;
        transition: color 0.5s ease;
        color: #000;
    }

        .for_pass a:hover {
            color: #0330DD;
            text-decoration: none !important;
        }

.instructn {
    margin: 10% 0 0 0;
}

    .instructn ul {
        margin: 0;
        padding: 0 0 0 16px !important;
    }

.instruction_btn {
    background-color: rgba(222,130,56, 0.5);
    border: 2px solid #ffdb8d;
    border-radius: 20px;
    text-align: center;
    margin: 0 auto;
}

    .instruction_btn a {
        color: #fff;
        text-decoration: none;
        font-size: 20px;
        font-weight: 500;
        padding: 5%;
        display: block;
        width: 100%;
    }

    .instruction_btn:hover {
        border: 2px solid #ffdb8d;
        transition: 1s;
        background-color: rgba(222,130,56, 0);
    }

.section-contact {
    position: relative;
    z-index: 0;
}

    .section-contact:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url('../images/bumap.jpg');
        background-position: center bottom;
        background-size: cover;
        opacity: .3;
    }

/* Optional for mobile spacing */
@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-menu {
        left: 100%;
        top: 0;
        margin-left: 0.5rem;
    }

    .mpo-logo {
        display: none;
    }

    .bubanner {
        height: auto;
    }

    .aboutbu {
        width: 100%;
        margin: 0 auto;
        padding: 0 0;
    }

    .objectives-content {
        text-align: center;
    }

    .section-title {
        text-align: center;
    }

    .section-contact {
        text-align: center;
    }

    .left-top {
        font-size: 13px;
    }

    .uniwebsite {
        display: none;
    }

    .mpoportal {
        display: none;
    }

    .capthca_pic {
        text-align: center;
    }

    /*.Ctable td {
        white-space: nowrap;
    }*/

    .Ctable td input {
        min-width: 100px;
    }

    .innerheader {
        height: 100%;
    }

    .section h2 {
        font-size: 50px;
    }

    .bunavigation h3 {
        border-bottom: 1px solid #1528361a;
        margin: 10px 0;
        background-color: #f1f1f16b;
        padding: 4px 10px;
    }

    .dropdown-menu.p-4 {
        padding: 0 !important;
    }

    .d-block-table td {
        width: 100%;
        display: block;
    }
}



.backbutton-row {
    padding: 10px 0;
    background-color: #86a8e71c;
}

.backbutton {
    border: 0 !important;
    padding: 10px 20px;
    background-color: #b23f15;
    color: #fff;
}

    .backbutton img {
        height: 20px;
    }