/* --- this task elements --- */

.draggable.ui-draggable-disabled .inner-element {
  color: #52adca;
}

.image.step-description {
    top: 88px;
    left: 26px;
}

.__bordered {
    border: 1px solid #c5c3c3;
}

.__shadow {
    background-color: white;
    box-shadow: inset 1px 1px 6px 0 rgb(90 90 90 / 58%);
}

/* -------------------- this task step 1 -------------------- */

.__image_st1_1 {
    top: 112px;
    left: 448px;
}

.__cont_st1 {
    top: 154px;
    left: 36px;
    width: 526px;
    height: 240px;
    border-radius: 10px;
    background-color: #caf1f5;
}

.__text_st1 {
    top: 166px;
    left: 56px;
    font-size: 27px;
    color: #52adca;
}

.__image_st1_2 {
    top: 210px;
    left: 58px;
}

.__draggable_st1,
.__droppable_st1 {
    width: 112px;
    height: 44px;
    border-radius: 5px;
    background-color: #f5f5f5;
}

#field[data-task='1'] #draggable1 {
    top: 284px;
    left: 624px;
    padding-top: 2px;
}

#field[data-task='1'] #draggable2 {
    top: 284px;
    left: 758px;
}

#field[data-task='1'] #draggable3 {
    top: 346px;
    left: 624px;
    padding-top: 4px;
}

#field[data-task='1'] #draggable4 {
    top: 346px;
    left: 758px;
    padding-top: 3px;
}

#field[data-task='1'] #droppable1 {
    top: 268px;
    left: 174px;
}

#field[data-task='1'] #droppable2 {
    top: 268px;
    left: 402px;
}

#field[data-task='1'] #droppable3 {
    top: 328px;
    left: 388px;
}

/* -------------------- this task step 2 -------------------- */

.__cont_st2_st3 {
    top: 140px;
    left: 34px;
    width: 630px;
    height: 252px;
    border-radius: 10px;
    background-color: #caf1f5;
}

.__image_st2_1 {
    top: 140px;
    left: 58px;
}

.__image_st2_2 {
    top: 262px;
    left: 58px;
}

.__draggable_st2_st3,
.__droppable_st2_st3 {
    width: 194px;
    height: 40px;
    border-radius: 5px;
    color: #52adca;
    background-color: #f2f2f2;
}

#field[data-task='2'] #draggable1,
#field[data-task='2'] #draggable1-stack {
    top: 256px;
    left: 722px;
}

#field[data-task='2'] #draggable2,
#field[data-task='2'] #draggable2-stack {
    top: 338px;
    left: 722px;
    font-size: 28px;
}

#field[data-task='2'] #droppable1 {
    top: 214px;
    left: 212px;
}

#field[data-task='2'] #droppable2 {
    top: 214px;
    left: 426px;
}

#field[data-task='2'] #droppable3 {
    top: 332px;
    left: 212px;
}

#field[data-task='2'] #droppable4 {
    top: 332px;
    left: 426px;
}

/* -------------------- this task step 3 -------------------- */

.__image_st3_1 {
    top: 142px;
    left: 58px;
}

.__image_st3_2 {
    top: 262px;
    left: 58px;
}

#field[data-task='3'] #draggable1,
#field[data-task='3'] #draggable1-stack {
    top: 256px;
    left: 722px;
}

#field[data-task='3'] #draggable2,
#field[data-task='3'] #draggable2-stack {
    top: 338px;
    left: 722px;
    font-size: 28px;
}

#field[data-task='3'] #droppable1 {
    top: 214px;
    left: 212px;
}

#field[data-task='3'] #droppable2 {
    top: 214px;
    left: 426px;
}

#field[data-task='3'] #droppable3 {
    top: 332px;
    left: 212px;
}

#field[data-task='3'] #droppable4 {
    top: 332px;
    left: 426px;
}