.mycalendar {
  /*overflow: hidden;*/
  font-family: Arial, sans-serif;
}

.mycalendar .toolbar {
  background: url('img/calendar_toolbar_bg.png') top left no-repeat #838383;
  height: 41px;
}

.mycalendar .toolbar .button {
  background: url('img/calendar_toolbar.png');
  width: 38px;
  /*height: 38px;*/
  height: 100%;
  margin-left: 2px;
  display: inline-block;
}

.mycalendar .toolbar .button:hover,
.mycalendar .toolbar .button.active {
  background-image: url('img/calendar_toolbar_active.png');
}

.mycalendar .toolbar .button.inactive {
  background-image: url('img/calendar_toolbar_inactive.png');
}

.mycalendar .toolbar .button.prev {
  margin-left: 9px;
  background-position: -9px 0;
}

.mycalendar .toolbar .button.next {
  background-position: -49px 0;
}

.mycalendar .toolbar .button.today {
  background-position: -89px 0;
}

.mycalendar .toolbar .button.zoom-in {
  background-position: -129px 0;
}

.mycalendar .toolbar .button.zoom-out {
  background-position: -169px 0;
}

.mycalendar .toolbar .button.one {
  margin-left: 27px;
  background-position: -233px 0;
}

.mycalendar .toolbar .button.five {
  background-position: -273px 0;
}

.mycalendar .toolbar .button.seven {
  background-position: -313px 0;
}

.mycalendar .toolbar .button.thirty-one {
  background-position: -353px 0;
}

.mycalendar .toolbar .button.delete {
  margin-left: 23px;
  background-position: -415px 0;
}

.mycalendar .ribbon {
  min-height: 91px;
  background: #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
}

/* .mycalendar .ribbon .button {
	padding: 0 5px;
	height: 79px;
	display: inline-block;
	text-align: center;
    vertical-align: top;
} */

