/*.errorframe { border: solid 0px !important; -moz-box-shadow: 0 0 2px 2px #1F8DB8; -webkit-box-shadow: 0 0 2px 2px#1F8DB8; box-shadow: 0 0 2px 2px #1F8DB8; }*/
.errorframe { border: solid 0px !important; -moz-box-shadow: 0 0 2px 2px #d00; -webkit-box-shadow: 0 0 2px 2px #d00; box-shadow: 0 0 2px 2px #d00; }

a.ui-selectmenu.errorframe { border: solid 0px !important; -moz-box-shadow: 0 0 2px 2px #d00; -webkit-box-shadow: 0 0 2px 2px #d00; box-shadow: 0 0 2px 2px #d00; }

.tinyspinner { background-image: url('/Areas/Global/Images/tiny-ajax-loader.gif'); width: 100%; height: 16px; background-position: center; background-repeat: no-repeat; }

/* Selection Bars*/
.selectbar { height: 30px; margin-bottom: 2px; line-height: 30px; font-size: 16px; text-align: center; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; cursor: pointer; overflow: hidden; text-wrap: none; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #ccc; }
    .selectbar.selected { background-color: #002E5E !important; color: #fff }
    .selectbar:hover { color: #fff; background-color: #516AA5 !important }

/* jQuery Customizations */
.ui-slider { -webkit-border-radius: 3px !important; border-radius: 3px !important; border-color: #ccc !important; }
.ui-slider-handle { -webkit-border-radius: 3px !important; border-radius: 3px !important; }

/* Blur Dialogs */
.ui-dialog { background: rgba(255, 255, 255, 0.92); box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); border: 1px solid #fff; padding: 0px }
.ui-dialog-title { width: 100%; margin: 0px !important; padding: 5px 5px 2px 5px; }
.ui-dialog-titlebar { background: transparent; padding: 0px 0px 5px 0px !important; margin: 0px 0px 0px 0px !important; border-top: 4px solid #516AA5 !important; }
.ui-widget-overlay { background: rgba(0, 0, 0, 0.1); }

/* jQuery UI tooltip Customization */
.bt-tooltip { font-size: 12px; line-height: 12px; border: solid 1px !important; border-color: #888 !important; border-radius: 5px; box-shadow: 2px 2px 5px #000; background-color: #fff; }

/* jQueryUI Calendar customizations */
table.ui-datepicker-calendar { border-collapse: separate; }
.ui-datepicker { border: 0px; }
.ui-datepicker-title { font-size: 16px; font-weight: normal }
.ui-datepicker-calendar thead tr th { font-size: 14px; font-weight: normal }
.ui-datepicker-calendar td { border: 0px solid transparent; }
.ui-widget-header { border-top: 0px; border-left: 0px; border-right: 0px }
.ui-datepicker td { padding-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 1px }
.ui-datepicker .ui-datepicker-calendar .ui-state-default { background: #B4C0E8 none; color: #000; padding: 5px; border: 0px; font-size: 14px; text-align: center; font-weight: normal }
.ui-datepicker-other-month { background: #D5CFCF none }
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a { background: #253D75 none; color: #fff }

/* Default Tooltips */
#rstooltip { background: #fff; border: #000 1px dashed; padding: 3px 10px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.50); z-index: 1000 }

/* Draggable for rule selection */
ul.draggable li { height: 22px; margin-top: 1px; margin-bottom: 1px; background-color: #1F8DB8; border-radius: 3px; }

.dragbaricl { position: absolute; top: 4px; left: 5px; }
.dragbaricr { position: absolute; top: 3px; right: 5px; }
.dragbartxtr { position: absolute; top: 3px; right: 5px; }
.dragbartxt { position: absolute; top: 4px; bottom: 5px; left: 30px; right: 25px; font-size: 14px; line-height: 14px; height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: move; }

/* File Upload */
.imageupload { opacity: 0; width: 0; height: 0; position: absolute; }
.fileupload label { display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 16px !important; width: 95px; height: 32px; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-align: center; cursor: pointer; border: solid 1px #ccc; background-color: #fff; color: #555; }
    .fileupload label:hover { background-color: #516AA5; border-color: #516AA5; color: #fff }

/* TODO: Apply to new datepick multi-month calendar these old DateGrid control basic stylings */
.dategrid-cell { color: #000; }
    .dategrid-cell.this-month { background-color: #B4C0E8; }
    .dategrid-cell.other-month { background-color: #D5CFCF; }
    .dategrid-cell.today { background-color: orange; }

/* Time-off navigation calendar */

.torcal-glyph { width: 32px; height: 32px; padding: 2px; }

.datepick-nav { margin-top: 3px; }

/* Time-off request list detail highlighting */

#torDatePicker td.ui-state-highlight { border: none; opacity: 1; }
    #torDatePicker td.ui-state-highlight span { background: #516AA5; }

.pagedialog { position: absolute; text-align: center; left: 5px; right: 5px; z-index: 1000; }
    .pagedialog .pagedialogcontent { display: inline-block; border: solid 1px #000; border-radius: 5px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.50); background-color: #fff; padding: 10px; text-align: left; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1); -ms-transition: all 200ms ease-in; -ms-transform: scale(1); -moz-transition: all 200ms ease-in; -moz-transform: scale(1); transition: all 200ms ease-in; transform: scale(0); }
        .pagedialog .pagedialogcontent.open { -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1); -ms-transition: all 200ms ease-in; -ms-transform: scale(1); -moz-transition: all 200ms ease-in; -moz-transform: scale(1); transition: all 200ms ease-in; transform: scale(1); }

.required { position: relative }
    .required i { position: absolute; top: 0px; color: #d00; display: inline-block; font: normal normal normal 14px/1 biotimeSet1; }
        .required i:before { font-size: 20px; content: "*"; }

.conditionlistboxelement { font-size: 16px; text-indent: 2px; line-height: 18px; min-height: 18px; cursor: default; transition: 0.3s; user-select: none; }
    .conditionlistboxelement:hover { background-color: #ddd; }
    .conditionlistboxelement.selected { background-color: #ddd }
        .conditionlistboxelement.selected:hover { background-color: #ccc; }
    .conditionlistboxelement label { white-space: nowrap }

.dialog-no-title .ui-dialog-titlebar { display: none }

.osn { display: inline-block; vertical-align: top; cursor: default; margin-right: 15px; width: 98px; text-align: right; font-size: 14px; line-height: 18px; margin-top: 5px }
.osc { display: inline-block; vertical-align: middle; text-align: left; margin-bottom: 5px; margin-right: 5px }

.optionBox { width: 400px; margin-right: 5px; margin-bottom: 5px; padding: 5px; float: left; }
.optionHeader { width: 100%; height: 40px; background-color: #253D75; color: #fff }
.optionName { cursor: default; margin-right: 15px; width: 175px; margin-top: 3px; text-align: right; float: left; }
.optionSName { cursor: default; margin-right: 15px; width: 100px; margin-top: 1px; text-align: right; float: left; font-size: 14px; line-height: 18px; }
.optionTName { cursor: default; margin-top: 3px; margin-right: 15px; width: 175px; vertical-align: middle; display: table-cell; text-align: right; float: left; }
.optionLCtrl { margin-right: 15px; width: 100px; vertical-align: middle; display: table-cell; text-align: left; float: left; }
.optionCtrl { padding-bottom: 5px; vertical-align: middle; display: table-cell; text-align: left; float: left; }
.optionValueDisplayOnly { margin-bottom: 5px; padding: 2px; text-align: left; width: 300px; float: left; padding-right: 20px; padding-top: 4px; }
.optionText { margin-top: 3px; vertical-align: middle; display: table-cell; float: left; }

.optl { display: inline-block; vertical-align: middle; width: 150px; text-align: right; margin-bottom: 10px; margin-right: 5px }
.optc { display: inline-block; vertical-align: middle; margin-bottom: 10px; }

.fl { float: left; }
.fr { float: right; }
.cf { clear: both; }
.ib { display: inline-block }
.vat { vertical-align: top }
.nw { white-space: nowrap }

td.vat { vertical-align: top }

.unitLabel { margin-bottom: 5px; padding: 4px; width: 200px; text-align: right; float: left; display: block; }
.unitoptionName { margin-bottom: 5px; padding: 4px; width: 300px; text-align: left; float: left; }

.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Allocation */
.allocated-container { width: 180px; max-height: 200px; overflow-y: auto; }
    .allocated-container > ul > li { padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor:pointer}
    .allocated-container > ul > li:hover { background-color: #eee; color: #000; }

/* Scrollbar Styling */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.2); }
}

::-webkit-scrollbar { width: 12px; height: 12px }
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.05); -webkit-border-radius: 3px; }
    ::-webkit-scrollbar-track:hover { background-color: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { border: solid 1px rgba(0,0,0,0.3); -webkit-border-radius: 3px; border-radius: 3px; background: rgba(0,0,0,0.3); }
    ::-webkit-scrollbar-thumb:hover { }
/* Employee profile opacity when it is read only */ input:disabled, .ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: 0.65; }
.checker.disabled { opacity: 0.5; }