.drag-drop-section{
    /* background-image: url('../../../Media/eng/images/010101-05/demo.png'); */
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #3E4C62;
    z-index: 2;
}
.dragdrop_mainarea{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.dragdrop_cardarea{
    width: 187px;
    height: 275px;
    position: absolute;
    left: 38px;
    top: 30px;
}
.dragdrop_headtxt{
    width: 57%;
    position: absolute;
    left: 240px;
    top: 44px;
}
.dragdrop_headtxt1{
    font-size: 20px;
    font-family: SpartanMB_SemiBold;
    color: #fff;
    position: absolute;
    left: 4px;
    right: 0;
    top: 2px;
    margin: 0 auto;
    width: 100%;
}
.dragdrop_headtxt2{
    font-size: 25px;
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    text-align: center;
    position: absolute;
    top: 82px;
    width: 352px;
}
.dragdrop_headtxt3{
    font-size: 25px;
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    text-align: center;
    position: absolute;
    top: 82px;
    width: 352px;
    left: 359px;
}
.dropArea_1{
    width: 348px;
    height: 437px;
    position: absolute;
    left: 244px;
    top: 169px;
    overflow: hidden;
    background-color: rgb(255 255 255 / 30%);
    border: 3px solid rgb(0 45 61 / 50%);
}
.dropArea_1_scroll{
    width: 333px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 14px;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: auto;
}
.dropArea_2{
    width: 348px;
    height: 437px;
    position: absolute;
    left: 600px;
    top: 169px;
    overflow: hidden;
    background-color: rgb(255 255 255 / 30%);
    border: 3px solid rgb(0 45 61 / 50%);
}
.dropArea_2_scroll{
    width: 333px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 14px;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: auto;
}
.dropableArea-1{
     width: 300px;
     height: 100vh;
     position: relative;
     left: 20px;
     top: 3px;
     overflow: hidden;
     background-color: rgb(0 45 61 / 30%);
}
.dropableArea-2{
    width: 300px;
    height: 100vh;
    position: absolute;
    left: 20px;
    top: 3px;
    overflow: hidden;
    background-color: rgb(0 45 61 / 30%);
}
.dropArea-main{
    width: 300px;
    height: 300px;
    position: absolute;
    right: 29px;
    top: 170px;
}
.drop-dragme-txt{
    font-size: 30px;
    font-family: SPARTANMB-REGULAR;
    color: #FFFFFF;
    text-align: center;
    position: absolute;
    top: 14px;
    width: 100%;
    left: -1px;
}
.drop-dragme-arrow{
    width: 38px;
    height: 93px;
    position: absolute;
    left: 24px;
    top: 4px;
}
.dropable_section{
    width: 245px;
    height: 133px;
    position: absolute;
    left: 29px;
    top: 73px;
    box-shadow: 0px 0px 20px 5px rgb(255 255 255 / 50%);
    -webkit-box-shadow: 0px 0px 20px 5px rgb(255 255 255 / 50%);
    -moz-box-shadow: 0px 0px 20px 5px rgb(255 255 255 / 50%);
    background: transparent;
}
.drop_1{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_1 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}
.drop_2{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_2 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}
.drop_3{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_3 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}
.drop_4{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_4 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}
.drop_5{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_5 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}
.drop_6{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_6 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}

.drop_7{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_7 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}
.drop_8{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_8 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}
.drop_9{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_9 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}
.drop_10{
    width: 245px;
    height: 133px;
    background-color: #002D3D;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
}
.drop_10 span{
    font-family: SpartanMB_SemiBold;
    color: #FAA61F;
    font-size: 16px;
}
.droparea-watermark{

color: #FAA61F;

font-size: 30px;

font-family: SPARTANMB-REGULAR;

width: 200px;

margin: 0 auto;

text-align: center;

position: absolute;

left: 0;

top: 44%;

right: 0;
}

.dropArea_1_scroll::-webkit-scrollbar {
  width: 5px;
  border-radius: 26px;
}

/* Track */
.dropArea_1_scroll::-webkit-scrollbar-track {
  background: #072d3d;
  border-radius: 20px;
}
 
/* Handle */
.dropArea_1_scroll::-webkit-scrollbar-thumb {
  background: #f2a220;
  border-radius: 20px;
}

/* Handle on hover */
.dropArea_1_scroll::-webkit-scrollbar-thumb:hover {
  background: #fff; 
}

.dropArea_2_scroll::-webkit-scrollbar {
  width: 5px;
  border-radius: 26px;
}

/* Track */
.dropArea_2_scroll::-webkit-scrollbar-track {
  background: #072d3d;
  border-radius: 20px;
}
 
/* Handle */
.dropArea_2_scroll::-webkit-scrollbar-thumb {
  background: #f2a220;
  border-radius: 20px;
}

/* Handle on hover */
.dropArea_2_scroll::-webkit-scrollbar-thumb:hover {
  background: #fff; 
}