Merge branch 'bootstrap5' into add-location-period

src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss

@@ -1,121 +1,29 @@
+// Access to Bootstrap variables and mixins
+@import '~ChillMainAssets/module/bootstrap/shared';
+
+// Chill mixins
+@import './scss/mixins';
+
+// Chill buttons
+@import './scss/buttons';
+
+// Chill forms
+@import './scss/forms';
+
+// Chill record_actions
+@import './scss/record_actions';
+
+// Chill entity render box system
+@import './scss/render_box';
+
+// Chill flex responsive table/block presentation
+@import './scss/flex_table';
+
+
 /*
- *  These custom styles will override bootstrap enabled stylesheets
+ *    BASE LAYOUT POSITION
  */
 
-/// chill buttons
-@import 'custom/_buttons';
-
-// chill record_actions
-@import 'custom/_record_actions';
-
-/// titles 
-h1, h2, .h1, .h2 {
-   font-weight: $headings-font-weight + 200;
-}
-
-/// typography
-.open_sansbold {
-   font-weight: bold;
-}
-
-/// forms
-
-@mixin title_in_form {
-   font-size: 1.438em;
-   font-weight: 700;
-   width: 100%;
-   border-bottom: 3px solid $gray-200;
-   margin-bottom: 1em;
-   display: block;
-}
-
-.col-form-label {
-   padding-top: .5em;
-   padding-bottom: .5em;
-   font-weight: 700;
-   margin-bottom: .375em;
-}
-
-form {
-   /* avoid useless html in first level of the custom fields row loop in forms
-   * (better should to improve the loop)
-   */
-   & > div.container-fluid {
-      & > div.row > .parent {
-         padding: 0;
-         & div.cf-fields span.cf-title {
-            margin: 1em -15px 0;
-            width: calc(100% + 30px);
-            @include title_in_form;
-         }
-      }
-   }
-   fieldset {
-      margin-top: 1em;
-      & > legend {
-         @include title_in_form;
-      }
-   }
-   label {
-      display: inline;
-      &.required:after {
-         content: " *";
-         color: $red;
-      }
-   }
-}
-
-/// table 
-
-table.table-bordered {
-   thead, thead * {
-      border: 0 !important;
-      text-align: center;
-   }
-}
-
-/// chill elements of design 
-
-.sticky-form-buttons {
-   margin-top: 4em;
-   background-color: $beige;
-   position: sticky;
-   bottom: 0.3em;
-   text-align: center;
-   display: flex;
-   padding: 0.8em 1.6em;
-   border-radius: 0;
-}
-
-.chill-user-quote {
-   border-left: 10px solid $yellow;
-   margin: 1.5em 10px;
-   padding: 0.5em 15px;
-   quotes: "\201C" "\201D" "\2018" "\2019";
-   background-color: $gray-200;
-   blockquote {
-      border-left: 0.4em solid $gray-400;
-      padding-left: 0.9em;
-      margin-left: 0.9em;
-      font-style: italic;
-   }
-}
-
-div.chill_address {
-   div.chill_address_address {
-      margin: 0.7em 0;
-      font-size: 98%;
-      font-variant: small-caps;
-      p {
-         display: inline-block;
-         margin: 0 0 0 1.5em;
-         text-indent: -1.5em;
-      }
-   }
-}
-
-/// base layout positions
-
 body {
    display: flex;
    flex-direction: column;
@@ -166,17 +74,17 @@ header {
             border: 0;
             border-bottom: 1px solid $gray-200;
             font-size: smaller;
-            i { 
+            i {
                float: right; }
-            &:hover { 
+            &:hover {
                color: $gray-500 !important; }
          }
       }
-      
+
       // fullwidth menu when navbar is collapsed
       @media (max-width: 767px) {
          & {
-            position: relative; 
+            position: relative;
          }
          button.navbar-toggler {
             float: right;
@@ -185,14 +93,14 @@ header {
             float: none;
             position: absolute;
             top: 4em;
-            left: 0; 
+            left: 0;
             right: 0;
             z-index: 2;
             padding: 1em;
             border-top: 1px solid shade-color($primary, 25%);
             ul.navbar-nav {
                display: grid;
-               grid-template-areas: 
+               grid-template-areas:
                   "sear sear sear"
                   "sect user lang";
                li.nav-item {
@@ -208,7 +116,7 @@ header {
                         button.btn {}
                      }
                   }
-                  &.nav-section  { grid-area: sect; } 
+                  &.nav-section  { grid-area: sect; }
                   &.nav-user     { grid-area: user; }
                   &.nav-language { grid-area: lang; }
                }
@@ -227,32 +135,40 @@ header {
                         background-color: transparent !important;
                      }
                   }
-               }   
+               }
             }
          }
       }
