/*
=========================================================
 LUCKNOW NAGAR NIGAM
 SINGLE COMMON CSS - Bootstrap 5 Compatibility
=========================================================

Purpose:
1. Bootstrap 3 legacy form compatibility under Bootstrap 5
2. Font Awesome 4 icon alignment
3. Icon + TextBox/DropDownList on one line
4. Existing col-md-* / form-group / v-align support
5. Main menu styled like Bootstrap 5 sample
6. Normal menu text BLUE
7. Active/hover menu BLUE background + WHITE text
8. Responsive hamburger/mobile menu
9. Success colours
10. Existing bg-blue support

IMPORTANT:
Load this CSS LAST, after:
    bootstrap.min.css
    font-awesome.min.css
    style.css
    Enrollmentforms.css
=========================================================
*/


/* =========================================================
   01. GLOBAL
   ========================================================= */

.content,
.content *,
.header > .navbar,
.header > .navbar * {
    box-sizing: border-box;
}


/* =========================================================
   02. LEGACY BOOTSTRAP GRID
   ========================================================= */

.content .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.content .row::after {
    content: "";
    display: table;
    clear: both;
}

.content .col-md-12,
.content .col-md-11,
.content .col-md-10,
.content .col-md-9,
.content .col-md-8,
.content .col-md-7,
.content .col-md-6,
.content .col-md-5,
.content .col-md-4,
.content .col-md-3,
.content .col-md-2,
.content .col-md-1 {
    position: relative;
    float: left;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
}

.content .col-md-12 { width: 100%; }
.content .col-md-11 { width: 91.66666667%; }
.content .col-md-10 { width: 83.33333333%; }
.content .col-md-9  { width: 75%; }
.content .col-md-8  { width: 66.66666667%; }
.content .col-md-7  { width: 58.33333333%; }
.content .col-md-6  { width: 50%; }
.content .col-md-5  { width: 41.66666667%; }
.content .col-md-4  { width: 33.33333333%; }
.content .col-md-3  { width: 25%; }
.content .col-md-2  { width: 16.66666667%; }
.content .col-md-1  { width: 8.33333333%; }


/* =========================================================
   03. FORM GROUP / LABEL
   ========================================================= */

.content .form-group {
    width: 100%;
    margin-bottom: 15px;
}

.content .label {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;

    background: transparent;
    color: #222222;

    font-size: 14px;
    font-weight: 600;
    line-height: 36px;

    text-align: left;
    white-space: nowrap;
}

.content .v-align {
    min-height: 36px;

    display: flex;
    align-items: center;
}

.content .v-align .label {
    line-height: normal;
}


/* =========================================================
   04. INPUT GROUP
   ========================================================= */

.content .input-group {
    position: relative;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    width: 100%;
}


/* =========================================================
   05. FONT AWESOME ICON AREA
   ========================================================= */

.content .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 36px;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid #777777 !important;
    border-right: 0 !important;

    background-color: #008fc4 !important;
    color: #ffffff !important;

    text-align: center;
}

.content .input-group-addon .fa {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: FontAwesome !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-style: normal;
}


/* =========================================================
   06. TEXTBOX
   ========================================================= */

.content .input-group > .form-control {
    position: relative;

    display: block !important;

    flex: 1 1 auto !important;

    width: 1% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 36px;

    margin: 0 !important;
    padding: 6px 10px !important;

    border: 1px solid #777777 !important;
    border-left: 0 !important;
    border-radius: 0 !important;

    background-color: #ffffff !important;
    color: #000000 !important;

    font-size: 16px;
    font-weight: bold;

    box-shadow: none !important;
}


/* =========================================================
   07. DROPDOWN
   ========================================================= */

.content .input-group > select,
.content .input-group > .form-select {
    position: relative;

    display: block !important;

    flex: 1 1 auto !important;

    width: 1% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 36px;

    margin: 0 !important;
    padding: 5px 10px !important;

    border: 1px solid #777777 !important;
    border-left: 0 !important;
    border-radius: 0 !important;

    background-color: #ffffff !important;
    color: #000000 !important;

    font-size: 16px;

    box-shadow: none !important;
}


/* =========================================================
   08. INPUT FOCUS
   ========================================================= */

