/* add styles for project controls here */

.ServiceCalendar-root {
    padding: 0.5rem;
}
.ServiceCalendar-root * {
    box-sizing: border-box;
}

.ServiceCalendar-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.ServiceCalendar-navigation .ServiceCalendar-dateDisplay {
    font-size: var(--text-xl);
}
.ServiceCalendar-navigation .button-button {
    width: auto;
}

.ServiceCalendar-columns {
    display: flex;
}

.ServiceCalendar-column {
    position: relative;
    flex-grow: 1;
    border-right: 1px solid var(--gray-500);
}
.ServiceCalendar-column div:first-child {
    border-top: 1px solid var(--gray-500);
}
.ServiceCalendar-column:first-child {
    border-left: 1px solid var(--gray-500);
    flex-grow: 0;
}
.ServiceCalendar-column:first-child div:first-child {
    border-bottom: 1px solid var(--gray-500);
}
.ServiceCalendar-column:first-child .ServiceCalendar-slot {
    text-align: right;
    padding: 0 1rem;
}

.ServiceCalendar-headerDay {
    text-align: center;
    border-bottom: 1px solid var(--gray-500);
}

.ServiceCalendar-headerToday {
    color: var(--red-500);
}

.ServiceCalendar-slot {
    border-bottom: 1px solid var(--gray-500);
    background-color: white;
}
.ServiceCalendar-slot.disabled {
    background-color: var(--gray-700);
}
.ServiceCalendar-slot.disabled:hover {
    cursor: not-allowed;
}

.ServiceCalendar-item {
    position: absolute;
    font-size: 12px;
    padding: 1px;
    border: 1px solid white;
    overflow: hidden;
}
.ServiceCalendar-item.narrow {
    font-size: 10px;
    padding: 1px;
    hyphens: auto;
}

.ServiceCalendar-item.selected {
    outline: 4px dashed var(--gray-800);
    z-index: 1000;
}

.ServiceCalendar-item.blue {
    color: var(--gray-100);
    background-color: var(--blue-700);
}
.ServiceCalendar-item.red {
    color: var(--gray-100);
    background-color: var(--red-700);
}
.ServiceCalendar-item.orange {
    color: var(--gray-100);
    background-color: var(--orange-700);
}
.ServiceCalendar-item.purple {
    color: var(--gray-100);
    background-color: var(--purple-700);
}
.ServiceCalendar-item.green {
    color: var(--gray-100);
    background-color: var(--green-700);
}

.ServiceCalendar-item.yellow {
    color: var(--gray-900);
    background-color: var(--yellow-500);
}
.ServiceCalendar-item.teal {
    color: var(--gray-100);
    background-color: var(--teal-700);
}
.ServiceCalendar-item.indigo {
    color: var(--gray-100);
    background-color: var(--indigo-700);
}
.ServiceCalendar-item.purple {
    color: var(--gray-100);
    background-color: var(--purple-700);
}
.ServiceCalendar-item.pink {
    color: var(--gray-100);
    background-color: var(--pink-700);
}
.ServiceCalendar-item.lightBlue {
    color: var(--gray-900);
    background-color: var(--blue-300);
}
.ServiceCalendar-item.lightRed {
    color: var(--gray-900);
    background-color: var(--red-300);
}
.ServiceCalendar-item.lightOrange {
    color: var(--gray-900);
    background-color: var(--orange-300);
}
.ServiceCalendar-item.lightYellow {
    color: var(--gray-900);
    background-color: var(--yellow-300);
}
.ServiceCalendar-item.lightGreen {
    color: var(--gray-900);
    background-color: var(--green-300);
}
.ServiceCalendar-item.lightTeal {
    color: var(--gray-900);
    background-color: var(--teal-300);
}
.ServiceCalendar-item.lightIndigo {
    color: var(--gray-900);
    background-color: var(--indigo-300);
}
.ServiceCalendar-item.lightPurple {
    color: var(--gray-900);
    background-color: var(--purple-300);
}
.ServiceCalendar-item.lightPink {
    color: var(--gray-900);
    background-color: var(--pink-300);
}
.ServiceCalendar-item.gray {
    color: var(--gray-700);
    background-color: var(--gray-200);
}
.ServiceCalendar-item.pending {
    color: #ff0000;
    background-color: #ffbb00;;
}

