:root {
            --dagable-scale: 1.05;
        }


.dragable-item {
            padding: 20px;
            margin: 4px 20px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            cursor: move;
            border-radius: 10px;
            transition-duration: 0.1s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-size: large;
            font-weight: 500;
            text-align: center;

        }

        .dragable-item.dragging {
            /*opacity: 0.1;*/
            border: 1px solid #000;
            position: relative;
            top: 100%;
            left: 100%;
            transition-duration: 0s;
            background-color: #fff;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);


        }

        .dragable-item.over {
            border: 1px dashed #000;
            background-color: #fff;
            /*margin-left: 0px;
            margin-right: 0px;*/
            scale: var(--dagable-scale);


        }

        .dragable-item.dragging:hover {
            cursor: grabbing;
            opacity: 1;
            scale: var(--dagable-scale)
        }

        .dragable-list {
            width: 500px;
            padding: 0px;
            list-style-type: none;
            overflow: hidden;
        }

        .dragable-item.correct {
            border: 1px solid rgb(0, 255, 0);
            background-color: rgb(47 125 47);
            color: #fff;
        }

        .dragable-item.incorrect {
            border: 1px solid rgb(255, 0, 0);
            background-color: rgb(179 45 45);
            color: #fff;
        }

        .dragable-item.selected {
            border: 1px solid #0000ff;
            box-shadow: 0 0 10px #0000FF95 , inset 0 0 10px #0000FF95;
            
        }