.debug_panel_toggle{
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    background: #771fe4;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.75);
    cursor: pointer;
}
.debug_panel_toggle:hover{
    background: #8f42ed;
}
.debug_panel_toggle span{
    color: white;
    font-size: 40px;
}

.debug_panel {
    position: absolute;
    bottom: 50px;
    right: calc(50% + 50px);
    padding: 10px 0;
    z-index: 999;
    max-height: 400px;
}
.debug_panel .debug_content_wrapper{
    color: #fff;
    width: 370px;
    padding: 15px;
    visibility: visible;
    pointer-events: none;
    background: #771fe4;
    border-radius: 15px;
    box-shadow: 1px 1px 1px 1px #f0f0f0;
    opacity: 0;
    max-height: 370px;
    overflow-y: auto;
}

.debug_panel .debug_content_wrapper:before{
    bottom: -2px;
    right: -4px;
    content: "";
    background-color: #771fe4;
    height: 1px;
    position: absolute;
    width: 0;
}
.debug_panel .debug_content_wrapper:after{
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    bottom: -1px;
    right: -4px;
    width: 70px;
    content: "";
    background-color: #771fe4;
    height: 1px;
    position: absolute;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.debug_panel .debug_content_wrapper p{
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    font-family: monospace;
    color: #fff;
}
.debug_panel .debug_content_wrapper p label{
    font-weight: 700;
}
.debug_panel .debug_content_wrapper p label.query{
    width: 100%;
    display: block;
}
.debug_panel .debug_content_wrapper p span.query{
    padding-left: 10px;
    display: block;
}
.debug_panel.active .debug_content_wrapper{
    opacity: 0.85;
    -webkit-transition: opacity 0.7s ease, visibility 0.7s ease;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
.debug_panel.active .debug_content_wrapper:before{
    width: 180px;
    transition: width 0.4s;
}
.debug_panel.active .debug_content_wrapper:after{
    opacity: 1;
}

.full_debug_panel{
    display: none;
    position: fixed;
    max-width: 50vw;
    max-height: 50vh;
    background: #771fe4;
    border-radius: 10px;
    bottom: 70px;
    right: 70px;
    z-index: 9999;
    color: #fff;
    font-size: 12px;
    font-family: monospace;
    padding: 20px 15px 15px 20px;
}

.full_debug_panel.max_height{
    max-height: calc(100vh - 100px);
}

.full_debug_panel.max_width{
    max-width: calc(100vw - 100px);
}

.full_debug_panel.min_height{
    max-height: 25vh;
}

.full_debug_panel.min_width{
    max-width: 25vw;
}

.full_debug_panel.active{
    display: flex;
}

.full_debug_panel th{
    font-size: 15px;
    font-weight: 700;
}

.full_debug_panel td, .full_debug_panel th{
    padding: 5px;
    border: 1px solid #fff;
}

.full_debug_panel td:first-child{
    min-width: 200px;
    line-height: 13px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.full_debug_panel p{
    margin: 0;
    padding: 0;
    line-height: 12px;
}

.de_debug_active{
    border: 1px solid #ff0000;
}
.de_debug_active:after{
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    border: 1px solid #771fe4;
    width: 4px;
    height: 4px!important;
    border-radius: 2px;
    display: block;
    z-index: 1000;
    visibility: visible!important;
    background: #771fe4;
}

.full_debug_panel .panel_wrapper{
    overflow-y: auto;
    max-height: 100%;
}
/* width */
.full_debug_panel .panel_wrapper::-webkit-scrollbar, .debug_content_wrapper::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.full_debug_panel .panel_wrapper::-webkit-scrollbar-track, .debug_content_wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.full_debug_panel .panel_wrapper::-webkit-scrollbar-thumb, .debug_content_wrapper::-webkit-scrollbar-thumb {
    background: #8e3fef;
}

/* Handle on hover */
.full_debug_panel .panel_wrapper::-webkit-scrollbar-thumb:hover, .debug_content_wrapper::-webkit-scrollbar-thumb:hover {
    background: #c195f6;    
}

.debug_panel h4{
    margin-bottom: 0;
    margin-top: 10px;
    color: #fff;
}

.full_debug_panel tr.active{
    background: #8e3fef;
    font-weight: 700;
}

.full_debug_panel .height_control{
    position: absolute;
    display: flex;
    left: 50%;
    top: 0px;
    transform: translate(-50%, 0);
}

.full_debug_panel .width_control{
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}
.full_debug_panel .window_control{
    position: absolute;
    top: 0;
    right: 15px;
}

.full_debug_panel .panel_control span{
    cursor: pointer;
}

.full_debug_panel .height_control span ~ span{
    margin-left: 10px;
}

.full_debug_panel .width_control span ~ span{
    margin-top: 10px;
}

.full_debug_panel.max_height .height_control .increase{
    visibility: hidden;
}

.full_debug_panel.min_height .height_control .decrease{
    visibility: hidden;
}

.full_debug_panel.max_width .width_control .increase{
    visibility: hidden;
}

.full_debug_panel.min_width .width_control .decrease{
    visibility: hidden;
}

.full_debug_panel.minimized{
    height: 0;
    width: 50px;
    padding-bottom: 0;
}

.full_debug_panel.minimized .height_control, .full_debug_panel.minimized .width_control {
    display: none;
}