html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 769px) {
    html {
        font-size: 16px;
    }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.navbar-item {
    display: block;
    padding: 0.5rem 0.5rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    height: 70%;
    min-height: 8.5em;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

p {
    font-weight: 400;
    font-size: 1em;
}

/*********************************
    TopRooster color scheme
**********************************/

:root {
    --app-background-color: #f7961e;
    --app-action-button-color: #f7961e;
    --app-icon-selected-button-color: #f7961e;
    --app-selected-border-color: #f7961e;
    --tr-availability-color-scheduled-busy: #58135e;
    --tr-can-exchange-background-color-blink: #ffffff;
    --tr-can-exchange-color-blink: #000000;
    --tr-can-exchange-revert-background-color-blink: #000000;
    --tr-date-with-schedule-background-color: #89e8fe;
    --tr-schedule-disabled-text-color: #cacaca;
    --tr-separator-border-color: #007bff;
}

.tr-color {
    color: #f7961e;
}

a, .btn-link {
    color: #0366d6;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 2px solid #e5e5e5;
}

.tr-accounts-select-area {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(12rem, 16rem) minmax(12rem, 16rem);
    grid-gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tr-all-columns-button-off {
    color: #007bff;
    background-color: transparent;
    border-color: #007bff;
}

.tr-all-columns-button-off:hover {
    color: #007bff;
    text-decoration: none;
}

.tr-availability-all-container {
    display: grid;
    width: 100%;
    min-width: 70em;
    font-size: 0.85em;
}

.tr-availability-all-item-box {
    cursor: help;
    padding: 0.3em 0.1em;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tr-availability-all-month {
    grid-row-end: span 2;
    font-weight: 600;
    padding: 0.15em 0.3em;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: white;
    border: 2px solid var(--border-color-bold);
    z-index: 99;
}

.tr-availability-all-month-year-selector-row {
    width: 100%;
    height: 2.8em;
    padding-right: 0.5em;
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    grid-column-gap: 0.5em;
    align-items: center;
}

.tr-availability-all-text-cell {
    padding: 0.15em 0.3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: white;
}

.tr-availability-all-user {
    height: inherit;
    display: flex;
    align-items: center;
    padding: 0.15em 0.3em;
    border-left: 2px solid var(--border-color-bold);
    border-right: 2px solid var(--border-color-bold);
    border-bottom: 1px solid var(--border-color);
}

.tr-availability-background-scheduled-busy {
    background-color: var(--tr-availability-color-scheduled-busy);
}

.tr-availability-border-no-schedule {
    border: 3px solid white;
}

.tr-availability-border-no-schedule-row-background {
    border: 3px solid var(--fb-row-background);
}

.tr-availability-border-scheduled {
    border: 3px solid var(--app-background-color);
}

.tr-availability-border-scheduled-busy {
    border: 3px solid var(--tr-availability-color-scheduled-busy);
    animation: tr-availability-border-scheduled-busy-blink 1.5s infinite;
}

@keyframes tr-availability-border-scheduled-busy-blink {
    50% {
        border: 3px solid var(--app-background-color);
    }
}

.tr-availability-border-with-schedule {
    border: 3px solid var(--tr-date-with-schedule-background-color);
}

.tr-availability-borders-bold-bottom {
    border-right: 1px solid var(--border-color);
    border-bottom: 2px solid var(--border-color-bold);
}

.tr-availability-borders-bold-right-bottom {
    border-right: 2px solid var(--border-color-bold);
    border-bottom: 2px solid var(--border-color-bold);
}

.tr-availability-borders-bold-top-right-bottom {
    border-top: 2px solid var(--border-color-bold);
    border-right: 2px solid var(--border-color-bold);
    border-bottom: 2px solid var(--border-color-bold);
}

/* Set size in pixels to make sure slices are same size. */
.tr-availability-color-box {
    height: 20px;
    width: 20px;
}

@media (min-width: 769px) {
    .tr-availability-color-box {
        height: 22px;
        width: 22px;
    }
}

.tr-availability-day-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.tr-availability-day-number {
    position: absolute;
    top: 25%;
    left: 25%;
    bottom: 25%;
    right: 25%;
    border-radius: 50%;
}

.tr-availability-day-slice {
    height: inherit;
    width: inherit;
    font-size: 0.8em;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.tr-availability-day-slice-A {
}

.tr-availability-day-slice-B {
    text-align: right;
}

.tr-availability-day-slice-C {
    height: inherit;
    display: flex;
    align-items: flex-end;
}

.tr-availability-day-slice-D {
    height: inherit;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
}

.tr-availability-height-item {
    height: 3em;
}

.tr-availability-height-legend {
    height: 2.25em;
}

.tr-availability-height-month-day {
    height: 2em;
}

.tr-availability-item-borders {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.tr-availability-item-borders-bold-right {
    border-right: 2px solid var(--border-color-bold);
    border-bottom: 1px solid var(--border-color);
}

.tr-availability-month-box {
    display: grid;
    grid-template-columns: 3em 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 32em;
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.tr-availability-month-container {
    background: white;
    padding: 0.5em;
}

/* Make sure css order of the colors is after tr-availability-day-number */
.tr-availability-color-available {
    color: black;
    background-color: #57c35d;
}

.tr-availability-color-available-other-month {
    color: black;
    background-color: #8ad58e;
}

.tr-availability-color-busy {
    color: white;
    background-color: #dd0000;
}

.tr-availability-color-busy-other-month {
    color: white;
    background-color: #e74d4d;
}

.tr-availability-color-date-no-schedule {
    background-color: white;
}

.tr-availability-color-date-scheduled {
    color: white;
    background-color: var(--app-action-button-color);
}

.tr-availability-color-date-scheduled-busy {
    color: white;
    background-color: var(--tr-availability-color-scheduled-busy);
    animation: tr-availability-color-date-scheduled-busy-blink 1.5s infinite;
}

@keyframes tr-availability-color-date-scheduled-busy-blink {
    50% {
        background-color: var(--app-action-button-color);
    }
}

.tr-availability-color-date-with-schedule {
    background-color: var(--tr-date-with-schedule-background-color);
}

.tr-availability-color-day-name {
    font-weight: 600;
    background-color: var(--selected-background-color);
}

.tr-availability-color-month-name {
    font-weight: 600;
    background-color: white;
}

.tr-availability-color-not-used {
    color: black;
    background-color: #e0e0e0;
}

.tr-availability-color-stripes {
    background: repeating-linear-gradient( 135deg, transparent, transparent 2px, #e0e0e0 2px, #e0e0e0 4px );
}

.tr-availability-color-unknown {
    color: white;
    background-color: #808080;
}

.tr-availability-color-unknown-other-month {
    color: white;
    background-color: #b0b0b0;
}

.tr-availability-text-color-available {
    font-weight: 600;
    color: #28a745; /* #28a745 is color of btn-success */
}

.tr-availability-text-color-busy {
    font-weight: 600;
    color: #dc3545; /* #dc3545 is color of btn-danger */
}

.tr-availability-text-color-unknown {
    font-weight: 600;
    color: #808080;
}

.tr-availability-width-item {
    width: 4em;
}

.tr-availability-width-legend {
    width: 3em;
}

.tr-can-exchange-icon {
    color: var(--app-action-button-color);
    background-color: var(--tr-can-exchange-revert-background-color-blink);
    animation: tr-can-exchange-icon-blink 1.5s infinite;
}

@keyframes tr-can-exchange-icon-blink {
    50% {
        color: var(--tr-can-exchange-color-blink);
        background-color: var(--tr-can-exchange-background-color-blink);
    }
}

.tr-day-info-border {
    border: 1px solid black;
}

.tr-explain-area {
    display: grid;
    grid-template-columns: minmax(30em, 1fr) minmax(10em, auto);
    grid-column-gap: 0.2em;
}

.tr-full-schedule-button-size {
    padding: 0.2em 0.4em;
    font-size: 1em;
}

.tr-full-schedule-list {
    font-size: 0.8rem;
    display: grid;
}

@media (max-width: 768.98px) {
    .tr-full-schedule-list {
        font-size: 1rem;
        display: grid;
    }
}

.tr-full-schedule-list-column-label1 {
    margin-left: -0.3em;
    display: grid;
    grid-template-columns: max-content auto;
}

.tr-full-schedule-list-column-label2 {
    font-size: 0.85em;
}

.tr-full-schedule-list-day-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
}

.tr-full-schedule-list-day-row-small {
    height: 2em;
    display: grid;
    grid-template-columns: 1fr auto auto;
    padding: 0 0.3em;
    align-items: center;
    background-color: var(--selected-background-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.tr-full-schedule-list-day-text {
    font-weight: 600;
    padding: 0.2em;
    background-color: white;
}

.tr-full-schedule-list-empty-row-height {
    height: 2em;
}

.tr-full-schedule-list-header-column {
    height: inherit;
    display: flex;
    flex-direction: column;
    padding: 0.3em 0.3em;
    /*color: var(--selected-color);*/
    background-color: var(--selected-background-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.tr-full-schedule-list-week-row {
    font-weight: 600;
    padding: 0.3em;
    display: grid;
    grid-template-columns: auto auto 1fr;
}

.tr-full-schedule-row-label-cell {
    height: inherit;
    line-height: 1.2em;
    display: grid;
    grid-template-columns: max-content auto 1em;
    align-items: center;
}

@media (max-width: 768.98px) {
    .tr-full-schedule-row-label-cell {
        height: inherit;
        line-height: 1.2em;
        display: grid;
        grid-template-columns: max-content 1fr 1em;
        align-items: center;
    }
}

.tr-full-schedule-service-row {
    height: inherit;
    padding: 0.3em 0.3em;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.tr-month-week-selector-row {
    width: 100%;
    padding-right: 0.5em;
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    grid-column-gap: 0.3em;
    align-items: center;
}

.tr-month-week-selector-row-fixed-position {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 1em);
    background: white;
}

.tr-month-week-selector-row-height {
    height: 2.8em;
}

.tr-popup-box-header {
    background-color: var(--selected-background-color);
    border: 1px solid var(--border-color);
}

.tr-schedule-disabled-text-color {
    color: var(--tr-schedule-disabled-text-color);
}

.tr-schedule-list-section-header {
    width: 100%;
    padding: 0 0.5rem;
    font-size: 1.3rem;
    color: var(--selected-color);
    background-color: var(--selected-background-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* TODO: Remove */
.tr-schedule-title-menu {
    display: grid;
    grid-template-columns: auto 0 auto 1fr auto auto auto auto;
    grid-column-gap: 0.3rem;
    width: 100%;
    align-items: center;
}

.tr-scheduling-list-text-area {
    display: grid;
    grid-template-columns: minmax(2em, max-content) 1em minmax(2em, max-content) 1fr;
}

.tr-separator-border-bottom {
    border-bottom: 2px solid var(--tr-separator-border-color);
}

.tr-sufficiently-scheduled-border {
    border: 2px solid var(--selected-color);
}

.tr-thick-border-bottom {
    border-bottom: 2px solid var(--app-background-color);
}

.tr-thick-border-right {
    border-right: 2px solid var(--app-background-color);
}