.colorcontainer {
    width: 1100px;
    height: 400px;
    background-color: rgba(0,0,0,.45);
    margin: 0px auto;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid aliceblue;
}

label {
    align-content: flex-end;
    align-self: center;
    width: 150px;
    flex-direction: row;
    padding-right: 3px;
    flex-flow: row;
    flex-wrap: nowrap;
    justify-content: normal;
    float: left;
    margin: 1px;
    /* color: #cacaca; */
    border: 3px ridge #c5c5c594;
    letter-spacing: 2px;
    background-image: url(../assets/speck.png);
    background-color: rgba(103, 103, 103, 0.56);
    text-shadow: 2px 2px 0px #000000;
    /* background: -webkit-linear-gradient(left,rgba(34, 34, 34, 0.6196078431372549),rgba(0, 0, 0, 0.45098039215686275)); */
    padding: 5px;
}

#jspick {
    position: fixed;
    outine: none;
    top: unset;
    border: none;
    padding: 3px;
    margin: 0px;
    height: 14px;
    width: 65px !important;
    right: 0px;
    z-index: 81;
    text-align: center;
    font-size: 10px;
    border: 2px ridge #000000c2;
    TOP: 16px;
}

/* First we have to make transparent all the default elements of the range input. We use color:transparent to eliminate the default tick marks in IE. */
input[type=range]::-ms-track {
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    margin: 0px;
    padding: 0px;
    border: 0 none;
    background: transparent;
    color: transparent;
    overflow: visible;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 100%;
    -moz-appearance: none;
    margin: 0px;
    padding: 0px;
    border: 0 none;
    background: transparent;
    color: transparent;
    overflow: visible;
}

input[type=range] {
    width: 255px;
    height: 10px;
    top: -1px;
    -webkit-appearance: none;
    margin-left: 3px;
    padding: 0px;
    border: 0 none;
    background: linear-gradient(to right, #00000047 30%,rgba(6, 6, 6, 0) 100%) !important;
    border: 1px solid #ffffff00;
    color: transparent;
    overflow: visible;
    opacity: .9;
    /* position: relative; */
    z-index: 155;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: transparent;
    border: transparent;
}

input[type=range]:focus {
    outline: none;
}

/* Make the thumbs the same size as your custom sliderthumb. They will not be visible but they will be draggable. */
input[type=range]::-ms-thumb {
    width: 40px;
    height: 40px;
    border-radius: 0px;
    border: 0 none;
    background: transparent;
}

input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 30px;
    border-radius: 0px;
    border: 0 none;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    width: 10px;
    height: 30px;
    border-radius: 0px;
    border: 0 none;
    background: #79797900;
    /* box-shadow: 0 0 0px 2px black; */
}

/* Eliminate the default appearance and tooltip behaviour that is peculiar to IE and Edge. */
input[type=range]::-ms-fill-lower {
    background: transparent;
    border: 0 none;
}

input[type=range]::-ms-fill-upper {
    background: transparent;
    border: 0 none;
}

input[type=range]::-ms-tooltip {
    display: none;
}

body {
    /* background-color: #3c3c3c; */
    margin: 0;
    height: 100%;
    margin-top: 0px;
    overflow: hidden;
    background-size: 40%;
    background-position: left -20%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    padding: 0;
    opacity: 1;
    background-image: url(../assets/fluxinpearl.png);
    z-index: 0;
    box-shadow: inset 200px 0px 443px 200px #000000c9;
}

.inputmed {
    width: 100px;
    font-size: 11px;
    padding: 2px;
    color: #fbfbfb;
    background-color: rgba(90, 90, 90, 0.56);
    border: 5px solid white;
    padding: 3px;
    font-weight: bolder;
    height: auto;
    margin: 3px;
    position: relative;
    z-index: 111;
    box-shadow: 5px 5px 0px 1px #00000061, -2px -5px 0px 1px #ffffff2e;
}

.inputsmall {
    margin-right: 3px;
    padding: 2px;
    width: 50px;
    min-height: 14px;
    font-size: 9px;
    font-weight: bolder;
    color: #fbfbfb;
    background-color: #0000008c;
    border: 1px solid #535353;
    padding-right: 2px;
    font-weight: 900;
    border-style: outset;
    height: 10px;
    margin: 1px;
    z-index: 47;
    opacity: 1;
    font-size: 10px;
    position: static;
    /* right: calc(50% + 200px); */
    box-shadow: 0 0 0 2px black;
}

.inputlarge input {
    margin: 0;
    border: 0;
    padding: 4px;
    height: 100%;
}

.inputlarge {
    width: 670px;
    padding: 3px;
    text-align: left;
    font-size: 14px;
    float: left;
    height: 50%;
    padding: 0px;
    color: #fbfbfb;
    background-color: rgba(255, 255, 255, 0.56);
    border: none;
    padding: 0px;
    position: fixed;
    top: 20px;
    font-weight: bold;
    font-size: 8px;
    min-height: 0;
    margin: 2px;
    /* margin-right: 3px; */
    padding: 0px;
    border: 2px inset #474747f5;
    /* outline: 1px solid rgb(0, 0, 0); */
    background-color: transparent;
    background-image: none;
    background-repeat: repeat;
    display: block;
    z-index: 4;
}

