/* July 03, 2024 */


/* s.Box-Sizing */
.grid_line_container, .grid_line_container span {
    box-sizing: content-box;
}
.vertical_line, .horizontal_line {
    pointer-events: none;
    box-sizing: content-box;
}

/* ul li { box-sizing: content-box; } */
    /* 💥💥💥💥 Is this really needed? */ 
        /* This was another thing that was messing up the 'canvas-line-maker'. */


/*  =======  =======  =======  =======  */

/*  =======  =======  =======  =======  */

/*  =======  =======  =======  =======  */

/*  =======  =======  =======  =======  */

/* Img Grid Display */

/* Img Grid Display */

/* Img Grid Display */


/* Img Grid Display [s.ImgGridDisplay] */
/* #img_grid_display {} */
#img_grid_display {
    /* float: unset; */
    /* float: left; */

    display: flex;
    justify-content: center;
    align-items: center;
    /* align-items: flex-start; */

    width: 100%;
    height: 100%;

    margin-bottom: 0;
    padding: 0;

    /* height: calc(100vh / 100); */

    overflow-x: hidden;
}
/* #img_grid_display {} */
/* #img_grid_display {} */


/* #fileList {} */

#image_area {position: relative;}
#image_area { box-sizing: border-box; }


/* [s.Ul] ul.# .Img List Class .Img Containers */
#image_area ul {
    background: transparent;

    /* border-top: 1px dashed black;
    border-bottom: 1px dashed black; */
    /* margin-bottom: 2rem; */
    /* background-color: pink; */

    display: flex;
    justify-content: center;
    /* justify-content: flex-start; */
    align-items: center;
    align-items: flex-start;

    margin: auto;
    /* margin-top: calc(auto - 19px); */
    width: fit-content;

    /* overflow-Y: hidden; */
    /* overflow-Y: scroll; */
    overflow-x: hidden;
}


.img_list_item {
    position: relative;
    /* flex-wrap: wrap; */ /* 💥💥💥💥 Is this really needed? */ 
        /* This was what was messing up the 'canvas-line-maker'. */

    background-color: #333;
    z-index: 16;

    /* What was in the "grid_tools-uploader.js" */
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;

    /* width: auto; */
    /* height: auto; */
    width: 100%;
    height: 100%;

    /* max-height: 100%; */

    overflow-x: hidden;
}


/* .img_list_item { background-color: lightcoral; } */





.canvas_mask {
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.canvas_mask {
    z-index: 600;
    background: goldenrod;
    background: inherit;
    background: rgb(173, 255, 47, 0.6);
    background: rgb(173, 255, 47, 1);
    background: #E1FFB5;
    top: 100%;
    left: 0;
    width: 100%;
    display: inline-block;
}





#fileList {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
#image_area {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
/* #first_img_canvas_top {
    z-index: 700;
    height: 16px;
} */

#image_area ul {
    background: transparent;
    /* background: #E1FFB5; */ /* UNCOMMENT LATER [s.ToDelete (a.k.a. uncomment)] */
    /* display: flex; */ /* UNCOMMENT LATER [s.ToDelete (a.k.a. uncomment)] */
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    /* min-height: 100%; */
    overflow-x: hidden;

    /* height: calc(100vh - 3.6vh); */
}

/* #image_area ul:hover { background-color: red; } */







/* .reference_img {
    height: 100%;
    width: 100%;
} */
.reference_img {
    position: relative;
}
/* .reference_img {
    overflow: clip;
} */

img {    overflow-clip-margin: 0;    }


.img_canvas {
    position: relative;
}
.img_canvas {
    cursor: cell;
    /* cursor: crosshair; */
    /* cursor: (cell) -5, -5; */
}
/* .img_canvas.selected_images {cursor: 'url(images/)'} */
/* .img_canvas.selected_images {cursor: url('../images/icons/cursor/cursor-icon-subtract_10x20.png')} */

/* .img_canvas.selected_images {cursor: url('../images/icons/cursor/cursor_icon-minus-1.png');} */

/* .img_canvas.selected_images {cursor: url('../images/icons/cursor')} */
/* .img_canvas.selected_images {cursor: url('../images/icons/cursor')} */
/* .img_canvas.selected_images {cursor: url('../images/icons/cursor')} */
/* .img_canvas.selected_images {cursor: url('../images/icons/cursor')} */



/* .img_canvas {height: auto;} */

 /* default 'zoomSize' */
/* .img_canvas {width: 90vw;} */


.selected_images {
    cursor: pointer;
    cursor: default;
    /* pointer-events: all; */


    /* Uncomment for multiple image [s.Important~!!!] */
    /* cursor: url('../images/icons/cursor/cursor_icon-minus-1.png'), auto; */
}

.selected_images {background-color: gray;}





/* .listItemIndexNumber => .list_item_index_number, .list_item_index */
/* .list_item_index_number_container {}
.list_item_index_number {} */


.list_item_index_number_container {
    border: 10px solid rgb(255, 240, 245, 0.14);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    /* box-sizing: content-box; */
    color: white;
    pointer-events: none;
    /* user-select: none; */
}




.list_item_index {
    z-index: 100;
    position: absolute;
    height: 100px;
    border: 2px dashed darkorchid;
    font-size: 3rem;
    font-size: 2.8rem;
    color: #333;
}


.list_item_index.number_1, 
.list_item_index.number_2 {
    border: 2px dashed darkorchid;
    border-style: solid;
}
.list_item_index.number_3, 
.list_item_index.number_4 {
    border: 1px dashed darkorchid;
    border-style: dotted;
}

