Projet de stage 2021

key4intranet.front/public/assets/css/additionalStyles.css

@@ -0,0 +1,320 @@
+i.sidebarIcons {
+    /* class created to use and style font awesome's icons same as k4's svg library (../images/sprites.svg) */
+    position: absolute;
+    left: 24px;
+    font-size: 30px;
+    transition: all 0.15s ease;
+    display: inline-block;
+    z-index: 1;
+}
+
+div#title {
+    /*apply a little wide spece at the bottom of the div with the "title" id*/
+    margin: 0px 0px 20px 0px;
+}
+
+
+/*For reduced menu*/
+
+i.ifhidden {
+    color: transparent;
+    transition: all 0.15s ease;
+}
+
+@media (min-width: 992px) {
+    /*For active buttons on the menus*/
+    body.esp-cl.reduced-menu-left nav.menu-left a#active i {
+        color: #fff !important;
+    }
+    /*For inactive buttons on the menus*/
+    body.esp-cl.reduced-menu-left nav.menu-left a.text-original i,
+    body.esp-cl.reduced-menu-left nav.menu-left a.text-truncate i {
+        color: #2c4698 !important;
+    }
+    /*For inactive buttons on the menus*/
+    body.esp-cl.reduced-menu-left nav.menu-left a.text-original i.ifhidden,
+    body.esp-cl.reduced-menu-left nav.menu-left a.text-truncate i.ifhidden {
+        color: #2c4698 !important;
+        transition: all 0.15s ease;
+    }
+    /*When the menu is reduced, it replace the arrow by another fa-icon*/
+    body.esp-cl.reduced-menu-left nav.menu-left a.text-original i.little,
+    body.esp-cl.reduced-menu-left nav.menu-left a.text-truncate i.little {
+        display: none;
+    }
+    body.esp-cl.reduced-menu-left nav.menu-left ul li a {
+        max-width: 80px;
+        padding: 1.45rem;
+    }
+}
+
+
+/*end of reduced menu*/
+
+
+/*for tiles*/
+
+h3.section {
+    font-weight: bolder;
+}
+
+h3.section,
+h5.section {
+    color: #fff;
+    display: grid;
+    place-items: center;
+}
+
+i.section {
+    color: #fff;
+    display: grid;
+    place-items: center;
+    font-size: 100px;
+    transition: all 0.15s ease;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.sectionLine {
+    position: relative;
+    padding-bottom: 10px;
+}
+
+.sectionLine::after {
+    display: grid;
+    position: absolute;
+    place-items: center;
+    content: '';
+    z-index: 1;
+    bottom: 0;
+    width: 70%;
+    height: 2px;
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+p.section {
+    text-align: center;
+}
+
+
+/*end of tiles*/
+
+
+/*for sub-menu*/
+
+a.active#active {
+    color: #0000ff !important;
+}
+
+li.submenu,
+a.submenu {
+    max-height: 30px;
+}
+
+body.esp-cl nav.menu-left ul li.submenu a:not(.bg-gradient)::before a.submenu:hover {
+    max-height: 30px;
+}
+
+body.esp-cl nav.menu-left ul li.submenu a:not(.bg-gradient):hover::before {
+    width: 100%;
+    max-height: 30px;
+    margin-top: 14px;
+}
+
+body.esp-cl nav.menu-left ul li.submenu a:not(.bg-gradient)::before {
+    width: 100%;
+    max-height: 30px;
+    margin-top: 14px;
+    box-shadow: 0 16px 30px rgb(0 0 0 / 0%) !important;
+}
+
+body.esp-cl nav.menu-left ul li.submenu2 a:not(.bg-gradient)::before {
+    /*for 2 lines*/
+    width: 100%;
+    max-height: 55px;
+    margin-top: 14px;
+    box-shadow: 0 16px 30px rgb(0 0 0 / 0%) !important;
+}
+
+
+/*end of sub-menu*/
+
+
+/*for boxes on each pages*/
+
+@media (min-width: 1660px) {
+    /*2 triple sections*/
+    body.esp-cl ul.tiles li.onlineLarge {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    body.esp-cl ul.tiles li.onsiteLarge {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    body.esp-cl ul.tiles li.onlineSoftware {
+        /*Software pages*/
+        flex: 0 0 20%;
+        max-width: 20%;
+    }
+    body.esp-cl ul.tiles li.onsiteSoftware {
+        flex: 0 0 80%;
+        max-width: 80%;
+    }
+}
+
+@media (min-width: 1660px) {
+    /*One single section*/
+    body.esp-cl ul.tiles li.onlineSolo {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    body.esp-cl ul.tiles li.onsiteSolo {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+
+/*end of boxex*/
+
+
+/*tools & logo*/
+
+div#logoContainer {
+    display: grid;
+    align-items: center;
+    justify-content: center;
+}
+
+div.sectionLogo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+img.toolsLogo {
+    width: 200px;
+    transition: all 0.25s ease;
+    border-radius: 10%;
+    margin: 20px 20px 20px 20px;
+    opacity: 0.9;
+}
+
+img.toolsLogo:hover {
+    transform: scale(1.15);
+    transition: all 0.25s ease;
+    border-radius: 10%;
+    margin: 15px 15px 15px 15px;
+    box-shadow: 0 0 10px 5px rgba(11, 60, 110, 0.5);
+    opacity: 1;
+}
+
+div.logoContainer {
+    color: #0b3c6e;
+}
+
+div.logoContainer span {
+    position: absolute;
+    margin-top: 6.5rem;
+    margin-left: -9%;
+    padding: .3rem;
+    text-align: center;
+    color: #000;
+    box-shadow: 10px 10px 5px rgba(136, 136, 136, 0.336);
+    border: 1px;
+    border-radius: 15px;
+    background: radial-gradient(0px 0px, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
+    transform: scale(0) rotate(-15deg);
+    transition: all .3s;
+    opacity: 0;
+}
+
+div.logoContainer:hover span,
+div.logoContainer:focus span {
+    transform: scale(1);
+    opacity: 1;
+}
+
+a.softwareLink {
+    text-decoration: none;
+}
+
+
+/*end of tools and logo*/
+
+
+/*For /tools/softwareName.html */
+
+img.softwareLogo {
+    border-radius: 10%;
+}
+
+@media (min-width: 1701px) {
+    /*One single section*/
+    img.softwareLogo {
+        width: 100%;
+    }
+}
+
+@media (max-width: 1700px) {
+    /*One single section*/
+    img.softwareLogo {
+        width: 20%;
+    }
+}
+
+@media (max-width: 1440px) {
+    /*One single section*/
+    img.softwareLogo {
+        width: 20%;
+    }
+}
+
+@media (max-width: 990px) {
+    /*One single section*/
+    img.softwareLogo {
+        width: 20%;
+    }
+}
+
+h3.software,
+h5.software {
+    color: #000;
+}
+
+.softwareLine {
+    position: relative;
+    padding-bottom: 10px;
+}
+
+.softwareLine::after {
+    display: grid;
+    position: absolute;
+    place-items: center;
+    content: '';
+    z-index: 1;
+    bottom: 0;
+    width: 90%;
+    height: 2px;
+    background-color: rgba(34, 34, 34, 0.3);
+}
+
+
+/* End of /tools/softwareName.html */
+
+
+/* for profile type in <header> */
+
+img.namePP {
+    width: 28px;
+    margin-right: 5px;
+    border-radius: 50%;
+}
+
+span#WorkerName {
+    color: #2f85b3 !important;
+}
+
+
+/* end for profile type in <header> */

key4intranet.front/public/assets/css/bootstrap-select.key4.css

@@ -0,0 +1,652 @@
+@charset "UTF-8";
+@keyframes bs-notify-fadeOut {
+    0% {
+        opacity: 0.9;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+select.bs-select-hidden,
+.bootstrap-select>select.bs-select-hidden,
+select.selectpicker {
+    display: none !important;
+}
+
+.bootstrap-select {
+    width: 220px \0;
+    /*IE9 and below*/
+    vertical-align: middle;
+}
+
+.bootstrap-select>.dropdown-toggle {
+    position: relative;
+    width: 100%;
+    text-align: right;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.bootstrap-select>.dropdown-toggle:after {
+    margin-top: -1px;
+}
+
+.bootstrap-select>.dropdown-toggle.bs-placeholder,
+.bootstrap-select>.dropdown-toggle.bs-placeholder:hover,
+.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
+.bootstrap-select>.dropdown-toggle.bs-placeholder:active {
+    color: #999;
+}
+
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:hover,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:focus,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:active,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:hover,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:focus,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:active,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:hover,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:focus,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:active,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:hover,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:focus,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:active,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:hover,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:focus,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:active,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:hover,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:focus,
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:active {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.bootstrap-select>select {
+    position: absolute !important;
+    bottom: 0;
+    left: 50%;
+    display: block !important;
+    width: 0.5px !important;
+    height: 100% !important;
+    padding: 0 !important;
+    opacity: 0 !important;
+    border: none;
+    z-index: 0 !important;
+}
+
+.bootstrap-select>select.mobile-device {
+    top: 0;
+    left: 0;
+    display: block !important;
+    width: 100% !important;
+    z-index: 2 !important;
+}
+
+.has-error .bootstrap-select .dropdown-toggle,
+.error .bootstrap-select .dropdown-toggle,
+.bootstrap-select.is-invalid .dropdown-toggle,
+.was-validated .bootstrap-select select:invalid+.dropdown-toggle {
+    border-color: #b94a48;
+}
+
+.bootstrap-select.is-valid .dropdown-toggle,
+.was-validated .bootstrap-select select:valid+.dropdown-toggle {
+    border-color: #28a745;
+}
+
+.bootstrap-select.fit-width {
+    width: auto !important;
+}
+
+.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
+    width: 220px;
+}
+
+.bootstrap-select>select.mobile-device:focus+.dropdown-toggle,
+.bootstrap-select .dropdown-toggle:focus {
+    outline: thin dotted #333333 !important;
+    outline: 5px auto -webkit-focus-ring-color !important;
+    outline-offset: -2px;
+}
+
+.bootstrap-select.form-control {
+    margin-bottom: 0;
+    padding: 0;
+    border: none;
+    height: auto;
+}
+
+:not(.input-group)>.bootstrap-select.form-control:not([class*="col-"]) {
+    width: 100%;
+}
+
+.bootstrap-select.form-control.input-group-btn {
+    float: none;
+    z-index: auto;
+}
+
+.form-inline .bootstrap-select,
+.form-inline .bootstrap-select.form-control:not([class*="col-"]) {
+    width: auto;
+}
+
+.bootstrap-select:not(.input-group-btn),
+.bootstrap-select[class*="col-"] {
+    float: none;
+    display: inline-block;
+    margin-left: 0;
+}
+
+.bootstrap-select.dropdown-menu-right,
+.bootstrap-select[class*="col-"].dropdown-menu-right,
+.row .bootstrap-select[class*="col-"].dropdown-menu-right {
+    float: right;
+}
+
+.form-inline .bootstrap-select,
+.form-horizontal .bootstrap-select,
+.form-group .bootstrap-select {
+    margin-bottom: 0;
+}
+
+.form-group-lg .bootstrap-select.form-control,
+.form-group-sm .bootstrap-select.form-control {
+    padding: 0;
+}
+
+.form-group-lg .bootstrap-select.form-control .dropdown-toggle,
+.form-group-sm .bootstrap-select.form-control .dropdown-toggle {
+    height: 100%;
+    font-size: inherit;
+    line-height: inherit;
+    border-radius: inherit;
+}
+
+.bootstrap-select.form-control-sm .dropdown-toggle,
+.bootstrap-select.form-control-lg .dropdown-toggle {
+    font-size: inherit;
+    line-height: inherit;
+    border-radius: inherit;
+}
+
+.bootstrap-select.form-control-sm .dropdown-toggle {
+    padding: 0.25rem 0.5rem;
+}
+
+.bootstrap-select.form-control-lg .dropdown-toggle {
+    padding: 0.5rem 1rem;
+}
+
+.form-inline .bootstrap-select .form-control {
+    width: 100%;
+}
+
+.bootstrap-select.disabled,
+.bootstrap-select>.disabled {
+    cursor: not-allowed;
+}
+
+.bootstrap-select.disabled:focus,
+.bootstrap-select>.disabled:focus {
+    outline: none !important;
+}
+
+.bootstrap-select.bs-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 0 !important;
+    padding: 0 !important;
+}
+
+.bootstrap-select.bs-container .dropdown-menu {
+    z-index: 1060;
+}
+
+.bootstrap-select .dropdown-toggle .filter-option {
+    position: static;
+    top: 0;
+    left: 0;
+    float: left;
+    height: 100%;
+    width: 100%;
+    text-align: left;
+    overflow: hidden;
+    flex: 0 1 auto;
+}
+
+.bs3.bootstrap-select .dropdown-toggle .filter-option {
+    padding-right: inherit;
+}
+
+.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option {
+    position: absolute;
+    padding-top: inherit;
+    padding-bottom: inherit;
+    padding-left: inherit;
+    float: none;
+}
+
+.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner {
+    padding-right: inherit;
+}
+
+.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
+    overflow: hidden;
+}
+
+.bootstrap-select .dropdown-toggle .filter-expand {
+    width: 0 !important;
+    float: left;
+    opacity: 0 !important;
+    overflow: hidden;
+}
+
+.bootstrap-select .dropdown-toggle .caret {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    margin-top: -2px;
+    vertical-align: middle;
+}
+
+.input-group .bootstrap-select.form-control .dropdown-toggle {
+    border-radius: inherit;
+}
+
+.bootstrap-select[class*="col-"] .dropdown-toggle {
+    width: 100%;
+}
+
+.bootstrap-select .dropdown-menu {
+    min-width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.bootstrap-select .dropdown-menu>.inner:focus {
+    outline: none !important;
+}
+
+.bootstrap-select .dropdown-menu.inner {
+    position: static;
+    float: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.bootstrap-select .dropdown-menu li {
+    position: relative;
+}
+
+.bootstrap-select .dropdown-menu li.active small {
+    color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.bootstrap-select .dropdown-menu li.disabled a {
+    cursor: not-allowed;
+}
+
+.bootstrap-select .dropdown-menu li a {
+    cursor: pointer;
+    user-select: none;
+}
+
+.bootstrap-select .dropdown-menu li a.opt {
+    position: relative;
+    padding-left: 2.25em;
+}
+
+.bootstrap-select .dropdown-menu li a span.check-mark {
+    display: none;
+}
+
+.bootstrap-select .dropdown-menu li a span.text {
+    display: inline-block;
+}
+
+.bootstrap-select .dropdown-menu li small {
+    padding-left: 0.5em;
+}
+
+.bootstrap-select .dropdown-menu .notify {
+    position: absolute;
+    bottom: 5px;
+    width: 96%;
+    margin: 0 2%;
+    min-height: 26px;
+    padding: 3px 5px;
+    background: whitesmoke;
+    border: 1px solid #e3e3e3;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+    pointer-events: none;
+    opacity: 0.9;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.bootstrap-select .dropdown-menu .notify.fadeOut {
+    animation: 300ms linear 750ms forwards bs-notify-fadeOut;
+}
+
+.bootstrap-select .no-results {
+    padding: 3px;
+    background: #f5f5f5;
+    margin: 0 5px;
+    white-space: nowrap;
+}
+
+.bootstrap-select.fit-width .dropdown-toggle .filter-option {
+    position: static;
+    display: inline;
+    padding: 0;
+}
+
+.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner,
+.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner {
+    display: inline;
+}
+
+.bootstrap-select.fit-width .dropdown-toggle .bs-caret:before {
+    content: '\00a0';
+}
+
+.bootstrap-select.fit-width .dropdown-toggle .caret {
+    position: static;
+    top: auto;
+    margin-top: -1px;
+}
+
+.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
+    position: absolute;
+    display: inline-block;
+    right: 15px;
+    top: 5px;
+}
+
+.bootstrap-select.show-tick .dropdown-menu li a span.text {
+    margin-right: 34px;
+}
+
+.bootstrap-select .bs-ok-default:after {
+    content: '';
+    display: block;
+    width: 0.5em;
+    height: 1em;
+    border-style: solid;
+    border-width: 0 0.26em 0.26em 0;
+    transform: rotate(45deg);
+}
+
+.bootstrap-select.show-menu-arrow.open>.dropdown-toggle,
+.bootstrap-select.show-menu-arrow.show>.dropdown-toggle {
+    z-index: 1061;
+}
+
+.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before {
+    content: '';
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid rgba(204, 204, 204, 0.2);
+    position: absolute;
+    bottom: -4px;
+    left: 9px;
+    display: none;
+}
+
+.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after {
+    content: '';
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid white;
+    position: absolute;
+    bottom: -4px;
+    left: 10px;
+    display: none;
+}
+
+.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before {
+    bottom: auto;
+    top: -4px;
+    border-top: 7px solid rgba(204, 204, 204, 0.2);
+    border-bottom: 0;
+}
+
+.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after {
+    bottom: auto;
+    top: -4px;
+    border-top: 6px solid white;
+    border-bottom: 0;
+}
+
+.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before {
+    right: 12px;
+    left: auto;
+}
+
+.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after {
+    right: 13px;
+    left: auto;
+}
+
+.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:before,
+.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:after,
+.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:before,
+.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:after {
+    display: block;
+}
+
+.bs-searchbox,
+.bs-actionsbox,
+.bs-donebutton {
+    padding: 4px 8px;
+}
+
+.bs-actionsbox {
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.bs-actionsbox .btn-group button {
+    width: 50%;
+}
+
+.bs-donebutton {
+    float: left;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.bs-donebutton .btn-group button {
+    width: 100%;
+}
+
+.bs-searchbox+.bs-actionsbox {
+    padding: 0 8px 4px;
+}
+
+.bs-searchbox .form-control {
+    margin-bottom: 0;
+    width: 100%;
+    float: none;
+}
+
+.bs-searchbox::after {
+    display: block;
+    position: absolute;
+    content: '\f002';
+    top: 16px;
+    right: 12px;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    font-family: 'Font Awesome 5 Pro';
+    font-weight: 400;
+    font-size: 1.3rem;
+    opacity: .25;
+}
+
+select.bs-select {
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.bootstrap-select {
+    height: auto !important;
+    padding-right: 0 !important;
+    box-shadow: none;
+}
+
+.bootstrap-select.is-invalid,
+.bootstrap-select.is-valid {
+    background-position: right calc(2.4em + 0.1875rem) center !important;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
+}
+
+.input-group .bootstrap-select.is-invalid,
+.input-group .bootstrap-select.is-valid {
+    background-position: right calc(4em + 0.1875rem) center !important;
+}
+
+.bootstrap-select.is-invalid.custom-select-sm,
+.bootstrap-select.is-valid.custom-select-sm {
+    background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem) !important;
+}
+
+.input-group .bootstrap-select.is-invalid.custom-select-sm,
+.input-group .bootstrap-select.is-valid.custom-select-sm {
+    background-position: right calc(3.4em + 0.1875rem) center !important;
+}
+
+.bootstrap-select.is-invalid.custom-select-lg,
+.bootstrap-select.is-valid.custom-select-lg {
+    background-size: calc(1em + 0.375rem) calc(1em + 0.375rem) !important;
+}
+
+.input-group .bootstrap-select.is-invalid.custom-select-lg,
+.input-group .bootstrap-select.is-valid.custom-select-lg {
+    background-position: right calc(4.4em + 0.1875rem) center !important;
+}
+
+.bootstrap-select.is-invalid .dropdown-toggle,
+.bootstrap-select.is-valid .dropdown-toggle {
+    background-color: transparent;
+}
+
+.bootstrap-select+a {
+    z-index: 1;
+}
+
+.bootstrap-select>select.mobile-device:focus+.dropdown-toggle,
+.bootstrap-select .dropdown-toggle:focus {
+    outline: 0 !important;
+    overflow: hidden;
+}
+
+.bootstrap-select>.dropdown-toggle::after {
+    display: none;
+}
+
+.bootstrap-select>.dropdown-toggle .filter-option-inner-inner {
+    max-height: 1.6rem;
+    white-space: pre-wrap;
+}
+
+.bootstrap-select.custom-select-sm>.dropdown-toggle {
+    font-size: .855rem !important;
+    line-height: 1.6rem;
+}
+
+.bootstrap-select.custom-select-lg>.dropdown-toggle {
+    font-size: 1.15rem !important;
+}
+
+.bootstrap-select .dropdown-menu {
+    z-index: 10000;
+    border: 0;
+}
+
+.bootstrap-select .dropdown-menu li a {
+    max-width: 95vw;
+    padding: .35rem 1.5rem;
+    white-space: initial;
+}
+
+.bootstrap-select .dropdown-menu li a .icon {
+    width: 24px;
+}
+
+.bootstrap-select .dropdown-menu li a .text {
+    color: black !important;
+}
+
+.bootstrap-select .dropdown-menu li a:active .text {
+    color: white !important;
+}
+
+.bootstrap-select .dropdown-menu li.selected a,
+.bootstrap-select .dropdown-menu li.selected a .text,
+.bootstrap-select .dropdown-menu li.active a,
+.bootstrap-select .dropdown-menu li.active a .text {
+    color: white !important;
+}
+
+.bootstrap-select .dropdown-menu li.disabled {
+    opacity: .6;
+}
+
+.bootstrap-select.custom-select-sm,
+.bootstrap-select.custom-select-lg {
+    height: inherit;
+    padding: inherit;
+    font-size: inherit;
+}
+
+.bootstrap-select.custom-select-sm .custom-select {
+    height: calc(1.5em + .8rem + 2px);
+    padding-top: .4rem;
+    padding-bottom: .4rem;
+    padding-left: 1.05rem;
+    font-size: .8em;
+}
+
+.bootstrap-select.custom-select-sm .dropdown-menu {
+    font-size: .855rem;
+}
+
+.bootstrap-select.custom-select-lg .custom-select {
+    height: calc(2.5em + .56rem + 2px);
+    padding-top: .28rem;
+    padding-bottom: .28rem;
+    padding-left: 1.7rem;
+    font-size: 1.15em;
+}
+
+.bootstrap-select.disabled .dropdown-toggle,
+.bootstrap-select>.disabled .dropdown-toggle {
+    color: #6c757d;
+    background-color: #e9ecef;
+    box-shadow: none;
+}
+
+.bootstrap-select[class*="col-"] {
+    padding-left: 0;
+    padding-right: 0;
+}

key4intranet.front/public/assets/css/flickity.css

@@ -0,0 +1,154 @@
+/*! Flickity v2.2.1
+https://flickity.metafizzy.co
+---------------------------------------------- */
+
+.flickity-enabled {
+    position: relative;
+}
+
+.flickity-enabled:focus {
+    outline: none;
+}
+
+.flickity-viewport {
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+}
+
+.flickity-slider {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+
+/* draggable */
+
+.flickity-enabled.is-draggable {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport {
+    cursor: move;
+    cursor: -webkit-grab;
+    cursor: grab;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+
+
+/* ---- flickity-button ---- */
+
+.flickity-button {
+    position: absolute;
+    background: hsla(0, 0%, 100%, 0.75);
+    border: none;
+    color: #333;
+}
+
+.flickity-button:hover {
+    background: white;
+    cursor: pointer;
+}
+
+.flickity-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 5px #19F;
+}
+
+.flickity-button:active {
+    opacity: 0.6;
+}
+
+.flickity-button:disabled {
+    opacity: 0.3;
+    cursor: auto;
+    /* prevent disabled button from capturing pointer up event. #716 */
+    pointer-events: none;
+}
+
+.flickity-button-icon {
+    fill: currentColor;
+}
+
+
+/* ---- previous/next buttons ---- */
+
+.flickity-prev-next-button {
+    top: 50%;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    /* vertically center */
+    transform: translateY(-50%);
+}
+
+.flickity-prev-next-button.previous {
+    left: 10px;
+}
+
+.flickity-prev-next-button.next {
+    right: 10px;
+}
+
+
+/* right to left */
+
+.flickity-rtl .flickity-prev-next-button.previous {
+    left: auto;
+    right: 10px;
+}
+
+.flickity-rtl .flickity-prev-next-button.next {
+    right: auto;
+    left: 10px;
+}
+
+.flickity-prev-next-button .flickity-button-icon {
+    position: absolute;
+    left: 20%;
+    top: 20%;
+    width: 60%;
+    height: 60%;
+}
+
+
+/* ---- page dots ---- */
+
+.flickity-page-dots {
+    position: absolute;
+    width: 100%;
+    bottom: -25px;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+    line-height: 1;
+}
+
+.flickity-rtl .flickity-page-dots {
+    direction: rtl;
+}
+
+.flickity-page-dots .dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin: 0 8px;
+    background: #333;
+    border-radius: 50%;
+    opacity: 0.25;
+    cursor: pointer;
+}
+
+.flickity-page-dots .dot.is-selected {
+    opacity: 1;
+}