/*

Font

*/

*:not(.fa){
    font-family: 'Roboto Condensed', sans-serif;
}


/*


Global elements


*/

body {
    padding: 1rem;
}

body > p {
    display: none !important
}


#navbarlogo {
  height: 20px;
}

.navbar-brand > div {
    top: 0 !important;
}

.navbar-default {
    box-shadow: none !important;
    background: none !important;
    border: none !important;
}

/*

Print-Options

*/

#print_options_row {
    display: flex;
    background: #bbd6ec;
    padding: 2rem 0rem;
    border-radius: 1rem;
    border: 1px dashed #296395;
}

#print_options_row > div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

#print_options_row > div > [data-itemtype="print_button"] {
    flex: 0 0 auto;
    margin-right: 2rem;
}

#print_options_container > .btn[data-print_option] {
    display: flex;
    flex-direction: row;
    color: #3d3f42;
    background: #dce5f0;
    margin-right: 2rem;
    align-items: center;
    font-size: 1.5rem;
    border: 1px dashed #3d3f42;
    border-radius: 2rem;
    padding-left: 0.75rem;
    text-decoration: none !important;
}

#print_options_container > .btn[data-print_option] > .ico {
    display: flex;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #3d3f4278;
    border-radius: 100%;
    margin-right: 1rem;
    font-size: 2rem;
    justify-content: center;
    align-items: center;
}

#print_options_container > .btn > .ico > i {
    color: #47d047;
    opacity: 0;
}

#print_options_container > .btn > .cap {
    color: inherit;
}

#print_options_container > .btn.is-checked > .ico > i {
    opacity: 1;
}

body.has-missing-filters #print_options_row {
    display: none !important;
}


/*

Special Table styles 

*/

tfoot {
    position: relative;
    border-top: 2px solid #aaa;
}

.col_calc_percentage {
    position: relative;
}

.col_calc_percentage::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #efefef;
}

.col_calc_percentage > span {
    position: relative;
    z-index: 3;
}


.has-big-divider {
    position: relative;
    width: 5px;
    padding: 0 !important;
    overflow: hidden;
}

.has-big-divider::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #efefef;
}

.has-highlight {
    position: relative;
}

.has-highlight::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #efefef;
}

.has-highlight > span {
    position: relative;
    z-index: 3;
}

.has-highlight.is-target::after {
    background-color: #bbe4bc;
}

.has-highlight.is-field1::after {
    background-color: #e4c8bb;
}

.has-highlight.is-field2::after {
    background-color: #e4bbbb;
}

/*

Project-Team-Member 

*/

.projectteam_member {
    display: block;
    font-size: 1.1rem;
    line-height: 1.5;
}

.projectteam_member > div {
    display: flex;
    width: 100%;
    flex-direction: row;
}

.projectteam_member > div > span {
    color: #555;
    flex: 0 0 auto;
    padding-right: 1.5rem;
}

.projectteam_member strong {
    color: #000;
    flex: 1 1 auto;
}

.planning_accounting .projectteam_member {
    font-size: 1.4rem;
    line-height: 2.2;
}

.planning_accounting .projectteam_member > div {
    border-top: 1px solid #ddd;
}

.planning_accounting .projectteam_member > div:first-child {
    border-top: none;
}

.planning_accounting .projectteam_member > div > span {
    width: 140px;
    text-align: right;
}


/* 


Time-Picker 


*/

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table td a,
.bootstrap-datetimepicker-widget table td span {
    line-height: 20px !important;
    height: 20px !important;
}


/* 


Zeiten LNW (List page)


*/

body.zeiten-lnw-list .msg_missing_filter_selections {
    display: none;
    flex: 0 0 auto;
}

body.zeiten-lnw-list .msg_missing_filter_selections .red {
    font-weight: bold;
    color: #bd2222;
}

body.zeiten-lnw-list.has-missing-filters .msg_missing_filter_selections {
    display: inline-block !important;
    padding-right: 2rem;
    font-size: 1.5rem;
}

body.zeiten-lnw-list.has-missing-filters [data-itemid="print_button"] {
    display: none !important;
}

body.zeiten-lnw-list #print_friendly_scope1 {
    opacity: 0;
    position: absolute;
    overflow: hidden;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

body.zeiten-lnw-list [data-itemid="print_button"] {
    flex: 0 0 auto;
}

