.datepicker { direction: ltr; } .datepicker.datepicker-rtl { direction: rtl; } .datepicker.datepicker-rtl table tr td span { float: right; } [dir=rtl] .datepicker { direction: rtl; } .datepicker .next, .datepicker .prev { position: relative; color: transparent !important; } .datepicker .next::after, .datepicker .prev::after { content: ""; position: absolute; display: block; width: 0.5rem; height: 0.5rem; border-style: solid; border-radius: 0; top: 50%; left: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: left; transform-origin: left; } .datepicker .next::after { border-width: 0 1px 1px 0; margin-left: -0.25rem; } [dir=rtl] .datepicker .next::after { margin-left: 0; border-width: 1px 0 0 1px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .datepicker .prev::after { border-width: 1px 0 0 1px; } [dir=rtl] .datepicker .prev::after { margin-left: -0.25rem; border-width: 0 1px 1px 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .datepicker-dropdown { top: 0; left: 0; padding: .25rem; } .datepicker table { margin: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .datepicker table tr td, .datepicker table tr th { width: 2rem; height: 2rem; border: none; text-align: center; line-height: calc(2rem - 2px); } .datepicker table tr td.day:hover, .datepicker table tr td.focused { cursor: pointer; } .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { background: none; cursor: default; } .datepicker table tr td.highlighted { border-radius: 0 !important; background: #eff8fc; } .datepicker table tr td.highlighted.focused { background: #d5edf7; } .datepicker table tr td.today { background: #fff4df !important; } .datepicker table tr td.today.focused { background: #ffe9c0 !important; } .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:active { background: #fff4df !important; } .datepicker table tr td.range { border-radius: 0 !important; } .datepicker table tr td.range.highlighted { background: #e2f2fa; } .datepicker table tr td.range.highlighted.focused { background: #c8e7f5; } .datepicker table tr td.range.today { background: #ffefd0 !important !important; } .datepicker table tr td.range.today.disabled, .datepicker table tr td.range.today.disabled:active { background: #ffefd0 !important !important; } html:not([dir=rtl]) .datepicker table tr td.range-start:not(.range-end) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } [dir=rtl] .datepicker table tr td.range-start:not(.range-end) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } html:not([dir=rtl]) .datepicker table tr td.range-end:not(.range-start) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } [dir=rtl] .datepicker table tr td.range-end:not(.range-start) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .datepicker table tr td.selected, .datepicker table tr td.selected:hover, .datepicker table tr td.selected.highlighted { color: #fff; } .datepicker table tr td span { display: block; float: left; width: 3.375rem; height: 3.375rem; line-height: 3.375rem; cursor: pointer; } .datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover { background: none; cursor: default; } [dir=rtl] .datepicker table tr td span { float: right; } .table-striped .datepicker table tr td, .table-striped .datepicker table tr th { background-color: transparent; } .datepicker .datepicker-switch, .datepicker .prev, .datepicker .next, .datepicker tfoot tr th { cursor: pointer; } .datepicker .cw { padding: 0 .125rem; width: .75rem; vertical-align: middle; font-size: .625rem; } .datepicker-months table, .datepicker-years table, .datepicker-decades table, .datepicker-centuries table { width: 12.75rem; } .datepicker-months table td, .datepicker-years table td, .datepicker-decades table td, .datepicker-centuries table td { padding: 0 0 1.25rem 1.25rem; } [dir=rtl] .datepicker-months table td, [dir=rtl] .datepicker-years table td, [dir=rtl] .datepicker-decades table td, [dir=rtl] .datepicker-centuries table td { padding: 0 1.25rem 1.25rem 0; } .input-group.date .input-group-addon { cursor: pointer; } .input-daterange input { text-align: center; } .default-style .datepicker-dropdown { z-index: 1060 !important; } .default-style .datepicker { border-radius: 0.25rem; } .default-style .datepicker table tr td, .default-style .datepicker table tr th { border-radius: 0.25rem; } .default-style .datepicker table tr td.old, .default-style .datepicker table tr td.new { color: #babbbc; } .default-style .datepicker table tr td.day:hover, .default-style .datepicker table tr td.focused { background: rgba(24, 28, 33, 0.03); } .default-style .datepicker table tr td.disabled, .default-style .datepicker table tr td.disabled:hover { background: none; color: #babbbc; } .default-style .datepicker table tr td.highlighted.disabled, .default-style .datepicker table tr td.highlighted.disabled:active { color: #babbbc; } .default-style .datepicker table tr td.today.disabled, .default-style .datepicker table tr td.today.disabled:active { color: #babbbc; } .default-style .datepicker table tr td span { border-radius: 0.25rem; } .default-style .datepicker table tr td span:hover, .default-style .datepicker table tr td span.focused { background: rgba(24, 28, 33, 0.03); } .default-style .datepicker table tr td span.disabled, .default-style .datepicker table tr td span.disabled:hover { color: #babbbc; } .default-style .datepicker table tr td span.old, .default-style .datepicker table tr td span.new { color: #babbbc; } .default-style .datepicker .next::after, .default-style .datepicker .prev::after { color: #babbbc; } .default-style .datepicker .next:hover::after, .default-style .datepicker .prev:hover::after { color: #4E5155; } .default-style .datepicker .datepicker-switch:hover, .default-style .datepicker tfoot tr th:hover { background: rgba(24, 28, 33, 0.03); } .default-style .datepicker tfoot tr th, .default-style .datepicker .datepicker-switch { font-weight: 500; } .default-style .datepicker .cw, .default-style .datepicker .dow { color: #babbbc; font-size: 0.75rem; font-weight: 500; background: rgba(24, 28, 33, 0.03); border-radius: 0 !important; } .material-style .datepicker-dropdown { z-index: 1060 !important; -webkit-animation: none !important; animation: none !important; } .material-style .datepicker { border-radius: 0.125rem; } .material-style .datepicker table tr td, .material-style .datepicker table tr th, .material-style .datepicker table tr td span { border-radius: 99rem; } .material-style .datepicker table tr td.day, .material-style .datepicker tfoot tr th { font-size: 0.75rem; font-weight: 500; } .material-style .datepicker table tr td.old, .material-style .datepicker table tr td.new { color: #babbbc; } .material-style .datepicker table tr td.day:hover, .material-style .datepicker table tr td.focused { background: rgba(24, 28, 33, 0.03); } .material-style .datepicker table tr td.disabled, .material-style .datepicker table tr td.disabled:hover { background: none; color: #babbbc; } .material-style .datepicker table tr td.highlighted.disabled, .material-style .datepicker table tr td.highlighted.disabled:active { color: #babbbc; } .material-style .datepicker table tr td.today.disabled, .material-style .datepicker table tr td.today.disabled:active { color: #babbbc; } .material-style .datepicker table tr td span:hover, .material-style .datepicker table tr td span.focused { background: rgba(24, 28, 33, 0.03); } .material-style .datepicker table tr td span.disabled, .material-style .datepicker table tr td span.disabled:hover { color: #babbbc; } .material-style .datepicker table tr td span.old, .material-style .datepicker table tr td span.new { color: #babbbc; } .material-style .datepicker .next::after, .material-style .datepicker .prev::after { color: #babbbc; } .material-style .datepicker .next:hover::after, .material-style .datepicker .prev:hover::after { color: #4E5155; } .material-style .datepicker .datepicker-switch:hover, .material-style .datepicker tfoot tr th:hover { background: rgba(24, 28, 33, 0.03); } .material-style .datepicker tfoot tr th, .material-style .datepicker .datepicker-switch { font-weight: 500; } .material-style .datepicker .cw, .material-style .datepicker .dow { color: #babbbc; font-size: 0.75rem; font-weight: 500; background: rgba(24, 28, 33, 0.03); border-radius: 0 !important; }