html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    width: 100%;
    height: 100%;
}
main, .core {
    width: 100%;
    height: 100%;
}
.core {
    background-color: #ededed;
    z-index: 0;
}
.removeme {
    display: none;
    float: left;
    width: 0;
    height: 0;
    overflow: hidden;
}
.hideme {
    display: none !important;
}
.topright, .botleft {
    z-index: 10;
}
.topright.top {
    position: absolute;
    top: 0px;
    width: 100%;
}
.topright.right {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    display: inline-block;
}
.botleft.bot {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.botleft.left {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    display: inline-block;
}
.topright.top .menubar, .botleft.bot .menubar {
    overflow: hidden;
    width: 100%;
    position: relative;
    min-height: 150px;
}
.topright.right .menubar, .botleft.left .menubar {
    overflow: hidden;
    height: 100%;
    position: relative;
    min-width: 100px;
    display: inline-block;
}
.topright.top .menubar .top {
    height: 50px;
    width: 100%;
    border-radius: 15px;
    background-color: black;
    border: 0.5px solid rgba(255,255,255,0.4);
    background: linear-gradient(to bottom, #000000, #221842);
    --circle-radius: 25px;
    --mask: radial-gradient(circle farthest-side at 50% 65px, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    position: absolute;
    top: -35px;
}
.topright.right .menubar .right {
    width: 50px;
    height: 100%;
    border-radius: 15px;
    /*background-color: black;
    border: 0.5px solid rgba(255,255,255,0.4);
    background: linear-gradient(to left, #000000, #221842);
    --circle-radius: 25px;
    --mask: radial-gradient(circle farthest-side at -16px 50%, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
    -webkit-mask: var(--mask);
    mask: var(--mask);*/
    position: absolute;
    right: -35px;
}

.botleft.bot .menubar .bot {
    height: 50px;
    width: 100%;
    border-radius: 15px;
    background-color: black;
    border: 0.5px solid rgba(255,255,255,0.4);
    background: linear-gradient(to top, #000000, #2c1905);
    /*--circle-radius: 25px;
    --mask: radial-gradient(circle farthest-side at 50% -15px, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
    -webkit-mask: var(--mask);
    mask: var(--mask);*/
    position: absolute;
    bottom: -35px;
}
.botleft.left .menubar .left {
    width: 50px;
    height: 100%;
    /*border-radius: 15px;
    background-color: black;
    border: 0.5px solid rgba(255,255,255,0.4);*/
    /*background: linear-gradient(to right, #000000, #2c1905);*/
    /*--circle-radius: 25px;
    --mask: radial-gradient(circle farthest-side at 65px 50%, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;*/
    -webkit-mask: var(--mask);
    mask: var(--mask);
    position: absolute;
    left: -35px;
}

.topright.top .menubar .circle {
    position: absolute;
    left: 50%;
    top: 7px;
    transform: translateX(-50%);
    bottom: calc(0px - 38px);
    margin-bottom: 0;
    height: 45px;
    width: 45px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #000000;
    z-index: 9;
    transition: height 0.3s;
    background: linear-gradient(to top, #000000, #221842);
    border: 0.5px solid rgba(255,255,255,0.3);
}
.topright.right .menubar .circle {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    left: 30%;
    margin-bottom: 0;
    height: 50px;
    width: 50px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #000000;
    z-index: 9;
    transition: height 0.3s;
    /* background: linear-gradient(to right, #000000, #2c1905); */
    border: 0.5px solid rgba(255,255,255,0.3);
   /* position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    right: calc(0px - 38px);
    margin-bottom: 0;
    height: 45px;
    width: 45px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #000000;
    z-index: 9;
    transition: height 0.3s;
    background: linear-gradient(to left, #000000, #221842);
    border: 0.5px solid rgba(255,255,255,0.3);*/
}

.botleft.bot .menubar .circle {
    position: absolute;
    left: 50%;
    transform:translate(-50%,50%);
    bottom: calc(28px);
    margin-bottom: 0;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #000000;
    z-index: 9;
    transition: height 0.3s;
    background: linear-gradient(to bottom, #000000, #2c1905);
    border: 3px solid #EDEDED;
}
.botleft.left .menubar .circle {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    left: 30%;
    margin-bottom: 0;
    height: 50px;
    width: 50px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #000000;
    z-index: 9;
    transition: height 0.3s;
   /* background: linear-gradient(to right, #000000, #2c1905);*/
    border: 0.5px solid rgba(255,255,255,0.3);
}

.menubar .circle .fa-info-circle {
    color: rgba(255,255,255,0.90);
    text-shadow: 0px 0px 9px rgba(0,0,255,0.75);
    font-size: 200%;
   /* -webkit-animation: glowT 2s ease-in-out infinite alternate;
    -moz-animation: glowT 2s ease-in-out infinite alternate;
    animation: glowT 2s ease-in-out infinite alternate;*/
}

.menubar .circle .fa-gear {
    /*color: rgba(255,255,255,0.90);
    text-shadow: 0px 0px 9px rgba(255,94,0,0.75);
    font-size: 200%;
    -webkit-animation: glow 2s ease-in-out infinite alternate;
    -moz-animation: glow 2s ease-in-out infinite alternate;
    animation: glow 2s ease-in-out infinite alternate;*/
}
.botleft .menubar .circle.active .fa {
    cursor: pointer;
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    opacity: 1;
    /*text-shadow: 0 0 20px #fff, 0 0 30px #ff5e00bf, 0 0 40px #ff5e00bf, 0 0 50px #ff5e00bf, 0 0 60px #ff5e00bf, 0 0 70px #ff5e00bf, 0 0 80px #ff5e00bf;*/
    opacity: 0.5;
}
.topright .menubar .circle.active .fa {
    cursor: pointer;
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    opacity: 1;
    opacity: 0.50;
    /*text-shadow: 0 0 20px #fff, 0 0 30px #0000ffbf, 0 0 40px #0000ffbf, 0 0 50px #0000ffbf, 0 0 60px #0000ffbf, 0 0 70px #0000ffbf, 0 0 80px #0000ffbf;*/
}
.topright .menubar .circle.active, .botleft .menubar .circle.active, .menubar .top.right.active, .menubar .bot.left.active {
    /*border: 1px solid rgba(255,255,255,0.7);*/
}
.topright .full.active, .botleft .full.active {
    border-left: 1px solid rgba(255,255,255,0.7);
    border-right: 1px solid rgba(255,255,255,0.7);
}
.topright .circle .hitarea {
    width: 100px;
    height: 100px;
}
.circle.hitareadivright {
    /*height: 200px !important;
    width: 200px !important;*/
}
.circle.hitareadivtop {
    width: 125px !important;
    height: 125px !important;
}
.circle.hitareadivright .fa {
   /* width: 100px !important;
    height: 100px !important;
    position: absolute;
    top: 50%;
    transform: translateX(-13px) translateY(-16px);
    display: flex;
    left: 50%;*/
}
.circle.hitareadivtop .fa {
    /*width: 100px !important;
    height: 100px !important;
    position: absolute;
    top: 50%; 
    transform: translateY(-150%);
    display: flex;
    left: 50%;*/
}
.topright.top .full {
    height: 0px;
    width: calc(100% - 0px);
    border: 1px solid rgba(255,255,255,0.3);
    border-bottom: none;
    border-top: none;
    background: linear-gradient(to top, #191231 0px, #000000 100%);
}
.botleft.bot .full {
    height: 0px;
    width: calc(100% - 1px);
    border: 1px solid rgba(255,255,255,0.3);
    border-top: none;
    border-bottom: none;
    background: linear-gradient(to bottom, #1f1204 0px, #000000 100%);
}
.topright.right .full {
    width: 0px;
    height: calc(100% - 0px);
    /*border: 1px solid rgba(255,255,255,0.3);*/
    border-left: none;
    border-bottom: none;
    background: linear-gradient(to right, #191231 0px, #000000 100%);
    display: inline-block;
}
.botleft.left .full {
    width: 0px;
    height: calc(100%);
    /*border: 1px solid rgba(255,255,255,0.3);*/
    border-left: none;
    border-right: none;
    /*background: linear-gradient(to left, #1f1204 0px, #000000 100%);*/
    background: ;
    display: inline-block;
}
.full .fullcontrol {
    width: 100%;
    height: 100%;
    font-size: 1.5vw;
    overflow: hidden;
    /*padding: 15px 0;*/
    display: none;
    background: white;
    color: black;
}
.fullcontrol .col, .fullcontrol .row {
    margin: 0;
    padding: 0;
    background: none;
}
.fullcontrol .bb-container {
    overflow: auto;
    width: 100%;
    height: 100%;
}
.rotateddiv1 {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.rotateddiv2 {
    transform-origin: 0% 0%;
    -webkit-transform: rotate(-90deg) translate(-100%);
    -moz-transform: rotate(-90deg) translate(-100%);
    -o-transform: rotate(-90deg) translate(-100%);
    -ms-transform: rotate(-90deg) translate(-100%);
    transform: rotate(-90deg) translate(-100%);
}

/* #### Larger Screens Landscape #### */
@media screen and (min-device-width: 1920px) and (orientation: landscape){
    .full .fullcontrol {
        font-size: 1.7vh;
    }
}


@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #ff5e00, 0 0 30px #ff5e00, 0 0 40px #ff5e00, 0 0 50px #ff5e00, 0 0 60px #ff5e00, 0 0 70px #ff5e00;
        opacity: 0.4;
    }
    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #ff5e00bf, 0 0 40px #ff5e00bf, 0 0 50px #ff5e00bf, 0 0 60px #ff5e00bf, 0 0 70px #ff5e00bf, 0 0 80px #ff5e00bf;
        opacity: 0.7;
    }
}
@-webkit-keyframes glowT {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #0000ff, 0 0 30px #0000ff, 0 0 40px #0000ff, 0 0 50px #0000ff, 0 0 60px #0000ff, 0 0 70px #0000ff;
        opacity: 0.4;
    }
    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #0000ffbf, 0 0 40px #0000ffbf, 0 0 50px #0000ffbf, 0 0 60px #0000ffbf, 0 0 70px #0000ffbf, 0 0 80px #0000ffbf;
        opacity: 0.7;
    }
}


#cpview{
   /* filter: invert(100%);*/
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  font-size: 10px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 110%;
  left: 0;
}


.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent white transparent;
}