﻿
.container-dq {
    padding: 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.table-dq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 8px;
    padding-bottom: 16px;
    border-bottom: solid 1px #A9A9A9;
}

.input-label-dq {
    display: grid;
    grid-gap: 4px;
}

    .input-label-dq > * > select {
        height: 34px !important;
    }

.submit-button-dq {
    text-align: center;
}

.checkbox-dq {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: auto 0
}

    .checkbox-dq > input {
        margin: 0;
    }

.body-dq {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0px 15%;
    max-height: calc(100vh - 50px - 32px - 32px);
    overflow: auto;
    background: radial-gradient(44.53% 44.53% at 50% 50%,hsla(0,0%,100%,.9) 0,hsla(0,0%,100%,.5) 100%),repeating-linear-gradient(45deg,#fff,hsla(0,0%,100%,.5),hsla(0,0%,100%,.5) 2px,#fff 4px);
    border-radius: 36px;
}

    .body-dq::before {
        content: '';
        background-color: rgba(255, 255, 255, 0.8);
        filter: blur(8px);
        height: 10px;
        width: 100%;
        position: sticky;
        top: 0;
        left: 0;
        display: block;
        z-index: 10;
    }

    .body-dq::after {
        content: '';
        background-color: rgba(255, 255, 255, 0.5);
        filter: blur(5px);
        height: 10px;
        width: 100%;
        position: sticky;
        bottom: 0;
        left: 0;
        display: block;
        z-index: 10;
    }

    .body-dq::-webkit-scrollbar {
        width: 4px;
    }

    .body-dq::-webkit-scrollbar-thumb {
        background-color: rgba(136, 136, 136, 0.5);
        border-radius: 10px;
        height: 80px;
    }

.cover-image-dq {
    height: calc(100vh - 50px);
    width: 100%;
    object-fit: cover;
}

.cover-image-dq img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.three-cols {
    grid-template-columns: 1fr 1fr 1fr;
}

.checkbox-dq > label {
    margin-bottom: 0;
}


@media only screen and (max-width: 900px) {
    .body-dq {
        margin: 0 12%
    }

    .table-dq {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .body-dq {
        margin: 0 2%
    }
}
