/* Element #1 */
#element-1 {
    display: block;
    transform: translate(583px, 5px);
    width: 430px;
    height: 430px;
    background: url(img/st.svg) no-repeat center center;
    background-size: contain;
    z-index: 1;
    position: absolute;
}
#element-1::after {
    content: 'Электростанция с выводом 10 кВ';
    position: absolute;
    top: 32px;
    left: -270px;
    font-size: 28px;
    line-height: 112%;
    text-transform: none;
    color: #fff;
}
#inner-dropzone-1 {
    width: 500px;
    height: 500px;
    position: absolute;
    left: 490px;
    right: 200px;
}
/* End Element #1 */


/* Element #2 */
#element-2 {
    bottom: 300px;
    left:1020px;
}
.drag-drop#element-2::after {
    content: 'Трансформаторная подстанция 10/0,4 кВ';
}
#element-2 > img {
    width: 60%;
    max-width: 150px;
    top: -38px;
    position: relative;
}
#inner-dropzone-2 {
    width: 500px;
    height: 500px;
    position: absolute;
    bottom: 1200px;
    left: 600px;
}
.dropzone-2  {
    border-radius: 50%;
    margin:0;
    padding: 10px;
    width: 80%;
    transition: background-color 0.3s;
}
.dropzone-2.drop-active {
    transition: all 0.4s ease;
    webkit-box-shadow: 0 0 160px 60px #fac23f;
    -moz-box-shadow: 0 0 160px 60px #fac23f;
    box-shadow: 0 0 160px 60px #77fa3f;
}
.dropzone-2.drop-target {
    background-color: #fac23f87;
    border:2px dashed #7f9700;
    transition: all 0.4s ease;
}
.drag-drop.can-drop {

}

.drag-drop.can-drop#element-2 {
    width: 400px;
    height: 400px;
    background: url('img/el-1.svg') no-repeat center center;
    background-size: contain;
}
.drag-drop.can-drop#element-2::before {
    display: none;
}


/* End Element #2 */


/* Element #3 */
#element-3 {
    bottom: 300px;
    left: 20px;
}
.drag-drop#element-3::after {
    content: 'Линия 220 кВ';
}
#element-3 > img {
    height: 80%;
}
#inner-dropzone-3 {
    width: 300px;
    height: 600px;
    position: absolute;
    left: 850px;
    top: 0;
}
.dropzone-3  {
    border-radius: 5%;
    margin:0;
    padding: 10px;
    width: 80%;
    transition: background-color 0.3s;
}
.dropzone-3.drop-active {
    transition: all 0.4s ease;
    webkit-box-shadow: 0 0 160px 60px #fac23f;
    -moz-box-shadow: 0 0 160px 60px #fac23f;
    box-shadow: 0 0 160px 60px #77fa3f;
}
.dropzone-3.drop-target {
    background-color: #fac23f87;
    border:2px dashed #7f9700;
    transition: all 0.4s ease;
}
.drag-drop.can-drop {

}
.drag-drop.can-drop#element-3 {
    width: 159px;
    height: 516px;
    background: url('img/line-10-k.svg') no-repeat center center;
    background-size: contain;
}
.drag-drop.can-drop#element-3::before {
    display: none;
}
/* End Element #3 */


/* Element #4 */
#element-4 {
    bottom: 300px;
    left: 270px;
}
.drag-drop#element-4::after {
    content: 'Линия 220 кВ';
}

#element-4 > img {
    height: 80%;
}
#inner-dropzone-4 {
    width: 217px;
    height: 426px;
    position: absolute;
    left: 753px;
    top: 510px;
}
.dropzone-4  {
    border-radius: 5%;
    margin:0;
    padding: 10px;
    width: 80%;
    transition: background-color 0.3s;
}
.dropzone-4.drop-active {
    transition: all 0.4s ease;
    webkit-box-shadow: 0 0 160px 60px #fac23f;
    -moz-box-shadow: 0 0 160px 60px #fac23f;
    box-shadow: 0 0 160px 60px #77fa3f;
}
.dropzone-4.drop-target {
    background-color: #fac23f87;
    border:2px dashed #7f9700;
    transition: all 0.4s ease;
}
.drag-drop.can-drop {

}
.drag-drop.can-drop#element-4 {
    width: 159px;
    height: 516px;
    background: url('img/line-10-k.svg') no-repeat center center;
    background-size: contain;
}
.drag-drop.can-drop#element-4::before {
    display: none;
}
/* End Element #3 */



