File: D:/HostingSpaces/SBogers10/farmfun.komma.pro/wwwroot/css/kms.css
@charset "UTF-8";
.fc {
direction: ltr;
text-align: left;
}
.fc-rtl {
text-align: right;
}
body .fc {
/* extra precedence to overcome jqui */
font-size: 1em;
}
/* Colors
--------------------------------------------------------------------------------------------------*/
.fc-highlight {
/* when user is selecting cells */
background: #bce8f1;
opacity: 0.3;
}
.fc-bgevent {
/* default look for background events */
background: #8fdf82;
opacity: 0.3;
}
.fc-nonbusiness {
/* default look for non-business-hours areas */
/* will inherit .fc-bgevent's styles */
background: #d7d7d7;
}
/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-popover {
position: absolute;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.fc-popover .fc-header {
/* TODO: be more consistent with fc-head/fc-body */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 2px 4px;
}
.fc-rtl .fc-popover .fc-header {
flex-direction: row-reverse;
}
.fc-popover .fc-header .fc-title {
margin: 0 2px;
}
.fc-popover .fc-header .fc-close {
cursor: pointer;
opacity: 0.65;
font-size: 1.1em;
}
/* Misc Reusable Components
--------------------------------------------------------------------------------------------------*/
.fc-divider {
border-style: solid;
border-width: 1px;
}
hr.fc-divider {
height: 0;
margin: 0;
padding: 0 0 2px;
/* height is unreliable across browsers, so use padding */
border-width: 1px 0;
}
.fc-bg,
.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-mirror-skeleton {
/* these element should always cling to top-left/right corners */
position: absolute;
top: 0;
left: 0;
right: 0;
}
.fc-bg {
bottom: 0;
/* strech bg to bottom edge */
}
.fc-bg table {
height: 100%;
/* strech bg to bottom edge */
}
/* Tables
--------------------------------------------------------------------------------------------------*/
.fc table {
width: 100%;
box-sizing: border-box;
/* fix scrollbar issue in firefox */
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
font-size: 1em;
/* normalize cross-browser */
}
.fc th {
text-align: center;
}
.fc th,
.fc td {
border-style: solid;
border-width: 1px;
padding: 0;
vertical-align: top;
}
.fc td.fc-today {
border-style: double;
/* overcome neighboring borders */
}
/* Internal Nav Links
--------------------------------------------------------------------------------------------------*/
a[data-goto] {
cursor: pointer;
}
a[data-goto]:hover {
text-decoration: underline;
}
/* Fake Table Rows
--------------------------------------------------------------------------------------------------*/
.fc .fc-row {
/* extra precedence to overcome themes forcing a 1px border */
/* no visible border by default. but make available if need be (scrollbar width compensation) */
border-style: solid;
border-width: 0;
}
.fc-row table {
/* don't put left/right border on anything within a fake row.
the outer tbody will worry about this */
border-left: 0 hidden transparent;
border-right: 0 hidden transparent;
/* no bottom borders on rows */
border-bottom: 0 hidden transparent;
}
.fc-row:first-child table {
border-top: 0 hidden transparent;
/* no top border on first row */
}
/* Day Row (used within the header and the DayGrid)
--------------------------------------------------------------------------------------------------*/
.fc-row {
position: relative;
}
.fc-row .fc-bg {
z-index: 1;
}
/* highlighting cells & background event skeleton */
.fc-row .fc-bgevent-skeleton,
.fc-row .fc-highlight-skeleton {
bottom: 0;
/* stretch skeleton to bottom of row */
}
.fc-row .fc-bgevent-skeleton table,
.fc-row .fc-highlight-skeleton table {
height: 100%;
/* stretch skeleton to bottom of row */
}
.fc-row .fc-highlight-skeleton td,
.fc-row .fc-bgevent-skeleton td {
border-color: transparent;
}
.fc-row .fc-bgevent-skeleton {
z-index: 2;
}
.fc-row .fc-highlight-skeleton {
z-index: 3;
}
/*
row content (which contains day/week numbers and events) as well as "mirror" (which contains
temporary rendered events).
*/
.fc-row .fc-content-skeleton {
position: relative;
z-index: 4;
padding-bottom: 2px;
/* matches the space above the events */
}
.fc-row .fc-mirror-skeleton {
z-index: 5;
}
.fc .fc-row .fc-content-skeleton table,
.fc .fc-row .fc-content-skeleton td,
.fc .fc-row .fc-mirror-skeleton td {
/* see-through to the background below */
/* extra precedence to prevent theme-provided backgrounds */
background: none;
/* in case <td>s are globally styled */
border-color: transparent;
}
.fc-row .fc-content-skeleton td,
.fc-row .fc-mirror-skeleton td {
/* don't put a border between events and/or the day number */
border-bottom: 0;
}
.fc-row .fc-content-skeleton tbody td,
.fc-row .fc-mirror-skeleton tbody td {
/* don't put a border between event cells */
border-top: 0;
}
/* Scrolling Container
--------------------------------------------------------------------------------------------------*/
.fc-scroller {
-webkit-overflow-scrolling: touch;
}
/* TODO: move to timegrid/daygrid */
.fc-scroller > .fc-day-grid,
.fc-scroller > .fc-time-grid {
position: relative;
/* re-scope all positions */
width: 100%;
/* hack to force re-sizing this inner element when scrollbars appear/disappear */
}
/* Global Event Styles
--------------------------------------------------------------------------------------------------*/
.fc-event {
position: relative;
/* for resize handle and other inner positioning */
display: block;
/* make the <a> tag block */
font-size: 0.85em;
line-height: 1.4;
border-radius: 3px;
border: 1px solid #3788d8;
}
.fc-event,
.fc-event-dot {
background-color: #3788d8;
/* default BACKGROUND color */
}
.fc-event,
.fc-event:hover {
color: #fff;
/* default TEXT color */
text-decoration: none;
/* if <a> has an href */
}
.fc-event[href],
.fc-event.fc-draggable {
cursor: pointer;
/* give events with links and draggable events a hand mouse pointer */
}
.fc-not-allowed,
.fc-not-allowed .fc-event {
/* to override an event's custom cursor */
cursor: not-allowed;
}
.fc-event .fc-content {
position: relative;
z-index: 2;
}
/* resizer (cursor AND touch devices) */
.fc-event .fc-resizer {
position: absolute;
z-index: 4;
}
/* resizer (touch devices) */
.fc-event .fc-resizer {
display: none;
}
.fc-event.fc-allow-mouse-resize .fc-resizer,
.fc-event.fc-selected .fc-resizer {
/* only show when hovering or selected (with touch) */
display: block;
}
/* hit area */
.fc-event.fc-selected .fc-resizer:before {
/* 40x40 touch area */
content: "";
position: absolute;
z-index: 9999;
/* user of this util can scope within a lower z-index */
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
}
/* Event Selection (only for touch devices)
--------------------------------------------------------------------------------------------------*/
.fc-event.fc-selected {
z-index: 9999 !important;
/* overcomes inline z-index */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.fc-event.fc-selected:after {
content: "";
position: absolute;
z-index: 1;
/* same z-index as fc-bg, behind text */
/* overcome the borders */
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
/* darkening effect */
background: #000;
opacity: 0.25;
}
/* Event Dragging
--------------------------------------------------------------------------------------------------*/
.fc-event.fc-dragging.fc-selected {
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}
.fc-event.fc-dragging:not(.fc-selected) {
opacity: 0.75;
}
/* Horizontal Events
--------------------------------------------------------------------------------------------------*/
/* bigger touch area when selected */
.fc-h-event.fc-selected:before {
content: "";
position: absolute;
z-index: 3;
/* below resizers */
top: -10px;
bottom: -10px;
left: 0;
right: 0;
}
/* events that are continuing to/from another week. kill rounded corners and butt up against edge */
.fc-ltr .fc-h-event.fc-not-start,
.fc-rtl .fc-h-event.fc-not-end {
margin-left: 0;
border-left-width: 0;
padding-left: 1px;
/* replace the border with padding */
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.fc-ltr .fc-h-event.fc-not-end,
.fc-rtl .fc-h-event.fc-not-start {
margin-right: 0;
border-right-width: 0;
padding-right: 1px;
/* replace the border with padding */
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* resizer (cursor AND touch devices) */
/* left resizer */
.fc-ltr .fc-h-event .fc-start-resizer,
.fc-rtl .fc-h-event .fc-end-resizer {
cursor: w-resize;
left: -1px;
/* overcome border */
}
/* right resizer */
.fc-ltr .fc-h-event .fc-end-resizer,
.fc-rtl .fc-h-event .fc-start-resizer {
cursor: e-resize;
right: -1px;
/* overcome border */
}
/* resizer (mouse devices) */
.fc-h-event.fc-allow-mouse-resize .fc-resizer {
width: 7px;
top: -1px;
/* overcome top border */
bottom: -1px;
/* overcome bottom border */
}
/* resizer (touch devices) */
.fc-h-event.fc-selected .fc-resizer {
/* 8x8 little dot */
border-radius: 4px;
border-width: 1px;
width: 6px;
height: 6px;
border-style: solid;
border-color: inherit;
background: #fff;
/* vertically center */
top: 50%;
margin-top: -4px;
}
/* left resizer */
.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
margin-left: -4px;
/* centers the 8x8 dot on the left edge */
}
/* right resizer */
.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
margin-right: -4px;
/* centers the 8x8 dot on the right edge */
}
/* DayGrid events
----------------------------------------------------------------------------------------------------
We use the full "fc-day-grid-event" class instead of using descendants because the event won't
be a descendant of the grid when it is being dragged.
*/
.fc-day-grid-event {
margin: 1px 2px 0;
/* spacing between events and edges */
padding: 0 1px;
}
tr:first-child > td > .fc-day-grid-event {
margin-top: 2px;
/* a little bit more space before the first event */
}
.fc-mirror-skeleton tr:first-child > td > .fc-day-grid-event {
margin-top: 0;
/* except for mirror skeleton */
}
.fc-day-grid-event .fc-content {
/* force events to be one-line tall */
white-space: nowrap;
overflow: hidden;
}
.fc-day-grid-event .fc-time {
font-weight: bold;
}
/* resizer (cursor devices) */
/* left resizer */
.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
margin-left: -2px;
/* to the day cell's edge */
}
/* right resizer */
.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
margin-right: -2px;
/* to the day cell's edge */
}
/* Event Limiting
--------------------------------------------------------------------------------------------------*/
/* "more" link that represents hidden events */
a.fc-more {
margin: 1px 3px;
font-size: 0.85em;
cursor: pointer;
text-decoration: none;
}
a.fc-more:hover {
text-decoration: underline;
}
.fc-limited {
/* rows and cells that are hidden because of a "more" link */
display: none;
}
/* popover that appears when "more" link is clicked */
.fc-day-grid .fc-row {
z-index: 1;
/* make the "more" popover one higher than this */
}
.fc-more-popover {
z-index: 2;
width: 220px;
}
.fc-more-popover .fc-event-container {
padding: 10px;
}
/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-now-indicator {
position: absolute;
border: 0 solid red;
}
/* Utilities
--------------------------------------------------------------------------------------------------*/
.fc-unselectable {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*
TODO: more distinction between this file and common.css
*/
/* Colors
--------------------------------------------------------------------------------------------------*/
.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-content,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-list-heading td {
border-color: #ddd;
}
.fc-unthemed .fc-popover {
background-color: #fff;
}
.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header,
.fc-unthemed .fc-list-heading td {
background: #eee;
}
.fc-unthemed td.fc-today {
background: #fcf8e3;
}
.fc-unthemed .fc-disabled-day {
background: #d7d7d7;
opacity: 0.3;
}
/* Icons
--------------------------------------------------------------------------------------------------
from https://feathericons.com/ and built with IcoMoon
*/
@font-face {
font-family: "fcicons";
src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfAAAAC8AAAAYGNtYXAXVtKNAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZgYydxIAAAF4AAAFNGhlYWQUJ7cIAAAGrAAAADZoaGVhB20DzAAABuQAAAAkaG10eCIABhQAAAcIAAAALGxvY2ED4AU6AAAHNAAAABhtYXhwAA8AjAAAB0wAAAAgbmFtZXsr690AAAdsAAABhnBvc3QAAwAAAAAI9AAAACAAAwPAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qb//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAWIAjQKeAskAEwAAJSc3NjQnJiIHAQYUFwEWMjc2NCcCnuLiDQ0MJAz/AA0NAQAMJAwNDcni4gwjDQwM/wANIwz/AA0NDCMNAAAAAQFiAI0CngLJABMAACUBNjQnASYiBwYUHwEHBhQXFjI3AZ4BAA0N/wAMJAwNDeLiDQ0MJAyNAQAMIw0BAAwMDSMM4uINIwwNDQAAAAIA4gC3Ax4CngATACcAACUnNzY0JyYiDwEGFB8BFjI3NjQnISc3NjQnJiIPAQYUHwEWMjc2NCcB87e3DQ0MIw3VDQ3VDSMMDQ0BK7e3DQ0MJAzVDQ3VDCQMDQ3zuLcMJAwNDdUNIwzWDAwNIwy4twwkDA0N1Q0jDNYMDA0jDAAAAgDiALcDHgKeABMAJwAAJTc2NC8BJiIHBhQfAQcGFBcWMjchNzY0LwEmIgcGFB8BBwYUFxYyNwJJ1Q0N1Q0jDA0Nt7cNDQwjDf7V1Q0N1QwkDA0Nt7cNDQwkDLfWDCMN1Q0NDCQMt7gMIw0MDNYMIw3VDQ0MJAy3uAwjDQwMAAADAFUAAAOrA1UAMwBoAHcAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMhMjY1NCYjISIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAAVYRGRkR/qoRGRkRA1UFBAUOCQkVDAsZDf2rDRkLDBUJCA4FBQUFBQUOCQgVDAsZDQJVDRkLDBUJCQ4FBAVVAgECBQMCBwQECAX9qwQJAwQHAwMFAQICAgIBBQMDBwQDCQQCVQUIBAQHAgMFAgEC/oAZEhEZGRESGQAAAAADAFUAAAOrA1UAMwBoAIkAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMzFRQWMzI2PQEzMjY1NCYrATU0JiMiBh0BIyIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAgBkSEhmAERkZEYAZEhIZgBEZGREDVQUEBQ4JCRUMCxkN/asNGQsMFQkIDgUFBQUFBQ4JCBUMCxkNAlUNGQsMFQkJDgUEBVUCAQIFAwIHBAQIBf2rBAkDBAcDAwUBAgICAgEFAwMHBAMJBAJVBQgEBAcCAwUCAQL+gIASGRkSgBkSERmAEhkZEoAZERIZAAABAOIAjQMeAskAIAAAExcHBhQXFjI/ARcWMjc2NC8BNzY0JyYiDwEnJiIHBhQX4uLiDQ0MJAzi4gwkDA0N4uINDQwkDOLiDCQMDQ0CjeLiDSMMDQ3h4Q0NDCMN4uIMIw0MDOLiDAwNIwwAAAABAAAAAQAAa5n0y18PPPUACwQAAAAAANivOVsAAAAA2K85WwAAAAADqwNVAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAOrAAEAAAAAAAAAAAAAAAAAAAALBAAAAAAAAAAAAAAAAgAAAAQAAWIEAAFiBAAA4gQAAOIEAABVBAAAVQQAAOIAAAAAAAoAFAAeAEQAagCqAOoBngJkApoAAQAAAAsAigADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGZjaWNvbnMAZgBjAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGZjaWNvbnMAZgBjAGkAYwBvAG4Ac2ZjaWNvbnMAZgBjAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcmZjaWNvbnMAZgBjAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format("truetype");
font-weight: normal;
font-style: normal;
}
.fc-icon {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "fcicons" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fc-icon-chevron-left:before {
content: "";
}
.fc-icon-chevron-right:before {
content: "";
}
.fc-icon-chevrons-left:before {
content: "";
}
.fc-icon-chevrons-right:before {
content: "";
}
.fc-icon-minus-square:before {
content: "";
}
.fc-icon-plus-square:before {
content: "";
}
.fc-icon-x:before {
content: "";
}
.fc-icon {
display: inline-block;
width: 1em;
height: 1em;
text-align: center;
}
/* Buttons
--------------------------------------------------------------------------------------------------
Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css
*/
/* reset */
.fc-button {
border-radius: 0;
overflow: visible;
text-transform: none;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.fc-button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
.fc-button {
-webkit-appearance: button;
}
.fc-button:not(:disabled) {
cursor: pointer;
}
.fc-button::-moz-focus-inner {
padding: 0;
border-style: none;
}
/* theme */
.fc-button {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.4em 0.65em;
font-size: 1em;
line-height: 1.5;
border-radius: 0.25em;
}
.fc-button:hover {
color: #212529;
text-decoration: none;
}
.fc-button:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}
.fc-button:disabled {
opacity: 0.65;
}
/* "primary" coloring */
.fc-button-primary {
color: #fff;
background-color: #2C3E50;
border-color: #2C3E50;
}
.fc-button-primary:hover {
color: #fff;
background-color: #1e2b37;
border-color: #1a252f;
}
.fc-button-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
}
.fc-button-primary:disabled {
color: #fff;
background-color: #2C3E50;
border-color: #2C3E50;
}
.fc-button-primary:not(:disabled):active,
.fc-button-primary:not(:disabled).fc-button-active {
color: #fff;
background-color: #1a252f;
border-color: #151e27;
}
.fc-button-primary:not(:disabled):active:focus,
.fc-button-primary:not(:disabled).fc-button-active:focus {
box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
}
/* icons within buttons */
.fc-button .fc-icon {
vertical-align: middle;
font-size: 1.5em;
}
/* Buttons Groups
--------------------------------------------------------------------------------------------------*/
.fc-button-group {
position: relative;
display: inline-flex;
vertical-align: middle;
}
.fc-button-group > .fc-button {
position: relative;
flex: 1 1 auto;
}
.fc-button-group > .fc-button:hover {
z-index: 1;
}
.fc-button-group > .fc-button:focus,
.fc-button-group > .fc-button:active,
.fc-button-group > .fc-button.fc-button-active {
z-index: 1;
}
.fc-button-group > .fc-button:not(:first-child) {
margin-left: -1px;
}
.fc-button-group > .fc-button:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.fc-button-group > .fc-button:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-unthemed .fc-popover {
border-width: 1px;
border-style: solid;
}
/* List View
--------------------------------------------------------------------------------------------------*/
.fc-unthemed .fc-list-item:hover td {
background-color: #f5f5f5;
}
/* Toolbar
--------------------------------------------------------------------------------------------------*/
.fc-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.fc-toolbar.fc-header-toolbar {
margin-bottom: 1.5em;
}
.fc-toolbar.fc-footer-toolbar {
margin-top: 1.5em;
}
/* inner content */
.fc-toolbar > * > :not(:first-child) {
margin-left: 0.75em;
}
.fc-toolbar h2 {
font-size: 1.75em;
margin: 0;
}
/* View Structure
--------------------------------------------------------------------------------------------------*/
.fc-view-container {
position: relative;
}
/* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
/* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
.fc-view-container *,
.fc-view-container *:before,
.fc-view-container *:after {
box-sizing: content-box;
}
.fc-view,
.fc-view > table {
/* so dragged elements can be above the view's main element */
position: relative;
z-index: 1;
}
@media print {
.fc {
max-width: 100% !important;
}
/* Global Event Restyling
--------------------------------------------------------------------------------------------------*/
.fc-event {
background: #fff !important;
color: #000 !important;
page-break-inside: avoid;
}
.fc-event .fc-resizer {
display: none;
}
/* Table & Day-Row Restyling
--------------------------------------------------------------------------------------------------*/
.fc th,
.fc td,
.fc hr,
.fc thead,
.fc tbody,
.fc-row {
border-color: #ccc !important;
background: #fff !important;
}
/* kill the overlaid, absolutely-positioned components */
/* common... */
.fc-bg,
.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-mirror-skeleton,
.fc-bgevent-container,
.fc-business-container,
.fc-highlight-container,
.fc-mirror-container {
display: none;
}
/* don't force a min-height on rows (for DayGrid) */
.fc tbody .fc-row {
height: auto !important;
/* undo height that JS set in distributeHeight */
min-height: 0 !important;
/* undo the min-height from each view's specific stylesheet */
}
.fc tbody .fc-row .fc-content-skeleton {
position: static;
/* undo .fc-rigid */
padding-bottom: 0 !important;
/* use a more border-friendly method for this... */
}
.fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td {
/* only works in newer browsers */
padding-bottom: 1em;
/* ...gives space within the skeleton. also ensures min height in a way */
}
.fc tbody .fc-row .fc-content-skeleton table {
/* provides a min-height for the row, but only effective for IE, which exaggerates this value,
making it look more like 3em. for other browers, it will already be this tall */
height: 1em;
}
/* Undo month-view event limiting. Display all events and hide the "more" links
--------------------------------------------------------------------------------------------------*/
.fc-more-cell,
.fc-more {
display: none !important;
}
.fc tr.fc-limited {
display: table-row !important;
}
.fc td.fc-limited {
display: table-cell !important;
}
.fc-popover {
display: none;
/* never display the "more.." popover in print mode */
}
/* TimeGrid Restyling
--------------------------------------------------------------------------------------------------*/
/* undo the min-height 100% trick used to fill the container's height */
.fc-time-grid {
min-height: 0 !important;
}
/* don't display the side axis at all ("all-day" and time cells) */
.fc-timeGrid-view .fc-axis {
display: none;
}
/* don't display the horizontal lines */
.fc-slats,
.fc-time-grid hr {
/* this hr is used when height is underused and needs to be filled */
display: none !important;
/* important overrides inline declaration */
}
/* let the container that holds the events be naturally positioned and create real height */
.fc-time-grid .fc-content-skeleton {
position: static;
}
/* in case there are no events, we still want some height */
.fc-time-grid .fc-content-skeleton table {
height: 4em;
}
/* kill the horizontal spacing made by the event container. event margins will be done below */
.fc-time-grid .fc-event-container {
margin: 0 !important;
}
/* TimeGrid *Event* Restyling
--------------------------------------------------------------------------------------------------*/
/* naturally position events, vertically stacking them */
.fc-time-grid .fc-event {
position: static !important;
margin: 3px 2px !important;
}
/* for events that continue to a future day, give the bottom border back */
.fc-time-grid .fc-event.fc-not-end {
border-bottom-width: 1px !important;
}
/* indicate the event continues via "..." text */
.fc-time-grid .fc-event.fc-not-end:after {
content: "...";
}
/* for events that are continuations from previous days, give the top border back */
.fc-time-grid .fc-event.fc-not-start {
border-top-width: 1px !important;
}
/* indicate the event is a continuation via "..." text */
.fc-time-grid .fc-event.fc-not-start:before {
content: "...";
}
/* time */
/* undo a previous declaration and let the time text span to a second line */
.fc-time-grid .fc-event .fc-time {
white-space: normal !important;
}
/* hide the the time that is normally displayed... */
.fc-time-grid .fc-event .fc-time span {
display: none;
}
/* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */
.fc-time-grid .fc-event .fc-time:after {
content: attr(data-full);
}
/* Vertical Scroller & Containers
--------------------------------------------------------------------------------------------------*/
/* kill the scrollbars and allow natural height */
.fc-scroller,
.fc-day-grid-container,
.fc-time-grid-container {
/* */
overflow: visible !important;
height: auto !important;
}
/* kill the horizontal border/padding used to compensate for scrollbars */
.fc-row {
border: 0 !important;
margin: 0 !important;
}
/* Button Controls
--------------------------------------------------------------------------------------------------*/
.fc-button-group,
.fc button {
display: none;
/* don't display any button-related controls */
}
}
/* DayGridView
--------------------------------------------------------------------------------------------------*/
/* day row structure */
.fc-dayGridWeek-view .fc-content-skeleton,
.fc-dayGridDay-view .fc-content-skeleton {
/* there may be week numbers in these views, so no padding-top */
padding-bottom: 1em;
/* ensure a space at bottom of cell for user selecting/clicking */
}
.fc-dayGrid-view .fc-body .fc-row {
min-height: 4em;
/* ensure that all rows are at least this tall */
}
/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
.fc-row.fc-rigid {
overflow: hidden;
}
.fc-row.fc-rigid .fc-content-skeleton {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* week and day number styling */
.fc-day-top.fc-other-month {
opacity: 0.3;
}
.fc-dayGrid-view .fc-week-number,
.fc-dayGrid-view .fc-day-number {
padding: 2px;
}
.fc-dayGrid-view th.fc-week-number,
.fc-dayGrid-view th.fc-day-number {
padding: 0 2px;
/* column headers can't have as much v space */
}
.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {
float: right;
}
.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number {
float: left;
}
.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number {
float: left;
border-radius: 0 0 3px 0;
}
.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number {
float: right;
border-radius: 0 0 0 3px;
}
.fc-dayGrid-view .fc-day-top .fc-week-number {
min-width: 1.5em;
text-align: center;
background-color: #f2f2f2;
color: #808080;
}
/* when week/day number have own column */
.fc-dayGrid-view td.fc-week-number {
text-align: center;
}
.fc-dayGrid-view td.fc-week-number > * {
/* work around the way we do column resizing and ensure a minimum width */
display: inline-block;
min-width: 1.25em;
}
@charset "UTF-8";
/* TimeGridView all-day area
--------------------------------------------------------------------------------------------------*/
.fc-timeGrid-view .fc-day-grid {
position: relative;
z-index: 2;
/* so the "more.." popover will be over the time grid */
}
.fc-timeGrid-view .fc-day-grid .fc-row {
min-height: 3em;
/* all-day section will never get shorter than this */
}
.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
padding-bottom: 1em;
/* give space underneath events for clicking/selecting days */
}
/* TimeGrid axis running down the side (for both the all-day area and the slot area)
--------------------------------------------------------------------------------------------------*/
.fc .fc-axis {
/* .fc to overcome default cell styles */
vertical-align: middle;
padding: 0 4px;
white-space: nowrap;
}
.fc-ltr .fc-axis {
text-align: right;
}
.fc-rtl .fc-axis {
text-align: left;
}
/* TimeGrid Structure
--------------------------------------------------------------------------------------------------*/
.fc-time-grid-container,
.fc-time-grid {
/* so slats/bg/content/etc positions get scoped within here */
position: relative;
z-index: 1;
}
.fc-time-grid {
min-height: 100%;
/* so if height setting is 'auto', .fc-bg stretches to fill height */
}
.fc-time-grid table {
/* don't put outer borders on slats/bg/content/etc */
border: 0 hidden transparent;
}
.fc-time-grid > .fc-bg {
z-index: 1;
}
.fc-time-grid .fc-slats,
.fc-time-grid > hr {
/* the <hr> TimeGridView injects when grid is shorter than scroller */
position: relative;
z-index: 2;
}
.fc-time-grid .fc-content-col {
position: relative;
/* because now-indicator lives directly inside */
}
.fc-time-grid .fc-content-skeleton {
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
}
/* divs within a cell within the fc-content-skeleton */
.fc-time-grid .fc-business-container {
position: relative;
z-index: 1;
}
.fc-time-grid .fc-bgevent-container {
position: relative;
z-index: 2;
}
.fc-time-grid .fc-highlight-container {
position: relative;
z-index: 3;
}
.fc-time-grid .fc-event-container {
position: relative;
z-index: 4;
}
.fc-time-grid .fc-now-indicator-line {
z-index: 5;
}
.fc-time-grid .fc-mirror-container {
/* also is fc-event-container */
position: relative;
z-index: 6;
}
/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-slats td {
height: 1.5em;
border-bottom: 0;
/* each cell is responsible for its top border */
}
.fc-time-grid .fc-slats .fc-minor td {
border-top-style: dotted;
}
/* TimeGrid Highlighting Slots
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-highlight-container {
/* a div within a cell within the fc-highlight-skeleton */
position: relative;
/* scopes the left/right of the fc-highlight to be in the column */
}
.fc-time-grid .fc-highlight {
position: absolute;
left: 0;
right: 0;
/* top and bottom will be in by JS */
}
/* TimeGrid Event Containment
--------------------------------------------------------------------------------------------------*/
.fc-ltr .fc-time-grid .fc-event-container {
/* space on the sides of events for LTR (default) */
margin: 0 2.5% 0 2px;
}
.fc-rtl .fc-time-grid .fc-event-container {
/* space on the sides of events for RTL */
margin: 0 2px 0 2.5%;
}
.fc-time-grid .fc-event,
.fc-time-grid .fc-bgevent {
position: absolute;
z-index: 1;
/* scope inner z-index's */
}
.fc-time-grid .fc-bgevent {
/* background events always span full width */
left: 0;
right: 0;
}
/* TimeGrid Event Styling
----------------------------------------------------------------------------------------------------
We use the full "fc-time-grid-event" class instead of using descendants because the event won't
be a descendant of the grid when it is being dragged.
*/
.fc-time-grid-event {
margin-bottom: 1px;
}
.fc-time-grid-event-inset {
box-shadow: 0px 0px 0px 1px #fff;
}
.fc-time-grid-event.fc-not-start {
/* events that are continuing from another day */
/* replace space made by the top border with padding */
border-top-width: 0;
padding-top: 1px;
/* remove top rounded corners */
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.fc-time-grid-event.fc-not-end {
/* replace space made by the top border with padding */
border-bottom-width: 0;
padding-bottom: 1px;
/* remove bottom rounded corners */
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.fc-time-grid-event .fc-content {
overflow: hidden;
max-height: 100%;
}
.fc-time-grid-event .fc-time,
.fc-time-grid-event .fc-title {
padding: 0 1px;
}
.fc-time-grid-event .fc-time {
font-size: 0.85em;
white-space: nowrap;
}
/* short mode, where time and title are on the same line */
.fc-time-grid-event.fc-short .fc-content {
/* don't wrap to second line (now that contents will be inline) */
white-space: nowrap;
}
.fc-time-grid-event.fc-short .fc-time,
.fc-time-grid-event.fc-short .fc-title {
/* put the time and title on the same line */
display: inline-block;
vertical-align: top;
}
.fc-time-grid-event.fc-short .fc-time span {
display: none;
/* don't display the full time text... */
}
.fc-time-grid-event.fc-short .fc-time:before {
content: attr(data-start);
/* ...instead, display only the start time */
}
.fc-time-grid-event.fc-short .fc-time:after {
content: " - ";
/* seperate with a dash, wrapped in nbsp's */
}
.fc-time-grid-event.fc-short .fc-title {
font-size: 0.85em;
/* make the title text the same size as the time */
padding: 0;
/* undo padding from above */
}
/* resizer (cursor device) */
.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
left: 0;
right: 0;
bottom: 0;
height: 8px;
overflow: hidden;
line-height: 8px;
font-size: 11px;
font-family: monospace;
text-align: center;
cursor: s-resize;
}
.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
content: "=";
}
/* resizer (touch device) */
.fc-time-grid-event.fc-selected .fc-resizer {
/* 10x10 dot */
border-radius: 5px;
border-width: 1px;
width: 8px;
height: 8px;
border-style: solid;
border-color: inherit;
background: #fff;
/* horizontally center */
left: 50%;
margin-left: -5px;
/* center on the bottom edge */
bottom: -5px;
}
/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-now-indicator-line {
border-top-width: 1px;
left: 0;
right: 0;
}
/* arrow on axis */
.fc-time-grid .fc-now-indicator-arrow {
margin-top: -5px;
/* vertically center on top coordinate */
}
.fc-ltr .fc-time-grid .fc-now-indicator-arrow {
left: 0;
/* triangle pointing right... */
border-width: 5px 0 5px 6px;
border-top-color: transparent;
border-bottom-color: transparent;
}
.fc-rtl .fc-time-grid .fc-now-indicator-arrow {
right: 0;
/* triangle pointing left... */
border-width: 5px 6px 5px 0;
border-top-color: transparent;
border-bottom-color: transparent;
}
html {
font-size: 18px;
}
body {
margin: 0;
color: white;
font-family: "Rubik", sans-serif;
background-color: #1D2433;
}
body #main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 230px;
overflow: auto;
}
body input, body textarea {
font-family: "Rubik", sans-serif;
}
.text-muted {
color: #9ba0ae;
}
.text-primary {
color: #3289ff;
}
.text-success {
color: #3c763d;
}
.text-info {
color: #31708f;
}
.text-warning {
color: #ff8d00;
}
.text-danger {
color: #f2303f;
}
.text-light {
color: #9ba0ae;
font-weight: 310;
}
h1, h2, h3, h4 {
font-weight: 400;
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.4rem;
}
h4 {
font-size: 1.2rem;
}
.inline {
display: inline;
}
#selectYearAndMonthForm .selectize-control {
float: left;
width: 45%;
margin-left: 3.3333%;
}
/* ==========================================================================
* Basic style settings
* ========================================================================== */
* {
box-sizing: border-box;
}
/* * Set up the body
* *
* * 1. This is the base for al rem units
* * 2. Makes sue that some fonts are better rendered
* * #. Set font to lining figures
* */
html {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "lnum";
}
/**
* * 1.Default display for images is block to lose the extra margin below the image
* * 2. Remove border / especially on older browsers
* */
img, svg {
display: block;
border: none;
}
/**
* * Add translation to prevent recoloring from autocomplete
* */
input ::-moz-placeholder, textarea ::-moz-placeholder {
-moz-transition: all 9999s linear 9999s;
transition: all 9999s linear 9999s;
}
input ::placeholder, textarea ::placeholder {
transition: all 9999s linear 9999s;
}
/* * Remove default margin around figure
* */
figure {
margin: 0;
}
@keyframes shake1 {
0% {
transform: translate3d(0.5px, 0.25px, 0);
}
10% {
transform: translate3d(-0.25px, -0.5px, 0);
}
20% {
transform: translate3d(-0.75px, 0px, 0);
}
30% {
transform: translate3d(0px, 0.5px, 0);
}
40% {
transform: translate3d(0.25px, -0.25px, 0);
}
50% {
transform: translate3d(-0.25px, 0.5px, 0);
}
60% {
transform: translate3d(-0.75px, 0.25px, 0);
}
70% {
transform: translate3d(0.5px, 0.25px, 0);
}
80% {
transform: translate3d(-0.25px, -0.25px, 0);
}
90% {
transform: translate3d(0.5px, 0.5px, 0);
}
100% {
transform: translate3d(0.25px, -0.5px, 0);
}
}
@keyframes shake2 {
0% {
transform: translate3d(0.25px, -0.5px, 0);
}
10% {
transform: translate3d(0.5px, 0.5px, 0);
}
20% {
transform: translate3d(-0.25px, -0.25px, 0);
}
30% {
transform: translate3d(0.5px, 0.25px, 0);
}
40% {
transform: translate3d(-0.75px, 0.25px, 0);
}
50% {
transform: translate3d(-0.25px, 0.5px, 0);
}
60% {
transform: translate3d(0.25px, -0.25px, 0);
}
70% {
transform: translate3d(0px, 0.5px, 0);
}
80% {
transform: translate3d(-0.75px, 0px, 0);
}
90% {
transform: translate3d(-0.25px, -0.5px, 0);
}
100% {
transform: translate3d(0.5px, 0.25px, 0);
}
}
/* ==========================================================================
* Functions used in grid calculation
* ========================================================================== */
/**
* * Define amount of grid columns
* */
/**
* * This is where the magic happens
* * Return percentage based on amount of columns
* * Use parent column size to adjust the origin
* */
/**
* * Default function for columns
* * Return as percentage
* */
/**
* * Return as viewport width
* */
/* ==========================================================================
* Login KMS
* ========================================================================== */
.login {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #1D2433;
background-image: url("/img/kms/background.svg");
background-size: cover;
background-position: center;
}
.login .placeholder {
width: 80%;
max-width: 400px;
padding: 20px 40px;
background-color: white;
color: #2B2F83;
/* Alert messages
* ========================================================================== */
}
.login .placeholder .header {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.login .placeholder .header.small {
margin-bottom: 20px;
}
.login .placeholder .header img {
display: block;
width: 45px;
height: 45px;
margin-left: auto;
}
.login .placeholder .header h2 {
width: calc(100% - 45px);
margin: 0;
color: #2B2F83;
font-size: 1.2rem;
font-weight: bold;
}
.login .placeholder label {
font-size: 0.8rem;
}
.login .placeholder .warning {
padding: 7px 12px;
margin: 8px 0;
border: 1px solid #2B2F83;
font-size: 0.7rem;
color: #2B2F83;
}
.login .placeholder input {
width: 100%;
height: 40px;
margin: 0 0 8px;
border-radius: 4px;
font-size: 0.7rem;
color: #2B2F83;
text-indent: 10px;
border: #d8dae2 solid 1px;
transition: box-shadow 0.4s;
}
.login .placeholder input:focus {
outline: 0;
box-shadow: rgba(0, 0, 255, 0.75) 0 0 5px 0;
}
.login .placeholder input[type=submit] {
background-color: #2B2F83;
border: none;
color: white;
text-align: center;
cursor: pointer;
transition: background-color 0.4s;
}
.login .placeholder input[type=submit]:hover {
background-color: #383da9;
}
.login .placeholder a {
color: #2B2F83;
font-size: 0.7rem;
font-weight: semibold();
}
.login .placeholder .login__submit {
margin-top: 20px;
}
/* ==========================================================================
* Entities navigation KMS
* ========================================================================== */
#entities {
position: absolute;
top: 0;
left: 0;
width: 380px;
height: auto;
min-height: 100vh;
background-color: white;
color: #3289ff;
/* Header block
* ========================================================================== */
/* Search block
* ========================================================================== */
/* Add new item block
* ========================================================================== */
/* Change order block
* ========================================================================== */
/* Entities list
* ==========================================================================
* Entities header: 141px
* Search: 50px
* New item: 50px
* Order: 50px
* */
}
#entities .entities-header {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px 0;
border-bottom: 1px solid #d8dae2;
text-align: center;
height: 101px;
}
#entities .entities-header h1 {
font-size: 1.2rem;
color: #2B2F83;
font-weight: medium();
margin: 0;
}
#entities .entities-header p {
font-size: 0.7rem;
line-height: 1.2;
color: #70778c;
opacity: 0.5;
margin: 0;
font-weight: lightest();
}
#entities .entities-content > p, #entities .entities-content h2 {
padding: 0 20px;
}
#entities .entities-content > p {
font-size: 0.9rem;
}
#entities .search .search-field {
height: 45px;
border-bottom: 1px solid #d8dae2;
font-size: 0.9rem;
cursor: text;
background-color: #f4f5f7;
background-image: url("/img/kms/icons/icon_search.svg");
background-repeat: no-repeat;
background-position: 7px center;
}
#entities .search .search-field input {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
border: none;
font-size: 0.7rem;
line-height: 2.2;
text-indent: 60px;
background-color: transparent;
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
#entities .search .search-field input:focus {
border-color: #3c8bf5;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 12px rgba(120, 169, 236, 0.3);
}
#entities .search .search-result-text {
display: none;
height: 50px;
width: 100%;
border-bottom: 2px solid #3289ff;
transition: background-color 0.2s, color 0.2s;
margin: 0;
padding: 0 15px 0 60px;
color: #70778c;
font-size: 0.7rem;
line-height: 1;
}
#entities .search .search-result-text span {
display: inline-block;
margin-left: 5px;
color: #3289ff;
}
#entities .search .entities-list {
display: none;
height: calc(100vh - 235px);
}
#entities .search .entities-list ul .entities-list-item {
display: none;
}
#entities .search .entities-list ul .entities-list-item.active {
display: block;
}
#entities .search .entities-list ul .entities-list-item.active > a {
background-color: transparent;
color: #70778c;
}
#entities .search .entities-list ul .entities-list-item.active > a .icon {
background-color: rgba(216, 218, 226, 0.6);
}
#entities .search .entities-list ul .entities-list-item.active > a p {
margin: 0;
width: calc(100% - 65px);
}
#entities .search .entities-list ul .entities-list-item.active > a p:before {
content: attr(data-breadcrumb);
display: block;
color: #70778c;
font-size: 0.6rem;
opacity: 0.5;
}
#entities .search.active .entities-list {
display: block;
}
#entities .search.active .search-result-text {
display: flex;
justify-content: flex-start;
align-items: center;
}
#entities .new-item {
display: flex;
justify-content: flex-start;
align-items: center;
height: 45px;
width: 100%;
background-color: transparent;
border-bottom: 2px solid #3289ff;
transition: background-color 0.2s, color 0.2s;
color: #3289ff;
font-size: 0.7rem;
line-height: 1;
text-decoration: none;
}
#entities .new-item span {
display: inline-block;
width: 30px;
height: 30px;
margin: 0 15px 0 15px;
border: 1px solid #3289ff;
border-radius: 100%;
background-color: white;
}
#entities .new-item span:before {
content: "";
background-image: url("/img/kms/icons/icon_plus.svg");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
width: 30px;
height: 30px;
}
#entities .new-item:hover {
background-color: #3289ff;
color: white;
}
#entities .entities-order {
position: relative;
width: 100%;
height: 50px;
border-top: solid 1px #e0e6ec;
}
#entities .entities-order .sortable-button {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-decoration: none;
color: #3289ff;
font-size: 0.7rem;
text-align: center;
cursor: pointer;
}
#entities .entities-order .sortable-button:before {
content: "";
display: inline-block;
width: 19px;
height: 23px;
background-image: url("/img/kms/icons/icon_reorder.svg");
background-repeat: no-repeat;
vertical-align: middle;
margin-right: 10px;
}
#entities .entities-order .sortable-button.save-order {
position: absolute;
left: 0;
top: 0;
opacity: 0;
pointer-events: none;
z-index: -1;
background-color: #3289ff;
color: white;
}
#entities .entities-order .sortable-button.save-order.show {
z-index: 2;
opacity: 1;
pointer-events: all;
}
#entities .entities-order .sortable-button.save-order:before {
background-image: url("/img/kms/icons/icon_save_order.svg");
}
#entities #main-entities-list.hide {
display: none;
}
#entities .entities-list {
position: relative;
height: calc(100vh - 190px);
overflow: auto;
overflow-x: hidden;
}
#entities .entities-list .js-sortable {
height: calc(100% - 100px);
}
#entities .entities-list ul {
margin: 0;
padding: 0;
list-style: none;
}
#entities .entities-list ul.ui-sortable, #entities .entities-list ul.sortable {
height: 100%;
overflow: auto;
overflow-x: hidden;
}
#entities .entities-list ul ul {
padding-left: 20px;
min-height: 10px;
}
#entities .entities-list ul .sortable-placeholder {
height: 50px;
width: 100%;
background-color: #f7f7f7;
border: 1px dashed rgba(50, 137, 255, 0.4);
}
#entities .entities-list ul .entities-list-item {
background-color: white;
transition: background-color 0.3s;
}
#entities .entities-list ul .entities-list-item:nth-child(even) {
background-color: #f7f7f7;
}
#entities .entities-list ul .entities-list-item > a, #entities .entities-list ul .entities-list-item .tree-node-content {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
width: 100%;
text-decoration: none;
font-size: 0.7rem;
line-height: 1.1;
color: #70778c;
cursor: pointer;
font-weight: lightest();
}
#entities .entities-list ul .entities-list-item > a sub, #entities .entities-list ul .entities-list-item > a small, #entities .entities-list ul .entities-list-item .tree-node-content sub, #entities .entities-list ul .entities-list-item .tree-node-content small {
opacity: 0.6;
}
#entities .entities-list ul .entities-list-item > a:hover, #entities .entities-list ul .entities-list-item .tree-node-content:hover {
background-color: #eceef3;
color: #2B2F83;
}
#entities .entities-list ul .entities-list-item.active > a, #entities .entities-list ul .entities-list-item.active > .tree-node-content {
background-color: #3289ff;
color: white;
}
#entities .entities-list ul .entities-list-item.active > a .icon, #entities .entities-list ul .entities-list-item.active > .tree-node-content .icon {
background-color: #d8dae2;
}
#entities .entities-list ul .entities-list-item .color-status {
display: inline-block;
height: 100%;
width: 5px;
background-color: transparent;
}
#entities .entities-list ul .entities-list-item .color-status[data-status-type="0"] {
background-color: #d8dae2;
}
#entities .entities-list ul .entities-list-item .color-status[data-status-type="1"] {
background-color: #78dc84;
}
#entities .entities-list ul .entities-list-item .color-status[data-status-type="2"] {
background-color: #f2303f;
}
#entities .entities-list ul .entities-list-item .color-status[data-status-type="3"] {
background-color: #2B2F83;
}
#entities .entities-list ul .entities-list-item .color-status[data-status-type="4"] {
background-color: #ff8d00;
}
#entities .entities-list ul .entities-list-item .color-status[data-status-type="5"] {
background-color: #3c763d;
}
#entities .entities-list ul .entities-list-item p {
margin: 0;
width: calc(100% - 60px);
}
#entities .entities-list ul .entities-list-item .icon {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin: 0 15px;
border-radius: 100%;
background-color: rgba(216, 218, 226, 0.6);
background-position: center;
background-size: cover;
overflow: hidden;
}
#entities .entities-list ul .entities-list-item .icon img {
width: 30px;
height: 30px;
}
#entities .entities-list ul .entities-list-item .icon span {
font-size: 0.8rem;
color: #70778c;
position: relative;
top: 1px;
}
#entities .entities-list ul .entities-list-item .triangle {
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.03);
width: 40px;
height: 100%;
cursor: pointer;
}
#entities .entities-list ul .entities-list-item .triangle:before {
content: "";
display: inline-block;
width: 10px;
height: 5px;
background-image: url("/img/kms/icons/icon_triangle_down.svg");
background-position: center center;
background-repeat: no-repeat;
transition: transform 0.4s;
}
#entities .entities-list ul .entities-list-item[collapsed=true] .triangle:before {
transform: rotate(180deg);
}
#entities .entities-list .sorting .entities-list-item {
position: relative;
cursor: move;
}
#entities .entities-list .sorting .entities-list-item a {
cursor: move;
animation: shake1 1.5s infinite alternate;
}
#entities .entities-list .sorting .entities-list-item:nth-child(odd) a {
animation: shake2 1.5s infinite alternate;
}
#entities .entities-list--reservations ul .entities-list-item > a {
height: auto;
padding: 12px 0 8px;
line-height: 0.8;
}
#entities .entities-list--reservations ul .entities-list-item > a sub {
display: inline-block;
line-height: 1;
}
#entities .entities-list--reservations ul .entities-list-item > a sub:first-of-type {
margin-top: 6px;
}
/* Drag and drop styling
* ========================================================================== */
/* ==========================================================================
* Entity block KMS
* ========================================================================== */
#entity {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 380px;
border-left: 1px solid #d8dae2;
/* Header + Save and Delete buttons
* ========================================================================== */
/* (Language) Tabs
* ========================================================================== */
/* Container for attributes
* ========================================================================== */
}
#entity .entity-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 140px;
position: relative;
padding-left: 40px;
padding-right: 20px;
box-shadow: inset 0px -20px 20px -20px rgba(0, 0, 0, 0.5);
}
#entity .entity-header .entity-header-attributes {
width: calc(100% - 200px);
display: flex;
justify-content: flex-start;
align-items: center;
}
#entity .entity-header .entity-header-attributes .entity-thumbnail {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
border: solid 1px white;
border-radius: 10px;
background-color: #d8dae2;
line-height: 100px;
text-align: center;
font-size: 1.6rem;
font-weight: bold;
color: #70778c;
}
#entity .entity-header .entity-header-attributes .entity-thumbnail img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
#entity .entity-header .entity-header-attributes .entity-thumbnail:after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%);
}
#entity .entity-header .entity-header-attributes h2 {
display: block;
width: calc(100% - 100px);
padding-left: 40px;
font-size: 1.2rem;
color: white;
}
#entity .entity-header .entity-buttons {
width: 200px;
}
#entity .entity-tabs {
width: 100%;
height: 50px;
padding-left: 40px;
background-color: #262f43;
}
#entity .entity-tabs ul {
display: flex;
justify-content: flex-start;
align-items: flex-end;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
}
#entity .entity-tabs ul li {
position: relative;
background-color: #394664;
margin: 0 5px;
height: 35px;
line-height: 40px;
border-radius: 4px 4px 0 0;
transition: background-color 0.3s, box-shadow 0.3s;
white-space: nowrap;
}
#entity .entity-tabs ul li a {
position: relative;
z-index: 1;
display: block;
height: 100%;
width: 100%;
color: white;
font-size: 0.7rem;
text-decoration: none;
text-transform: uppercase;
padding: 0 20px;
}
#entity .entity-tabs ul li:hover {
background-color: #2f3b54;
}
#entity .entity-tabs ul li.active {
background-color: #f9f9f9;
}
#entity .entity-tabs ul li.active a {
color: #3289ff;
}
#entity .entity-tabs ul li.error:before {
content: "";
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 3px 3px 0 0;
border: 3px solid #FF323C;
border-bottom: none;
}
#entity .entity-attributes {
position: absolute;
top: 190px;
bottom: 0;
width: 100%;
padding-top: 12px;
overflow: auto;
background-color: #f9f9f9;
}
#entity .entity-attributes .contentBlockAddButton {
text-align: center;
width: 33%;
display: inline-block;
cursor: pointer;
}
#entity .entity-attributes .contentBlockAddButton img {
display: block;
margin: 0 auto;
pointer-events: none;
}
#entity .entity-attributes .contentBlockAddButton label {
position: static;
display: inline;
margin-left: auto;
font-size: 0.8rem;
color: #9ba0ae;
text-transform: uppercase;
font-weight: 300;
white-space: nowrap;
pointer-events: none;
}
#entity .tab-content, #entity .sub-tab-content {
display: none;
}
#entity .tab-content.active, #entity .sub-tab-content.active {
display: block;
}
#entity.full-width {
left: 0;
color: #9ba0ae;
}
.fieldGroupCollection ul {
list-style: none;
margin: 0;
padding: 0;
}
.fieldGroupCollection ul li {
list-style: none;
position: relative;
padding-left: 25px;
}
.fieldGroupCollection ul.fieldGroupItems li:before {
content: "";
display: inline-block;
height: 25px;
width: 35px;
background-image: url("/img/kms/icons/drag.png");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
left: 20px;
top: 17px;
}
button.save,
input[type=submit].save,
.trash {
display: inline-block;
vertical-align: top;
height: 40px;
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button.save:focus,
input[type=submit].save:focus,
.trash:focus {
outline: none;
}
button.save,
input[type=submit].save {
width: 150px;
background-color: #3289ff;
color: white;
font-size: 0.7rem;
}
button.save.disabled,
input[type=submit].save.disabled {
pointer-events: none;
background-color: #2f3b54;
color: rgba(255, 255, 255, 0.3);
}
button.save:hover,
input[type=submit].save:hover {
background-color: #006cfe;
}
.trash {
width: 40px;
background-color: #FF323C;
background-image: url("/img/kms/icons/icon_trash.svg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 16px 16px;
}
.trash:hover {
background-color: #e5000b;
}
/* ==========================================================================
* Sidebar KMS
* ========================================================================== */
#sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
padding-bottom: 50px;
width: 230px;
background-color: #1D2433;
/* Account block
* ========================================================================== */
/* Navigation
* ========================================================================== */
/* Log out button
* ========================================================================== */
}
#sidebar .logo-placeholder {
height: 100px;
width: 100%;
}
#sidebar .logo-placeholder a {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
padding: 0 20px 0 20px;
text-decoration: none;
}
#sidebar .logo-placeholder a img {
width: 40px;
height: 40px;
}
#sidebar .logo-placeholder a p {
color: white;
font-size: 0.75rem;
line-height: 1.2;
}
#sidebar .logo-placeholder a p small {
opacity: 0.5;
}
#sidebar .account-block {
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.2);
border-left: none;
border-right: none;
padding: 10px 25px;
height: 90px;
}
#sidebar .account-block figure {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin: 0;
background-color: rgba(50, 137, 255, 0.3);
border-radius: 100%;
}
#sidebar .account-block figure:empty:after {
content: "";
background-image: url("/img/kms/icons/user.svg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 30px;
height: 30px;
opacity: 0.4;
}
#sidebar .account-block figure span {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#sidebar .account-block .text {
width: calc(100% - 40px);
}
#sidebar .account-block .text h3 {
color: white;
font-size: 0.85rem;
margin: 0;
}
#sidebar .navigation {
overflow: auto;
position: fixed;
height: calc(100vh - 100px - 90px - 50px);
width: 230px;
}
#sidebar .navigation ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
#sidebar .navigation ul li {
position: relative;
display: block;
width: 100%;
font-size: 0.7rem;
border-bottom: solid 1px rgba(255, 255, 255, 0.2);
background-color: transparent;
transition: background-color 0.4s;
}
#sidebar .navigation ul li .drop-down {
position: absolute;
top: 22px;
right: 20px;
display: block;
border-style: solid;
border-width: 4px 5px 0 5px;
border-color: white transparent transparent transparent;
transform: rotate(0deg);
opacity: 0.5;
}
#sidebar .navigation ul li a, #sidebar .navigation ul li span {
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
width: 100%;
padding: 14px 25px;
color: white;
text-decoration: none;
cursor: pointer;
}
#sidebar .navigation ul li:hover > span, #sidebar .navigation ul li:hover > a {
background-color: rgba(43, 47, 131, 0.4);
}
#sidebar .navigation ul li.active > .drop-down {
transform: rotate(180deg);
}
#sidebar .navigation ul li.active > span, #sidebar .navigation ul li.active > a {
background-color: #3289ff;
}
#sidebar .navigation ul li.active > ul {
display: block;
}
#sidebar .navigation ul li.active.has-sub-items > span, #sidebar .navigation ul li.active.has-sub-items > a {
background-color: rgba(43, 47, 131, 0.9);
}
#sidebar .navigation ul li > ul {
display: none;
position: relative;
float: none;
box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.7);
background-color: #161b26;
border: none;
transition: all 1s;
overflow: hidden;
}
#sidebar .navigation ul li > ul li a, #sidebar .navigation ul li > ul li span {
padding-left: 40px;
}
#sidebar .is-separator {
height: 49px;
}
#sidebar .log-out {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 25px;
background-color: rgba(43, 47, 131, 0.4);
border: none;
border-top: solid 1px rgba(255, 255, 255, 0.2);
color: white;
text-decoration: none;
font-size: 0.7rem;
transition: background-color 0.4s;
}
#sidebar .log-out:hover {
background-color: rgba(43, 47, 131, 0.6);
}
#confirmBox {
position: fixed;
z-index: -100;
pointer-events: none;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#confirmBox.show {
z-index: 100;
pointer-events: all;
display: flex;
justify-content: center;
align-items: center;
}
#confirmBox .shader {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#confirmBox .modal {
display: block;
border-radius: 5px 5px 0 0;
overflow: hidden;
width: 100%;
max-width: 500px;
background-color: white;
z-index: 2;
}
#confirmBox .modal .header {
padding: 12px 40px;
background-color: #262f43;
}
#confirmBox .modal .header h4 {
font-size: 0.8rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
font-weight: 100;
margin: 0;
text-transform: uppercase;
text-align: center;
}
#confirmBox .modal .body {
padding: 25px 40px 40px;
}
#confirmBox .modal .body p {
font-size: 0.7rem;
line-height: 1.2;
color: #9ba0ae;
margin: 0;
text-align: center;
}
#confirmBox .modal .body .buttons, #confirmBox .modal .body .navigatableElements {
display: flex;
justify-content: center;
align-items: center;
margin-top: 25px;
}
#confirmBox .modal .body .buttons button, #confirmBox .modal .body .navigatableElements button {
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
width: 120px;
height: 40px;
border: none;
border-radius: 3px;
color: white;
font-size: 0.7rem;
line-height: 1.2;
cursor: pointer;
}
#confirmBox .modal .body .buttons button + button, #confirmBox .modal .body .navigatableElements button + button {
margin-left: 10px;
}
#confirmBox .modal .body .buttons button.confirm, #confirmBox .modal .body .navigatableElements button.confirm {
background-color: #FF323C;
}
#confirmBox .modal .body .buttons button.confirm:hover, #confirmBox .modal .body .navigatableElements button.confirm:hover {
background-color: #ff0c18;
}
#confirmBox .modal .body .buttons button.cancel, #confirmBox .modal .body .navigatableElements button.cancel {
color: #1D2433;
background-color: #eceef3;
}
#confirmBox .modal .body .buttons button.cancel:hover, #confirmBox .modal .body .navigatableElements button.cancel:hover {
background-color: #d5d9e4;
}
#confirmButtons {
padding: 15px 0 0;
text-align: center;
}
#confirmButtons .button {
display: inline-block;
margin-right: 15px;
min-width: 100px;
border-radius: 3px;
}
#confirmButtons .button:last-child {
margin-right: 0;
}
.uk-tooltip {
display: none;
position: fixed;
z-index: 1030;
box-sizing: border-box;
max-width: 200px;
padding: 5px 8px;
background: #333333;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 20px;
text-align: center;
margin-left: -5px;
}
.uk-tooltip:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 5px dashed #333333;
}
.uk-tooltip-top:after,
.uk-tooltip-top-left:after,
.uk-tooltip-top-right:after {
bottom: -5px;
border-top-style: solid;
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: #333333;
}
.uk-tooltip-bottom:after,
.uk-tooltip-bottom-left:after,
.uk-tooltip-bottom-right:after {
top: -5px;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: #333333;
}
.uk-tooltip-top:after,
.uk-tooltip-bottom:after {
left: 50%;
margin-left: -5px;
}
.uk-tooltip-top-left:after,
.uk-tooltip-bottom-left:after {
left: 17px;
}
.uk-tooltip-top-right:after,
.uk-tooltip-bottom-right:after {
right: 17px;
}
.uk-tooltip-left:after {
right: -5px;
top: 50%;
margin-top: -5px;
border-left-style: solid;
border-right: none;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: #333333;
}
.uk-tooltip-right:after {
left: -5px;
top: 50%;
margin-top: -5px;
border-right-style: solid;
border-left: none;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: #333333;
}
#flash-message, .flash-message {
display: flex;
justify-content: center;
align-items: center;
min-width: 200px;
min-height: 40px;
margin: 0;
padding: 10px 15px;
background-color: rgba(29, 36, 51, 0.8);
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
font-size: 0.7rem;
line-height: 1.2;
color: #ffffff;
pointer-events: none;
}
#flash-message[data-type="1"], .flash-message[data-type="1"] {
border-color: #f2303f;
}
#flash-message[data-type="2"], .flash-message[data-type="2"] {
border-color: #78dc84;
}
#flash-message[data-type="3"], .flash-message[data-type="3"] {
border-color: #3289ff;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
#flash-message {
position: fixed;
top: 50px;
right: 225px;
z-index: 1000;
animation-duration: 1s;
animation-name: fadeInDown;
}
.error-block {
margin-bottom: 50px;
margin-left: 50px;
width: 25%;
margin-top: -150px;
border: 1px solid darkred;
margin-bottom: 50px;
margin-left: 25px;
margin-top: 20px;
padding: 25px;
width: 90%;
background-color: rgba(139, 0, 0, 0.2);
}
.error-block h2 {
margin: 0 0 10px 0;
}
.error-block h3 {
margin: 0;
cursor: pointer;
}
.error-block h3:hover {
color: darkred;
background-color: rgba(139, 0, 0, 0.4);
}
.c-sidebar-navigation {
position: fixed;
overflow-x: hidden;
height: calc(100vh - 100px - 90px - 50px);
width: 230px;
}
.c-sidebar-navigation__list {
margin: 0;
padding: 0;
list-style: none;
}
.c-sidebar-navigation__list--sub {
display: none;
box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.25);
}
.c-sidebar-navigation__list--sub.is-open {
display: block;
}
.c-sidebar-navigation__separator {
height: 49px;
}
.c-sidebar-navigation__item {
position: relative;
font-size: 0.7rem;
}
.c-sidebar-navigation__item + .c-sidebar-navigation__item:before {
position: absolute;
left: -50vw;
top: 0;
content: "";
display: block;
width: 200vw;
height: 1px;
background-color: rgba(255, 255, 255, 0.2);
}
.c-sidebar-navigation__link {
text-decoration: none;
}
.c-sidebar-navigation__list-name {
cursor: pointer;
}
.c-sidebar-navigation__name {
position: relative;
z-index: 1;
padding: 14px 25px;
color: white;
}
.c-sidebar-navigation__name:before {
content: "";
display: block;
position: absolute;
z-index: -2;
left: -50vw;
top: 0;
width: 200vw;
height: 100%;
background-color: transparent;
transition: background-color 0.4s;
}
.c-sidebar-navigation__item:hover .c-sidebar-navigation__name:hover {
background-color: rgba(43, 47, 131, 0.4);
}
.c-sidebar-navigation__item.is-active > .c-sidebar-navigation__link .c-sidebar-navigation__name:before {
background-color: #3289ff;
}
.c-sidebar-navigation__list--sub .c-sidebar-navigation__name {
padding-left: 40px;
}
.c-sidebar-navigation__name .c-sidebar-navigation__list--sub .c-sidebar-navigation__list--sub {
padding-left: 55px;
}
.c-sidebar-navigation__drop-down {
position: absolute;
top: 22px;
right: 20px;
border-style: solid;
border-width: 4px 5px 0 5px;
border-color: white transparent transparent transparent;
transform: rotate(0deg);
opacity: 0.5;
}
.c-reservation-append-item__overlay {
position: absolute;
z-index: -5;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.c-reservation-append-item__overlay.is-visible {
z-index: 2;
}
.c-reservation-append-item__shader {
position: absolute;
z-index: 1;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.3s;
}
.is-visible .c-reservation-append-item__shader {
opacity: 1;
}
.c-reservation-append-item {
position: relative;
z-index: 2;
width: calc(100% - 40px);
max-width: 450px;
margin: 20px 0;
background-color: white;
border-radius: 10px 10px 8px 8px;
transform: translate3d(0, 30px, 0);
transition: transform 0.3s;
}
.is-visible .c-reservation-append-item {
transform: translate3d(0, 0, 0);
}
.c-reservation-append-item__title {
color: white;
padding: 8px 12px;
margin: 0 0 5px;
border-radius: 8px 8px 0 0;
background-color: #262f43;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
}
.c-reservation-append-item__content {
padding: 0 20px 20px;
}
.c-reservation-append-item__row + .c-reservation-append-item__row {
margin-top: 15px;
}
.c-reservation-append-item__row label,
.c-reservation-append-item__row p.label {
margin: 0;
font-size: 0.8rem;
font-weight: bold;
display: block;
color: #1D2433;
}
.c-reservation-append-item__row .c-simple-select {
border-color: #d8dae2;
}
.c-reservation-append-item__row .c-simple-select__wrapper {
margin-top: 5px;
}
.c-reservation-append-item__textarea,
.c-reservation-append-item__input {
display: block;
margin-top: 5px;
padding: 8px;
border: 1px solid #d8dae2;
width: 100%;
border-radius: 4px;
color: #32343a;
font-size: 0.7rem;
}
.c-reservation-append-item__textarea {
height: 100px;
resize: vertical;
max-height: 340px;
}
.c-reservation-append-item__text {
margin: 10px 0;
color: #9ba0ae;
font-size: 0.7rem;
}
.c-reservation-append-item__text-intro {
margin: 20px 0;
}
.c-reservation-append-item__submit {
border-radius: 15px;
padding: 12px 34px;
background-color: #3289ff;
}
.c-reservation-append-item__submit:hover {
background-color: #006cfe;
}
.c-reservation-append-item__cancel {
padding: 12px 12px;
background-color: #f2303f;
}
.c-reservation-append-item__cancel:hover {
background-color: #f5606c;
}
.c-reservation-append-item__buttons {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.c-reservation-append-item__buttons button {
border: none;
border-radius: 4px;
color: white;
font-size: 0.8rem;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: background-color 0.3s;
}
.c-reservation-append-item__add-button {
display: inline-flex;
align-items: center;
margin-top: 20px;
padding: 6px 10px;
border: none;
border-radius: 15px;
background-color: #3289ff;
opacity: 1;
cursor: pointer;
transition: opacity 0.2s;
color: white;
font-size: 0.7rem;
line-height: 1.2;
font-weight: 600;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c-reservation-append-item__add-button:hover {
opacity: 0.8;
}
.c-reservation-append-item__add-button:focus {
outline: none;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}
.c-reservation-append-item__add-button-icon {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
line-height: 1;
}
.c-send-reservation-buttons {
display: flex;
justify-content: space-between;
max-width: 500px;
}
.c-send-reservation-buttons + .c-send-reservation-buttons {
margin-top: 30px;
}
.c-send-reservation-buttons__item {
width: 47.5%;
}
.c-send-reservation-buttons__label {
display: block;
margin: 0 0 5px;
font-size: 0.7rem;
line-height: 1.2;
color: #9ba0ae;
text-transform: uppercase;
font-weight: 600;
}
.c-send-reservation-buttons__button {
display: inline-block;
background-color: #1D2433;
border: none;
margin-top: 10px;
padding: 4px 20px;
border-radius: 4px;
color: white;
font-size: 0.75rem;
cursor: pointer;
text-decoration: none;
transition: background 0.3s;
}
.c-send-reservation-buttons__button:hover {
background-color: #2f3b54;
}
.c-send-reservation-buttons__marker {
display: inline-block;
min-width: 163px;
text-align: center;
margin-top: 10px;
padding: 8px;
border-radius: 4px;
font-size: 0.6rem;
line-height: 1.2;
color: #9ba0ae;
background-color: rgba(155, 160, 174, 0.2);
text-transform: uppercase;
font-weight: 600;
}
.c-send-reservation-buttons__marker--positive {
color: #70778c;
background-color: rgba(120, 220, 132, 0.6);
}
.c-send-reservation-buttons__warning {
color: #3289ff;
border: 1px solid #3289ff;
border-radius: 3px;
font-size: 0.75rem;
padding: 4px 10px;
background-color: rgba(43, 47, 131, 0.05);
}
.kms-description {
margin-top: 40px;
padding: 20px;
width: calc(100% - 40px);
background-color: rgba(50, 137, 255, 0.1);
border-radius: 5px;
}
.kms-description__title {
color: #3289ff;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
margin: 0;
}
.kms-description__text {
margin: 0 0 20px;
font-size: 0.8rem;
line-height: 1.4;
}
.entity-attribute-wrapper.hidden {
visibility: hidden;
height: 0;
}
.entity-attribute-wrapper.hidden .entity-attribute {
margin: 0;
padding: 0;
}
.entity-attribute-wrapper:last-of-type {
padding-bottom: 60px;
}
.entity-attribute-wrapper.has-error + .entity-attribute-wrapper.has-error .entity-attribute.error {
border-top-color: transparent;
}
.entity-attribute {
padding: 10px 0 14px;
position: relative;
font-size: 1rem;
box-sizing: border-box;
border: 1px solid transparent;
border-left: none;
border-right: none;
}
.entity-attribute label {
display: block;
width: 250px;
padding-left: 45px;
font-size: 0.7rem;
color: #9ba0ae;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.entity-attribute-wrapper.has-error .entity-attribute {
background-color: rgba(242, 48, 63, 0.05);
border-color: rgba(242, 48, 63, 0.5);
}
.entity-attribute-wrapper.has-error .entity-attribute label {
color: #f2303f;
}
.entity-attribute.hidden {
display: none;
}
.entity-attribute.is-disabled {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
.entity-attribute .content {
position: relative;
padding-left: 205px;
padding-right: 15px;
line-height: 30px;
padding-top: 15px;
padding-bottom: 15px;
background-color: transparent;
border: 0;
display: block;
color: #5c5f65;
box-sizing: border-box;
}
.entity-attribute .input-read-only {
margin-top: 10px;
padding-left: 45px;
font-size: 0.7rem;
color: #32343a;
opacity: 0.5;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: not-allowed;
}
.entity-attribute input {
width: 100%;
min-height: 40px;
background-color: white;
text-indent: 10px;
font-size: 0.7rem;
margin-left: 45px;
border: 0;
z-index: 99999;
display: block;
color: #32343a;
box-sizing: border-box;
transition: border-color ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
}
.entity-attribute input[type=checkbox] {
margin-left: 0;
width: auto;
}
.entity-attribute .explanation {
display: block;
padding: 5px 0 0 45px;
color: #9ba0ae;
font-size: 0.7rem;
line-height: 1.2;
}
.c-component {
position: relative;
z-index: 2;
background-color: white;
margin-bottom: 60px;
border-radius: 5px;
}
.c-component.c-component--content-slider {
padding-bottom: 0;
}
.c-component:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
opacity: 1;
transition: opacity 0.4s;
}
.c-component .attributes {
background-color: #f9f9f9;
border-radius: 5px;
}
.c-component .attributes .entity-attribute {
margin-top: 0;
padding-top: 24px;
}
.c-component .attributes .entity-attribute:last-child {
padding-bottom: 24px;
}
.c-component .entity-attribute-separator {
margin: 0;
background-color: transparent;
box-shadow: none;
}
.c-component__header {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid #e0e6ec;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c-component__icon {
display: flex;
justify-content: center;
align-items: center;
width: 62px;
height: 62px;
padding: 2px 10px;
border-right: 1px solid #e0e6ec;
}
.c-component__icon img {
width: 100%;
}
.c-component__order-buttons {
padding: 2px 10px;
color: #a0a9b7;
height: 62px;
border-right: 1px solid #e0e6ec;
}
.c-component__order-button {
cursor: pointer;
}
.c-component__title {
width: calc(100% - 62px - 33px - 35px - 15px);
padding: 5px 10px;
font-size: 14px;
line-height: 1.4;
font-weight: bold;
letter-spacing: 0.4px;
color: #a0a9b7;
}
.c-component__delete-button {
width: 35px;
height: 35px;
background-color: #FF323C;
background-image: url("/img/kms/icons/icon_trash.svg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 16px 16px;
cursor: pointer;
border-radius: 5px;
opacity: 1;
transition: opacity 0.3s;
}
.c-component__delete-button:hover {
opacity: 0.4;
}
.c-components-area {
margin-top: 24px;
padding: 45px;
background-color: #efefef;
box-shadow: inset 0px 15px 15px -15px rgba(0, 0, 0, 0.15);
}
.c-components-area.hide-super-admin-attributes .is-super-admin-only {
display: none;
}
.c-components-area__main {
width: 100%;
max-width: 1000px;
margin: auto;
}
.c-components-area__main.hide-background-options .entity-attribute.is-background-option {
display: none;
}
.c-components-area__copy {
display: flex;
justify-content: flex-end;
align-items: center;
background: white;
padding: 15px 0;
width: 100%;
max-width: 1000px;
margin: 30px auto;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
color: #666666;
border-radius: 5px;
font-size: 0.7rem;
}
.c-components-area__copy p {
margin: 0 15px;
}
.c-components-area__copy select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 20px;
-moz-padding-start: 20px;
background-color: rgba(103, 113, 122, 0.05);
background-image: url("/img/kms/svg/arrow_dark_select.svg");
background-position: 100% 50%;
background-repeat: no-repeat;
border: 1px solid #E0E1E3;
border-radius: 5px;
box-shadow: none;
font-size: 0.7rem;
margin: 0 15px;
overflow: hidden;
padding: 5px 10px;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 60px;
}
.c-components-area__copy select:focus {
box-shadow: none;
outline: none;
}
.c-components-area__copy .confirm {
display: inline-block;
cursor: pointer;
border: solid 1px #d8dae2;
border-radius: 5px;
padding: 8px 15px;
color: #666666;
margin: 0 15px;
font-size: 12px;
font-family: "Rubik", sans-serif;
}
.c-components-area__buttons {
width: 100%;
max-width: 1000px;
margin: auto;
}
.c-components-area__grid {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
.c-components-area__label {
display: block;
margin-bottom: 15px;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.4px;
color: #70778c;
font-weight: bold;
}
.c-components-area-button {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10px 15px 15px;
background: white;
border-radius: 5px;
cursor: pointer;
}
.c-components-area-button > * {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c-components-area-button:before {
content: "";
position: absolute;
left: 80px;
top: 5px;
display: block;
width: 1px;
height: calc(100% - 10px);
background-color: #d8dae2;
opacity: 0.75;
}
.c-components-area-button:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
opacity: 1;
transition: opacity 0.4s;
}
.c-components-area-button:hover:after {
opacity: 0.2;
}
.c-components-area-button__icon {
width: 50px;
}
.c-components-area-button__icon img {
width: 100%;
}
.c-components-area-button__label {
margin-top: 2px;
width: calc(100% - 80px);
font-size: 14px;
line-height: 1.4;
font-weight: bold;
letter-spacing: 0.4px;
color: #a0a9b7;
}
.c-components-area__confirmation {
border-bottom: 1px solid #e9ebec;
padding: 0 8px;
margin-right: auto;
display: none;
}
.c-components-area__confirmation.active {
display: initial;
}
.component-tab {
background-color: #f4f5f7;
padding: 30px;
overflow: hidden;
}
.component-tab__list {
display: flex;
justify-content: flex-start;
align-items: flex-end;
margin: 0;
padding: 0;
list-style: none;
}
.component-tab__list-item {
background-color: #394664;
height: 35px;
line-height: 40px;
border-radius: 4px 4px 0 0;
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s;
}
.component-tab__list-item + .component-tab__list-item {
margin-left: 5px;
}
.component-tab__list-item:hover {
background-color: #2f3b54;
}
.component-tab__list-item.active {
background-color: #ffffff;
}
.component-tab__list-item.active a.component-tab__button {
color: #3289ff;
}
.component-tab__list-item.error {
background-color: #FF323C;
}
.component-tab__list-item a.component-tab__button {
display: block;
height: 100%;
width: 100%;
color: white;
font-size: 0.7rem;
text-decoration: none;
text-transform: uppercase;
padding: 0 20px;
}
.component-tab__container {
position: relative;
}
.component-tab__content {
background-color: white;
position: absolute;
top: 0;
z-index: -1;
}
.component-tab__content.active {
position: relative;
z-index: 1;
}
.entity-attribute-currency {
box-sizing: border-box;
}
.entity-attribute-currency.error + .error {
box-shadow: inset 0 1px 1px rgba(242, 48, 63, 0.075), inset 0 0 1px rgba(224, 117, 125, 0.75);
border: 1px solid #f2303f;
border-top: 0;
}
.entity-attribute-currency input {
width: calc(100% - 45px);
max-width: 500px;
margin-left: 45px;
border: solid 1px #d8dae2;
border-radius: 5px;
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.entity-attribute-currency input:focus {
border-color: #3c8bf5;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 12px rgba(120, 169, 236, 0.3);
}
.entity-attribute-currency input::-moz-placeholder {
font-style: italic;
}
.entity-attribute-currency input::placeholder {
font-style: italic;
}
.entity-attribute-currency.error input {
background-image: url("/img/kms/icons/icon_cross_red.svg");
background-repeat: no-repeat;
background-position: right 20px center;
background-size: 10px 10px;
}
.entity-attribute-currency .explanation {
margin-bottom: 12px;
}
.entity-attribute-currency .preview {
background-color: #f0f0f0;
pointer-events: none;
}
.entity-attribute-currency .preview_explanation {
display: inline-block;
padding: 5px 0 0 45px;
color: #9ba0ae;
font-size: 0.7rem;
line-height: 1.2;
}
.entity-attribute-date-picker {
min-height: 0;
}
.entity-attribute-date-picker label {
position: relative;
}
.entity-attribute-date-picker input {
display: inline-block;
text-indent: 0;
margin-left: auto;
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.entity-attribute-date-picker input:focus {
border-color: #3c8bf5;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 12px rgba(120, 169, 236, 0.3);
}
.entity-attribute-date-picker .date-field {
position: relative;
display: inline-block;
width: 175px;
cursor: pointer;
margin-left: 45px;
}
.entity-attribute-date-picker .date-field .icon {
position: absolute;
pointer-events: none;
left: 20px;
top: 19px;
}
.entity-attribute-date-picker .date-field .icon img {
width: 20px;
max-height: 23px;
}
.entity-attribute-date-picker .date-field input {
min-height: 0;
width: 100%;
text-align: right;
padding: 23px 25px;
border: 1px solid #d8dae2;
border-radius: 4px;
cursor: pointer;
}
.entity-attribute-date-picker .date-field input:focus {
border-color: rgba(50, 137, 255, 0.75);
}
.entity-attribute-date-picker .time-field {
display: inline-block;
width: 115px;
border: 1px solid #d8dae2;
background-color: white;
border-radius: 4px;
}
.entity-attribute-date-picker .time-field.hidden {
display: none;
}
.entity-attribute-date-picker .time-field > span {
display: inline-block;
width: 10px;
color: #9ba0ae;
font-size: 0.8rem;
line-height: 1;
text-align: center;
}
.entity-attribute-date-picker .time-field .ui-spinner {
position: relative;
border: none !important;
margin: 0;
width: 45px;
}
.entity-attribute-date-picker .time-field .ui-spinner input {
-webkit-appearance: none;
width: 100%;
margin: 0;
padding: 23px 0 23px 10px;
min-height: 0;
text-align: center;
}
.entity-attribute-date-picker .time-field .ui-spinner input::-webkit-outer-spin-button, .entity-attribute-date-picker .time-field .ui-spinner input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
}
.entity-attribute-date-picker .time-field .ui-spinner .ui-spinner-button {
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 15px;
cursor: pointer;
border: none !important;
background-color: transparent;
}
.entity-attribute-date-picker .time-field .ui-spinner .ui-spinner-button .ui-icon {
position: relative;
top: 0;
left: 0;
margin-top: 0;
margin-left: 0;
width: 8px;
height: 4px;
background-image: url("/img/kms/icons/icon_triangle_down_grey.svg");
background-position: center;
background-size: contain;
transform-origin: center;
opacity: 0;
transition: opacity 0.3s;
}
.entity-attribute-date-picker .time-field .ui-spinner .ui-spinner-button.ui-spinner-up {
top: 0;
}
.entity-attribute-date-picker .time-field .ui-spinner .ui-spinner-button.ui-spinner-up .ui-icon {
transform: rotate(180deg);
}
.entity-attribute-date-picker .time-field .ui-spinner .ui-spinner-button.ui-spinner-down {
bottom: 0;
}
.entity-attribute-date-picker .time-field .ui-spinner:hover .ui-spinner-button {
background: rgba(155, 160, 174, 0.08);
}
.entity-attribute-date-picker .time-field .ui-spinner:hover .ui-spinner-button .ui-icon {
opacity: 0.4;
}
.entity-attribute-date-picker .time-field .ui-spinner:hover .ui-spinner-button:hover {
background: rgba(155, 160, 174, 0.14);
}
.entity-attribute-date-picker .time-field .ui-spinner:hover .ui-spinner-button:hover .ui-icon {
opacity: 1;
}
#ui-datepicker-div {
position: fixed;
left: -100vh;
min-width: 285px;
width: 320px;
margin-top: 5px;
padding: 15px;
border: 1px solid #d8dae2;
border-radius: 4px;
background-color: white;
box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
}
#ui-datepicker-div .ui-datepicker-header {
position: relative;
padding: 0;
margin: 0 0 10px;
border-radius: 0;
border: none;
background: none;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-header .ui-datepicker-next {
position: absolute;
top: 5px;
display: flex;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
border: none !important;
border-radius: 100%;
cursor: pointer;
background: transparent;
transition: background-color 0.3s;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev:hover, #ui-datepicker-div .ui-datepicker-header .ui-datepicker-next:hover {
background: rgba(155, 160, 174, 0.2);
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev:focus, #ui-datepicker-div .ui-datepicker-header .ui-datepicker-next:focus {
outline: 0;
box-shadow: none;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev .ui-icon, #ui-datepicker-div .ui-datepicker-header .ui-datepicker-next .ui-icon {
position: relative;
left: 0;
top: 4px;
margin-left: 0;
margin-right: 0;
width: 8px;
height: 4px;
transform-origin: center;
background-image: url("/img/kms/icons/icon_triangle_down_grey.svg");
background-size: contain;
background-position: center;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-next {
right: 2px !important;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-next .ui-icon {
transform: rotate(-90deg);
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev {
left: 2px !important;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev .ui-icon {
left: -2px;
transform: rotate(90deg);
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title {
width: 100%;
margin: 0;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none !important;
margin: 0;
padding: 10px 5px;
background-color: transparent;
font-size: 0.8rem;
line-height: 1.2;
font-weight: 400;
color: #2B2F83;
cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title select:focus {
outline: 0;
box-shadow: none;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title select.ui-datepicker-month {
direction: rtl;
width: 48%;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title select.ui-datepicker-year {
width: 42%;
}
#ui-datepicker-div table {
width: 100%;
border-spacing: 0;
margin-bottom: 0;
}
#ui-datepicker-div table thead {
background-color: rgba(224, 230, 236, 0.4);
border-radius: 4px;
}
#ui-datepicker-div table thead tr {
display: flex;
justify-content: space-between;
align-items: center;
}
#ui-datepicker-div table thead th {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
width: 36px;
height: 36px;
font-size: 0.7rem;
line-height: 1;
font-weight: 400;
color: #9ba0ae;
}
#ui-datepicker-div table tbody {
display: block;
margin-top: 5px;
}
#ui-datepicker-div table tbody tr {
display: flex;
justify-content: space-between;
align-items: center;
}
#ui-datepicker-div table tbody td {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
#ui-datepicker-div table tbody td a, #ui-datepicker-div table tbody td span {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
text-align: center;
background-color: transparent;
font-size: 0.7rem;
color: #70778c;
text-decoration: none;
border: none;
}
#ui-datepicker-div table tbody td a:after, #ui-datepicker-div table tbody td span:after {
content: "";
position: absolute;
z-index: -1;
left: 7.5%;
top: 7.5%;
height: 85%;
width: 85%;
border-radius: 100%;
background-color: transparent;
transition: background-color 0.2s;
}
#ui-datepicker-div table tbody td a:hover:after, #ui-datepicker-div table tbody td span:hover:after {
background-color: rgba(155, 160, 174, 0.1);
}
#ui-datepicker-div table tbody td .ui-priority-secondary {
color: #70778c;
opacity: 0.6;
}
#ui-datepicker-div table tbody td .ui-state-highlight:after {
background-color: rgba(50, 137, 255, 0.1);
}
#ui-datepicker-div table tbody td .ui-state-active {
color: white;
font-weight: bold;
}
#ui-datepicker-div table tbody td .ui-state-active:after {
background-color: #3289ff !important;
}
#ui-datepicker-div .ui-state-disabled {
cursor: not-allowed !important;
}
.entity-attribute-documents {
position: relative;
}
.entity-attribute-documents ul.files {
position: relative;
margin: 0;
margin-left: 45px;
width: calc(100% - 45px);
max-width: 500px;
padding: 0;
}
.entity-attribute-documents ul.files .document {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 720px;
height: 82px;
padding: 10px;
border: solid 1px #d8dae2;
border-radius: 5px;
transition: opacity 0.4s, border 0.4s;
}
.entity-attribute-documents ul.files .document.isDropTarget {
border: 2px dashed #d0d4dc !important;
}
.entity-attribute-documents ul.files .document.deleted {
display: none;
}
.entity-attribute-documents ul.files .document + .document {
margin-top: 5px;
}
.entity-attribute-documents ul.files .document > input[type=file] {
display: none;
}
.entity-attribute-documents ul.files .document .thumb {
position: relative;
display: block;
width: 50px;
height: 50px;
border-radius: 100%;
overflow: hidden;
background-color: #d8dae2;
background-position: center;
background-size: cover;
transition: all 0.3s;
}
.entity-attribute-documents ul.files .document .thumb.hidden {
display: none !important;
}
.entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=svg] {
background-color: #F9C80E;
}
.entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=pdf] {
background-color: #EA3546;
}
.entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=zip], .entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=rar] {
background-color: #f5cf56;
}
.entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=csv], .entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=xlsx] {
background-color: #227045;
}
.entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=mp3] {
background-color: #43BCCD;
}
.entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=mp4] {
background-color: #3066BE;
}
.entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=docx], .entity-attribute-documents ul.files .document .thumb:not(.has-image)[data-filetype=docx] {
background-color: #2C5697;
}
.entity-attribute-documents ul.files .document .thumb:not(.has-image):not(.has-icon) {
display: flex;
justify-content: center;
align-items: center;
}
.entity-attribute-documents ul.files .document .thumb:not(.has-image):not(.has-icon):after {
content: "." attr(data-filetype);
font-weight: bold;
text-transform: uppercase;
font-size: 0.7rem;
line-height: 1.2;
color: #70778c;
}
.entity-attribute-documents ul.files .document .thumb__image {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background-position: center;
background-size: cover;
}
.entity-attribute-documents ul.files .document .thumb.is-uploading {
border: 1px solid #3289ff;
width: 49px;
height: 49px;
background-color: #f7f7f7 !important;
}
.entity-attribute-documents ul.files .document .thumb.is-uploading .thumb__image {
filter: blur(1px);
}
.entity-attribute-documents ul.files .document .thumb .percentage {
position: absolute;
z-index: 2;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0.6;
}
.entity-attribute-documents ul.files .document .thumb .percentage:after {
content: "";
background-color: #3289ff;
width: 100%;
height: 100%;
transition: transform 0.3s;
border-radius: 50%;
transform: scale3d(0, 0, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="0"]:after {
transform: scale3d(0, 0, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="1"]:after {
transform: scale3d(0.01, 0.01, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="2"]:after {
transform: scale3d(0.02, 0.02, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="3"]:after {
transform: scale3d(0.03, 0.03, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="4"]:after {
transform: scale3d(0.04, 0.04, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="5"]:after {
transform: scale3d(0.05, 0.05, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="6"]:after {
transform: scale3d(0.06, 0.06, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="7"]:after {
transform: scale3d(0.07, 0.07, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="8"]:after {
transform: scale3d(0.08, 0.08, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="9"]:after {
transform: scale3d(0.09, 0.09, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="10"]:after {
transform: scale3d(0.1, 0.1, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="11"]:after {
transform: scale3d(0.11, 0.11, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="12"]:after {
transform: scale3d(0.12, 0.12, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="13"]:after {
transform: scale3d(0.13, 0.13, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="14"]:after {
transform: scale3d(0.14, 0.14, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="15"]:after {
transform: scale3d(0.15, 0.15, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="16"]:after {
transform: scale3d(0.16, 0.16, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="17"]:after {
transform: scale3d(0.17, 0.17, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="18"]:after {
transform: scale3d(0.18, 0.18, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="19"]:after {
transform: scale3d(0.19, 0.19, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="20"]:after {
transform: scale3d(0.2, 0.2, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="21"]:after {
transform: scale3d(0.21, 0.21, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="22"]:after {
transform: scale3d(0.22, 0.22, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="23"]:after {
transform: scale3d(0.23, 0.23, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="24"]:after {
transform: scale3d(0.24, 0.24, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="25"]:after {
transform: scale3d(0.25, 0.25, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="26"]:after {
transform: scale3d(0.26, 0.26, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="27"]:after {
transform: scale3d(0.27, 0.27, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="28"]:after {
transform: scale3d(0.28, 0.28, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="29"]:after {
transform: scale3d(0.29, 0.29, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="30"]:after {
transform: scale3d(0.3, 0.3, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="31"]:after {
transform: scale3d(0.31, 0.31, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="32"]:after {
transform: scale3d(0.32, 0.32, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="33"]:after {
transform: scale3d(0.33, 0.33, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="34"]:after {
transform: scale3d(0.34, 0.34, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="35"]:after {
transform: scale3d(0.35, 0.35, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="36"]:after {
transform: scale3d(0.36, 0.36, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="37"]:after {
transform: scale3d(0.37, 0.37, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="38"]:after {
transform: scale3d(0.38, 0.38, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="39"]:after {
transform: scale3d(0.39, 0.39, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="40"]:after {
transform: scale3d(0.4, 0.4, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="41"]:after {
transform: scale3d(0.41, 0.41, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="42"]:after {
transform: scale3d(0.42, 0.42, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="43"]:after {
transform: scale3d(0.43, 0.43, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="44"]:after {
transform: scale3d(0.44, 0.44, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="45"]:after {
transform: scale3d(0.45, 0.45, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="46"]:after {
transform: scale3d(0.46, 0.46, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="47"]:after {
transform: scale3d(0.47, 0.47, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="48"]:after {
transform: scale3d(0.48, 0.48, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="49"]:after {
transform: scale3d(0.49, 0.49, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="50"]:after {
transform: scale3d(0.5, 0.5, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="51"]:after {
transform: scale3d(0.51, 0.51, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="52"]:after {
transform: scale3d(0.52, 0.52, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="53"]:after {
transform: scale3d(0.53, 0.53, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="54"]:after {
transform: scale3d(0.54, 0.54, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="55"]:after {
transform: scale3d(0.55, 0.55, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="56"]:after {
transform: scale3d(0.56, 0.56, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="57"]:after {
transform: scale3d(0.57, 0.57, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="58"]:after {
transform: scale3d(0.58, 0.58, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="59"]:after {
transform: scale3d(0.59, 0.59, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="60"]:after {
transform: scale3d(0.6, 0.6, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="61"]:after {
transform: scale3d(0.61, 0.61, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="62"]:after {
transform: scale3d(0.62, 0.62, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="63"]:after {
transform: scale3d(0.63, 0.63, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="64"]:after {
transform: scale3d(0.64, 0.64, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="65"]:after {
transform: scale3d(0.65, 0.65, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="66"]:after {
transform: scale3d(0.66, 0.66, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="67"]:after {
transform: scale3d(0.67, 0.67, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="68"]:after {
transform: scale3d(0.68, 0.68, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="69"]:after {
transform: scale3d(0.69, 0.69, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="70"]:after {
transform: scale3d(0.7, 0.7, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="71"]:after {
transform: scale3d(0.71, 0.71, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="72"]:after {
transform: scale3d(0.72, 0.72, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="73"]:after {
transform: scale3d(0.73, 0.73, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="74"]:after {
transform: scale3d(0.74, 0.74, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="75"]:after {
transform: scale3d(0.75, 0.75, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="76"]:after {
transform: scale3d(0.76, 0.76, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="77"]:after {
transform: scale3d(0.77, 0.77, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="78"]:after {
transform: scale3d(0.78, 0.78, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="79"]:after {
transform: scale3d(0.79, 0.79, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="80"]:after {
transform: scale3d(0.8, 0.8, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="81"]:after {
transform: scale3d(0.81, 0.81, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="82"]:after {
transform: scale3d(0.82, 0.82, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="83"]:after {
transform: scale3d(0.83, 0.83, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="84"]:after {
transform: scale3d(0.84, 0.84, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="85"]:after {
transform: scale3d(0.85, 0.85, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="86"]:after {
transform: scale3d(0.86, 0.86, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="87"]:after {
transform: scale3d(0.87, 0.87, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="88"]:after {
transform: scale3d(0.88, 0.88, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="89"]:after {
transform: scale3d(0.89, 0.89, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="90"]:after {
transform: scale3d(0.9, 0.9, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="91"]:after {
transform: scale3d(0.91, 0.91, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="92"]:after {
transform: scale3d(0.92, 0.92, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="93"]:after {
transform: scale3d(0.93, 0.93, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="94"]:after {
transform: scale3d(0.94, 0.94, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="95"]:after {
transform: scale3d(0.95, 0.95, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="96"]:after {
transform: scale3d(0.96, 0.96, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="97"]:after {
transform: scale3d(0.97, 0.97, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="98"]:after {
transform: scale3d(0.98, 0.98, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="99"]:after {
transform: scale3d(0.99, 0.99, 1);
}
.entity-attribute-documents ul.files .document .thumb .percentage[aria-valuenow="100"]:after {
transform: scale3d(1, 1, 1);
}
.entity-attribute-documents ul.files .document .select {
display: inline-block;
padding: 0.8em 2.2em;
border: 0.1em solid #9ba0ae;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-weight: 300;
color: #9ba0ae;
text-align: center;
transition: all 0.2s;
}
.entity-attribute-documents ul.files .document .select:hover {
color: #ffffff;
background-color: #9ba0ae;
}
.entity-attribute-documents ul.files .document .select.hidden {
display: none;
}
.entity-attribute-documents ul.files .document .content-wrapper {
width: calc(100% - 100px);
padding: 0 10px;
}
.entity-attribute-documents ul.files .document .content-wrapper.hidden {
display: none;
}
.entity-attribute-documents ul.files .document .content-wrapper input {
margin-left: 0;
padding: 10px;
min-height: auto;
border-radius: 5px;
border: solid 1px #d8dae2;
background-color: white;
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.entity-attribute-documents ul.files .document .content-wrapper input:focus {
border-color: #3c8bf5;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 12px rgba(120, 169, 236, 0.3);
}
.entity-attribute-documents ul.files .document .content-wrapper p {
margin: 5px 0 0;
padding: 0 10px;
color: #9ba0ae;
font-size: 0.7rem;
line-height: 1.2;
}
.entity-attribute-documents ul.files .document .content-wrapper p.path {
font-size: 0;
margin: 0;
line-height: 0;
}
.entity-attribute-documents ul.files .document .drag-icon {
width: 30px;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
cursor: move;
}
.entity-attribute-documents ul.files .document .drag-icon.is-hidden {
opacity: 0;
cursor: default;
pointer-events: none;
}
.entity-attribute-documents ul.files .document .drag-icon:after {
content: "";
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url("/img/kms/icons/drag-dots.svg");
width: 9px;
height: 16px;
opacity: 0.2;
}
.entity-attribute-documents ul.files .document .delete {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 100%;
width: 24px;
height: 24px;
font-size: 13px;
line-height: 13px;
background-color: transparent;
border: 2px solid transparent;
transition: color 0.3s, background-color 0.3s, border 0.3s;
}
.entity-attribute-documents ul.files .document .delete.hidden {
display: none;
}
.entity-attribute-documents ul.files .document .delete:before {
content: "";
display: inline-block;
height: 10px;
width: 10px;
background-image: url("/img/kms/icons/icon_cross_red.svg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.entity-attribute-documents ul.files .document .delete:hover {
background-color: #f5606c;
color: white;
}
.entity-attribute-documents ul.files .document .delete:hover:before {
background-image: url("/img/kms/icons/icon_cross.svg");
}
.entity-attribute-documents ul.files .document:last-child {
margin-bottom: 20px;
}
.entity-attribute-documents .drag-and-drop-area {
height: 260px;
border: 2px dashed #d8dae2;
text-align: center;
margin-left: 45px;
line-height: 1rem;
width: 100%;
max-width: 700px;
padding: 30px;
cursor: pointer;
transition: border 0.2s;
}
.entity-attribute-documents .drag-and-drop-area:hover {
border-color: #3289ff;
background-color: rgba(50, 137, 255, 0.05);
}
.entity-attribute-documents .drag-and-drop-area .icon {
display: inline-block;
width: 95px;
height: 78px;
margin-bottom: 20px;
background-image: url("/img/kms/icons/drag-and-drop-cloud.svg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.entity-attribute-documents .drag-and-drop-area p {
margin: 0;
color: #70778c;
font-size: 0.7rem;
line-height: 1.2;
}
.entity-attribute-documents .drag-and-drop-area .or {
display: inline-block;
margin: 10px 0;
font-size: 0.8rem;
line-height: 1.2;
color: rgba(112, 119, 140, 0.5);
}
.entity-attribute-documents .drag-and-drop-area .select {
display: block;
width: 100%;
max-width: 250px;
margin: 0 auto;
padding: 10px 20px;
border-radius: 4px;
border: 1px solid #3289ff;
font-size: 0.7rem;
line-height: 1.2;
color: #3289ff;
cursor: pointer;
}
.entity-attribute-documents .drag-and-drop-area .select:hover {
background-color: #3289ff;
color: white;
}
.entity-attribute-documents .drag-and-drop-area--small {
width: 60px;
height: 60px;
padding: 0;
}
.entity-attribute-documents .drag-and-drop-area--small .icon {
width: 55px;
height: 55px;
background-image: url("/img/kms/icons/icon_plus.svg");
margin-bottom: 0;
}
.entity-attribute-documents .drag-and-drop-area--small p, .entity-attribute-documents .drag-and-drop-area--small .select, .entity-attribute-documents .drag-and-drop-area--small .or {
display: none;
}
.entity-attribute-documents .drag-and-drop-area.is-hidden {
display: none;
}
.entity-attribute-file input {
position: relative;
min-height: 60px;
text-indent: 0;
width: auto;
padding: 10px 30px;
}
.entity-attribute-file input:focus {
outline: none;
}
.entity-attribute-file input::-webkit-file-upload-button {
visibility: hidden;
}
.entity-attribute-file input:after {
content: "Kies een bestand";
display: block;
border: dashed 2px #9ba0ae;
border-radius: 4px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
line-height: 60px;
text-align: center;
margin-top: 10px;
}
.entity-attribute-file textarea {
min-width: 500px;
min-height: 100px;
margin: 10px 30px;
padding: 10px;
font-size: 0.7rem;
z-index: 99999;
display: block;
color: #32343a;
}
.entity-attribute-multiselect-combo-box {
color: #000000;
}
.entity-attribute-multiselect-combo-box ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.entity-attribute-multiselect-combo-box ul li {
font-size: 0.7rem;
color: #32343a;
opacity: 0.5;
}
.entity-attribute-multiselect-combo-box ul li:before {
content: "-";
margin-right: 5px;
}
.entity-attribute-multiselect-combo-box .ui-widget {
position: relative;
margin-left: 45px;
max-width: 500px;
}
.entity-attribute-multiselect-combo-box .ui-widget input {
display: block;
height: auto;
min-height: 40px;
padding: 8px;
font-size: 0.75rem;
margin-left: 0;
line-height: 1.6;
border: 1px solid #d8dae2;
border-radius: 3px;
text-indent: 0;
color: #32343a;
background: white;
}
.entity-attribute-multiselect-combo-box .ui-widget input.ui-autocomplete-input.hidden {
display: none;
}
.entity-attribute-multiselect-combo-box .ui-widget input:focus {
outline: none;
border-color: rgba(50, 137, 255, 0.75);
}
.entity-attribute-multiselect-combo-box .ui-widget .dropdown {
position: absolute;
right: 1px;
top: 0;
width: 39px;
height: 100%;
background-color: rgba(224, 230, 236, 0.5);
border-radius: 0 3px 3px 0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.entity-attribute-multiselect-combo-box .ui-widget .dropdown.hidden {
display: none;
}
.entity-attribute-multiselect-combo-box .ui-widget .dropdown:after {
content: "";
display: block;
border-style: solid;
border-width: 4px 5px 0 5px;
border-color: #2B2F83 transparent transparent transparent;
opacity: 0.5;
}
.entity-attribute-multiselect-combo-box .items {
margin-left: 50px;
max-width: 490px;
padding: 0;
}
.entity-attribute-multiselect-combo-box .items .item {
position: relative;
margin: 10px 0;
font-size: 0.7rem;
line-height: 1.2;
color: #70778c;
padding: 5px 35px 5px 15px;
border: solid 1px #d8dae2;
background-color: white;
border-radius: 5px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.entity-attribute-multiselect-combo-box .items .item .remove {
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 100%;
border-radius: 0 3px 3px 0;
cursor: pointer;
background-color: transparent;
transition: background-color 0.1s;
}
.entity-attribute-multiselect-combo-box .items .item .remove:after {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url("/img/kms/icons/icon_cross_red.svg");
background-position: center;
background-size: 50%;
background-repeat: no-repeat;
}
.entity-attribute-multiselect-combo-box .items .item .remove:hover {
background-color: #f5606c;
}
.entity-attribute-multiselect-combo-box .items .item .remove:hover:after {
background-image: url("/img/kms/icons/icon_cross.svg");
}
.entity-attribute-multiselect-combo-box .items .item .text {
width: calc(100% - 30px);
}
.entity-attribute-multiselect-combo-box .items .item .drag-icon {
width: 30px;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
cursor: move;
}
.entity-attribute-multiselect-combo-box .items .item .drag-icon.hidden {
display: none;
}
.entity-attribute-multiselect-combo-box .items .item .drag-icon:after {
content: "";
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url("/img/kms/icons/drag-dots.svg");
width: 9px;
height: 16px;
opacity: 0.2;
}
.entity-attribute-multiselect-combo-box .items .item.readonly .remove {
display: none;
}
.entity-attribute-multiselect-combo-box .explanation {
margin-left: 45px;
}
.ui-menu.ui-autocomplete {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid #d8dae2;
background-color: white;
max-height: 500px;
max-width: 500px;
overflow: hidden;
overflow-y: scroll;
}
.ui-menu.ui-autocomplete.ui-widget.ui-widget-content {
border-top: none;
}
.ui-menu.ui-autocomplete li {
font-size: 0.7rem;
line-height: 1.6;
color: #32343a;
}
.ui-menu.ui-autocomplete li div {
padding: 4px 8px;
}
.ui-menu.ui-autocomplete li div.ui-state-active {
border: none !important;
background-color: #f4f5f7;
color: #32343a;
margin: 0 !important;
}
.entity-attribute-link {
padding: 0;
box-sizing: border-box;
}
.entity-attribute-link a {
margin-left: 45px;
color: #3289ff;
font-size: 0.7rem;
}
.entity-attribute.entity-attribute-on-off {
max-width: 500px;
}
.entity-attribute.entity-attribute-on-off label {
position: relative;
margin-right: 60px;
}
.entity-attribute.entity-attribute-on-off input {
display: none;
}
.entity-attribute.entity-attribute-on-off .placeholder {
padding: 20px 0;
}
.entity-attribute.entity-attribute-on-off .on-off-switch {
position: relative;
display: block;
width: 35px;
height: 20px;
margin-left: 45px;
border-radius: 20px;
background-color: #e0e6ec;
cursor: pointer;
transition: background 0.4s;
}
.entity-attribute.entity-attribute-on-off .on-off-switch:after {
content: "";
position: absolute;
display: block;
left: 2px;
top: 2px;
height: 16px;
width: 16px;
border-radius: 100%;
background-color: white;
transform: translate3d(0, 0, 0);
transition: transform 0.4s;
}
.entity-attribute.entity-attribute-on-off .on-off-switch.on {
background-color: #78dc84;
}
.entity-attribute.entity-attribute-on-off .on-off-switch.on:after {
transform: translate3d(15px, 0, 0);
}
.entity-attribute-password {
position: relative;
}
.entity-attribute-password .password.repeat {
margin-top: 5px;
}
.validationHelper {
position: absolute;
z-index: 3;
top: -235px;
left: 205px;
pointer-events: none;
opacity: 0;
transform: translate3d(0, 10px, 0);
transition: opacity 0.3s, transform 0.3s;
transition-delay: 0s;
width: calc(100% - 225px);
height: 225px;
max-width: 340px;
background-color: white;
box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
border-radius: 5px;
}
.validationHelper h3 {
font-size: 0.7rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.5);
font-weight: 100;
margin: 0;
background-color: #262f43;
padding: 12px 20px;
border-radius: 5px 5px 0 0;
text-transform: uppercase;
}
.validationHelper .success {
display: flex;
justify-content: center;
align-items: flex-end;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s;
border-radius: 5px;
background-image: url("/img/kms/icons/success.gif");
background-position: top center;
background-repeat: no-repeat;
background-color: #12c06a;
}
.validationHelper .success p {
margin: 0;
opacity: 0.6;
font-size: 0.8rem;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.validationHelper .requirements {
padding: 10px 15px;
}
.validationHelper .requirements p {
font-size: 0.7rem;
color: rgba(155, 160, 174, 0.65);
line-height: 0.85;
}
.validationHelper .requirements p span {
display: inline-block;
position: relative;
padding: 0 5px;
}
.validationHelper .requirements p span:after {
content: "";
position: absolute;
top: 4px;
left: 0;
display: block;
width: 100%;
height: 1px;
transform: scaleX(0);
transform-origin: 0 50%;
background-color: #70778c;
transition: transform 0.6s;
}
.validationHelper .requirements p.info {
color: #70778c;
font-weight: bold;
margin-bottom: 1rem;
padding: 0 5px;
}
.validationHelper .requirements p.invalid {
color: #f2303f;
opacity: 0.8;
}
.validationHelper .requirements p.valid span:after {
transform: scaleX(1);
}
.validationHelper:after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 0 solid transparent;
border-left-width: 15px;
border-right-width: 15px;
border-top: 15px solid white;
left: calc(50% - 7.5px);
bottom: -15px;
transition: border 0.4s;
}
.validationHelper.active {
opacity: 1;
transform: translate3d(0, 0, 0);
pointer-events: all;
}
.validationHelper.valid {
opacity: 0;
transition-delay: 2s;
pointer-events: none;
}
.validationHelper.valid:after {
border-top-color: #12c06a;
}
.validationHelper.valid .success {
opacity: 1;
z-index: 4;
}
.entity-attribute-send-password-mail-button {
position: relative;
}
.entity-attribute-send-password-mail-button .password_mail .mail_button {
display: inline-block;
color: #666666;
background-color: #e9e9e9;
border: 1px solid #dcdcdc;
height: 40px;
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding: 5px 24px;
text-decoration: none;
margin-left: 45px;
margin-top: 10px;
font-size: 0.7rem;
transition: background-color 0.2s;
}
.entity-attribute-send-password-mail-button .password_mail .mail_button:hover {
background-color: #e0e0e0;
}
.entity-attribute-send-password-mail-button .password_mail .mail_button:active {
position: relative;
top: 1px;
}
.entity-attribute-send-password-mail-button .password_mail .mail_button.hidden {
display: none;
}
.entity-attribute-send-password-mail-button .password_mail .mail_confirmation {
color: #479c38;
font-size: 0.7rem;
margin-left: 45px;
}
.entity-attribute-send-password-mail-button .password_mail .mail_confirmation.hidden {
display: none;
}
.entity-attribute-send-password-mail-button .password_mail .mail_fail {
color: #bf2614;
font-size: 0.7rem;
margin-left: 45px;
}
.entity-attribute-send-password-mail-button .password_mail .mail_fail.hidden {
display: none;
}
.entity-attribute-send-password-mail-button .password_mail.hidden {
display: none;
}
.entity-attribute-select .select-wrapper {
width: calc(100% - 225px);
max-width: 500px;
margin-left: 45px;
}
.entity-attribute-select .select-wrapper .select-menu {
display: none;
}
.entity-attribute-select .select-wrapper .ui-selectmenu-button {
position: relative;
display: block;
font-size: 0.75rem;
line-height: 1.6;
padding: 8px;
border: 1px solid #d8dae2;
border-radius: 3px;
color: #32343a;
background: white;
}
.entity-attribute-select .select-wrapper .ui-selectmenu-button:focus {
outline: none;
border-color: rgba(50, 137, 255, 0.75);
}
.entity-attribute-select .select-wrapper .ui-selectmenu-button:after {
content: "";
position: absolute;
right: 12px;
top: 17px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 5px 0 5px;
border-color: #2B2F83 transparent transparent transparent;
opacity: 0.5;
}
.entity-attribute-select .select-wrapper .ui-selectmenu-button.dropdown-open:after {
transform: rotate(180deg);
}
.entity-attribute-select .select-wrapper .ui-selectmenu-button .ui-icon {
display: none;
}
.ui-selectmenu-menu {
display: none;
margin: 0;
}
.ui-selectmenu-menu.ui-selectmenu-open {
display: block;
}
.ui-selectmenu-menu ul {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid #d8dae2;
background-color: white;
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.ui-selectmenu-menu ul.ui-widget.ui-widget-content {
border-top: none;
}
.ui-selectmenu-menu ul li {
font-size: 0.7rem;
line-height: 1.6;
color: #32343a;
}
.ui-selectmenu-menu ul li.ui-state-focus {
background-color: #f4f5f7;
}
.ui-selectmenu-menu ul li div {
padding: 4px 8px;
}
.ui-selectmenu-menu ul li div.ui-state-active {
border: 1px solid transparent !important;
background-color: #f4f5f7;
color: #32343a;
}
.c-simple-select {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
font-size: 0.75rem;
line-height: 1.6;
padding: 8px 16px;
min-height: 40px;
border: 1px solid transparent;
border-radius: 3px;
color: #32343a;
background: white;
}
.c-simple-select__wrapper {
position: relative;
}
.c-simple-select__wrapper:after {
content: "";
position: absolute;
top: calc(50% - 2px);
right: 8px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: #70778c transparent transparent transparent;
}
.export-select {
min-height: 0;
text-align: left;
padding: 23px 25px;
border: 1px solid #d8dae2;
border-radius: 4px;
cursor: pointer;
width: 250px;
}
.entity-attribute-separator {
margin: 30px 0 16px 0;
min-height: 30px;
background-color: #efefef;
box-shadow: inset 0px 15px 15px -15px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid #d8dae2;
}
.entity-attribute-text, .entity-attribute-password {
box-sizing: border-box;
}
.entity-attribute-text.error + .error, .entity-attribute-password.error + .error {
box-shadow: inset 0 1px 1px rgba(242, 48, 63, 0.075), inset 0 0 1px rgba(224, 117, 125, 0.75);
border: 1px solid #f2303f;
border-top: 0;
}
.entity-attribute-text input, .entity-attribute-password input {
width: calc(100% - 45px);
max-width: 500px;
margin-left: 45px;
border: solid 1px #d8dae2;
border-radius: 5px;
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.entity-attribute-text input:focus, .entity-attribute-password input:focus {
border-color: #3c8bf5;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 12px rgba(120, 169, 236, 0.3);
}
.entity-attribute-text input::-moz-placeholder, .entity-attribute-password input::-moz-placeholder {
font-style: italic;
}
.entity-attribute-text input::placeholder, .entity-attribute-password input::placeholder {
font-style: italic;
}
.entity-attribute-text.error input, .entity-attribute-password.error input {
background-image: url("/img/kms/icons/icon_cross_red.svg");
background-repeat: no-repeat;
background-position: right 20px center;
background-size: 10px 10px;
}
.entity-attribute-text-area label {
vertical-align: top;
}
.entity-attribute-text-area .text-area-wrapper {
display: inline-block;
vertical-align: top;
width: calc(100% - 90px);
max-width: 800px;
margin-left: 45px;
border: solid 1px #d8dae2;
border-radius: 3px;
}
.entity-attribute-text-area .text-area-wrapper > textarea {
display: block;
width: 100%;
padding: 10px;
border-radius: 3px;
min-height: 200px;
border: none;
line-height: 1.6;
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
font-size: 0.7rem;
resize: vertical;
}
.entity-attribute-text-area .text-area-wrapper > textarea:focus {
border-color: #3c8bf5;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 12px rgba(120, 169, 236, 0.3);
}
.entity-attribute-text-area .text-area-wrapper > textarea::-moz-placeholder {
font-style: italic;
}
.entity-attribute-text-area .text-area-wrapper > textarea::placeholder {
font-style: italic;
}
div.mce-toolbar-grp {
border-bottom: 1px solid #e0e6ec;
}
.entity-attribute-title h3 {
padding-left: 45px;
color: #3289ff;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
margin: 0;
}
.entity-attribute-view {
padding: 0;
box-sizing: border-box;
}
.entity-attribute-view.error + .error {
box-shadow: inset 0 1px 1px rgba(242, 48, 63, 0.075), inset 0 0 1px rgba(224, 117, 125, 0.75);
border: 1px solid #f2303f;
border-top: 0;
}
.entity-attribute-view .content {
padding: 0;
padding-left: 45px;
}
.entity-attribute-view .content .order-table {
padding-left: 0;
}
.c-video__grid {
display: flex;
justify-content: flex-start;
align-items: flex-start;
max-width: 745px;
padding-left: 45px;
}
.c-video__fields {
width: calc(100% - 200px);
}
.c-video__fields {
padding: 20px 20px 20px 0;
}
.c-video__preview {
position: relative;
width: 200px;
min-height: 150px;
padding: 20px 0;
text-decoration: none;
}
.c-video__preview[href]:after {
display: none;
}
.c-video__preview:after {
content: "";
display: block;
width: 200px;
height: 150px;
background-color: rgba(155, 160, 174, 0.15);
background-image: radial-gradient(white, rgba(155, 160, 174, 0.15));
}
.c-video__title {
display: block;
font-size: 0.7rem;
line-height: 1.2;
color: #9ba0ae;
text-transform: uppercase;
font-weight: 600;
}
.c-video__title {
width: 100%;
color: #70778c;
}
.c-video__id {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
flex-flow: row wrap;
}
.c-video__url {
display: inline-block;
width: 220px;
font-size: 0.7rem;
line-height: 1.2;
color: #9ba0ae;
}
.c-video__input {
display: inline-block;
width: calc(100% - 220px);
padding: 5px 10px;
background-color: white;
font-size: 0.7rem;
border: 1px solid rgba(155, 160, 174, 0.4);
border-radius: 4px;
color: #32343a;
box-sizing: border-box;
transition: border-color ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.c-video__input:focus {
border-color: #3c8bf5;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 12px rgba(120, 169, 236, 0.3);
}
.c-video__autoplay {
margin-top: 20px;
border-top: 1px solid #e0e6ec;
padding-top: 20px;
}
.c-video__thumb {
display: none;
width: 100%;
}
.c-video__thumb[src] {
display: block;
}
.c-sub-table {
border-spacing: 0;
min-width: 650px;
}
.c-sub-table--reservation {
min-width: 840px;
}
.c-sub-table__table-header {
font-size: 14px;
font-weight: bold;
}
.c-sub-table__row:nth-child(odd) {
background-color: rgba(224, 230, 236, 0.4);
}
.c-location-availability__table {
border-spacing: 0;
}
.c-location-availability__table-header {
font-size: 14px;
font-weight: bold;
}
.c-location-availability__row:nth-child(odd) {
background-color: rgba(224, 230, 236, 0.4);
}
.c-location-availability__day-heading {
width: 100px;
padding-left: 15px;
}
.c-location-availability__open-heading {
width: 140px;
text-align: center;
}
.c-location-availability__opening-hours-heading {
width: 260px;
}
.c-location-availability__latest-start-heading {
width: 190px;
padding-left: 40px;
}
.c-location-availability__select {
width: auto;
}
.c-location-availability__select .select-wrapper {
width: auto;
margin-left: 0;
}
.c-location-availability__opening-hours {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 20px;
}
.c-location-availability__opening-hours .c-location-availability__select {
width: calc((100% - 20px) / 2);
}
.c-location-availability__select-divider {
width: 20px;
text-align: center;
}
.c-location-availability__day-data {
font-size: 14px;
padding-left: 15px;
}
.c-location-availability__open-data .on-off-switch {
margin-left: auto !important;
margin-right: auto;
}
.c-location-availability__latest-start-data {
padding-left: 40px;
padding-right: 40px;
}
.c-location-products__product-heading {
width: 200px;
}
.c-location-products__max-persons-heading {
width: 160px;
text-align: center;
}
.c-location-products__available-each-hour {
width: 180px;
text-align: center;
}
.c-location-products__capacity-rule {
padding: 0 5px;
width: 200px;
}
.c-location-products__data {
font-size: 14px;
line-height: 1.4;
vertical-align: top;
padding: 10px 0;
}
.c-location-products__data--capacity {
padding: 10px 5px;
}
.c-location-products__data--center {
text-align: center;
}
.c-location-products__link {
color: #2B2F83;
}
.c-location-products__button {
margin-top: 40px;
display: inline-flex;
justify-content: center;
width: 200px;
padding: 5px 0;
background-color: #3289ff;
color: white;
font-size: 0.7rem;
text-decoration: none;
border-radius: 4px;
}
.c-reservation-items__data--align-center {
text-align: center;
}
.c-reservation-items__heading {
width: 200px;
}
.c-reservation-items__quantity {
width: 60px;
}
.c-reservation-items__time {
width: 130px;
}
.c-reservation-items__remarks {
width: 400px;
}
.c-reservation-items__options {
width: 40px;
}
.c-reservation-items__calendar {
margin-top: 80px;
padding-right: 45px;
}
.c-reservation-items__quantity-input {
margin-left: 0 !important;
}
.c-reservation-items__remarks-textarea {
display: block;
width: 100%;
padding: 10px;
border-radius: 3px;
min-height: 80px;
border: none;
line-height: 1.6;
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
font-size: 0.7rem;
resize: vertical;
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.c-reservation-items__remarks-textarea:focus {
border-color: #3c8bf5;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 12px rgba(120, 169, 236, 0.3);
}
.c-reservation-items__data--is-deleted {
display: block;
margin-top: 5px;
color: #70778c;
font-size: 0.6rem;
opacity: 0.6;
}
.c-reservation-items__read-only {
display: inline-block;
padding: 12px 10px;
font-size: 15px;
line-height: 1.2;
color: #70778c;
}
.c-reservation-items__read-only--xs {
font-size: 14px;
padding: 12px 8px 12px 0;
}
.c-reservation-items__delete {
position: relative;
margin-top: 10px;
border-radius: 50%;
display: inline-block;
height: 18px;
width: 18px;
background-color: rgba(242, 48, 63, 0.4);
background-image: url("/img/kms/icons/icon_cross.svg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 8px 8px;
cursor: pointer;
transition: background-color 0.3s;
}
.c-reservation-items__delete:hover {
background-color: #f2303f;
}
.c-day-calendar {
margin-top: 80px;
font-size: 14px;
max-width: 650px;
}
.c-day-calendar .fc-unthemed td.fc-today {
background-color: transparent;
}
.c-day-calendar__title {
font-size: 18px;
color: #3289ff;
}
.c-full-calendar {
width: 100%;
margin-top: 20px;
color: #5c5f65;
font-size: 15px;
padding-right: 0;
}
.c-calendar {
margin-top: 20px;
}
.c-calendar .fc-dayGridMonth-view .is-closed {
margin-bottom: -20px;
opacity: 0;
pointer-events: none;
}
.c-calendar .fc-toolbar {
justify-content: flex-end;
}
.c-calendar .fc-toolbar .fc-center {
margin-right: 60px;
}
.c-calendar .fc-toolbar .fc-left {
margin-right: auto;
}
.c-calendar .fc-event {
border-color: #32343a;
background-color: #32343a;
}
.c-calendar .fc-event.is-primary {
border-color: #3289ff;
background-color: #3289ff;
}
.c-calendar .fc-event.is-primary.is-primary--1 {
border-color: #0466c8;
background-color: #0466c8;
}
.c-calendar .fc-event.is-primary.is-primary--2 {
border-color: #379392;
background-color: #379392;
}
.c-calendar .fc-event.is-primary.is-primary--3 {
border-color: #023e7d;
background-color: #023e7d;
}
.c-calendar .fc-event.is-primary.is-primary--4 {
border-color: #6C49B8;
background-color: #6C49B8;
}
.c-calendar .fc-event.is-primary.is-primary--5 {
border-color: #4FB0C6;
background-color: #4FB0C6;
}
.c-calendar .fc-event.is-primary.is-primary--6 {
border-color: #001233;
background-color: #001233;
}
.c-calendar .fc-event.is-primary.is-primary--7 {
border-color: #8F2D56;
background-color: #8F2D56;
}
.c-calendar .fc-event.is-primary.is-primary--8 {
border-color: #002855;
background-color: #002855;
}
.c-calendar .fc-event.is-warning {
border: #ff885f;
background-color: #ff885f;
color: white;
}
.c-calendar .fc-event.is-note {
border: #ffe196;
background-color: #ffe196;
color: #32343a;
}
.c-calendar .fc-event.is-closed {
border: #32343a;
background: linear-gradient(-45deg, rgb(230, 230, 230) 12.5%, white 12.5%, white 50%, rgb(230, 230, 230) 50%, rgb(230, 230, 230) 62.5%, white 62.5%, white) 0% 0%/5px 5px;
color: #32343a;
}
.c-calendar td.fc-today {
background-color: #f1f7ff;
}
.c-calendar__title,
.c-calendar__title-location,
.c-calendar__title-date {
margin: 0;
line-height: 1.2;
}
.c-calendar__title {
margin: 0;
font-size: 16px;
font-weight: bold;
color: #3289ff;
}
.c-calendar__title-location {
margin: 8px 0 3px;
font-size: 16px;
color: #32343a;
}
.c-calendar__title-date {
font-size: 14px;
color: #70778c;
}
#entity.transfer-section {
position: static;
top: 0;
height: 100%;
}
#entity.action-log-section {
position: static;
top: 0;
height: 100%;
background-color: #fafafa;
}
#entity.action-log-section .entity-attributes {
position: static;
background-color: transparent;
}
#entity.action-log-section .entity-attributes .tab-content {
background-color: white;
border-bottom: 1px solid #e0e6ec;
}
#entity.action-log-section .entity-attributes .tab-content .entity-attribute-title h3 {
font-size: 1.2rem;
line-height: 1.2;
color: #2D323C;
font-weight: 700;
text-transform: none;
padding: 21px 0 13px 30px;
}
#entity.action-log-section .entity-attributes .tab-content .entity-attribute-title h3 p {
font-size: 0.7rem;
line-height: 1.4rem;
color: #70778c;
opacity: 0.5;
margin: 0;
font-weight: 100;
}
#entity.action-log-section .entity-attributes .tab-content .entity-attribute-date-picker {
width: auto;
display: inline-block;
padding-left: 30px;
border-bottom: none;
}
#entity.action-log-section .entity-attributes .tab-content .entity-attribute-date-picker label {
width: 100%;
margin-left: 0;
margin-bottom: 10px;
}
#entity.action-log-section .entity-attributes .tab-content button {
display: inline-block;
height: 40px;
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
cursor: pointer;
transition: background-color 0.3s;
width: 150px;
background-color: #3289ff;
color: white;
font-size: 0.7rem;
}
#entity.action-log-section .entity-attributes .tab-content button:focus {
outline: none;
}
#entity.action-log-section textarea {
border: none;
color: #333;
font-size: 0.7rem;
width: 100%;
height: calc(100vh - 216px);
padding: 30px;
background: transparent;
}
#entity.action-log-section textarea:focus {
outline: none;
}
.c-dashboard__title {
margin-top: 30px;
font-size: 1.1rem;
color: #1D2433;
font-weight: bold;
padding: 0 20px;
}
.c-dashboard__text {
font-size: 0.8rem;
line-height: 1.2;
color: #70778c;
padding: 13px 40px;
}
.c-dashboard__contact .c-dashboard__text {
font-size: 0.85rem;
line-height: 1.4;
}
.c-dashboard__employees {
border-bottom: 1px solid #eceef3;
}
.c-dashboard__employee {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
border-top: 1px solid #eceef3;
}
.c-dashboard__employee-image {
width: 90px;
height: 90px;
border-radius: 100%;
background-color: #d8dae2;
}
.c-dashboard__employee-info {
width: calc(100% - 110px);
font-size: 0.8rem;
line-height: 1.4;
color: #70778c;
}
.c-dashboard__employee-name {
font-size: 1rem;
font-weight: bold;
color: #1D2433;
margin-bottom: 5px;
}
.c-dashboard__link {
color: #70778c;
transition: color 0.2s;
}
.c-dashboard__link:hover {
color: #3289ff;
}
.c-dashboard__logo {
width: 200px;
padding: 10px 0;
}
.c-dashboard__logo img {
width: 100%;
}
.c-planning {
padding: 40px;
background: white;
}
.c-planning__heading {
display: flex;
justify-content: space-between;
}
.c-planning__title {
color: #32343a;
margin: 0;
line-height: 1;
}
.c-planning__block-out-button {
background-color: #1D2433;
border: none;
padding: 10px 20px;
border-radius: 4px;
color: white;
font-size: 0.75rem;
cursor: pointer;
}
.c-planning__popup {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 264px;
background-color: #f7f7f7;
color: #2b2b31;
border-radius: 6px;
padding: 12px;
box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.5);
}
.c-planning__popup.is-hidden {
display: none;
}
.c-planning__popup-content {
line-height: 1.6;
}
.c-planning__popup-content.is-hidden {
display: none;
}
.c-planning__popup-content h3 {
margin: 0 0 8px;
font-size: 14px;
font-weight: bold;
}
.c-planning__popup-content p {
margin: 0;
font-size: 13px;
}
.c-planning__popup-content i {
font-weight: bold;
color: #2B2F83;
}
.order-search-form {
padding-left: 45px;
}
.order-search-form .order-search-filter-button {
position: relative;
top: -1px;
left: 50%;
height: 35px;
width: 100px;
margin-left: -50px;
border-radius: 0 0 4px 4px;
font-size: 0.7rem;
text-decoration: none;
text-transform: uppercase;
padding: 0 20px;
border-top: none;
}
.order-search-form .order-search-filter-button:focus {
outline: none;
}
.order-search-form .order-search {
position: relative;
top: 0;
left: -45px;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
height: 0;
width: calc(100% + 90px);
background-color: white;
overflow: hidden;
padding: 0 45px;
transition: height 0.5s, padding 0.2s, margin-bottom 0.5s;
}
.order-search-form .order-search.active {
height: 330px;
padding: 20px 45px;
border-bottom: solid 1px #BABABA;
}
.order-search-form .c-form-element {
display: block;
min-width: 300px;
}
.order-search-form .c-form-element label {
display: block;
width: 100%;
font-size: 0.7rem;
color: #9ba0ae;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.order-search-form .c-form-element input {
width: 80%;
padding: 5px;
margin: 0;
margin-bottom: 20px;
}
.order-search-form .c-form-element.last {
display: block;
text-align: center;
width: 100%;
height: 40px;
}
.order-search-form .c-form-element.last input[type=submit] {
border-radius: 4px;
font-size: 0.7rem;
line-height: 20px;
text-decoration: none;
text-transform: uppercase;
padding: 0 20px;
width: auto;
}
.order-search-form .c-form-element.selectboxes {
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.order-search-form .c-form-element.selectboxes .entity-attribute-select + .entity-attribute-select {
margin-left: 30px;
}
.order-search-form .c-form-element.selectboxes .entity-attribute-select .select-wrapper {
margin: 0;
width: auto;
min-width: 250px;
}
.order-result-form {
padding: 0 45px 60px 45px;
}
.order-result-form a {
color: #3289ff;
text-decoration: underline;
}
#tab-content-search h2 {
padding-left: 45px;
}
.tab-content .c-pagination {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin-left: 0;
}
.tab-content .c-pagination a {
color: #3289ff;
}
.tab-content .c-pagination__item {
display: flex;
justify-content: center;
align-items: center;
font-size: 0.7rem;
}
.tab-content .c-pagination__link {
padding: 8px;
text-decoration: none;
transition: color 0.2s, background-color 0.2s;
color: #9ba0ae;
}
.tab-content .c-pagination__link:link:hover {
color: #3289ff;
}
.tab-content .c-pagination__link.is-active {
font-weight: bold;
color: #3289ff;
cursor: default;
}
.tab-content .c-pagination__prev,
.tab-content .c-pagination__next {
display: flex;
justify-content: center;
margin-left: 16px;
padding: 8px;
transition: color 0.2s;
}
.tab-content .c-pagination__prev {
transform: rotate(0.5turn);
margin-left: 0;
margin-right: 16px;
}
.order-table {
display: block;
overflow: auto;
white-space: nowrap;
padding-left: 30px;
padding-bottom: 30px;
}
.order-table td, .order-table th {
font-size: 0.7rem;
text-align: left;
border-right: #ededed 1px solid;
padding: 2px 10px;
}
.order-table td > table, .order-table th > table {
width: 100%;
}
.order-table td.batch-checkboxes {
position: absolute;
width: 0;
}
.order-table td.batch-checkboxes:after {
content: "";
display: block;
width: 3em;
height: 2em;
position: absolute;
top: 0;
left: -3em;
background-color: #ededed;
border-right: solid 1px #ededed;
z-index: 5;
}
.order-table td.batch-checkboxes .batch-checkbox {
position: absolute;
left: -2.5em;
z-index: 10;
}
.order-table th {
font-size: 0.7rem;
text-transform: uppercase;
color: #999999;
background-color: #ededed;
}
.order-table th.batch-checkbox-header {
display: block;
padding: 0;
border: none;
}
.order-table tr.order-row {
border-top: solid 1px #ededed;
}
.order-table tr:first-child {
border-bottom: solid 2px #e0e6ec;
}
.order-table a {
color: #3289ff;
}
.batch_edit_controls {
position: absolute;
top: -1000px;
left: 75px;
display: block;
border: solid 1px #cccccc;
background-color: white;
z-index: 10;
padding: 10px;
text-align: right;
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
.batch_edit_controls label {
display: block;
width: 100%;
text-align: left;
}
.batch_edit_controls button {
border-radius: 4px;
font-size: 0.7rem;
line-height: 20px;
text-decoration: none;
text-transform: uppercase;
padding: 0 20px;
width: auto;
}
.shipments-search-form {
padding-left: 45px;
}
.shipments-search-form .order-search-filter-button {
position: relative;
top: -1px;
left: 50%;
height: 35px;
width: 100px;
margin-left: -50px;
border-radius: 0 0 4px 4px;
font-size: 0.7rem;
text-decoration: none;
text-transform: uppercase;
padding: 0 20px;
border-top: none;
}
.shipments-search-form .order-search-filter-button:focus {
outline: none;
}
.shipments-search-form .order-search {
position: relative;
top: 0;
left: -45px;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
height: 0;
width: calc(100% + 90px);
background-color: white;
overflow: hidden;
padding: 0 45px;
transition: height 0.5s, padding 0.2s, margin-bottom 0.5s;
}
.shipments-search-form .order-search.active {
height: 330px;
padding: 20px 45px;
border-bottom: solid 1px #BABABA;
}
.shipments-search-form .c-form-element {
display: block;
min-width: 300px;
}
.shipments-search-form .c-form-element label {
display: block;
width: 100%;
font-size: 0.7rem;
color: #9ba0ae;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.shipments-search-form .c-form-element input {
width: 80%;
padding: 5px;
margin: 0;
margin-bottom: 20px;
}
.shipments-search-form .c-form-element.last {
display: block;
text-align: center;
width: 100%;
height: 40px;
}
.shipments-search-form .c-form-element.last input[type=submit] {
border-radius: 4px;
font-size: 0.7rem;
line-height: 20px;
text-decoration: none;
text-transform: uppercase;
padding: 0 20px;
width: auto;
}
.shipments-search-form .c-form-element.selectboxes {
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.shipments-search-form .c-form-element.selectboxes .entity-attribute-select + .entity-attribute-select {
margin-left: 30px;
}
.shipments-search-form .c-form-element.selectboxes .entity-attribute-select .select-wrapper {
margin: 0;
width: auto;
min-width: 250px;
}
.shipments-result-form {
padding: 0 45px 60px 45px;
}
.shipments-result-form a {
color: #3289ff;
text-decoration: underline;
}
#tab-content-search h2 {
padding-left: 45px;
}
.tab-content .c-pagination {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin-left: 0;
}
.tab-content .c-pagination a {
color: #3289ff;
}
.tab-content .c-pagination__item {
display: flex;
justify-content: center;
align-items: center;
font-size: 0.7rem;
}
.tab-content .c-pagination__link {
padding: 8px;
text-decoration: none;
transition: color 0.2s, background-color 0.2s;
color: #9ba0ae;
}
.tab-content .c-pagination__link:link:hover {
color: #3289ff;
}
.tab-content .c-pagination__link.is-active {
font-weight: bold;
color: #3289ff;
cursor: default;
}
.tab-content .c-pagination__prev,
.tab-content .c-pagination__next {
display: flex;
justify-content: center;
margin-left: 16px;
padding: 8px;
transition: color 0.2s;
}
.tab-content .c-pagination__prev {
transform: rotate(0.5turn);
margin-left: 0;
margin-right: 16px;
}
.shipmentGroup-table {
display: block;
overflow: auto;
white-space: nowrap;
padding-bottom: 30px;
}
.shipmentGroup-table td, .shipmentGroup-table th {
font-size: 0.7rem;
text-align: left;
border-right: #ededed 1px solid;
padding: 2px 10px;
}
.shipmentGroup-table td > table, .shipmentGroup-table th > table {
width: 100%;
}
.shipmentGroup-table td.batch-checkboxes {
position: absolute;
width: 0;
}
.shipmentGroup-table td.batch-checkboxes:after {
content: "";
display: block;
width: 3em;
height: 2em;
position: absolute;
top: 0;
left: -3em;
background-color: #ededed;
border-right: solid 1px #ededed;
z-index: 5;
}
.shipmentGroup-table td.batch-checkboxes .batch-checkbox {
position: absolute;
left: -2.5em;
z-index: 10;
}
.shipmentGroup-table th {
font-size: 0.7rem;
text-transform: uppercase;
color: #999999;
background-color: #ededed;
}
.shipmentGroup-table th.batch-checkbox-header {
display: block;
padding: 0;
border: none;
}
.shipmentGroup-table tr.order-row {
border-top: solid 1px #ededed;
}
.shipmentGroup-table tr:first-child {
border-bottom: solid 2px #e0e6ec;
}
.shipmentGroup-table a {
color: #3289ff;
}
.batch_edit_controls {
position: absolute;
top: -1000px;
left: 75px;
display: block;
border: solid 1px #cccccc;
background-color: white;
z-index: 10;
padding: 10px;
text-align: right;
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
.batch_edit_controls label {
display: block;
width: 100%;
text-align: left;
}
.batch_edit_controls button {
border-radius: 4px;
font-size: 0.7rem;
line-height: 20px;
text-decoration: none;
text-transform: uppercase;
padding: 0 20px;
width: auto;
}