koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss

   1 @import "flatpickr_vars";
   2
   3 @-webkit-keyframes fpFadeInDown {
   4     from {
   5         opacity: 0;
   6         transform: translate3d(0, -20px, 0);
   7     }
   8
   9     to {
  10         opacity: 1;
  11         transform: translate3d(0, 0, 0);
  12     }
  13 }
  14
  15 @-moz-keyframes fpFadeInDown {
  16     from {
  17         opacity: 0;
  18         transform: translate3d(0, -20px, 0);
  19     }
  20
  21     to {
  22         opacity: 1;
  23         transform: translate3d(0, 0, 0);
  24     }
  25 }
  26
  27 @-ms-keyframes fpFadeInDown {
  28     from {
  29         opacity: 0;
  30         transform: translate3d(0, -20px, 0);
  31     }
  32
  33     to {
  34         opacity: 1;
  35         transform: translate3d(0, 0, 0);
  36     }
  37 }
  38
  39 @-o-keyframes fpFadeInDown {
  40     from {
  41         opacity: 0;
  42         transform: translate3d(0, -20px, 0);
  43     }
  44
  45     to {
  46         opacity: 1;
  47         transform: translate3d(0, 0, 0);
  48     }
  49 }
  50
  51 @keyframes fpFadeInDown {
  52     from {
  53         opacity: 0;
  54         transform: translate3d(0, -20px, 0);
  55     }
  56
  57     to {
  58         opacity: 1;
  59         transform: translate3d(0, 0, 0);
  60     }
  61 }
  62
  63 .flatpickr-calendar {
  64     animation: none;
  65     background: transparent;
  66     border-radius: 5px;
  67     border: 0;
  68     box-sizing: border-box;
  69     direction: ltr;
  70     display: none;
  71     font-size: 14px;
  72     gap: 2px;
  73     line-height: 24px;
  74     opacity: 0;
  75     padding: 0;
  76     position: absolute;
  77     text-align: center;
  78     touch-action: manipulation;
  79     visibility: hidden;
  80     width: $calendarWidth;
  81
  82     @if variable-exists( "noCalendarBorder" ) {
  83         box-shadow: 0 3px 13px rgba(black, 0.08);
  84     }
  85
  86     @else {
  87
  88         background: $calendarBackground;
  89         box-shadow: 1px 1px 3px 0 #666;
  90     }
  91
  92     &.open,
  93     &.inline {
  94         opacity: 1;
  95         max-height: 640px;
  96         visibility: visible;
  97     }
  98
  99     &.open {
 100         display: inline-block;
 101         z-index: 99999;
 102     }
 103
 104     &.animate.open {
 105         animation: fpFadeInDown 300ms $bezier;
 106     }
 107
 108     &.inline {
 109         display: block;
 110         position: relative;
 111         top: 2px;
 112     }
 113
 114     &.static {
 115         position: absolute;
 116         top: calc(100% + 2px);
 117
 118         &.open {
 119             z-index: 999;
 120             display: block;
 121         }
 122     }
 123
 124     &.multiMonth {
 125         .flatpickr-days .dayContainer:nth-child(n+1) {
 126             & .flatpickr-day.inRange:nth-child(7n+7) {
 127                 box-shadow: none !important;
 128             }
 129         }
 130
 131         .flatpickr-days .dayContainer:nth-child(n+2) {
 132             & .flatpickr-day.inRange:nth-child(7n+1) {
 133                 box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
 134             }
 135         }
 136     }
 137
 138     .hasWeeks,
 139     .hasTime {
 140         .dayContainer {
 141             border-bottom: 0;
 142             border-bottom-right-radius: 0;
 143             border-bottom-left-radius: 0;
 144         }
 145     }
 146
 147     @if variable-exists( "noCalendarBorder" ) {
 148         .hasWeeks .dayContainer {
 149             border-left: 0;
 150         }
 151     }
 152
 153     &.hasTime {
 154         .flatpickr-time {
 155             height: $timeHeight;
 156             border-top: 1px solid $calendarBorderColor;
 157         }
 158
 159         @if variable-exists( "noCalendarBorder" ) {
 160             .flatpickr-innerContainer {
 161                 border-bottom: 0;
 162             }
 163
 164             .flatpickr-time {
 165                 border: 1px solid $calendarBorderColor;
 166             }
 167         }
 168     }
 169
 170     &.noCalendar.hasTime {
 171         .flatpickr-time {
 172             height: auto;
 173         }
 174     }
 175
 176     &:before,
 177     &:after {
 178         position: absolute;
 179         display: block;
 180         pointer-events: none;
 181         border: solid transparent;
 182         content: '';
 183         height: 0;
 184         width: 0;
 185         left: 22px;
 186     }
 187
 188     &.rightMost,
 189     &.arrowRight {
 190
 191         &:before,
 192         &:after {
 193             left: auto;
 194             right: 22px;
 195         }
 196     }
 197
 198     &.arrowCenter {
 199
 200         &:before,
 201         &:after {
 202             left: 50%;
 203             right: 50%;
 204         }
 205     }
 206
 207     &:before {
 208         border-width: 5px;
 209         margin: 0 -5px;
 210     }
 211
 212     &:after {
 213         border-width: 4px;
 214         margin: 0 -4px;
 215     }
 216
 217     &.arrowTop {
 218
 219         &:before,
 220         &:after {
 221             bottom: 100%;
 222         }
 223
 224         &:before {
 225             border-bottom-color: $calendarBorderColor;
 226         }
 227
 228         &:after {
 229             @if variable-exists( "noCalendarBorder" ) {
 230                 border-bottom-color: $monthBackground;
 231             }
 232
 233             @else {
 234                 border-bottom-color: $calendarBackground;
 235             }
 236         }
 237     }
 238
 239     &.arrowBottom {
 240
 241         &:before,
 242         &:after {
 243             top: 100%;
 244         }
 245
 246         &:before {
 247             border-top-color: $calendarBorderColor;
 248         }
 249
 250         &:after {
 251             @if variable-exists( "noCalendarBorder" ) {
 252                 border-top-color: $monthBackground;
 253             }
 254
 255             @else {
 256                 border-top-color: $calendarBackground;
 257             }
 258         }
 259     }
 260
 261     &:focus {
 262         outline: 0;
 263     }
 264 }
 265
 266 .flatpickr-wrapper {
 267     position: relative;
 268     display: inline-block;
 269 }
 270
 271 .flatpickr-months {
 272     display: flex;
 273
 274     .flatpickr-month {
 275         @if variable-exists( "noCalendarBorder" ) {
 276             border-radius: 5px 5px 0 0;
 277         }
 278
 279         background: $monthBackground;
 280         color: $monthForeground;
 281         fill: $monthForeground;
 282         height: $monthNavHeight;
 283         line-height: 1;
 284         text-align: center;
 285         position: relative;
 286         user-select: none;
 287         overflow: hidden;
 288         flex: 1;
 289     }
 290
 291     .flatpickr-prev-month,
 292     .flatpickr-next-month {
 293         text-decoration: none;
 294         cursor: pointer;
 295         position: absolute;
 296         top: 0;
 297         height: $monthNavHeight;
 298         padding: 10px;
 299         z-index: 3;
 300         color: $monthForeground;
 301         fill: $monthForeground;
 302
 303         &.flatpickr-disabled {
 304             display: none;
 305         }
 306
 307         i {
 308             position: relative;
 309         }
 310
 311         &.flatpickr-prev-month {
 312             /*!
 313       /*rtl:begin:ignore*/
 314             /*
 315       */
 316             left: 0;
 317             /*!
 318       /*rtl:end:ignore*/
 319             /*
 320       */
 321         }
 322
 323         &.flatpickr-next-month {
 324             /*!
 325       /*rtl:begin:ignore*/
 326             /*
 327       */
 328             right: 0;
 329             /*!
 330       /*rtl:end:ignore*/
 331             /*
 332       */
 333         }
 334
 335         &:hover {
 336             color: $todayColor;
 337
 338             svg {
 339                 @if variable-exists( "arrow_hover_color" ){
 340                     fill: $arrow_hover_color;
 341                 }
 342
 343                 @else {
 344
 345                     fill: $todayColor;
 346                 }
 347             }
 348         }
 349
 350         svg {
 351             width: 14px;
 352             height: 14px;
 353
 354             path {
 355                 transition: fill 0.1s;
 356                 fill: inherit;
 357             }
 358         }
 359     }
 360 }
 361
 362 .numInputWrapper {
 363     position: relative;
 364     height: auto;
 365
 366     input,
 367     span {
 368         display: inline-block;
 369     }
 370
 371     input {
 372         width: 100%;
 373
 374         &::-ms-clear {
 375             display: none;
 376         }
 377
 378         &::-webkit-outer-spin-button,
 379         &::-webkit-inner-spin-button {
 380             margin: 0;
 381             -webkit-appearance: none;
 382         }
 383     }
 384
 385     span {
 386         position: absolute;
 387         right: 0;
 388         width: $timecontrols;
 389         padding: 0 4px 0 2px;
 390         height: 50%;
 391         line-height: 50%;
 392         opacity: 0;
 393         cursor: pointer;
 394         border: 1px solid rgba($dayForeground, 0.15);
 395         box-sizing: border-box;
 396
 397         &:hover {
 398             background: rgba($invertedBg, 0.1);
 399         }
 400
 401         &:active {
 402             background: rgba($invertedBg, 0.2);
 403         }
 404
 405         &:after {
 406             display: block;
 407             content: "";
 408             position: absolute;
 409         }
 410
 411         &.arrowUp {
 412             top: 0;
 413             border-bottom: 0;
 414
 415             &:after {
 416                 border-left: 4px solid transparent;
 417                 border-right: 4px solid transparent;
 418                 border-bottom: 4px solid rgba($dayForeground, 0.6);
 419                 top: 26%;
 420             }
 421         }
 422
 423         &.arrowDown {
 424             top: 50%;
 425
 426             &:after {
 427                 border-left: 4px solid transparent;
 428                 border-right: 4px solid transparent;
 429                 border-top: 4px solid rgba($dayForeground, 0.6);
 430                 top: 40%;
 431             }
 432         }
 433
 434         svg {
 435             width: inherit;
 436             height: auto;
 437
 438             path {
 439                 fill: rgba($monthForeground, 0.5);
 440             }
 441         }
 442     }
 443
 444     &:hover {
 445         background: rgba($invertedBg, 0.05);
 446
 447         span {
 448             opacity: 1;
 449         }
 450     }
 451 }
 452
 453 .flatpickr-current-month {
 454     font-size: 135%;
 455     line-height: inherit;
 456     font-weight: 300;
 457     color: inherit;
 458     position: absolute;
 459     width: 75%;
 460     left: 12.5%;
 461     padding: 0.22 * $monthNavHeight 0 0 0;
 462     line-height: 1;
 463     height: $monthNavHeight;
 464     display: inline-block;
 465     text-align: center;
 466     transform: translate3d(0px, 0px, 0px);
 467
 468     span.cur-month {
 469         font-family: inherit;
 470         font-weight: 700;
 471         color: inherit;
 472         display: inline-block;
 473         margin-left: 0.5ch;
 474         padding: 0;
 475
 476         &:hover {
 477             background: rgba($invertedBg, 0.05);
 478         }
 479     }
 480
 481     .numInputWrapper {
 482         width: 8ch;
 483         display: inline-block;
 484
 485         span.arrowUp:after {
 486             border-bottom-color: $monthForeground;
 487         }
 488
 489         span.arrowDown:after {
 490             border-top-color: $monthForeground;
 491         }
 492     }
 493
 494     input.cur-year {
 495         background: transparent;
 496         box-sizing: border-box;
 497         color: inherit;
 498         cursor: text;
 499         padding: 0 0 0 0.5ch;
 500         margin: 0;
 501         display: inline-block;
 502         font-size: inherit;
 503         font-family: inherit;
 504         font-weight: 300;
 505         line-height: inherit;
 506         height: auto;
 507         border: 0;
 508         border-radius: 0;
 509         vertical-align: initial;
 510         -webkit-appearance: textfield;
 511         -moz-appearance: textfield;
 512         appearance: textfield;
 513
 514         &:focus {
 515             outline: 0;
 516         }
 517
 518         &[disabled],
 519         &[disabled]:hover {
 520             font-size: 100%;
 521             color: rgba($monthForeground, 0.5);
 522             background: transparent;
 523             pointer-events: none;
 524         }
 525     }
 526
 527     .flatpickr-monthDropdown-months {
 528         appearance: none;
 529         background-image: url('data:image/svg+xml;charset=utf8,%3csvg fill="%23000000" fill-opacity="0.54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M7 10l5 5 5-5z"/%3e%3cpath d="M0 0h24v24H0z" fill="none"/%3e%3c/svg%3e');
 530         background-position: 100% 50%;
 531         background-repeat: no-repeat;
 532         background-size: 24px 24px;
 533         border: none;
 534         border-radius: 0;
 535         box-sizing: border-box;
 536         color: inherit;
 537         cursor: pointer;
 538         font-size: 90%;
 539         font-family: inherit;
 540         font-weight: 300;
 541         height: auto;
 542         line-height: 120%;
 543         margin: -1px 0 0 0;
 544         outline: none;
 545         padding: 4px 28px 4px 4px;
 546         position: relative;
 547         vertical-align: initial;
 548         width: auto;
 549
 550         &:focus,
 551         &:active {
 552             outline: none;
 553         }
 554
 555         .flatpickr-monthDropdown-month {
 556             background-color: $monthBackground;
 557             outline: none;
 558             padding: 0;
 559         }
 560     }
 561 }
 562
 563 .flatpickr-weekdays {
 564     background: $weekdaysBackground;
 565     text-align: center;
 566     overflow: hidden;
 567     width: 100%;
 568     display: flex;
 569     align-items: center;
 570     height: $weekdaysHeight;
 571
 572     .flatpickr-weekdaycontainer {
 573         display: flex;
 574         flex: 1;
 575     }
 576 }
 577
 578
 579
 580 span.flatpickr-weekday {
 581     cursor: default;
 582     font-size: 90%;
 583     background: $monthBackground;
 584     color: $weekdaysForeground;
 585     line-height: 1;
 586     margin: 0;
 587     text-align: center;
 588     display: block;
 589     flex: 1;
 590     font-weight: bolder;
 591 }
 592
 593 .dayContainer,
 594 .flatpickr-weeks {
 595     padding: 1px 0 0 0;
 596 }
 597
 598 .flatpickr-days {
 599     position: relative;
 600     overflow: hidden;
 601     display: flex;
 602     align-items: flex-start;
 603     width: $daysWidth;
 604
 605     &:focus {
 606         outline: 0;
 607     }
 608
 609     @if variable-exists( "noCalendarBorder" ) {
 610         border-left: 1px solid $calendarBorderColor;
 611         border-right: 1px solid $calendarBorderColor;
 612     }
 613 }
 614
 615 .dayContainer {
 616     padding: 0;
 617     outline: 0;
 618     text-align: left;
 619     width: $daysWidth;
 620     min-width: $daysWidth;
 621     max-width: $daysWidth;
 622     box-sizing: border-box;
 623     display: inline-block;
 624     display: -ms-flexbox;
 625     display: flex;
 626     flex-wrap: wrap;
 627     -ms-flex-wrap: wrap;
 628     -ms-flex-pack: justify;
 629     justify-content: space-around;
 630     transform: translate3d(0px, 0px, 0px);
 631     opacity: 1;
 632
 633     &+.dayContainer {
 634         box-shadow: -1px 0 0 $calendarBorderColor;
 635     }
 636 }
 637
 638 .flatpickr-day {
 639     background: none;
 640     border: 1px solid transparent;
 641     border-radius: 150px;
 642     box-sizing: border-box;
 643     color: $dayForeground;
 644     cursor: pointer;
 645
 646     font-weight: 400;
 647     width: 14.2857143%;
 648     flex-basis: 14.2857143%;
 649     max-width: $daySize;
 650     height: $daySize;
 651     line-height: $daySize;
 652     margin: 0;
 653
 654     display: inline-block;
 655     position: relative;
 656     justify-content: center;
 657     text-align: center;
 658
 659     &,
 660     &.prevMonthDay,
 661     &.nextMonthDay {
 662
 663         &.inRange,
 664         &.today.inRange,
 665         &:hover,
 666         &:focus {
 667             cursor: pointer;
 668             outline: 0;
 669             background: $dayHoverBackground;
 670             border-color: $dayHoverBackground;
 671         }
 672     }
 673
 674     &.today {
 675         border-color: $todayColor;
 676
 677         &:hover,
 678         &:focus {
 679             border-color: $todayColor;
 680             background: $todayColor;
 681
 682             @if variable-exists( "today_fg_color" ){
 683                 color: $today_fg_color;
 684             }
 685
 686             @else {
 687                 color: white;
 688             }
 689         }
 690     }
 691
 692     &.selected,
 693     &.startRange,
 694     &.endRange {
 695
 696         &,
 697         &.inRange,
 698         &:focus,
 699         &:hover,
 700         &.prevMonthDay,
 701         &.nextMonthDay {
 702             background: $selectedDayBackground;
 703             box-shadow: none;
 704
 705             @if variable-exists( "selectedDayForeground" ){
 706                 color: $selectedDayForeground;
 707             }
 708
 709             @else {
 710                 color: white;
 711             }
 712
 713             border-color: $selectedDayBackground;
 714         }
 715
 716         &.startRange {
 717             border-radius: 50px 0 0 50px;
 718         }
 719
 720         &.endRange {
 721             border-radius: 0 50px 50px 0;
 722         }
 723
 724         &.startRange+.endRange:not(:nth-child(7n+1)) {
 725             box-shadow: -5 * $dayMargin 0 0 $selectedDayBackground;
 726         }
 727
 728         &.startRange.endRange {
 729             border-radius: 50px;
 730         }
 731     }
 732
 733     &.inRange {
 734         border-radius: 0;
 735         box-shadow: -2.5 * $dayMargin 0 0 $dayHoverBackground, 2.5 * $dayMargin 0 0 $dayHoverBackground;
 736     }
 737
 738     &.flatpickr-disabled,
 739     &.flatpickr-disabled:hover,
 740     &.prevMonthDay,
 741     &.nextMonthDay,
 742     &.notAllowed,
 743     &.notAllowed.prevMonthDay,
 744     &.notAllowed.nextMonthDay {
 745         color: rgba($dayForeground, 0.3);
 746         background: transparent;
 747
 748         @if variable-exists( "disabled_border_color" ){
 749             border-color: $disabled_border_color;
 750         }
 751
 752         @else {
 753
 754             border-color: transparent;
 755         }
 756
 757         cursor: default;
 758     }
 759
 760     &.flatpickr-disabled,
 761     &.flatpickr-disabled:hover {
 762         cursor: not-allowed;
 763         color: rgba($dayForeground, 0.1);
 764     }
 765
 766     &.week.selected {
 767         border-radius: 0;
 768         box-shadow: -2.5 * $dayMargin 0 0 $selectedDayBackground, 2.5 * $dayMargin 0 0 $selectedDayBackground;
 769     }
 770
 771     &.hidden {
 772         visibility: hidden;
 773     }
 774 }
 775
 776 .rangeMode .flatpickr-day {
 777     margin-top: 1px;
 778 }
 779
 780 .flatpickr-weekwrapper {
 781     float: left;
 782
 783     .flatpickr-weeks {
 784         padding: 0 12px;
 785
 786         @if variable-exists( "noCalendarBorder" ) {
 787             border-left: 1px solid $calendarBorderColor;
 788         }
 789
 790         @else {
 791             box-shadow: 1px 0 0 $calendarBorderColor;
 792         }
 793     }
 794
 795     .flatpickr-weekday {
 796         float: none;
 797         width: 100%;
 798         line-height: $weekdaysHeight;
 799     }
 800
 801     span.flatpickr-day {
 802
 803         &,
 804         &:hover {
 805             display: block;
 806             width: 100%;
 807             max-width: none;
 808             color: rgba($dayForeground, 0.3);
 809             background: transparent;
 810             cursor: default;
 811             border: none;
 812         }
 813     }
 814 }
 815
 816 .flatpickr-innerContainer {
 817     display: block;
 818     display: flex;
 819     box-sizing: border-box;
 820     overflow: hidden;
 821
 822     @if variable-exists( "noCalendarBorder" ) {
 823         background: $calendarBackground;
 824         border-bottom: 1px solid $calendarBorderColor;
 825     }
 826 }
 827
 828 .flatpickr-rContainer {
 829     display: inline-block;
 830     padding: 0;
 831     box-sizing: border-box;
 832 }
 833
 834 .flatpickr-time {
 835     text-align: center;
 836     outline: 0;
 837     display: block;
 838     height: 0;
 839     line-height: $timeHeight;
 840     max-height: $timeHeight;
 841     box-sizing: border-box;
 842     overflow: hidden;
 843     display: flex;
 844
 845     @if variable-exists( "noCalendarBorder" ) {
 846         background: $calendarBackground;
 847         border-radius: 0 0 5px 5px;
 848     }
 849
 850     &:after {
 851         content: "";
 852         display: table;
 853         clear: both;
 854     }
 855
 856     .numInputWrapper {
 857         flex: 1;
 858         width: 40%;
 859         height: $timeHeight;
 860         float: left;
 861
 862         span.arrowUp:after {
 863             border-bottom-color: $dayForeground;
 864         }
 865
 866         span.arrowDown:after {
 867             border-top-color: $dayForeground;
 868         }
 869     }
 870
 871     &.hasSeconds .numInputWrapper {
 872         width: 26%;
 873     }
 874
 875     &.time24hr .numInputWrapper {
 876         width: 49%;
 877     }
 878
 879     input {
 880         background: transparent;
 881         box-shadow: none;
 882         border: 0;
 883         border-radius: 0;
 884         text-align: center;
 885         margin: 0;
 886         padding: 0;
 887         height: inherit;
 888         line-height: inherit;
 889         color: $dayForeground;
 890         font-size: 14px;
 891         position: relative;
 892         box-sizing: border-box;
 893         -webkit-appearance: textfield;
 894         -moz-appearance: textfield;
 895         appearance: textfield;
 896
 897         &.flatpickr-hour {
 898             font-weight: bold;
 899         }
 900
 901         &.flatpickr-minute,
 902         &.flatpickr-second {
 903             font-weight: 400;
 904         }
 905
 906         &:focus {
 907             outline: 0;
 908             border: 0;
 909         }
 910     }
 911
 912     .flatpickr-time-separator,
 913     .flatpickr-am-pm {
 914         height: inherit;
 915         float: left;
 916         line-height: inherit;
 917         color: $dayForeground;
 918         font-weight: bold;
 919         width: 2%;
 920         user-select: none;
 921         align-self: center;
 922     }
 923
 924     .flatpickr-am-pm {
 925         outline: 0;
 926         width: 18%;
 927         cursor: pointer;
 928         text-align: center;
 929         font-weight: 400;
 930     }
 931
 932     input,
 933     .flatpickr-am-pm {
 934
 935         &:hover,
 936         &:focus {
 937             background: lighten($dayHoverBackground, 3);
 938         }
 939     }
 940 }
 941
 942 .flatpickr-input {
 943     background-repeat: no-repeat;
 944     background-position: 3px;
 945     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23369' class='bi bi-calendar3'%3E%3Cg stroke-width='1.333'%3E%3Cpath d='M10.5 0h-9A1.5 1.5 0 0 0 0 1.5v9A1.5 1.5 0 0 0 1.5 12h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 10.5 0zM.75 2.893c0-.355.336-.643.75-.643h9c.414 0 .75.288.75.643v7.714c0 .355-.336.643-.75.643h-9c-.414 0-.75-.288-.75-.643z'/%3E%3Cpath d='M4.875 5.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM2.625 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-6.75 2.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/g%3E%3C/svg%3E");
 946     border-style: inset;
 947     border-width: 1px;
 948     padding: 3px 3px 3px 20px;
 949
 950     &.flatpickr-mobile {
 951         height: 2rem;
 952         width: 11rem;
 953     }
 954
 955     &:focus {
 956         border-radius: 0;
 957     }
 958
 959     &[readonly] {
 960         cursor: pointer;
 961     }
 962 }
 963
 964 .flatpickr-day {
 965     border-radius: 0;
 966 }
 967
 968 .flatpickr_wrapper {
 969     white-space: nowrap;
 970 }
 971
 972 /* Shortcut buttons plugin */
 973
 974 .shortcut-buttons-flatpickr-wrapper {
 975     display: flex;
 976     justify-content: center;
 977     padding: 5px;
 978
 979     .shortcut-buttons-flatpickr-label {
 980         align-content: center;
 981         display: flex;
 982         justify-content: center;
 983         flex-direction: column;
 984         padding: 0 5px;
 985     }
 986
 987     .shortcut-buttons-flatpickr-buttons {
 988         display: flex;
 989         flex-flow: row wrap;
 990
 991         .shortcut-buttons-flatpickr-button {
 992             background: transparent none;
 993             border: 0;
 994             color: #006100;
 995             font-size: 90%;
 996             margin: 2px;
 997
 998             &:active {
 999                 box-shadow: none;
1000             }
1001
1002             &:disabled {
1003                 color: #999;
1004
1005                 &:hover {
1006                     color: #999;
1007                 }
1008             }
1009
1010             &:hover {
1011                 text-decoration: underline;
1012             }
1013         }
1014     }
1015 }