.inputlarger {
    width: 90px;
    font-size: 14px;
    float: left;
    padding: 0px;
    color: #fbfbfb;
    background-color: rgba(90, 90, 90, 0.56);
    border: none;
    padding: 0px;
    font-weight: bolder;
    height: 90px;
    margin: 0px;
}

/* The .slider and .slidervertical classes are for the range inputs. Set the z-index high so its on top. */
.slider, .slidervertical {
    position: absolute;
    left: 0;
    top: 5px;
    overflow: visible;
    z-index: 100;
}

/* slidershell exists only to provide a positioning context for the range input and other elements.*/
.slidershell {
    border: 1px solid rgba(0, 0, 0, 0.25);
    width: 100% !important;
    /* border: 0 none; */
    position: relative;
    left: 0;
    top: 0px;
    margin: 0px;
    overflow: visible;
    margin-bottom: 0px;
    height: 12px !important;
    overflow: hidden;
    background: rgb(58, 58, 58);
    box-shadow: 0 0 0px 0px rgba(220, 220, 220, 0.12156862745098039);
}

/* .slidertrack is the visible track on which the user drags the thumb button. */
div.slidertrack {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0px;
    position: absolute;
    height: 10px !important;
    opacity: 1;
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.94) 30%,rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 30%,rgba(0, 0, 0, 0.34) 100%);
    background: linear-gradient(to right, rgba(35, 35, 35, 0.23) 30%,rgba(8, 8, 8, 0.71) 100%) !important;
}

/* .sliderfill adds color (or a gradient as seen here) to the track as the user drags the thumb. */
.sliderfill {
    border: 0px solid #ffffff52;
    border-radius: 0;
    position: absolute;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    background: white;
    /* background: linear-gradient(90deg, #005555, #006699);
  background: linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));  */
    opacity: 1 !important;
    height: 10px !important;
    width: 100%;
}

.rgbr {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0000+0,ff0000+100&0+0,1+100 */
    background: -moz-linear-gradient(left, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,0,0,0) 0%,rgba(255,0,0,1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0.16) 0%,rgba(255,0,0,1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff0000', endColorstr='#ff0000',GradientType=1 );
    /* IE6-9 */
}

.rgbg {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00ff00+0,00ff00+100&0+0,1+100 */
    background: -moz-linear-gradient(left, rgba(0,255,0,0) 0%, rgba(0,255,0,1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,255,0,0) 0%,rgba(0,255,0,1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0, 255, 0, 0.14) 0%,rgba(0,255,0,1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff00', endColorstr='#00ff00',GradientType=1 );
    /* IE6-9 */
}

.rgbb {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0000ff+0,0000ff+100&0+0,1+100 */
    background: -moz-linear-gradient(left, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,255,0) 0%,rgba(0,0,255,1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0, 0, 255, 0.01) 0%,rgb(0, 0, 255) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000ff', endColorstr='#0000ff',GradientType=1 );
    /* IE6-9 */
}

.slideopacity {
    background: transparent;
}

/* .sliderthumb can be any css you like including an image. 
    The dimensions must match those found in the rule for 
    input[type=range]::-webkit-slider-thumb. */
.sliderthumb {
    width: 20px;
    height: 22px;
    background-size: 300px;
    background-position: 210px 9px;
    background-repeat: repeat;
    background-color: #131313;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    border: 0 none;
    padding: 0;
    margin: 0;
    text-align: center;
    pointer-events: stroke;
    border: 2px ridge rgba(162, 162, 162, 0.12);
    border-radius: 2px;
    opacity: 1;
    display: none;
}

/* .slidervalue can be styled as you see fit */
.slidervalue {
    width: 25px;
    height: 10px;
    line-height: 30px;
    color: #fff;
    font-family: sans-serif;
    font-size: 8px;
    position: static;
    left: -30px;
    float: right;
    top: 0;
    border: 0 none;
    padding: 0;
    margin: 0;
    margin-bottom: 0;
    text-align: center;
    pointer-events: none;
    background-color: #0000005c;
    border: 0px solid rgba(255, 255, 255, 0.32);
    z-index: 110000000000;
    display: block;
    /* right: 0px; */
    left: 0px !important;
}

input[type=range].slidervertical {
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
    /* IE */
    opacity: 0.01;
    /* needed to hide the default slider-vertical appearance */
}

.pickerswatchRGBA {
    width: 220px;
    height: 46px;
    float: left;
    margin: 4px;
    background-size: 30px 30px;
    padding: 3px;
    box-sizing: content-box;
    background: white;
    float: left;
}

.rgba-color {
    width: 300px;
    /* position: relative; */
    /* left: 0; */
    z-index: 0;
    margin: 0;
    padding: 1px;
    font-size: 14px;
    /* height: 2px; */
    padding-left: 200px;
    /* color: black !important; */
    background: black;
    font-weight: bolder;
    float: left;
    padding: 7px;
    /* text-shadow: 2px 2px 2px black; */
    /* box-shadow: 3px 4px 5px black; */
}

div#rgba-color4 {}

div#rgba-color4 {
    /* text-shadow: 1px 1px 1px white; */
    padding: 4px;
}

div#rgba-color4 {
}

div#rgba-color4 {color: black;position: relative;z-index: 3;width: 110px;top: 15px;border: 4px outset #c8c8c8;box-shadow: inset 0px -2px 0px 1px #ffffff9e, 0px -1px 0px 1px #0d0d0deb;}

div#rgba-color3 {
    color: white !important;
    /* height: 20px; */
    width: 110px !important;
    padding: 4px;
    position: relative;
    top: 2px;
}

