/* start main-canvas */
#main-canvas {
    position: relative;
    max-width: 1152px;
    height: 600px;
    background: #F9F1FC;
    margin: 0 auto;
    min-height: calc(100vh - 100px);

}

.draggable {
    cursor: grab;
    display: block;
    position: absolute;
    z-index: 10;
}

.draggable svg, .droppable svg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.draggable.error path {
    fill: #EB5757;
    opacity: 0.3;
}

.draggable.success path {
    fill: #8BEEB3;
}

.draggable:after {
    content: attr(data-name);
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 4px);
    text-align: center;
    font-size: 12px;
    line-height: 14px;
}


.droppable {
    display: block;
    position: absolute;
}

.droppable.hover svg {
    transform: scale(1.23);
    transform-origin: center bottom;
}

.droppable:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.droppable:after {
    content: attr(data-label);
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 4px);
    text-align: center;
    font-size: 15px;
    line-height: 19px;
    width: 115px;
}

.droppable.error .bin {
    stroke: #EB5757;
}

.droppable.error:before {
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7654 9.49997L17.7379 2.5274C18.0873 2.17798 18.0873 1.61147 17.7379 1.26207C17.3885 0.912643 16.822 0.912643 16.4726 1.26207L9.49997 8.23464L2.52741 1.26207C2.17798 0.912643 1.61147 0.912643 1.26207 1.26207C0.912676 1.6115 0.912643 2.17801 1.26207 2.5274L8.23464 9.49997L1.26207 16.4725C0.912643 16.822 0.912643 17.3885 1.26207 17.7379C1.6115 18.0873 2.17801 18.0873 2.52741 17.7379L9.49997 10.7653L16.4725 17.7379C16.8219 18.0873 17.3885 18.0873 17.7379 17.7379C18.0873 17.3884 18.0873 16.8219 17.7379 16.4725L10.7654 9.49997Z' fill='%23EB5757' stroke='%23EB5757'/%3E%3C/svg%3E%0A");
    width: 17px;
    height: 17px;
    transform: translate(-50%, -9px);
}

.droppable.success .bin {
    stroke: #8BEEB3;
}

.droppable.success:before {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='19' viewBox='0 0 25 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.8146 1.3391C23.3625 0.886968 22.6296 0.886968 22.1774 1.3391L8.30762 15.209L2.97631 9.87769C2.52423 9.42556 1.79127 9.4256 1.3391 9.87769C0.886968 10.3298 0.886968 11.0627 1.3391 11.5149L7.48902 17.6647C7.94097 18.1168 8.67447 18.1165 9.12623 17.6647L23.8146 2.97631C24.2667 2.52423 24.2667 1.79123 23.8146 1.3391Z' fill='%2383EEAE' stroke='%2383EEAE'/%3E%3C/svg%3E%0A");
    width: 23px;
    height: 17px;
    transform: translate(-50%, -9px);
    margin-left: 2px;
}

.draggable[data-index="0"] {
    width: 34px;
    height: 38.98px;
    left: 391px;
    top: 77px;
}

.draggable[data-index="1"] {
    width: 32.63px;
    height: 36.92px;
    left: 392px;
    top: 250px;
}

.draggable[data-index="2"] {
    width: 48.26px;
    height: 43.86px;
    left: 512px;
    top: 245px;
}

.draggable[data-index="3"] {
    width: 46.42px;
    height: 47.75px;
    left: 597px;
    top: 312px;
}

.draggable[data-index="4"] {
    width: 20.23px;
    height: 28.51px;
    left: 613px;
    top: 101px;
}

.draggable[data-index="5"] {
    width: 33.41px;
    height: 64.07px;
    left: 957px;
    top: 216px;
}

.draggable[data-index="6"] {
    width: 24.97px;
    height: 41.14px;
    left: 465px;
    top: 340px;
}

.draggable[data-index="7"] {
    width: 36.47px;
    height: 47.99px;
    left: 234px;
    top: 237px;
}

.draggable[data-index="8"] {
    width: 29.53px;
    height: 48.59px;
    left: 355px;
    top: 140px;

}