body.zeiten-lnw-list [data-itemid="print_button"] a {
    font-size: 2rem;
    padding-left: 4rem;
    padding-right: 4rem;
    text-transform: uppercase;
}

body.zeiten-lnw-list .filter-project_id-container > .btn,
body.zeiten-lnw-list .filter-leistungserbringer-container > .btn,
body.zeiten-lnw-list .filter-year_num-container > .btn,
body.zeiten-lnw-list .filter-month_num-container > .btn {
    color: #bd2222 !important;
    border-color: #bd2222 !important;
}

body.zeiten-lnw-list .filter-project_id-container[data-selected] > .btn,
body.zeiten-lnw-list .filter-leistungserbringer-container[data-selected] > .btn,
body.zeiten-lnw-list .filter-year_num-container[data-selected] > .btn,
body.zeiten-lnw-list .filter-month_num-container[data-selected] > .btn {
    color: #207d44 !important;
    border-color: #207d44 !important;
}

/*
    Back Button (Master/Detail)
*/

[data-itemid="back_master"] > a {
    font-size: 1.6rem;
    border-radius: 1rem;
    border: 1px solid #fff;
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 1rem;
    margin-right: 2rem;
    width: auto !important;
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

[data-itemid="back_master"] > a:hover {
    background: rgba(255,255,255,0.4);
}

/*
    Minimal Header (no yellow box)
*/

body.minimal_header [data-location="above-grid"] .row:nth-child(1) {
    position: absolute !important;
    top: 14rem !important;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 !important;
}

body.minimal_header [data-location="above-grid"] .row:nth-child(1) > div,
body.minimal_header [data-location="above-grid"] .row:nth-child(1) > div > span {
    padding: 0 !important;
}

body.minimal_header [data-location="above-grid"] .row:nth-child(1) > div > span > figure {
    margin: 0 !important;
}

/*

FAQ (Display)

*/

#faq .faq_topic {
    display: block;
    background: #faf7eb;
    padding: 0.25rem 2rem;
    border: 1px dashed #9f8d6d;
    border-radius: 1rem;
    cursor: pointer;
    margin-top: 0.5rem;
    font-size: 1.5rem;
}

#faq .faq_topic *,
#faq .faq_entry * {
    pointer-events: none;
}

#faq .faq_topic h5 {
    display: block;
    font-weight: bold;
    font-size: inherit !important;
    line-height: 1.5;
}

#faq .faq_topic h5 .icon {
    display: none !important;
}

#faq .faq_topic p {
    display: block;
    margin-top: 0.1rem;
    font-size: inherit !important;
    line-height: 1.5;
}

#faq .faq_topic.is-open {
    margin-bottom: 0.5rem;
}

#faq .faq_entry {
    display: none;
    padding: 0.2rem 2rem;
    margin-left: 2rem;
    margin-top: 0.2rem;
    font-size: 1.5rem;
    background: #f4f4f4;
    border-radius: 1rem;
}

#faq .faq_entry .faq_content {
    display: none;
}

#faq .faq_entry.is-visible {
    display: block;
}

#faq .faq_entry h5 {
    display: block;
    font-size: inherit !important;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.5;
}

#faq .faq_entry h5 .icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #444;
    margin-right: 1rem;
    font-weight: bold;
    width: 2rem;
}

#faq .faq_entry p {
    color: #333;
    font-size: inherit !important;
    margin-top: 0.1rem;
    line-height: 1.5;
    padding-left: 2.8rem;
    padding-bottom: 1rem;
}

#faq .faq_entry.is-open h5 i {
    color: #b2d600;
    transform: rotate(90deg);
}

#faq .faq_entry.is-open .faq_content {
    display: block;
}


/* 


Details-View (Inline-Relation) 


*/

[data-details-preview] .panel-heading {
    display: none;
}

/* 


Overlay Error


*/

.overlay_error {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background: #fff;
    width: 100%;
    height: auto;
}

.overlay_error > div {
    position: relative;
    width: 500px;
    height: auto;
    flex: 0 0 auto;
    padding: 3rem;
    border: 5px solid red;
}

.overlay_error > div > h2 {
    color: red;
    font-size: 3rem;
    text-align: center;
}

.overlay_error > div > p {
    margin-top: 1rem;
    font-size: 1.8rem;
    color: #000;
    text-align: center;
}


/* 


Offreason-Editor 


*/