#rgba-color {
    background: -moz-linear-gradient(left, rgb(255, 255, 255) 0%,rgba(0, 0, 0, 0)50%,rgb(0, 0, 0) 100%);
    background: -webkit-linear-gradient(left, rgb(0, 0, 0) 10%,rgb(0, 0, 0) 50%,rgb(189, 189, 189) 100%);
    background: linear-gradient(to right, rgb(255, 255, 255) 0%,rgb(81, 81, 81) 30%,rgb(0, 0, 0) 100%);
    z-index: 10000000000000000;
    font-size: 15px;
    width: 100%;
    padding: 5px;
    height: 38px;
    bottom: 20px;
    z-index: 199;
    position: relative;
    letter-spacing: 13px;
    margin: 3px;
    border: 3px inset #000000d6;
    /* text-shadow: 1px 1px 1px white; */
}

input#rgba-color {
    box-shadow: none;
}

.pickerswatchRGB {
    width: 80px;
    height: auto;
    z-index: -1;
    border: 10px solid white;
    float: left;
    margin: 15px;
    background-size: 30px 30px;
    padding: 3px;
    box-sizing: content-box;
    background: rgba(255, 255, 255, 0);
    float: left;
    left: -19px;
    top: -10px;
    position: relative;
}

.pickerswatchRGBinner {
    width: auto;
    padding: 20px;
    margin: auto;
    border: 3px transparent solid;
    box-shadow: inset 3px 3px 16px -1px black;
}

.pickerswatchRGBAinner {
    width: auto;
    height: 20px;
    top: -5px;
    padding: 3px;
    position: relative;
    margin: 0;
    left: 6px;
    border: none;
    /* transform: scale(.8); */
    z-index: 79999999;
    box-shadow: 4px 4px 0 4px #000000b5, 10px -15px 0 1px #ffffff47;
}

div#rectsolidRGBAinner {}

.translay {
    background: #ffffff;
    background-size: 30px 30px;
    background-repeat: repeat;
    background-position: left;
    float: left;
    right: 0px;
    margin: 0;
    height: auto;
    position: fixed;
    z-index: 12;
    top: 30px;
    height: 20%;
    overflow: visible;
    width: 100px;
    z-index: -1;
    opacity: 1;
    max-height: calc(32% - 0px);
    bottom: unset;
}

div#rectsolidRGBA {
    width: 400px;
    /* bottom: 2px; */
    left: -330px;
    position: fixed;
    transform: scale(.8);
    height: 286px;
    background: #00000000;
    /* bottom: 0px; */
    display: block;
    top: 10px;
    padding: 0px;
    padding-left: 10px;
    z-index: 0;
    border: none;
}

.varmenu {
    font-size: 10px;
    color: white;
    float: left;
    min-width: 10px;
    margin: 0;
    opacity: 1;
    max-height: calc(50% - 110px);
    overflow: hidden;
    border: 0px ridge black;
    position: relative;
    z-index: 999900;
    /* background-color: white; */
    /* display: block !important; */
    overflow: hidden;
}

.transicon {
    float: left;
    width: 26px;
    height: 26px;
    border: none;
    background : url('assets/opac.png');
    background-size: cover;
    border-bottom: 1px solid rgb(0,0,0);
    cursor: pointer;
}

.varswatch {
    width: 8px;
    height: 10px;
    border: none;
    border-right: 1px solid rgb(0,0,0);
    border-bottom: 1px solid rgb(0,0,0);
    cursor: pointer;
    margin: 1px;
}

.varswatcha1 {
    width: 12px;
    height: 12px;
    border-right: 1px solid rgb(0,0,0);
    border-bottom: 1px solid rgb(0,0,0);
    cursor: pointer;
    border: none;
}

.varswatch1 {
    width: auto;
    position: static;
    height: 10px;
    max-width: unset;
    min-height: 8px;
    max-height: unset;
    /* border-right: none; */
    /* border-bottom:1px solid rgb(0,0,0); */
    border: none;
    border: 0PX GROOVE #080808;
    margin: 0;
    flex-shrink: 51;
    min-width: 1px;
    flex-grow: 3;
    min-height: 10%;
    height: 5px;
    width: 1px;
    align-self: stretch;
}