.draggable[data-index="9"] {
    width: 45px;
    height: 45px;
    left: 687px;
    top: 198px;
}

.draggable[data-index="10"] {
    width: 26.82px;
    height: 44.7px;
    left: 756px;
    top: 169px;
}

.draggable[data-index="11"] {
    width: 60.32px;
    height: 45.94px;
    left: 813px;
    top: 86px;
}

.draggable[data-index="12"] {
    width: 25.91px;
    height: 34.16px;
    left: 530px;
    top: 297px;

}

.draggable[data-index="13"] {
    width: 43.39px;
    height: 41.81px;
    left: 871px;
    top: 213px;


}

.draggable[data-index="14"] {
    width: 64px;
    height: 40px;
    left: 798px;
    top: 330px;
}

.draggable[data-index="15"] {
    width: 38.56px;
    height: 38.56px;
    left: 727px;
    top: 281px;
}

.draggable[data-index="16"] {
    width: 58.1px;
    height: 89.62px;
    left: 629px;
    top: 182px;
}

.draggable[data-index="17"] {
    width: 42.44px;
    height: 43.15px;
    left: 711px;
    top: 284px;
}


.draggable[data-index="18"] {
    width: 15.3px;
    height: 21.72px;
    left: 272px;
    top: 120px;
}

.draggable[data-index="19"] {
    width: 40.68px;
    height: 49.95px;
    left: 497px;
    top: 68px;
}

.draggable[data-index="20"] {
    width: 31.58px;
    height: 34.46px;
    left: 590px;
    top: 97px;
}

.draggable[data-index="21"] {
    width: 62.12px;
    height: 52.91px;
    left: 682px;
    top: 60px;
}

.draggable[data-index="22"] {
    width: 13.78px;
    height: 24.86px;
    left: 536px;
    top: 151px;
}

.draggable[data-index="23"] {
    width: 30.07px;
    height: 31.15px;
    left: 178px;
    top: 120px;
}

.draggable[data-index="24"] {
    width: 32px;
    height: 32px;
    left: 322px;
    top: 169px;
}

.draggable[data-index="25"] {
    width: 42px;
    height: 21.07px;
    left: 205px;
    top: 279px;
}

.draggable[data-index="26"] {
    width: 26px;
    height: 26px;
    left: 445px;
    top: 173px;
}

.draggable[data-index="27"] {
    width: 31px;
    height: 25.52px;
    left: 853px;
    top: 226px;
}

.draggable[data-index="28"] {
    width: 26px;
    height: 26px;
    left: 901px;
    top: 302px;
}

.draggable[data-index="29"] {
    width: 30.05px;
    height: 30.11px;
    left: 264px;
    top: 152px;
}

.draggable[data-index="30"] {
    width: 29.57px;
    height: 27.37px;
    left: 412px;
    top: 105px;
}

.draggable[data-index="31"] {
    width: 31px;
    height: 31px;
    left: 786px;
    top: 74px;
}

.draggable[data-index="32"] {
    width: 26.82px;
    height: 33.21px;
    left: 955px;
    top: 142px;
}

.draggable[data-index="33"] {
    width: 51px;
    height: 50.95px;
    left: 321px;
    top: 321px;
}


#drop_1 {
    width: 59.02px;
    height: 74.11px;
    left: 208px;
    top: 434.59px;
}

#drop_2 {
    width: 59.5px;
    height: 74.51px;
    left: 343.09px;
    top: 434.59px;
}

#drop_3 {
    width: 59.5px;
    height: 74.51px;
    left: 478.19px;
    top: 434.59px;
}

#drop_4 {
    width: 72.74px;
    height: 91.1px;
    left: 606.42px;
    top: 418px;
}

#drop_5 {
    width: 59.5px;
    height: 74.51px;
    left: 748.37px;
    top: 434.59px;
}

#drop_6 {
    width: 60.14px;
    height: 75.32px;
    left: 887.58px;
    top: 434.59px;
}

/* end main-canvas */