-            
+
    }
 }
 
 div.banner {
-   div.header-name, 
-   div.header-details {
-      div.row > div:first-child {
-         @media (min-width: 576px) { 
-            //margin-left: 1.5em;
-         }
-      }
-   }
    a {
       text-decoration: none;
+      &.phone,
+      &.email {
+         color: $white;
+      }
+   }
+   .id-number {
+      font-weight: lighter;
+      font-size: 50%;
+      margin-left: 0.5em;
+      &:before { content: '(n°'; }
+      &:after { content: ')'; }
+   }
+   span.age {
+      margin-left: 0.5em;
+      &:before { content: '('; }
+      &:after { content: ')'; }
    }
 }
 
 div.vertical-menu {
    border-radius: 0;
    margin-top: 0.5rem;
-   a.list-group-item { 
+   a.list-group-item {
       background-color: $chill-yellow;
       border: 0;
       margin-bottom: 0.25rem;
@@ -282,3 +198,161 @@ footer.footer {
       }
    }
 }
+
+
+/*
+ *    SPECIFIC RULES
+ */
+
+/// titles
+h1, h2,
+.h1, .h2 {
+   font-weight: $headings-font-weight + 200;
+}
+
+/// typography
+.open_sansbold {
+   font-weight: bold;
+}
+
+/// no borders on head table
+table.table-bordered {
+   thead, thead * {
+      border: 0 !important;
+      text-align: center;
+   }
+}
+
+/// comments quotes
+.chill-user-quote {
+   border-left: 10px solid $yellow;
+   margin: 1.5em 10px;
+   padding: 0.5em 15px;
+   background-color: $gray-200;
+   color: $gray-800;
+   font-size: 90%;
+
+   // test a bottom right decoration (to be confirmed)
+   &.test {
+      position: relative;
+      &:after {
+         content: '';
+         position: absolute;
+         width: 0px; height: 0px;
+         bottom: 0; right: 0;
+         background: $white;
+         border-top: 10px solid $gray-200;
+         border-left: 10px solid $gray-200;
+         border-right: 10px solid $white;
+         border-bottom: 10px solid $white;
+      }
+   }
+
+   // ckeditor citation
+   blockquote p {
+      font-style: italic;
+      padding-left: 2em;
+      quotes: "“" "„";
+      position: relative;
+      &:before {
+         content: open-quote;
+         font-size: 400%;
+         color: $gray-400;
+         position: absolute;
+         top: -25px;
+         left: 0;
+      }
+   }
+}
+
+/// when there is no data
+.custom_field_no_data,
+.chill-no-data-statement {
+   font-style: italic;
+}
+
+//// still used ?
+// move from chillmain.css, converted to sass
+
+div#usefulbar {
+   background-color: $yellow;
+   z-index: 1000;
+   padding-right: 15px;
+
+   form {
+      margin: 0;
+   }
+   i.menu {
+      font-size: 2em;
+   }
+   ul {
+      display: flex;
+      justify-content: flex-end;
+      margin: 0;
+      padding-top: 5px;
+      padding-right: 10px;
+   }
+   li {
+      color: $white;
+      margin-left: 10px;
+      a {
+         color: $white;
+         text-shadow: 0px 0px 1px $gray-600;
+      }
+      i.icon-user-add {
+         &:before {
+            vertical-align: -5px;
+         }
+      }
+      &#search_element {
+         text-align: right;
+         div#search_form {
+            margin: 0;
+            padding: 0;
+            div, .field {
+               margin: 0;
+            }
+            button {
+               color: $white;
+               border: none;
+               bottom: -2px;
+               height: 35px;
+            }
+         }
+      }
+   }
+}
+
+div#flashMessages {
+   margin-top: 20px;
+   .flash-notice {
+      margin-top: 10px;
+      margin-bottom: 10px;
+   }
+}
+
+.personName {
+   font-variant: small-caps;
+   text-transform: capitalize;
+}
+
+// probably used in client chill.
+// think to rename like above
+input.belgian_national_number_inversed_date {
+   width: 7em;
+   margin-right: 1em;
+}
+input.belgian_national_number_daily_counter {
+   width: 4em;
+   margin-right: 1em;
+}
+input.belgian_national_number_control_digit {
+   width: 3em;
+}
+
+//
+input.belgian_national_number {
+   &.inversed_date {}
+   &.daily_counter {}
+   &.control_digit {}
+}