input.varswatch1:first-child, input.varswatch1:last-child {
    width: 7px;
    /* box-shadow: inset 0px 0px 0 1px #ffffff; */
}

.swatchText {
    color: white;
    font-weight: bold;
    font-size: 9px;
    font-family: arial;
    float: right;
    width: 60px;
    display: none;
    height: 10%;
}

.varswatch7 {
    float: right;
    width: 30px;
    max-width: 30px;
    min-width: 3px;
    border: 0px inset #888888de;
    cursor: pointer;
    margin: 0% auto;
    height: 10px;
    margin: 0;
    max-height: 2px;
    min-height: 5px;
    /* border: 1px inset #929292; */
}

.varswatch2 {
    float: left;
    width: 26px;
    height: 26px;
    border: none;
    cursor: pointer;
    border: 2px inset black;
}

.varswatch2 {
    padding: 0;
    width: 15px;
    position: static;
    /* border: navajowhite; */
    cursor: pointer;
    border: none;
    justify-content: space-between;
    margin: 0px;
    /* border-right: 1px solid #53535382; */
    border: 1px groove #8e8e8ef0;
    /* flex-grow: 6; */
    min-height: unset;
    height: unset;
    flex-grow: 1;
    min-width: unset;
    max-width: unset;
    height: 15px;
    margin: 2px;
    /* box-shadow: inset 1px 1px #0000008a; */
}

.varswatch3 {
    /* width: auto; */
    /* height: 10%; */
    /* FLOAT: LEFT; */
    /* border-right: 1px solid rgb(0,0,0); */
    /* border-bottom: 1px solid rgb(0,0,0); */
    cursor: pointer;
    border: none;
    /* MARGIN: 1px auto; */
    /* min-width: 1%; */
    /* MAX-WIDTH: 10%; */
}

.varswatch4 {
    /* width: auto; */
    /* max-height: 2%; */
    /* max-width: 2%; */
    /* border: none; */
    border: .2px solid rgb(0,0,0);
    border-bottom: 1px solid rgb(0,0,0);
    border: none;
    cursor: pointer;
    MARGIN: 2px;
}

.varswatch5 {
    /* width: 6%; */
    /* height: 4%; */
    /* border: none; */
    /* border-right: 1px solid rgb(0,0,0); */
    /* border-bottom: 1px solid rgb(0,0,0); */
    cursor: pointer;
    border: none;
}

.varswatch6 {
    flex-grow: 6;
    width: auto;
    min-width: 18%;
    min-height: 5%;
    height: 10px;
    max-height: 7px;
    float: right;
    border: none;
    /* margin-bottom: 50px; */
    margin: 2px;
    /* border-right: 1px solid rgba(121, 121, 121, 0.49); */
    border-bottom: 1px solid rgb(69, 69, 69);
    cursor: pointer;
    border: 2px inset #454545;
    max-width: 14%;
    padding: 3px;
    margin: 5px;
    box-shadow: inset 1px 1px 6px 1px rgba(0, 0, 0, 0.28), inset -1px -2px 3px 0px rgba(255, 255, 255, 0.16), 0 0 0px 1px #696764a6;
}

input.varswatch6 {}

input.varswatch6 {}

.Iswatch {
    margin-bottom: 0px;
    display: flex;
    float: none;
    position: fixed;
    clear: none;
    flex-flow: wrap;
    height: unset;
    width: 100px;
    right: 100px;
    /* top: 0; */
    /* bottom: 0; */
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    width: 75px;
    overflow: hidden;
    right: 0px;
    margin: 0;
    z-index: 99990000999000009999;
    padding: 0;
    top: unset;
    height: 44px;
    top: 70px;
    align-items: center;
    /* bottom: 25px; */
    border: 0px solid grey;
    box-shadow: inset 0px 20px 20px 10px #ffffff00;
    background: #a0a0a000;
    opacity: 1;
    overflow: hidden;
}

.translay2 {
    top: 0;
    /* border-top-width: 0px; */
    /* border-top-style: solid; */
    /* border-right-width: 20px; */
    /* border-right-style: solid; */
    width: 160px;
    float: none;
    margin: 0px;
    padding: 0px;
    background: url('../assets/opac2.png');
    background-size: cover;
}

.FlexBox {
    Display: flex;
    font-size: 10px;
    color: white;
    max-width: 100%;
    padding: 4px;
    margin: 4px;
}

.menuselect {
    flex-wrap: wrap;
    display: block;
    position: fixed;
    overflow: hidden;
    top: unset;
    /* display: flex; */
    resize: none;
    /* width: 180px; */
    /* right: 0px; */
    font-weight: bold;
    color: #ffffff;
    font-size: 10px;
    margin-top: 0px;
    /* float: right; */
    overflow: visible;
    font-family: sans-serif;
    margin: 0px;
    height: auto;
    float: right;
    float: none;
    width: 418px !important;
    padding-left: 2px;
    min-height: 20px;
    /* max-height: 40%; */
    /* z-index:  10000000; */
    flex-direction: row-reverse;
    flex-flow: row-reverse;
    flex-wrap: wrap;
    /* max-height: 1005; */
    min-height: 32px;
    justify-content: space-between;
    align-content: space-between;
    z-index: 100000;
    /* background: #ffffff30; */
    /* bottom: 90px; */
    /* right: 80px; */
    /* box-shadow: inset -1px -1px 5px 0px #f0f0f024; */
}

