body {
     background: #f8f9fa;
 }

 #palette {
     gap: 10px;
     padding: 10px;
     background: #f0f0f0;
     border-radius: 8px;
 }

 .swatch {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     border: 1px solid black;
     transition: border 0.2s ease;
     padding: 5px;
     cursor:pointer;
     /*cursor: url('//projektika.org/template/img/brush.png') 4 32, pointer;*/
 }

 .swatch.selected {
     border: 3px solid black;
 }

 .swatch:hover {
     border: 2px solid #535353;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.55);
 }

 .swatch-group {
     min-width: 50px;
     align-items: center;
 }

 #svg-container svg {
     width: 100%;
     height: auto !important;
     max-height: 957px;
     max-width: 100%;
     border: 2px solid #595959;
     background-color: black;
     display: block;
 }

 #svg-container svg path,
 #svg-container svg rect,
 #svg-container svg circle,
 #svg-container svg polygon {
     stroke: black;
     stroke-width: 1.5;
     fill: white;
     cursor: pointer;
     transition: fill 0.3s;
 }

 #svg-container {
     background-color: #ffffff;
     width: 100%;
     height: auto;
     display: block;
 }

 #svg-container svg path:hover,
 #svg-container svg rect:hover,
 #svg-container svg circle:hover,
 #svg-container svg polygon:hover {
     filter: brightness(0.95);
 }

 #customColorPreview {
     background-color: red;
     border-radius: 50%;
 }


 .thumbnail {
     filter: invert(1);
     background-color: #272727;
 }

 #probkaKoloru {
     width: 100% !important;
     height: 25px !important;
     border: 1px solid #505050;
 }

 @media (max-width: 768px) {

     .swatch-group {
         width: 100%;
         justify-content: center;
         margin-bottom: 5px;
     }

     .swatch-group small {
         width: 100%;
         text-align: center;
         margin-bottom: 8px;
     }

 }

 .color-picker {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     border: 2px solid #ccc;
     cursor: pointer;
     margin: 2px;
     padding: 0;
     background: none;
     transition: all 0.2s ease;
     overflow: hidden;
 }

 .color-picker-wrapper {
     position: relative;
     display: inline-block;
     margin: 2px;
 }

 .color-picker-wrapper .fa-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #ffffff;
     font-size: 12px;
     pointer-events: none;
     z-index: 1;
     text-shadow: 0 0 3px white, 0 0 6px white;
 }


 .color-picker:hover {
     transform: scale(1.1);
     border-color: #333;
 }

 .color-picker.selected {
     border-color: #000;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }

 /* Ukrycie domyślnego wyglądu */
 .color-picker::-webkit-color-swatch-wrapper {
     padding: 0;
     border: none;
     border-radius: 50%;
 }

 .color-picker::-webkit-color-swatch {
     border: none;
     border-radius: 50%;
 }

 .color-picker::-moz-color-swatch {
     border: none;
     border-radius: 50%;
 }
  .custom-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-image: url('//projektika.org/hand-heart.png');
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  vertical-align: middle;

}

#signatureOverlay {
    text-shadow: 1px 1px 2px white, -1px -1px 2px white,
                 1px -1px 2px white, -1px 1px 2px white;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    position: absolute; 
    bottom: 10px; 
    right: 5%;
    font-size: 15px; 
    font-weight: bold; 
    color: black; 
    pointer-events: none;
    user-select: none; 
    max-width: 90%;
}

 @media (max-width: 992px) {
     #palette {
         padding: 1rem;
     }

     .color-picker {
         width: 30px;
         height: 30px;
     }

     #palette .swatch {
         width: 30px !important;
         height: 30px !important;
         padding: 0px !important;
     }

     #palette .swatch-group {
         min-width: 50px !important;
     }

     .hideSmall {
         display: none;
     }

     .d-flex.top-0 {
         flex-wrap: wrap;
         justify-content: center;
     }
 }


  .smallMargin {
     margin-bottom: 0px !important;
 }

 @media (max-width: 1000px) {
     .smallMargin {
         margin-bottom: 10px !important;
         padding-right: 30px !important;
     }
 }