/* Element #5 */
#element-5 {
    bottom: 300px;
    left: 20px;
}
.drag-drop#element-5::after {
    content: 'Повышающая подстанция';
}
#inner-dropzone-5 {
    width: 450px;
    height: 450px;
    position: absolute;
    left: 1030px;
    top: 150px;
}
.dropzone-5  {
    border-radius: 50%;
    margin:0;
    padding: 10px;
    width: 80%;
    transition: background-color 0.3s;
}
.dropzone-5.drop-active {
    transition: all 0.4s ease;
    webkit-box-shadow: 0 0 160px 60px #fac23f;
    -moz-box-shadow: 0 0 160px 60px #fac23f;
    box-shadow: 0 0 160px 60px #77fa3f;
}
.dropzone-5.drop-target {
    background-color: #fac23f87;
    border:2px dashed #7f9700;
    transition: all 0.4s ease;
}
.drag-drop.can-drop {

}
.drag-drop.can-drop#element-5 {
    width: 300px;
    height: 300px;
    background: url('img/up-st.svg') no-repeat center center;
    background-size: contain;
}
.drag-drop.can-drop#element-5::before {
    display: none;
}
/* End Element #5 */


/* Element #8 */
#element-8 {
    bottom: 300px;
    left: 520px;
}
.drag-drop#element-8::after {
    content: 'Подстанция 220/110/10 кВ';
}
#element-8 > img {
    height: 80%;
}
#inner-dropzone-8 {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 650px;
    top: 1100px;
}
.dropzone-8  {
    border-radius: 50%;
    margin:0;
    padding: 10px;
    width: 80%;
    transition: background-color 0.3s;
}
.dropzone-8.drop-active {
    transition: all 0.4s ease;
    webkit-box-shadow: 0 0 160px 60px #fac23f;
    -moz-box-shadow: 0 0 160px 60px #fac23f;
    box-shadow: 0 0 160px 60px #77fa3f;
}
.dropzone-8.drop-target {
    background-color: #fac23f87;
    border:2px dashed #7f9700;
    transition: all 0.4s ease;
}
.drag-drop.can-drop {

}
.drag-drop.can-drop#element-8 {
    width: 320px;
    height: 226px;
    background: url('img/down-st.svg') no-repeat center center;
    background-size: contain;
}
.drag-drop.can-drop#element-8::before {
    display: none;
}
/* End Element #8 */


/* Element #9 */

#element-9 {
    display: block;
    transform: translate(1330px, 2582px);
    width: 750px;
    height: 750px;
    background: url(img/company.svg) no-repeat center center;
    background-size: contain;
    z-index: 1;
    position: absolute;
}
#element-9::after {
    content: 'Предприятие';
    position: absolute;
    top: 114px;
    right: 0;
    font-size: 28px;
    line-height: 112%;
    text-transform: none;
    color: #fff;
}

#inner-dropzone-9 {
    width: 500px;
    height: 500px;
    position: absolute;
    left: 1501px;
    top: 2725px;
}
/* End Element #9 */




