:root {
  /* Dark Mode Colors */
  --white: hsl(60, 100%, 100%);
  --davys-gray: hsl(270, 1%, 32%);
  --davys-light: hsl(276, 2%, 55%);
  --davys-lighter: hsl(270, 5%, 78%);
  --davys-lightest: hsl(276, 14%, 99%);

  --black: hsl(220, 100%, 1%);
  --jet: hsl(257, 7%, 21%);
  --jet-darker: rgb(33, 30, 36);

  --zomp: hsl(199, 32%, 51%);
  --zomp-lighter: hsl(190, 53%, 64%);
  --red: hsl(0, 32%, 51%);
  --red-lighter: hsl(6, 44%, 60%);

  --light-background-menu-bar: hsl(180, 5%, 98%);
  
  --light-text-menu-bar: #2A2D43;
  --light-canvas-background: hsl(180, 5%, 98%);
  --light-background-image: radial-gradient(at 35% 56%, hsla(178,0%,100%,0.6) 0px, transparent 60%),
                            radial-gradient(at 74% 38%, hsla(73,0%,100%,0.6) 0px, transparent 60%),
                            
                            radial-gradient(at 1% 0%, #FFCC4D 0px, transparent 70%),
                            radial-gradient(at 100% 0%, #AA8DD8 0px, transparent 80%),
                            radial-gradient(at 50% 0%, #ff91a6 0px, transparent 80%);
                            
                            /* radial-gradient(at 0% 100%, hsla(98,37%,51%,1) 0px, transparent 50%),
                            radial-gradient(at 99% 99%, hsla(41,100%,65%,1) 0px, transparent 50%); */
  --light-canvas: hsl(180, 3%, 99%);
  --light-canvas-border: hsl(180, 5%, 70%);
  --light-text: #2A2D43;
  --light-panel-background: hsla(180, 5%, 98%,0.75);
  --light-panel-border: hsla(0, 0%, 0%,0.2);
  --light-inner-panel-background: hsla(180, 3%, 99%,0.9);
  --light-edit-button-bg: hsl(182, 26%, 50%);
  --light-edit-button-bg-lighter: hsl(182, 26%, 70%);
  --light-accessory-button-hover: #00000008;
  --light-menu-button-hover: hsl(180, 5%, 94%);
  --light-file-selected: hsl(216, 100%, 90%);


  --dark-background-menu-bar: hsl(180, 5%, 50%);
  --dark-text-menu-bar: hsl(233, 23%, 40%);
  --dark-canvas-background: hsl(180, 5%, 20%);
  --dark-background-image: radial-gradient(at 35% 56%, hsla(180, 5%, 15%,1) 0px, transparent 100%),
                            radial-gradient(at 74% 38%, hsla(180, 5%, 15%,1) 0px, transparent 100%),
                            radial-gradient(at 1% 0%, #FFCC4D90 0px, transparent 70%),  
                            radial-gradient(at 100% 0%, #AA8DD8 0px, transparent 70%),
                            radial-gradient(at 50% 0%, #ff91a6 0px, transparent 70%);
                            /* radial-gradient(at -50% 150%, rgb(78, 173, 22) 0px, transparent 50%),
                            radial-gradient(at 150% 170%, rgb(255, 250, 0) 0px, transparent 50%); */
  --dark-canvas: hsl(180, 5%, 20%);
  --dark-canvas-border: hsl(180, 5%, 30%);
  --dark-text: hsl(233, 10%, 70%);
  --dark-panel-background: hsla(180, 5%, 20%,0.75);
  --dark-panel-border: hsla(0, 0%, 0%,0.2);
  --dark-inner-panel-background: hsla(180, 5%, 17%,0.75);
  --dark-edit-button-bg: hsl(182, 26%, 50%);
  --dark-edit-button-bg-darker: hsl(182, 26%, 70%);
  --dark-accessory-button-hover: #ffffff08;
  --dark-menu-button-hover: hsl(180, 5%, 25%);
  --dark-file-selected: hsl(216, 15%, 30%);



  --current-background-menu-bar: var(--light-background-menu-bar);
  --current-text-menu-bar: var(--light-text-menu-bar);
  --current-canvas-background: var(--light-canvas-background);
  --current-background-image: var(--light-background-image);
  --current-canvas: var(--light-canvas);
  --current-canvas-border: var(--light-canvas-border);
  --current-text: var(--light-text);
  --current-panel-background: var(--light-panel-background);
  --current-panel-border: var(--light-panel-border);
  --current-inner-panel-background: var(--light-inner-panel-background);
  --current-edit-button-bg: var(--light-edit-button-bg);
  --current-edit-button-bg-lighter: var(--light-edit-button-bg-lighter);
  --current-accessory-button-hover: var(--light-accessory-button-hover);
  --current-menu-button-hover: var(--light-menu-button-hover);
  --current-file-selected: var(--light-file-selected);


}

::-webkit-scrollbar-track {
  background: var(--current-panel-background); /* Makes the track transparent */
}
* {
  scrollbar-color: #999 var(--current-panel-background); /* Thumb and track both transparent */
}

html, body {
  background-color:var(--current-canvas-background);
  background-image: var(--current-background-image);
  color: var(--current-text);
  margin: 0px;
  height: 100%;
  width:100%;
}

@media (orientation: landscape) {
  .container{
    display: grid;
    /* background-color: var(--current-canvas-background); */
    grid-template-areas:
      "menu-bar-grid menu-bar-grid menu-bar-grid"
      "accessories-grid accessory-stack-grid emoji-grid"
      "attribution-grid attribution-grid attribution-grid";
    grid-template-columns: 1fr 282px 1.5fr;
    grid-template-rows: auto 1fr auto;
  }
  h1 {
    color: var(--current-text-menu-bar);
    text-align: left;
    font-family: 'verdana';
    font-size: 14px;
    font-weight: 500;
  }
  
  p {
    font-family: verdana;
    font-size: 12px;
    color: var(--current-text);
    margin-top:3px;
    margin-bottom:3px;

  }

  a {
    font-family: verdana;
    font-size: 12px;
  }

  div.emojidiv{   
    border: 1px solid var(--current-canvas-border);
    background-color: var(--current-canvas);
    width: 30vw;
    height: 30vw;
  }

  

  button.accessorybtn{
    background-color: var(--current-inner-panel-background);
      width:60px;
      height:60px;
      border-radius:10px;
      border: var(--current-inner-panel-background) solid 3px;
  }

  td.textprop{
    border: 1px solid var(--current-canvas-border);
    text-align: left;
    padding: 5px;
    width: 48px;
    margin-top:2px;
    margin-bottom:2px;
  }
  
  td.colorprop{
    border: 1px solid var(--current-canvas-border);
    text-align: left;
    padding: 5px;
    width: 135px;
    height:60px;
  }

  div.accessorystack{
    width: calc(100%);
    height: calc(100vh - 425px);
    overflow-y: scroll;
    border: var(--current-panel-border) solid 1px;
    background-color: var(--current-inner-panel-background);
  }

  div.accessories{
    margin: auto;
    width: calc(100% - 15px);
    height: calc(100vh - 67px - 39px - 20px - 36px - 20px - 6px);
    overflow-y: auto;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid var(--current-panel-border);
    background-color: var(--current-inner-panel-background);
  }

  input.colorpicker{
    padding:0;
    border-radius: 0;
    width: 27px;
    height:30px;
    padding:0px;
    margin:0px;
    background-color: transparent;
    border:transparent;
   }
   input.colorpicker:hover{
     cursor: pointer;
    }

    button.deleteaccessbtn{
      background-color: rgb(155, 92, 92);
      width:25px;
      height:25px;
      padding:0%;
      border: none;
      border-radius:2px;
      margin-left: 2px;
      margin-right:2px;
      margin-bottom: 4px;
    }
    button.deleteaccessbtn:hover{
      cursor: pointer;
      background-color: var(--red-lighter);
    }

    button.toggle-theme{
      border-radius: 50px;
      height: 30px;
      width: 60px;
      border: 1px solid var(--current-canvas-border);
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    svg.toggle-theme{
      overflow: visible; position: absolute;
      transition: transform 0.25s;
    }
    
    svg.toggle-theme:hover{
      cursor: pointer;
    }

    div.accessorystackcontainer{
      background-color: var(--current-panel-background);
      width: 100%;
      padding:0;
      border: var(--current-panel-border) solid 1px;
      margin-bottom: 10px;
      border-radius: 5px;
      box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .13), 0 1px 2px 0 rgba(0, 0, 0, .11);
    }

    .menu-item {
  color: var(--current-text-menu-bar);
  position: relative;
  padding: 5px 10px;
  cursor: pointer;
  width:100px;
}
}


.menu-bar-grid {
  grid-area: menu-bar-grid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  /* border-bottom: 1px solid var(--current-panel-border); */
}

.attribution-grid {
  grid-area: attribution-grid;
}

.emoji-grid {
  grid-area: emoji-grid;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.accessories-grid {
  grid-area: accessories-grid;
  padding:10px;
}

.accessory-stack-grid {
  grid-area: accessory-stack-grid;
  gap: 5px; 
  padding: 10px;
}


div.main{
  background-color: var(--current-canvas-background);
  display: flex;
  flex-grow: 1;
}


div.panel-header{
  padding-left:10px;
  padding-right:10px;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

}

hr{
  background-color:var(--current-canvas-border);
  color: var(--current-canvas-border);
  height: 1px;
  border-width:0;
  width:30%;
}

div.frames-container{
  border: var(--current-panel-border) solid 1px;
  background-color: var(--current-panel-background);
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .13), 0 1px 2px 0 rgba(0, 0, 0, .11);
}

div.frames{
  border: var(--current-panel-border) solid 1px;
  overflow-x: scroll;
}
div.frame-container{
  width:122px;
  height:100%;
}
div.frame{
  width: 100px;
  height:100px;
  margin-left:10px;
  margin-right:10px;
  margin-bottom:10px;

  border: var(--current-panel-border) solid 1px;
  background-color: #fff;

}

div.frame:hover{
  cursor: pointer;
}
div.frame-header{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

div.accessoriescontainer{
  border: var(--current-panel-border) solid 1px;
  background-color: var(--current-panel-background);
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .13), 0 1px 2px 0 rgba(0, 0, 0, .11);
}





div.accessorylayerbox{
  width: calc(100%-10px);
  border-bottom: var(--current-panel-border);
  padding: 10px 0px 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap:10px;
  cursor: pointer;
}
.movehamburger:hover{
  cursor:grab;
}
.movehamburgergrabbing{
  cursor:grabbing;
}
div.accessorylayerboxdragging{
  width: calc(100%-10px);
  border-bottom: var(--current-panel-border);
  align-items: center;
  justify-content: space-evenly;

  padding: 10px 0px 5px 10px;
  display: flex;
  gap:10px;
  cursor:grabbing;
  background-color: #00000008;
}
div.accessorylayerboxactive{
  width: calc(100%-10px);
  border-bottom: var(--current-panel-border);
  align-items: center;
  justify-content: space-evenly;
  padding: 10px 0px 5px 10px;
  display: flex;
  gap:10px;
  background-color: var(--current-accessory-button-hover);
}

div.stackeditors{
    width: 140px;
    height:440px;
    margin:0px;
    border: 1px solid var(--current-panel-border);
    background-color: var(--current-panel-background);
    border-radius: 5px;
}
div.coloreditors{
  background-color: var(--current-panel-background);
  width: 100%;
  padding:0;
  border: var(--current-panel-border) solid 1px;
  border-radius: 5px;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .13), 0 1px 2px 0 rgba(0, 0, 0, .11);

}


button.accessorybtn:hover{
    background-color: var(--current-accessory-button-hover);
    cursor: pointer;
}
button.activeaccessorybtn{
  background-color: var(--current-accessory-button-hover);
    width:60px;
    height:60px;
    border-radius:13px;
    border: var(--current-panel-border) solid 1px;
}
button.downloadbtn{
    background-color: var(--current-inner-panel-background);
    width:50px;
    height:50px;
    border-radius:15px;
    border: #a5c9e3 solid 3px;
}
button.downloadbtn:hover{
    background-color: rgb(219, 237, 245);
    cursor: pointer;
}
button.editaccessbtn{
    background-color: var(--current-edit-button-bg);
    width:25px;
    height:25px;
    padding:0%;
    border: none;
    border-radius:2px;
    margin-left: 2px;
    margin-right:2px;
    margin-bottom: 4px;
}

button.editaccessbtn:hover{
    background-color: var(--current-edit-button-bg-lighter);
    cursor: pointer;
}
button.activeeditaccessbtn{
    background-color: #a5c9e3;
    width:40px;
    height:40px;
    border-radius:13px;
    border: rgb(28, 167, 185) solid 3px;
}
button.activeeditaccessbtn:hover{
    background-color: rgb(219, 237, 245);
    cursor: pointer;
}

.menu-bar {
  border: var(--current-panel-border) solid 1px;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .13), 0 1px 2px 0 rgba(0, 0, 0, .11);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--current-panel-background);
  color: var(--current-text-menu-bar);
  position: relative;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

.menu-item-container{
  display: flex;
}



.menu-item:hover {
  background-color: var(--current-inner-panel-background);
}

.menu-item:hover .dropdown {
  display: block;
  background: var(--current-background-menu-bar);
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--current-panel-background);
  color: var(--current-text-menu-bar);
  z-index: 1000;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .13), 0 1px 2px 0 rgba(0, 0, 0, .11);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden; /* Ensures children respect the border-radius */
}

.dropdown button {
  background-color: var(--current-panel-background);
  border: none;
  padding: 10px 10px;
  font-size: 11px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--current-text-menu-bar);
  border-radius: 0; /* Prevents buttons from overriding container's border-radius */
}

.dropdown button:hover {
  background-color: var(--current-menu-button-hover);
}


.remote-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.horizontal-buttons {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.rotate-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70px;
  margin: 0 auto;
}

.scale-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70px;
  margin: 0 auto;
}

