html {
  min-height: 100%; }

body {
  background: black;
  margin: 0 auto; }

.colorwheel {
  position: relative;
  z-index: 1;
  display: block;
  width: 400px;
  height: 400px;
  margin: 120px auto 0; }

.colorwheel-marker:first-child circle {
  stroke-opacity: 1;
  stroke-width: 5px; }

  .webui-popover-title{color:#fff; margin-top: 40px;}
.colorwheel-marker text {
  text-shadow: 1px 1px 1px black, 0 0 3px rgba(0, 0, 0, 0.25); }
  [data-mode=Shades] .colorwheel-marker text {
    display: none; }

.colorwheel-theme {
  display: flex;
  text-align: center;
  max-width: 450px;
  min-width: 350px;
  margin: 10px auto 0; }

.colorwheel-theme-swatch {
  flex: 1;
  padding: 0 0.6% 20px; }
  .colorwheel-theme-swatch input {
    opacity: 0.3; }
  .colorwheel-theme-swatch:hover input {
    opacity: 0.75; }

.colorwheel-theme-color {
  position: relative;
  border-radius: 50%;
  padding-top: 100%;
  box-shadow:2px 2px 0 #00000054; }

.colorwheel-theme-slider {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 15px;
  -webkit-appearance: none;
  outline: none;
  background: transparent; }
  .colorwheel-theme-slider:before {
    content: attr(value) "%";
    display: block;
    position: absolute;
    z-index: -1;
    top: 30px;
    width: 100%;
    font-size: 10px;
    text-align: center;
    color: white;
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5); }

.colorwheel-theme-value {
  outline: none;
  width: 100%;
  border: none;
  font-family: Monaco, monospace;
  text-align: center;
  background: transparent;
  color: white; }

.colorwheel-mode-toggle {
    position: absolute;
    z-index: 2;
    top: 90px;
    right: 20px;
    height: 2em;
    border: none;
    background: #0000001a;
    color: rgba(255, 255, 255, 0.75);
    font-size: 20px;
    padding: 4px 12px;
    border-radius: 6px; }
  .colorwheel-mode-toggle:hover {
    color: rgba(255, 255, 255, 0.9); }

    .blurdd{
        filter: blur(100px);
    }
.colorwheel-gradient {
  z-index: -1;
  opacity: 0.5;
  -webkit-filter: url(#blur);
  filter: url(#blur);
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(0); }

/** Trumps */
::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 2px;
  border: none;
  margin: 1em 0;
  background: #fff;
  color: #fff; }

::-moz-range-track {
  height: 2px;
  border: none;
  margin: 1em 0;
  background: #fff;
  color: #fff; }

::-ms-track {
  height: 2px;
  border: none;
  margin: 1em 0;
  background: #fff;
  color: #fff; }

::-ms-fill-lower,
::-ms-fill-upper,
::-ms-ticks-before,
::-ms-ticks-after,
::-ms-tooltip {
  display: none; }

::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -7px;
  background: black;
  border: 2px solid #fff;
  height: 15px;
  width: 15px;
  border-radius: 99px;
  cursor: ew-resize; }

::-moz-range-thumb {
  background: black;
  border: 2px solid #fff;
  height: 15px;
  width: 15px;
  border-radius: 99px;
  cursor: ew-resize; }

::-ms-thumb {
  background: black;
  border: 2px solid #fff;
  height: 15px;
  width: 15px;
  border-radius: 99px;
  cursor: ew-resize; }



  .playstore-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 1);
    padding: 0.625rem 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    outline: 0;
    transition: all  .2s ease;
    text-decoration: none;
    width: 180px;
    margin: 20px auto 0px;
    background: linear-gradient(90deg, rgba(222,0,75,1) 0%, rgba(191,70,255,1) 49%, rgba(0,212,255,1) 100%);
    -webkit-box-shadow: 0 11px 12px 0 rgba(60,64,67,.19),0 1px 3px 1px rgba(60,64,67,.24);
    -moz-box-shadow: 0 11px 12px 0 rgba(60,64,67,.19),0 1px 3px 1px rgba(60,64,67,.24);
    box-shadow: 0 11px 12px 0 rgba(60,64,67,.19),0 1px 3px 1px rgba(60,64,67,.24);
    cursor: pointer;
  }
  
  .playstore-button:hover {
    background-color: #fff;
    background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);
  }
  
  .icon {
    height: 1.5rem;
    width: 1.5rem;
  }
  
  .texts {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
  }
  
  .text-1 {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }
  
  .text-2 {
    font-weight: 600;
  }

  .imgcss{
    height: 40px;position: absolute;z-index: 11;top: 2vw;left: 2vw;padding: 4px 10px;border-radius: 8px;
  }


  .main{margin-top: 70px;}
  .why-use-monitor{padding-top: 40px;}
.button {
display: block;
padding: 0.5rem 2rem;
margin-bottom: 8px;
border: 2px solid var(--link-color);
color: var(--link-color);
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--border-radius-large);
vertical-align: middle;
white-space: nowrap;
font-weight: var(--bold);
background-color: white;
}
.button:hover {
color: white;
background-color: var(--link-color);
text-decoration: none;
}