.ServiceCalendar-button {
    background-color: white;
    box-shadow: var(--shadow);
    border-style: solid;
    border-width: 1px;
    border-color: var(--gray-300);
    border-radius: 1.25rem;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray-700);
    font-size: 0.75rem;
    position: absolute;
    bottom: 0.25rem;
    left: 0.25rem;
}
.ServiceCalendar-button:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.ServiceCalendar-button.cancel {
    display: none;
}
.ServiceCalendar-item.selected .ServiceCalendar-button.cancel {
    display: flex;
}
.ServiceCalendar-moving .ServiceCalendar-button.move {
    display: none;
}

.ServiceCalendar-moving .ServiceCalendar-slot {
    opacity: 0.8;
}
.ServiceCalendar-moving .ServiceCalendar-slot:not(.disabled):hover {
    background-color: var(--gray-200);
    cursor: pointer;
    opacity: 1;
}
.ServiceCalendar-moving .ServiceCalendar-item:not(.selected) {
    z-index: -1;
}

.Calendar-root {
    overflow-y: scroll;
}

.Calendar-header {
    display: none;
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--gray-400);
    background-color: white;
    box-shadow: var(--shadow);
    z-index: 40;
}

.Calendar-monthView .Calendar-header {
    display: flex;
}

.Calendar-headerDay {
    flex: 1 1 0%;
    text-align: right;
    font-weight: bold;
    padding: 0.5rem;
    border-right: 1px solid var(--gray-400);
    overflow: hidden;
    white-space: nowrap;
}

.Calendar-week {
    
}

.Calendar-monthView .Calendar-week {
    display: flex;
    border-bottom: 1px solid var(--gray-400);
}

.Calendar-day {
    flex: 1 1 0%;
    padding: 0.5rem;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--gray-400);
}

.Calendar-monthView .Calendar-day {
    display: block;
    border-bottom: none;
    border-right: 1px solid var(--gray-400);
}

.Calendar-dayDropTarget {
    background-color: var(--gray-200);
}

