#BackGround {
    position: absolute;
    width: 100%;
    height: 100%;
    /*opacity: 0.5;*/
    /*z-index: 100;*/
    /*background: rgb(0, 0, 0);*/
}

canvas#CursorLayer {
    position: fixed;
    z-index: 101;
}

#HelpPanel {
    position: absolute;
    width: 25%;
    min-width: 250px;
    max-width: 400px;
    top: 45px;
    right: 80px;
    z-index: 102;
    background: white;
}

#HelpPanel #closeHelpPanel {
    font-size: 1.5em;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
    color: #004593;
    font-weight: bold;
}

#HelpPanel .HelpArrow {
    border: 10px solid transparent;
    position: absolute;
}

#HelpPanel .HelpArrow.left {
    left: -20px;
    top: 10px;
    border-right-color: white;
}

#HelpPanel .HelpArrow.right {
    right: -20px;
    top: 10px;
    border-left-color: white;
}

#HelpPanel .HelpArrow.top {
    left: 10px;
    top: -20px;
    transform: rotate(-90deg);
    border-left-color: white;
}

#HelpPanel .HelpArrow.bottom {
    left: 10px;
    bottom: -20px;
    transform: rotate(90deg);
    border-left-color: white;
}

#HelpDiv {
    color: #004593;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    display: table;
    padding: 20px 10px 3px 20px;
    border-bottom: solid 5px #004593;
    font-weight: bold;
    text-align: center;
    font-size: 16px
}

#HelpDivDesc {
    padding: 20px;
}

#HelpPanel #HelpButtonsDiv {
    display: flex;
    border-top: 1px solid #ccc;
}

#HelpPanel #HelpButtonsPrev {
    color: black;
    font-weight: bold;
    bottom: 1px;
    background:none;
    border:none;
    cursor: pointer;
    width: 50%;
    padding: 10px;
}

#HelpPanel #HelpButtonsPrev:disabled {
    color: grey;
    cursor: default;
}

#HelpPanel #HelpButtonsNext {
    color: #004593;
    font-weight: bold;
    bottom: 1px;
    left: 50%;
    background:none;
    border:none;
    cursor: pointer;
    width: 50%;
    padding: 10px;
}

#HelpPanel #HelpButtonsNext:disabled {
    color: grey;
    cursor: default;
}

#HelpPanel #HelpButtonsExitHelp {
    display: none;
    color: #004593;
    font-weight: bold;
    bottom: 1px;
    left: 50%;
    background:none;
    border:none;
    cursor: pointer;
    width: 50%;
    padding: 10px;
}

/*#HelpPanel_hr {
    position: absolute;
    top: 125px;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}*/

/*#interactiveHelpLauncherButton {
    color: #004593;
    position: absolute;
    font-weight: bold;
    top: 20%;
    right: 10%;
    padding: 1%;
    text-decoration: none;
    background: white;
    border: solid 1px #FFD614;
    max-width: 25%;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    display: table;
    z-index: 90;
}*/
#interactiveHelpLauncherButton {
    position: relative;
    float: right;
    color: #004593;
    font-weight: bold;
    padding: 1%;
    text-decoration: none;
    background: white;
    border: solid 1px #FFD614;
    max-width: 25%;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    display: table;
    z-index: 90;
}

#interacHelpBtnTextCont {
    display: flex;
    align-items: center;
    justify-content: left;
}

#interactiveHelpLauncherButton .fa-lightbulb {
    padding-right: 3%;
    font-size: 3vh;
}

#interacHelpBtnTextCont span {
    font-size: 1.6vh;
}

#version6Star {
    position: absolute;
    top: -15px;
    right: -15px;
    height: 80%;
}

#atlasFunctions_info {
    position: relative;
}

#version6Star_info {
    height: 50%;
    padding: 0px;
    top: 0px;
    position: absolute;
    margin-left: 10px;
}

.steps {
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    display: table;
    height: 25px;
    margin: 0 auto;
    margin-bottom: 10px;
  }
  
  .steps .circle {
    width:10px;
    height:10px;
    border-radius:250px;
    border: 0.5px solid #cecece;
    background:#fff;
    position: absolute;
    top: -30%;
    cursor: pointer;
  }
  
  .steps .list-inline li {
    width: auto;
    position: relative;
    padding: 5px 0 0 0;
    margin: 0 12px;
    display: inline-block;
  }
  
  .steps .list-inline {
      margin: 0;
      padding: 0;
  }

  .steps .list-inline li.active .circle {
      background-color: #004593 !important;
      border: 0.5px solid #004593;
  }

  @media (max-width : 1290px) and (min-width:1100px) and (max-height:1100px) and (min-height:800px) and (orientation:landscape) {
    /*#interactiveHelpLauncherButton {
        top: 12%;
    }*/
  }


/*-----FOR TABLET VERTICAL-----*/
  @media (min-width:550px) and (max-width:1030px) and (orientation:portrait){
    #interactiveHelpLauncherButton {
        max-width: 35%;
    }
    #interacHelpBtnTextCont i {
        font-size: 1.8vh;
    }

    #interacHelpBtnTextCont span {
        font-size: 1vh;
    }

    #HelpPanel {
        width: 30%;
    }

    #HelpDivDesc {
        top: 30%;
    }

    .steps {
        left: 35%;
    } 
  }

/*-----FOR TABLET HORIZONTAL-----*/
@media (max-width : 1024px) and (max-height:800px) and (min-height:650px) and (orientation:landscape) {
    #interactiveHelpLauncherButton {
        max-width: 35%;
    }
    #interacHelpBtnTextCont i {
        font-size: 1.8vh;
    }

    #interacHelpBtnTextCont span {
        font-size: 1vh;
    }

    .steps {
        left: 35%;
    } 
}