* {box-sizing:border-box;}

.container {
    position: relative;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin:auto;
    width:500px;
    height:300px;
    outline:4px solid black;
    overflow:hidden;
}

#cropSquare {
    position: absolute;
    border: 2px solid #ff0000; /* Red border for the square */
    background-color: rgba(255, 0, 0, 0.1); /* Semi-transparent red background */
}

.image-container {
    z-index:0;
    position: absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

.image-container img {
  max-width: 100%; /* Set the maximum width of the image to 100% of its container */
  max-height: 100%; 
}
.grid-container {
    z-index:1;
    position: absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    /* display: grid;
    grid-template-columns: auto auto auto; */
}
.grid-container table {
    width:100%;
    height:100%;
}

.grid-container table tr td {
  font-size: 30px;
  text-align: center;
  /* border:1px solid #111; */
}
.grid-container table tr:nth-child(1) td:nth-child(1) {
  background-color: rgba(0,0,0, 0.3);
}
.grid-container table tr:nth-child(1) td:nth-child(2) {
  background-color: rgba(0,0,0, 0.3);
}
.grid-container table tr:nth-child(1) td:nth-child(3) {
  background-color: rgba(0,0,0, 0.3);
}

.grid-container table tr:nth-child(2) td:nth-child(1) {
  background-color: rgba(0,0,0, 0.3);
}
.grid-container table tr:nth-child(2) td:nth-child(2) {
  background-color: transparent;
}
.grid-container table tr:nth-child(2) td:nth-child(3) {
  background-color: rgba(0,0,0, 0.3);
}

.grid-container table tr:nth-child(3) td:nth-child(1) {
  background-color: rgba(0,0,0, 0.3);
}
.grid-container table tr:nth-child(3) td:nth-child(2) {
  background-color: rgba(0,0,0, 0.3);
}
.grid-container table tr:nth-child(3) td:nth-child(3) {
  background-color: rgba(0,0,0, 0.3);
}

div.overlay {
    z-index:1;
    position: absolute;
    background-color: rgba(0,0,0, 0.3);
    /* border:1Px dashed green; */
    color:#FFF;
}


div.cropper-container {
    position:relative;
    background-color:rgba(255, 255, 255, 0) !important;  
    width:100%;
    height:100%;  
    border:1px dashed #FFF;
    cursor:move;
}
div.cropper {
    z-index:2;
    position:absolute;
    /* left:33%;
    right:33%;
    bottom:33%;
    top:33%;    */

    background-color:rgba(0, 0, 0, 0.0) !important;  

    border:1px dashed #FFF;
    cursor:move;
}
div.cropper div.handler {
    position: absolute;
    width:10px;
    height:10px;
    /* background-color:#FFF; */
}
div.cropper .hand-corner-top-left {
    top:0px; left:0px;
    cursor:nw-resize;
}
div.cropper .hand-corner-top-right {
    top:0px; right:0px;
    cursor:ne-resize;
}
div.cropper .hand-corner-bottom-left {
    bottom:0px; left:0px;
    cursor:sw-resize;
}
div.cropper .hand-corner-bottom-right {
    bottom:0px; right:0px;
    cursor:se-resize;
}

div.cropper div.bar-handler {
    position: absolute;
    /* background-color:#CCC; */
}
div.cropper div.ns-bar {
    left:10px; right:10px;
    height:10px;
}
div.cropper div.ew-bar {
    top:10px; bottom:10px;
    width:10px;    
}
div.cropper .bar-handler-top {
    top:0px;
    cursor:n-resize;
}
div.cropper .bar-handler-bottom {
    bottom:0px;
    cursor:s-resize;
}
div.cropper .bar-handler-left {
    left:0px;
    cursor:w-resize;
}
div.cropper .bar-handler-right {
    right:0px;
    cursor:e-resize;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  border:1px solid #111;
}


/* Fallback styles for browsers that do not support CSS Grid */
@supports not (display: grid) {
  /* Fallback layout using Flexbox or other techniques */
}

/* Styles for browsers that support CSS Grid */
@supports (display: grid) {
  /* CSS Grid layout styles */
}