@media (max-width: 1151px) {

    #main-canvas {
        position: relative;
        width: 411px;
        height: 620px;
        background: #F9F1FC;
        margin: 0 auto;
    }

    .draggable[data-index="0"] {
        width: 34px;
        height: 38.98px;
        left: 1px;
        top: 191px;
    }

    .draggable[data-index="1"] {
        width: 32.63px;
        height: 36.92px;
        left: 78.73px;
        top: 224.14px;
    }

    .draggable[data-index="2"] {
        width: 44.4px;
        height: 40.35px;
        left: 159.93px;
        top: 209.07px;

    }

    .draggable[data-index="3"] {
        width: 46.42px;
        height: 47.75px;
        left: 256px;
        top: 390px;
    }

    .draggable[data-index="4"] {
        width: 20.23px;
        height: 28.51px;
        left: 212px;
        top: 92px;
    }

    .draggable[data-index="5"] {
        width: 33.41px;
        height: 64.07px;
        left: 380.01px;
        top: 246px;
    }

    .draggable[data-index="6"] {
        width: 24.97px;
        height: 41.14px;
        left: 164px;
        top: 406px;
    }

    .draggable[data-index="7"] {
        width: 36.47px;
        height: 47.99px;
        left: 115px;
        top: 289px;
    }

    .draggable[data-index="8"] {
        width: 29.53px;
        height: 48.59px;
        left: 140px;
        top: 262px;
    }

    .draggable[data-index="9"] {
        width: 39px;
        height: 39px;
        left: 231px;
        top: 149px;
    }

    .draggable[data-index="10"] {
        width: 26.82px;
        height: 44.7px;
        left: 313.09px;
        top: 146.01px;
    }

    .draggable[data-index="11"] {
        width: 60.32px;
        height: 45.94px;
        left: 349px;
        top: 114px;
    }

    .draggable[data-index="12"] {
        width: 25.91px;
        height: 34.16px;
        left: 129px;
        top: 338px;
    }

    .draggable[data-index="13"] {
        width: 43.39px;
        height: 41.81px;
        left: 331px;
        top: 220px;
    }

    .draggable[data-index="14"] {
        width: 59.9px;
        height: 31.02px;
        left: 288px;
        top: 315.61px;
    }

    .draggable[data-index="15"] {
        width: 38.56px;
        height: 38.56px;
        left: 298px;
        top: 228px;
    }

    .draggable[data-index="16"] {
        width: 58.1px;
        height: 89.62px;
        left: 206px;
        top: 269px;
    }

    .draggable[data-index="17"] {
        width: 42.44px;
        height: 43.15px;
        left: 284.51px;
        top: 379px;
    }


    .draggable[data-index="18"] {
        width: 15.3px;
        height: 21.72px;
        left: 42px;
        top: 100px;
    }

    .draggable[data-index="19"] {
        width: 40.68px;
        height: 49.95px;
        left: 124.66px;
        top: 36.22px;
    }

    .draggable[data-index="20"] {
        width: 31.58px;
        height: 34.46px;
        left: 165.42px;
        top: 28px;
    }

    .draggable[data-index="21"] {
        width: 62.12px;
        height: 52.91px;
        left: 226.18px;
        top: 19px;
    }

    .draggable[data-index="22"] {
        width: 13.78px;
        height: 24.86px;
        left: 126px;
        top: 146px;
    }

    .draggable[data-index="23"] {
        width: 30.07px;
        height: 31.15px;
        left: 0;
        top: 173px;
    }

    .draggable[data-index="24"] {
        width: 32px;
        height: 32px;
        left: 6px;
        top: 300px;
    }

    .draggable[data-index="25"] {
        width: 42px;
        height: 21.07px;
        left: 12px;
        top: 323px;
    }

    .draggable[data-index="26"] {
        width: 26px;
        height: 26px;
        left: 241px;
        top: 166px;
    }

    .draggable[data-index="27"] {
        width: 31px;
        height: 25.52px;
        left: 320px;
        top: 67px;
    }

    .draggable[data-index="28"] {
        width: 26px;
        height: 26px;
        left: 347px;
        top: 350px;
    }

    .draggable[data-index="29"] {
        width: 30.05px;
        height: 30.11px;
        left: 53px;
        top: 207px;
    }

    .draggable[data-index="30"] {
        width: 29.57px;
        height: 27.37px;
        left: 88px;
        top: 59px;
    }

    .draggable[data-index="31"] {
        width: 31px;
        height: 31px;
        left: 270px;
        top: 100px;
    }

    .draggable[data-index="32"] {
        width: 26.82px;
        height: 33.21px;
        left: 397px;
        top: 187px;
    }

    .draggable[data-index="33"] {
        width: 51px;
        height: 50.95px;
        left: 54px;
        top: 368px;
    }

    .droppable:after {
        width: 60px;
    }

    #drop_1 {
        width: 43px;
        height: 54px;
        left: 20px;
        top: 487px;
    }

    #drop_2 {
        width: 43.35px;
        height: 54.29px;
        left: 82px;
        top: 487px;
    }

    #drop_3 {
        width: 43.35px;
        height: 54.29px;
        left: 144px;
        top: 487px;
    }

    #drop_4 {
        width: 52.93px;
        height: 66.29px;
        left: 201px;
        top: 475px;
    }

    #drop_5 {
        width: 43.35px;
        height: 54.29px;
        left: 268px;
        top: 487px;
    }

    #drop_6 {
        width: 43.82px;
        height: 54.88px;
        left: 333px;
        top: 487px;
    }
}

