#web_tools {
    color: #000 !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
}

#test {

}

#test .xs, #test .sm, #test .md, #test .lg, #test .xl { display: none; }

#web_controls {
    padding: .5rem;
    background: #fff;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

#gp_details {
    padding: .5rem;
    background: #fff;
    color: #000 !important;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    min-width: 400px;
    max-width: 50vw;
    max-height: 75vh;
    overflow: scroll;
}

#gp_details pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* xs */
@media screen and (max-width: 575px) {
    #test .xs { display: block; border: 2px solid red; }

    .order-xs-1 { -ms-flex-order: 1; order: 1; }

    .order-xs-2 { -ms-flex-order: 2; order: 2; }

    .order-xs-3 { -ms-flex-order: 3; order: 3; }

    .order-xs-4 { -ms-flex-order: 4; order: 4; }

    .order-xs-5 { -ms-flex-order: 5; order: 5; }
}

/* sm */
@media screen and (min-width: 576px) and (max-width: 767px) {
    #test .sm { display: block; border: 2px solid yellow; }
}

/* md */
@media screen and (min-width: 768px) and (max-width: 991px) {
    #test .md { display: block; border: 2px solid green; }
}

/* lg */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    #test .lg { display: block; border: 2px solid blue; }
}

/* xl */
@media screen and (min-width: 1200px) {
    #test .xl { display: block; border: 2px solid black; }

}