div.attribution{

text-align: center;
}

.tooltip-container {
position: relative;
display: inline-block;
}

.help-button {
background: #007bff;
color: white;
border: none;
border-radius: 50%;
width: 22px;
height: 22px;
font-weight: bold;
cursor: pointer;
}

.tooltip {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
background: white;
color: rgb(53, 53, 53);
padding: 10px;
font-size: 12px;
display: none;
width: 175px;
text-align: left;
z-index: 100;
border: 1px solid black;
}

.tooltip ul {
margin: 0;
padding-left: 15px;
}

.tooltip kbd {
background: #222;
color: white;
padding: 2px 4px;
border-radius: 3px;
font-size: 10px;
}

/* Basic Modal Styles */
.modal {
display: none; /* Hide by default */
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
justify-content: center;
align-items: center;
}

.modal-content {
background-color: var(--current-panel-background);
padding: 20px;
border-radius: 8px;
text-align: left;
width:50vw;
font-family: verdana;
justify-content: space-evenly;
}


.close {
float: right;
cursor: pointer;
font-size: 20px;
}

.project-table {
  display: flex;
  gap: 10px;
  overflow-x: scroll;
  height: calc(100%-100px);
  margin-bottom:20px

}


.selected {
background-color: var(--current-file-selected) !important;
border-color: hsl(223, 74%, 68%) !important;

}

.svggroup:hover {
cursor: move;
}
.rotateCircle:hover {
cursor:grab;
}
.scaleCircle:hover {
cursor:nw-resize;
}
.prevent-text-select {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}

.properties-table-container{
border: 1px solid var(--current-panel-border);
font-family: 'verdana';

  padding: 10px;
  background-color: var(--current-inner-panel-background);
}


td:nth-child(odd) {
  padding-right: 7px;
  vertical-align:top;
  padding-top:5px;
  text-align: right;
  margin:10px;
}
div.rightclickmenuitem{
  padding: 15px;
  font-size: 12px;
  font-family: verdana;
  cursor: pointer;
}
div.rightclickmenuitem:hover{
  background-color: #00000008;
}
div.projectdiv{
  width:100px;
  height: 150px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius:5px;
  align-items: center;
  justify-content: center;
}


.custom-menu {
  position: absolute;
  border: 1px solid var(--current-panel-border);
  background-color: var(--current-canvas-background);
  color: var(--current-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: none; /* Initially hidden */
}