src/Bundle/ChillMainBundle/Resources/public/chill/index.js

@@ -0,0 +1,52 @@
+/*
+ * CHILL Entrypoint
+ * Load from node-modules
+ */
+
+/// import jQuery
+const $ = require('jquery');
+global.$ = global.jQuery = $;
+
+/// import select2
+const select2 = require('select2');
+global.select2 = select2;
+
+require('select2/dist/css/select2.css');
+require('select2-bootstrap-theme/dist/select2-bootstrap.css');
+
+
+/*
+ * Load Chill themes assets
+ */
+
+require('./chillmain.scss');
+
+import { chill } from './js/chill.js';
+global.chill = chill;
+
+require('./js/date.js');
+
+/// Load fonts
+require('./fonts/OpenSans/OpenSans.scss')
+
+/// Load images
+require('./img/favicon.ico');
+require('./img/logo-chill-sans-slogan_white.png');
+require('./img/logo-chill-outil-accompagnement_white.png');
+
+
+/*
+ * Load local libs
+ * Some libs are only used in a few pages, they are loaded on a case by case basis
+ */
+
+require('../lib/collection/index.js');
+
+require('../lib/breadcrumb/index.js');
+require('../lib/download-report/index.js');
+require('../lib/select_interactive_loading/index.js');
+require('../lib/export-list/index.js');
+
+//require('../lib/show_hide/index.js');
+//require('../lib/tabs/index.js');
+

src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss

