/*body {
	font-size: 16px;
}*/
.mmxcal__overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 101;
  background-color: rgba(255, 255, 255, 0.5);
}

.mmxcal__area {
  position: absolute;
  width: 223px;
  margin: 0 auto;
  z-index: 102;
  top: 0;
}

.mmxcal__input1 {
  position: relative;
  display: block;
  width: 100%;
}

.mmxcal {
  display: flex;
  flex-direction: column;
  background: rgb(248, 248, 248);
  width: 100%;
  padding: 5px;
  position: relative;
}

.mmxcal__control {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: rgb(248, 248, 248);
  /* border-radius: 4px; */
  padding: 4px;
  border: 1px solid rgb(172, 169, 169);
}
.mmxcal__control:not(:first-child) {
  border-top: none;
}

.mmxcal__calendar {
  display: flex;
  flex-direction: column;
}

.mmxcal__selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.mmxcal__selector:last-child {
  margin-bottom: 0;
}

.mmxcal__selector_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 24px;
  border-radius: 2px;
  background: #eee;
  cursor: pointer;
}
.mmxcal__selector_btn:hover {
  background: rgb(223, 223, 223);
}

.mmxcal__selector_content {
  display: flex;
  justify-content: center;
  font-size: 14px;
}

.mmxcal__month {
  display: flex;
  flex-direction: column;
}

.mmxcal__week {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.mmxcal__day,
.mmxcal__int {
  text-align: center;
  width: 14.2857142857%;
  border: 1px solid transparent;
  padding: 3px 0;
  background: #eeeeee;
  font-size: 12px;
  box-sizing: border-box;
}

.mmxcal__day.weekend {
  background: #dfc9c9;
}

.mmxcal__dates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.mmxcal__int {
  cursor: pointer;
}
.mmxcal__int:hover {
  background: #dfdfdf;
}
.mmxcal__int.active {
  background: rgb(181, 180, 240);
}
.mmxcal__int.disabled {
  background: rgb(248, 248, 248);
  cursor: auto;
  color: lightgrey;
}
.mmxcal__int.othermonth {
  background: rgb(248, 248, 248);
  color: darkgrey;
}
.mmxcal__int.today {
  border: 1px solid red;
}
.mmxcal__int.current {
  background-color: var(--admin-color-lite);
}

.mmxcal__toggler {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mmxcal__togglerBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14.2857142857%;
  padding: 3px 0;
  cursor: pointer;
  font-size: 12px;
}
.mmxcal__togglerBtn:hover {
  background: rgb(223, 223, 223);
}

.mmxcal__buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.mmxcal__buttonsBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  padding: 3px 0;
  cursor: pointer;
  font-size: 16px;
}
.mmxcal__buttonsBtn:hover {
  background: rgb(223, 223, 223);
}

.mmxcal__timer {
  display: flex;
  flex-direction: column;
  margin: 1px;
}

.mmxcal__timerHeader {
  display: flex;
  justify-content: center;
  padding-bottom: 5px;
}

.mmxcal__clockOuter {
  width: 100%;
  padding-top: 100%;
  position: relative;
}

.mmxcal__hourcell {
  width: 16.66%;
}

.mmxcal__minutecell {
  width: 9.99%;
}

.mmxcal__hourcell, .mmxcal__minutecell {
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #eee;
  font-size: 12px;
  cursor: pointer;
}
.mmxcal__hourcell.current, .mmxcal__minutecell.current {
  background-color: var(--admin-color-lite);
}

.mmxcal__grid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 1.1em;
}

.mmxcal__clock {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.mmxcal__clockRing1 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: var(--admin-color-lite);
  z-index: 1;
}

.mmxcal__clockRing2 {
  position: absolute;
  top: 12.5%;
  right: 12.5%;
  bottom: 12.5%;
  left: 12.5%;
  border-radius: 50%;
  background: var(--admin-color-main);
  z-index: 2;
}

.mmxcal__clockRing3 {
  position: absolute;
  top: 22.5%;
  right: 22.5%;
  bottom: 22.5%;
  left: 22.5%;
  border-radius: 50%;
  background: var(--admin-color-dark);
  z-index: 3;
}

.mmxcal__clockFace {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("/admin/elements/clockface.png");
  background-size: contain;
  z-index: 4;
}

.mmxcal__input-default {
  width: calc(26ch + 2em);
}

/*.mmxcal__clockItem {
	width: 30px;
	height: 50%;
	left: 50%;
	margin-left: -15px;
	display: flex;
	justify-content: center;
	transform-origin: bottom center;
	//transform: rotate(0deg);
	position: absolute;

	span {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		width: 20px;
		height: 20px;
		// background: rgb(238, 178, 178);
		font-size: 16px;
		color: #000;

		&:hover {
			color: rgb(255, 0, 0);
		}
	}
}
.mmxcal__clockRing1 .mmxcal__clockItem span {
    font-size: 16px;
}

.mmxcal__clockRing2 .mmxcal__clockItem span, .mmxcal__clockRing3 .mmxcal__clockItem span {
    font-size: 12px;
}

@for $i from 0 through 11 {
    .rotHash{$i}of12 {
        transform: rotate(30deg * $i);
        span {
            transform: rotate(-30deg * $i);
        }
    }
}

@for $i from 0 through 23 {
    .rotHash{$i}of24 {
        transform: rotate(15deg * $i);
        span {
            transform: rotate(-15deg * $i);
        }
    }
}

@for $i from 0 through 59 {
    .rotHash{$i}of60 {
        transform: rotate(6deg * $i);
        span {
            transform: rotate(-6deg * $i);
        }
    }
}

@for $i from 0 through 11 {
    .rotHash{$i * 5}ofNice60 {
        transform: rotate(30deg * $i);
        span {
            transform: rotate(-30deg * $i);
        }
    }
    @for $j from 1 through 4 {
        .rotHash{($i * 5 + $j)}ofNice60 {
            transform: rotate(Hash{($i * 30 + $j * 4 + 5.5)}deg);
            span {
                transform: rotate(Hash{-($i * 30 + $j * 4 + 5.5)}deg);
            }
        }
    }
}

.mmxcal__minutes {
	position: absolute;
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	border-radius: 50%;
	background: rgb(247, 94, 247);
	z-index: 3;
	display: none;
}
*/