/* CSS files add styling rules to your content */

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  width: 100vw; 
  height: 100vh; 
  margin : 0px; 
  padding : 0px; 
  border : 0px; 
  background-color : black;
}

h1 {
  font-style: italic;
  color: #373fff;
}

canvas {
  width: 100%;
  height: 100%;
  margin : 0px;
  padding : 0px;
  border : 0px;
  background-color : transparent;
}

abbr {
  padding:5x 10px;
}
abbr:hover:before {
  content: attr(title-card);
  position:absolute;
   background:#000;
   color:#fff;
   padding:5px 15px;
   margin:-35px 0 0 0;
}

.ui_buttons{
  position: absolute;
  z-index: 3;
  bottom: 10px;
  width: 100%;
  display: none; /*hide ui at start*/
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* border:1px solid #333; */
}

.ui_button_small{
  z-index:4;
  width:60px;height:40px;
  margin-left:3px;margin-right:3px;margin-bottom:14px;
  overflow: hidden;
  color:#fff;font-size:16px;font-weight: 800;
  cursor: pointer;
  opacity: 0.4;
  pointer-events: auto;
  background-color: #000;
  text-align: center;
  padding:7px 0px;
}

.ui_button_small:hover {
  background-color: rgba(211, 211, 211, 0.644); /* Darker background when hovering */
  border-color: #3d4400; /* Darker border when hovering */
}

/* Focus effect for accessibility */
.ui_button_small:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); /* Focus ring effect */
}


.ui_bgs{
  position: absolute;z-index:3;
  left:6px;width:140px;height:auto;
  pointer-events: none;
  display: none; /* Hide the buttons initially */
}
  .ui_bg{
    width: auto;height: auto;
    margin-top:5px;margin-bottom:5px;
    /* border:1px solid #333; */
    pointer-events: none;
  }
    .ui_bg_item{
      width:20px;height:20px;
      border:1px solid rgba(109, 109, 109, 0.8);
      border-radius: 50%;overflow: hidden;
      display: block;float: left;
      cursor: pointer;
      pointer-events: all;
    }
    @media (min-width: 1281px) {
      .ui_bg_item:hover{
        border:1px solid rgba(0,0,0,1);
      }
    }
    .ui_bg_label{
      font-size:10px;
      color:rgba(0,0,0,0.9);
      display: block;float: left;
      margin-left:8px;
      font-weight: 700;
      margin-top:3px;
      display: none;
      pointer-events: none;
    }
/* bg icons */
.solid_01{background-color:#b6af93;}
.solid_02{background-color:#15250d;}
.solid_03{background-color:#ffa800;}
.bg_grad_container{
  width:100%;height:100%;
  overflow:hidden;
  position:absolute;z-index:1;
}
.bg_grad{
  width:100%;height:100%;
}
.scene_grad01{background-image: linear-gradient(180deg, #d9dddf 0%, #929292 50%, #000000 100%);}
.scene_grad02{background-image: linear-gradient(180deg, #ff0000,  #3d694b, #4a518f);}
.scene_grad03{background-image: linear-gradient(180deg,  #020202,  #96ffed );}
.scene_grad04{background-image: linear-gradient(180deg,  #ff1e00, #10f7f7);	}
.scene_grad05{background-image: linear-gradient(180deg, #35ff03 0%, #9ebeff 50%, #8b8b8b 100%);}
.scene_grad06{background-image: linear-gradient(180deg,  #af3636, #5c8dce, #f58341);	}
.scene_grad07{background-image: linear-gradient(180deg, #91b8cd 0%, #011b42 50%, #2c2d44 100%);}
.scene_grad08{background-image: linear-gradient(180deg,  rgb(139, 67, 79) 31.2%, rgb(0, 47, 255) 90.9% );} 
.scene_grad09{background-image: linear-gradient(180deg,  rgb(146, 221, 192) 31.2%, rgb(92, 60, 60) 90.9% );} 
.scene_grad10{background-image: linear-gradient(180deg,  rgb(255, 0, 0) 31.2%, rgb(199, 70, 70) 90.9%, rgb(163, 149, 149) 90.9% );} 
/* slider override  ----------------------------------------------------------- */
  .noUi-horizontal {
    height: 8px;
  }
  .noUi-horizontal .noUi-handle {
    width: 20px;
    height: 20px;
    right: -12px;
    top: -6px;
  }
  .noUi-handle {
    /* border: 1px solid #aaa; */
    border-radius:50%;
    background: #ccc !important;
    background-color: #ccc !important;
    cursor: ew-resize;
    outline: none;
    overflow:hidden;
    border:none !important;

  }
  .noUi-handle:before,
  .noUi-handle:after {
    background: #ddd !important;
    background-color: #ddd !important;
    /* content: "";
    display: block;
    position: absolute;
    height: 14px;
    width: 1px;
    background: #E8E7E6;
    left: 14px;
    top: 6px; */
  }
  .noUi-target {
    background: #666;
    border-radius: 5px;
    /* border: 1px solid #aaa; */
  }
  .noUi-connect {
    background: #999;
  }