[data-page="zeiten_current_user_ausfall_add"][data-itemid="offreason_dates"] {
    display: none;
}

body[data-offreason_type] [data-page="zeiten_current_user_ausfall_add"][data-itemid="offreason_dates"] {
    display: table;
}

body[data-offreason_type*="0,5"] [data-page="zeiten_current_user_ausfall_add"][data-itemid="offreason_dates"] [data-field="datum2"] {
    display: none;
}

body[data-offreason_type=""] [data-page="zeiten_current_user_ausfall_add"][data-itemid="offreason_dates"] {
    display: none;
}

body[data-custom_offreason="1"] [data-page="zeiten_current_user_ausfall_add"][data-itemid="offreason_dates"] {
    display: table;
}

/* 


Todo Ratio 


*/

.todo_ratio {
    display: flex !iinimportant;
    position: relative !important;
    flex-direction: row;
    align-items: center;
    width: 90px;
    height: 25px;
    color: #fff !important;
    text-align: center;
    font-size: 1.4rem !important;
}

.todo_ratio i {
    flex: 0 0 auto;
    margin: 0 1rem;
}

.todo_ratio em {
    flex: 1 1 auto;
    text-align: right;
    padding-right: 1rem;
    font-style: normal;
    font-weight: bold;
}

.todo_ratio.green {
    background: rgb(25, 142, 1);
}

.todo_ratio.yellow {
    color: #7c4d24 !important;
    background: #fcee22;
}

.todo_ratio.red {
    background: rgb(142, 1, 1);
}

/* 


Percentage Bar 


*/

.percentage_bar {
    display: block !important;
    position: relative !important;
    height: 25px;
    width: 150px;
    background: #fff;
    margin-left: 2rem;
    border: 1px solid #333;
    overflow: hidden;
}

.percentage_bar .lbl {
    position: absolute !important;
    display: inline-block !important;
    top: 0;
    left: 50%;
    color: #222;
    text-align: center;
    padding: 0.1rem 1rem
    border-radius: 5px;
    z-index: 9;
    transform: translateX(-50%);
    //background: rgba(255,255,255,0.5);
}

.percentage_bar .bg {
    position: relative !important;
    display: block !important;
    height: 10px;
    margin-top: 15px;
    width: inherit;
    text-align: left;
}

.percentage_bar .bg > span {
    display: inline-block;
    position: relative;
    height: 100%;
}

.percentage_bar.red .bg > span {
    background: #c52121;
}

.percentage_bar.green .bg > span {
    background: #7fda24;
}

.percentage_bar.yellow .bg > span {
    background: #fcee22;
}

/*


List Page / Grid


*/

tr.has-offreason td {
    background: #f7e8fb !important;
}

tr.has-offreason td:not([data-field="Stunden"]):not([data-field="offreason"]) * {
    display: none !important;
}


.no_data_table .r-grid {
    display: none !important;
}

.function-list .r-grid {
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 1rem;
    background: #efefef;
}

.function-list .r-grid table tbody tr td {
    vertical-align: middle !important;
}

.function-list .r-below {
    margin-top: 2rem !important
}

.function-list [data-cellid="grid_headcell_details"] {
  width: 50px;
}

.function-list select.form-control,
.function-list input.form-control {
    height: 3.5rem;
}

/*


Custom Filter Display
(yellow box above list table)


*/

.custom_filter_display.function-list [data-location="above-grid"] .row:nth-child(1) {
    background: #faf7eb;
    padding: 2rem 0;
    border: 1px dashed #9f8d6d;
    border-radius: 1rem;
}

/*
.function-list.no-filters [data-location="above-grid"] .row:nth-child(1) {
    background: none;
    padding: 0;
    border: none;
}
*/

.custom_filter_display.function-list [data-location="above-grid"] .row:nth-child(1) > div {
    display: flex !important;
    flex-direction: row;
    align-items: center;
}

.custom_filter_display.function-list [data-location="above-grid"] .row:nth-child(1) > div > [data-itemid="filter_panel"] {
    flex: 1 1 auto;
    text-align: left !important;
}

.filterPanelContainer[data-horizontal] .filter-field {
    margin: 0.25rem;
}

.custom_filter_display.function-list [data-location="above-grid"] .row:nth-child(1) > div > :not([data-itemid="filter_panel"], [data-itemid="print_button"]) {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-direction: row;
}

