/* (c) Copyright 2024 Andre Massow support@vectorizer.io */
#input, #output {margin-top: 1px;color-scheme: only light;}
#input .topheader .card-body, #output .topheader .card-body {padding: 3px;}
#input div.clearfix, #output .clearfix {clear: both;}
#input h1, #output h1 {font-size: 1.6rem;overflow: scroll;}
#input svg.bi, #output svg.bi {width: 16px;height: 16px;}
#input > .well, #output > .well {background: linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 100%);padding: 19px;margin-bottom: 10px;background-color: #f5f5f5;border: 1px solid #e3e3e3;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);box-shadow: inset 0 1px 1px rgba(0,0,0,.05);text-align: center;box-shadow: 2px 2px 0px rgba(0,0,0,0.25);}
#input > .well > img, #output > .well > img {display: none;position: absolute;left: 50%;top: 50px;z-index: 2;}
#input > .well.pending > img, #output > .well.pending > img {display: inline;}
#inputprogressbar, #outputprogressbar {line-height: 14px;}
#input > .well .progress, #output > .well .progress {position: absolute;left: 0px;right: 0px;bottom: 0px;height: 14px;display: none;}
#inputcanvas {image-rendering: auto;image-rendering: optimizespeed;-webkit-transform: translate3d(0,0,0);image-rendering: -webkit-crisp-edges; /* safari */
image-rendering: -moz-crisp-edges;image-rendering: crisp-edges;image-rendering: pixelated; /* chrome */
}
#inputcanvas.edit {cursor: crosshair;}
#input.canvas > .well {position: relative;}
#input.canvas > .well #inputcanvas {display: none;}
#input.canvas > .well #inputcanvas {display: block;}
#input .well > canvas {max-height: 320px;background-image: url("/img/bg.png");}
#input .well.dark > canvas {background-image: url("/img/bg1.png");}
#output .well > svg {max-width: 100%;max-height: 320px;height: auto;width: auto;background-image: url("/img/bg.png");}
#output .well > svg.safari {-webkit-transform: none !important;}
#output .well.dark > svg {background-image: url("/img/bg1.png");}
@media (min-height: 701px) {
#input .well > canvas, #output .well > svg {max-height: 320px;}
#input .well, #output .well {min-height: 333px;}
}
@media (min-height: 901px) {
#input .well > canvas, #output .well > svg {max-height: 520px;}
#input .well, #output .well {min-height: 433px;}
}
#input .card, #output .card {margin-bottom: 5px;}
#input .card-body, #output .card-body {padding-top: 10px;}
#input .nav-tabs h5, #output .nav-tabs h5 {margin: 0px;padding: 0px;padding-top: 0.25rem;}
#output > .well .svgsize {position: absolute;z-index: 4;right: 4px;bottom: 4px;color: black;text-shadow: 0px 0px 1px white;font-size: 9pt;border-radius: 6px;background-color: rgba(245,245,245,0.85);padding: 1px 4px 1px 4px;font-weight: 400;}
#input svg.toggle.bi {position: absolute;top: 2px;right: 2px;cursor: pointer;width: 24px;height: 24px;z-index: 5;opacity: 0.4;}
#input svg.toggle.bi {display: none;width: 32px;height: 32px;background-color: white;padding: 3px;}
#input svg.toggle.bi:hover {opacity: 0.9;}
#input .well svg.toggle.bi.on {display: inline;}
#output button.xray, #output button.layers  {display: none;}
#output > .well.minheight {min-height: 450px !important;}
.well.processing {position: relative;overflow: hidden;pointer-events: none;opacity: 0.85;}
.well.processing::after {content: "";position: absolute;top: 0;left: -150%;width: 150%;height: 100%;background: linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0) 100%
);animation: wellShimmer 1.2s infinite;}
.well.processing {animation: wellPulse 2s ease-in-out infinite;}
@keyframes wellShimmer {0%   { left: -150%; }
100% { left: 150%; }
}
@keyframes wellPulse {0%   { box-shadow: 2px 2px 0px rgba(0,0,0,0.25); }
50%  { box-shadow: 4px 4px 6px rgba(0,0,0,0.35); }
100% { box-shadow: 2px 2px 0px rgba(0,0,0,0.25); }
}
.imgbuttons .imgbutton {background-color: white;border: none;width: 100%;padding-top: 4px;}
.imgbuttons.models .imgbutton:hover, .imgbuttons.algorithms .imgbutton:hover {background-color: #f0f0f0;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);}
.imgbuttons .active .imgbutton, .imgbuttons .pending .imgbutton {background-color: #f0f0f0;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);}
.imgbuttons .imgbutton img {width: 26px;display: inline-block;}
.imgbuttons .imgbutton small {color: gray;font-size: 9pt;}
.imgbuttons .imgbutton .active small {color: white;}
.imgbuttons.row {margin-left: 0px;margin-right: 0px;}
.imgbuttons.models div.active, .imgbuttons.algorithms div.active {border-bottom: 2px solid #337ab7;}
.imgbuttons .pending {border-bottom: 2px solid #f8f8f8;}
.imgbuttons .pending .imgbutton {background: white;background-image: url(/img/loading.gif);background-position: top right;background-repeat: no-repeat;}
div.row.imgbuttons > div {padding: 1px;}
button.imgbutton span.tooltip, div.imgbutton button > span.tooltip {position: absolute;top: 29px;right: 5px;width: 0px;height: 0px;border: 1px solid silver;z-index: 342;background-color: white;box-shadow: 4px 4px 4px rgba(0,0,0,0.5);border-radius: 5px;display: block;font-size: 0.9em;padding: 10px;text-align: left;opacity: 0;visibility: hidden;overflow: scroll;}
button.imgbutton.showtooltip span, div.imgbutton button.showtooltip > span.tooltip {width: 420px;height: auto;display: block;opacity: 1;visibility: visible;color: black;font-size: 0.9em;overflow: visible;}
.imgbuttons .legacy {display: none;}
.imgbuttons br.legacy {clear: both;}
.imgbuttons .btn-group > .btn.active {font-weight: bold;}
#blurimgbtn {display: none;}
.imgbuttons .detailheader {display: block;text-align: center;font-weight: 600;font-size: 0.9em;background-color: #f0f0f0;padding: 4px;margin: -4px;margin-bottom: 10px;}
#algorithm .btn-group {margin-bottom: 1px;}
#algorithm .imgbuttons .imgbutton button.btn-outline-secondary:hover small {color: white;}
#algorithm .imgbuttons .imgbutton button.btn-outline-secondary:hover {background-color: #c0e1ff;}
.imgbuttons .imgbutton button.btn-outline-secondary.active {color: #337ab7;background-color: #c8e5ff;border-top: 2px solid #337ab7;margin-top: -1px;}
.imgbuttons .imgbutton button.btn-outline-secondary.active small, .imgbuttons .imgbutton button.btn-outline-secondary.active strong {color: #337ab7;}
#algorithm .imgbuttons .imgbutton button.btn-outline-secondary img {opacity: 0.8;}
#algorithm .imgbuttons .imgbutton button.btn-outline-secondary.active img {opacity: 1;}
#model .dropdown {display: none;}
#model .active > .dropdown {display: block;}
span.colorpickbg {display: inline-block;width: 20px;height: 20px;background-color: black;vertical-align: top;margin-right: 3px;box-shadow: 1px 1px 1px rgba(0,0,0,0.1);}
.colorpick {min-width: 135px;padding: 5px;}
.colorpick .hue {background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);height: 16px;border: 1px solid silver;width: 128px;margin: 0px auto;position: relative;margin-bottom: 3px;}
.colorpick .gr {width: 128px;height: 128px;border: 1px solid silver;margin: 0px auto;position: relative;margin-bottom: 8px;}
.colorpick .gr .sat, .colorpick .gr .val{width: 128px;height: 128px;margin: 0px;padding: 0px;}
.colorpick .gr > .handle, .colorpick .hue > .handle {position: absolute;left: 0px;top: 0px;width: 12px;height: 12px;border-radius: 12px;border: 2px solid white;box-shadow: 1px 1px 1px black;}
.colorpick .m {padding: 14px;padding-top: 4px;cursor: pointer;}
.colorpick .r input {flex: none;}
.colorpicker select {font-weight: bold;font-weight: 600;}
.colorpick .quickselect  {text-align: left;line-height: 1em;margin-bottom: 4px;}
.colorpick .quickselect > div{width: 18px;height: 18px;display: inline-block;box-shadow: 1px 1px 1px rgba(0,0,0,0.2);margin: 2px;cursor: pointer;}
#progressbars {height: 4px;position: fixed;visibility: hidden;top: 0px;left: 0px;right: 0px;width: 100%;}
#progressbars .progress{background-color: transparent;position: absolute;top: 0px;left: 0px;right: 0px;height: 10px;z-index: 3;border-radius: 0px;}
#progressbars .progress-bar {visibility: hidden;height: 15px;min-height: 10px;font-size: 7pt;transition: none;}
#palette {min-height: 130px;}
#palette .ui-slider {margin-top: 3px;margin-bottom: 3px;}
#palette .ui-slider .ui-slider-range.black {background-color: black;}
#palette .ui-slider .ui-slider-range.white {background-color: white;}
#palette div.histogram {display: flex;clear: both;margin-top: 5px;min-height: 100px;padding-top: 4px;padding: 2px;padding-bottom: 1px;background-image: url("/img/bg.png");}
#palette div.histogramgrad {background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);height: 10px;margin-left: 1px;margin-right: 1px;}
#palette div.histogram > span {flex-grow: 1;display: inline-block;background-color: black;}
#palette div.histogram > span.b {background-color: #e3f0fd;}
#palette div.histogram > span.w {background-color: #ffffed;background-color: #e5f2ff;;}
#palette div.grays {display: flex;clear: both;margin-top: 3px;}
#palette div.palette {display: flex;clear: both;cursor: pointer;}
#palette div.palette span.num {word-wrap: normal;display: inline-block;flex-grow: 20;min-width: 25px;box-shadow: none;font-size: 10pt;text-align: right;padding-right: 3px;position: relative;top: -1px;}
#palette div.palette > input {flex-grow: 0;margin-right: 4px;margin-top: 3px;cursor: pointer;max-width: 35px;}
#palette div.palette > span {display: inline-block;height: 18px;border: 0px;flex-grow: 10;margin-right: 1px;max-width: 13px;border-radius: 0px;margin-bottom: 1px;box-shadow: 1px 1px 0px #dfdfdf;}
#palette div.grays > span {display: inline-block;height: 20px;border: 0px;flex-grow: 10;margin: 0px;}
#palettes label {display: block;text-align: left;cursor: pointer;}
#palette div.slider {margin-top: 10px;margin-bottom: 12px;cursor: pointer;margin-left: 1px;margin-right: 1px;}
#palette .black.ui-slider-horizontal .ui-slider-range {background-color: black;}
#palette .white.ui-slider-horizontal .ui-slider-range {background-color: white;}
#palette .ui-widget.ui-widget-content {background-color: #f6f6f6;}
#palette .black .ui-slider-handle {background-color: #000;cursor: ew-resize;box-shadow: 0px 0px 1px #2b2b2b;}
#palette .white .ui-slider-handle {background-color: white;cursor: ew-resize;box-shadow: 0px 0px 1px #2b2b2b;}
#palette .ui-slider-handle::after {position: absolute;content: "";width: 0px;height: 0px;border-left: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 4px solid #000;top: -4px;left: 5px;}
#palette .ui-slider-handle2::after {content: '';width: 9px;height: 5px;border-top: 0px solid transparent;border-left: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 5px solid #c5c5c5;position: relative;top: -17px;z-index: 4;display: inline-block;left: 4px;}
#palette input[type=range] {width: 100%;margin-left: -3px;margin-right: -3px;width: calc( 100% + 6px );}
#palette .sliderctrls {display: flex;}
#palette .sliderctrls input {flex-grow: 1;text-align: right;flex-shrink: 1;min-width: 50px;}
#palettesavectrls {display: none;}
#palettes.pending {background-image: url(/img/loading.gif);background-repeat: no-repeat;background-position: center 10%;}
#palettes.pending > div {display: none;}
#editpalettebtn {padding: .2rem .4rem;}
#editpalettebtn svg.bi {width: 15px;height: 15px;}
#editpalettemodal img.source, #editpalettemodal canvas.preview {image-rendering: auto;image-rendering: pixelated;-webkit-transform: translate3d(0,0,0);}
#editpalettemodal .palette {display: flex;clear: both;}
#editpalettemodal .palette > input{flex-grow: 0;margin-right: 3px;max-width: 24px;}
#editpalettemodal .palette > span{display: inline-block;height: 15px;border: 0px;flex-grow: 10;margin: 2px;max-width: 15px;border-radius: 20px;box-shadow: 0px 0px 2px rgba(0,0,0,0.3);}
#editpalettemodal .paletteentries {display: grid;grid-template-rows: 60px 60px 60px 60px;grid-template-columns: repeat(8, 1fr);}
#editpalettemodal .paletteentries > div {flex-grow: 10;padding: 2px;text-align: center;font-size: 8pt;min-height: 45px;cursor: pointer;}
#editpalettemodal .paletteentries > div > div {border-radius: 3px;height: 40px;border-radius: 33px;box-shadow: 0px 0px 2px rgba(0,0,0,0.3);position: relative;}
#editpalettemodal .paletteentries button {display: none;background: white;padding: 2px;position: absolute;bottom: -6px;left: 8px;height: 26px;width: 26px;line-height: 20px;border: 1px solid silver;}
#editpalettemodal .paletteentries div:hover button {display: inline;}
#editpalettemodal .paletteentries button:hover {background: #eee;}
#editpalettemodal .paletteentries button svg.bi {width: 20px;height: 20px;vertical-align: text-top;}
#editpalettemodal .extrapalette {display: flex;}
#editpalettemodal .extrapalette > div {flex-grow: 10;height: 15px;max-width: 15px;margin: 2px;box-shadow: 0px 0px 2px rgba(0,0,0,0.3);border-radius: 20px;}
#editpalettemodal img.preview {background-image: url("/img/bg.png");}
#editpalettemodal svg.preview {display: none;}
#editpalettemodal label {cursor: pointer;}
#input .editctrls {display: none;margin-top: -4px;}
#input .editpalette {display: none;width: 100%;position: relative;}
#input .editpalette > span.c {flex-grow: 1;margin: 1px;margin-top: 1px;margin-bottom: 1px;box-shadow: 2px 2px 2px rgba(0,0,0,0.1);border: 1px solid silver;margin-bottom: 5px;margin-top: 5px;height: 20px;cursor: pointer;}
#input .editpalette > span.transparent {background-image: url(/img/bg.png);background-repeat: repeat;background-size: 10px 10px;}
#input .editpalette > span.unmask {background-image: url(/img/bg1.png);background-repeat: repeat;background-size: 10px 10px;}
#input .editpalette > span.active {height: 25px;position: relative;top: -3px;border: 1px solid black;}
#palettestab .showmorebtn {display: none;}
#gradients.pending {background-image: url(/img/loading.gif);background-repeat: no-repeat;background-position: center 10%;}
#gradients ul {list-style: none;padding: 0px;margin: 0px;}
#gradients ul li {display: block;padding: 4px;margin: 0px;}
#gradients ul li label {cursor: pointer;margin: 0px;}
#gradients ul li:hover {background-color: #fefefe;}
#gradients button.delete {margin-left: 3px;}
#gradients ul li span.grad {display: block;height: 30px;width: 30%;max-width: 110px;float: right;box-shadow: 1px 1px 3px rgba(0,0,0,0.2);}
#gradients ul li span.grad.radial {border-radius: 100px;}
#gradients ul li img {max-height: 26px;margin-right: 6px;box-shadow: 1px 1px 3px rgba(0,0,0,0.2);}
#gradients ul li button {margin-left: 4px;float: right;opacity: 0.5;}
#gradients ul li button:hover {opacity: 1;}
#gradients ul li button svg.bi {height: 15px;width: 15px;}
#gradients button svg.bi {width: 21px;height: 21px;}
#gradientmodal .card {min-height: 550px;max-height: 550px;}
#gradientmodal .card svg {background-image: url(/img/bg.png);}
#gradienteditmodal div.steps input {width: 100px;text-align: right;margin-right: 3px;}
#gradienteditmodal div.steps div.colorpicker {margin-left: 20px;margin-right: 20px;}
#gradienteditmodal .gradientpreview {width: 100%;max-width: 100px;margin: 0px auto;height: 100px;margin: 10px;display: inline-block;margin-top: 25px;}
#gradienteditmodal button.delete {opacity: 0.5;}
#gradienteditmodal button.delete svg.bi{width: 16px;height: 16px;}
#gradienteditmodal button.delete:hover {opacity: 1;}
#gradienteditmodal div.position strong {width: 90px;display: inline-block;}
#gradienteditmodal div.position input {width: 90px;}
#semanticsegmentation.pending {background-image: url(/img/loading.gif);background-repeat: no-repeat;background-position: center 10%;}
#semanticsegmentationtab .savebtns {display: none;}
#colors .groups {padding-left: 10px;padding-right: 10px;text-align: center;min-height: 170px;padding-bottom: 10px;}
#colors .groups .pc {display: block;position: relative;display: inline-block;background-color: white;border: 1px solid #f0f0f0;border-radius: 1000px;vertical-align: middle;margin: 0px 3px 2px 3px;cursor: pointer;cursor: ew-resize;}
#colors .groups .pc.transparent {background-image: url(/img/bg.png);}
#colors .groups .pc.transparent > span {opacity: 1;}
#colors .groups .pc > input {position: absolute;z-index: 10;left: 48%;left: calc( 50% - 7px );top: 1px;cursor: pointer;}
#colors .groups .pc input:checked {display: none;}
#colors .groups .pc {opacity: 1;}
#colors .groups .pc::after {content: "X";z-index: 5;position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.5;font-family: arial;color: black;text-align: center;display: block;font-size: 40px;text-shadow: 0px 0px 2px white;filter: invert(1);}
#colors .groups .pc.on {opacity: 1;}
#colors .groups .pc.on::after {content: "";width: 0px;height: 0px;opacity: 0;}
#colors .groups .pc.selected {position: relative;margin-right: 4px;}
#colors .groups .pc.selected::before {content: " ";position: absolute;bottom: -4px;left: -4px;right: -4px;background-color: transparent;border-radius: 1000px;top: -4px;border: 1px dashed #aaa;}
#colors .groups .pc.selected.dark::before {border: 1px dashed white;}
#colors .groups .pc:hover > input {display: inline;}
#colors .groups .pc.ui-droppable-hover {border: 1px dashed black;}
#colors .groups .cc > input {position: absolute;z-index: 10;left: 48%;top: 48%;left: calc( 50% - 7px );top: calc( 50% - 7px );cursor: pointer;}
#colors .groups .cc input:checked {display: none;}
#colors .groups .cc:hover > input {display: inline;}
#colors .groups.ui-droppable-hover {border: 1px dashed black;}
#colors .groups.ui-droppable-hover.overcc {border: 1px dashed white;}
#colors .groups .cc {display: inline-block;position: absolute;background-color: rgba(0,0,0,0.2);border: 1px solid transparent;border-radius: 1000px;box-shadow: 1px 1px 1px rgba(0,0,0,0.01);cursor: move;}
#colors .groups .cc.light {border: 1px solid rgba(0,0,0,0.1);box-shadow: 2px 2px 2px rgba(0,0,0,0.05);}
#colors .groups .highlight {box-shadow: 2px 2px 6px rgba(0,0,0,0.35) !important;border: 1px dashed silver !important;}
#colors .groups.highlight {border: 1px dashed silver !important;}
#colors .groups .ui-draggable-dragging {z-index: 1000;opacity: 0.5;cursor: move;border: 1px solid rgab(0,0,0,0.4);}
#colors .groups .pc.dark .cc {box-shadow: 0px 0px 1px rgb(255, 255, 255);}
#colors .fillcolorbtns, #colors .strokecolorbtns{display: inline-block;}
#colors .circleprops {display: none;}
#colors .groups.pending {background-image: url(/img/loading.gif);background-repeat: no-repeat;background-position: center 10%;}
#colors .groups.pending > div {display: none;}
#colors .circles{position: relative;min-height: 120px;}
#colors .circles .dragndrop {background-image: url(/img/dragndrop.png);background-repeat: no-repeat;background-position: 35% bottom;}
.colorssortbybtns button.dropdown-item {display: flex;}
.colorssortbybtns button.dropdown-item > span {height: 20px;min-width: 1px;flex-grow: 1;box-shadow: 0px 0px 2px rgba(0,0,0,0.3);max-width: 12px;}
.colorssortbybtns button.dropdown-item {padding-left: 0.5em;padding-right: 0.5em;}
#colors div.circlefill, #colors div.circlestroke {display: inline-block;}
#cropmodal .scrollcontainer {overflow: scroll;text-align: center;}
#cropmodal .cropcontainer {position: relative;padding: 20px;cursor: crosshair;display: inline-block;}
#cropmodal .cropcontainer > img {border: 1px solid #f0f0f0;max-height: 74vh;}
#cropmodal .cropcontainer > div {position: absolute;left: 0px;top: 0px;width: 1px;height: 1px;z-index: 3;border: 1px solid black;background: rgba(33, 151, 255, 0.1);}
#cropmodal .cropcontainer > div::before {content: ' ';display: block;width: 12px;height: 12px;left: -6px;top: -6px;background-color: rgba(82, 139, 247, 0.5);position: absolute;}
#cropmodal .cropcontainer > div::after {content: ' ';display: block;width: 12px;height: 12px;right: -6px;bottom: -6px;background-color: rgba(82, 139, 247, 0.5);position: absolute;}
#stlmodal .extrudes > div {padding: 5px;}
#stlmodal .extrudes .color {width: 36px;height: 36px;display: inline-block;border: 1px solid silver;margin-right: 15px;}
#uploaddndmodal .modal-dialog {border: 2px dashed #c8c8c8;font-size: 18pt;border-radius: 7px;}
#uploaddndmodal .modal-dialog svg.bi {width: 48px;height: 48px;}
#toleranceslider {position: absolute;right: 0px;top: 8px;height: 140px;cursor: pointer;display: none;}
#toleranceslider .ui-slider-handle {cursor: ns-resize;}
#roundness svg.bi {width: 24px !important;height: 19px !important;}
#roundness .dropdown-item svg.bi {width: 64px !important;height: 32px !important;}
.nav-tabs {margin-bottom: 10px;margin-left: -9px;margin-right: -9px;}
.tab {display: none;}
.tab.active {display: block;}
.tabs-sm li span.nav-link {font-size: 0.8em;padding: 2px 4px 2px 4px;}
#layers ol {padding-left: 20px;}
#layers .stacks > div {border: 1px solid silver;}
#layers .stacks div {box-shadow: rgba(0,0,0,0.2);position: relative;}
#layers .ui-sortable-handle {cursor: ns-resize;}
.nav-link {cursor: pointer;}
.nav-tabs .nav-item.changed > span {font-weight: 500;border-bottom: 1px solid #337ab7;margin-bottom: -2px;}
.nav-tabs .nav-item.changed > span.active {font-weight: 500;border-bottom: 1px solid white;margin-bottom: 0px;}
.circles {text-align: left;padding-top: 5px;}
.circles .layer {margin: 3px;border: 1px solid #f0f0f0;padding: 5px;text-align: center;position: relative;background-color: white;box-shadow: 1px 1px 2px rgba(0,0,0,0.1);margin-bottom: 4px;}
.circles .layer label {font-size: 10pt;display: inline-block;min-width: 80px;position: absolute;left: 2px;top: 2px;}
.circles .group {padding: 3px;text-align: center;}
.circles .group > div {border: 1px solid silver;display: inline-block;border-radius: 1000px;}
#optionsoutputsize.pending {background-image: url(/img/loading.gif);background-repeat: no-repeat;background-position: top left;}
#optionsoutputsize .default {cursor: pointer;}
#optionsoutputsize .default:hover {text-decoration: underline;}
#downloadbtns, #thumbup, #thumbdown {position: relative;top: -5px;}
#downloadbtns .dropdown-item span {position: relative;top: -2px;margin-left: 2px;margin-right: 2px;}
#downloadbtns span.type > svg {margin: 3px;vertical-align: text-top;}
#downloadbtns .dropdown-menu a > strong, #downloadbtns .dropdown-menu button > strong {font-weight: 500;margin-right: 1em;}
#downloadbtns  .restrictedformatsinfo {display: none;font-size: 10pt;color: #444;}
a#downloadbtn > svg.bi {position: relative;top: 0px;width: 20px;height: 20px;margin-right: 1px;}
a#downloadbtn > .badge.paid {position: absolute;top: -9px;right: -6px;z-index: 1000;display: none;}
#downloadbtns img.wait {display: none;}
#downloadbtns.downloading img.wait {display: inline;}
a#downloadbtn > .badge.unpaid {position: absolute;top: -9px;right: -6px;z-index: 1000;}
.getquote {position: relative;top: -5px;margin-right: 2px;}
#helpchatbtn {position: relative;top: -5px;}
#freecredits .btn {margin: 3px;}
#freecredits .error {display: none;}
#freecredits .nofreecredits {display: none;}
#freecredits .paid{display: none;}
#freecredits {min-height: 80px;}
#freecredits .multi {display: none;}
#freecredits .pricingtable h4 {font-size: 1.35em;}
#pricinginfo {display: none;}
#downloadbtns .btn-secondary {background-color: #337ab7;border-color: #2b74b3;color: #ffffff;opacity: .75;}
#downloadbtns .btn-secondary:hover {opacity: .85;}
.svgsize.calculated {display: none;font-weight: 600 !important;}
.pulse-button {box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);transform: scale(1);animation: pulse 2s infinite;}
.pulse-button:hover {animation: none;}
.pulse-button3 {box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);transform: scale(1);animation: pulse 2s infinite;animation-iteration-count: 3;}
.pulse-button3:hover {animation: none;}
@keyframes pulse {0% {transform: scale(0.95);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);}
70% {transform: scale(1);box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}
100% {transform: scale(0.95);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
}
html body.editor div.container.main div.row div#output div#downloadbtns div.dropdown-menu.show a.dropdown-item.show {padding: 2px 2px 2px 4px;font-size: 0.9em;}
#inquirybtn{position: relative;top: -5px;float: right;margin-right: 4px;}
#inquirybtn > svg.bi {width: 22px;height: 22px;}
@media (max-width:1210px) {
#inquirybtn {padding-left: 3px;padding-right: 3px;}
#inquirybtn > svg.bi {display: none;}
}
#quality btn-group-sm > .btn, .btn-sm, #palette btn-group-sm > .btn, .btn-sm {padding: .2rem .4rem;}
#qualitytransparencytabbtn {display: none;}
#qualitytransparencytab.pending {background-image: url(/img/loading.gif);background-position: top left;background-repeat: no-repeat;}
#wizardbtn {position: relative;top: -5px;}
#wizardbtn img.bi {width: 28px;height: 28px;position: absolute;left: 8px;top: 3px;}
#wizardbtn span {display: inline-block;width: 20px;height: 16px;position: realtive;}
#wizardmodal .step {display: none;}
#wizardmodal .step.active {display: block;}
#wizardmodal .step hr {margin: 5px;}
#wizardmodal .step label.btn {margin: 0px;width: 50%;text-align: left;}
#wizardmodal label {font-weight: bold;}
#wizardmodal small {font-size: 0.9;}
#wizardmodal div.step1 img {cursor: pointer;}
#wizardmodal div.step button:hover {font-weight: bold;}
#paintbynumbers .rgbcolors {display: grid;grid-template-columns: repeat(3, 1fr);grid-column-gap: 8px;grid-row-gap: 8px;}
#paintbynumbers .rgbcolors strong {display: inline-block;min-width: 25px;min-width: 30px;text-align: right;}
#paintbynumbers .rgbcolors div {display: inline-block;}
#paintbynumbers .rgbcolors span {display: inline-block;width: 20px;height: 20px;position: relative;box-shadow: 1px 1px 1px rgba(0,0,0,0.25);top: 3px;}
#uploads {display: none;margin-bottom: 10px;}
#uploads > div {max-width: 240px;max-height: 120px;padding: 5px;text-align: center;margin: 5px;}
#uploads > div.active {border-bottom: 2px solid #1887ff;background: #f8f8f8;}
#uploads > div img {box-shadow: 1px 1px 3px rgba(0,0,0,0.1);max-width: 230px;max-height: 90px;}
#uploads > div span {display: block;font-size: 9pt;}
#uploads a {text-decoration: none;color: #444;}
#uploads a:hover {text-decoration: underline;}
div.ht {min-height: 92px;width: 100%;margin-bottom: 15px;display: none;}
div.vl, div.vr {display: none;position: absolute;top: 120px;left: 3px;width: 1px;height: 600px;}
div.vr {left: auto;right: 15px;}
@media print {
#outputsvg {display: none !important;}
}
#textstab ul {list-style: none;margin: 0px;}
#textstab ul li .edit {display: none;}
#textstab ul li:hover .edit {display: inline;}
#masterpalette {display: none;}
#masterpalettecolors span{display: inline-block;width: 12px;height: 20px;box-shadow: 1px 1px 1px rgba(0,0,0,0.1);margin: 1px;}
#downloadwindowsinfo {display: none;}
#downloadsinfo {display: none;}
.tuttip {position: fixed;z-index: 43321;left: -500px;top: -500px;background-color: #337ab7;padding: 10px;padding-right: 10px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0,0,0,0.3);position: absolute;padding-right: 32px;border: 1px solid #3f81bb;color: white;display: none;opacity: 0.96;}
.tuttip:hover {opacity: 1;}
.tuttip .tuttip-content {padding-right: 3px;}
.tuttip .tuttip-content p {margin: 0px;padding: 0px;font-size: 0.95;}
.tuttip .close-btn {position: absolute;top: 2px;right: 5px;background-color: transparent;border: none;font-size: 20px;color: #fcfcfc;cursor: pointer;font-weight: normal;}
.tuttip .close-btn:hover{top: 3px;right: 4px;font-weight: bold;color: white;}
.tuttip.bottom .tuttip-arrow {width: 0;height: 0;border-left: 9px solid transparent;border-right: 9px solid transparent;border-top: 9px solid #3f81bb;position: absolute;bottom: -9px;left: 50%;}
.tuttip.top .tuttip-arrow {width: 0;height: 0;border-left: 9px solid transparent;border-right: 9px solid transparent;border-bottom: 9px solid #3f81bb;position: absolute;top: -9px;left: 50%;}
#manualsegmenationmodal .modal-content {position: fixed;max-width: 100%;width: auto;height: auto;left: 0px;right: 0px;top: 0px;bottom: 0px;}
#manualsegmenationmodal .modal-dialog {max-width: 100%;}
#manualsegmenationmodal .well {background-color: #f0f0f0;border: 1px solid silver;border-radius: 10px;height: 90vh;height: calc( 90vh - 90px );text-align: center;}
#manualsegmenationmodal .well > canvas {background-image: url("/img/bg.png");image-rendering: auto;image-rendering: optimizespeed;-webkit-transform: translate3d(0,0,0);image-rendering: -webkit-crisp-edges; /* safari */
image-rendering: -moz-crisp-edges;image-rendering: crisp-edges;image-rendering: pixelated; /* chrome */
display: inline-block;}
#manualsegmenationmodal div.list label span.hex {font-family: monospace;}
#manualsegmenationmodal div.list label span.color {display: inline-block;width: 20px;height: 20px;border: 1px solid silver;margin-left: 5px;margin-right: 5px;}
#requesthelpbtn {.checked {display: none;}
}
#requesthelpbtn.checked {.checked {display: inline;}
.unchecked {display: none;}
}
#requesthelpbtn  {background: linear-gradient(135deg, #3a88cf 0%, #337ab7 40%, #2c6aa0 100%);color: #fff;border: none;border-radius: 6px;padding: 7px 18px;font-weight: 600;letter-spacing: 0.2px;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);transition: all 0.25s ease;}
#requesthelpbtn:hover {background: linear-gradient(135deg, #49a0ff 0%, #3a88cf 40%, #337ab7 100%);transform: translateY(1px);box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);color: #fff;}
.dropdown-menu {box-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
#vectorizebtn {position: relative;top: -5px;margin-right: 5px;display: none;}
#minarea .dropdown-menu {min-width: 20rem;}
.strikethrough {text-decoration: line-through;}
body.largemode div.container.main {max-width: 10000px;}
#showlargemode {margin-right: 10px;margin-top: 5px;padding: 0px 6px 4px 6px;display: none;}
@media only screen and (min-width: 1020px) {
#showlargemode {display: inline;}
}
#showlargemode svg.bi {width: 14px;height: 14px;}
body.largemode #showlargemode {display: none;}
.hidden button {display: none;}