html, body{
    margin: 0px;
    padding:0px; 
    color: var(--tx-color-1);
    background-color: var(--bg-color-1);
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    display: flex;
    flex-direction: column;
  }
  button{
    border: inherit;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
  }
  p,h1,h2,h3,h4{margin: 0;padding: 0;}
  input,select,textarea{
    border: 1px solid #313335;
    padding: .5rem;
    border-radius: 5px;
  }
  
  .pointer, .pointer *{cursor: pointer;}
  *,*:after,*:before {box-sizing: border-box;}
  .p-0{padding:var(--bx-space-0)}.p-1{padding:var(--bx-space-1)}.p-2{padding:var(--bx-space-2)}.p-3{padding:var(--bx-space-3)}
  .g-0{gap:var(--bx-space-0)}.g-1{gap:var(--bx-space-1)}.g-2{gap:var(--bx-space-2)}.g-3{gap:var(--bx-space-3)}
  .s-0{padding:var(--bx-space-0);gap:var(--bx-space-0)}.s-1{padding:var(--bx-space-1);gap:var(--bx-space-1)}.s-2{padding:var(--bx-space-2);gap:var(--bx-space-2)}.s-3{padding:var(--bx-space-3);gap:var(--bx-space-3)}

  .h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}
  .h-250{height:250px}.h-500{height:500px}.h-750{height:750px}.h-1000{height:1000px}.h-1250{height:1250px}.h-1500{height:1500px}
  .max-h-25{max-height:25%}.max-h-50{max-height:50%}.max-h-75{max-height:75%}.max-h-100{max-height:100%}
  .max-h-250{max-height:250px}.max-h-500{max-height:500px}.max-h-750{max-height:750px}.max-h-1000{max-height:1000px}.max-h-1250{max-height:1250px}.max-h-1500{max-height:1500px}
  .min-h-25{min-height:25%}.min-h-50{min-height:50%}.min-h-75{min-height:75%}.min-h-100{min-height:100%}
  .min-h-250{min-height:250px}.min-h-500{min-height:500px}.min-h-750{min-height:750px}.min-h-1000{min-height:1000px}.min-h-1250{min-height:1250px}.min-h-1500{min-height:1500px}
  
  .w-25{width:25%}.w-50{width:50%}.w-75{width:75%}.w-100{width:100%}
  .w-250{width:250px}.w-500{width:500px}.w-750{width:750px}.w-1000{width:1000px}.w-1250{width:1250px}.w-1500{width:1500px}
  .max-w-25{max-width:25%}.max-w-50{max-width:50%}.max-w-75{max-width:75%}.max-w-100{max-width:100%}
  .max-w-250{max-width:250px}.max-w-500{max-width:500px}.max-w-750{max-width:750px}.max-w-1000{max-width:1000px}.max-w-1250{max-width:1250px}.max-w-1500{max-width:1500px}
  .min-w25{min-width:25%}.min-w50{min-width:50%}.min-w75{min-width:75%}.min-w100{min-width:100%}
  .min-w250{min-width:250px}.min-w500{min-width:500px}.min-w750{min-width:750px}.min-w1000{min-width:1000px}.min-w1250{min-width:1250px}.min-w1500{min-width:1500px}

  .static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}

  .top-0{top:0}.top-25{top:25%}.top-50{top:50%}.top-75{top:75%}.top-100{top:100%}
  .top-250{top:250px}.top-500{top:500px}.top-750{top:750px}.top-1000{top:1000px}
  .left-0{left:0}.left-25{left:25%}.left-50{left:50%}.left-75{left:75%}.left-100{left:100%}
  .left-250{left:250px}.left-500{left:500px}.left-750{left:750px}.left-1000{left:1000px}
  .right-0{right:0}.right-25{right:25%}.right-50{right:50%}.right-75{right:75%}.right-100{right:100%}
  .right-250{right:250px}.right-500{right:500px}.right-750{right:750px}.right-1000{right:1000px}
  .bottom-0{bottom:0}.bottom-25{bottom:25%}.bottom-50{bottom:50%}.bottom-75{bottom:75%}.bottom-100{bottom:100%}
  .bottom-250{bottom:250px}.bottom-500{bottom:500px}.bottom-750{bottom:750px}.bottom-1000{bottom:1000px}

  .translate-x--25{transform:translateX(-25%)}.translate-x--50{transform:translateX(-50%)}.translate-x--75{transform:translateX(-75%)}.translate-x--100{transform:translateX(-100%)}.translate-x-0{transform:translateX(0)}
  .translate-x-25{transform:translateX(25%)}.translate-x-50{transform:translateX(50%)}.translate-x-75{transform:translateX(75%)}.translate-x-100{transform:translateX(100%)}
  .translate-y--25{transform:translateY(-25%)}.translate-y--50{transform:translateY(-50%)}.translate-y--75{transform:translateY(-75%)}.translate-y--100{transform:translateY(-100%)}.translate-y-0{transform:translateY(0)}
  .translate-y-25{transform:translateY(25%)}.translate-y-50{transform:translateY(50%)}.translate-y-75{transform:translateY(75%)}.translate-y-100{transform:translateY(100%)}
  .transition-0{transition: transform 0}.transition-1{transition: transform 0.25s}.transition-2{transition: transform 0.50s}.transition-3{transition: transform 0.50s}
  
  .bg-color-0,.bg-color-0\:hover:hover,.bg-color-0\:focus:focus,.bg-color-0\:active:active{background-color:var(--bg-color-0)}
  .bg-color-1,.bg-color-1\:hover:hover,.bg-color-1\:focus:focus,.bg-color-1\:active:active{background-color:var(--bg-color-1)}
  .bg-color-2,.bg-color-2\:hover:hover,.bg-color-2\:focus:focus,.bg-color-2\:active:active{background-color:var(--bg-color-2)}
  .bg-color-3,.bg-color-3\:hover:hover,.bg-color-3\:focus:focus,.bg-color-3\:active:active{background-color:var(--bg-color-3)}
  .bg-more-1,.bg-more-1\:hover:hover,.bg-more-1\:focus:focus,.bg-more-1\:active:active{background-color: var(--bg-more-1)}
  .bg-more-2,.bg-more-2\:hover:hover,.bg-more-2\:focus:focus,.bg-more-2\:active:active{background-color: var(--bg-more-2)}
  .bg-more-3,.bg-more-3\:hover:hover,.bg-more-3\:focus:focus,.bg-more-3\:active:active{background-color: var(--bg-more-3)}
  .bg-less-1,.bg-less-1\:hover:hover,.bg-less-1\:focus:focus,.bg-less-1\:active:active{background-color: var(--bg-less-1)}
  .bg-less-2,.bg-less-2\:hover:hover,.bg-less-2\:focus:focus,.bg-less-2\:active:active{background-color: var(--bg-less-2)}
  .bg-less-3,.bg-less-3\:hover:hover,.bg-less-3\:focus:focus,.bg-less-3\:active:active{background-color: var(--bg-less-3)}

  .border-1{border:var(--border-color-1)}.border-x-1{border-left:var(--border-color-1);border-right:var(--border-color-1)}.border-y-1{border-top:var(--border-color-1);border-bottom:var(--border-color-1)}
  .border-top-1{border-top:var(--border-color-1)}.border-right-1{border-right:var(--border-color-1)}.border-bottom-1{border-bottom:var(--border-color-1)}.border-left-1{border-left:var(--border-color-1)}
  .border-2{border:var(--border-color-2)}.border-x-2{border-left:var(--border-color-2);border-right:var(--border-color-2)}.border-y-2{border-top:var(--border-color-2);border-bottom:var(--border-color-2)}
  .border-top-2{border-top:var(--border-color-2)}.border-right-2{border-right:var(--border-color-2)}.border-bottom-2{border-bottom:var(--border-color-2)}.border-left-2{border-left:var(--border-color-2)} 
  .border-3{border:var(--border-color-3)}.border-x-3{border-left:var(--border-color-3);border-right:var(--border-color-3)}.border-y-3{border-top:var(--border-color-3);border-bottom:var(--border-color-3)}
  .border-top-3{border-top:var(--border-color-3)}.border-right-3{border-right:var(--border-color-3)}.border-bottom-3{border-bottom:var(--border-color-3)}.border-left-3{border-left:var(--border-color-3)} 
  .border-radius-0{border-radius:var(--border-radius-0)}.border-radius-1{border-radius:var(--border-radius-1)}.border-radius-2{border-radius:var(--border-radius-2)}
  .border-radius-3{border-radius:var(--border-radius-3)}.border-radius-4{border-radius:var(--border-radius-4)}

  .flex-column{display:flex;flex-direction:column}.flex-row{display:flex;flex-direction:row}.flex-grow-evenly>*{flex-grow:1}
  
  .grid-1{display:grid;grid-template-columns:1fr}.grid-2{display:grid;grid-template-columns:repeat(2,1fr)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr)}.grid-5{display:grid;grid-template-columns:repeat(5,1fr)}.grid-6{display:grid;grid-template-columns:repeat(6,1fr)}
  .grid-7{display:grid;grid-template-columns:repeat(7,1fr)}.grid-8{display:grid;grid-template-columns:repeat(8,1fr)}.grid-9{display:grid;grid-template-columns:repeat(9,1fr)}
  .grid-10{display:grid;grid-template-columns:repeat(10,1fr)}.grid-11{display:grid;grid-template-columns:repeat(11,1fr)}.grid-12{display:grid;grid-template-columns:repeat(12,1fr)}
  
  .column-span-1{grid-column:span 1}.column-span-2{grid-column:span 2}.column-span-3{grid-column:span 3}.column-span-4{grid-column:span 4}.column-span-5{grid-column:span 5}.column-span-6{grid-column:span 6}
  .column-span-7{grid-column:span 7}.column-span-8{grid-column:span 8}.column-span-9{grid-column:span 9}.column-span-10{grid-column:span 10}.column-span-11{grid-column:span 11}.column-span-12{grid-column:span 12}

  .column-start-1{grid-column-start:1}.column-start-2{grid-column-start:2}.column-start-3{grid-column-start:3}.column-start-4{grid-column-start:4}.column-start-5{grid-column-start:5}.column-start-6{grid-column-start:6}
  .column-start-7{grid-column-start:7}.column-start-8{grid-column-start:8}.column-start-9{grid-column-start:9}.column-start-10{grid-column-start:10}.column-start-11{grid-column-start:11}.column-start-12{grid-column-start:12}

  .column-end-1{grid-column-end:1}.column-end-2{grid-column-end:2}.column-end-3{grid-column-end:3}.column-end-4{grid-column-end:4}.column-end-5{grid-column-end:5}.column-end-6{grid-column-end:6}
  .column-end-7{grid-column-end:7}.column-end-8{grid-column-end:8}.column-end-9{grid-column-end:9}.column-end-10{grid-column-end:10}.column-end-11{grid-column-end:11}.column-end-12{grid-column-end:12}

  .row-span-1{grid-row:span 1}.row-span-2{grid-row:span 2}.row-span-3{grid-row:span 3}.row-span-4{grid-row:span 4}.row-span-5{grid-row:span 5}.row-span-6{grid-row:span 6}
  .row-start-1{grid-row-start:span 1}.row-start-2{grid-row-start:span 2}.row-start-3{grid-row-start:span 3}.row-start-4{grid-row-start:span 4}.row-start-5{grid-row-start:span 5}.row-start-6{grid-row-start:span 6}
  .row-end-1{grid-row-end:span 1}.row-end-2{grid-row-end:span 2}.row-end-3{grid-row-end:span 3}.row-end-4{grid-row-end:span 4}.row-end-5{grid-row-end:span 5}.row-end-6{grid-row-end:span 6}




  .align-center{align-self:center}.align-start{align-self:flex-start}.align-end{align-self:flex-end}.align-stretch{align-self:stretch}
  .align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-stretch{align-items:stretch}
  .grow-1{flex-grow:1}.grow-2{flex-grow:2}.grow-3{flex-grow:3}.grow-4{flex-grow:4}.grow-5{flex-grow:5}.grow-6{flex-grow:6}
  .shrink-1{flex-shrink:1}.shrink-2{flex-shrink:2}.shrink-3{flex-shrink:3}.shrink-4{flex-shrink:4}.shrink-5{flex-shrink:5}.shrink-6{flex-shrink:6}

  .tx-align-center{text-align:center}.tx-align-justify{text-align:justify}.tx-align-left{text-align:left}.tx-align-right{text-align:right}
  .tx-color-0{color:var(--tx-color-0)}.tx-color-1{color:var(--tx-color-1)}.tx-color-2{color:var(--tx-color-2)}.tx-color-3{color:var(--tx-color-3)}.tx-color-4{color:var(--tx-color-4)}.tx-color-5{color:var(--tx-color-5)}
  .tx-size-0{font-size:var(--tx-size-0)}.tx-size-1{font-size:var(--tx-size-1)}.tx-size-2{font-size:var(--tx-size-2)}.tx-size-3{font-size:var(--tx-size-3)}
  .tx-size-4{font-size:var(--tx-size-4)}.tx-size-5{font-size:var(--tx-size-5)}.tx-size-6{font-size:var(--tx-size-6)}.tx-size-7{font-size:var(--tx-size-7)}
  .tx-bold-0{font-weight:normal}.tx-bold-1{font-weight:bold}.tx-bold-2{font-weight:bolder}

  .tx-wrap{text-wrap: wrap}
  .tx-no-wrap{text-wrap: nowrap}

  .tx-no-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
  }
  /*align-content
    align-items
    align-self*/

  icon{font-family:Arial, Helvetica, sans-serif}

  panel{position:relative;overflow:hidden;display:flex;flex-direction:column}
  panel[show]{transform:translateX(0);transform:translateY(0)}
  header{display:flex;flex-direction:row}
  content{flex-grow:100;overflow:scroll;display:flex;flex-direction:column}
  footer{display:flex;flex-direction: row}