.unselectable, summary, img {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.content {
    margin-block: 32px 24px;
    font-size: 14px;
}

summary {
    position: relative;
    display: flex;
    align-items: center;
    pointer-events: none;
}

summary::-webkit-details-marker, summary::marker {
    display: none;     
}

summary::before {
    position: absolute;
    content: '->';
    top: 2px;
    font-weight: 700;
}

details[open] summary::before {
    rotate: 90deg;
}

summary h1 {
    pointer-events: all;
    padding-inline-start: 24px;
}

h2 {
    display: flex;
    align-items: center;
    margin-top: 46px;
    font-weight: 400;
}

.file-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: 6px 24px;
    font-size: 14px;
}

#file-import-label {
    margin-inline: 14px 40px;
    color: #808B99;
    text-decoration: underline;
    cursor: pointer;
}

#file-import-label.active {
    color: #147BF8;
}

.file-input {
    display: none;
}

.import-button, button {
    padding: 4px 6px;
    background: none;
    border: 1px solid #D9D9D9;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    border-radius: 4px;
    font-size: 12px;
    color: black;
    cursor: pointer;
}

.import-button:hover {
    background-color: #131316;
    border: 1px solid #131316;
    filter: none;
    color: white;
}

.file-views {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
    gap: 50px;
}

.file-views + section {
    padding-inline-start: 24px;
}

.file-views + section > section {
    position: relative;
}

.previews {
    margin-bottom: 33.5px;
}

#select-whole {
    all: unset;
    position: absolute;
    display: flex;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5h4.8c1.1201 0 1.6802 0 2.108.218.3763.1917.6823.4977.874.874C17 6.5198 17 7.08 17 8.2V13M1 5h4m0 0v8.8c0 1.1201 0 1.6802.218 2.108.1917.3763.4977.6823.874.874C6.5198 17 7.08 17 8.2 17H17M5 5V1m12 16v4m0-4h4m-10-3.5V11m0 0V8.5m0 2.5H8.5m2.5 0h2.5'/%3E%3C/svg%3E");
    top: 2px;
    right: 1px;
    height: 20px;
    padding: 4px;
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    backdrop-filter: blur(3px);
    cursor: pointer;
}

#select-whole:hover {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5h4.8c1.1201 0 1.6802 0 2.108.218.3763.1917.6823.4977.874.874C17 6.5198 17 7.08 17 8.2V13M1 5h4m0 0v8.8c0 1.1201 0 1.6802.218 2.108.1917.3763.4977.6823.874.874C6.5198 17 7.08 17 8.2 17H17M5 5V1m12 16v4m0-4h4m-10-3.5V11m0 0V8.5m0 2.5H8.5m2.5 0h2.5'/%3E%3C/svg%3E");
    background-color: rgba(0, 0, 0, 0.45);
}

.previews, #cropped {
    position: sticky;
    position: -webkit-sticky;
    top: 24px;
    min-width: 33%;
    height: fit-content;
}

.previews > *:not([style*="display: none;"]):not(button), #cropped canvas {
    outline: solid 2px #a5bcf3;
    outline-offset: 2px;
    border-radius: 1px;
}

#pdf-preview canvas {
    width: 100% !important;
    margin-inline: auto;
}

#cropped canvas {
    width: 100%;
    min-height: 26px;
    image-rendering: pixelated;
}

#cropped svg {
    position: absolute;
    top: 0;
    left: 0;
}

.online {
    margin-top: 90px;
}

.response-container {
    display: flex;
    justify-content: center;
}

#response {
    display: inline-block;
    width: 724px;
    min-height: 250px;
    padding: 12px 20px;
    background-color: #F4F5F6;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#rectangle-selection {
    position: absolute;
    background-color: rgba(27, 30, 30, 0.36);
    outline: solid 1px white;
    z-index: 1;
}

#export-data {
    margin-top: 6px;
    background-color: #335c31;
    color: white;
    border: none;
}

.crop-size {
    position: absolute;
    display: flex;
    top: 2px;
    left: 1px;
    padding: 2px 4px;
    background-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(3px);
    z-index: 1;
}

#cropped:not(:has(> canvas)) button {
    margin-top: 40px;
}

.hidden {
    display: none;
}

#thumbnails {
    display: flex;
    align-items: center;
    padding-inline: 10px;
    margin-block-start: 6px;
    white-space: nowrap;
    overflow: scroll;
}

#thumbnails::-webkit-scrollbar {
    display: none;
}

#thumbnails canvas {
    max-height: 200px;
    min-height: 80px;
    margin: 10px;
    image-rendering: pixelated;
    outline: solid 1.5px #4f5a74;
    outline-offset: 1px;
}

#objects-grid {
    display: grid;
    grid-template-columns: repeat(8, auto);
    margin: 20px 60px;
    gap: 10px;
}

.identified canvas {
    justify-self: center;
    width: 100px;
    image-rendering: pixelated;
    outline: solid 1.5px #6481c4;
    outline-offset: 1px;
}

.info {
    position: absolute;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='gray' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 16v-4m0-4h0m10 4a10 10 0 1 1-20 0 10 10 0 0 1 20 0Z'/%3E%3C/svg%3E");
    right: 0;
    height: 20px;
    width: 20px;
}

.info-box {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    top: 30px;
    right: 0;
    padding: 6px;
    background-color: white;
    border: 1px solid #d9d9d9;
    font-size: 12px;
    transition: visibility 0s, opacity 0.3s linear;
    
}

.info-box::before {
    position: absolute;
    content: "";
    top: -6px;
    right: 3.5px;
    height: 10px;
    width: 10px;
    background-color: white;
    border-style: solid;
    border-width: 1px 0 0 1px;
    border-color: #d9d9d9;
    transform: rotate(45deg);
    clip-path: polygon(0 0, 106% 0, 0 106%);
}

.identified:has(.info:hover) .info-box {
    visibility: visible;
    opacity: 1;
}

.spinner::before {
    position: absolute;
    content: "";
    top: 40px;
    left: 50%;
    height: 25px;
    width: 25px;
    border: 3px solid #ccc;
    border-top: 3px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}