html,body{
    padding:0px;
    margin:0px;
    height:100%;
    width:100%;
    -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
}
body{
    color:black;
    background: white;
}
.d-row{
    display:none;
    position:absolute;
    width:90%;
    max-width:1200px;
    top: 70px;
    left:50%;
    transform:translateX(-50%);
    padding:20px;
    
}

.d-row > .message{
    width:100%;
    font-size:20px;
    text-align:center;
    padding:10px;
}
.d-row > .message .footer{
    margin-top:10px;
    
}

.d-row > .instruction{
    width:100%;
    font-size:22px;
    text-align:center;
    padding:10px;
    min-height: 100px;
}

.d-row > .content{
    width:50%;
    display:inline-block;
    margin-left:-4px;
    padding:10px;
    vertical-align:top;
}


.d-row > .content > .d-box{
    width: 100%;
    height: 520px;
    background: #f9f4ce;
    background: url(../../assets/img/mapBg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding:10px;
}

.d-row > .content > .d-box > .body{
    width:100%;
    height:100%;
    position:relative;
}

.d-row > .content > .d-box.drop-cont > .body{
    width:100%;
    height:100%;
    position:relative;
    padding: 10px;
    padding: 1vmin;
}

.d-row > .content > .d-box.drop-cont > .body > .d-map{
    width:100%;
    height:auto;
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}


.d-row > .content > .d-box.drop-cont > .body > .d-map > img{
    width:100%;
    height:auto;
    position:relative;
}

.drop-here{
    width:1px;
    height:1px;
    position:absolute;

}



.drop-here > .content{
    width:80px;
    height:80px;
    width: 3vw;
    height: 3vw;
    background: transparent;
    background-repeat: no-repeat;
    background-size: 30px auto;
    background-size: 1.5vw auto;
    background-position: center; 
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);    
    border-radius:10px;
}

.drop-here.hasX > .content{
    background: url(../../assets/img/mark.png);
    background-repeat: no-repeat;
    background-size: 30px auto;
    background-size: 1.5vw auto;
    background-position: center; 
}


.drag-me{
    width:80px;
    height:80px;
    width: 3vw;
    height: 3vw;
    background:transparent;
    border-radius:10px;   
    position:relative;
    cursor:pointer;
    z-index:500;
    display:inline-block;
}

.drag-me > img{
    max-width:100%;
    max-height:100%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);   
    z-index:500;

}

.drag-cont .drag-me{
    margin:10px;
}


.drag-cont > .body{
    display:none;
    padding: 90px;
    text-align: center;    
}
.drag-cont > .body-msg{
    top: 50%;
    left: 50%;
    position: relative;
    width: 80%;
    transform: translate(-50%,-50%);
 }   

.drag-cont > .body-msg > .item{
    width: 90%;
    padding: 10px;
    position:relative;
    left:50%;
    transform:translateX(-50%);
}
.drag-cont > .body-msg > .item > .img-cont{
    width:100px;
    height:80px;
    width: 3vw;
    height: 2vw;
    position:relative;
    display:inline-block;
    vertical-align:middle;
}
.drag-cont > .body-msg > .item > .img-cont > img{
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    transform:translate(-50%,-50%);
    margin:auto;
}
.drag-cont > .body-msg > .item > .name{
    display:inline-block;
    vertical-align:middle;
    font-size: 30px;
    font-size: 1.5vw;
    padding-left: 10px;
    font-weight:700;
    color: black;
}

.drag-cont > .body-msg .note{
    font-size:20px;
    font-weight:700;
    color:red;
    text-align:center;
}
.drag-cont > .body-msg .note2{
    font-size:16px;
    text-align:center;
}