.Calendar-dayHolidayAndNumber {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Calendar-holidayWrapper {
    flex: 1 1 0%;
    overflow: hidden;
}

.Calendar-holiday {
    color: var(--gray-600);
    font-size: var(--text-sm);
    font-style: italic;
    white-space: nowrap
}

.Calendar-dayNumber {
    flex: 0 0 min-content;
    text-align: right;
    white-space: nowrap;
    margin-left: 0.5rem;
}

.Calendar-dayNumberWeekday {
    display: inline;
}

.Calendar-monthView .Calendar-dayNumberWeekday {
    display: none;
}

.Calendar-dayNumberMonth {
    display: inline;
}

.Calendar-monthView .Calendar-dayNumberMonth {
    display: none;
}

.Calendar-monthView .Calendar-firstDayNumberOfMonth .Calendar-dayNumberMonth {
    display: inline;
}

.Calendar-firstDayNumberOfMonth {
    font-weight: bold;
}

.Calendar-todayDayNumber {
    color: var(--red-500);
}

.Calendar-rescheduleTarget {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background-color: var(--gray-200);
    opacity: 0.5;
}

.Calendar-rescheduleTarget:hover {
    background-color: var(--gray-400);
}

.Calendar-slot {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
    background-color: var(--gray-300);
    color: var(--gray-900);
    padding: 0.25rem;
    font-size: var(--text-sm);
    white-space: nowrap;
    cursor: pointer;
}

.Calendar-slotLabel {
    display: inline;
}

.Calendar-monthView .Calendar-slotLabel {
    display: none;
}

.Calendar-root .Calendar-slotLabel.Calendar-slotLabelWeek {
    display: inline;
}

.Calendar-slotOnly {
    border-radius: 0.25rem;
}

.Calendar-slotBeginning {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    margin-right: -0.5rem;
}

.Calendar-slotMiddle {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.75rem;
}

.Calendar-slotEnd {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    margin-left: -0.5rem;
    padding-left: 0.75rem;
}

.Calendar-slotSelected {
    font-weight: bold;
}

.Calendar-slotBlue {
    color: var(--gray-100);
    background-color: var(--blue-700);
}

.Calendar-slotBlue.Calendar-slotSelected {
    background-color: var(--blue-800);
}

.Calendar-slotRed {
    color: var(--gray-100);
    background-color: var(--red-700);
}

.Calendar-slotRed.Calendar-slotSelected {
    background-color: var(--red-800);
}

.Calendar-slotOrange {
    color: var(--gray-100);
    background-color: var(--orange-700);
}

.Calendar-slotOrange.Calendar-slotSelected {
    background-color: var(--orange-800);
}

.Calendar-slotYellow {
    color: var(--gray-100);
    background-color: var(--yellow-700);
}

.Calendar-slotYellow.Calendar-slotSelected {
    background-color: var(--yellow-800);
}

.Calendar-slotGreen {
    color: var(--gray-100);
    background-color: var(--green-700);
}

.Calendar-slotGreen.Calendar-slotSelected {
    background-color: var(--green-800);
}

.Calendar-slotTeal {
    color: var(--gray-100);
    background-color: var(--teal-700);
}

.Calendar-slotTeal.Calendar-slotSelected {
    background-color: var(--teal-800);
}

.Calendar-slotIndigo {
    color: var(--gray-100);
    background-color: var(--indigo-700);
}

.Calendar-slotIndigo.Calendar-slotSelected {
    background-color: var(--indigo-800);
}

.Calendar-slotPurple {
    color: var(--gray-100);
    background-color: var(--purple-700);
}

.Calendar-slotPurple.Calendar-slotSelected {
    background-color: var(--purple-800);
}

.Calendar-slotPink {
    color: var(--gray-100);
    background-color: var(--pink-700);
}

.Calendar-slotPink.Calendar-slotSelected {
    border: 1px solid var(--pink-400);
}

.Calendar-slotLightBlue {
    background-color: var(--blue-300);
}

.Calendar-slotLightBlue.Calendar-slotSelected {
    background-color: var(--blue-400);
}

.Calendar-slotLightRed {
    background-color: var(--red-300);
}

.Calendar-slotLightRed.Calendar-slotSelected {
    background-color: var(--red-400);
}

.Calendar-slotLightOrange {
    background-color: var(--orange-300);
}

.Calendar-slotLightOrange.Calendar-slotSelected {
    background-color: var(--orange-400);
}

.Calendar-slotLightYellow {
    background-color: var(--yellow-300);
}

.Calendar-slotLightYellow.Calendar-slotSelected {
    background-color: var(--yellow-400);
}

.Calendar-slotLightGreen {
    background-color: var(--green-300);
}

.Calendar-slotLightGreen.Calendar-slotSelected {
    background-color: var(--green-400);
}

.Calendar-slotLightTeal {
    background-color: var(--teal-300);
}

.Calendar-slotLightTeal.Calendar-slotSelected {
    background-color: var(--teal-400);
}

.Calendar-slotLightIndigo {
    background-color: var(--indigo-300);
}

.Calendar-slotLightIndigo.Calendar-slotSelected {
    background-color: var(--indigo-400);
}

.Calendar-slotLightPurple {
    background-color: var(--purple-300);
}

.Calendar-slotLightPurple.Calendar-slotSelected {
    background-color: var(--purple-400);
}

.Calendar-slotLightPink {
    background-color: var(--pink-300);
}

.Calendar-slotLightPink.Calendar-slotSelected {
    background-color: var(--pink-400);
}

.Calendar-blankSlot {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
    padding: 0.25rem;
    font-size: var(--text-sm);
}

.Calendar-addNote {
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
    padding: 0.25rem;
    font-size: var(--text-sm);
    color: var(--gray-400);
    cursor: pointer;
}

.Calendar-addNote:hover {
    color: var(--gray-500);
}

.Calendar-noteSlot {
    overflow: hidden;
    text-align: right;
    background-color: var(--gray-200);
    color: var(--gray-700);
    border-radius: 0.25rem;
}

.Calendar-slotButtons {
    position: absolute;
    z-index: 39;
    padding: 0.25rem;
    display: flex;
}

.Calendar-slotButton {
    background-color: white;
    box-shadow: var(--shadow);
    border-style: solid;
    border-width: 1px;
    border-color: var(--gray-300);
    border-radius: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray-700);
    font-size: 1rem;
}

.Calendar-slotButton:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--gray-800);
}