/*****************************************************************
app.css version 06-25-2020
******************************************************************/

/*** start misc custom classes ***/
.help {	font-size:12px;font-weight:normal;text-align:left; margin-top:5px; margin-bottom:5px; }
.help_title { font-size:14px;font-weight:bold; text-align:left; margin-top:2px; margin-bottom:2px; }
.buffer-top-10 { margin-top:10px; }
.buffer-top-20 { margin-top:20px; }
.buffer-bottom-10 { margin-bottom:10px; }
.buffer-bottom-20 { margin-bottom:20px; }
.padding-5 { padding: 5px; }
.padding-10 { padding: 10px; }
.padding-15 { padding: 15px; }

/* this is where search results are rendered in the "employee search" reusable control (partial view) */
#empSearchRender {max-height:150px;overflow-y:auto; overflow-x:hidden;}

/* this will allow the search box to expand to full width when viewed within the collapsed menu (hamburger) */
.search-box {max-width:none;} 

/* set padding to keep content from hitting the edges */
.body-content { margin-top:90px; }

/* add a menu item hover over effect to the dropdown menu */
.dropdown-item:hover { background-color: lightgray; background-image: none; color:black; }

/*** bootstrap overrides ***/

/* override the default bootstrap behavior where horizontal description lists will truncate terms that are too long to fit in the left column */
.dl-horizontal dt { white-space: normal; }

/* fix for pixelated glyphicons */
.glyphicon { transform:rotate(0.001deg); }


/*** bootstrap main navbar ***/
#main-navbar, #main-navbar nav  {padding: 0px; line-height:0.6; background-color: #898b8e !important; color:white; }
#main-navbar .nav-link { font-size: .8rem; }
#main-navbar .navbar-brand { font-size: 1rem; padding-left: 1rem; padding-right: .6rem; margin-right:0px; line-height: 0.85; }
#main-navbar .nav-item, #main-navbar .navbar-brand, #main-navbar .nav-link { color: white !important; }
#main-navbar .nav-item:hover, #main-navbar .nav-link:hover,
#main-navbar .navbar-brand:hover, .show { color: black !important; background-color: white; }

/*** bootstrap app navbar ***/
#app-navbar { z-index: 999;  }/*background-color:#0071b9 !important;*/
#app-navbar nav { margin-top:23px; padding: 0px 15px 0px 0px; border-top: 1px solid white !important;}
#app-navbar .nav-link { color: white !important; }
#app-navbar .nav-item { padding:.5rem 1rem; }
#app-navbar .navbar-toggler { border-color: white !important; }
#app-navbar .navbar-brand:hover a, #app-navbar .nav-item:hover a { color: black !important; }
#app-navbar .nav-item:hover, #app-navbar .nav-link:hover, 
#app-navbar a.dropdown-toggle[aria-expanded="true"], 
#app-navbar .navbar-brand:hover, .show { color: black !important; background-color: white; }
#main-menu-min {display:none;}

/*** footer classes ***/
#footer { text-align: center; background-color:#222; color:gray; vertical-align:middle; line-height: 50px; padding-bottom:5px; }
#footer * a { color:gray; }
#footer * a:hover { color: white; text-decoration: none;}
.footer-section { line-height:22px; padding-top:8px;}
.footer-section > div { margin-bottom: 10px; text-align: left; }
.footer-section > div:first-child > a { font-size: 1.2em; padding-bottom: 5px; }
.footer-section > div:last-child { margin-bottom: 0px; }
#footer-col2-top, #footer-im { border-bottom: 2px solid red; }
#footer-col3-top, #footer-mesa-az { border-bottom: 2px solid orange; }
#footer-col4-top, #footer-services {border-bottom: 2px solid #0071b9;}

/*** 
    media query customizations
    These map to the same breakpoints used by the bootstrap framework
    http://getbootstrap.com/css/#grid-media-queries
***/

/* Extra small devices (phones, less than 768px) */
@media (max-width: 768px) { 
    #main-navbar { display:none; }
    #app-navbar nav { margin-top:0px; }
    #app-search-full { display:none; }
    #app-search-min { display:block; }    
    .footer-section > div { margin-bottom:15px; text-align:center; }
    .btn { padding-top: 10px; }    
    .body-content { margin-top:70px; }
    #app-navbar .nav-item:hover, #app-navbar .nav-link:hover,
    #app-navbar a.dropdown-toggle[aria-expanded="true"],
    #app-navbar .navbar-brand:hover, .show { color: white !important; background-color:transparent; }
    #app-navbar nav { margin-top:0px; color:white; }
    .dropdown-menu {background-color:white !important;}
    #main-menu-min {display:inline-block;}
}

/* Small devices (tablets, between 768px and 992px) */
@media (min-width: 768px) and (max-width: 992px) { 
    #main-navbar { display:inline-block; } 
    #app-search-full { display:none; }
    #app-search-min { display:inline-block; }
    .body-content { margin-top:90px; }
}

/* Medium devices (desktops, between 992px and 1200px) */
@media (min-width: 992px) and (max-width:1200px) { 
    #main-navbar { display:inline-block; }
    #app-search-full { display:inline-block; }
    #app-search-min { display:none; }
    .search-box { width:160px !important; }
    .body-content { margin-top:90px; }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width:1200px) {
    #app-search-min { display:none; }
}

/* end media query customizations */

/* media query adjustments just for printing */
@media print {
    @page { size: 300mm 427mm; margin: 5mm; font-size:12pt; }

    p { font-size: 12pt; }

    #logoframe { height: 111px; width: 111px; margin-top: 6px; }

    .borderless > tbody > tr > td, 
    .table-borderless > tbody > tr > th, 
    .table-borderless > tfoot > tr > td, 
    .table-borderless > tfoot > tr > th, 
    .table-borderless > thead > tr > td, 
    .table-borderless > thead > tr > th { border: 0; font-size: 12pt; }

    /* container to control the width of all content on the page */
    .container { width: 1100px; }

    .visible-print { display: inherit !important; }
    .hidden-print { display: none !important; }

    /* RadGrid related */
    .rgRow { font-size: 12pt; }
    .rgAltRow { font-size: 12pt; }
}