@@ -62,10 +62,10 @@ $chill-theme-buttons: (
    &.btn-view::before,
    &.btn-save::before,
    &.btn-duplicate::before,
-      &.btn-not-duplicate::before,
-      &.btn-submit::before,
-      &.btn-reset::before,
-      &.btn-action::before,
+      // &.btn-not-duplicate::before,
+      // &.btn-submit::before,
+      // &.btn-reset::before,
+      // &.btn-action::before,
    &.btn-delete::before,
    &.btn-remove::before,
    &.btn-cancel::before {
@@ -101,3 +101,13 @@ $chill-theme-buttons: (
       color: $light;
    }
 }
+
+/// allow to hide icon (herited from scratch)
+.btn {
+   &.change-icon {
+      &::before {
+         content: '';
+         margin-right: 0;
+      }
+   }
+}

src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss

@@ -0,0 +1,144 @@
+/*
+*  FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
+*/
+
+div.flex-bloc,
+div.flex-table {
+    display: flex;
+    align-items: stretch;
+    align-content: stretch;
+    box-sizing: border-box;
+    margin: 1.5em 0;
+
+    div.item-bloc {
+        display: flex;
+        @include border-collapse;
+        padding: 1em;
+
+        div.item-row {
+            display: flex;
+
+            div.item-col:last-child {
+                display: flex;
+            }
+        }
+    }
+
+    h2, h3, h4, dl, p {
+        margin: 0;
+    }
+    h2, h3, h4 {
+        color: $blue;
+    }
+
+    ul.record_actions {
+        margin: 0;
+        li {
+            margin-right: 5px;
+        }
+    }
+}
+
+/*
+* Bloc appearance
+*/
+
+div.flex-bloc {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    div.item-bloc {
+        flex-grow: 0; flex-shrink: 1; flex-basis: auto;
+        flex-direction: column;
+        margin: 0;
+
+        div.item-row {
+            flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+            flex-direction: column;
+
+            div.item-col {
+                &.separator {
+                    margin-top: 0.5em;
+                    border-top: 1px dotted $gray-900;
+                    padding-top: 0.5em;
+                }
+
+                &:first-child {
+                    flex-grow: 0; flex-shrink: 0; flex-basis: auto;
+                }
+
+                &:last-child {
+                    flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+
+                    ul.record_actions {
+                        align-self: flex-end;
+                        flex-grow: 1; flex-shrink: 0; flex-basis: auto;
+                        margin: 0;
+
+                        li {
+                            margin-right: 5px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*
+* Table appearance
+*/
+
+div.flex-table {
+    flex-direction: column;
+
+    div.item-bloc {
+        flex-direction: column;
+
+        &:nth-child(even) {
+            background-color: $gray-200;
+
+            .chill-user-quote {
+                background-color: shade-color($gray-200, 5%)
+            }
+        }
+
+        div.item-row {
+            flex-direction: row;
+
+            &.separator {
+                margin-top: 0.5em;
+                border-top: 1px dotted $gray-900;
+                padding-top: 0.5em;
+                //flex-direction: column;
+            }
+
+            div.item-col {
+                &:first-child {
+                    flex-grow: 0; flex-shrink: 0; flex-basis: auto;
+                }
+
+                &:last-child {
+                    flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+                    justify-content: flex-end;
+
+                    ul.record_actions {
+                        flex-grow: 1; flex-shrink: 0; flex-basis: auto;
+                        align-self: flex-start;
+                    }
+                }
+            }
+
+            @media only screen and (max-width: 900px) {
+                flex-direction: column;
+                div.item-col {
+                    &:last-child {
+                        ul.record_actions {
+                            align-self: flex-end;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss

@@ -0,0 +1,44 @@
+/// forms
+form {
+
+    /* avoid useless html in first level of the custom fields row loop in forms
+    * (better should to improve the loop)
+    */
+    & > div.container-fluid {
+        & > div.row > .parent {
+            padding: 0;
+            & div.cf-fields span.cf-title {
+                margin: 1em -15px 0;
+                width: calc(100% + 30px);
+                @include title_in_form;
+            }
+        }
+    }
+
+    fieldset {
+        margin-top: 1em;
+        & > legend {
+            @include title_in_form;
+        }
+    }
+
+    // customfields titles in form
+    span.cf-title {
+        @include title_in_form;
+    }
+
+    label {
+        display: inline;
+        &.required:after {
+            content: " *";
+            color: $red;
+        }
+    }
+}
+
+.col-form-label {
+    padding-top: .5em;
+    padding-bottom: .5em;
+    font-weight: 700;
+    margin-bottom: .375em;
+}

src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss

@@ -0,0 +1,28 @@
+
+//
+// Titles in forms
+//
+
+@mixin title_in_form {
+    font-size: 1.438em;
+    font-weight: 700;
+    width: 100%;
+    border-bottom: 3px solid $gray-200;
+    margin-bottom: 1em;
+    display: block;
+}
+
+
+// We use box-shadow instead of border
+// to avoid to manage border double-width
+// Then we can simulate border-collapse: collapse (table)
+
+@mixin border-collapse {
+    box-shadow:
+        1px 0 0 0 var(--bs-dark),
+        0 1px 0 0 var(--bs-dark),
+        1px 1px 0 0 var(--bs-dark),   /* fix the corner */
+        1px 0 0 0 var(--bs-dark) inset,
+        0 1px 0 0 var(--bs-dark) inset;
+}
+

src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss

@@ -0,0 +1,91 @@
+ul.record_actions {
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap-reverse;
+   justify-content: flex-end;
+   padding: 0.5em 0;
+
+   &.column {
+      flex-direction: column;
+   }
+
+   &.left {
+      justify-content: flex-start;
+   }
+
+   &.sticky-form-buttons {
+      padding-left: 1em;
+      padding-right: 1em;
+   }
+
+   li {
+      display: inline-block;
+      list-style-type: none;
+      margin-right: 1em;
+      order: 99;
+
+      &:last-child {
+         margin-right: 0;
+      }
+
+      &.cancel {
+         order: 1;
+         margin-right: auto;
+      }
+   }
+}
+.sticky-form-buttons {
+   margin-top: 4em;
+   background-color: $beige;
+   position: sticky;
+   bottom: 0.3em;
+   text-align: center;
+   display: flex;
+   padding: 0.8em 1.6em;
+   border-radius: 0;
+}
+
+/// EXCEPTIONS
+// inside table exceptions
+table {
+   td ul.record_actions,
+   ul.record_actions_small {
+      li {
+         margin-right: 0.2em;
+      }
+   }
+   ul.record_actions {
+      margin: 0;
+      padding: 0.5em;
+   }
+}
+
+// inside alert exceptions
+div.alert.alert-with-actions {
+   display: flex;
+   flex-direction: row;
+
+   ul.record_actions {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+      margin: 0;
+
+      li:nth-child(1n+2) {
+         margin-top: 0.5rem;
+      }
+
+      li {
+         margin-right: 0;
+      }
+   }
+
+   @media screen and (max-width: 1050px) {
+      flex-direction: column;
+
+      ul.record_actions {
+         margin-top: 1rem;
+         text-align: center;
+      }
+   }
+}

src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss

@@ -0,0 +1,116 @@
+// generic rules
+section.chill-entity {
+
+    // display inline for render raw
+    // have no effect for render label, bloc !
+    display: inline;
+
+    // don't break flex cascade with section tag
+    div.flex-bloc & {
+        display: flex;
+        flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+    }
+}
+
+// specific rules
+// all render box doesn't use a section tag !
+.chill-entity {
+
+    // used for: entity-person, entity-thirdparty
+    &.entity-person,
+    &.entity-thirdparty {
+
+        span.entity-raw {
+            & > span:not(:first-child):before {
+                content: " ";
+            }
+        }
+        div.entity-label {
+            div.denomination {
+                &.h3 {
+                    font-size: 1.3em;
+                    font-weight: 700;
+                }
+                a {
+                    text-decoration: none;
+                }
+                span.badge {
+                    margin-left: 0.3em;
+                }
+                span.altnames,
+                span.id-number {
+                    font-weight: lighter;
+                    font-size: 50%;
+                    margin-left: 0.5em;
+                }
+                span.id-number {
+                    &:before { content: '(n°'; }
+                    &:after { content: ')'; }
+                }
+            }
+            p.moreinfo {}
+        }
+        div.entity-bloc {}
+    }
+
+    // used for addresses
+    &.entity-address {
+
+        .address {
+            font-size: 98%;
+            font-variant: small-caps;
+
+            &.multiline {
+                margin: 0.7em 0;
+                p {
+                    display: block;
+                }
+            }
+            &.delimiter {
+                p:not(:first-child):before {
+                    content: ' — ';
+                }
+            }
+            p {
+                display: inline-block;
+                margin: 0 0 0 1.5em;
+                text-indent: -1.5em;
+
+                &.street {
+                    span.streetnumber {
+                        &::before { content: ", "; }
+                    }
+                }
+                &.postcode {
+                    span.code {}
+                    span.name {}
+                }
+                &.country {}
+            }
+        }
+
+        .noaddress {
+            font-style: italic;
+        }
+
+        span.address-valid {
+            &.address-since {}
+            &.address-until {}
+        }
+    }
+
+    // used for comment-embeddable
+    &.entity-comment-embeddable {
+        width: 100%;
+        div.metadata {
+            font-size: smaller;
+            color: $gray-600;
+            span.user, span.date {
+                text-decoration: underline dotted;
+                &:hover {
+                    color: $gray-700;
+                }
+            }
+        }
+    }
+}

src/Bundle/ChillMainBundle/Resources/public/css/chillmain.css

@@ -1,25 +0,0 @@
-div#usefulbar { background-color: #fbba3a; z-index: 1000; padding-right: 15px; }
-div#usefulbar form { margin: 0; }
-div#usefulbar i.menu { font-size: 2em; }
-div#usefulbar ul { display: flex; justify-content: flex-end; margin: 0; padding-top: 5px; padding-right: 10px; }
-div#usefulbar li { color: white; margin-left: 10px; }
-div#usefulbar li a { color: white; text-shadow: 0px 0px 1px #555; }
-div#usefulbar li i.icon-user-add:before { vertical-align: -5px; }
-div#usefulbar li#search_element { text-align: right; }
-div#usefulbar li#search_element div#search_form { margin: 0; padding: 0; }
-div#usefulbar li#search_element div#search_form div { margin: 0; }
-div#usefulbar li#search_element div#search_form .field { margin: 0; }
-div#usefulbar li#search_element div#search_form button { color: white; border: none; bottom: -2px; height: 35px; }
-
-div#flashMessages { margin-top: 20px; }
-div#flashMessages .flash-notice { margin-top: 10px; margin-bottom: 10px; }
-
-.personName { font-variant: small-caps; text-transform: capitalize; }
-
-.personName { text-transform: capitalize; }
-
-input.belgian_national_number_inversed_date { width: 7em; margin-right: 1em; }
-
-input.belgian_national_number_daily_counter { width: 4em; margin-right: 1em; }
-
-input.belgian_national_number_control_digit { width: 3em; }

src/Bundle/ChillMainBundle/Resources/public/css/pikaday.css

@@ -1,173 +0,0 @@
-@charset "UTF-8";
-
-/*!
- * Pikaday
- * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
- */
-
-.pika-single {
-    z-index: 9999;
-    display: block;
-    position: relative;
-    width: 240px;
-    padding: 8px;
-    color: #333;
-    background: #fff;
-    border: 1px solid #ccc;
-    border-bottom-color: #bbb;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.pika-single.is-hidden {
-    display: none;
-}
-
-.pika-single.is-bound {
-    position: absolute;
-    box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
-}
-
-.pika-title {
-    position: relative;
-    text-align: center;
-}
-
-.pika-label {
-    display: inline-block;
-    *display: inline;
-    position: relative;
-    z-index: 9999;
-    overflow: hidden;
-    margin: 0;
-    padding: 5px 3px;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: bold;
-    background-color: #fff;
-}
-.pika-title select {
-    cursor: pointer;
-    position: absolute;
-    z-index: 9998;
-    margin: 0;
-    left: 0;
-    top: 5px;
-    filter: alpha(opacity=0);
-    opacity: 0;
-}
-
-.pika-prev,
-.pika-next {
-    display: block;
-    cursor: pointer;
-    position: relative;
-    outline: none;
-    border: 0;
-    padding: 0;
-    width: 20px;
-    height: 30px;
-    /* hide text using text-indent trick, using width value (it's enough) */
-    text-indent: 20px;
-    white-space: nowrap;
-    overflow: hidden;
-    background-color: transparent;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 75% 75%;
-    opacity: .5;
-    *position: absolute;
-    *top: 0;
-}
-
-.pika-prev:hover,
-.pika-next:hover {
-    opacity: 1;
-}
-
-.pika-prev,
-.is-rtl .pika-next {
-    float: left;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
-    *left: 0;
-}
-
-.pika-next,
-.is-rtl .pika-prev {
-    float: right;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
-    *right: 0;
-}
-
-.pika-prev.is-disabled,
-.pika-next.is-disabled {
-    cursor: default;
-    opacity: .2;
-}
-
-.pika-select {
-    display: inline-block;
-    *display: inline;
-}
-
-.pika-table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    border: 0;
-}
-
-.pika-table th,
-.pika-table td {
-    width: 14.285714285714286%;
-    padding: 0;
-}
-
-.pika-table th {
-    color: #999;
-    font-size: 12px;
-    line-height: 25px;
-    font-weight: bold;
-    text-align: center;
-}
-
-.pika-button {
-    cursor: pointer;
-    display: block;
-    outline: none;
-    border: 0;
-    margin: 0;
-    width: 100%;
-    padding: 5px;
-    color: #666;
-    font-size: 12px;
-    line-height: 15px;
-    text-align: right;
-    background: #f5f5f5;
-}
-
-.is-today .pika-button {
-    color: #33aaff;
-    font-weight: bold;
-}
-
-.is-selected .pika-button {
-    color: #fff;
-    font-weight: bold;
-    background: #33aaff;
-    box-shadow: inset 0 1px 3px #178fe5;
-    border-radius: 3px;
-}
-
-.is-disabled .pika-button {
-    pointer-events: none;
-    cursor: default;
-    color: #999;
-    opacity: .3;
-}
-
-.pika-button:hover {
-    color: #fff !important;
-    background: #ff8000 !important;
-    box-shadow: none !important;
-    border-radius: 3px !important;
-}