/* Style documentation : to prevent drag feature of child elements present in the parent div
                       use pointer-events : none property CADBFF light blue FFFAEB https://www.cssmatic.com/box-shadow
Main color : #EAE5EC, ABC3EB, D5DFF1

Color for Panels : #F7F7F7 
                       */ 



 #container {
      top:0;
      bottom:0;
      right:0;
      left:0;
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #FFFFFF;
      /*display: flex;*/
      /*align-items: center;
      justify-content: center;*/
      /*background-size:  cover;  */
      overflow-x: hidden; 
      overflow-y: auto;
      /*border-radius: 7px;*/
      /*overflow: hidden;*/
      touch-action: none;
    }

  #miscpanel{
    /*left:0  ;*/
    left: -300px;
    /*float:left;*/
    position: absolute;
    height: 1800px;
    width: 15%;
    /*background-color: #2D2530;*/
    background: linear-gradient(to bottom, rgb(21, 34, 56) 0%, rgb(35, 57, 93) 100%) 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);
    border-radius: 5px;
    /*overflow-y: auto;*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    -ms-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
    z-index: 2;
    -webkit-box-shadow: 3px 0px 15px 0px rgba(153,153,153,1);
    -moz-box-shadow: 3px 0px 15px 0px rgba(153,153,153,1);
    box-shadow: 3px 0px 15px 0px rgba(153,153,153,1);
  }

  #widgets{
    background-color: #FE5C60;
    border-radius: 23px;
    right: -200px;
    margin-top: 20px;
    position:absolute;
    top:75px;
    /*right:0;*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -webkit-box-shadow: 12px -1px 23px -2px rgba(0,0,0,1);
    -moz-box-shadow: 12px -1px 23px -2px rgba(0,0,0,1);
    box-shadow: 12px -1px 23px -2px rgba(0,0,0,1);
    -webkit-transition: right 0.5s ease-in-out;
    -moz-transition: right 0.5s ease-in-out;
    -o-transition: right 0.5s ease-in-out;
    -ms-transition: right 0.5s ease-in-out;
    transition: right 0.5s ease-in-out;
    z-index: 2;
  }

  .panelheader{
    text-align: center;
    color: #FFFFFF;
    /*color: gold;*/
    font-size: 30px;
    /*text-shadow: 2px 2px 5px orange; */
    text-shadow: 1px 1px 1px lightgrey;
    font-family: Montserrat;
  }

  .lockunlockbtn {
    height: 40px;
    width: 30px;
    padding-left: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: none;
    outline:none;
  }

  .myitem {
      /*border-radius: 50%;*/
      /*margin-left: 200px;*/
      touch-action: none;
      user-select: none;
      /*position: relative;*/
  }

  #heading {
    width: 200px;
    height: 150px;
    margin-top: 10px;
    margin-left:45%;
    background-color: #FFFFFF;
    display:inline-block;
  }

  .headertext {
    text-align: center;
    color: black;
    font-size: 30px;
    /*font-weight: normal;*/
    /*text-shadow: 2px 2px 5px grey; */
    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    font-family: Verdana, Helvetica, sans-serif, Montserrat;
  }


  .listtext{

    color: #FFFFFF;
    font-size: 20px;
    position: relative;
    /*text-shadow: 2px 2px 5px orange; */
    list-style-type: none;
    margin-top: 20px;
    font-family:  Verdana, Helvetica, sans-serif, Montserrat;
  }

  ul > li{
    color: #FFFFFF;
    font-size: 14px;
    list-style-type: none;
    margin-top: 20px;
    font-family:  Verdana, Helvetica, sans-serif, Montserrat;
    position: relative;
  }

  a {
    color: #FFFFFF;
    text-decoration: none;
  }
  
  /*.childlisttext{

    color: #FFFFFF;
    font-size: 18px;
    list-style-type: none;
    margin-top: 20px;
    font-family:  Verdana, Helvetica, sans-serif, Montserrat;
  }*/


  .one  {
      margin-left: 30px;
      width: 500px;
      height: 500px;
      background-color: rgba(255,255,255,0.5);
      display:inline-block;
      border: 1px solid #DFE1E5;
      border-radius: 10px; 
      -webkit-box-shadow: 1px 1px 5px 1px rgba(153,153,153,1);
      -moz-box-shadow: 1px 1px 5px 1px rgba(153,153,153,1);
      box-shadow: 1px 1px 5px 1px rgba(153,153,153,1);
  }

  .two {
      margin-left: 30px;
      width: 500px;
      height: 500px;
      background-color: rgba(255,255,255,0.5);
      display:inline-block;
      border: 1px solid #DFE1E5;
      border-radius: 10px;
      -webkit-box-shadow: 1px 1px 5px 1px rgba(153,153,153,1);
      -moz-box-shadow: 1px 1px 5px 1px rgba(153,153,153,1);
      box-shadow: 1px 1px 5px 1px rgba(153,153,153,1);
  }


  .my_class {
      border: 0.5px solid #000 !important;
      background-color: #FFF5D1 !important;
  }

  .svg-container {
      position: unset;
      height: 500px !important;
      width: 500px !important;
      background-color: rgba(255,255,255,0.5);
      border: 1px solid #FFFFFF;
      border-radius: 10px;
  }

  .main-svg {
      position: absolute;
      height: 500px !important;
      width: 500px !important;
      /*background-color: #EAE5EC;*/
      border: 1px solid #FFFFFF;
      border-radius: 10px;
  }

  .gl-container {
      height: 500px !important;
      width: 500px !important;
      background-color: rgba(255,255,255,0.5);
      /*border: 1px solid #DFE1E5;*/
      border-radius: 10px;
  }

  #scene {
      height: 500px !important;
      width: 500px !important;
      position: relative;
      left: 0px !important;
      top: 0px !important;
      background-color: rgba(255,255,255,0.5);
      border: 1px solid #DFE1E5;
      border-radius: 10px;
  }

  .item:hover {
      cursor: pointer;
  }

  /*li:hover > a {
    color: #FFFFFF !important;
    background: linear-gradient(to top, #D4AF37 0%, #DAA520 100%);
    padding: 8px;
    /*padding-left: 10px;
    padding-right: 10px;*/
  /*}*/

  #container:hover #miscpanel{
    left: 0;
  }

  #container:hover #widgets{
    right: 0;
  }

.wrapcol {
    overflow-wrap: break-word;
    border: 0px solid #FFFFFF;
}

@media only screen and (min-width: 800px) {

    .groupBoxGrids {
        position: absolute !important;
        background-color: #f9f9f9;
        /*left: 50%;
                top: 20%;*/
        height: 305px !important;
        width: 404px !important;
        border: 1px solid #dddddd;
        /*display: none;*/
    }
}

.groupBoxGrids {
    position: absolute !important;
    background-color: #f9f9f9;
    height: 305px !important;
    width: 230px !important;
    border: 1px solid #dddddd;
}

.Visible {
    display: block;
}

.invisible {
    display: none;
}

.MainFieldSet {
    width: 90% !important;
    border: none !important;
}

.InnerTable {
    margin-left: -4px;
}

.btnClose {
    width: 30px;
}

.btnGroupbox {
            width: 45px;
        }

.lblerror, .lblError, .LBLERROR {
    color: #0368B6 !important;
    padding: 5px 0px 5px 0px;
    z-index: 99999;
    /*position: absolute;
      top: 110px;
    left: 32px;*/
}