.menuselect.tinycolor {
    right: 0px !important;
    height: 100% !important;
    padding-bottom: 0px;
    z-index: 1;
    top: 0!important;
    transform: translate(0, 0-px);
    width: 375px !important;
    background-size: 70%;
    background-position: center right;
    background-repeat: no-repeat;
    bottom: 0;
}

div#labels {
}

div#bottonsleftgo {
    width: 0px;
    height: 0px;
}

.tinycolor {
    right: 60px;
}

.selected {
    margin: 0px 2px 2px 2px;
    padding: 0px;
    /* border: red solid 3px; */
    background: #e416166b;
    position: relative;
    top: 0px;
    opacity: 1;
    height: 14px;
    width: 14px;
    float: left;
    color: red;
    box-shadow: 0 0 0px 1px #613a0b;
}

.Quickcolor:hover input ~ #color {
    background: red;
}

input#SelectedText {
    /* display: none; */
    float: left;
}

.checkbig2 {
    background-color: rgba(150, 150, 20, 0.68);
    display: none
}

.checkbig {
    font-size: 13px;
    font-weight: bold;
    font-family: sans-serif;
    height: 16px;
    width: 80px;
    color: #ffffff;
    margin: 3px;
    margin-top: 0px;
    /* margin-bottom: 15px; */
    border: 1px solid #337ab7;
    bottom: 18px;
    font-size: 11px;
    font-weight: bold;
    font-family: sans-serif;
    float: right;
    /* margin-bottom: 15px; */
    /* margin: 1px; */
    margin: 0px;
    border: 1px solid #7d7d7d;
    border-top: 1px solid #bfbfbf;
    background-color: rgb(26, 26, 26);
    outline: 10px solid #ffc0cb3d;
    border-radius: 3px;
    color: #cfcfcf;
    top: 35px;
    right: 0px;
    position: FIXED;
    /* background: url(../assets/fluxpearl2h.png); */
    background-position: right top;
    background-repeat-y: repeat;
    background-repeat-x: no-repeat;
    background-size: cover;
    outline: none;
    cursor: pointer;
    bottom: 1PX;
    /* top: 45PX; */
    z-index: 10009000;
    width: 70px;
    bottom: 1px;
    margin: 2px;
    min-height: 15px;
    /* bottom: 20px; */
    right: px;
    padding: 0;
    box-shadow: 0 0 0px 2px #000000f7;
}

.inputlong {
    width: 150px;
    height: 34px;
    border: 0px;
    margin: 0px;
    border-bottom: 1px solid rgb(35, 40, 45);
    outline: 1px solid rgba(255, 255, 255, 0.77);
}

.inputlong2 {
    top: 0%;
    right: 0;
    width: 60px;
    height: 10px;
    max-width: unset;
    border: 0px;
    margin: 1px;
    border-bottom: 1px solid rgb(35, 40, 45);
    /* outline: 1px solid rgba(255, 255, 255, 0.77); */
    background-size: 78px 50px;
    background-position-x: 20px;
    background-repeat: no-repeat;
    overflow: visible;
    position: relative;
    float: left;
    display: block;
    right: 0px;
}

.FL {
    float: left;
    height: 15px;
    margin-right: 1px;
    z-index: 112;
    margin: 0;
    padding-bottom: 10px;
    color: black;
    position: relative;
    background-color: transparent;
}

.inputlong3 {
    z-index: 2;
    opacity: 1;
    /* position: fixed; */
    width: 80px;
    position: relative;
    height: 15px;
    border: 0px;
    margin: 0px;
    margin-left: 10px;
    padding-left: 1px;
    border-bottom: 1px solid rgb(35, 40, 45);
    /* outline: 1px solid rgba(255, 255, 255, 0.77); */
    float: left;
    font-size: 9px;
    font-weight: normal;
    background-color: #393939;
    padding: 4px;
    box-shadow: 0px 0px 1px 1px #000000;
    text-shadow: 1px 1px 1px #ffffffa1;
    top: -14px;
}

.check {
    float: left;
    font-size: 10px;
    margin: 0px 2px;
    position: relative;
    top: 0px;
    height: 14px;
    color: red;
}

.colorcontainer:first-Child div {
    /* float:right; */
    /* width: 300px; */
}

.right.colorpicker {
    width: 00px;
    height: 0px;
    float: right;
    margin-right: 0px;
}

.right {
    float: right;
    width: 300px;
    font-size: 7px;
    color: white;
    margin: 5px;
    padding-top: 20px;
    height: 0px;
    background: #5d5d5d;
}

