:root {
    --ui-overview-image-padding: 10;
}

html {
    /* disable pull-to-refresh in mobile browsers */
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    /* background-color: red; */
}

@media only screen and (min-width: 700px) {
    body {
        /* background-color: red; */
    
        /* Prevent page-footer from scrolling, due to the selected color in the palette extending beyond the bottom edge. */
        overflow-y: hidden;
        position: fixed;
        width: 100%;
    }
}

/* Hide the file input visually but keep it in the document flow */
#file-input {
    position: absolute;
    left: -9999px;
}

#main-inner {
    /* background-color: red; */
}

.user-select-none {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Non-prefixed version, currently supported by Chrome, Opera, and Edge */
}

#title_task {
    width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#paste-area-outer {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

#paste-area-reject-button, #paste-area-accept-button {
    font-size: x-large;
    font-weight: bold;
    padding: 2em;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 0;
}

.hover-button {
    color: var(--ui-background);
    background-color: var(--ui-text-color);
    border: none;
}

.hover-button:hover {
    color: var(--ui-text-color);
    background-color: var(--ui-background);
}

#paste-area-accept-button {
    position: absolute;
    bottom: 0;
    right: 0;
}

#paste-area-reject-button {
    position: absolute;
    bottom: 0;
    left: 0;
}

#paste-canvas {
    background-color: rgba(149, 149, 149, 0.734);
    opacity: 0.9;
}

#replay-area-outer {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background-color: var(--ui-background);
}

#replay-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Ensure it appears above the canvas */
    z-index: 201; /* Higher than the canvas, but does not need to exceed the parent's context unless there are other elements with higher z-index values */
    
    /* Optional for better visibility */
    color: #fff; /* Adjust based on your design */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for contrast */
    padding: 10px;
    border-radius: 5px;
    text-align: center; /* Center the text within the div */
}

#replay-message-step {
    color: #777;
}

#draw-area-outer {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

#tool-panel {
    position: absolute;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(128, 128, 128, 0.7);
}

#tool-panel-inner {
    width: 60vw;
    height: 60vh;
    display: block;
    background-color: grey;
    opacity: 1;
    box-shadow: 0 5px 24px 1px rgb(0 0 0/33%);
    position: relative;
    padding: 0.5em;
}

#tool-panel-inner-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Aligns children with space between them */
    height: 100%; /* Set the height to fill the parent container */
}

#canvas-size-input {
    font-size: 20px;
    width: 8ch;
}

#tool-panel-startover-play-buttons {
    display: flex;
    justify-content: space-between; /* Aligns children with space between them */
    gap: 10px; /* Space between the buttons */
}

#tool-panel-crop-copy-paste {
    display: flex;
    justify-content: space-between; /* Aligns children with space between them */
    gap: 10px; /* Space between the buttons */
}

#tool-panel-crop-copy-paste button {
    flex: 1; /* Each button will take equal space */
}

#tool-with-undo-redo-buttons {
    display: flex;
    justify-content: space-between; /* Aligns children with space between them */
    gap: 10px; /* Space between the buttons */
}

#tool-with-undo-redo-buttons button {
    flex: 1; /* Each button will take equal space */
}

@media only screen and (min-height: 800px) {
    #tool-panel-widthheight-header.hidden {
        display: block;
    }
}

@media only screen and (min-width: 1400px) {
    #undo-button-footer.hidden,
    #redo-button-footer.hidden {
        display: inline-block;
    }
    #tool-with-undo-redo-buttons {
        display: none;
    } 
}

.page-footer {
    background-color: var(--ui-footer-background);
    border-top: 1px solid var(--ui-separator);
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 1fr for the left and right columns, auto for the middle column */
    justify-content: center; /* Centers the middle column */
    align-items: center; /* Aligns items vertically in the center, if needed */
    gap: 10px; /* Optional: Adds space between columns */
}

#page-footer-overview-mode .secondary-button {
    margin: 5px;
}

.page-footer-left {
    /* border: 1px dashed red; */
    margin-left: 10px;
}
  
.page-footer-center {
    /* border: 1px dashed green; */
}

.page-footer-right {
    /* border: 1px dashed blue; */
    text-align: right;
    margin-right: 10px;
}

#palette {
    display: flex;
    max-width: 40vw;
    flex-wrap: wrap;
}

@media only screen and (min-width: 800px) {
    #palette {
        max-width: none;
        flex-wrap: nowrap;
    }
}

#palette div {
    aspect-ratio: 1;
    width: 8vw;
    max-width: 80px;
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
    #palette div:hover {
        opacity: 0.8;
        border: 1px solid white;
    }

    #palette div.palette_item_selected:hover {
        opacity: 1;
        border: 2px solid white;
    }
}

