.datepicker { padding: 4px; margin: 0; border-radius: 0.215rem; direction: ltr; } .datepicker-inline { display: block !important; width: 220px; } .datepicker-rtl { direction: rtl; } .datepicker-rtl table tr td span { float: right; } .datepicker-dropdown { top: 0; left: 0; padding: 4px; } .datepicker-dropdown:before { position: absolute; display: inline-block; content: ""; border-top: 0; border-right: 7px solid transparent; border-bottom: 7px solid #e4eaec; border-bottom-color: rgba(0, 0, 0, 0.2); border-left: 7px solid transparent; } .datepicker-dropdown:after { position: absolute; display: inline-block; content: ""; border-top: 0; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; } .datepicker-dropdown.datepicker-orient-left:before { left: 6px; } .datepicker-dropdown.datepicker-orient-left:after { left: 7px; } .datepicker-dropdown.datepicker-orient-right:before { right: 6px; } .datepicker-dropdown.datepicker-orient-right:after { right: 7px; } .datepicker-dropdown.datepicker-orient-bottom:before { top: -7px; } .datepicker-dropdown.datepicker-orient-bottom:after { top: -6px; } .datepicker-dropdown.datepicker-orient-top:before { bottom: -7px; border-top: 7px solid #e4eaec; border-bottom: 0; } .datepicker-dropdown.datepicker-orient-top:after { bottom: -6px; border-top: 6px solid #fff; border-bottom: 0; } .datepicker table { margin: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } .datepicker table th { font-weight: 500; } .datepicker table thead th, .datepicker table tfoot th { font-weight: 500; color: #526069; } .datepicker table tr td, .datepicker table tr th { width: 30px; height: 30px; text-align: center; border: none; border-radius: 0.215rem; } .table-striped .datepicker table tr td, .table-striped .datepicker table tr th { background-color: transparent; } .datepicker table tr td.old, .datepicker table tr td.new { color: #a3afb7; } .datepicker table tr td.day:hover, .datepicker table tr td.focused { cursor: pointer; background: #e4eaec; } .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { color: #a3afb7; cursor: default; background: none; } .datepicker table tr td.highlighted { color: #fff; background-color: #000; border-color: #0bb2d4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); border-radius: 0; } .datepicker table tr td.highlighted:hover { color: #fff; background-color: #066173; border-color: #0889a4; } .datepicker table tr td.highlighted:focus, .datepicker table tr td.highlighted.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.143rem rgba(11, 178, 212, 0.5); } .datepicker table tr td.highlighted.disabled, .datepicker table tr td.highlighted:disabled { color: #fff; background-color: #000; border-color: #0bb2d4; } .datepicker table tr td.highlighted:not(:disabled):not(.disabled):active, .datepicker table tr td.highlighted:not(:disabled):not(.disabled).active, .show > .datepicker table tr td.highlighted.dropdown-toggle { color: #fff; background-color: black; border-color: #087f97; } .datepicker table tr td.highlighted:not(:disabled):not(.disabled):active:focus, .datepicker table tr td.highlighted:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td.highlighted.dropdown-toggle:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.143rem rgba(11, 178, 212, 0.5); } .datepicker table tr td.highlighted.focused { background: #0889a4; } .datepicker table tr td.highlighted.disabled, .datepicker table tr td.highlighted.disabled:active { color: #a3afb7; background: #0bb2d4; } .datepicker table tr td.today { color: #fff; background-color: #000; border-color: #ffdb99; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } .datepicker table tr td.today:hover { color: #3e4854; background-color: #ffb733; border-color: #ffc966; } .datepicker table tr td.today:focus, .datepicker table tr td.today.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.143rem rgba(255, 219, 153, 0.5); } .datepicker table tr td.today.disabled, .datepicker table tr td.today:disabled { color: #fff; background-color: #000; border-color: #ffdb99; } .datepicker table tr td.today:not(:disabled):not(.disabled):active, .datepicker table tr td.today:not(:disabled):not(.disabled).active, .show > .datepicker table tr td.today.dropdown-toggle { color: #fff; background-color: black; border-color: #ffc559; } .datepicker table tr td.today:not(:disabled):not(.disabled):active:focus, .datepicker table tr td.today:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td.today.dropdown-toggle:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.143rem rgba(255, 219, 153, 0.5); } .datepicker table tr td.today.focused { background: #ffc966; } .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:active { color: #a3afb7; background: #ffdb99; } .datepicker table tr td.range { color: #fff; background-color: #000; border-color: #e4eaec; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); border-radius: 0; } .datepicker table tr td.range:hover { color: #3e4854; background-color: #a8bbc2; border-color: #c6d3d7; } .datepicker table tr td.range:focus, .datepicker table tr td.range.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.143rem rgba(228, 234, 236, 0.5); } .datepicker table tr td.range.disabled, .datepicker table tr td.range:disabled { color: #fff; background-color: #000; border-color: #e4eaec; } .datepicker table tr td.range:not(:disabled):not(.disabled):active, .datepicker table tr td.range:not(:disabled):not(.disabled).active, .show > .datepicker table tr td.range.dropdown-toggle { color: #fff; background-color: black; border-color: #bfcdd2; } .datepicker table tr td.range:not(:disabled):not(.disabled):active:focus, .datepicker table tr td.range:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td.range.dropdown-toggle:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.143rem rgba(228, 234, 236, 0.5); } .datepicker table tr td.range.focused { background: #c6d3d7; } .datepicker table tr td.range.disabled, .datepicker table tr td.range.disabled:active { color: #a3afb7; background: #e4eaec; } .datepicker table tr td.range.highlighted { color: #fff; background-color: #000; border-color: #78cee0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } .datepicker table tr td.range.highlighted:hover { color: #fff; background-color: #2dabc5; border-color: #4fbfd6; } .datepicker table tr td.range.highlighted:focus, .datepicker table tr td.range.highlighted.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.143rem rgba(120, 206, 224, 0.5); } .datepicker table tr td.range.highlighted.disabled, .datepicker table tr td.range.highlighted:disabled { color: #fff; background-color: #000; border-color: #78cee0; } .datepicker table tr td.range.highlighted:not(:disabled):not(.disabled):active, .datepicker table tr td.range.highlighted:not(:disabled):not(.disabled).active, .show > .datepicker table tr td.range.highlighted.dropdown-toggle { color: #fff; background-color: black; border-color: #44bbd4; } .datepicker table tr td.range.highlighted:not(:disabled):not(.disabled):active:focus, .datepicker table tr td.range.highlighted:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td.range.highlighted.dropdown-toggle:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.143rem rgba(120, 206, 224, 0.5); } .datepicker table tr td.range.highlighted.focused { background: #4fbfd6; } .datepicker table tr td.range.highlighted.disabled, .datepicker table tr td.range.highlighted.disabled:active { color: #a3afb7; background: #78cee0; } .datepicker table tr td.range.today { color: #fff; background-color: #000; border-color: #f2c876; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } .datepicker table tr td.range.today:hover { color: #3e4854; background-color: #e9a319; border-color: #eeb547; } .datepicker table tr td.range.today:focus, .datepicker table tr td.range.today.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.143rem rgba(242, 200, 118, 0.5); } .datepicker table tr td.range.today.disabled, .datepicker table tr td.range.today:disabled { color: #fff; background-color: #000; border-color: #f2c876; } .datepicker table tr td.range.today:not(:disabled):not(.disabled):active, .datepicker table tr td.range.today:not(:disabled):not(.disabled).active, .show > .datepicker table tr td.range.today.dropdown-toggle { color: #fff; background-color: black; border-color: #ecb13c; } .datepicker table tr td.range.today:not(:disabled):not(.disabled):active:focus, .datepicker table tr td.range.today:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td.range.today.dropdown-toggle:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.143rem rgba(242, 200, 118, 0.5); } .datepicker table tr td.range.today.disabled, .datepicker table tr td.range.today.disabled:active { color: #a3afb7; background: #f2c876; } .datepicker table tr td.selected, .datepicker table tr td.selected.highlighted { color: #3e4854; background-color: #fff; border-color: #ccd5db; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td.selected:hover, .datepicker table tr td.selected.highlighted:hover { color: #3e4854; background-color: #a3afb7; border-color: #aebcc6; } .datepicker table tr td.selected:focus, .datepicker table tr td.selected.focus, .datepicker table tr td.selected.highlighted:focus, .datepicker table tr td.selected.highlighted.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.143rem rgba(204, 213, 219, 0.5); } .datepicker table tr td.selected.disabled, .datepicker table tr td.selected:disabled, .datepicker table tr td.selected.highlighted.disabled, .datepicker table tr td.selected.highlighted:disabled { color: #3e4854; background-color: #fff; border-color: #ccd5db; } .datepicker table tr td.selected:not(:disabled):not(.disabled):active, .datepicker table tr td.selected:not(:disabled):not(.disabled).active, .show > .datepicker table tr td.selected.dropdown-toggle, .datepicker table tr td.selected.highlighted:not(:disabled):not(.disabled):active, .datepicker table tr td.selected.highlighted:not(:disabled):not(.disabled).active, .show > .datepicker table tr td.selected.highlighted.dropdown-toggle { color: #3e4854; background-color: #e6e5e5; border-color: #a7b6c1; } .datepicker table tr td.selected:not(:disabled):not(.disabled):active:focus, .datepicker table tr td.selected:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td.selected.dropdown-toggle:focus, .datepicker table tr td.selected.highlighted:not(:disabled):not(.disabled):active:focus, .datepicker table tr td.selected.highlighted:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td.selected.highlighted.dropdown-toggle:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.143rem rgba(204, 213, 219, 0.5); } .datepicker table tr td.active, .datepicker table tr td.active.highlighted { color: #3e4854; background-color: #fff; border-color: #3e8ef7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td.active:hover, .datepicker table tr td.active.highlighted:hover { color: #fff; background-color: #3e8ef7; border-color: #0d71f5; } .datepicker table tr td.active:focus, .datepicker table tr td.active.focus, .datepicker table tr td.active.highlighted:focus, .datepicker table tr td.active.highlighted.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.143rem rgba(62, 142, 247, 0.5); } .datepicker table tr td.active.disabled, .datepicker table tr td.active:disabled, .datepicker table tr td.active.highlighted.disabled, .datepicker table tr td.active.highlighted:disabled { color: #3e4854; background-color: #fff; border-color: #3e8ef7; } .datepicker table tr td.active:not(:disabled):not(.disabled):active, .datepicker table tr td.active:not(:disabled):not(.disabled).active, .show > .datepicker table tr td.active.dropdown-toggle, .datepicker table tr td.active.highlighted:not(:disabled):not(.disabled):active, .datepicker table tr td.active.highlighted:not(:disabled):not(.disabled).active, .show > .datepicker table tr td.active.highlighted.dropdown-toggle { color: #3e4854; background-color: #e6e5e5; border-color: #0a6beb; } .datepicker table tr td.active:not(:disabled):not(.disabled):active:focus, .datepicker table tr td.active:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td.active.dropdown-toggle:focus, .datepicker table tr td.active.highlighted:not(:disabled):not(.disabled):active:focus, .datepicker table tr td.active.highlighted:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td.active.highlighted.dropdown-toggle:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.143rem rgba(62, 142, 247, 0.5); } .datepicker table tr td span { display: block; float: left; width: 23%; height: 54px; margin: 1%; line-height: 54px; cursor: pointer; border-radius: 0.215rem; } .datepicker table tr td span:hover, .datepicker table tr td span.focused { background: #e4eaec; } .datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover { color: #a3afb7; cursor: default; background: none; } .datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover { color: #3e4854; background-color: #fff; border-color: #3e8ef7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover:hover { color: #fff; background-color: #3e8ef7; border-color: #0d71f5; } .datepicker table tr td span.active:focus, .datepicker table tr td span.active.focus, .datepicker table tr td span.active:hover:focus, .datepicker table tr td span.active:hover.focus, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active.disabled:hover.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.143rem rgba(62, 142, 247, 0.5); } .datepicker table tr td span.active.disabled, .datepicker table tr td span.active:disabled, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:disabled, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:disabled, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:disabled { color: #3e4854; background-color: #fff; border-color: #3e8ef7; } .datepicker table tr td span.active:not(:disabled):not(.disabled):active, .datepicker table tr td span.active:not(:disabled):not(.disabled).active, .show > .datepicker table tr td span.active.dropdown-toggle, .datepicker table tr td span.active:hover:not(:disabled):not(.disabled):active, .datepicker table tr td span.active:hover:not(:disabled):not(.disabled).active, .show > .datepicker table tr td span.active:hover.dropdown-toggle, .datepicker table tr td span.active.disabled:not(:disabled):not(.disabled):active, .datepicker table tr td span.active.disabled:not(:disabled):not(.disabled).active, .show > .datepicker table tr td span.active.disabled.dropdown-toggle, .datepicker table tr td span.active.disabled:hover:not(:disabled):not(.disabled):active, .datepicker table tr td span.active.disabled:hover:not(:disabled):not(.disabled).active, .show > .datepicker table tr td span.active.disabled:hover.dropdown-toggle { color: #3e4854; background-color: #e6e5e5; border-color: #0a6beb; } .datepicker table tr td span.active:not(:disabled):not(.disabled):active:focus, .datepicker table tr td span.active:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td span.active.dropdown-toggle:focus, .datepicker table tr td span.active:hover:not(:disabled):not(.disabled):active:focus, .datepicker table tr td span.active:hover:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td span.active:hover.dropdown-toggle:focus, .datepicker table tr td span.active.disabled:not(:disabled):not(.disabled):active:focus, .datepicker table tr td span.active.disabled:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td span.active.disabled.dropdown-toggle:focus, .datepicker table tr td span.active.disabled:hover:not(:disabled):not(.disabled):active:focus, .datepicker table tr td span.active.disabled:hover:not(:disabled):not(.disabled).active:focus, .show > .datepicker table tr td span.active.disabled:hover.dropdown-toggle:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.143rem rgba(62, 142, 247, 0.5); } .datepicker table tr td span.old, .datepicker table tr td span.new { color: #a3afb7; } .datepicker .datepicker-switch { width: 145px; } .datepicker .datepicker-switch, .datepicker .prev, .datepicker .next, .datepicker tfoot tr th { cursor: pointer; } .datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover, .datepicker tfoot tr th:hover { background: #e4eaec; } .datepicker .cw { width: 12px; padding: 0 2px 0 5px; font-size: 10px; vertical-align: middle; } .input-group.date .input-group-addon { cursor: pointer; } .input-daterange { width: 100%; } .input-daterange input { text-align: center; } .input-daterange .input-group { float: left; width: 50%; } .input-daterange .input-group:first-child input { border-radius: 0; } .input-daterange .input-group:not(:last-child) input { border-radius: 0; } .input-daterange .input-group:not(:first-child):not(:last-child) .input-group-addon { border-right-width: 0; border-left-width: 0; border-radius: 0; } .input-daterange .input-group:last-child .input-group-addon { border-left-width: 0; border-radius: 0; } .input-daterange .input-group:last-child input { border-radius: 0 3px 3px 0; } .input-daterange .input-group-addon { width: auto; min-width: 16px; font-weight: 400; line-height: 1.57142857; text-align: center; vertical-align: middle; background-color: #e4eaec; border: solid #e4eaec; border-width: 1px 0; } .input-daterange .input-group-addon:first-child { border-left-width: 1px; } .input-daterange .input-group-addon:last-child { border-right-width: 1px; }