.right.colorslider {
    position: static;
    background: white;
    padding: 0px;
    padding: 0px;
    margin: 0;
    left: 0px;
    /* clear: both; */
    margin-top: 0px;
    padding-right: 120px;
    height: 200px;
    z-index: 0;
    min-width: 280px;
    margin-right: 0px;
    background-size: 40%;
    min-height: 20px;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: left;
    background: transparent;
}

.colorpicker .right div {
}

.colorpicker .right {
}

.left {
    width: calc(100% - 200px);
    float: right;
    margin-right: 40px;
}

input#rgb4-color {
    color: #cecece !important;
}

.flexbox {
    float: right;
}

div#varswatchholder {
    /* float: right; */
    display: block;
    position: fixed;
    z-index: 99;
    width: 50%;
    left: 0px;
    z-index: 8;
    position: fixed;
    /* bottom: 0px; */
    right: calc(50% - 20px);
    /* height: 50%; */
    background-position: center right 100px;
    background-repeat-x: no-repeat;
    margin-top: 0px;
    background-repeat-y: no-repeat;
    background-size: 20%;
    background-repeat: no-repeat;
    opacity: 1;
    height: auto;
    top: 12px;
}

input#oldColor {
    height: 20%;
    top: unset;
    width: 100%;
    position: static;
    height: 101%;
    outline: none;
    padding-left: 45%;
    max-height: 100%;
    min-height: 20%;
    color: rgba(255, 255, 255, 0);
    /* width: 100px; */
    /* padding-top: 7px; */
    z-index: 3;
    display: block;
    /* border-bottom: 2px ridge #9e9e9e; */
    opacity: 1;
    z-index: 111111;
    left: unset;
    right: 0;
    font-size: 10px;
    box-shadow: none;
    border: none;
    opacity: 1;
    background-color: transparent;
    /* box-shadow: inset 111px -111px 120px 13px #0000009e; */
}

.inputscolor {
    float: left;
    width: 200px;
}

.varswatch6:nth-child(even) {
    /* height: 10%; */
}

.varswatch6:nth-child(5n) {
    /* order:31; */
    /* margin: 6px; */
}

.varswatch6 {
    /* margin: 1px; */
}

.varswatch6:nth-child(5n) {
    order: 31;
    /* margin: 6px; */
}

.inputlarge.fixedright {
    position: fixed;
    right: 0px;
    /* top: 50%; */
    bottom: UNSET;
    height: 0;
    margin: 2px;
    border: none;
    /* display:  block; */
    height: 0%;
    padding: 4px;
    overflow: hidden;
    opacity: 1;
    background: transparent;
    background-image: none;
}

.inputscol {
    right: 0px;
    position: fixed;
}

.displaycolortext {
    margin: 1px;
    margin-top: 30px;
    position: fixed;
    top: 120px;
    overflow: visible;
    padding-top: 2px;
    width: 250px;
    right: unset;
    color: rgb(87, 85, 136);
    left: 0px;
    font-size: 12px;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    display: block;
    z-index: -100;
    line-height: 22px;
    height: 50%;
    padding-top: 10px;
    letter-spacing: 3px;
    padding-right: 0%;
    padding-left: 10px;
    margin: auto;
    /* padding-right: 60%; */
    /* bottom: 0; */
    text-shadow: 1px 1px black;
}

.colorinputs {
    right: 380px !important;
    float: left;
    width: 270px;
    height: 25px;
    z-index: 59999995;
    position: fixed;
    margin-top: 0px;
    opacity: 1;
    bottom: 0;
    transform: 1;
    margin-right: 0px;
    bottom: 17px;
    z-index: 7;
    opacity: .5;
    top: 0;
    transform: scale(.9);
    /* transform-origin: bottom; */
    display: flex;
    transform: matrix(1,0,0,1,0,0);
    justify-content: space-around;
    background: #8080806e;
    max-width: 100%;
    background-image: url(../assets/speck.png);
}

.inputcolortype:nth-child(3) {
    background: url('../assets/blue/opaciry.png') ;
}

.inputcolortype {
    top: 0;
    position: absolute;
    right: 5px;
    width: 10px;
    height: unset;
    bottom: 5px;
    z-index: 99999999;
    display: block;
    opacity: 1;
}

div#fluxalignmenu {
    display: flex;
    flex-flow: row;
    flex-direction: row;
    flex-wrap: wrap;
}

.inputlong2.translay {
    z-index: 100000000;
    overflow: visible;
    position: relative;
    float: left !important;
    width: 61px;
    background: #676666;
    padding: 1px !important;
    margin-right: 12px !important;
    height: 28px;
    max-height: 19px;
    margin-left: 2px !important;
    box-shadow: inset 0 0 1px 1px #000000;
}

.palcont.hpicker {
    min-width: 150px
}

div {
    /* float: left; */
    /* border: none; */
    /* position: fixed; */
    /* z-index: 1000; */
    /* width: 200px; */
    /* justify-content: space-evenly; */
    /* flex-direction: row; */
    /* flex-flow: row-reverse; */
    /* display: inline-flex; */
    /* height: auto; */
}