.palette_item_selected {
    z-index: 2;
    border: 2px solid white;
    border-radius: 5px;
    transform: scale(1.25);
    box-shadow: 0 5px 24px 1px rgb(0 0 0/33%);
}

.background-color-0 {
    background-color: var(--arc-color-0);
}
.background-color-1 {
    background-color: var(--arc-color-1);
}
.background-color-2 {
    background-color: var(--arc-color-2);
}
.background-color-3 {
    background-color: var(--arc-color-3);
}
.background-color-4 {
    background-color: var(--arc-color-4);
}
.background-color-5 {
    background-color: var(--arc-color-5);
}
.background-color-6 {
    background-color: var(--arc-color-6);
}
.background-color-7 {
    background-color: var(--arc-color-7);
}
.background-color-8 {
    background-color: var(--arc-color-8);
}
.background-color-9 {
    background-color: var(--arc-color-9);
}

.tool-with-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tool-with-icon {
    font-size: large;
    font-weight: bold;
    aspect-ratio: 1;
    width: 6vw;
    max-width: 60px;
}

@media only screen and (min-width: 600px) {
    #title_task {
        width: 250px;
    }
}

#paste-area-outer.hidden,
#replay-area-outer.hidden,
#task-overview.hidden,
#draw-area-outer.hidden,
#page-footer-draw-mode.hidden,
#page-footer-overview-mode.hidden,
#tool-panel.hidden,
#submit-status-correct.hidden, 
#submit-status-incorrect.hidden,
#crop-selected-rectangle-button.hidden,
#pagination.hidden {
    display: none !important;
}

.segmented-control {
    display: flex;
    width: 100%;
    margin: 0.5em 0;
    padding: 0;
    box-sizing: border-box;
}

.segmented-control__item {
    flex: 1; /* Each item will take equal space */
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
}

.segmented-control__input {
    position: absolute;
    visibility: hidden;
}

.segmented-control__label {
    display: block;
    margin: 0 -1px -1px 0; /* -1px margin removes double-thickness borders between items */
    padding: 1em .25em;
    border: 1px solid var(--ui-button-background);
    font: 14px/1.5 sans-serif; 
    text-align: center;  
    cursor: pointer;
    box-sizing: border-box;
    color: var(--ui-button-background); 
}

.segmented-control__input:checked + .segmented-control__label {
    background: var(--ui-button-background);
    color: var(--ui-text-color); 
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
    .segmented-control__label:hover {
        background: var(--ui-text-color);
        color: var(--ui-background);
    }
}

#task-overview {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#task-overview-table {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: rgb(50, 50, 50);
}

#task-overview-table .input-cell { 
    vertical-align: bottom;
} 

#task-overview-table .input-vstack { 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: calc(var(--ui-overview-image-padding) * 2 * 1px);
} 

#task-overview-table .output-cell { 
    vertical-align: top;
} 

#task-overview-table .output-vstack { 
    display: flex;
    flex-direction: column;
    align-items: center;
} 

#task-overview-table .canvas-holder canvas {
    display: block;
}

#task-overview-table .canvas-holder { 
    display: block;
    padding-left: calc(var(--ui-overview-image-padding) * 1px);
    padding-right: calc(var(--ui-overview-image-padding) * 1px);
}

#task-overview-table .seperator-column {
    background-color: var(--ui-background);
    width: calc(var(--ui-overview-image-padding) * 1px);
}

#task-overview-table .active-test {
    background-color: #a4a4a4;
    color: black;
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
    #task-overview-table .active-test {
        cursor: pointer;
    }
    #task-overview-table .click-to-active-test {
        cursor: pointer;
    }
}

.image-size-label {
    font-size: 12px;
    color: rgb(119, 119, 119);
    padding-top: 5px;
    padding-bottom: 5px;
}

#pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

#pagination-prev,
#pagination-next,
#pagination-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

#pagination-status {
    color: #ccc;
    padding-left: 5px;
    padding-right: 5px;
}

@media (max-width: 600px) {
    #pagination-status {
        font-size: 11px;
        padding-left: 0;
        padding-right: 0;
    }
    #pagination .secondary-button {
        margin-right: 0;
        margin-left: 0;
        background-color: transparent;
        border: none;
    }
}

/* Default styles for buttons, showing full titles and hiding short titles */
.responsive-button .full-title {
    display: inline;
}

.responsive-button .short-title {
    display: none;
}

@media (max-width: 700px) {
    .responsive-button .full-title {
        display: none; /* Hide full title on small screens */
    }

    .responsive-button .short-title {
        display: inline; /* Show short title on small screens */
    }
}