@media only screen and (max-width: 580px) {
    #scene-game {
        overflow-x: hidden;
    }

    #main-canvas {
        width: 90%;
    }

    .droppable {
        width: 35px !important;
    }

    #drop_1 {
        left: -3%;
    }

    #drop_2 {
        left: 14%;
    }

    #drop_3 {
        left: 32%;
    }

    #drop_4 {
        left: 50%;
        width: 42px !important;
    }

    #drop_5 {
        left: 71%;
    }

    #drop_6 {
        left: 90%;
    }

    .droppable:after {
        font-size: 12px;
        line-height: 14px;
        letter-spacing: -0.3px;
    }

    .draggable[data-index="18"] {
        left: 3%;
        top: 14px;
    }

    .draggable[data-index="19"] {
        left: 22%;
        top: 36.22px;
    }

    .draggable[data-index="21"] {
        left: 47%;
        top: 4px;
    }

    .draggable[data-index="27"] {
        left: 86%;
        top: 3px;
    }

    .draggable[data-index="0"] {
        top: 103px;
    }

    .draggable[data-index="22"] {
        left: 32%;
        top: 128px;
    }

    .draggable[data-index="4"] {
        left: 55%;
        top: 92px;
    }

    .draggable[data-index="11"] {
        left: 77%;
        top: 70px;
    }

    .draggable[data-index="1"] {
        left: 8%;
        top: 177.14px;
    }

    .draggable[data-index="2"] {
        left: 34%;
        top: 184.07px;
    }

    .draggable[data-index="26"] {
        left: 67%;
        top: 157px;
    }

    .draggable[data-index="10"] {
        left: 90%;
        top: 154.01px;
    }

    .draggable[data-index="24"] {
        left: 0;
        top: 263px;
    }

    .draggable[data-index="7"] {
        left: 28%;
        top: 257px;
    }

    .draggable[data-index="16"] {
        left: 61%;
        top: 215px;
    }

    .draggable[data-index="33"] {
        left: 5%;
        top: 321px;
    }

    .draggable[data-index="15"] {
        left: 86%;
        top: 242px;
    }

    .draggable[data-index="6"] {
        left: 28%;
        top: 346px;
    }

    .draggable[data-index="3"] {
        left: 46%;
        top: 321px;
    }

    .draggable[data-index="14"] {
        left: 75%;
        top: 335.61px;
    }

    .draggable[data-index="32"] {
        left: -1%;
        top: 397px;
    }

    .draggable[data-index="5"] {
        left: 64%;
        top: 370px;
    }

    .draggable[data-index="28"] {
        left: 93%;
        top: 374px;
    }

    .draggable:after {
        font-size: 11px;
    }
}