body.has_wide_filters .custom_filter_display.function-list [data-location="above-grid"] .row:nth-child(1) > div > :not([data-itemid="filter_panel"], [data-itemid="print_button"]) {
    transform: translateY(-150%);
}

body.custom_filter_display .filtered_totals {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 200px;
    border-radius: 1rem;
    background: white;
    border: 1px solid #aaa;
    color: #444;
    text-align: center;
    margin: 0 1rem;
}

body.custom_filter_display .filtered_totals.w1 {
    width: 100px !important;
}

body.custom_filter_display .filtered_totals.w2 {
    width: 150px !important;
}

body.custom_filter_display .filtered_totals.w3 {
    width: 200px !important;
}

body.custom_filter_display .filtered_totals.w4 {
    width: 250px !important;
}

body.custom_filter_display .filtered_totals > * {
  flex: 1 1 auto;
}

body.custom_filter_display .filtered_totals .num {
  color: #111;
}

body.custom_filter_display .filtered_totals:not(.has_percentage_bar) .num {
  font-size: 2rem;
}

body.custom_filter_display .filtered_totals .percentage_bar {
    margin: 5px auto !important;
}

.filterPanelContainer > .dropdown {
    background: #fff;
}

/*


SWITCH TIME AND MONEY


*/

#switch_time_and_money {
    padding: 0.5rem;
    width: 5rem;
    height: 5rem;
    text-align: center;
    margin: 0 1rem;
    cursor: pointer;
    background: #fff;
    border-radius: 100%;
    border: 1px dotted #333;
    overflow: hidden;
}

#switch_time_and_money:hover {
    border-style: solid;
}

#switch_time_and_money svg {
    width: 100%;
    height: 100%;
}

#switch_time_and_money svg g {
    transform: scale(0.9);
    transform-origin: center;
    transition-property: transform;
    transition-duration: 300ms;
}

#switch_time_and_money svg g path {
    fill: #bbb;
    transition-property: fill;
    transition-duration: 300ms;
}

body[data-time_and_money="money"] #switch_time_and_money .__money,
body[data-time_and_money="time"] #switch_time_and_money .__time {
    transform: scale(1.15);
    transform-origin: center;
}

body[data-time_and_money="money"] #switch_time_and_money .__money path,
body[data-time_and_money="time"] #switch_time_and_money .__time path {
    fill: green;
}

body:not([data-time_and_money="time"]) [data-time_and_money="time"] {
    display: none;
}

body:not([data-time_and_money="money"]) [data-time_and_money="money"] {
    display: none;
}


body[data-time_and_money="time"] [data-field="tagessatz"],
body[data-time_and_money="time"] [data-field="umsatz_geplant"],
body[data-time_and_money="time"] [data-field="umsatz_gebucht"] {
    display: none !important;
}

body[data-time_and_money="money"] [data-field="tage_geplant__pim"],
body[data-time_and_money="money"] [data-field="tage_gebucht__pim"],
body[data-time_and_money="money"] [data-field="tage_forecast__pim"],
body[data-time_and_money="money"] [data-field="diff__pim"]{
    display: none !important;
}


/*


ELEMENTS ALIGNMENT


*/

/*.function-list [data-field="year"],
.function-list [data-field="month"] */
.function-list [data-field="id"],
.function-list [data-field="date"],
.function-list [data-field="days"],
.function-list [data-field="Plantage"],
.function-list [data-field="Tage"],
.function-list [data-field="Diff"] {
    text-align: right;
}

/*


ELEMENTS WIDTHS


*/

.function-list [data-field="year"] .form-control,
.function-list [data-field="id"] .form-control,
.function-list [data-field="Stunden"] .form-control,
.function-list [data-field="forecast"] .form-control,
.function-list [data-field="Plantage"] .form-control,
.function-list [data-field="Tage"] .form-control,
.function-list [data-field="Diff"] .form-control,
.function-list [data-field="todo_ratio"] .form-control,
.function-list [data-field="datum"] .form-control,
.function-list [data-field="date"] .form-control,
.function-list [data-field="days"] .form-control,
.function-list [data-field="month"] .form-control,
.function-list [data-field="offreason"] .form-control,
.function-list [data-field="location"] .form-control,
.function-list [data-field="break"] .form-control,
.function-list [data-field="start"] .form-control,
.function-list [data-field="end"] .form-control,
.function-list [data-field="fullname"] .form-control,
.function-list [data-field="auslastung_prozent"] .form-control,
.function-list [data-field="planung_prozent"] .form-control,
.function-list [data-field="zielerreichung_prozent"] .form-control,
.function-list [data-field="phase"] .form-control,
.function-list [data-field="idprojectteams"] .form-control {
    min-width: 0 !important;
}


