/* Page Layout ----------------------------------- */

html
{
}

body
{
    margin: 0px;
    padding: 0px;
}

/* Header ---------------------------------------- */

#reloadbar
{
    line-height : 0px;
    background : silver;
    display : none;
}

#reloadbar .progress
{
    display : inline-block;
    height : 3px;
    background : #fc0;
    width : 0%;
    vertical-align : top;
}

/* ul.nav ----------------------------------------- */

ul.nav
{
    margin : 0px;
    padding : 0px;
}

ul.nav li
{
    list-style : none;
    display : inline;
    margin-right : 10px;
}

ul.nav li:before
{
    content : none;
}

/* BreadcrumbBar ------------------------------------------- */

#breadcrumbbar
{
    margin : 0px;
    padding : 10px 0px;
}

/* Navbar ------------------------------------------- */

#navbar
{
    margin : 0;
    padding : 5px 0;    
}

#navbar .ui-button
{
    font-size : 13px;
    margin-top: 2px;     
}

/* Menubar ---------------------------------------- */

#menubar
{
    background: #047;
    color: white;
    font-size: 0.85em;
    padding: 5px 0;
    z-index: 1;    
}

#menubar .row
{
    margin : 0px;
}

#menubar a
{
    color : white;
}

#menubar a:hover
{
    color : #fc0;
}

#menubar a.home
{
   color : #fc0;
   font-weight : bold; 
}

#menubar a.home:hover
{
   color : white;
}

/* Main ------------------------------------------ */

#main
{
    padding : 20px 0px;
}

/* Footer ---------------------------------------- */

#footer
{
    border-top : 1px solid silver;
    color : silver;
    font-size : 12px;
    text-align : center;
}

#footer ul.nav li
{
    font-size : 12px;
}

#footer .contact span
{
    margin : 0px 10px;    
}

/* Buttons --------------------------------------- */

.button.block
{
    display : block;
}

/* MVC Standard Styles --------------------------- */ 

.field-validation-error
{
    color: #f00;
}