/* Element #14 */
#element-14 {
    bottom: 20px;
    left: 20px;
}
.drag-drop#element-14::after {
    content: 'Прибор учета';
}
#element-14 > img {

}
#inner-dropzone-14 {
    width: 300px;
    height: 300px;
    position: absolute;
    right: 580px;
    bottom: 266px
}
.dropzone-14  {
    border-radius: 5%;
    margin:0;
    padding: 10px;
    width: 80%;
    transition: background-color 0.3s;
}
.dropzone-14.drop-active {
    transition: all 0.4s ease;
    webkit-box-shadow: 0 0 160px 60px #fac23f;
    -moz-box-shadow: 0 0 160px 60px #fac23f;
    box-shadow: 0 0 160px 60px #77fa3f;
}
.dropzone-14.drop-target {
    background-color: #fac23f87;
    border:2px dashed #7f9700;
    transition: all 0.4s ease;
}
.drag-drop.can-drop {

}
.drag-drop.can-drop#element-14 {
    width: 87px;
    height: 78px;
    background: url('img/pb1.svg') no-repeat center center;
    background-size: cover;
}
.drag-drop.can-drop#element-14::before {
    display: none;
}


/* End Element #14 */


/* Element #15 */
#element-15 {
    bottom: 300px;
    left: 770px;
}
.drag-drop#element-15::after {
    content: 'Кабельная линия 10 кВ';
}
#element-15 > img {
    height: 65%;
}
#inner-dropzone-15 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 690px;
    bottom: 1500px;
}
.dropzone-15  {
    border-radius: 5%;
    margin:0;
    padding: 10px;
    width: 80%;
    transition: background-color 0.3s;
}
.dropzone-15.drop-active {
    transition: all 0.4s ease;
    webkit-box-shadow: 0 0 160px 60px #fac23f;
    -moz-box-shadow: 0 0 160px 60px #fac23f;
    box-shadow: 0 0 160px 60px #77fa3f;
}
.dropzone-15.drop-target {
    background-color: #fac23f87;
    border:2px dashed #7f9700;
    transition: all 0.4s ease;
}
.drag-drop.can-drop {

}
.drag-drop.can-drop#element-15 {

}
.drag-drop.can-drop#element-15::before {
    display: none;
}
/* End Element #15 */



/* Element #14 */
#element-16 {
    bottom: 300px;
    left: 1520px;
}
.drag-drop#element-16::after {
    content: 'Опора';
}
#element-16 > img {
    max-height: 80%;
}
#inner-dropzone-16 {
    width: 200px;
    height: 400px;
    position: absolute;
    right: 850px;
    bottom: 258px;
}
.dropzone-16  {
    border-radius: 5%;
    margin:0;
    padding: 10px;
    width: 80%;
    transition: background-color 0.3s;
}
.dropzone-16.drop-active {
    transition: all 0.4s ease;
    webkit-box-shadow: 0 0 160px 60px #fac23f;
    -moz-box-shadow: 0 0 160px 60px #fac23f;
    box-shadow: 0 0 160px 60px #77fa3f;
}
.dropzone-16.drop-target {
    background-color: #fac23f87;
    border:2px dashed #7f9700;
    transition: all 0.4s ease;
}
.drag-drop.can-drop {

}
.drag-drop.can-drop#element-16 {
    width: 200px;
    height: 300px;
    background: url('img/op.svg') no-repeat center center;
    background-size: cover;
}
.drag-drop.can-drop#element-16::before {
    display: none;
}


/* End Element #14 */


/* Element #17 */
#element-17 {
    bottom: 300px;
    left: 1270px;
}
.drag-drop#element-17::after {
    content: 'Кабельная линия 0.4 кВ';
}
#element-17 > img {
    height: 65%;
}
#inner-dropzone-17 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 666px;
    bottom: 680px;
}
.dropzone-17  {
    border-radius: 5%;
    margin:0;
    padding: 10px;
    width: 80%;
    transition: background-color 0.3s;
}
.dropzone-17.drop-active {
    transition: all 0.4s ease;
    webkit-box-shadow: 0 0 160px 60px #fac23f;
    -moz-box-shadow: 0 0 160px 60px #fac23f;
    box-shadow: 0 0 160px 60px #77fa3f;
}
.dropzone-17.drop-target {
    background-color: #fac23f87;
    border:2px dashed #7f9700;
    transition: all 0.4s ease;
}
.drag-drop.can-drop {

}
.drag-drop.can-drop#element-17 {
    background: none;
    background-size: cover;
}
.drag-drop.can-drop#element-17::before {
    display: none;
}
/* End Element #16 */