/*
    Understanding the CSS Files
    Attribute Tag Names:
        Tag     - Supported HTML tag (e.g. <table>)
        .Tag    - CSS class used by ASP.NET controls
        #Tag    - ID-based selector used in markup
*/

/* =========================================================
   PAGE LAYOUT / RESPONSIVE WIDTH
========================================================= */

@media (min-width: 1470px) {

    .container {
        max-width: 1460px;
    }

    .body-content {
        max-width: 95% !important;
        width: 95% !important;
        height: 95% !important;
    }
}

@media (min-width: 1910px) {

    .container {
        max-width: 1850px;
    }

    .body-content {
        max-width: 80%;
        width: 80% !important;
        height: 95% !important;
    }
}

/* =========================================================
   PLEASE WAIT DIALOG (LOADING OVERLAY)
========================================================= */

.GrayOutEntireScreen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    opacity: 0.8;
    min-height: 100%;
    width: 100%;
    background-color: lightgray;
}

.PleaseWaitBox {
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 150px;
    text-align: center;
    position: fixed;
    background-color: White;
    z-index: 999;
}

/* =========================================================
   NAVBAR (BOOTSTRAP OVERRIDES + CUSTOMIZATION)
========================================================= */

.navbar {
    min-height: 60px !important;
    z-index: 99999 !important;
    background-color: transparent !important;
}

.navbar-header {
    position: relative;
    min-height: 60px;
}

.navbar-logo {
    max-width: 100%;
    height: 60px;
    width: auto;
}

.navbar-inverse .navbar-nav > li > a {
    min-height: 60px !important;
    width: 100%;
    top: 5px;
    color: black;
    font-weight: bold;
    font-size: 16px;
}

    .navbar-inverse .navbar-nav > li > a:hover {
        color: gray;
    }

/* Guest Links */
.navbar_Guest {
    color: white !important;
}

    .navbar_Guest:hover {
        color: powderblue !important;
    }