.content .input-group > .form-control:focus,
.content .input-group > select:focus,
.content .input-group > .form-select:focus {
    z-index: 2;

    outline: none !important;

    border-color: #008fc4 !important;

    box-shadow: 0 0 3px rgba(0, 143, 196, 0.35) !important;
}


/* =========================================================
   09. BLUE ICON / EXISTING bg-blue
   ========================================================= */

.content .bg-blue {
    background-color: #008fc4 !important;
    color: #ffffff !important;
}


/* =========================================================
   10. NORMAL FORM INPUTS
   ========================================================= */

.content input[type="text"],
.content input[type="password"],
.content input[type="number"],
.content input[type="tel"],
.content input[type="email"] {
    max-width: 100%;
}


/* =========================================================
   11. BUTTONS
   ========================================================= */

.content .btn {
    min-height: 36px;

    padding: 6px 12px;

    border-radius: 6px;

    font-size: 15px;
    line-height: 1.4;
}


/* =========================================================
   12. BOOTSTRAP 5 SUCCESS COLOURS
   ========================================================= */

.bg-success {
    background-color: #198754 !important;
    color: #ffffff !important;
}

.text-success {
    color: #198754 !important;
}

.border-success {
    border-color: #198754 !important;
}

.alert-success {
    color: #0f5132 !important;
    background-color: #d1e7dd !important;
    border: 1px solid #badbcc !important;
}

.btn-success {
    color: #ffffff !important;
    background-color: #198754 !important;
    border-color: #198754 !important;
}

.btn-success:hover,
.btn-success:focus {
    color: #ffffff !important;
    background-color: #157347 !important;
    border-color: #146c43 !important;
}


/* =========================================================
   13. MAIN NAVBAR
   Targeting the actual master-page navbar:
   .header > .navbar
   ========================================================= */

.header > .navbar {
    position: relative;

    width: 100% !important;
    min-height: 56px;

    padding: 0 !important;
    margin: 0 !important;

    background-color: #212529 !important;

    border: 0 !important;
    border-radius: 0 !important;
}


/* Navbar container */

.header > .navbar > .container,
.header > .navbar > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    margin: 0 !important;
}


/* =========================================================
   14. NAVIGATION LIST
   ========================================================= */

.header > .navbar .navbar-nav {
    display: flex !important;

    flex-direction: row;
    align-items: center;

    width: auto !important;

    padding: 8px 0 !important;
    margin: 0 !important;

    list-style: none;
}


/* =========================================================
   15. NAV ITEM
   ========================================================= */

.header > .navbar .navbar-nav .nav-item {
    position: relative;

    display: block;

    width: auto !important;

    padding: 0 !important;
    margin: 0 2px !important;
}


/* =========================================================
   16. NAV LINK
   Normal text = BLUE
   ========================================================= */

.header > .navbar .navbar-nav .nav-link {
    display: flex !important;

    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 0 !important;
    min-height: auto !important;

    padding: 10px 16px !important;
    margin: 0 !important;

    color: #0d6efd !important;

    background-color: transparent !important;

    border: 0 !important;
    border-radius: 5px !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px !important;
    font-weight: 400 !important;

    line-height: 1.5 !important;

    text-align: center;
    text-decoration: none !important;

    white-space: nowrap;

    transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out;
}


/* =========================================================
   17. NAV LINK HOVER
   ========================================================= */

.header > .navbar .navbar-nav .nav-link:hover {
    color: #ffffff !important;

    background-color: #0d6efd !important;

    border-radius: 5px !important;
}


/* =========================================================
   18. ACTIVE MENU
   ========================================================= */

.header > .navbar .navbar-nav .nav-link.active,
.header > .navbar .navbar-nav .nav-item.active > .nav-link {
    color: #ffffff !important;

    background-color: #0d6efd !important;

    border-radius: 5px !important;
}


/* =========================================================
   19. OPTIONAL SUCCESS MENU ITEM
   ========================================================= */

.header > .navbar .navbar-nav .nav-link.success {
    color: #ffffff !important;

    background-color: #198754 !important;
}

.header > .navbar .navbar-nav .nav-link.success:hover {
    color: #ffffff !important;

    background-color: #157347 !important;
}