.function-list [data-field="year"],
.function-list [data-field="id"] {
    width: 50px;
}

.function-list [data-field="Stunden"],
.function-list [data-field="forecast"] {
    width: 60px;
}

.function-list [data-field="Plantage"],
.function-list [data-field="Tage"],
.function-list [data-field="Diff"] {
    width: 70px;
}

.function-list [data-field="break"] {
    width: 80px;
}

.function-list [data-field="todo_ratio"] {
    width: 90px;
}

.function-list [data-field="start"],
.function-list [data-field="end"],
.function-list [data-field="days"],
.function-list [data-field="month"] {
    width: 100px;
}

.function-list [data-field="offreason"],
.function-list [data-field="location"],
.function-list [data-field="tage_geplant__pim"],
.function-list [data-field="tage_gebucht__pim"],
.function-list [data-field="tage_forecast__pim"] {
    width: 110px;
}

.function-list [data-field="datum"],
.function-list [data-field="date"] {
    width: 130px;
}

.function-list [data-field="fullname"] {
    width: 150px;
}

.function-list [data-field="phase"],
.function-list [data-field="auslastung_prozent"],
.function-list [data-field="planung_prozent"],
.function-list [data-field="zielerreichung_prozent"] {
    width: 170px;
}

.function-list [data-field="idprojectteams"],
.function-list [data-field="idprojectteams"] select,
.function-list [data-itemid="multi_drop_filter_clientname"] select,
.function-list [data-itemid="multi_drop_filter_projectname"] select,
.function-list [data-itemid="multi_drop_filter_projectteams_id"] select {
    width: 400px !important;
}

.function-list.short_idprojectteams [data-field="idprojectteams"],
.function-list.short_idprojectteams [data-field="idprojectteams"] select,
.function-list.short_idprojectteams [data-itemid="multi_drop_filter_clientname"] select,
.function-list.short_idprojectteams [data-itemid="multi_drop_filter_projectname"] select,
.function-list.short_idprojectteams [data-itemid="multi_drop_filter_projectteams_id"] select {
    width: 250px !important;
}

input[type="search"] {
    width: 120px !important;
}

/*


Planung


*/

[data-page="planning_list"][data-cellid="grid_headcell_icons"],
[data-page="planning_list"][data-cellid="grid_cell_icons"]{
    display: none;
}



/* DATEPICKER */

.datepicker {
  width: -moz-min-content;
  width: min-content;
  transform: scale(1.4);
}

.datepicker:not(.active) {
  display: none;
}

.datepicker-dropdown {
  position: absolute;
  z-index: 20;
  padding-top: 4px;
}

.datepicker-dropdown.datepicker-orient-top {
  padding-top: 0;
  padding-bottom: 4px;
}

.datepicker-picker {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  background-color: hsl(0deg, 0%, 100%);
}

.datepicker-dropdown .datepicker-picker {
  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
}

.datepicker-main {
  flex: auto;
  padding: 2px;
}

.datepicker-footer {
  box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
  background-color: hsl(0deg, 0%, 96%);
}

.datepicker-title {
  box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
  background-color: hsl(0deg, 0%, 96%);
  padding: 0.375rem 0.75rem;
  text-align: center;
  font-weight: 700;
}

.datepicker-controls {
  display: flex;
}

.datepicker-header .datepicker-controls {
  padding: 2px 2px 0;
}

.datepicker-controls .button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid gainsboro;
  border-radius: 4px;
  box-shadow: none;
  background-color: hsl(0deg, 0%, 100%);
  cursor: pointer;
  padding: calc(0.375em - 1px) 0.75em;
  height: 2.25em;
  vertical-align: top;
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
  color: hsl(0deg, 0%, 21%);
  font-size: 1rem;
}

.datepicker-controls .button:focus,
.datepicker-controls .button:active {
  outline: none;
}

.datepicker-controls .button:hover {
  border-color: #b8b8b8;
  color: hsl(0deg, 0%, 21%);
}