@media (min-width: 720px) {
.button {
  display: inline-block;
  margin-right: 8px;
}
}

.swatch {
  display: inline-block;
  background: #dddddd;
}

.color .swatch {
  width: 70px;
  height: 70px;
  border-radius: 70px;
  padding: 25px;
  transition: all .15s ease-in;
  cursor: pointer;
}
.color .swatch svg{display: none;color:#fff; }
.color .swatch:hover svg{display: block;transition: all .15s ease-in;}
.color .swatch:hover{transform: scale(1.1);}

.palette .swatches {
  text-align: left;
  display: inline-block;
}
.palette .swatch {
  width: 54px;
  height: 54px;
  border-radius: 70px;
  padding: 16px;
  transition: all .15s ease-in;
  cursor: pointer;
}
.palette .swatch svg{display: none;color:#fff; }
.palette .swatch:hover svg{display: block;transition: all .15s ease-in;}
.palette .swatch:hover{transform: scale(1.1);}
.time {
  color: var(--muted-color);
  font-weight: normal;
}
.colorViewok{padding: 10px;}
.colorViewok .main-color{flex: 0 1 auto;
margin-right: 2rem; text-align: left;}
.colorViewok .palette{flex: 0 1 auto;
margin-right: 2rem;text-align: left;}
.target-image{margin: 30px auto;
border-radius: 10px;}
.palette h3{text-align: left; font-weight: 500; font-size: 18px;}
.main-color{
  vertical-align: top;
}
.row .col{
  padding: 10px;
}
.online-palette-colors{max-width: 360px;}
.header{position: absolute;}
.card{box-shadow: none;}

@media only screen and (min-width: 992px) {
.row .col.s9 {
  width: 55%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s3 {
  width: 45%;
  margin-left: auto;
  left: auto;
  right: auto;
}
}
.showshowt{width: 16px !important;
height: 16px !important;
transform: translateY(0px) !important;}

.palette .swatch.showicon{background: #f0eeee;}

.palette .swatch.showicon svg{display: block;}

.selectitem {
    padding: 2px 32px 2px 8px;
  margin: 6px 4px;
  background-color: #73737324;
  border-radius: 6px;
  line-height: 36px;
  cursor: pointer;
  min-width: 90px;
  color: #fff;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
}
.webui-popover{padding: 0px;height: auto;z-index: 10001;
  top: 10% !important;
left:10% !important;
 }
 @-webkit-keyframes slidebg {
  to {
      background-position: 20vw;
  }
}

@keyframes slidebg {
  to {
      background-position: 20vw;
  }
}

 .selectitem:hover{background-color: #e7fae3;color: #31a450;}
 .selectitem.Active{background-color: #2b2b2b66;font-weight: 500;}
 .addcolorb{font-weight: 700; width: 240px;height: 50px;background-color: #fff; display: inline-block;border-radius: 80px;text-align: left;margin: 0 auto;padding: 9px;line-height: 50px;vertical-align: top;display: flex;align-items: center;justify-content: center;box-shadow: 0 1px 4px 0 rgba(60, 64, 67, 0.18),0 1px 3px 1px rgba(60,64,67,.05);cursor: pointer;}
 .addcolorb:hover{background-color: #e7fae3;color: #fff; background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);animation: slidebg 2s linear infinite;}
 .addcolorb svg{margin-right: 6px;}
 .selectitem.Active::after{
  content:'';position:absolute;top:10px;height:18px;width:18px;right: 10px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiPjxwYXRoIGQ9Ik00MDkuNiA3ODkuMzMzYy0xMi44IDEyLjgtMjUuNiAyNS42LTQyLjY2NyAzOC40LTguNTMzIDguNTM0LTE3LjA2NiAxNy4wNjctMjUuNiAyMS4zMzQtOC41MzMgNC4yNjYtMTIuOCA4LjUzMy0yNS42IDQuMjY2LTQuMjY2LTQuMjY2LTQuMjY2LTEyLjgtNC4yNjYtMTcuMDY2VjY3NC4xMzNjMC04LjUzMyAwLTEyLjggNC4yNjYtMjEuMzMzIDQuMjY3LTQuMjY3IDguNTM0LTQuMjY3IDguNTM0LTQuMjY3IDE3LjA2Ni00LjI2NiAyOS44NjYtMTIuOCAzOC40LTI1LjZsMTA2LjY2Ni0xMDYuNjY2YzQuMjY3IDQuMjY2IDQuMjY3IDEyLjggNC4yNjcgMTcuMDY2djE3OS4yYzAgOC41MzQgMCAxMi44LTguNTMzIDE3LjA2Ny0xMi44IDIxLjMzMy0yOS44NjcgNDIuNjY3LTU1LjQ2NyA1OS43MzN6IiBmaWxsPSIjRjA5MjEzIi8+PHBhdGggZD0iTTQwOS42IDc4OS4zMzNjMTcuMDY3LTIxLjMzMyAzOC40LTM4LjQgNTUuNDY3LTU5LjczMyA0LjI2Ni00LjI2NyA0LjI2Ni04LjUzMyA4LjUzMy0xMi44IDE3LjA2Ny0yNS42IDQyLjY2Ny00Mi42NjcgNjQtNjguMjY3IDQuMjY3LTQuMjY2IDQuMjY3LTQuMjY2IDguNTMzLTQuMjY2djguNTMzYzM0LjEzNC0yOS44NjcgNzIuNTM0LTU5LjczMyAxMDYuNjY3LTg5LjYgNDYuOTMzLTM4LjQgODkuNi03Mi41MzMgMTM2LjUzMy0xMTAuOTMzIDUxLjItNDIuNjY3IDEwMi40LTgxLjA2NyAxNDkuMzM0LTEyMy43MzQgMTcuMDY2LTE3LjA2NiAyNS42LTM0LjEzMyAyMS4zMzMtNTkuNzMzIDAtNC4yNjctNC4yNjctOC41MzMgMC0xNy4wNjcgMTcuMDY3IDAgMjUuNiAxMi44IDM0LjEzMyAyMS4zMzQgMjkuODY3IDM0LjEzMyAyMS4zMzQgODEuMDY2LTE3LjA2NiAxMDYuNjY2QzkzMC4xMzMgNDEzLjg2NyA4ODMuMiA0NDggODMyIDQ4Mi4xMzNjLTM4LjQgMjUuNi03Ni44IDU1LjQ2Ny0xMTUuMiA4MS4wNjctODUuMzMzIDU5LjczMy0xNzQuOTMzIDEyMy43MzMtMjYwLjI2NyAxODMuNDY3LTEyLjggMjEuMzMzLTI1LjYgMzguNC00Ni45MzMgNDIuNjY2eiIgZmlsbD0iI0UxRjFGNyIvPjxwYXRoIGQ9Ik01NTAuNCA2NDguNTMzYy0yMS4zMzMgMTcuMDY3LTM4LjQgMzguNC01OS43MzMgNTkuNzM0LTQuMjY3IDQuMjY2LTguNTM0IDQuMjY2LTEyLjggOC41MzNWNTEyYzM0LjEzMy0zNC4xMzMgNjQtNjguMjY3IDk4LjEzMy05OC4xMzNsNTEuMi01MS4yYzguNTMzIDAgOC41MzMgOC41MzMgOC41MzMgMTIuOCA0LjI2NyAyOS44NjYgMCA1NS40NjYgMCA4NS4zMzNzNC4yNjcgNjQgMCA5My44NjdjMCA4LjUzMy00LjI2NiAxMi44LTguNTMzIDE3LjA2Ni0xNy4wNjcgMTcuMDY3LTM4LjQgMzQuMTM0LTUxLjIgNTUuNDY3LTEyLjggOC41MzMtMTcuMDY3IDE3LjA2Ny0yNS42IDIxLjMzM3oiIGZpbGw9IiNERDUwNDciLz48cGF0aCBkPSJNNjMxLjQ2NyA1NjMuMmMtNC4yNjctOC41MzMgMC0xNy4wNjcgMC0yNS42LTQuMjY3LTUxLjIgMC0xMDIuNCAwLTE0OS4zMzMgMC04LjUzNCA4LjUzMy0xNy4wNjctNC4yNjctMjEuMzM0bDE1Ny44NjctMTU3Ljg2NmM4LjUzMyA0LjI2NiA0LjI2NiAxMi44IDQuMjY2IDIxLjMzM3YxNzQuOTMzYzAgOC41MzQtNC4yNjYgMTIuOC04LjUzMyAxNy4wNjdMNjQ4LjUzMyA1NTQuNjY3Yy00LjI2NiA0LjI2Ni04LjUzMyA4LjUzMy0xNy4wNjYgOC41MzN6IiBmaWxsPSIjOUU1MDlCIi8+PHBhdGggZD0iTTc4NS4wNjcgNDA1LjMzM2MtNC4yNjctNC4yNjYtNC4yNjctMTIuOC00LjI2Ny0xNy4wNjZWMjA0LjhjMTIuOC0xMi44IDIxLjMzMy0yNS42IDM4LjQtMzguNCA0Ni45MzMtMzguNCAxMTAuOTMzLTQuMjY3IDExOS40NjcgNTEuMiA0LjI2NiAyNS42IDAgNDIuNjY3LTIxLjMzNCA2NGwtMTE1LjIgMTE1LjJjLTQuMjY2IDQuMjY3LTguNTMzIDEyLjgtMTcuMDY2IDguNTMzeiIgZmlsbD0iIzBGQTJENSIvPjxwYXRoIGQ9Ik0xMDYuNjY3IDY3NC4xMzNDNzYuOCA2NDQuMjY3IDUxLjIgNjE0LjQgMjEuMzMzIDU4NC41MzNjLTE3LjA2Ni0yOS44NjYtMTIuOC04MS4wNjYgMjEuMzM0LTk4LjEzMyA0Mi42NjYtMTcuMDY3IDcyLjUzMy0xMi44IDEwMi40IDE3LjA2NyA4LjUzMyA4LjUzMyAyMS4zMzMgMTcuMDY2IDI1LjYgMzQuMTMzIDQuMjY2IDQ2LjkzMyAwIDkzLjg2NyAwIDE0MC44IDAgMTcuMDY3IDAgMzQuMTMzLTQuMjY3IDUxLjItNC4yNjcgOC41MzMtOC41MzMgNC4yNjctMTIuOCAwLTEyLjgtMjEuMzMzLTI5Ljg2Ny0zOC40LTQ2LjkzMy01NS40Njd6IiBmaWxsPSIjNkRCQjUxIi8+PHBhdGggZD0iTTc4NS4wNjcgNDA1LjMzM0w5MDguOCAyODEuNmMxMi44LTEyLjggMjEuMzMzLTIxLjMzMyAyNS42LTM4LjQgMC04LjUzMyAwLTE3LjA2NyA0LjI2Ny0yNS42IDAgMjEuMzMzIDEyLjggMjkuODY3IDIxLjMzMyA0Mi42NjcgNC4yNjcgMjUuNiA0LjI2NyA0Ni45MzMtMTIuOCA2OC4yNjYtOC41MzMgMTIuOC0yMS4zMzMgMjUuNi0zNC4xMzMgMzQuMTM0LTUxLjIgNDIuNjY2LTEwNi42NjcgODUuMzMzLTE1Ny44NjcgMTI4LTM0LjEzMyAyOS44NjYtNzIuNTMzIDU1LjQ2Ni0xMDYuNjY3IDg1LjMzMy0zNC4xMzMgMjUuNi02OC4yNjYgNTUuNDY3LTEwMi40IDgxLjA2Ny00LjI2NiAwLTQuMjY2IDQuMjY2LTguNTMzIDQuMjY2IDQuMjY3LTQuMjY2IDguNTMzLTguNTMzIDguNTMzLTEyLjhsMjEuMzM0LTIxLjMzMyA2NC02NGM1MS4yLTUxLjIgMTA2LjY2Ni0xMDIuNCAxNTMuNi0xNTcuODY3eiIgZmlsbD0iI0QwRTlFNSIvPjxwYXRoIGQ9Ik0zMjguNTMzIDY0NC4yNjdzLTQuMjY2IDAtNC4yNjYgNC4yNjZjLTIxLjMzNCA4LjUzNC00Mi42NjcgMC01OS43MzQtMTIuOC0yNS42LTIxLjMzMy00Mi42NjYtNDIuNjY2LTY0LTY4LjI2NlY1NjMuMmMtMjUuNi0yNS42LTQyLjY2Ni01NS40NjctNjQtNzYuOC0xMi44LTEyLjgtMjkuODY2LTIxLjMzMy01MS4yLTIxLjMzMy00LjI2NiAwLTguNTMzIDAtMTIuOC00LjI2NyAzOC40LTI5Ljg2NyA4OS42LTEyLjggMTEwLjkzNCAyMS4zMzNDMjA0LjggNTIwLjUzMyAyMzAuNCA1NTQuNjY3IDI1NiA1OTMuMDY3YzQuMjY3IDguNTMzIDguNTMzIDEyLjggMTIuOCAyMS4zMzMgMTcuMDY3IDIxLjMzMyAzNC4xMzMgMzQuMTMzIDU5LjczMyAyOS44Njd6IiBmaWxsPSIjRTFGMUY1Ii8+PHBhdGggZD0iTTEwNi42NjcgNjc0LjEzM2w1NS40NjYgNTUuNDY3YzEyLjggOC41MzMgMjUuNiAyMS4zMzMgMzQuMTM0IDM0LjEzMyAyMS4zMzMgMjUuNiA0Ni45MzMgNDYuOTM0IDY4LjI2NiA2OC4yNjcgOC41MzQgMTIuOCAyNS42IDE3LjA2NyAzOC40IDE3LjA2NyA0LjI2NyAwIDguNTM0IDAgMTIuOCA0LjI2NiA4LjUzNCAwIDE3LjA2Ny00LjI2NiAyMS4zMzQtNC4yNjYtNC4yNjcgOC41MzMtMTcuMDY3IDguNTMzLTI1LjYgOC41MzMtMjUuNiAwLTU1LjQ2NyAwLTc2LjgtMTcuMDY3LTguNTM0LTEyLjgtMjEuMzM0LTI5Ljg2Ni0yOS44NjctNDYuOTMzLTI5Ljg2Ny0zOC40LTU1LjQ2Ny03Ni44LTg5LjYtMTEwLjkzMy00LjI2NyAwLTguNTMzLTQuMjY3LTguNTMzLTguNTM0eiIgZmlsbD0iI0VFRjRFNyIvPjxwYXRoIGQ9Ik02OC4yNjcgNDYwLjhjMTIuOCAwIDI1LjYgMCAzOC40IDQuMjY3IDE3LjA2NiA0LjI2NiAyNS42IDIxLjMzMyAzOC40IDI5Ljg2NiAxNy4wNjYgMjEuMzM0IDM0LjEzMyA0Ni45MzQgNTUuNDY2IDY4LjI2N3Y0LjI2N2MtMTcuMDY2LTQuMjY3LTI1LjYtMjEuMzM0LTM0LjEzMy0zNC4xMzQtMTIuOC0xMi44LTIxLjMzMy0yNS42LTM4LjQtMzguNC0yMS4zMzMtMTcuMDY2LTQ2LjkzMy0yMS4zMzMtNzIuNTMzLTEyLjgtNC4yNjcgMC04LjUzNCA0LjI2Ny0xMi44IDQuMjY3IDQuMjY2LTguNTMzIDEyLjgtMjEuMzMzIDI1LjYtMjUuNnoiIGZpbGw9IiNEMEU4RTEiLz48cGF0aCBkPSJNNjguMjY3IDQ2MC44Yy04LjUzNCA4LjUzMy0xMi44IDIxLjMzMy0yMS4zMzQgMjkuODY3LTI1LjYgMTcuMDY2LTQyLjY2NiA0Ni45MzMtMjUuNiA5My44NjYtOC41MzMtNC4yNjYtOC41MzMtMTIuOC0xMi44LTIxLjMzMy00LjI2Ni0yNS42IDAtNTEuMiAxMi44LTcyLjUzMyAxMi44LTE3LjA2NyAyOS44NjctMjUuNiA0Ni45MzQtMjkuODY3eiIgZmlsbD0iI0U5RjNFNSIvPjxwYXRoIGQ9Ik0xNjYuNCA1MzMuMzMzYzEyLjggMTIuOCAyNS42IDIxLjMzNCAzNC4xMzMgMzQuMTM0IDIxLjMzNCAyNS42IDQyLjY2NyA0Ni45MzMgNjQgNjguMjY2QzI4MS42IDY0OC41MzMgMjk4LjY2NyA2NTIuOCAzMjAgNjUyLjhjLTQuMjY3IDQuMjY3LTQuMjY3IDEyLjgtNC4yNjcgMTcuMDY3Vjg1Ny42Yy0xNy4wNjYgNC4yNjctMzguNCAwLTUxLjItMTIuOC0zOC40LTM0LjEzMy03Mi41MzMtNzIuNTMzLTEwNi42NjYtMTEwLjkzMyA0LjI2Ni0xMi44IDAtMjkuODY3IDAtNDYuOTM0IDAtNDYuOTMzIDQuMjY2LTkzLjg2NiAwLTE0MC44IDQuMjY2LTQuMjY2IDguNTMzLTguNTMzIDguNTMzLTEyLjh6IiBmaWxsPSIjRjZCRTFBIi8+PHBhdGggZD0iTTU2Ny40NjcgNjI3LjJjLTQuMjY3IDguNTMzLTEyLjggMTcuMDY3LTIxLjMzNCAyMS4zMzMgOC41MzQtOC41MzMgMTcuMDY3LTEyLjggMjEuMzM0LTIxLjMzM3oiIGZpbGw9IiNFMUYxRjciLz48L3N2Zz4=");

 }

  .selectstyle{
    margin: 20px auto;
    border-radius: 8px;
    padding: 0px 0px 30px;
    max-width: 1800px;
    text-align: center;
    position: absolute;
    background-image: linear-gradient(to right, rgb(255, 0, 0) 10%, rgb(255, 50, 0), rgb(255, 99, 0), rgb(209, 0, 255), rgb(255, 0, 170) 90%);
    z-index: 111;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    top: calc(50% - 30px);
    left: 50%;
    width: 100%;
    display: none;
  }

  .strip_close {
    position: absolute;
    right: 1vw;
    top: 1vw;
    z-index: 11;
    -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
    height: 36px;
    width: 36px;
  }
  .strip_close:hover {
  background-color: #a20000;
  border-radius: 60px;
}
  .online-palette-colors{display:flex;width:100%;height:104px;}
.online-palette-colors div{flex-grow:1;transition:all 0.1s ease-in-out;cursor:pointer;position:relative;overflow:hidden;flex-basis:1px;}
.online-palette-colors div:first-child{border-radius:10px 0 0;border-radius:10px 0 0 10px;}
.online-palette-colors div:last-child{border-radius:0 10px 10px 0;box-shadow:inset rgba(0, 0, 0, 0.05) -1px 1px,inset rgba(0, 0, 0, 0.05) 0 -1px;}
.online-palette-colors div span{text-transform: uppercase;width:calc(100% - 20px);margin:0 10px;border-radius:4px;text-align:center;display:none;position:absolute;top:calc(50% - 50px);margin-top:-7px;font-weight:500;color:white;opacity:0;transition:all 0.4s ease-in-out;font-size:15px;padding:2px;}
.online-palette-colors div.copycolor span,.online-palette-colors div.copycolor:after{color:black;}
@media (min-width: 992px){
.online-palette-colors{height:124px;}
}
::selection{background:#bed4ff!important;}
.online-palette-colors div:hover{flex-basis:90px;}
.online-palette-colors div *{display:none;}
.online-palette-colors div.copycolor:hover span,.online-palette-colors div:hover span{opacity:1;position:relative;display:block;}
::selection{background:#4f46e5!important;color:#fff;}
:disabled{cursor:default;}
*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(30 177 255 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
.copycolor:hover:before{content:'';display:inline-block;vertical-align:middle;background-size:20px;background-repeat:no-repeat;background-position:center bottom;width:100%;height:50px;}
.webui-popover .webui-popover-content > div:first-child{width:99%;}
.online-palette-colors{max-width:360px;}


.buttonbb {
    width: 50px;
    height: 50px;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: rgb(44, 44, 44);
    border-radius: 50%;
    cursor: pointer;
    transition-duration: .3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);
    border: none;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: auto;
    background-size: 300%;
    border-radius: 30px;
    box-shadow: 2px 2px 0 #00000026;
    display: inline-flex;
  }
  
  .bell {
    width: 18px;
  }
  
  .bell path {
    fill: white;
  }
  
  .buttonbb:hover {
    background-color: rgb(56, 56, 56);
  }
  
  .buttonbb:hover .bell {
    animation: bellRing 0.9s both;
  }
  
  @keyframes bellRing {
    0%,
    100% {
      transform-origin: top;
    }
  
    15% {
      transform: rotateZ(10deg);
    }
  
    30% {
      transform: rotateZ(-10deg);
    }
  
    45% {
      transform: rotateZ(5deg);
    }
  
    60% {
      transform: rotateZ(-5deg);
    }
  
    75% {
      transform: rotateZ(2deg);
    }
  }
  
  .buttonbb:active {
    transform: scale(0.8);
  }


  .spop-container {
    z-index: 10003;
    position: fixed; }
    .spop-container,
    .spop-container *,
    .spop-container *:after,
    .spop-container *:before {
      box-sizing: border-box; }
  
  .spop--top-left {
    top: 0;
    left: 0; }
    .spop--top-left .spop {
      -webkit-transform-origin: 0 0;
          -ms-transform-origin: 0 0;
              transform-origin: 0 0; }
  
  .spop--top-center {
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
    .spop--top-center .spop {
      -webkit-transform-origin: 50% 0;
          -ms-transform-origin: 50% 0;
              transform-origin: 50% 0; }
  
  .spop--top-right {
    top: 0;
    right: 0; }
    .spop--top-right .spop {
      -webkit-transform-origin: 100% 0;
          -ms-transform-origin: 100% 0;
              transform-origin: 100% 0; }
  
  .spop--center {
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0); }
    .spop--center .spop {
      -webkit-transform-origin: 50% 0;
          -ms-transform-origin: 50% 0;
              transform-origin: 50% 0; }
  
  .spop--bottom-left {
    bottom: 0;
    left: 0; }
    .spop--bottom-left .spop {
      -webkit-transform-origin: 0 100%;
          -ms-transform-origin: 0 100%;
              transform-origin: 0 100%; }
  
  .spop--bottom-center {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
    .spop--bottom-center .spop {
      -webkit-transform-origin: 50% 100%;
          -ms-transform-origin: 50% 100%;
              transform-origin: 50% 100%; }
  
  .spop--bottom-right {
    bottom: 0;
    right: 0; }
    .spop--bottom-right .spop {
      -webkit-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
              transform-origin: 100% 100%; }
  
  @media screen and (max-width: 30em) {
    .spop--top-left,
    .spop--top-center,
    .spop--top-right,
    .spop--bottom-left,
    .spop--bottom-center,
    .spop--bottom-right {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      margin-left: 0;
      -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
              transform: translateX(0); }
      .spop--top-left .spop,
      .spop--top-center .spop,
      .spop--top-right .spop,
      .spop--bottom-left .spop,
      .spop--bottom-center .spop,
      .spop--bottom-right .spop {
        -webkit-transform-origin: 50% 100%;
            -ms-transform-origin: 50% 100%;
                transform-origin: 50% 100%; }
    .spop {
      border-bottom: 1px solid rgba(0, 0, 0, 0.15); } }
  
  .spop {
    position: relative;
    min-height: 56px;
    line-height: 1.25;
    font-size: 14px;
    border-radius: 12px;
    -webkit-transform: translateZ(0);
            transform: translateZ(0); }
    @media screen and (min-width: 30em) {
      .spop {
        width: 320px;
        margin: 0.7em; } }
  
  .spop--info,
  .spop--warning,
  .spop--success {
    color: #fff;
    background-color: #222; }

    .spop--error{
      color: #fff;
      background-color: #460D0D; }

      .spop--warning{
        color: #fff;
        background-color: #333; }

  @-webkit-keyframes spopIn {
    0% {
      -webkit-transform: scale(0.2, 0.2);
              transform: scale(0.2, 0.2); }
    95% {
      -webkit-transform: scale(1.1, 1.1);
              transform: scale(1.1, 1.1); }
    100% {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1); } }
  
  @keyframes spopIn {
    0% {
      -webkit-transform: scale(0.2, 0.2);
              transform: scale(0.2, 0.2); }
    95% {
      -webkit-transform: scale(1.1, 1.1);
              transform: scale(1.1, 1.1); }
    100% {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1); } }
  
  @-webkit-keyframes spopOut {
    0% {
      opacity: 1;
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1); }
    20% {
      -webkit-transform: scale(1.1, 1.1);
              transform: scale(1.1, 1.1); }
    100% {
      opacity: 0;
      -webkit-transform: scale(0, 0);
              transform: scale(0, 0); } }
  
  @keyframes spopOut {
    0% {
      opacity: 1;
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1); }
    20% {
      -webkit-transform: scale(1.1, 1.1);
              transform: scale(1.1, 1.1); }
    100% {
      opacity: 0;
      -webkit-transform: scale(0, 0);
              transform: scale(0, 0); } }
  
  .spop--out {
    -webkit-animation: spopOut 0.4s ease-in-out;
            animation: spopOut 0.4s ease-in-out; }
  
  .spop--in {
    -webkit-animation: spopIn 0.4s ease-in-out;
            animation: spopIn 0.4s ease-in-out; }
  
  .spop-body {
    padding: 1.4em; }
    .spop-body p {
      margin: 0; }
    .spop-body a {
      color: #fff;
      text-decoration: underline; }
      .spop-body a:hover {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none; }
  
  .spop-title {
    margin-top: 0;
    margin-bottom: 0.25em;
    color: #fff; }
  
  .spop-close {
    position: absolute;
    right: 0;
    top: 0;
    height: 32px;
    width: 32px;
    padding-top: 7px;
    padding-right: 7px;
    font-size: 26px;
    text-align: right;
    line-height: 0.6;
    color: #fff;
    font-weight: 300; }
    .spop-close:hover {
      opacity: 0.7;
      cursor: pointer; }
  
  .spop-icon {
    position: absolute;
    left: 12px;
    top:12px;
    display: inline-block;
    -webkit-animation: spopIn 0.4s 0.4s ease-in-out;
            animation: spopIn 0.4s 0.4s ease-in-out;
            background-color: #ffffff21;
            border-radius: 8px;
            padding: 3px; }
    .spop-icon + .spop-body {
      padding-left: 1.8em; }
  
      .spop-body div{margin-left: 30px;color: #a6a6a6;}
      .spop-body div span{font-weight: 700;text-shadow: 0px 1px 1px #000;color: #fff;}


      .spop-body div text{display: block;}
      @keyframes show {
        0% { opacity: 0; }
        100% { opacity: 1; }
      }


  @media screen and (max-width: 840px){
    .imgcss{height: 24px;}
    .moreselect{ max-height: 400px;overflow-y: auto;}
}