.list_item_index.number_1 {
    content: '1';
    top: 0;
    left: 0;
    border-right: none;
}
.list_item_index.number_2 {
    top: 0;
    right: 0;
    border-left: none;
}
.list_item_index.number_3 {
    bottom: 0;
    right: 0;
    border-left: none;
}
.list_item_index.number_4 {
    bottom: 0;
    left: 0;
    border-right: none;
}

 /* .list_item_index p {} */
.list_item_index p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}




.list_item_index {
    padding: 0 15px;
    height: auto;
    /* width: auto; */
    max-height: 100px;
}
.list_item_index.number_1 {
    transform: translateX(-100%);
    left: -10px;
    top: 15%;
}
.list_item_index.number_2 {
    transform: translateX(100%);
    right: -10px;
    top: 15%;
}
.list_item_index.number_3 {
    transform: translateX(100%);
    right: -10px;
    bottom: 25%;
}
.list_item_index.number_4 {
    transform: translateX(-100%);
    left: -10px;
    bottom: 25%;
}



/* for inside the <canvas> */
/* .list_item_index_number_container {}
.list_item_index_number_container {
    display: inline-block;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 800;
} */





#img_grid_display, #fileList, #image_area, #image_area_ul {
    background: #E1FFB5;
    background-color: transparent; /* DELETE LATER [s.ToDelete] */
}



/* Grid Line Container [s.GridlineContainer] [s.GridContainer] */
.grid_line_container {
    position: absolute;
    /* top: 0; */
    /* width: 100%; */
    height: 100%;
    /* white-space: nowrap; */

    margin: auto;
}
.grid_line_container {
    background-color: transparent;
    pointer-events: none;
    z-index: 5;
    z-index: 1;
}

/*  -----  -----  -----  */


/*  -----  -----  -----  */


/* Grid Line Subcontainer [s.GridlineSubcontainer] [s.GridSubcontainer] */
.gridline_subcontainer {
    /* white-space: nowrap; */
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
}
.gridline_subcontainer {
    cursor: pointer;
    z-index: 5;
}

 /*  -----  -----  -----  */ /*  -----  -----  -----  */ 

 /*  -----  -----  -----  */ /*  -----  -----  -----  */ 

 /* #vertical_group_container, 
 #horizontal_group_container {} */
 #vertical_group_container, 
 #horizontal_group_container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    z-index: 5;
 }
 .vertical_group_container,
 .horizontal_group_container {
    position: absolute;
    /* width: 100%;
    height: 100%; */
    pointer-events: none;
 }

/* #vertical_group_container {}
#vertical_group_container {}

#horizontal_group_container {}
.horizontal_group_container {} */

/* .horizontal_group_container { background: rgb(0, 0, 0, 0.5); } */


 /*  -----  -----  -----  */ /*  -----  -----  -----  */ 

 /*  -----  -----  -----  */ /*  -----  -----  -----  */ 

 
/*  Assorted Lines [s.AssortedLines] */
/*  Grid Lines [s.Grid Lines] */
.vertical_line, 
.horizontal_line {
    position: absolute;
    display: inline-block;
    z-index: 1;
}
.vertical_line {
    top: 0;
    box-sizing: content-box;
}
.horizontal_line {
    left: 0;
    box-sizing: content-box;
    display: flex;
}
.horizontal-line:last-child {
    margin-top: 0;
    background-color: aquamarine;
}




/* #sample_images {}
.centered_img {}
.middle_image_1, .middle_image_2 {}
#sample_images.ul_modal_view {} */

/* #sample_images, 
#sample_images.ul_modal_view, 
#sample_images > li, 
#sample_images > li > canvas { */
/* #sample_images * {
    z-index: 999;
    background-color: pink;
} */




/* #left_arrow {}
#right_arrow {} */
/* .modal_arrows {}
#modal_left_arrow {}
#modal_right_arrow {} */
.modal_arrows {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    width: 4%;
    height: 90%;
    /* border: 2px solid white; */
    border: 2px solid rgba(200, 200, 200, 0.03);
    border: 2px solid rgba(200, 200, 200, 0.53);
    opacity: 0.2;

    display: none;
    /* transition: border 0.16s background-color 0.3s; */
}
.modal_arrows:hover {
    border: 2px solid rgba(200, 200, 200, 0.8);
    /* background-color: #222; */
    background-color: #333;
    transition: border 0.16s, background-color 0.3s;
    opacity: 0.4;
}
#modal_left_arrow {
    left: 0;
    border-left: none;
}
#modal_right_arrow {
    right: 0;
    border-right: none;
}

/* .modal_arrows.show {} */



.row_height {
    height: calc((100vh - 37px - 147px));
    min-height: 100vh;
}










/*   "grid_tools_crop.js"   */


/*   "grid_tools_crop.js"   */


/*   "grid_tools_crop.js"   */

#crop_rectangle_id {
    z-index: 999;
    position: absolute;
    background-color: grey;
    border: 3px solid skyblue;
    box-sizing: border-box;
}

.vertical_group_container,
.horizontal_group_container {cursor: grab;}
.vertical_group_container:active,
.horizontal_group_container:active {cursor: grabbing;}

/* 💥  💥  💥  💥  💥  💥  💥  💥 */
/* .gridline_subcontainer {pointer-events: none;}
.gridline_subcontainer {pointer-events: all;}
.vertical_group_container,
.horizontal_group_container {pointer-events: all;} */

/* .grid_line_container {pointer-events: none;} */

/* .gridline_subcontainer {pointer-events: none;} */
/* .vertical_group_container,
.horizontal_group_container {pointer-events: all;} */


.grid_moveable {
    pointer-events: all;
}