.mycalendar .ribbon .button {
  position: unset !important;
  top: unset !important;
  width: unset !important;
  height: unset !important;
  margin: 0 !important;
  overflow: unset !important;

  padding: 0 5px;
  height: 79px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

.mycalendar .ribbon .button.hover {
  background-color: #cccccc;
}

.mycalendar .ribbon .button.active {
  background-color: #adadad;
}

.mycalendar .ribbon .icon {
  background: url('img/calendar1.png') no-repeat center;
  height: 32px;
  width: 32px;
  display: inline-block;
  margin-top: 5px;
}

.mycalendar .ribbon .new-series .icon {
  background-image: url('img/calendar2.png');
}

.mycalendar .ribbon .back .icon {
  background-image: url('img/calendar3.png');
}

.mycalendar .ribbon .next .icon {
  background-image: url('img/calendar4.png');
}

.mycalendar .ribbon .today .icon {
  background-image: url('img/calendar5.png');
}

.mycalendar .ribbon .day1 .icon,
.mycalendar .ribbon .day2 .icon {
  background-image: url('img/calendar6.png');
}

.mycalendar .ribbon .work .icon {
  background-image: url('img/calendar7.png');
}

.mycalendar .ribbon .scale .icon {
  background-image: url('img/calendar8.png');
}

.mycalendar .ribbon .work-times .icon {
  background-image: url('img/calendar9.png');
}

.mycalendar .ribbon .set-times .icon {
  background-image: url('img/calendar10.png');
}

.mycalendar .ribbon .delete .icon {
  background-image: url('img/calendar11.png');
}

.mycalendar .ribbon .week .icon {
  background-image: url('img/calendar12.png');
}

.mycalendar .ribbon .month .icon {
  background-image: url('img/calendar13.png');
}

.mycalendar .ribbon .section {
  /*height: 100%;*/
  display: inline-block;
  position: relative;
  /*float: left;*/
  vertical-align: top;
  min-height: 71px;
  padding-bottom: 12px;
}

/*.mycalendar .ribbon .section + .section {
	border-left: 1px solid #c4c4c4;
}*/

.mycalendar .ribbon .divider {
  display: inline-block;
  border-left: 1px solid #c4c4c4;
  height: 69px;
  top: 10px;
  position: relative;
  /*float: left;*/
  vertical-align: top;
}

.mycalendar .ribbon .section .label {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.mycalendar .clickshield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.mycalendar.view-month .ribbon .section.scale,
.mycalendar.view-month .ribbon .section.scale + .divider,
.mycalendar.view-month .ribbon .section.toggle-work,
.mycalendar.view-month .ribbon .section.toggle-work + .divider,
.mycalendar.view-month .ribbon .section.set-work,
.mycalendar.view-month .ribbon .section.set-work + .divider {
  display: none;
}

.mycalendar .scale-dropdown {
  position: absolute;
  /*width: 200px;*/
  /*height: 200px;*/
  background: white;
  border: 1px solid #a2a2a2;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.mycalendar .scale-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mycalendar .scale-dropdown li {
  padding: 8px 15px 8px 40px;
  font-size: 14px;
  position: relative;
  white-space: nowrap;
}

.mycalendar .scale-dropdown li:hover {
  background: #a2a2a2;
}

.mycalendar .scale-dropdown li.selected::before {
  content: '✔';
  position: absolute;
  left: 15px;
  top: 50%;
  font-size: 20px;
  vertical-align: middle;
  line-height: 0;
}

.mycalendar .crossday {
  position: relative;
  background: #f0f3f8;
  /*padding-left: 54px;*/
  border-left: 54px solid #333333;
  border-bottom: 1px solid #484848;
  border-right: 1px solid #666666;
}

.mycalendar .crossday::before {
  content: '';
  border-left: 1px solid gray;
  height: 100%;
  /*height: calc(100% - 1px);*/
  left: -54px;
  position: absolute;
  width: 53px;
  background: white;
}

.mycalendar .crossday .day {
  /*display: inline-block;*/
  position: absolute;
  /*background: #f0f3f8;*/
  height: 100%;
  /*padding-bottom: 9px;*/
  border-left: 1px solid #cfcfcf;
}

.mycalendar .headrow {
  position: relative;
  height: 24px;
  line-height: 24px;
  font-size: 15px;
  /*color: white;*/
  color: #323232;
  text-align: center;
  /*background: #717171;*/
  background: #f0f0f0;
  /*border: 1px solid #484848;*/
  border: 1px solid #a6a6a6;
}

.mycalendar .headrow .day {
  position: absolute;
  /*border-left: 1px solid #646464;*/
  border-left: 1px solid #a6a6a6;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 5px;
  box-sizing: border-box;
}

.mycalendar .headrow .day.today {
  background-color: #c0dcf1;
}

.mycalendar .scroller {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #666666;
  border-bottom: 1px solid #666666;
}

.mycalendar .rows {
  position: relative;
}

.mycalendar .row {
  border-top: 1px solid #cfcfcf;
  /*background: white;*/
  background: #f0f0f0;
  position: absolute;
  width: calc(100% - 54px);
  left: 54px;
  box-sizing: border-box;
}

.mycalendar .row.odd {
  border-top-color: #dfe1e3;
}

.mycalendar .row .selection {
  height: 100%;
  background-color: #cfcfcf;
  position: absolute;
}

.mycalendar .row.selected {
  background-color: #fdf6db;
}

.mycalendar .timescale {
  position: absolute;
  width: 52px;
  border: 1px solid #484848;
  border-top: none;
  border-bottom: none;
  /*background: #333333;*/
  background: white;
}

.mycalendar .timescale .pointer {
  position: absolute;
  left: 0;
  /*width: 52px;*/
  width: 9999px;
  z-index: 1;
  pointer-events: none;
  height: 2px;
  /*background: red;*/
  background: #95c6ea;
  margin-top: -1px;
}

.mycalendar .timescale .tick {
  /*border-top: 1px solid #a0a0a0;*/
  border-top: 1px solid transparent;
  text-align: right;
  position: relative;
  left: 0;
  width: 100%;
  top: 0 !important;
}

.mycalendar .timescale .tick::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 0;
  border-top: 1px solid #cfcfcf;
  width: 66%;
}

.mycalendar .timescale .time {
  /*line-height: 24px;*/
  /*vertical-align: bottom;*/
  /*padding-top: 8px;*/
  color: #645c4e;
  display: inline-block;
  padding-top: 4px;
}

.mycalendar .timescale .time .hours {
  padding-right: 8px;
  text-align: left;
  font-size: 20px;
  vertical-align: top;
  line-height: 100%;
}

.mycalendar .timescale .time .mins {
  display: inline-block;
  width: 16px;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
  line-height: 100%;
}

.mycalendar .timescale .tick.odd {
  margin-left: 36px;
}

.mycalendar .events {
  position: absolute;
  /*margin-left: 54px;*/
  top: 0;
  left: 54px;
  width: calc(100% - 54px);
  pointer-events: none;
}

.mycalendar .events .event {
  pointer-events: auto;
  box-sizing: border-box;
}

.mycalendar .events .day {
  position: absolute;
  height: 100%;
  border-left: 1px solid #cfcfcf;
  box-sizing: border-box;
}

.mycalendar .weekview .day {
  position: absolute;
  background: white;
  border-left: 1px solid #cfcfcf;
  overflow: hidden;
}

.mycalendar .weekview .day .more,
.mycalendar .monthview .day .more {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #777;
  background: #aaa;
  color: #333;
  opacity: 0.66;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
}

.mycalendar .weekview .event,
.mycalendar .monthview .event,
.mycalendar .crossday .event {
  position: relative;
  background-position: 4px 3px;
  box-shadow: none;
  white-space: nowrap;
}

.mycalendar .crossday .event {
  position: absolute;
  box-sizing: border-box;
}

.mycalendar .crossday .event.leftarrow,
.mycalendar .crossday .event.rightarrow {
  text-align: center;
  background-image: none;
}

.mycalendar .crossday .event .leftarrow,
.mycalendar .crossday .event .starttime {
  float: left;
}

.mycalendar .crossday .event .label {
  padding-left: 2px;
}

.mycalendar .crossday .event.recurring.leftarrow .label,
.mycalendar .crossday .event.recurring.rightarrow .label {
  background-repeat: no-repeat;
  background-image: url('img/refresh.svg');
  background-position: left top;
  background-size: 16px;
  padding-left: 20px;
  display: inline-block;
  width: auto;
}

.mycalendar .weekview .event span,
.mycalendar .monthview .event span,
.mycalendar .crossday .event span {
  top: 1px;
}

.mycalendar .weekview .header {
  background: #717171;
  text-align: right;
  color: white;
  line-height: 25px;
  font-size: 12px;
  border: 1px solid #646464;
}

.mycalendar .weekview .header span {
  padding-right: 4px;
}

.mycalendar .monthview .day {
  position: absolute;
  /*background: white;*/
  background: #f0f0f0;
  border-left: 1px solid #cfcfcf;
  border-bottom: 1px solid #cfcfcf;
  overflow: hidden;
}

.mycalendar .monthview .day.selected {
  background: #cfcfcf;
}

.mycalendar .monthview .header {
  font-size: 12px;
  text-align: right;
  color: #787a7c;
  padding-right: 3px;
}

.mycalendar .event {
  position: absolute;
  background: yellow no-repeat 4px 6px;

  /*opacity: 0.66;*/
  /*border-radius: 3px;*/
  /*border: 1px solid black;*/
  /*box-shadow: 4px 4px rgba(0,0,0,0.15);*/
  overflow: hidden;
  font-size: 12px;
  /*white-space: nowrap;*/
  word-wrap: break-word;
  padding: 1px;
  margin: 0;
  color: black;
  line-height: 18px;
  min-height: 18px;
  border-radius: 0;
  padding-left: 12px;
}

.mycalendar .event::before {
  content: '';
  position: absolute;
  background: white;
  top: 0;
  left: 0;
  height: 100%;
  width: 10px;
  border-right: 1px solid gray;
}

.mycalendar .event.recurring {
  background-image: url('img/refresh.svg');
  background-position: right 2px bottom 2px;
  background-size: 16px;
  /*text-indent: 20px;*/
}

.mycalendar .event.cut-start {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: transparent !important;
}

.mycalendar .event.cut-end {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent !important;
}

.mycalendar .event.selected {
  /*padding: 0;*/
  /*border-width: 2px;*/
  /*border: 2px solid black !important;*/
  /*padding-left: 11px;*/
  /*outline: 2px solid black;*/
  /*outline-offset: -2px;*/
}

.mycalendar .event.selected::after {
  content: '';
  border: 2px solid black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mycalendar .event .icon.refresh {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('img/refresh.png') no-repeat;
  /*margin: 4px 0 0 4px;*/
  /*vertical-align: middle;*/
  padding: 0 4px 4px 0;
  float: left;
}

.mycalendar .event .recurring {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('img/refresh.png') no-repeat;
  padding: 0 4px 0 0;
}

.mycalendar .event span {
  position: relative;
  left: 1px;
  top: 4px;
  /*
	padding: 4px 0 0 4px;
	vertical-align: middle;
	display: inline-block;
	width: 100%;
	*/
}

.mycalendar .event span.text {
  float: left;
}

.mycalendar .crossday .event > * {
  /*float: left;*/
}

.mycalendar .event .label {
  width: 0;
}

.mycalendar .event .leftarrow {
  /*background: url("img/arrow_left.png") no-repeat;*/
  background: url('img/arrow_left.svg') no-repeat left center;
  background-size: 12px;
  padding-left: 20px;
  padding-right: 4px;
}

.mycalendar .event .rightarrow {
  /*background: url("img/arrow_right.png") no-repeat;*/
  background: url('img/arrow_right.svg') no-repeat;
  /*background-position: right center;*/
  background-position: right 2px center;
  background-size: 12px;
  background-color: inherit;
  padding-left: 4px;
  /*padding-right: 20px;*/
  padding-right: 24px;
  float: right;
}

.mycalendar .event .starttime {
  padding-right: 5px;
}

.mycalendar .event .endtime {
  background-color: inherit;
  padding-left: 5px;
  padding-right: 3px;
  float: right;
}

.work-time-wrapper {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.work-time-wrapper .dialog {
  /*width: 400px;*/
  /*height: 200px;*/
  background: #e6e6e6;
  position: relative;
  padding: 10px;
  border: 1px solid black;
}

.work-time-wrapper .label {
  display: inline-block;
  width: 80px;
}

.work-time-wrapper .input {
  display: inline-block;
}

.work-time-wrapper input {
  width: 80px;
  text-align: center;
  user-select: none;
}
.work-time-wrapper .buttons {
  display: flex;
  margin-top: 20px;
}

.work-time-wrapper .buttons button {
  flex: 1;
}

.work-time-wrapper .buttons button + button {
  margin-left: 10px;
}