div#exampleclone {
    transform: scale(.7,.7);
    position: relative;
    bottom: 0;
    top: 30px;
    width: 300px;
    /* top: 60px; */
    height: 50px;
    left: -190px;
    z-index: 1;
}

div#box {
    position: fixed;
    z-index: -199999;
    /* left: 0170px; */
    top: 35PX;
    padding: 0;
    height: 0px;
    width: 203px;
    right: 600px !important;
    transform: matrix(1,0,0,1,10,-20);
}

.pickerimage {
    height: 100%;
    position: absolute;
    width: auto;
    display: flex;
    right: 0;
    flex-wrap: wrap;
    flex-flow: wrap;
    overflow: hidden;
    align-content: space-between;
    flex-direction: row;
    justify-content: space-evenly;
    align-content:;
    background: linear-gradient(to right, rgba(51, 51, 51, 0.43),rgba(255, 255, 255, 0.52),rgba(35, 35, 35, 0.32));
    z-index: -99999999999991;
}

.right.colorslider.tobbot {
    margin: 0;
    position: fixed;
    z-index: 8;
    background-color: #00000000;
    width: auto;
    height: 0px;
    overflow: visible;
    padding: 0;
    /* width: 0; */
    min-height: 0;
    min-width: 0;
}

table.slider2column {
    height: auto;
    float: none;
    /* right: 0px; */
    position: relative;
    margin-top: 0px;
    top: -4px !important;
    right: calc(50% + 200px);
    z-index: 9;
    background: #ffffff94;
    border-radius: 0px;
    /* box-shadow: inset 0px 0px 1px 1px #212121; */
    pacity: 1;
    background: rgb(48, 48, 48);
    width: 305px;
    right: unset;
    /* top: 10%; */
    padding: 1px;
}

table.slider2column {
    opacity: 1 !important;
}

.inputlarge:first-child {
    height: calc(20% - 0px);
    top: unset;
    z-index: 11;
    width: 90px;
    opacity: 1;
    bottom: 30px;
    background-color: #ffffff;
    z-index: -1;
}

input#newColor {
    opacity: 1;
    height: 100%;
    max-height: 100%;
    top: 00px;
    color: #ffffff00 !important;
    font-size: 10px;
    border: none;
    padding-left: 10%;
    text-align: right;
    padding-top: 0%;
    padding-bottom: 0%;
    text-align: left;
    margin-right: 0;
    position: relative;
    vertical-align: unset;
    z-index: 10000000;
    left: 0;
    bottom: unset;
    outline: 0;
    min-height: unset;
    background-color: transparent;
    /* box-shadow: inset 120px 119px 120px 13px #0000009e; */
}

.inputlarge.translay {
    display: block;
    width: 100%;
    overflow: hidden;
    background-image: url(../assets/opac2.png);
}

div#varswatchb {
    position: fixed;
    width: 65px;
    /* left: 200px; */
    border: 1px solid #ffffff6e;
    display: flex;
    flex-flow: wrap-reverse;
    flex-direction: row-reverse;
    flex-grow: 1;
    height: auto;
    max-height: calc(5% - 4px);
    overflow: hidden;
    background: #ffffff2b;
    align-items: flex-start;
    align-content: space-around;
    /* top: 200px; */
    right: calc(0% + 5px) !important;
    flex-wrap: nowrap;
    flex: auto;
    justify-content: space-around;
    flex-basis: auto;
    z-index: 1000000;
    cursor: pointer;
    border-radius: 0px;
    /* box-shadow: 0 0 6px 3px #000000, 0 0 0px 1px #ffffff; */
    top: calc(0% + 55px);
    border: unset;
    /* bottom: 25px; */
}

div#varswatchd {
    position: static;
    width: auto;
    top: unset;
    right: calc(0% + 379px);
    margin-left: 0;
    padding: 40px;
    margin-bottom: 0px;
    /* left: 200px; */
    display: flex;
    height: 3000px;
    max-height: 55px;
    flex-flow: wrap-reverse;
    bottom: 0px;
    flex-direction: row;
    /* flex: auto; */
    /* background: linear-gradient(to top,rgb(70, 70, 70),rgb(58, 58, 58)); */
    z-index: 74;
    width: 261px;
    border-radius: 00px;
    border: 12x solid #454545;
    flex-wrap: wrap-reverse;
    /* width: 100px; */
    background-color: rgb(51, 51, 51);
    /* box-shadow: inset 0px 110px 70px -60px #00000069; */
    position: fixed;
    justify-content: space-evenly;
    overflow: hidden;
    /* box-shadow: -20px -1px 20px 20px #000000b3, 0 0 0px 1px #ffffff; */
    align-items: flex-start;
    /* max-height: 60%; */
    z-index: 100000000000012;
    padding: 5px;
    padding-top: 0;
    /* background-image: url(../assets/speck.png); */
}

