/* add styles for project controls here */

@import "/fontawesome/css/fontawesome.min.css";
@import "/fontawesome/css/regular.min.css";
@import "/fontawesome/css/solid.min.css";

:root {
    --client-header-background-color: var(--gray-900);
    --client-header-text-color: var(--gray-100);
    --client-header-menu-item-active-text-color: var(--gray-200);
    --client-header-menu-item-active-background-color: var(--gray-600);
    --client-header-menu-item-hover-text-color: var(--gray-100);
    --client-header-menu-item-hover-background-color: var(--gray-500);

    --client-header-submenu-background-color: var(--gray-700);
    --client-header-submenu-text-color: var(--gray-100);
    --client-header-submenu-item-active-text-color: var(--gray-200);
    --client-header-submenu-item-active-background-color: var(--gray-600);
    --client-header-submenu-item-hover-text-color: var(--gray-100);
    --client-header-submenu-item-hover-background-color: var(--gray-500);
}

html.dark-mode {
    --client-background-color: var(--gray-900);
    --text-color: var(--gray-100);
    --text-gray-color: var(--gray-400);

    --screen-header-background-color: var(--gray-800);
    --screen-header-border-color: var(--gray-600);
    --screen-header-title-text-color: var(--gray-200);
    --screen-header-primary-button-text-color: var(--gray-100);
    --screen-header-primary-button-background-color: var(--gray-700);
    --screen-header-primary-button-border-color: var(--gray-500);
    --screen-header-primary-button-hover-background-color: var(--gray-600);

    --section-background-color: var(--gray-800);
    --section-text-color: var(--gray-200);
    --divider-background-color: var(--gray-700);

    --field-label-text-color: var(--gray-200);
    --field-background-color: var(--gray-800);
    --field-border-color: var(--gray-600);
    --field-text-color: var(--gray-100);
    --field-disabled-background-color: var(--gray-700);
    --field-disabled-border-color: var(--gray-600);
    --field-disabled-text-color: var(--gray-400);
    --field-option-active: var(--gray-700);

    --button-default-background-color: var(--gray-700);
    --button-default-border-color: var(--gray-500);
    --button-default-text-color: var(--gray-100);

    --table-row-odd-background-color: var(--gray-800);
    --table-row-hover-background-color: var(--teal-900);
    --table-row-selected-background-color: var(--gray-600);
    --table-row-selected-text-color: var(--gray-100);
    --table-border-color: var(--gray-600);
    --table-empty-text-color: var(--gray-400);

    --link-text-color: var(--blue-300);
    --link-hover-text-color: var(--blue-200);

    --code-block-background-color: var(--gray-800);
    --code-block-text-color: var(--gray-200);

    --tile-border-color: var(--gray-600);
    --tile-hover-border-color: var(--gray-400);
    --tile-selected-background-color: var(--gray-600);
    --tile-disabled-background-color: var(--gray-800);
    --tile-disabled-text-color: var(--gray-600);
}

.DarkModeToggle-sun {
    display: block;
}

.DarkModeToggle-moon {
    display: none;
}

html.dark-mode .DarkModeToggle-sun {
    display: none;
}

html.dark-mode .DarkModeToggle-moon {
    display: block;
}

.Announcements-root {
    padding: 8px;
    padding-bottom: 0;
}

.Announcement {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: 4px;
    color: black;
    margin-bottom: 8px;
}

.Announcement-message {
    margin-bottom: 8px;
}

.Announcement-message:last-child {
    margin-bottom: 0;
}

.Announcement-dismiss {
    cursor: pointer;
    padding-left: 5px;
}

.Announcement-dismiss:hover {
    color: var(--red-500);
}

.Announcement-color-blue {
    background-color: var(--blue-200) !important;
}

.Announcement-color-red {
    background-color: var(--red-200) !important;
}

.Announcement-color-orange {
    background-color: var(--orange-200) !important;
}

.Announcement-color-yellow {
    background-color: var(--yellow-200) !important;
}

.Announcement-color-green {
    background-color: var(--green-200) !important;
}

.iframe-root {
    padding: 8px;
    flex-grow: 1;
    overflow-x: auto;
}

.iframe-root iframe {
    border: none;
    display: block;
    width: 100%;
}

.tail-section-root .iframe-root {
    padding: 0;
    overflow-x: hidden;
}

.tail-section-root .iframe-root iframe {
    height: 100%;
}

.deployment-info {
    background-color: white;
    color: black;
    font-family: monospace;
    pointer-events: none;
    position: fixed;
    bottom: 0px;
    right: 0px;
    text-align: right;
    padding: 0 10px;
    opacity: 0.8;
}