.input-validation-error
{
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors
{
    font-weight: 600;
    color: #f00;
}

span.validation-summary-errors
{
    display : block;
    margin : 10px 0px;
}

#validation
{
    background : #900;
    color : white;
}

.validation-summary-errors
{
    display : block;
    color : white;
    padding : 10px 20px 10px 24px; 
}


/* View Messages ----------------------------------- */

#messages
{
    font-weight: 600;
    color: white;
    background : #494;
}

.model-message-summary
{
    display : block;
    padding : 10px 20px 10px 24px;    
}

/* Breadcrumb --------------------------------------------- */

ul.breadcrumb
{
    padding : 0px;
    margin : 0px;
    height : 24px;
}

ul.breadcrumb li
{
    list-style-type : none;
    display : inline;    
    margin-right : 7px;
    padding-right : 8px;
    border-right : 1px solid silver;    
}

ul.breadcrumb li:before
{
    content : none;
}

ul.breadcrumb li.last
{
    border : none;
}

/* LogOnOff Control -------------------------- */

.logonoff
{
    position : relative;    
}

.logonoff a.username
{
    font-weight : 600;
    font-size : inherit;
}    

.logonoff a.username:hover
{
    text-decoration : none;
}    

.logonoff a
{
    padding-right : 5px;
    margin-right : 2px;
    border-right : 1px solid silver;
}  

.logonoff a.noborder
{
    border-right : none;
} 

/* Sonos Control --------------------------- */

.sonos-control 
{
    margin-left : 10px;
}

.sonos-control img
{
    vertical-align : middle;
}

.sonos-control a
{
    cursor : pointer;
}

/* jQuery UI Overrides ------------------------------------------ */

.ui-combobox.ui-button { margin-left: -1px; }
.ui-combobox.ui-button-icon-only .ui-button-text { padding: 0.35em; } 
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
.ui-datepicker-trigger { margin-left : 5px; margin-right : 0px; } 
.ui-datepicker-trigger .ui-button-text { line-height : normal !important; }

/* Paginator -------------------------------- */

div.paginator 
{
    padding : 5px 5px;
    text-align : center;
    position : relative;
    height : 25px;
    margin : 10px 0px;
}        

div.paginator a.paginator_next
{
    position : absolute;
    right : 0px;    
}    

div.paginator a.paginator_next ,
div.paginator a.paginator_prev 
{
    width : 24px;
    height : 24px;
}    

div.paginator a.paginator_prev
{
    position : absolute;
    left : 0px;
}    

div.paginator select 
{
    margin : 0px;
    width : auto;
}

span.paginator_rows
{
    padding-left : 20px;
}

span.paginator_excel
{
    position : absolute;
    right : 50px;
    top : 0px;
}

span.paginator_excel img
{
    margin-right : 5px;
    position : relative;
    top : 8px;
}

/* Misc ----------------------------------- */

.inline
{
    display : inline;
}

td input, td select
{
    margin : 0px !important;
}

.print 
{
    display : none !important;
}

/* TimePicker ------------------------------ */

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

/* Tech Callout ----------------------------- */

.tech-callout
{
    font-family : VeraMono, monospace; 
    font-weight : normal; 
    padding : 10px 5px; 
    background : #F0F0F0; 
    border-radius : 5px;
}

/* Callout ----------------------------- */

.callout
{    
    padding : 10px;
    background : #F0F0F0; 
    border-radius : 5px;    
}


/* Customer Bookings ------------------------------ */

.booking a:not(.button) { font-weight : normal; }
.booking.overdue, .booking.overdue a:not(.button) { background : #FFDDDD; font-weight : bold; color : #990000 !important; }
.booking.today, .booking.today a:not(.button) { background : #FFEECC; font-weight : bold; color : black !important;  }
.booking.missing, .booking.missing a:not(.button) { background : #FFEEFF; font-weight : bold; color : #990099 !important; }
.booking.unconfirmed, .booking.unconfirmed a:not(.button) { background : #EEEEFF; font-weight : bold; color : #000099 !important; }
.booking.completed, .booking.completed a:not(.button) { background : #DDFFDD; font-weight : bold; color : #009900 !important; }
.booking.cancelled, .booking.cancelled a:not(.button) { background : #F0F0F0; color : #333 !important; }

/* Customer Notes ---------------------- */

.customer-note
{
    font-size : 13px;
}

.customer-note
{
    margin : 2px 0px;    
}

/* Accordion -------------------------- */

.ui-accordion .ui-accordion-header
{
    font-size : 20px !important;
}

/* Password ----------------------- */

.password-text
{
    font-family : VeraMono, Monospace !important;
    color : #009;
    font-weight : normal;    
    line-height : 18px;
}

#password-dialog input
{
    font-size : 30px;
    line-height : normal;
    text-align : center;
    width : 100%;
    box-sizing : border-box;
    padding : 20px 10px;
}

.password-nato
{
    text-align : center;
    padding : 10px 0px;
}

.password-indexed>div
{
    float: left;    
    text-align: center;
    margin: 2px;
    padding: 2px;
    border: 1px solid silver;
    border-radius: 3px;
    min-width: 47px;
}

.password-indexed .character
{
    font-weight: bold;
}

/* Documentation --------------------------- */

.documentation-alert
{
    background : white url('/Content/Images/warning.png') repeat-y left;
    padding : 10px 20px;    
    border : 1px solid #fc0;
    margin : 10px 0px;
}

.documentation-alert h6
{
    margin : 0px;
}

.documentation-alert p
{
    margin : 5px 0px;
}

.documentation-alert p:last-child
{
    margin-bottom : 0px;
}

.documentation-alert .button
{
    float : right;
}

/* ObjectIcon --------------------------- */

.object-icon
{
    font-size : 11px;
    font-weight : bold;
    color : white;
    text-transform : uppercase;
    border-radius : 3px;
    padding : 2px 6px;
}

/* FileUpload Download -------------------------- */

.file-upload-download
{
    position : relative;
    min-height : 50px;
    margin : 10px 0px;
    padding : 0px 0px 0px 50px;
    box-sizing : border-box;
    border-bottom : 1px solid silver;
}

.file-upload-download:last-child
{
    border-bottom : none;
}

.file-upload-download .link
{
    font-weight : 600;  
    font-size : 16px;  
}

.file-upload-download .icon
{
    position : absolute;
    left : 0px;
    top : 0px;
}

.file-upload-download .icon img
{
    border-radius : 5px;
}

.file-upload-download .delete a
{
    cursor : pointer;
}

/* InventoryUpload ------------------------------- */

.inventory-decoded
{
    padding : 10px 20px;    
    font-family : VeraMono, monospace; 
    font-weight : normal; 
    background : #F0F0F0; 
    border-radius : 5px;
}

.inventory-decoded dd
{   
    font-size : 18px;
    line-height : normal;
}

.inventory-decoded dt
{
    margin-top : 10px;
}

.inventory-decoded .win32bios dd
{
    font-size : 24px;
}

/* Color Pip ----------------------------- */

.color-pip
{
    display : inline-block;
    width : 0.8em;
    height: 0.8em;
    border-radius : 20%;     
    background-color : silver; 
    margin-right : 0.2em;  
}

/* Shifts --------------------------- */

.shift
{
    text-align: center;
}

.shift-icon
{
    display: inline-block;
    padding : 3px;
    border-radius : 2px;
    background: #eee;        
    line-height: 0;
    vertical-align: top;
}

.shift-icon img
{
    width : 20px;   
    height: 20px;     
}

.shift-closed 
{
    background: repeating-linear-gradient(
      45deg,
      rgba(0,200,255,0.2),
      rgba(0,200,255,0.2) 5px,
      rgba(255,255,255,0.2) 5px,
      rgba(255,255,255,0.2) 10px
    );
}

.shift-leave 
{
    background: repeating-linear-gradient(
      45deg,
      rgba(120,120,120,0.2),
      rgba(120,120,120,0.2) 5px,
      rgba(255,255,255,0.2) 5px,
      rgba(255,255,255,0.2) 10px
    );
}

.shift-missing
{
    text-align : center;
    font-weight: bold;
    color : red;
}

.shift-overtime 
{
    background : #fc0;
}

.shift-short-notice
{
    border: 2px dashed #c00;
}

.shift-add 
{
    display : inline-block;        
    color: black;
    font-weight: bold;
    border-radius: 2px;
    border: 2px dashed #ddd;
    padding: 1px 2px;    
}

.user-shifts 
{
    margin-left: 10px;
}

.user-shifts .shift-icon img
{
    width : 28px;
    height: 28px;
}

/* Asset Tag ------------------------ */

.asset-tag
{
    border : 2px solid silver;
    border-radius: 5px;
    width: 275px;
    height: 150px;
    position: relative;
    text-align : left;
    display: inline-block;   
    background: white; 
    color: black;
}

.asset-tag .asset-tag-header 
{
    background: #047;
    position: relative;
    height: 50px;    
}

.asset-tag .asset-tag-spannerman 
{
    position: absolute;
    left : 5px;
    bottom : 0px;
    height: 40px;
}

.asset-tag .asset-tag-logo
{
    position: absolute;
    right : 10px;
    bottom: 10px;
    height: 30px;
}

.asset-tag .asset-tag-qrcode
{
    position: absolute;
    right: 10px;
    height: 80px;    
    bottom: 10px;
}

.asset-tag .asset-tag-value
{
    font-family : Lucida Console, monospace; 
    font-weight : bold;     
    text-transform: uppercase; 
    font-size: 40px;
    line-height: normal; 
    margin: 15px 10px;
}

.asset-tag .asset-tag-phone
{
    font-family: Ubuntu, Arial, Helvetica, Sans-Serif;
    color: #666;
    font-weight : bold;
    font-size: 22px;
    margin: 15px 10px;
}

.asset-tag .asset-tag-value input
{
    width : 130px;
    font-family : Lucida Console, monospace; 
    font-weight : bold;     
    text-transform: uppercase; 
    font-size: 30px;
}


/* Skill Belts ---------------------- */

.skill-belt {                
    font-size: 0.8em;    
}

.skill-belt .lozenge {
    border-bottom-left-radius: 10px;
    box-shadow: 0 5px 15px -5px black;
    overflow: hidden;
}

.skill-belt .details {
    font-size: 1.3em;
    line-height: normal;
    font-weight: bold;    
    border: 1px solid #ccc;
    border-bottom: none;
    border-top-left-radius: 10px;
    display: flex;
    flex-wrap: nowrap;      
    align-items: center;
    min-height: 24px;
    overflow: hidden;
    padding-right: 10px;
    flex-grow: 1;
}

.skill-belt .details > * {
    padding: 5px 10px;
    flex: 0 0 auto;
}

.skill-belt .details > .name {
    flex: 1 1 auto;
}

.skill-belt .details > .manufacturer-logo {
    padding: 0;
    padding-left: 10px;
    height: 32px;
    display: block;
}

.skill-belt .details > .sprite
{
    padding: 0;    
}

.skill-belt .details .procedure{
    padding-top: 5px;
    padding-bottom: 0;
    padding-right: 0;
}

.skill-belt .details > .customer {
    display: inline-block;
    background: #047;
    color: white;
    height: 24px;    
}


.skill-belt .dates {
    padding: 5px 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-top: 5px solid #333;
}

.skill-belt .dates .last {
    font-weight: bold;
}

option.skill-rank {
    background-image: none;
}

.skill-rank.white {
    border-top-color: #ccc;
    background-image: linear-gradient(#fff, #ccc);
    color: black;
}

.skill-rank.yellow {
    border-top-color: #fc0;
    background-image: linear-gradient(#fe9, #fc0);
    color: black;
}

option.skill-rank.yellow {
    background: #fc0;    
}

.skill-rank.green {
    border-top-color: #090;
    background-image: linear-gradient(#6c6, #090);
    color: white;
}

option.skill-rank.green {
    background: #090;
}


.skill-rank.blue {
    border-top-color: #009;
    background-image: linear-gradient(#66c, #009);
    color: white;
}

option.skill-rank.blue {
    background: #009;
}


.skill-rank.black {
    border-top-color: #000;
    background-image: linear-gradient(#666, #000);
    color: white;
}

option.skill-rank.black {
    background: #000;
}


.skill-belt .qualifications {
    margin-top : 5px;
    text-align: right;
}




/* Skills ---------------------- */

.skill {
    font-size: 0.8em;
    border-bottom-left-radius: 10px;
    box-shadow: 0 5px 15px -5px black;
    border: 1px solid #ccc;
    overflow: hidden;
    border-top-left-radius: 10px;    
    display: flex;
    flex-direction: column;
    align-items: stretch;    
    align-content: flex-start;
}

.skill .details {
    font-size: 1.3em;
    line-height: normal;      
    border-bottom: none;    
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 24px;
    overflow: hidden;    
    font-weight: bold;    
    flex-grow: 1;
}

.skill .details > * {
    padding: 5px 10px;
    flex: 0 0 auto;    
}

.skill .details > .manufacturer-logo {
    padding: 0;
    padding-left: 10px;
}

.skill .details > .manufacturer-logo img {
    height: 32px;
    display: block;
}

.skill .details > .name {
    flex: 1 1 auto;
}

.skill .details > .edit,
.skill .details > .procedure {
    line-height: 0;
    padding-left: 0;
}

.skill .details > .procedure {
    padding-right : 5px;    
}


.skill .belts {
    display: flex;
    flex-wrap: wrap;
}

.skill .belts > div { 
    flex: 1 1 50%;
    text-align: left;
    border-top-width : 5px;
    border-top-style: solid;
    font-weight: bold;
    line-height: 0;
    padding: 5px 0;    
}

.skill .customer {
    display: inline-block;
    background: #047;
    color: white;
    height: 24px;
}

/* TOTP Code ------------------------------ */

.totp-code {    
}

.totp-code .value {
    cursor: pointer;  
    font-weight: bold;
}

.totp-code .bar {
    height: 3px;
    margin-top: 5px;
    background: #eee;
}

.totp-code .bar div {
    height: 100%;
    background: #0c0;
}

.totp-code.critical .bar div {
    background: #c00;
}

.totp-code .delete {
    color: #999;
}

.totp-code .delete:hover {
    color: #c00;
}