* {
    box-sizing: border-box;
}

*:active {
    outline: none;
}

*:focus {
    outline: none;
    box-shadow: var(--const-global-focus);
}

input,
button {
    font-family: inherit;
    font-size: inherit;
}

.sr,
.sr button {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.hidden,
[hidden] {
    display: none;
}

.invisible {
    visibility: hidden;
}

.q2-element-dropdown {
    display: none;
    position: absolute;
    background-color: var(--app-white);
    color: var(--t-font-color);
    left: 0;
    width: 100%;
    z-index: 100;
    margin-top: 1px;
    box-shadow: var(--app-shadow-1);
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--app-tween-1);
}

.dropdown-open .q2-element-dropdown {
    display: block;
    height: auto;
    overflow: auto;
    opacity: 1;
    visibility: visible;
    margin-bottom: var(--app-scale-2);
}

[alignment='right'] .q2-element-dropdown {
    left: auto;
    right: 0;
}


q2-calendar {
    display: block;
}

q2-calendar[hidden] {
    display: none;
}

q2-calendar .calendar-container {
    position: relative;
    display: block;
}

q2-calendar .calendar-container q2-input {
    margin: 0;
    cursor: pointer;
}

q2-calendar .calendar-container .q2-element-dropdown {
    text-align: center;
    min-width: 308px;
}

q2-calendar .calendar-container .calendar-label {
    font-size: var(--tct-calendar-label-font-size, 16px);
    flex: 1 1;
    flex-basis: calc(100% - var(--tct-btn-icon-width, 44px));
    margin: 0;
    padding: var(
            --tct-calendar-label-vertical-padding,
            var(--tct-scale-2, var(--app-scale-2, 10px))
        )
        0;
}

q2-calendar .calendar-container .cal-month-heading {
    padding: 0 0 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--tct-calendar-month-font-size, 16px);
    font-weight: var(--tct-calendar-month-font-weight, 600);
}

q2-calendar .calendar-container .cal-month-text {
    min-width: 82px;
    display: inline-block;
}

q2-calendar .calendar-container .cal-year-text {
    min-width: 50px;
    display: inline-block;
}

q2-calendar .calendar-container .cal-days {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2px;
}

q2-calendar .calendar-container .cal-day,
q2-calendar .calendar-container .cal-days > div {
    flex: 0 0 14.285714%;
}

q2-calendar .calendar-container .cal-day-heading {
    font-size: var(--tct-calendar-day-heading-font-size, inherit);
    font-weight: var(--tct-calendar-day-heading-font-weight, 600);
}

q2-calendar .calendar-container .is-valid:hover {
    background-color: var(--tct-calendar-day-hover-bg, var(--tct-gray-l3, var(--app-gray-l3)));
    color: var(--tct-calendar-day-hover-font-color, inherit);
}

q2-calendar .calendar-container .is-valid.is-selected {
    background-color: var(
        --tct-calendar-day-selected-bg,
        var(--tct-calendar-day-hover-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))
    );
    color: var(
        --tct-calendar-day-selected-font-color,
        var(--tct-calendar-day-hover-font-color, inherit)
    );
    box-shadow: inset 2px 2px
            var(
                --tct-calenday-day-selected-outline-color,
                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))
            ),
        inset -2px -2px
            var(
                --tct-calenday-day-selected-outline-color,
                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))
            );
}

q2-calendar .calendar-container .date-details {
    display: flex;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

q2-calendar .calendar-container .is-today span {
    display: block;
}

q2-calendar .calendar-container .is-today .date-details {
    justify-content: flex-start;
}

q2-calendar .calendar-container .today-decorator {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    height: 12px;
}

q2-calendar .calendar-container .activity-decorator {
    width: var(--tct-scale-1, var(--app-scale-1, 5px));
    height: var(--tct-scale-1, var(--app-scale-1, 5px));
    border-radius: 50%;
    margin: 0 auto;
    background-color: var(
        --tct-calendar-activity-indicator-color,
        var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))
    );
}

q2-calendar .calendar-container .calendar-disclaimer {
    font-size: var(
        --tct-calendar-disclaimer-font-size,
        var(--tct-font-size-small, var(--app-font-size-small, 12px))
    );
    border-top: 1px solid
        var(--tct-calendar-disclaimer-border-color, var(--tct-gray-l2, var(--app-gray-l2, #eeeeee)));
    padding: var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
    text-align: left;
}