datepicker{
display: block;
position: relative;
width: min-content;
background: rgb(255 255 255 / 0.25);
border-radius: 0 0 5px 5px;
margin-bottom: 5em;
}
datepicker:after{
content: attr(data-choice);
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: 1em;
white-space: pre;
}
.gws-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 1em;
border-radius: 6px 6px 0 0;
font-weight: bold;
font-size: 1.1em;
}
.gws-datepicker-prev,
.gws-datepicker-next {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
padding: 0.2em 0.6em;
border-radius: 3px;
transition: background 0.2s;
background: #e0e0e0;
}
.gws-datepicker-prev:hover,
.gws-datepicker-next:hover {
background: #1976d2;
color: #fff;
}
.gws-datepicker-grid {
display: grid;
grid-template-columns: repeat(7, 4ch);
gap: 0.2em;
padding: 1em;
border-radius: 0 0 6px 6px;
}
.gws-datepicker-grid>div{
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
height: 4ch;
position: relative;
overflow: hidden;
}
.gws-datepicker-day {
text-align: center;
font-weight: bold;
color: #666;
background: #f0f0f0;
}
.gws-datepicker-empty {
background: none;
pointer-events: none;
}
.gws-datepicker-date {
text-align: center;
cursor: pointer;
transition: background 0.2s, color 0.2s;
background: #fafafa;
color: #222;
}
.gws-datepicker-date.gws-datepicker-disabled {
color: #bbb;
background: #f5f5f5;
cursor: not-allowed;
pointer-events: none;
}
.gws-datepicker-date.gws-datepicker-today {
color: #00796b;
background: #e0f1ff;
}
.gws-datepicker-date:hover:not(.gws-datepicker-disabled):before ,
.gws-datepicker-date.selected:before {
content: '';
position: absolute;
inset:.2ch;
background: #19d276;
mix-blend-mode: multiply;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
border-radius: 3px;
}
#date_return .gws-datepicker-date:before{
clip-path: polygon(0 0, 100% 0, 0 100%);
}
#date_claim:not(:has(.other)) .gws-datepicker-date.selected ~ .gws-datepicker-date,
#date_claim .gws-datepicker-date.selected ~ .gws-datepicker-date:has(~ .gws-datepicker-date.other) {
background-color: #19d276;
color: #fff;
}
#date_return .gws-datepicker-date.other ~ .gws-datepicker-date:has(~ .gws-datepicker-date.selected),
#date_return:not(:has(.other)) .gws-datepicker-date:has(~ .gws-datepicker-date.selected) {
background-color: #19d276;
color: #fff;
}
.gws-datepicker-date.other:before{
content: '';
position: absolute;
inset:.2ch;
background: #19d276;
mix-blend-mode: multiply;
border-radius: 3px;
}
#date_return .gws-datepicker-date.other:before{
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
#date_claim .gws-datepicker-date.other:before{
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ginput_container:has(datepicker) {
display:flex; flex-direction: column;
height: 100%;
justify-content: space-between;
margin: 0 !important;
}
.gform_wrapper .ginput_container:has(datepicker) input[type="text"] {
display: none !important;
}
.gform_fields:has(datepicker){
display: grid !important;
grid-template-columns: auto auto 1fr;
gap: 30px;
}
.gform_fields:has(datepicker) .gfield_label{
padding: 1em 1em .5em 1em !important;
background: rgb(255 255 255 / 0.25);
border-radius: 5px 5px 0 0;
margin: 0;;
}
:is(.gform_wrapper .top_label li.gfield.gf_left_half, .gform_wrapper .top_label li.gfield.gf_right_half):has(datepicker){
width: auto !important;
max-width: none !important;
display: flex;
flex-direction: column;
}
.gfield_error:has(datepicker){
background: none !important;
border: none !important;
}
.gfield_error:has(datepicker) .gfield_label.gform-field-label{
color: #790000 !important;
background: rgb(255 153 153 / 0.25);
}
.gfield_error datepicker{
background: rgb(255 153 153 / 0.25);
}
:is(#date_claim,#date_return) .gws-datepicker-besetzt:after{
content: '';
position: absolute;
inset:.2ch;
background: #e8a8a8;
mix-blend-mode: multiply;
border-radius: 3px;
clip-path: none;
}
:is(#date_claim,#date_return) :not(.gws-datepicker-besetzt)+.gws-datepicker-besetzt:after{
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
:is(#date_claim,#date_return) .gws-datepicker-besetzt:not(:has(+.gws-datepicker-besetzt)):after{
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.gform_validation_errors.validation_error{
background: #f99;
border: none !important;
}
.gform_validation_errors.validation_error :after{
display: none !important;
}