Your IP : 3.14.249.33
/* new planner */
.calendar-planner-wrapper {
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: #9da2a9;
box-sizing: border-box;
/*overflow: hidden;*/
}
.calendar-planner-user {
margin: 0 0 6px 0;
min-height: 23px;
}
.calendar-planner-user.calendar-planner-email-user
{
pointer-events: none;
}
.calendar-planner-users-header {
padding: 13px 0 26px 0;
}
.calendar-planner-no-daytitle .calendar-planner-users-header {
padding: 2px 0 0 0;
}
.calendar-planner-time {
will-change: width;
display: table;
-webkit-user-select: none!important; /* Chrome all / Safari all */
-moz-user-select: none!important; /* Firefox all */
-ms-user-select: none!important; /* IE 10+ */
}
.calendar-planner-time *{
-webkit-user-select: none!important; /* Chrome all / Safari all */
-moz-user-select: none!important; /* Firefox all */
-ms-user-select: none!important; /* IE 10+ */
}
.calendar-planner-day {
position: relative;
display: inline-block;
width: 413px;
padding: 0 0 10px 23px;
}
.calendar-planner-time-hour-container {
position: relative;
}
.calendar-planner-time-day-outer {
will-change: width;
display: table-cell;
}
.calendar-planner-time-day-title {
will-change: width;
padding: 5px 0 10px 6px;
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
position: relative;
}
.calendar-planner-time-day-title span {
position: sticky;
left: 0;
margin-right: 10px;
}
.calendar-planner-time-day {
will-change: width;
display: table;
}
.calendar-planner-time-day *{
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
}
.calendar-planner-time-hour-item {
position: relative;
display: table-cell;
min-width: 40px;
z-index: 1;
height: 14px;
}
.calendar-planner-time-hour-item:before {
content: "";
position: absolute;
top: 15px;
height: 10000px;
border-left: 1px solid #dddfe2;
z-index: 1;
}
.calendar-planner-time-hour-bold.calendar-planner-time-hour-item:before{
border-left: 1px solid #c6c9cd;
}
.calendar-planner-time-hour-item i {
display: block;
position: absolute;
top:0;
left:0;
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
}
.calendar-planner-fulldaymode .calendar-planner-time-hour-item i {
max-width: 98px;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-planner-day-start i{margin-left: 8px;}
.calendar-planner-day-start:before {
content: "";
position: absolute;
top: -27px;
left: 0;
height: 10000px;
border-left: 1px solid #c6c9cd;
z-index: 1;
}
.calendar-planner-compact.calendar-planner-readonly .calendar-planner-day-start:before {
top: 15px !important;
}
.calendar-planner-timeline-border {
display: block;
width: 10px;
}
.calendar-planner-main-container {
clear: both;
/*overflow: hidden;*/
position: relative;
}
.calendar-planner-user {
position: relative;
}
.calendar-planner-user-tooltip {
z-index: 10000;
}
.calendar-planner-user-container {
position: relative;
float: left;
width: 200px;
padding: 0 10px 0 16px;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
z-index: 10;
-webkit-user-select: none!important; /* Chrome all / Safari all */
-moz-user-select: none!important; /* Firefox all */
-ms-user-select: none!important; /* IE 10+ */
}
.calendar-planner-users-item {
position: relative;
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
}
.calendar-planner-users-item *
{
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
}
.calendar-planner-settings-icon,
.calendar-planner-add-icon {
position: absolute;
right: 11px;
height: 11px;
width: 11px;
cursor: pointer;
background: url(../../images/calendar/calendar-planner-sprite.svg) 24px -4px;
}
.calendar-planner-add-icon {
right: 25px;
background: url(../../images/calendar/calendar-planner-sprite.svg) 24px -133px;
}
.calendar-planner-settings-icon:after,
.calendar-planner-add-icon:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 11px;
width: 11px;
cursor: pointer;
background: url(../../images/calendar/calendar-planner-sprite.svg) 24px -17px;
opacity: 0;
transition: opacity 0.5s ease;
}
.calendar-planner-add-icon:after {
background: url(../../images/calendar/calendar-planner-sprite.svg) 24px -145px;
}
.calendar-planner-settings-icon:hover:after,
.calendar-planner-add-icon:hover:after {
opacity: 1;
}
.calendar-planner-user-container-inner{
position: absolute;
top: 0;
left: 16px;
}
.calendar-planner-user-status-icon {
position: absolute;
top: 14px;
left: 14px;
display: inline-block;
height: 13px;
width: 13px;
border-radius: 50%;
background: url(../../images/calendar/calendar-planner-sprite.svg) #fff;
z-index: 2;
}
.calendar-planner-user-status-icon.user-status-h {
background-position: 24px -28px;
}
.calendar-planner-user-status-icon.user-status-y {
background-position: 24px -39px;
}
.calendar-planner-user-status-icon.user-status-q {
background-position: 24px -51px;
}
.calendar-planner-user-status-icon.user-status-n {
background-position: 24px -63px;
}
.calendar-planner-user-image-icon {
display: inline-block;
height: 24px;
width: 24px;
margin: -1px 5px 0 0;
border-radius: 50%;
/*background: url(../../images/calendar/calendar-planner-sprite.svg) 25px -107px;*/
/*background-size: contain;*/
vertical-align: middle;
}
.calendar-planner-entry-name {
font: var(--ui-font-weight-bold) 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 3px;
vertical-align: middle;
color: #525c69;
}
.calendar-planner-all-users {
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
max-width: 110px;
padding: 4px 3px 0 27px;
transition: color 0.4s ease;
cursor: pointer;
vertical-align: top;
}
.calendar-planner-all-users:hover {
color: #757677;
}
.calendar-planner-last-users{
transition: none!important;
cursor: default!important;
}
.calendar-planner-last-users:hover {
color: #9da2a9!important;
}
/* timeline */
.calendar-planner-timeline-wrapper {
overflow: auto;
white-space: nowrap;
position: relative;
overflow-y: hidden;
}
.calendar-planner-timeline-constraint.--lock {
display: flex;
overflow: hidden;
}
.calendar-planner-readonly .calendar-planner-timeline-constraint {
overflow: hidden;
}
.calendar-planner-timeline-constraint {
overflow-y: hidden;
}
.calendar-planner-timeline-constraint::-webkit-scrollbar {
/*
height is 7px, which is 15px - 2 * 4px
*/
height: 15px;
}
.calendar-planner-timeline-constraint::-webkit-scrollbar-thumb {
background: #d3d3d5;
border-radius: 1in;
border: 4px solid #0000;
background-clip: padding-box;
}
.calendar-planner-timeline-constraint::-webkit-scrollbar-thumb:hover {
background: #a4a4a5;
border: 4px solid #0000;
background-clip: padding-box;
}
.calendar-planner-timeline-wrapper.--lock .calendar-planner-timeline-inner-wrapper {
pointer-events: none;
}
.calendar-planner-timeline-inner-wrapper {
will-change: width;
}
.calendar-planner-acc-wrap {
background: #f4f6f7;
}
.calendar-planner-timeline-container {
position: relative;
padding: 10px 0 0 0;
background: #f4f6f7;
min-height: 32px !important;
}
.calendar-planner-compact .calendar-planner-timeline-container {
min-height: 32px !important;
height: 26px !important;
}
.calendar-planner-compact .calendar-planner-time {
height: auto !important;
}
/*temp hack for crm*/
.crm-activity-popup-calendar-planner-wrap .calendar-planner-compact .calendar-planner-timeline-container {
min-height: 26px !important;
height: 26px !important;
}
.calendar-planner-timeline-drag-left,
.calendar-planner-timeline-drag-right {
position: absolute;
display: inline-block;
width: 3px;
height: 100%;
cursor: e-resize;
z-index: 1000;
}
.calendar-planner-timeline-drag-left {
display: none;
left: 0;
}
.calendar-planner-timeline-drag-right {
right: 0;
}
.calendar-planner-timeline-selector,
.calendar-planner-timeline-selector-warning,
.calendar-planner-timeline-selector-repeater {
position: absolute;
top: 0;
display: inline-block;
width: 25px;
height: 100%;
background: rgba(59, 200, 245, .8);
border: 2px solid #fff;
border-radius: 3px;
transition: background .2s ease;
cursor: move;
z-index: 3;
-webkit-user-select: auto!important; /* Chrome all / Safari all */
-moz-user-select: text!important; /* Firefox all */
-ms-user-select: text!important; /* IE 10+ */
}
.calendar-planner-timeline-selector.solid
{
background: rgba(59, 200, 245, 1)!important;
}
.calendar-planner-readonly .calendar-planner-timeline-selector,
.calendar-planner-readonly .calendar-planner-timeline-drag-left,
.calendar-planner-readonly .calendar-planner-timeline-drag-right
{
cursor: default !important;
}
.calendar-planner-timeline-selector{
min-height: 38px;
}
.calendar-planner-compact .calendar-planner-timeline-selector {
min-height: 36px;
height: 36px;
}
.calendar-planner-timeline-selector-warning {
background: rgba(245,166,35, .8);
}
.calendar-planner-timeline-selector-repeater {
background: rgba(255,123,157, .5);
}
.calendar-planner-selector-notice {
position: absolute;
z-index: 1100;
top: -9px;
left: 50%;
padding: 2px 3px;
border: 1px solid rgba(170,174,181, .43);
background: #fff;
font: var(--ui-font-weight-bold) 10px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: #535c69;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-user-select: none!important; /* Chrome all / Safari all */
-moz-user-select: none!important; /* Firefox all */
-ms-user-select: none!important; /* IE 10+ */
}
.calendar-planner-timeline-selector .calendar-planner-selector-control {
z-index: 900;
}
.calendar-planner-selector-control-row {
position: absolute;
display: inline-block;
height: 25px;
width: 100%;
background: transparent;
cursor: default;
transition: 250ms all ease;
}
.calendar-planner-selector-control-row.hover {
background: rgba(58, 197, 244, .8)!important;
}
.calendar-planner-timeline-selector-warning .calendar-planner-selector-control-row.hover {
background: rgba(248, 174, 0, .8)!important;
}
.calendar-planner-selector-control-row.hover:before,
.calendar-planner-selector-control-row.hover:after {
content: '';
width: 1px;
height: 10px;
background: #fff;
border-radius: 1px;
position: absolute;
top: 6px;
left: calc(50% - 4px);
box-shadow: 3px 0 0 #fff,
6px 0 0 #fff;
}
.calendar-planner-selector-control-row.active {
background: #54cff6;
height: 16px;
border-radius: 4px;
margin-top: 4px;
}
.calendar-planner-timeline-selector-warning .calendar-planner-selector-control-row.active {background: #ffc636;}
.calendar-planner-selector-control-row.active:before,
.calendar-planner-selector-control-row.active:after
{
display: none!important;
}
.calendar-planner-repeater {
position: absolute;
bottom: 0;
left: 50%;
padding: 2px;
line-height: 12px;
border-radius: 50%;
background: #fff;
color: #fe5957;
font-weight: var(--ui-font-weight-bold);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.calendar-planner-timeline-selector-grip {
position: absolute;
top: 48%;
left: 50%;
height: 7px;
border-left: 1px solid rgba(255,255,255, .5);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.calendar-planner-timeline-selector-grip:before {
content: "";
position: absolute;
left: -5px;
top: 0;
height: 7px;
border-left: 1px solid rgba(255,255,255, .5);
}
.calendar-planner-timeline-selector-grip:after {
content: "";
position: absolute;
left: 3px;
top: 0;
height: 7px;
border-left: 1px solid rgba(255,255,255, .5);
}
.calendar-planner-timeline-space {
position: absolute;
height: 16px;
width: 100%;
background: #BBED21;
z-index: 2;
}
.calendar-planner-timeline-space-busy,
.calendar-planner-acc-entry {
position: absolute;
top: 0;
display: inline-block;
height: 16px;
border-radius: 4px;
background: #ff5556;
}
.calendar-planner-acc-entry-hr {
background: #04b4ab;
}
.calendar-planner-settings-popup {padding: 5px 5px 0;}
.calendar-planner-settings-row{margin: 0 0 5px 0;}
.calendar-planner-settings-row i {
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: #9da2a9;
line-height: 25px;
padding: 0 10px 0 15px;
}
.calendar-planner-option-container {
background: #eeeff1;
border-radius: 2px;
display: inline-block;
}
.calendar-planner-option-container-disabled .calendar-planner-option-tab:hover{
background: #eeeff1 !important;
}
.calendar-planner-option-container-disabled .calendar-planner-option-tab{
cursor: default;
}
.calendar-planner-option-tab {
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
display: inline-block;
line-height: 25px;
background: #eeeff1;
padding: 0 15px;
border-radius: 2px;
color: #535c69;
cursor: pointer;
transition: background 0.3s linear;
}
.calendar-planner-option-tab-active,
.calendar-planner-option-container-disabled .calendar-planner-option-tab-active:hover{
background: #bceefc !important;
}
.calendar-planner-option-tab:hover {
background: #bceefc;
}
.calendar-planner-unselectable{
-webkit-user-select: none!important; /* Chrome all / Safari all */
-moz-user-select: none!important; /* Firefox all */
-ms-user-select: none!important; /* IE 10+ */
}
/* Popup */
.calendar-planner-popup-arrow-left-item,
.calendar-planner-popup-arrow-right-item {
display: inline-block;
width: 15px;
height: 14px;
background: url(../../images/calendar/calendar-planner-sprite.svg) 25px -76px;
transition: opacity .3s ease;
opacity: .5;
cursor: pointer;
}
.calendar-planner-popup-arrow-right-item {
background: url(../../images/calendar/calendar-planner-sprite.svg) 25px -90px;
}
.calendar-planner-propose-link:hover .calendar-planner-popup-arrow-right-item,
.calendar-planner-popup-arrow-left-item:hover,
.calendar-planner-popup-arrow-right-item:hover {
opacity: 1;
}
.calendar-planner-warning{
display: none;
position: absolute;
left: 50%;
bottom: 2px;
margin-left: -10px;
}
.calendar-planner-warning-item {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: url(../../images/calendar/calendar-planner-sprite.svg) 25px -157px;
cursor: pointer;
}
.calendar-planner-timeline-selector-warning .calendar-planner-warning{
display: block;
}
.calendar-planner-readonly .calendar-planner-warning{
display: none !important;
}
.calendar-planner-selector-warning-popup {padding: 5px 5px 0;}
.calendar-planner-propose-link {
display: inline-block;
cursor: pointer;
font: var(--ui-font-weight-bold) 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: #9da2a9;
transition: color 0.4s ease;
}
.calendar-planner-propose-link:hover{
color: #757677;
}
.calendar-planner-propose-link .calendar-planner-propose-link-text {
display: inline-block;
vertical-align: top;
margin: -3px 0 0 0;
}
/* Arrows */
.calendar-planner-time-arrow-left,
.calendar-planner-time-arrow-right {
position: absolute;
z-index: 1000;
display: none;
padding: 0 8px;
height: 26px;
line-height: 24px!important;
border: 2px solid rgba(255,255,255, .8);
border-radius: 15px;
background: rgba(59,200,245, .8);
color: #fff;
vertical-align: top !important;
transition: background .3s ease;
cursor: pointer;
}
.calendar-planner-time-arrow-left:hover,
.calendar-planner-time-arrow-right:hover {
background: rgba(59,200,245, 1);
}
.calendar-planner-time-arrow-left-item,
.calendar-planner-time-arrow-right-item {
display: inline-block;
width: 15px;
height: 8px;
background: url(../../images/calendar/calendar-planner-sprite.svg?1) no-repeat;
vertical-align: top !important;
margin: 9px 0 0 8px!important;
}
.calendar-planner-time-arrow-left-item {
background-position: 0 -190px;
}
.calendar-planner-time-arrow-right{
top: 50%;
right: -9px;
}
.calendar-planner-time-arrow-right-item {
background-position: 0 -179px;
}
.calendar-planner-time-arrow-right-text {
display: inline-block;
font: var(--ui-font-weight-bold) 9px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
vertical-align: top !important;
text-transform: uppercase;
margin: 7px 0 0 0 !important;
}
.calendar-planner-readonly .calendar-planner-time-arrow-right{
display: none !important;
}
.calendar-planner-location-image-icon {
display: inline-block;
margin: -1px 5px 0 0;
width: 24px;
height: 24px;
border: 1px solid #f1f1f1;
border-radius: 50%;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2215%22%20viewBox%3D%220%200%2010%2015%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23D3D6D9%22%20d%3D%22M5%2C15%20C8.33333333%2C10.1742825%2010%2C6.84094917%2010%2C5%20C10%2C2.23857625%207.76142375%2C0%205%2C0%20C2.23857625%2C0%200%2C2.23857625%200%2C5%20C0%2C6.84094917%201.66666667%2C10.1742825%205%2C15%20Z%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%222%22%20fill%3D%22%23F9FAFA%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A) no-repeat center;
vertical-align: middle;
cursor: pointer;
}
.calendar-planner-users-more {
margin: 5px 0;
text-align: center;
}
.calendar-planner-users-more-btn,
.calendar-planner-users-last-btn {
display: inline-block;
width: 20px;
height: 10px;
border: 1px solid #c0c9d3;
border-radius: 1px;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%224%22%20viewBox%3D%220%200%2016%204%22%3E%0A%20%20%3Cg%20fill%3D%22%23999999%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%222%22%20cy%3D%222%22%20r%3D%222%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%222%22%20r%3D%222%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2214%22%20cy%3D%222%22%20r%3D%222%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A) no-repeat center;
opacity: .6;
cursor: pointer;
transition: 300ms all ease;
}
.calendar-planner-users-more-btn:hover {
border: 1px solid #b1b8c2;
opacity: 1;
}
.calendar-planner-main-container-resource .calendar-planner-timeline-container {
background: #fff;
}
.calendar-planner-main-container-resource .calendar-planner-timeline-selector {
background: rgba(59, 200, 245, .35);
border: none;
border-radius: 1px;
}
.calendar-planner-main-container-resource .calendar-planner-timeline-space {
background: #e4e4e4;
opacity: 0.5;
}
.calendar-planner-main-container-resource .calendar-planner-timeline-space-busy,
.calendar-planner-main-container-resource .calendar-planner-acc-entry {
background: #ff5752;
border-radius: 4px;
}
.calendar-planner-main-container-resource .calendar-planner-timeline-selector-warning {
background: rgba(255, 193, 61, 0.25);
}
.calendar-planner-main-container-resource .calendar-planner-user-image-icon {
width: 22px;
height: 22px;
}
.calendar-planner-main-container-resource .calendar-planner-entry-name {
margin-top: 0;
}
.calendar-planner-main-container-resource .calendar-planner-user-container {
margin-right: 2px;
padding-left: 15px;
}
.calendar-planner-main-container-resource .calendar-planner-user-container-inner {
left: 15px;
}
.calendar-planner-main-container-resource .calendar-planner-users-header {
padding: 6px 0 7px 0;
}
.calendar-planner-main-container-resource .calendar-planner-user {
display: flex;
align-items: center;
margin-top: 1px;
}
.calendar-planner-main-container-resource .calendar-planner-user-status-icon {
top: 12px;
}
.calendar-planner-main-container-resource .calendar-planner-time-day-title {
padding-left: 10px;
height: 27px;
box-sizing: border-box;
}
.calendar-planner-main-container-resource .calendar-planner-entry-name {
font-weight: normal;
}
.calendar-planner-user-container-inner-resource .calendar-planner-user {
display: flex;
align-items: center;
}
.calendar-planner-user-container-inner-resource .calendar-planner-user:last-child {
margin-bottom: 0;
}
.calendar-planner-main-container-resource .calendar-planner-time-hour-item:before,
.calendar-planner-main-container-resource .calendar-planner-day-start:before{
border-color: rgba(51, 51, 51, .1);
}
.calendar-planner-main-container-resource .calendar-planner-time-hour-item:before {
top: 16px;
}
.calendar-planner-main-container-resource .calendar-planner-day-start:before{
top: -27px;
}
.calendar-planner-main-container-resource .calendar-planner-timeline-wrapper {
height: 265px;
}
.calendar-planner-main-container-resource .calendar-planner-time {
height: 41px;
}
.calendar-planner-main-container-resource .calendar-planner-time-hour-item:after {
content: "";
position: absolute;
top: 23px;
left: 50%;
height: 10000px;
border-left: 1px solid rgba(51, 51, 51, .05);
z-index: 1;
}
.calendar-planner-fulldaymode .calendar-planner-time-hour-item:after {
display: none !important;
}
.calendar-planner-main-container-resource .calendar-planner-time-hour-item:last-child:after {
left: 44%;
}
.calendar-planner-main-container-resource .calendar-planner-users-header {
margin-top: 23px;
}
.calendar-planner-timeline-hover-row,
.calendar-planner-timeline-selected {
display: flex;
align-items: center;
position: absolute;
z-index: 999;
height: 26px;
border-radius: 3px;
transition: 300ms opacity ease;
border: 1px solid #3ac5f4;
pointer-events: none;
opacity: 1;
width: 550px;
box-sizing: border-box;
background: rgba(58, 197, 244, .1);
left: -4px;
}
.calendar-planner-main-container.calendar-planner-selector-warning .calendar-planner-timeline-hover-row,
.calendar-planner-main-container.calendar-planner-selector-warning .calendar-planner-timeline-selected
{
background: rgba(248, 174, 0, .1);
border-color: #f8ae00;
}
.calendar-planner-timeline-hover-row {
display: none;
background: none;
}
.calendar-planner-timeline-hover-row.show {
display: flex;
}
.calendar-planner-timeline-selected-busy {
background: rgba(248, 174, 0, .1);
border-color: #f8ae00;
}
.calendar-planner-timeline-selected-free {
background: rgba(58, 197, 244, .1);
border-color: #3ac5f4;
top: 116px;
left: 9px;
}
.calendar-planner-timeline-selected-item {
width: 48px;
height: 100%;
position: absolute;
}
.calendar-planner-timeline-selected-busy .calendar-planner-timeline-selected-item {
background: rgba(248, 174, 0, .8);
top: 0;
left: 225px;
}
.calendar-planner-timeline-selected-free .calendar-planner-timeline-selected-item {
background: rgba(58, 197, 244, .8);
top: 0;
left: 361px;
}
.calendar-planner-timeline-selected-item-time {
background: #fff;
border: 1px solid #e4e6e8;
border-radius: 2px;
color: #80868e;
font-size: 9px;
line-height: 14px;
padding: 0 2px;
position: absolute;
top: -19px;
left: 355px;
}
.calendar-planner-timeline-selected-item:before, .calendar-planner-timeline-selected-item:after {
content: '';
width: 1px;
height: 10px;
background: #fff;
border-radius: 1px;
position: absolute;
top: 6px;
left: 21px;
box-shadow: 3px 0 0 #fff,
6px 0 0 #fff;
}
.calendar-planner-timeline-selected-free .calendar-planner-timeline-selected-item-hover {
left: 459px;
height: 16px;
margin-top: 4px;
border-radius: 3px;
box-sizing: border-box;
}
.calendar-planner-timeline-selected-item-hover:before, .calendar-planner-timeline-selected-item-hover:after {
content: none;
}
.calendar-planner-timeline-selected.show{
opacity: 1;
}
.calendar-planner-timeline-blocks {
display: flex;
position: relative;
}
.calendar-planner-timeline-item {
font-size: 11px;
line-height: 19px;
min-width: 40px;
box-sizing: border-box;
height: 28px;
overflow: hidden;
cursor: pointer;
}
.calendar-planner-timeline-item-time {
padding: 5px 8px;
display: inline-block;
vertical-align: middle;
min-width: 40px;
box-sizing: border-box;
}
.calendar-planner-timeline-item-selected {
color: #fff;
background: #42caf5;
pointer-events: none;
}
.calendar-planner-timeline-item-busy .calendar-planner-timeline-item-time {
background: #ff5752;
opacity: 0.5;
color: #333;
padding: 0 20px 0 8px;
border-radius: 20px;
margin-top: 5px;
}
.calendar-planner-timeline-item-select-busy .calendar-planner-timeline-item-time {
background: #ffc636;
border: 2px solid #f5f4ef;
opacity: 0.9;
padding: 0 8px;
margin-top: 5px;
line-height: 15px;
position: absolute;
left: 208px;
}
.calendar-planner-timeline-selected .calendar-planner-user {
margin-left: 6px;
margin-bottom: 0;
}
.calendar-planner-users-link-resource {
vertical-align: middle;
color: #525c69;
font-size: 13px;
}
.calendar-planner-resource-header {
padding-bottom: 3px;
cursor: pointer;
margin-top: 10px;
}
.calendar-planner-user-container-resource {
padding: 0;
}
/*.calendar-planner-timeline-hover-row,*/
/*.calendar-planner-timeline-picked {*/
/*background: transparent;*/
/*border: 1px solid #8adffa;*/
/*height: 24px;*/
/*margin-left: -3px;*/
/*border-radius: 3px;*/
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*z-index: 999;*/
/*pointer-events: none;*/
/*}*/
.calendar-planner-timeline-wrapper {
scrollbar-track-color: #f5f5f5;
scrollbar-base-color: #b3b3b4;
scrollbar-shadow-color: #b3b3b4;
scrollbar-highlight-color: #b3b3b4;
}
.calendar-planner-timeline-wrapper::-webkit-scrollbar {
height: 7px;
}
.calendar-planner-timeline-wrapper::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 3px;
}
.calendar-planner-timeline-wrapper::-webkit-scrollbar-thumb {
background: #d3d3d5;
border-radius: 3px;
}
.calendar-planner-timeline-wrapper::-webkit-scrollbar-thumb:hover {
background: #b3b3b4;
}
.calendar-planner-settings-icon-container {
position: absolute;
bottom: 0;
left: 0;
/*width: 18px;*/
/*height: 18px;*/
/*background: #fff;*/
box-shadow: 0 0 10px 3px #fff;
z-index: 999;
cursor: pointer;
}
.calendar-planner-settings-icon-container .calendar-planner-settings-icon {
right: -15px;
top: 1px;
}
.calendar-planner-settings-icon-container .calendar-planner-settings-title {
font: normal 11px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: #9da2a9;
}
.calendar-planner-time-day-border {
position: absolute;
top: 44px;
right: 0;
height: 10000px;
border-left: 1px solid rgba(51, 51, 51, .1);
z-index: 3;
width: 10px;
background: #fff;
box-sizing: border-box
}
.calendar-planner-time-day-outer:first-child:before {
content: none;
}
.calendar-planner-main-container-resource .calendar-planner-time-hour-item:last-child {
min-width: 59px;
width: 59px;
}
.calendar-resbook-planner-popup .calendar-loader {
position: absolute;
top: calc(50% - 50px);
left: 50%;
}
.calendar-planner-entry-icons-only .calendar-planner-user-container-inner {
left: 15px;
}
.calendar-planner-entry-icons-only .calendar-planner-user-container {
width: 70px!important;
}
.calendar-planner-entry-icons-only .calendar-planner-user-container .calendar-planner-header{
display: none;
}
.calendar-planner-main-loader {
position: absolute !important;
top: 62px;
left: 50%;
}
.calendar-planner-user .ui-icon-common-user-mail > i {
background-color: #f7a700;
}
.calendar-planner-timeline-locker {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,.92);
z-index: 9;
}
.calendar-planner-timeline-locker-container {
display: inline-flex;
flex-direction: column;
align-items: center;
max-width: 250px;
white-space: normal;
}
.calendar-planner-timeline-locker-icon {
display: block;
min-width: 23px;
height: 23px;
margin-right: 12px;
background: #2fc6f6 url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.932' height='11.963' viewBox='0 0 8.932 11.963'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M4.98103365,10.134027 L3.9514285,10.134027 L3.9514285,8.8514095 C3.76612808,8.70242223 3.64750414,8.47479057 3.64750414,8.21958149 C3.64750414,7.77070154 4.01408221,7.40681791 4.46624691,7.40681791 C4.91837993,7.40681791 5.28495801,7.77070154 5.28495801,8.21958149 C5.28495801,8.47479057 5.16636574,8.70242223 4.98103365,8.8514095 L4.98103365,10.134027 Z M2.22471367,3.40123649 C2.22471367,2.17226451 3.22828173,1.17598686 4.46621524,1.17598686 C5.70418041,1.17598686 6.70774848,2.17226451 6.70774848,3.40123649 L6.70774848,5.01077952 L2.22471367,5.01077952 L2.22471367,3.40123649 Z M7.8923408,5.01077952 L7.8923408,3.40123649 C7.8923408,1.52276431 6.35840176,0 4.46621524,0 C2.57406039,0 1.04012135,1.52276431 1.04012135,3.40123649 L1.04012135,5.01077952 L-2.54019028e-13,5.01077952 L-2.54019028e-13,11.9630988 L8.93246215,11.9630988 L8.93246215,5.01077952 L7.8923408,5.01077952 Z'/%3E%3C/svg%3E") center no-repeat;
border-radius: 100%;
}
.calendar-planner-timeline-locker-top {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.calendar-planner-timeline-text {
font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
font-size: 14px;
color: #333;
line-height: 19px;
}
.expand-width-0-40 {
animation: expand-width-0-40 0.2s linear;
}
@keyframes expand-width-0-40 {
from {
min-width: 0;
width: 0;
}
to {
min-width: 40px;
width: 40px;
}
}