/* Remove focus outline for cleaner UI */
.navbar a:focus,
.navbar a:active {
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================================
   DROPDOWN MENU (CUSTOM COMPONENT)
========================================================= */

.myDropdown {
    position: relative;
    border: none;
    width: 100px;
    padding: 0;
    list-style: none;
}

.myDropdown-Content {
    position: absolute;
    width: 120px;
    border: 2px solid black;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    transform: scale(0) translateY(-100%);
    transition: all 0.25s ease;
    visibility: hidden;
    opacity: 0;
}

.myDropdown:hover .myDropdown-Content {
    transform: scale(1) translateY(0);
    visibility: visible;
    opacity: 1;
}

.myDropdown-Content a {
    display: block;
    width: 100%;
    padding: 6px 0 6px 10px;
    color: black;
    font-weight: bold;
    font-size: 16px;
    background-color: var(--KCPC_Background_Color);
}

    .myDropdown-Content a:hover {
        color: gray;
        background-color: #a9bad5;
    }

/* =========================================================
   HAMBURGER MENU (MOBILE NAV TOGGLE)
========================================================= */

.navbar-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    margin: 0 !important;
    background-color: black !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

    .navbar-toggle:hover {
        background-color: white !important;
    }

        .navbar-toggle:hover .icon-bar {
            background-color: black !important;
        }

    .navbar-toggle:focus,
    .navbar-toggle:active,
    .navbar-toggle.collapsed,
    .navbar-toggle:not(.collapsed) {
        background-color: black !important;
    }

/* =========================================================
   OVERLAY SYSTEM (MODALS / POPUPS)
========================================================= */

.divOverlay {
    display: none;
    position: absolute;
    top: 70px;
    left: 17%;
    z-index: 2000;
    margin-top: -10px;
    padding: 5px;
    border: 2px solid black;
    background-color: white;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    max-width: 900px;
}

/* =========================================================
   GLOBAL FORM ELEMENTS
========================================================= */

input,
select,
textarea {
    border: 1px solid black;
}

/* =========================================================
   TABLE DEFAULT BEHAVIOR (GLOBAL)
========================================================= */

table {
    width: auto;
}

tr {
    height: 27px;
}

td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   BUTTON SYSTEM
========================================================= */

.Button_Default {
    background-color: LightBlue;
    border: 1px solid black;
    font-size: small;
    margin: 4px 2px 4px 4px;
    padding: 2px 4px;
}

.Button_Round {
    border-radius: 6px;
    border: 1px solid black;
    font-size: small;
    margin: 4px 2px 4px 4px;
    padding: 2px 4px;
}

.Button_Submit {
    font-weight: bold;
}

/* Hidden Buttons */
.Button_Hide,
.Button_Hide_KCPC {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

.Button_Hide {
    background-color: white;
    border: 1px solid white;
}

.Button_Hide_KCPC {
    background-color: var(--KCPC_Background_Color);
    border: none;
}

/* =========================================================
   HIDDEN TEXTBOX SYSTEM
========================================================= */

.TextBox_Hide,
.TextBox_Hide_KCPC {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

.TextBox_Hide {
    background-color: white;
    border: 1px solid white;
}

.TextBox_Hide_KCPC {
    background-color: var(--KCPC_Background_Color);
    border: none;
}

/* =========================================================
   TABLE VIEW COMPONENT
========================================================= */

.TableView {
    border-collapse: collapse;
    table-layout: fixed;
}

    .TableView th {
        font-weight: bold;
        background-color: #EFEFEF;
    }

    .TableView th,
    .TableView td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 4px;
        vertical-align: bottom;
        border: 1px solid #AAAAAA;
    }

/* =========================================================
   GRIDVIEW (DEFAULT THEME)
========================================================= */

.GridView_FixedHeader {
    margin-top: -1px;
    margin-left: -1px;
    position: absolute;
    font-weight: bold;
}

.GridView_Default {
    margin: 0;
    color: black;
    font-size: small;
}

    .GridView_Default a {
        background-color: DarkGray;
        color: White !important;
    }

    .GridView_Default th {
        border: 1px solid Black;
        background-color: DarkGray;
        color: white;
        font-style: italic;
        padding: 1px 8px;
    }

    .GridView_Default tr:nth-child(2) {
        height: 42px;
        background-color: white;
    }

    .GridView_Default tr:nth-child(odd),
    .GridView_Default tr:nth-child(even) {
        height: 20px;
    }

    .GridView_Default tr:nth-child(odd) {
        background-color: LightGray;
    }

    .GridView_Default tr:nth-child(even) {
        background-color: white;
    }

    .GridView_Default td {
        border: 1px solid black;
        font-size: small;
        padding: 1px 8px;
        vertical-align: bottom;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }

/* =========================================================
   GRIDVIEW (WHITE THEME)
========================================================= */

.GridView_White {
    margin: 0;
    border: 1px solid black;
    color: black;
    font-size: small;
}

    .GridView_White a {
        background-color: DarkGray;
        color: White !important;
    }

    .GridView_White th {
        border: 1px solid Black;
        background-color: DarkGray;
        color: white;
        font-style: italic;
        padding: 1px 8px;
    }

    .GridView_White tr {
        background-color: white;
    }

        .GridView_White tr:nth-child(2) {
            height: 42px;
        }

    .GridView_White td {
        border: 1px solid black;
        font-size: small;
        padding: 1px 8px;
        vertical-align: bottom;
        white-space: normal;
    }

/* =========================================================
   MOBILE OVERRIDES
========================================================= */

@media (max-width: 767px) {

    body {
        font-size: 14px;
    }

    .navbar,
    .navbar-default {
        background-color: lightgray !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .navbar-header,
    .navbar-collapse {
        border: none !important;
    }

    .navbar-toggle {
        z-index: 99999 !important;
    }

    .nav-filler {
        display: none !important;
    }

    .navbar-collapse.in .navbar-nav {
        float: none !important;
        width: 100%;
    }

        .navbar-collapse.in .navbar-nav > li {
            float: none !important;
            display: block !important;
            width: 100%;
        }

    /* Overlay mobile fix */
    .divOverlay {
        position: fixed;
        width: 90%;
        max-width: 550px;
        left: 50% !important;
        transform: translateX(-50%);
        box-sizing: border-box;
    }

        .divOverlay table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

            .divOverlay table td {
                width: 100% !important;
                border: none;
                word-break: break-word;
                display: block;
            }

            .divOverlay table tr {
                border-bottom: 1px solid #ccc;
            }

        .divOverlay input,
        .divOverlay select,
        .divOverlay textarea {
            width: 100% !important;
            box-sizing: border-box;
        }

            .divOverlay input[type="submit"],
            .divOverlay input[type="button"] {
                position: relative;
                left: -4px;
            }

    /* Announcement layout fix */
    #divAnnouncement {
        width: 100% !important;
        margin: 250px auto 0 auto !important;
    }

        #divAnnouncement > div {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
        }

    #divLibrary_Policy,
    #divLibrary_Advertisement {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        text-align: center !important;
    }

    #divNewBooks {
        margin-top: 20px !important;
        width: 100% !important;
        clear: both !important;
    }
}