@import "./_stu-body";
@import "./_stu-box";
@import "./_stu-form";

.box {

    .box-body {
        position: relative;

        .body {
            padding: 10px;
            background: #d8e7f9;
            background: linear-gradient(174.54deg, rgba(204, 224, 248, 0.76) 0.23%, rgba(242, 249, 255, 0.76) 120.71%);
            display: flex;
            flex-direction: column;
        }
    }

    .table-box {
        display: block;

        tr {
            border-top: 1px solid #36536d;

            &:nth-of-type(2n+1) {
                background: linear-gradient(rgba(0,0,0,.02),rgba(0,0,0,.02))
            }

            &.empty td {
                padding: 8px;
            }
        }

        th {
            color: #fff;
            background: #4585cc;
            text-align: center;
        }

        td {
            color: #36536d;
            text-align: center;
            padding: 6px 10px;
        }

        .state {
            border: 1px solid #4585cc;
            border-radius: 5px;
            font-size: 12px;
            padding: 2px 5px;
            color: #4585cc;
        }

        .btn {
            background: #4585cc;
            border-radius: 20px;
            padding: 2px 15px;
            color: #eee;
        }

        .send {
            .state {
                background: #4585cc;
                color: #fff;
            }
        }
    }
}

.question {
    display: none;

    button {
        --w: 80px;
        width: var(--w);
        height: var(--w);
        border-radius: var(--w);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        z-index: 5;
        color: #fff;
        border: none;
        outline: none;

        &:hover {
            background-color: #bd2130;
        }

        i {
            font-size: 40px;
        }

        &:not(:hover) {
            animation: 1s shine ease-in-out infinite;

            i {
                animation: 1s flashing ease-in-out infinite;
            }
        }
    }
}

.question-text {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--mc);
}

@keyframes shine {
    0% {
        filter: drop-shadow(0 0 12px #dc3545);
    }

    50% {
        filter: drop-shadow(0 0 12px #bd2130);
    }

    100% {
        filter: drop-shadow(0 0 12px #dc3545);
    }
}

@keyframes flashing {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: 0.5;
        transform: scale(0.9)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}