.datepicker-controls .button:focus {
  border-color: hsl(217deg, 71%, 53%);
  color: hsl(0deg, 0%, 21%);
}

.datepicker-controls .button:focus:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}

.datepicker-controls .button:active {
  border-color: #474747;
  color: hsl(0deg, 0%, 21%);
}

.datepicker-controls .button[disabled] {
  cursor: not-allowed;
}

.datepicker-header .datepicker-controls .button {
  border-color: transparent;
  font-weight: bold;
}

.datepicker-header .datepicker-controls .button:hover {
  background-color: #f9f9f9;
}

.datepicker-header .datepicker-controls .button:active {
  background-color: #f2f2f2;
}

.datepicker-footer .datepicker-controls .button {
  flex: auto;
  margin: calc(0.375rem - 1px) 0.375rem;
  border-radius: 2px;
  font-size: 0.75rem;
}

.datepicker-controls .view-switch {
  flex: auto;
}

.datepicker-controls .prev-button,
.datepicker-controls .next-button {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
  flex: 0 0 14.2857142857%;
}

.datepicker-controls .prev-button.disabled,
.datepicker-controls .next-button.disabled {
  visibility: hidden;
}

.datepicker-view,
.datepicker-grid {
  display: flex;
}

.datepicker-view {
  align-items: stretch;
  width: 15.75rem;
}

.datepicker-grid {
  flex-wrap: wrap;
  flex: auto;
}

.datepicker .days {
  display: flex;
  flex-direction: column;
  flex: auto;
}

.datepicker .days-of-week {
  display: flex;
}

.datepicker .week-numbers {
  display: flex;
  flex-direction: column;
  flex: 0 0 9.6774193548%;
}

.datepicker .weeks {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: auto;
}

.datepicker span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.datepicker .dow {
  height: 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.datepicker .week {
  flex: auto;
  color: #b8b8b8;
  font-size: 0.75rem;
}

.datepicker-cell,
.datepicker .days .dow {
  flex-basis: 14.2857142857%;
}

.datepicker-cell {
  height: 2.25rem;
}

.datepicker-cell:not(.day) {
  flex-basis: 25%;
  height: 4.5rem;
}

.datepicker-cell:not(.disabled):hover {
  background-color: #f9f9f9;
  cursor: pointer;
}

.datepicker-cell.focused:not(.selected) {
  background-color: #e9e9e9;
}

.datepicker-cell.selected,
.datepicker-cell.selected:hover {
  background-color: hsl(217deg, 71%, 53%);
  color: #fff;
  font-weight: 600;
}

.datepicker-cell.disabled {
  color: gainsboro;
}

.datepicker-cell.prev:not(.disabled),
.datepicker-cell.next:not(.disabled) {
  color: hsl(0deg, 0%, 48%);
}

.datepicker-cell.prev.selected,
.datepicker-cell.next.selected {
  color: #e6e6e6;
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
  border-radius: 0;
  background-color: hsl(0deg, 0%, 96%);
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
  background-color: #efefef;
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
  background-color: #e9e9e9;
}

.datepicker-cell.today:not(.selected) {
  background-color: hsl(171deg, 100%, 41%);
}

.datepicker-cell.today:not(.selected):not(.disabled) {
  color: #fff;
}

.datepicker-cell.today.focused:not(.selected) {
  background-color: #00ccad;
}

.datepicker-cell.range-end:not(.selected),
.datepicker-cell.range-start:not(.selected) {
  background-color: #b8b8b8;
  color: #fff;
}

.datepicker-cell.range-end.focused:not(.selected),
.datepicker-cell.range-start.focused:not(.selected) {
  background-color: #b3b3b3;
}

.datepicker-cell.range-start:not(.range-end) {
  border-radius: 4px 0 0 4px;
}

.datepicker-cell.range-end:not(.range-start) {
  border-radius: 0 4px 4px 0;
}

.datepicker-cell.range {
  border-radius: 0;
  background-color: gainsboro;
}

.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
  background-color: #d7d7d7;
}

.datepicker-cell.range.disabled {
  color: #c6c6c6;
}

.datepicker-cell.range.focused {
  background-color: #d1d1d1;
}

.datepicker-input.in-edit {
  border-color: #276bda;
}

.datepicker-input.in-edit:focus,
.datepicker-input.in-edit:active {
  box-shadow: 0 0 0.25em 0.25em rgba(39, 107, 218, 0.2);
}