.drag-cont > .body-msg2{
    display:none;
    padding: 40px;
    text-align: center;    
    height:100%;
}
.drag-cont > .body-msg2 > .note{
    position: relative;
    font-size: 30px;
    font-weight: 700;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.drag-cont > .body-msg2 > .final{
    position: relative;
    font-size: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
    text-align:left;
}
.drag-cont > .body-msg2 > .final img {
    vertical-align: middle;
    border-style: none;
    width: auto;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
    
}


.d-react{
    position:fixed;
    width:90%;
    max-width:1200px;
    top:40%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:20px;
    display:none;
}


.d-react > .content > .message {
    font-size: 22px;
    padding: 30px 10px;
    text-align: center;
    border: 5px solid black;
    border-radius: 10px;
    background: transparent;
    color: black;
}
.d-react > .content > .targets{
    position: relative;
    width: 100%;
    text-align: center;
    border: 5px solid transparent;
    border-radius: 0px 0px 10px 10px;
    min-height: 250px;
    background: white;
    min-height: 150px;
}
.d-react > .content > .targets > .body{
    position:relative;
    height:auto;
    opacity:0;
    min-height:150px;
}
.d-react > .content > .targets > .body > img {
    width: 150px;
    height: auto;
    vertical-align: middle;
    margin:20px;
}
.d-react > .content > .targets > .body > img.arrow {
    width: 100px;
    height: auto;
}

.mapReactInfo > .body{
    position: relative;
    width: 100%;
    height: auto;
}
.mapReactInfo > .body > img{
    position: relative;
    width: 100%;
    height: auto;
}
.mapReactInfo > .body > .img{
    width:1px;
    height:1px;
    position:absolute;
    top:50%;
    left:50%;
}
.mapReactInfo > .body > .img > .body{
    width:80px;
    height:80px;
    width: 3vw;
    height: 3vw;
    background:transparent;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);    
    border-radius:10px;
}
.mapReactInfo > .body > .img > .body > img{

    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    transform:translate(-50%,-50%);
    margin:auto;    
}

.d-chart{
    display:none;
    position: relative;
    height: 500px;
    width: 800px;
    position: fixed;
    top: 120px;
    left:50%;
    transform:translateX(-50%);
}

.d-chart > .message {
    position: relative;
    text-align: left;
    font-size: 22px;
    border: 5px solid black;
    padding: 10px;
    border-radius:10px;
}

.d-chart > .footer {
    text-align: right;
    padding: 20px 0px;
}

#bchart{
    display:none;
}

.d-scroll{
    width: 100%;
    background: url(../../assets/img/mapBg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding:60px;
}

.d-progress{
    border: none;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 5px;
    z-index:9999;
    background: #86888b;
}

.d-progress::-webkit-progress-value {
  background: #86888b;
}

.d-progress::-moz-progress-bar {
  background: #86888b;
}
.d-progress::-webkit-progress-value {
  background: #86888b;
}
.d-progress::-webkit-progress-bar {
  background: #dddddd;
}

.d-header {
    position: fixed;
    top: 0px;
    font-size: 30px;
    font-weight: 700;
    background: black;
    width: 100%;
    color: white;
    padding: 10px;
    text-align: center;
    z-index: 9998;
}

.modal-content {
    background: url(../../assets/img/mapBg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    border:0px;
    padding:20px;
}

.modal-header {
    padding-top: 40px;
    border: 0px;
    padding-bottom: 0px;
}
.modal-body {
    padding: 0px;
}


.modal-title {
    text-align: center;
    position: relative;
    width: 100%;
    padding-top: 30px;
}

.modal-backdrop {
    background-color: #fff;
}

.modal-backdrop.show {
    opacity: .8;
}


.d-legend{
    font-weight: 700;
    color: black;
    padding-left: 40px;
    padding-left: 2vw;
    font-size: 30px;
    font-size: 1.7vw;
}

.browserCont{
    position:relative;
    width:100%;
    text-align:center;
    margin:20px 0px;
}
.browserCont > .browser{
    position:relative;
    width:50px;
    height:auto;
    margin:10px;
}
.browserCont > .browser > img{
    width:50px;
    height:auto;
}