/* =========================================================
   20. REMOVE OLD MENU SEPARATORS
   ========================================================= */

.header > .navbar .navbar-nav .nav-item:not(:last-child) .nav-link {
    border-right: 0 !important;
}


/* =========================================================
   21. BOOTSTRAP 5 HAMBURGER
   ========================================================= */

.header > .navbar .navbar-toggler {
    display: none;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 42px;

    padding: 6px 10px;
    margin: 7px 0;

    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 5px !important;

    background-color: transparent !important;
}

.header > .navbar .navbar-toggler:focus {
    outline: none;

    box-shadow: 0 0 0 2px rgba(13,110,253,.35) !important;
}


/* White hamburger */

.header > .navbar .navbar-toggler-icon {
    width: 24px;
    height: 24px;

    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(#ffffff, #ffffff);

    background-repeat: no-repeat;

    background-size:
        24px 2px,
        24px 2px,
        24px 2px;

    background-position:
        center 5px,
        center 11px,
        center 17px;
}


/* =========================================================
   22. NAVBAR COLLAPSE
   ========================================================= */

.header > .navbar .navbar-collapse {
    width: auto;
}

.header > .navbar .navbar-collapse.collapse {
    display: block;
}

.header > .navbar .navbar-collapse.collapse.show {
    display: block;
}


/* =========================================================
   23. DROPDOWN MENU
   ========================================================= */

.header > .navbar .dropdown-menu {
    position: absolute;

    top: 100%;
    left: 0;

    z-index: 1050;

    display: none;

    min-width: 220px;

    padding: 5px 0 !important;
    margin: 0 !important;

    list-style: none;

    background-color: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 5px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.header > .navbar .dropdown.show > .dropdown-menu {
    display: block;
}

.header > .navbar .dropdown-menu .dropdown-item {
    display: block;

    width: 100%;

    padding: 9px 15px !important;

    clear: both;

    color: #333333 !important;
    background-color: #ffffff !important;

    font-size: 14px;

    text-align: left;
    text-decoration: none !important;

    white-space: nowrap;
}

.header > .navbar .dropdown-menu .dropdown-item:hover {
    color: #ffffff !important;

    background-color: #0d6efd !important;
}


/* =========================================================
   24. RESPONSIVE MENU
   ========================================================= */

@media (max-width: 1100px) {

    .header > .navbar .navbar-toggler {
        display: flex;
    }

    .header > .navbar .navbar-collapse.collapse {
        display: none;
    }

    .header > .navbar .navbar-collapse.collapse.show {
        display: block;
    }

    .header > .navbar .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;

        padding: 8px 0 !important;
    }

    .header > .navbar .navbar-nav .nav-item {
        width: 100% !important;

        margin: 2px 0 !important;
    }

    .header > .navbar .navbar-nav .nav-link {
        display: flex !important;

        justify-content: flex-start;

        width: 100% !important;

        padding: 10px 15px !important;

        text-align: left;
    }

    .header > .navbar .dropdown-menu {
        position: static;

        width: 100%;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }
}


/* =========================================================
   25. RESPONSIVE FORM - TABLET
   ========================================================= */

@media (max-width: 991px) {

    .content .col-md-3 {
        width: 50%;
    }

    .content .col-md-6 {
        width: 50%;
    }
}


/* =========================================================
   26. RESPONSIVE FORM - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .content .col-md-12,
    .content .col-md-11,
    .content .col-md-10,
    .content .col-md-9,
    .content .col-md-8,
    .content .col-md-7,
    .content .col-md-6,
    .content .col-md-5,
    .content .col-md-4,
    .content .col-md-3,
    .content .col-md-2,
    .content .col-md-1 {
        width: 100%;
    }

    .content .label {
        white-space: normal;
        line-height: 20px;
        margin-bottom: 5px;
    }

    .content .v-align {
        display: block;
        min-height: auto;
    }

    .content .form-group {
        margin-bottom: 12px;
    }
}


/* =========================================================
   27. FONT AWESOME SAFETY
   ========================================================= */

.fa {
    display: inline-block !important;

    font-style: normal;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   END
   =========================================================
*/