/*NEW STYPES*/
.navbar {
  background-color: #003366;
}

.navbar-nav .nav-link {
  text-transform: uppercase;
  color: #ffffff;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: #ffcc00;
}

.hero-btn, .cta-btn, .btn {
  background-color: #0066cc;
  color: #ffffff;
  border: none;
}

.hero-btn:hover, .cta-btn:hover, .btn:hover {
  background-color: #004c99;
  color: #ffffff;
}

.card {
  background-color: #ffffff;
  color: #212529;
  padding: 1rem;
  border: 1px solid #dee2e6;
}

.card h3,
.card p {
  color: #212529;
}

.breadcrumb-item a,
.breadcrumb-item.active {
  color: #333333;
}



/*END*/



    /*body {
      font-family: Arial, sans-serif;
      background: #f0f0f0;
      margin: 0;
      padding: 20px;
    }*/
    .container {
      display: flex;
      gap: 20px;
    }
    .editor {
      position: relative;
      border: 2px solid #ccc;
      background: #fff;
      overflow: hidden;
    }
    canvas {
      max-width: 100%;
      max-height: 70vh;
    }
   /* canvas {
      width: 300px;
      height: 300px;
          }*/

    /*NEW*/
    .crop-box {
        display: none;
        position: absolute;
        border: 2px dashed #00f;
        cursor: move;
            }
.preview {
  display: none;
  max-width: 300px;
  border: 1px solid #999;
  background: #fff;
  padding: 10px;
}


    /*NEW*/
    .handle {
      position: absolute;
      width: 10px;
      height: 10px;
      background: #fff;
      border: 2px solid #000;
      border-radius: 50%;
    }
    .handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
    .handle.n  { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
    .handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
    .handle.w  { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }
    .handle.e  { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }
    .handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
    .handle.s  { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
    .handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
  
    #infoBox {
      margin-top: 10px;
      font-family: monospace;
      background: #fff;
      padding: 6px 10px;
      border: 1px solid #ccc;
      display: inline-block;
    }