div#colortypecl {
    position: fixed;
    top: unset;
    bottom: 0;
    right: 360px !important;
    width: 285px;
    float: right;
    margin: 1px;
    margin-left: 0px;
    height: 0px;
    padding-right: 0px;
    padding-left: 0px;
    overflow: visible;
    background: rgb(51, 51, 51);
    border-radius: 0px;
    padding: 2px;
    margin-bottom: 60px;
    box-shadow: 0 0 0px 1px #806e5800;
    transform: scale(1,1);
    z-index: 4;
    height: 23px;
    background: #212121;
    max-width: 100%;
    background-image: url(../assets/speck.png);
    box-shadow: 0 0 0px 0px black;
}

div#varswatcha1 {
    left: 400px;
    z-index: 1;
    position: fixed;
    height: calc(30% - 20px);
    top: calc(20% + 25px);
    max-height: 10%;
    overflow: hidden;
    width: 60px;
    justify-content: space-between;
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    flex-flow: row;
    flex-wrap: wrap;
    display: none;
    /* height: auto; */
    z-index: -100000000;
    background: #3b3b3b;
}

div#bottonsleftgo {
    right: 0px;
    bottom: 30px;
    top: -40px;
    padding: 0px;
    color: black;
    /* background-color: blueviolet; */
}

div#bottonsleftgo label {
    padding-right: 05px;
    min-width: 35px;
    color: white;
    margin-right: 5px;
    background: -webkit-linear-gradient(top,#000000b8,#ffffff59);
    text-shadow: 1px 1px 1px black;
}

input {
    /* height: 2%; */
    /* top: 1px; */
    /* left: 1px; */
    /* margin: 2px; */
    /* width: 10%; */
    padding: px;
    /* padding-right: 4px; */
    /* position: relative; */
    /* outline: none; */
    /* border-width: 1px; */
    /* margin: 0px; */
    cursor: pointer;
}

.selectedtext {
    /* color: #732323; */
    /* opacity: 0; */
    /* display: none; */
    /* visibility: hidden; */
}

div#varswatchc {
    display: flex;
    width: calc(45% - 230px);
    margin: 0PX;
    display: none;
    FLEX-DIRECTION: row;
    overflow: hidden;
    /* top: 170px; */
    background: #232323bf;
    border: 1px solid #ffffff6e;
    height: 75px;
    right: calc(50% + 10px);
    z-index: 1100011;
    right: 55%;
    FLEX-FLOW: wrap;
    align-items: stretch;
    bottom: 5px;
    position: fixed;
    ALIGN-CONTENT: space-evenly;
    /* border-radius: 10px; */
    box-shadow: 4px 3px 0px 3px #00000075, 0 0 0px 1px #ffffff;
    justify-content: space-around;
}

label {
    display: inline block;
    color: rgb(247, 247, 247) !important;
    border: 3px outset;
    width: auto;
    text-align: left;
    /* line-height: 0px; */
    max-width: 150px;
    font-size: 11px;
    /* font-weight: bold; */
    flex-grow: 1;
    opacity: .7;
    /* padding-bottom: 0px; */
    border: 3px solid black;
    flex-shrink: 1;
    height: 15px;
    width: auto;
    padding: 2px;
    letter-spacing: 0px;
    margin: 0;
    border: 1px solid rgba(128, 110, 88, 0);
    /* top: 0px; */
    min-width: auto;
    text-overflow: ellipsis;
    float: right;
    overflow: hidden;
    /* border: none; */
    flex-flow: row;
    background: #00000085;
    /* vertical-align: text-top; */
    color: #ffffff7a;
    /* -webkit-text-fill-color: #ffffffde; */
    /* -webkit-text-stroke: #ffffff91; */
    /* -webkit-text-stroke-width: 1px; */
    text-shadow: 1px 1px 1px #000000;
    border: 1px outset rgba(0, 0, 0, 0.93);
    display: flex;
    box-shadow: 2px 0px 7px 2px rgba(0, 0, 0, 0.28);
    padding-right: 2px;
    margin: 0;
    max-width: 120px;
    position: relative;
    z-index: 7778888888877;
}

label img {
    width: 12px;
    margin: 1px 2px 0px 4px;
    float: left;
    position: relative;
    top: -2px;
    height: 12px;
}

div#colorsliderq {
    position: fixed;
    width: 299px !important;
    /* transform-origin: center; */
    /* bottom: -10px; */
    right: 80px !important;
    top: unset;
    /* border: 3px groove #00000066; */
    bottom: 17px;
    z-index: 5;
    border: 0;
    overflow: visible;
    /* transform: scale(1.3,.3); */
    border-radius: 3px;
    /* background: rgba(0, 0, 0, 0.47); */
}

div#thepicker {
    position: fixed;
    top: 16px !important;
    right: 70px !important;
    z-index: 100000000;
}

.colorchords {
    display: block;
    line-height: 22px;
    font-size: 12px;
    letter-spacing: 8px;
    height: 32px;
    width: 10-0%;
    margin-right: 0%;
    padding-right: 10px;
    float: none;
    color: #ffffffcc;
    /* text-align: left; */
    text-shadow: 2px 2px 1px black;
}

input[type="checkbox"]:checked:after {

background-color:red


}  input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
       appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    margin: 0;
   }