/* 
    Self Service specific style.
    Note: where possible, elements should ideally be shown or hidden via 'display_elements' configuration elements
          as this avoids the overhead of actually rendering items only for them to be hidden in CSS.

    However some tweaks are only possible via CSS.
*/

.ess {
    padding: 0;
    margin: 0;
}

button.ui-datepicker-trigger
{
    display:none;
}

div.date-picker
{
    margin-bottom: 1em; /* 3%; */
    min-width: 400px;
}

div.date-picker label[for=start_date], div.date-picker label[for=end_date]
{
    width:100px;
}

input.date-picker
{ 
    width: 50%; 
}
div#ui-datepicker-div
{
    z-index:1000 !important;
}

.ui-datepicker
{ 
    font-size: 1.5em !important;
}

.fa-angle-left,
.fa-angle-right
{
    width: 15%;
}

/* Display the first BACK and the last FORWARD navigation button. 
   (See http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107 for technique)

   This is intended to display the period (normally week) navigation if there are any, but if not then the single day ones.
*/
button.date-navigate-back
{
    margin-right:2%;
    display:inline-block;
}

button.date-navigate-back ~ button.date-navigate-back
{
    display:none;
}

button.date-navigate-fwd
{
    display:none;
}

button.date-navigate-fwd ~ button.date-navigate-fwd
{
    margin-left:2%;
    display:inline-block;
}

/* New Layout */
/* Navigation (ref: http://codepen.io/damonbauer/pen/ECdhG) */

#nav_table
{
    width:100%;
}

#nav_table > tr > td:nth-child(1),
#nav_table > tr > td:nth-child(3)
{
    width:84px;
}

nav { 
    width:84px; 
    margin:0px; 
    background-color:#eee;
    height:100%; 
    top:0;
    z-index:999;
    text-align:center;
}
nav ul { 
    padding: 0px; 
    margin: 0px
}
nav ul li { 
    list-style: none; 
    display:inline-block; 
    margin-top: 12px;
    padding-top: 8px;
    text-align: center;
    width: 100%;
    opacity:0.7;
    flex-grow: 1;
}

nav ul li.busy, .btn.busy
{
    opacity:0.3 !important;
}

nav ul li.busy > a
{
    cursor:progress !important;
}

nav ul li.highlight,
nav ul li:hover
{
    background-color:var(--body-alt-bg);
    opacity:1.0;
}

nav ul li.highlight
{
    text-decoration: underline;
}

nav ul li label {
    display:block;
    white-space:nowrap;
    font-size: 1.4rem;
}
nav img { 
    width: 48px; height: 48px;
}

/* Define 'ATM'-style left and right positioning for navbars */
.navbar-atm-left
{
    position:fixed;
    left:0; 
}

.navbar-atm-left > ul > li,
.navbar-atm-right > ul > li,
.navbar-horiz > ul > li
{
    cursor:pointer;
    cursor:hand;
}

.navbar-atm-right
{
    position:fixed;
    right:0;
}

/* Define horizontal navbar */
nav.navbar-horiz
{
    width:auto;
    height:auto;
    padding-top:10px !important;
    padding-bottom:10px !important;
    text-align:center;
}

nav.navbar-horiz > ul
{
    margin:0 auto;
    max-width: 570px;
}

nav.navbar-horiz > ul > li
{
    margin-top:0px;
    margin-right:10px;
    text-align:center;
    vertical-align:top;
}

nav.navbar-horiz-100 > ul > li
{
    margin-right:0px;
    width:100px;
}

main { 
    position:relative; 
/*    margin-left: 88px !important;
    padding-left: 0px !important;
    margin-right: 88px !important; #TOREMOVE */
}
/* Don't need the top padding as nav is no longer at top */
body
{
    padding-top:initial;
    padding-bottom:initial;
    margin-top:initial;
    margin-bottom:initial;
}

#layout-job-dialog div.job,
#layout-job-dialog div.job-category
{
    font-size:1.5em;
    margin:0.25em 0 0.25em 0;
    text-align:center;
}

#layout-job-dialog div.job.default-job
{
    font-weight:bold;
}

#layout-job-dialog div.job:hover
{
    background-color:#ddd;
    cursor:pointer;
    cursor:hand;
}

#layout-job-dialog div.job.current-job
{
    background-color:#afa;
}

#layout-job-dialog div.job.current-job:hover
{
    /* Current job is already highlighted with green, but we want to provide a further highlight
       if the user hovers over */
    background-color:#6f6;
}

#layout-job-dialog div.job-category
{
    background-color:#0053a1;
    color:white;
    cursor:pointer;
    cursor:hand;
}

#layout-job-dialog div.job-category:hover
{
    background-color:#001d80;
}

#layout-job-dialog div.hidden-job
{
    display:none;
}

.warning
{
    text-align: center;
}

/* Home page tiles */

.home_tile
{
    padding:10px;
    overflow-y:auto;
}
.home_tile span.sub_heading
{
    font-weight:bold;
    display:block;
}
/*.person-tile
{
    background-color:#fff0de;
}
.job-tile
{
    background-color:#ffffde;
}
.leave-tile
{
    background-color:#deffe5;
}
.requests-tile
{
    background-color:#def1ff;
}*/
.modal-content
{
    z-index:10 !important;
}     
.btn-lg
{
    padding-top:5px;
    margin-bottom:10px;
}

.jumbotron
{
    margin-top:10px;
    padding:10px;
}

.table-striped
{
    font-size: 1.6rem;
}    

.button-row {
    margin-bottom: 12px;
}